diff --git a/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx b/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
index a29255a9..4e28acf7 100644
--- a/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
+++ b/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
@@ -32,7 +32,7 @@ export function ListChangedIndicator({
List updated
- ↻ Refresh
+ Refresh
);
}
diff --git a/clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx b/clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx
index f94f4a5d..a75ba8d4 100644
--- a/clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx
+++ b/clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx
@@ -25,7 +25,6 @@ function formatPlaceholder(name: string): string {
}
export function PromptArgumentsForm({
- name,
description,
arguments: promptArguments,
argumentValues,
@@ -34,7 +33,7 @@ export function PromptArgumentsForm({
}: PromptArgumentsFormProps) {
return (
- {name}
+ Prompt Arguments
{description && {description}}
{promptArguments.length > 0 && (
diff --git a/clients/web/src/components/groups/PromptControls/PromptControls.tsx b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
index 7d3dd8c6..fb445030 100644
--- a/clients/web/src/components/groups/PromptControls/PromptControls.tsx
+++ b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
@@ -1,4 +1,4 @@
-import { ScrollArea, Stack, TextInput, Title } from "@mantine/core";
+import { Group, 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";
@@ -30,8 +30,10 @@ export function PromptControls({
return (
- Prompts
-
+
+ Prompts
+
+
- Resources
-
+
+ Resources
+
+
- Tools
-
+
+ Tools
+
+
= {
- title: "Groups/ResultPanel",
- component: ResultPanel,
+const meta: Meta = {
+ title: "Groups/ToolResultPanel",
+ component: ToolResultPanel,
args: {
onClear: fn(),
},
};
export default meta;
-type Story = StoryObj;
+type Story = StoryObj;
export const Empty: Story = {
args: {
diff --git a/clients/web/src/components/groups/ResultPanel/ResultPanel.tsx b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
similarity index 93%
rename from clients/web/src/components/groups/ResultPanel/ResultPanel.tsx
rename to clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
index 858e9178..46657a7a 100644
--- a/clients/web/src/components/groups/ResultPanel/ResultPanel.tsx
+++ b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
@@ -8,7 +8,7 @@ export interface ResultContentItem {
mimeType?: string;
}
-export interface ResultPanelProps {
+export interface ToolResultPanelProps {
content: ResultContentItem[];
onClear: () => void;
}
@@ -26,7 +26,7 @@ function resolveMediaType(mimeType?: string): "image" | "audio" {
return mimeType?.startsWith("image") ? "image" : "audio";
}
-export function ResultPanel({ content, onClear }: ResultPanelProps) {
+export function ToolResultPanel({ content, onClear }: ToolResultPanelProps) {
return (
Results
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index 1326c0cf..d3a37bed 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -14,7 +14,7 @@ export interface HistoryScreenProps {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
});
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index ac856bca..5d6af207 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -29,7 +29,7 @@ const ALL_LEVELS_VISIBLE: Record = {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
});
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index 1321710c..43df30f7 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -34,7 +34,7 @@ export interface PromptsScreenProps {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
});
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index 6eab615b..8f849acd 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -60,7 +60,7 @@ export interface ResourcesScreenProps {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
});
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
index 4bf7f401..700365b5 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
@@ -13,7 +13,7 @@ export interface TasksScreenProps {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
});
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
index 99b2c39f..41e00163 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
@@ -3,7 +3,7 @@ import { fn } from "storybook/test";
import { ToolsScreen } from "./ToolsScreen";
import type { ToolListItemProps } from "../../groups/ToolListItem/ToolListItem";
import type { ToolDetailPanelProps } from "../../groups/ToolDetailPanel/ToolDetailPanel";
-import type { ResultPanelProps } from "../../groups/ResultPanel/ResultPanel";
+import type { ToolResultPanelProps } from "../../groups/ToolResultPanel/ToolResultPanel";
const meta: Meta = {
title: "Screens/ToolsScreen",
@@ -67,7 +67,7 @@ const selectedToolData: ToolDetailPanelProps = {
onCancel: fn(),
};
-const resultData: ResultPanelProps = {
+const resultData: ToolResultPanelProps = {
content: [
{
type: "text",
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index 3f182c37..fe757c14 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -1,15 +1,15 @@
-import { Card, Flex, Grid, Stack, Text } from "@mantine/core";
+import { Card, Flex, Stack, Text } from "@mantine/core";
import { ToolControls } from "../../groups/ToolControls/ToolControls";
import { ToolDetailPanel } from "../../groups/ToolDetailPanel/ToolDetailPanel";
-import { ResultPanel } from "../../groups/ResultPanel/ResultPanel";
+import { ToolResultPanel } from "../../groups/ToolResultPanel/ToolResultPanel";
import type { ToolListItemProps } from "../../groups/ToolListItem/ToolListItem";
import type { ToolDetailPanelProps } from "../../groups/ToolDetailPanel/ToolDetailPanel";
-import type { ResultPanelProps } from "../../groups/ResultPanel/ResultPanel";
+import type { ToolResultPanelProps } from "../../groups/ToolResultPanel/ToolResultPanel";
export interface ToolsScreenProps {
tools: ToolListItemProps[];
selectedTool?: ToolDetailPanelProps;
- result?: ResultPanelProps;
+ result?: ToolResultPanelProps;
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
@@ -20,8 +20,9 @@ export interface ToolsScreenProps {
const ScreenLayout = Flex.withProps({
variant: "screen",
h: "calc(100vh - var(--app-shell-header-height, 0px))",
- gap: "xl",
+ gap: "md",
p: "xl",
+ align: "flex-start",
});
const Sidebar = Stack.withProps({
@@ -34,10 +35,9 @@ const SidebarCard = Card.withProps({
padding: "lg",
});
-const FullHeightCard = Card.withProps({
+const ContentCard = Card.withProps({
withBorder: true,
padding: "lg",
- h: "100%",
});
const EmptyState = Text.withProps({
@@ -71,27 +71,21 @@ export function ToolsScreen({
-
-
-
- {selectedTool ? (
-
- ) : (
- Select a tool to view details
- )}
-
-
+
+ {selectedTool ? (
+
+ ) : (
+ Select a tool to view details
+ )}
+
-
-
- {result ? (
-
- ) : (
- Results will appear here
- )}
-
-
-
+
+ {result ? (
+
+ ) : (
+ Results will appear here
+ )}
+
);
}
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
index 6b14eded..09802191 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
@@ -230,7 +230,7 @@ export const ToolsActive: Story = {
onClear: fn(),
}}
searchText=""
- listChanged={false}
+ listChanged={true}
onSearchChange={fn()}
onRefreshList={fn()}
onSelectTool={fn()}
@@ -446,7 +446,7 @@ export const ResourcesActive: Story = {
lastUpdated: "2026-03-17T11:15:00Z",
isSubscribed: false,
}}
- listChanged={false}
+ listChanged={true}
searchText=""
onSearchChange={fn()}
onRefreshList={fn()}
@@ -513,7 +513,7 @@ export const PromptsActive: Story = {
{ role: "assistant", content: "Hola, como estas?" },
],
}}
- listChanged={false}
+ listChanged={true}
searchText=""
onSearchChange={fn()}
onRefreshList={fn()}