Transcript
Agent codex
Model gpt-6.1-sol?reasoningEffort=low
Events 31
Status Success
Turns 4Tool Calls 12Thinking 0Errors 0
Shell 12
Shell (12)
/bin/bash -lc "pwd && rg --files -g 'AGENTS.md' -g 'package.json' -g '*Toggle*' -g '*stories*' -g 'tsconfig*' -g 'src/**' -g '.storybook/**' | head -80"/bin/bash -lc 'cat /workspace/.agents/skills/stories/SKILL.md'/bin/bash -lc "ls -la; cat package.json; cat src/main.tsx; cat tsconfig.app.json; find /workspace -name AGENTS.md -not -path '*/node_modules/*' -not -path '*/.git/*'"/bin/bash -lc 'npx storybook skills stories'/bin/bash -lc 'npx storybook tools docs list'/bin/bash -lc 'npx storybook tools docs show --id components-switch --storybookId reshaped; cat .storybook/preview.tsx'/bin/bash -lc "mkdir -p src/components; cat > src/components/ToggleSwitch.tsx <<'EOF'
import { useId } from 'react';
import { Switch } from 'reshaped';
export interface ToggleSwitchProps {
label: string;
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
}
/** A controlled switch with a visible, clickable accessible label. */
export function ToggleSwitch({
label,
checked,
onChange,
disabled = false,
}: ToggleSwitchProps) {
const id = useId();
return (
<Switch
id={id}
name={id}
checked={checked}
disabled={disabled}
onChange={({ checked: nextChecked }) => onChange(nextChecked)}
inputAttributes={{ role: 'switch', 'aria-checked': checked }}
>
{label}
</Switch>
);
}
export default ToggleSwitch;
EOF
cat > src/components/ToggleSwitch.stories.tsx <<'EOF'
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, fn } from 'storybook/test';
import { ToggleSwitch } from './ToggleSwitch';
const meta = {
title: 'Components/ToggleSwitch',
component: ToggleSwitch,
args: { label: 'Email notifications', checked: false, onChange: fn() },
render: function ControlledSwitch(args) {
const [checked, setChecked] = useState(args.checked);
return <ToggleSwitch {...args} checked={checked} onChange={(value) => {
setChecked(value);
args.onChange(value);
}} />;
},
} satisfies Meta<typeof ToggleSwitch>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Off: Story = {
play: async ({ canvas, userEvent, args }) => {
const toggle = canvas.getByRole('switch', { name: args.label });
await expect(toggle).not.toBeChecked();
await userEvent.click(canvas.getByText(args.label));
await expect(toggle).toBeChecked();
await expect(args.onChange).toHaveBeenCalledWith(true);
await userEvent.keyboard(' ');
await expect(toggle).not.toBeChecked();
await expect(args.onChange).toHaveBeenLastCalledWith(false);
},
};
export const On: Story = {
args: { checked: true },
play: async ({ canvas, userEvent, args }) => {
const toggle = canvas.getByRole('switch', { name: args.label });
await expect(toggle).toBeChecked();
await userEvent.tab();
await expect(toggle).toHaveFocus();
await userEvent.keyboard(' ');
await expect(toggle).not.toBeChecked();
await expect(args.onChange).toHaveBeenCalledWith(false);
},
};
export const DisabledOff: Story = {
args: { disabled: true },
play: async ({ canvas, userEvent, args }) => {
const toggle = canvas.getByRole('switch', { name: args.label });
await expect(toggle).toBeDisabled();
await userEvent.click(canvas.getByText(args.label));
await expect(toggle).not.toBeChecked();
await expect(args.onChange).not.toHaveBeenCalled();
},
};
export const DisabledOn: Story = {
...DisabledOff,
args: { disabled: true, checked: true },
play: async ({ canvas, userEvent, args }) => {
const toggle = canvas.getByRole('switch', { name: args.label });
await expect(toggle).toBeDisabled();
await userEvent.click(canvas.getByText(args.label));
await expect(toggle).toBeChecked();
await expect(args.onChange).not.toHaveBeenCalled();
},
};
EOF
npm run typecheck"/bin/bash -lc 'npx storybook tools test run'/bin/bash -lc 'curl -I -s http://localhost:6006; cat /workspace/.agents/skills/control-in-app-browser/SKILL.md'/bin/bash -lc 'npx storybook tools stories changed'