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>
2026-04-17 19:26:21 -04:00 · 2026-04-17 19:26:21 -04:00 · 658ef86944
commit 658ef86944
parent 2d4fca4fa6
11 changed files with 148 additions and 51 deletions
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/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}>
-                  {formatHistoryTitle(filteredEntries.length)}
-                </Title>
+                <Group justify="space-between">
+                  <Title order={5}>
+                    {formatHistoryTitle(filteredEntries.length)}
+                  </Title>
+                  <ToolbarButton onClick={onClearAll}>Clear</ToolbarButton>
+                </Group>
                {filteredEntries.map((entry) => (
                  <HistoryEntry
                    key={entryKey(entry)}
--- a/clients/web/src/components/groups/LogControls/LogControls.tsx
+++ b/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}
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/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",
 });

--- a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
+++ b/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",
 });

--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/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">
--- a/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
+++ b/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(),
  },
 };

--- a/clients/web/src/components/groups/TaskControls/TaskControls.tsx
+++ b/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>
  );
 }
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
@ -61,6 +61,7 @@ const meta: Meta<typeof TaskListPanel> = {
  args: {
    tasks: sampleTasks,
    searchText: "",
+    onClearCompleted: fn(),
  },
 };

--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
+++ b/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}>
-                  {formatCompletedTitle(completedTasks.length)}
-                </Title>
+                <Group justify="space-between">
+                  <Title order={5}>
+                    {formatCompletedTitle(completedTasks.length)}
+                  </Title>
+                  <ClearHistoryButton onClick={onClearCompleted}>
+                    Clear
+                  </ClearHistoryButton>
+                </Group>
                {completedTasks.map((task) => (
                  <TaskCard
                    key={taskKey(task)}
--- a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
+++ b/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",
 });

--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/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",
 });