Share long tool fixture across ToolControls and InspectorView stories

Extract a 20-tool fixture (filesystem, database, git, http, misc) into
ToolsScreen.fixtures.ts — large enough that the ToolControls list scrolls
and the Tools tab in InspectorView shows realistic surface area.

Wire it into the Default stories of both ToolControls and InspectorView,
mirroring the LoggingScreen.fixtures.ts pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-26 11:25:54 -04:00
commit bb8241c2aa

View file

@ -1,7 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { Tool } from "@modelcontextprotocol/sdk/types.js";
import { fn } from "storybook/test";
import { ToolControls } from "./ToolControls";
import { longToolList } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
const meta: Meta<typeof ToolControls> = {
title: "Groups/ToolControls",
@ -16,44 +16,28 @@ const meta: Meta<typeof ToolControls> = {
export default meta;
type Story = StoryObj<typeof ToolControls>;
const sampleTools: Tool[] = [
{
name: "send_message",
title: "Send Message",
inputSchema: { type: "object" },
},
{
name: "create_record",
title: "Create Record",
inputSchema: { type: "object" },
},
{ name: "delete_records", inputSchema: { type: "object" } },
{ name: "list_users", inputSchema: { type: "object" } },
{ name: "batch_process", inputSchema: { type: "object" } },
];
export const Default: Story = {
args: {
tools: sampleTools,
tools: longToolList,
},
};
export const WithSelection: Story = {
args: {
tools: sampleTools,
selectedName: "create_record",
tools: longToolList,
selectedName: "query_database",
},
};
export const WithSearch: Story = {
args: {
tools: sampleTools,
tools: longToolList,
},
};
export const ListChanged: Story = {
args: {
tools: sampleTools,
tools: longToolList,
listChanged: true,
},
};