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/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}>
-                  {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)}