Normalize screen layouts: extract control groups, unify sidebar widths, and refactor PromptsScreen

- Extract ToolControls group from ToolsScreen (search, list, list-changed indicator)
- Extract PromptControls and PromptListItem groups for PromptsScreen sidebar
- Refactor PromptsScreen to sidebar + detail layout (matching ResourcesScreen pattern)
- Refactor PromptArgumentsForm to accept a single prompt instead of a dropdown
- Normalize all screen sidebar widths to 340px (Tools, Resources, Prompts, Logs, Tasks, History)
- Convert ToolsScreen from Grid-only to sidebar + Grid layout
- Replace LogControls checkboxes with full-width toggle buttons
- Move Clear/Export buttons from LogControls to LogStreamPanel toolbar
- Make PromptArgumentsForm "Get Prompt" button right-aligned and compact
- Update all affected stories and ConnectedView

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-31 17:54:20 -04:00
commit a6724626b7

View file

@ -0,0 +1,70 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { ToolControls } from "./ToolControls";
const meta: Meta<typeof ToolControls> = {
title: "Groups/ToolControls",
component: ToolControls,
args: {
searchText: "",
onSearchChange: fn(),
onRefreshList: fn(),
onSelectTool: fn(),
listChanged: false,
},
};
export default meta;
type Story = StoryObj<typeof ToolControls>;
const sampleTools = [
{
name: "send_message",
title: "Send Message",
selected: false,
onClick: fn(),
},
{
name: "create_record",
title: "Create Record",
selected: false,
onClick: fn(),
},
{ name: "delete_records", selected: false, onClick: fn() },
{ name: "list_users", selected: false, onClick: fn() },
{ name: "batch_process", selected: false, onClick: fn() },
];
export const Default: Story = {
args: {
tools: sampleTools,
},
};
export const WithSelection: Story = {
args: {
tools: sampleTools.map((t) =>
t.name === "create_record" ? { ...t, selected: true } : t,
),
},
};
export const WithSearch: Story = {
args: {
tools: sampleTools,
searchText: "send",
},
};
export const ListChanged: Story = {
args: {
tools: sampleTools,
listChanged: true,
},
};
export const Empty: Story = {
args: {
tools: [],
},
};