modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
- 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
19 changed files with 627 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

3
clients/web/src/components/groups/LogControls/LogControls.stories.tsx
View file

@ -20,8 +20,7 @@ const meta: Meta<typeof LogControls> = {
onSetLevel: fn(),
onFilterChange: fn(),
onToggleLevel: fn(),
onClear: fn(),
onExport: fn(),
onToggleAllLevels: fn(),
},
};

58
clients/web/src/components/groups/LogControls/LogControls.tsx
View file

@ -1,12 +1,12 @@
import {
Button,
Checkbox,
Group,
Select,
Stack,
Text,
TextInput,
Title,
UnstyledButton,
} from "@mantine/core";
const LOG_LEVELS = [
@ -20,22 +20,17 @@ const LOG_LEVELS = [
"emergency",
] as const;
const LEVEL_COLORS: Record<string, { c: string; fw?: number }> = {
const LEVEL_COLORS: Record<string, { c: string }> = {
debug: { c: "dimmed" },
info: { c: "blue" },
notice: { c: "teal" },
warning: { c: "yellow" },
error: { c: "red" },
critical: { c: "red", fw: 700 },
alert: { c: "red", fw: 700 },
emergency: { c: "red", fw: 900 },
critical: { c: "red" },
alert: { c: "red" },
emergency: { c: "red" },
};
const ToolbarButton = Button.withProps({
variant: "light",
size: "sm",
});
const SubtleButton = Button.withProps({
variant: "subtle",
size: "xs",
@ -49,8 +44,6 @@ export interface LogControlsProps {
onFilterChange: (text: string) => void;
onToggleLevel: (level: string, visible: boolean) => void;
onToggleAllLevels: () => void;
onClear: () => void;
onExport: () => void;
}
export function LogControls({
@ -61,8 +54,6 @@ export function LogControls({
onFilterChange,
onToggleLevel,
onToggleAllLevels,
onClear,
onExport,
}: LogControlsProps) {
return (
<Stack gap="md">
@ -71,6 +62,7 @@ export function LogControls({
<Title order={5}>Active Level</Title>
<Group wrap="nowrap">
<Select
flex={1}
data={LOG_LEVELS.map((level) => ({ value: level, label: level }))}
value={currentLevel}
onChange={(value) => {
@ -97,26 +89,24 @@ export function LogControls({
: "Select All"}
</SubtleButton>
</Group>
{LOG_LEVELS.map((level) => {
const style = LEVEL_COLORS[level];
return (
<Checkbox
key={level}
checked={!!visibleLevels[level]}
onChange={(e) => onToggleLevel(level, e.currentTarget.checked)}
label={
<Text c={style.c} fw={style.fw}>
{level}
</Text>
}
/>
);
})}
<Group>
<ToolbarButton onClick={onClear}>Clear</ToolbarButton>
<ToolbarButton onClick={onExport}>Export</ToolbarButton>
</Group>
<Stack gap="xs">
{LOG_LEVELS.map((level) => {
const style = LEVEL_COLORS[level];
const active = !!visibleLevels[level];
return (
<UnstyledButton
key={level}
w="100%"
p="sm"
variant="listItem"
bg={active ? "var(--mantine-primary-color-light)" : undefined}
onClick={() => onToggleLevel(level, !active)}
>
<Text c={style.c} ta="center" fw={500}>{level}</Text>
</UnstyledButton>
);
})}
</Stack>
</Stack>
);
}

2
clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
View file

@ -21,6 +21,8 @@ const meta: Meta<typeof LogStreamPanel> = {
autoScroll: true,
onToggleAutoScroll: fn(),
onCopyAll: fn(),
onClear: fn(),
onExport: fn(),
},
};

6
clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
View file

@ -19,6 +19,8 @@ export interface LogStreamPanelProps {
autoScroll: boolean;
onToggleAutoScroll: () => void;
onCopyAll: () => void;
onClear: () => void;
onExport: () => void;
}
const PanelContainer = Paper.withProps({
@ -61,6 +63,8 @@ export function LogStreamPanel({
autoScroll,
onToggleAutoScroll,
onCopyAll,
onClear,
onExport,
}: LogStreamPanelProps) {
const filteredEntries = useMemo(
() => entries.filter((e) => matchesFilters(e, filterText, visibleLevels)),
@ -77,6 +81,8 @@ export function LogStreamPanel({
checked={autoScroll}
onChange={onToggleAutoScroll}
/>
<ToolbarButton onClick={onClear}>Clear</ToolbarButton>
<ToolbarButton onClick={onExport}>Export</ToolbarButton>
<ToolbarButton onClick={onCopyAll}>Copy All</ToolbarButton>
</Group>
</Group>

43
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.stories.tsx
View file

@ -6,7 +6,6 @@ const meta: Meta<typeof PromptArgumentsForm> = {
title: "Groups/PromptArgumentsForm",
component: PromptArgumentsForm,
args: {
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
},
@ -15,31 +14,19 @@ const meta: Meta<typeof PromptArgumentsForm> = {
export default meta;
type Story = StoryObj<typeof PromptArgumentsForm>;
const samplePrompts = [
{
export const NoArguments: Story = {
args: {
name: "summarize",
description: "Summarize the given text into key points",
},
{
name: "translate",
description: "Translate text from one language to another",
},
{ name: "analyze", description: "Analyze sentiment and tone of the text" },
];
export const NoSelection: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: undefined,
arguments: [],
argumentValues: {},
},
};
export const Selected: Story = {
export const WithArguments: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "translate",
name: "translate",
description: "Translate text from one language to another",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
@ -52,10 +39,10 @@ export const Selected: Story = {
},
};
export const WithRequiredArgs: Story = {
export const WithRequiredAndOptional: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "summarize",
name: "summarize",
description: "Summarize the given text into key points",
arguments: [
{ name: "text", required: true, description: "The text to summarize" },
{
@ -75,8 +62,8 @@ export const WithRequiredArgs: Story = {
export const AllFilled: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "translate",
name: "translate",
description: "Translate text from one language to another",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
@ -91,3 +78,13 @@ export const AllFilled: Story = {
},
},
};
export const NoDescription: Story = {
args: {
name: "code-review",
arguments: [
{ name: "code", required: true, description: "The code to review" },
],
argumentValues: {},
},
};

45
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx
View file

@ -1,4 +1,4 @@
import { Button, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { Button, Group, Stack, Text, TextInput, Title } from "@mantine/core";
export interface PromptArgument {
name: string;
@ -6,17 +6,11 @@ export interface PromptArgument {
description?: string;
}
export interface PromptInfo {
export interface PromptArgumentsFormProps {
name: string;
description?: string;
}
export interface PromptArgumentsFormProps {
prompts: PromptInfo[];
selectedPrompt?: string;
arguments: PromptArgument[];
argumentValues: Record<string, string>;
onSelectPrompt: (name: string) => void;
onArgumentChange: (name: string, value: string) => void;
onGetPrompt: () => void;
}
@ -31,34 +25,19 @@ function formatPlaceholder(name: string): string {
}
export function PromptArgumentsForm({
prompts,
selectedPrompt,
name,
description,
arguments: promptArguments,
argumentValues,
onSelectPrompt,
onArgumentChange,
onGetPrompt,
}: PromptArgumentsFormProps) {
const selectedPromptInfo = prompts.find((p) => p.name === selectedPrompt);
return (
<Stack gap="md">
<Title order={4}>Prompts</Title>
<Select
data={prompts.map((p) => ({ value: p.name, label: p.name }))}
value={selectedPrompt ?? null}
onChange={(value) => {
if (value) {
onSelectPrompt(value);
}
}}
placeholder="Choose a prompt..."
/>
{selectedPrompt && selectedPromptInfo?.description && (
<DescriptionText>{selectedPromptInfo.description}</DescriptionText>
)}
<Title order={4}>{name}</Title>
{description && <DescriptionText>{description}</DescriptionText>}
{promptArguments.length > 0 && (
<>
<Stack gap="sm">
{promptArguments.map((arg) => (
<TextInput
key={arg.name}
@ -72,11 +51,13 @@ export function PromptArgumentsForm({
}
/>
))}
</>
</Stack>
)}
<Button fullWidth onClick={onGetPrompt} disabled={!selectedPrompt}>
Get Prompt
</Button>
<Group justify="flex-end">
<Button size="sm" onClick={onGetPrompt}>
Get Prompt
</Button>
</Group>
</Stack>
);
}

76
clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx Normal file
View file

@ -0,0 +1,76 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptControls } from "./PromptControls";
const meta: Meta<typeof PromptControls> = {
title: "Groups/PromptControls",
component: PromptControls,
args: {
searchText: "",
onSearchChange: fn(),
onRefreshList: fn(),
onSelectPrompt: fn(),
listChanged: false,
},
};
export default meta;
type Story = StoryObj<typeof PromptControls>;
const samplePrompts = [
{
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
{
name: "translate",
description: "Translate text from one language to another",
selected: false,
},
{
name: "analyze",
description: "Analyze sentiment and tone of the text",
selected: false,
},
{
name: "code-review",
description: "Review code for issues",
selected: false,
},
{ name: "refactor", selected: false },
];
export const Default: Story = {
args: {
prompts: samplePrompts,
},
};
export const WithSelection: Story = {
args: {
prompts: samplePrompts.map((p) =>
p.name === "translate" ? { ...p, selected: true } : p,
),
},
};
export const WithSearch: Story = {
args: {
prompts: samplePrompts,
searchText: "sum",
},
};
export const ListChanged: Story = {
args: {
prompts: samplePrompts,
listChanged: true,
},
};
export const Empty: Story = {
args: {
prompts: [],
},
};

55
clients/web/src/components/groups/PromptControls/PromptControls.tsx Normal file
View file

@ -0,0 +1,55 @@
import { ScrollArea, Stack, TextInput, Title } from "@mantine/core";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import { PromptListItem } from "../PromptListItem/PromptListItem";
import type { PromptItem } from "../../screens/PromptsScreen/PromptsScreen";
export interface PromptControlsProps {
prompts: PromptItem[];
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectPrompt: (name: string) => void;
}
function listMaxHeight(): string {
return "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 160px)";
}
export function PromptControls({
prompts,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectPrompt,
}: PromptControlsProps) {
const filteredPrompts = prompts.filter((p) =>
p.name.toLowerCase().includes(searchText.toLowerCase()),
);
return (
<Stack gap="sm">
<Title order={4}>Prompts</Title>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
<TextInput
placeholder="Search prompts..."
value={searchText}
onChange={(e) => onSearchChange(e.currentTarget.value)}
/>
<ScrollArea.Autosize mah={listMaxHeight()}>
<Stack gap="xs">
{filteredPrompts.map((prompt) => (
<PromptListItem
key={prompt.name}
name={prompt.name}
description={prompt.description}
selected={prompt.selected}
onClick={() => onSelectPrompt(prompt.name)}
/>
))}
</Stack>
</ScrollArea.Autosize>
</Stack>
);
}

37
clients/web/src/components/groups/PromptListItem/PromptListItem.stories.tsx Normal file
View file

@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptListItem } from "./PromptListItem";
const meta: Meta<typeof PromptListItem> = {
title: "Groups/PromptListItem",
component: PromptListItem,
args: {
onClick: fn(),
},
};
export default meta;
type Story = StoryObj<typeof PromptListItem>;
export const Default: Story = {
args: {
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
};
export const Selected: Story = {
args: {
name: "translate",
description: "Translate text from one language to another",
selected: true,
},
};
export const NoDescription: Story = {
args: {
name: "code-review",
selected: false,
},
};

40
clients/web/src/components/groups/PromptListItem/PromptListItem.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Stack, Text, UnstyledButton } from "@mantine/core";
export interface PromptListItemProps {
name: string;
description?: string;
selected: boolean;
onClick: () => void;
}
const NameText = Text.withProps({
fw: 500,
});
const DescriptionText = Text.withProps({
size: "xs",
c: "dimmed",
lineClamp: 1,
});
export function PromptListItem({
name,
description,
selected,
onClick,
}: PromptListItemProps) {
return (
<UnstyledButton
w="100%"
p="sm"
variant="listItem"
bg={selected ? "var(--mantine-primary-color-light)" : undefined}
onClick={onClick}
>
<Stack gap={2}>
<NameText>{name}</NameText>
{description && <DescriptionText>{description}</DescriptionText>}
</Stack>
</UnstyledButton>
);
}

70
clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx Normal file
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: [],
},
};

55
clients/web/src/components/groups/ToolControls/ToolControls.tsx Normal file
View file

@ -0,0 +1,55 @@
import { ScrollArea, Stack, TextInput, Title } from "@mantine/core";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import { ToolListItem } from "../ToolListItem/ToolListItem";
import type { ToolListItemProps } from "../ToolListItem/ToolListItem";
export interface ToolControlsProps {
tools: ToolListItemProps[];
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectTool: (name: string) => void;
}
function listMaxHeight(): string {
return "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 160px)";
}
export function ToolControls({
tools,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectTool,
}: ToolControlsProps) {
const filteredTools = searchText
? tools.filter((tool) =>
tool.name.toLowerCase().includes(searchText.toLowerCase()),
)
: tools;
return (
<Stack gap="sm">
<Title order={4}>Tools</Title>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(e) => onSearchChange(e.currentTarget.value)}
/>
<ScrollArea.Autosize mah={listMaxHeight()}>
<Stack gap="xs">
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/>
))}
</Stack>
</ScrollArea.Autosize>
</Stack>
);
}

2
clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
View file

@ -19,7 +19,7 @@ const ScreenLayout = Flex.withProps({
});
const Sidebar = Stack.withProps({
w: 280,
w: 340,
flex: "0 0 auto",
});

6
clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
View file

@ -34,7 +34,7 @@ const ScreenLayout = Flex.withProps({
});
const Sidebar = Stack.withProps({
w: 280,
w: 340,
flex: "0 0 auto",
});
@ -82,8 +82,6 @@ export function LoggingScreen({
onFilterChange={setFilterText}
onToggleLevel={handleToggleLevel}
onToggleAllLevels={handleToggleAllLevels}
onClear={onClear}
onExport={onExport}
/>
</SidebarCard>
</Sidebar>
@ -94,6 +92,8 @@ export function LoggingScreen({
autoScroll={autoScroll}
onToggleAutoScroll={onToggleAutoScroll}
onCopyAll={onCopyAll}
onClear={onClear}
onExport={onExport}
/>
</ScreenLayout>
);

113
clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
View file

@ -1,69 +1,90 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptsScreen } from "./PromptsScreen";
import type { PromptItem, SelectedPrompt } from "./PromptsScreen";
const meta: Meta<typeof PromptsScreen> = {
title: "Screens/PromptsScreen",
component: PromptsScreen,
parameters: { layout: "fullscreen" },
args: {
searchText: "",
onSearchChange: fn(),
onRefreshList: fn(),
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
listChanged: false,
},
};
export default meta;
type Story = StoryObj<typeof PromptsScreen>;
const samplePrompts: PromptItem[] = [
{
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
{
name: "translate",
description: "Translate text from one language to another",
selected: false,
},
{
name: "code-review",
description: "Review code for issues",
selected: false,
},
{
name: "analyze",
description: "Analyze sentiment and tone of the text",
selected: false,
},
{ name: "refactor", selected: false },
];
const selectedTranslate: SelectedPrompt = {
name: "translate",
description: "Translate text from one language to another",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
name: "targetLanguage",
required: true,
description: "Target language code",
},
],
argumentValues: {},
};
export const NoSelection: Story = {
args: {
promptForm: {
prompts: [
{ name: "summarize", description: "Summarize a document" },
{
name: "translate",
description: "Translate text to another language",
},
{ name: "code-review", description: "Review code for issues" },
],
selectedPrompt: undefined,
arguments: [],
argumentValues: {},
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
},
messages: undefined,
listChanged: false,
prompts: samplePrompts,
},
};
export const PromptSelected: Story = {
args: {
prompts: samplePrompts.map((p) =>
p.name === "translate" ? { ...p, selected: true } : p,
),
selectedPrompt: selectedTranslate,
},
};
export const WithResult: Story = {
args: {
promptForm: {
prompts: [
{ name: "summarize", description: "Summarize a document" },
{
name: "translate",
description: "Translate text to another language",
},
{ name: "code-review", description: "Review code for issues" },
],
selectedPrompt: "translate",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
name: "targetLanguage",
required: true,
description: "Target language code",
},
],
prompts: samplePrompts.map((p) =>
p.name === "translate" ? { ...p, selected: true } : p,
),
selectedPrompt: {
...selectedTranslate,
argumentValues: {
text: "Hello, how are you?",
targetLanguage: "es",
},
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
},
messages: {
onCopyAll: fn(),
@ -79,6 +100,18 @@ export const WithResult: Story = {
},
],
},
listChanged: false,
},
};
export const ListChanged: Story = {
args: {
prompts: samplePrompts,
listChanged: true,
},
};
export const Empty: Story = {
args: {
prompts: [],
},
};

135
clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
View file

@ -1,26 +1,56 @@
import { Card, Container, Grid, Stack, Text } from "@mantine/core";
import { Card, Flex, ScrollArea, Stack, Text } from "@mantine/core";
import { PromptControls } from "../../groups/PromptControls/PromptControls";
import { PromptArgumentsForm } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
import { PromptMessagesDisplay } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import type { PromptArgumentsFormProps } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
import type { PromptArgument } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
import type { PromptMessagesDisplayProps } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
export interface PromptsScreenProps {
promptForm: PromptArgumentsFormProps;
messages?: PromptMessagesDisplayProps;
listChanged: boolean;
onRefreshList: () => void;
export interface PromptItem {
name: string;
description?: string;
selected: boolean;
}
const PageContainer = Container.withProps({
size: "xl",
py: "xl",
export interface SelectedPrompt {
name: string;
description?: string;
arguments: PromptArgument[];
argumentValues: Record<string, string>;
}
export interface PromptsScreenProps {
prompts: PromptItem[];
selectedPrompt?: SelectedPrompt;
messages?: PromptMessagesDisplayProps;
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectPrompt: (name: string) => void;
onArgumentChange: (name: string, value: string) => void;
onGetPrompt: () => void;
}
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
gap: "xl",
p: "xl",
});
const FullHeightCard = Card.withProps({
const Sidebar = Stack.withProps({
w: 340,
flex: "0 0 auto",
});
const SidebarCard = Card.withProps({
withBorder: true,
padding: "lg",
});
const DetailCard = Card.withProps({
withBorder: true,
padding: "lg",
h: "100%",
});
const EmptyState = Text.withProps({
@ -30,37 +60,62 @@ const EmptyState = Text.withProps({
});
export function PromptsScreen({
promptForm,
prompts,
selectedPrompt,
messages,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectPrompt,
onArgumentChange,
onGetPrompt,
}: PromptsScreenProps) {
return (
<PageContainer>
<Grid align="stretch">
<Grid.Col span={5}>
<FullHeightCard>
<Stack gap="md">
<ListChangedIndicator
visible={listChanged}
onRefresh={onRefreshList}
/>
<PromptArgumentsForm {...promptForm} />
</Stack>
</FullHeightCard>
</Grid.Col>
<Grid.Col span={7}>
<FullHeightCard>
{messages ? (
<PromptMessagesDisplay {...messages} />
) : (
<EmptyState>
Select a prompt and click Get Prompt to see messages
</EmptyState>
)}
</FullHeightCard>
</Grid.Col>
</Grid>
</PageContainer>
<ScreenLayout>
<Sidebar>
<SidebarCard>
<PromptControls
prompts={prompts}
listChanged={listChanged}
searchText={searchText}
onSearchChange={onSearchChange}
onRefreshList={onRefreshList}
onSelectPrompt={onSelectPrompt}
/>
</SidebarCard>
</Sidebar>
<ScrollArea.Autosize
flex={1}
mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
>
<Stack gap="md">
{selectedPrompt ? (
<>
<DetailCard>
<PromptArgumentsForm
name={selectedPrompt.name}
description={selectedPrompt.description}
arguments={selectedPrompt.arguments}
argumentValues={selectedPrompt.argumentValues}
onArgumentChange={onArgumentChange}
onGetPrompt={onGetPrompt}
/>
</DetailCard>
{messages && (
<DetailCard>
<PromptMessagesDisplay {...messages} />
</DetailCard>
)}
</>
) : (
<DetailCard>
<EmptyState>Select a prompt to view details</EmptyState>
</DetailCard>
)}
</Stack>
</ScrollArea.Autosize>
</ScreenLayout>
);
}

2
clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
View file

@ -18,7 +18,7 @@ const ScreenLayout = Flex.withProps({
});
const Sidebar = Stack.withProps({
w: 280,
w: 340,
flex: "0 0 auto",
});

82
clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
View file

@ -1,14 +1,5 @@
import {
Card,
Container,
Grid,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import { ToolListItem } from "../../groups/ToolListItem/ToolListItem";
import { Card, Flex, Grid, Stack, Text } from "@mantine/core";
import { ToolControls } from "../../groups/ToolControls/ToolControls";
import { ToolDetailPanel } from "../../groups/ToolDetailPanel/ToolDetailPanel";
import { ResultPanel } from "../../groups/ResultPanel/ResultPanel";
import type { ToolListItemProps } from "../../groups/ToolListItem/ToolListItem";
@ -26,9 +17,21 @@ export interface ToolsScreenProps {
onSelectTool: (name: string) => void;
}
const PageContainer = Container.withProps({
size: "xl",
py: "xl",
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
gap: "xl",
p: "xl",
});
const Sidebar = Stack.withProps({
w: 340,
flex: "0 0 auto",
});
const SidebarCard = Card.withProps({
withBorder: true,
padding: "lg",
});
const FullHeightCard = Card.withProps({
@ -53,40 +56,23 @@ export function ToolsScreen({
onRefreshList,
onSelectTool,
}: ToolsScreenProps) {
const filteredTools = searchText
? tools.filter((tool) =>
tool.name.toLowerCase().includes(searchText.toLowerCase()),
)
: tools;
return (
<PageContainer>
<Grid align="stretch">
<Grid.Col span={3}>
<FullHeightCard>
<Stack gap="sm">
<Title order={4}>Tools</Title>
<ListChangedIndicator
visible={listChanged}
onRefresh={onRefreshList}
/>
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/>
))}
</Stack>
</FullHeightCard>
</Grid.Col>
<ScreenLayout>
<Sidebar>
<SidebarCard>
<ToolControls
tools={tools}
listChanged={listChanged}
searchText={searchText}
onSearchChange={onSearchChange}
onRefreshList={onRefreshList}
onSelectTool={onSelectTool}
/>
</SidebarCard>
</Sidebar>
<Grid.Col span={5}>
<Grid align="stretch" flex={1}>
<Grid.Col span={7}>
<FullHeightCard>
{selectedTool ? (
<ToolDetailPanel {...selectedTool} />
@ -96,7 +82,7 @@ export function ToolsScreen({
</FullHeightCard>
</Grid.Col>
<Grid.Col span={4}>
<Grid.Col span={5}>
<FullHeightCard>
{result ? (
<ResultPanel {...result} />
@ -106,6 +92,6 @@ export function ToolsScreen({
</FullHeightCard>
</Grid.Col>
</Grid>
</PageContainer>
</ScreenLayout>
);
}

38
clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
View file

@ -465,16 +465,26 @@ export const PromptsActive: Story = {
activeTab: "Prompts",
children: (
<PromptsScreen
promptForm={{
prompts: [
{ name: "summarize", description: "Summarize a document" },
{
name: "translate",
description: "Translate text to another language",
},
{ name: "code-review", description: "Review code for issues" },
],
selectedPrompt: "translate",
prompts={[
{
name: "summarize",
description: "Summarize a document",
selected: false,
},
{
name: "translate",
description: "Translate text to another language",
selected: true,
},
{
name: "code-review",
description: "Review code for issues",
selected: false,
},
]}
selectedPrompt={{
name: "translate",
description: "Translate text to another language",
arguments: [
{
name: "text",
@ -491,9 +501,6 @@ export const PromptsActive: Story = {
text: "Hello, how are you?",
targetLanguage: "es",
},
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
}}
messages={{
onCopyAll: fn(),
@ -507,7 +514,12 @@ export const PromptsActive: Story = {
],
}}
listChanged={false}
searchText=""
onSearchChange={fn()}
onRefreshList={fn()}
onSelectPrompt={fn()}
onArgumentChange={fn()}
onGetPrompt={fn()}
/>
),
},