From 5594e940c97b2f2fee4ee2270490ff79adc5a83a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 1 Apr 2026 12:47:41 -0400
Subject: [PATCH] Inline ListChangedIndicator with titles, normalize screen
 gaps, and rename ResultPanel to ToolResultPanel

- Place ListChangedIndicator on same line as section titles using Group with space-between in ToolControls, ResourceControls, and PromptControls
- Add ListChanged stories for ResourceControls and show indicators in ConnectedView stories
- Normalize ScreenLayout gap from "xl" to "md" across all screens for consistent spacing
- Rename ResultPanel to ToolResultPanel (component, interface, files, and stories)
- Replace Grid layout in ToolsScreen with equal-width flex children for detail and result panels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ListChangedIndicator.tsx                  |  2 +-
 .../PromptArgumentsForm.tsx                   |  3 +-
 .../groups/PromptControls/PromptControls.tsx  |  8 ++--
 .../ResourceControls.stories.tsx              |  7 +++
 .../ResourceControls/ResourceControls.tsx     | 15 ++++--
 .../groups/ToolControls/ToolControls.tsx      |  8 ++--
 .../ToolResultPanel.stories.tsx}              | 10 ++--
 .../ToolResultPanel.tsx}                      |  4 +-
 .../screens/HistoryScreen/HistoryScreen.tsx   |  2 +-
 .../screens/LoggingScreen/LoggingScreen.tsx   |  2 +-
 .../screens/PromptsScreen/PromptsScreen.tsx   |  2 +-
 .../ResourcesScreen/ResourcesScreen.tsx       |  2 +-
 .../screens/TasksScreen/TasksScreen.tsx       |  2 +-
 .../ToolsScreen/ToolsScreen.stories.tsx       |  4 +-
 .../screens/ToolsScreen/ToolsScreen.tsx       | 48 ++++++++-----------
 .../ConnectedView/ConnectedView.stories.tsx   |  6 +--
 16 files changed, 69 insertions(+), 56 deletions(-)
 rename clients/web/src/components/groups/{ResultPanel/ResultPanel.stories.tsx => ToolResultPanel/ToolResultPanel.stories.tsx} (85%)
 rename clients/web/src/components/groups/{ResultPanel/ResultPanel.tsx => ToolResultPanel/ToolResultPanel.tsx} (93%)

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({
     <Group gap="xs">
       <Dot />
       <UpdateLabel>List updated</UpdateLabel>
-      <RefreshButton onClick={onRefresh}>↻ Refresh</RefreshButton>
+      <RefreshButton onClick={onRefresh}>Refresh</RefreshButton>
     </Group>
   );
 }
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 (
     <Stack gap="md">
-      <Title order={4}>{name}</Title>
+      <Title order={4}>Prompt Arguments</Title>
       {description && <DescriptionText>{description}</DescriptionText>}
       {promptArguments.length > 0 && (
         <Stack gap="sm">
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 (
     <Stack gap="sm">
-      <Title order={4}>Prompts</Title>
-      <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      <Group justify="space-between">
+        <Title order={4}>Prompts</Title>
+        <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      </Group>
       <TextInput
         placeholder="Search prompts..."
         value={searchText}
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
index d4a72c34..fa5458af 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
@@ -63,6 +63,13 @@ export const WithSearch: Story = {
   },
 };
 
+export const ListChanged: Story = {
+  args: {
+    ...Default.args,
+    listChanged: true,
+  },
+};
+
 export const Empty: Story = {
   args: {
     resources: [],
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
index 367b5ed1..650ae6f2 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
@@ -1,5 +1,12 @@
 import { useState } from "react";
-import { Accordion, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
+import {
+  Accordion,
+  Group,
+  ScrollArea,
+  Stack,
+  TextInput,
+  Title,
+} from "@mantine/core";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { ResourceListItem } from "../ResourceListItem/ResourceListItem";
 import { ResourceSubscribedItem } from "../ResourceSubscribedItem/ResourceSubscribedItem";
@@ -68,8 +75,10 @@ export function ResourceControls({
 
   return (
     <Stack gap="sm">
-      <Title order={4}>Resources</Title>
-      <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      <Group justify="space-between">
+        <Title order={4}>Resources</Title>
+        <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      </Group>
       <TextInput
         placeholder="Search..."
         value={searchText}
diff --git a/clients/web/src/components/groups/ToolControls/ToolControls.tsx b/clients/web/src/components/groups/ToolControls/ToolControls.tsx
index 23eb7300..590140d7 100644
--- a/clients/web/src/components/groups/ToolControls/ToolControls.tsx
+++ b/clients/web/src/components/groups/ToolControls/ToolControls.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 { ToolListItem } from "../ToolListItem/ToolListItem";
 import type { ToolListItemProps } from "../ToolListItem/ToolListItem";
@@ -32,8 +32,10 @@ export function ToolControls({
 
   return (
     <Stack gap="sm">
-      <Title order={4}>Tools</Title>
-      <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      <Group justify="space-between">
+        <Title order={4}>Tools</Title>
+        <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      </Group>
       <TextInput
         placeholder="Search tools..."
         value={searchText}
diff --git a/clients/web/src/components/groups/ResultPanel/ResultPanel.stories.tsx b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.stories.tsx
similarity index 85%
rename from clients/web/src/components/groups/ResultPanel/ResultPanel.stories.tsx
rename to clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.stories.tsx
index aaca03ed..95b10150 100644
--- a/clients/web/src/components/groups/ResultPanel/ResultPanel.stories.tsx
+++ b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.stories.tsx
@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { ResultPanel } from "./ResultPanel";
+import { ToolResultPanel } from "./ToolResultPanel";
 
-const meta: Meta<typeof ResultPanel> = {
-  title: "Groups/ResultPanel",
-  component: ResultPanel,
+const meta: Meta<typeof ToolResultPanel> = {
+  title: "Groups/ToolResultPanel",
+  component: ToolResultPanel,
   args: {
     onClear: fn(),
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ResultPanel>;
+type Story = StoryObj<typeof ToolResultPanel>;
 
 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 (
     <Stack>
       <Title order={4}>Results</Title>
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<string, boolean> = {
 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<typeof ToolsScreen> = {
   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({
         </SidebarCard>
       </Sidebar>
 
-      <Grid align="stretch" flex={1}>
-        <Grid.Col span={7}>
-          <FullHeightCard>
-            {selectedTool ? (
-              <ToolDetailPanel {...selectedTool} />
-            ) : (
-              <EmptyState>Select a tool to view details</EmptyState>
-            )}
-          </FullHeightCard>
-        </Grid.Col>
+      <ContentCard flex={1}>
+        {selectedTool ? (
+          <ToolDetailPanel {...selectedTool} />
+        ) : (
+          <EmptyState>Select a tool to view details</EmptyState>
+        )}
+      </ContentCard>
 
-        <Grid.Col span={5}>
-          <FullHeightCard>
-            {result ? (
-              <ResultPanel {...result} />
-            ) : (
-              <EmptyState>Results will appear here</EmptyState>
-            )}
-          </FullHeightCard>
-        </Grid.Col>
-      </Grid>
+      <ContentCard flex={1}>
+        {result ? (
+          <ToolResultPanel {...result} />
+        ) : (
+          <EmptyState>Results will appear here</EmptyState>
+        )}
+      </ContentCard>
     </ScreenLayout>
   );
 }
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()}