Phase 1: Style refinements and component tweaks from Storybook review

Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
  in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error

Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
  for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
  clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
  next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
  header, rename from "Clear All"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react-vite'
-import { MantineProvider, useMantineColorScheme } from '@mantine/core'
+import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
 import { Notifications } from '@mantine/notifications'
 import '@mantine/core/styles.css'
 import '@mantine/notifications/styles.css'
@@ -24,6 +24,14 @@ function ColorSchemeWrapper({
   return <>{children}</>
 }
 
+const resolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: {},
+  dark: {
+    '--mantine-color-body': 'var(--mantine-color-dark-9)',
+  },
+})
+
 const preview: Preview = {
   globalTypes: {
     colorScheme: {
@@ -46,7 +54,7 @@ const preview: Preview = {
     (Story, context) => {
       const isFullscreen = context.parameters?.layout === 'fullscreen'
       return (
-        <MantineProvider theme={theme} defaultColorScheme="light">
+        <MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
           <ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
             <Notifications position="top-right" />
             {isFullscreen ? (

clients/web/src/App.css

@@ -26,6 +26,9 @@
   --inspector-surface-card: var(--mantine-color-gray-0);
   --inspector-surface-code: var(--mantine-color-white);
 
+  /* ── Inputs ────────────────────────────────────────────── */
+  --inspector-input-background: var(--mantine-color-white);
+
   /* ── Borders ───────────────────────────────────────────── */
   --inspector-border-default: var(--mantine-color-default-border);
   --inspector-border-subtle: var(--mantine-color-gray-3);
@@ -71,7 +74,8 @@
 [data-mantine-color-scheme="dark"] {
   --inspector-surface-card: var(--mantine-color-gray-9);
   --inspector-surface-code: var(--mantine-color-dark-9);
-  --inspector-border-subtle: var(--mantine-color-dark-4);
+  --inspector-border-subtle: var(--mantine-color-gray-4);
+  --inspector-input-background: var(--mantine-color-dark-9);
 }
 
 /* ── Animations ──────────────────────────────────────────── */
@@ -112,7 +116,33 @@
 }
 
 [data-mantine-color-scheme="dark"] .list-item:hover {
-  background-color: var(--mantine-color-dark-5);
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Select dropdown / option (dark mode) ──────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
+  background-color: var(--mantine-color-gray-8);
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+  background-color: var(--mantine-primary-color-light);
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Segmented control label (dark mode) ──────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Accordion button hover ─────────────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
+  background-color: var(--mantine-primary-color-filled-hover);
 }
 
 /* ── Grid alignment ─────────────────────────────────────── */

clients/web/src/components/elements/CopyButton/CopyButton.tsx

@@ -15,8 +15,9 @@ export function CopyButton({ value }: CopyButtonProps) {
         <Tooltip label={copied ? "Copied" : "Copy"}>
           <ActionIcon
             variant="subtle"
-            color={copied ? "green" : "gray"}
+            color={copied ? "green" : "var(--inspector-text-primary)"}
             onClick={copy}
+            fz={24}
           >
             {copied ? "\u2713" : "\u2398"}
           </ActionIcon>

clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx

@@ -19,7 +19,7 @@ const UpdateLabel = Text.withProps({
 
 const RefreshButton = Button.withProps({
   size: "sm",
-  variant: "light",
+  variant: "subtle",
 });
 
 export function ListChangedIndicator({

clients/web/src/components/elements/ListToggle/ListToggle.tsx

@@ -23,7 +23,7 @@ export function ListToggle({
   }
 
   return (
-    <Button size="sm" onClick={onToggle}>
+    <Button size="sm" variant="subtle" onClick={onToggle}>
       <Icon size={20} />
     </Button>
   );

clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx

@@ -22,7 +22,7 @@ export interface HistoryRequestsPanelProps {
 }
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
@@ -96,7 +96,6 @@ export function HistoryListPanel({
         <Title order={4}>Requests</Title>
         <Group gap="xs">
           <ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
-          <ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
           {hasResults && (
             <ListToggle
               compact={compact}
@@ -128,9 +127,12 @@ export function HistoryListPanel({
 
             {filteredEntries.length > 0 && (
               <>
-                <Title order={5}>
+                <Group justify="space-between">
-                  {formatHistoryTitle(filteredEntries.length)}
+                  <Title order={5}>
-                </Title>
+                    {formatHistoryTitle(filteredEntries.length)}
+                  </Title>
+                  <ToolbarButton onClick={onClearAll}>Clear</ToolbarButton>
+                </Group>
                 {filteredEntries.map((entry) => (
                   <HistoryEntry
                     key={entryKey(entry)}

clients/web/src/components/groups/LogControls/LogControls.tsx

@@ -91,7 +91,7 @@ export function LogControls({
       <Stack gap="xs">
         {LOG_LEVELS.map((level) => {
           const style = LEVEL_COLORS[level];
-          const active = !!visibleLevels[level];
+          const active = visibleLevels[level];
           return (
             <UnstyledButton
               key={level}

clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx

@@ -31,7 +31,7 @@ const PanelContainer = Paper.withProps({
 });
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 

clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx

@@ -6,7 +6,7 @@ import type {
 import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
 
 const CopyAllButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 

clients/web/src/components/groups/ResourceControls/ResourceControls.tsx

@@ -93,16 +93,16 @@ export function ResourceControls({
         <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
       </Group>
       <Group gap="xs" wrap="nowrap">
-        <ListToggle
-          compact={!allExpanded}
-          onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
-        />
         <TextInput
           flex={1}
           placeholder="Search..."
           value={searchText}
           onChange={(e) => setSearchText(e.currentTarget.value)}
         />
+        <ListToggle
+          compact={!allExpanded}
+          onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
+        />
       </Group>
       <Accordion multiple value={openSections} onChange={setOpenSections}>
         <Accordion.Item value="resources">

clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<typeof TaskControls> = {
     onSearchChange: fn(),
     onStatusFilterChange: fn(),
     onRefresh: fn(),
-    onClearHistory: fn(),
   },
 };
 

clients/web/src/components/groups/TaskControls/TaskControls.tsx

@@ -10,7 +10,7 @@ const STATUS_OPTIONS: TaskStatus[] = [
 ];
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
@@ -20,7 +20,6 @@ export interface TaskControlsProps {
   onSearchChange: (text: string) => void;
   onStatusFilterChange: (status: string) => void;
   onRefresh: () => void;
-  onClearHistory: () => void;
 }
 
 export function TaskControls({
@@ -29,12 +28,13 @@ export function TaskControls({
   onSearchChange,
   onStatusFilterChange,
   onRefresh,
-  onClearHistory,
 }: TaskControlsProps) {
   return (
     <Stack gap="md">
-      <Title order={4}>Tasks</Title>
+      <Group flex={1} justify={"space-between"}>
-
+        <Title order={4}>Tasks</Title>
+        <ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
+      </Group>
       <Title order={5}>Search</Title>
       <TextInput
         placeholder="Search..."
@@ -46,15 +46,10 @@ export function TaskControls({
       <Select
         placeholder="All statuses"
         data={STATUS_OPTIONS}
-        value={statusFilter}
+        value={statusFilter ?? null}
         onChange={(value) => onStatusFilterChange(value ?? "")}
         clearable
       />
-
-      <Group>
-        <ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
-        <ToolbarButton onClick={onClearHistory}>Clear History</ToolbarButton>
-      </Group>
     </Stack>
   );
 }

clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx

@@ -61,6 +61,7 @@ const meta: Meta<typeof TaskListPanel> = {
   args: {
     tasks: sampleTasks,
     searchText: "",
+    onClearCompleted: fn(),
   },
 };
 

clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx

@@ -1,5 +1,13 @@
 import { useMemo, useState } from "react";
-import { Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { TaskCard } from "../TaskCard/TaskCard";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import type { TaskCardProps } from "../TaskCard/TaskCard";
@@ -8,6 +16,7 @@ export interface TaskListPanelProps {
   tasks: TaskCardProps[];
   searchText: string;
   statusFilter?: string;
+  onClearCompleted: () => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -17,6 +26,11 @@ const PanelContainer = Paper.withProps({
   variant: "panel",
 });
 
+const ClearHistoryButton = Button.withProps({
+  variant: "subtle",
+  size: "sm",
+});
+
 const EmptyState = Text.withProps({
   c: "dimmed",
   ta: "center",
@@ -58,6 +72,7 @@ export function TaskListPanel({
   tasks,
   searchText,
   statusFilter,
+  onClearCompleted,
 }: TaskListPanelProps) {
   const [compact, setCompact] = useState(false);
 
@@ -110,9 +125,14 @@ export function TaskListPanel({
 
             {completedTasks.length > 0 && (
               <>
-                <Title order={5}>
+                <Group justify="space-between">
-                  {formatCompletedTitle(completedTasks.length)}
+                  <Title order={5}>
-                </Title>
+                    {formatCompletedTitle(completedTasks.length)}
+                  </Title>
+                  <ClearHistoryButton onClick={onClearCompleted}>
+                    Clear
+                  </ClearHistoryButton>
+                </Group>
                 {completedTasks.map((task) => (
                   <TaskCard
                     key={taskKey(task)}

clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx

@@ -15,7 +15,7 @@ export interface ToolResultPanelProps {
 }
 
 const ClearButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 

clients/web/src/components/groups/ViewHeader/ViewHeader.tsx

@@ -79,13 +79,13 @@ const RightSection = Group.withProps({
 });
 
 const DisconnectButton = Button.withProps({
-  variant: "outline",
+  variant: "subtle",
   c: "red",
   size: "sm",
 });
 
 const ThemeToggle = ActionIcon.withProps({
-  variant: "outline",
+  variant: "subtle",
   size: 36,
   "aria-label": "Toggle color scheme",
 });

clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx

@@ -1,4 +1,4 @@
-import { Card, Flex, ScrollArea, Stack, Text } from "@mantine/core";
+import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
 import { PromptControls } from "../../groups/PromptControls/PromptControls";
 import { PromptArgumentsForm } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
 import { PromptMessagesDisplay } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
@@ -47,6 +47,7 @@ const SidebarCard = Card.withProps({
 });
 
 const DetailCard = Card.withProps({
+  flex: 1,
   withBorder: true,
   padding: "lg",
 });
@@ -84,7 +85,7 @@ export function PromptsScreen({
         flex={1}
         mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
       >
-        <Stack gap="md">
+        <Group flex={1} gap="md" align="flex-start" wrap="nowrap">
           {selectedPrompt ? (
             <>
               <DetailCard>
@@ -108,7 +109,7 @@ export function PromptsScreen({
               <EmptyState>Select a prompt to view details</EmptyState>
             </DetailCard>
           )}
-        </Stack>
+        </Group>
       </ScrollArea.Autosize>
     </ScreenLayout>
   );

clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof TasksScreen> = {
   parameters: { layout: "fullscreen" },
   args: {
     onRefresh: fn(),
-    onClearHistory: fn(),
+    onClearCompleted: fn(),
   },
 };
 

clients/web/src/components/screens/TasksScreen/TasksScreen.tsx

@@ -7,7 +7,7 @@ import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
 export interface TasksScreenProps {
   tasks: TaskCardProps[];
   onRefresh: () => void;
-  onClearHistory: () => void;
+  onClearCompleted: () => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -30,7 +30,7 @@ const SidebarCard = Card.withProps({
 export function TasksScreen({
   tasks,
   onRefresh,
-  onClearHistory,
+  onClearCompleted,
 }: TasksScreenProps) {
   const [searchText, setSearchText] = useState("");
   const [statusFilter, setStatusFilter] = useState<string | undefined>();
@@ -47,7 +47,6 @@ export function TasksScreen({
               setStatusFilter(value || undefined)
             }
             onRefresh={onRefresh}
-            onClearHistory={onClearHistory}
           />
         </SidebarCard>
       </Sidebar>
@@ -55,6 +54,7 @@ export function TasksScreen({
         tasks={tasks}
         searchText={searchText}
         statusFilter={statusFilter}
+        onClearCompleted={onClearCompleted}
       />
     </ScreenLayout>
   );

clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx

@@ -762,7 +762,7 @@ export const TasksActive: Story = {
           },
         ]}
         onRefresh={fn()}
-        onClearHistory={fn()}
+        onClearCompleted={fn()}
       />
     ),
   },