Feature/UI dark mode inspection refresh

ui/src/components/app/ChatInput.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatInput } from "@/components/app/ChatInput";
+
+describe("ChatInput", () => {
+  it("does not render the removed sample question chips", () => {
+    render(
+      <ChatInput
+        value=""
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+        onUpload={vi.fn()}
+        onRemoveAttachment={vi.fn()}
+        attachments={[]}
+        isSubmitting={false}
+        isUploading={false}
+      />,
+    );
+
+    expect(screen.queryByText("Why is pipeline conversion dropping?")).not.toBeInTheDocument();
+    expect(screen.queryByText("Generate SQL for this question")).not.toBeInTheDocument();
+  });
+});

ui/src/components/app/ChatInput.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { Button } from "@/components/shared/Button";
 import { Textarea } from "@/components/shared/Textarea";
-import { PromptChips } from "@/components/app/PromptChips";
 import { Spinner } from "@/components/shared/Spinner";
 import { UPLOAD_ACCEPT } from "@/lib/uploads";
 import type { UploadedAsset } from "@/types/upload";
@@ -10,7 +9,6 @@ interface ChatInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: () => void;
-  onPickPrompt: (prompt: string) => void;
   onUpload: (file: File) => void;
   onRemoveAttachment: (assetId: string) => void;
   attachments: UploadedAsset[];
@@ -22,7 +20,6 @@ export function ChatInput({
   value,
   onChange,
   onSubmit,
-  onPickPrompt,
   onUpload,
   onRemoveAttachment,
   attachments,
@@ -77,7 +74,6 @@ export function ChatInput({
   return (
     <div className="border-t border-line/80 bg-canvas/90 px-4 py-4 backdrop-blur sm:px-6">
       <div className="mx-auto w-full min-w-0 max-w-4xl space-y-4">
-        <PromptChips onPick={onPickPrompt} />
         {attachments.length > 0 ? (
           <div className="flex flex-wrap gap-2">
             {attachments.map((asset) => (
@@ -127,7 +123,7 @@ export function ChatInput({
               <span className="min-w-0 text-xs text-muted">CSV or JSON only</span>
             </div>
             <Button onClick={onSubmit} disabled={isSubmitting || value.trim().length === 0}>
-              {isSubmitting ? <Spinner className="h-4 w-4 border-white/30 border-t-white" /> : null}
+              {isSubmitting ? <Spinner className="h-4 w-4 border-contrast-foreground/30 border-t-contrast-foreground" /> : null}
               Send
             </Button>
           </div>

ui/src/components/app/ChatMessage.tsx

@@ -21,9 +21,9 @@ export function ChatMessage({ message, onInspect }: ChatMessageProps) {
   if (!isAssistant) {
     return (
       <div className="flex min-w-0 justify-end">
-        <div className="w-full min-w-0 max-w-[720px] rounded-[24px] bg-ink px-5 py-4 text-sm leading-7 text-white shadow-card">
+        <div className="w-full min-w-0 max-w-[720px] rounded-[24px] bg-contrast px-5 py-4 text-sm leading-7 text-contrast-foreground shadow-card">
           <p>{message.content}</p>
-          <p className="mt-2 text-xs text-white/70">{formatTimestamp(message.createdAt)}</p>
+          <p className="mt-2 text-xs text-contrast-foreground/70">{formatTimestamp(message.createdAt)}</p>
         </div>
       </div>
     );

ui/src/components/app/InsightCard.tsx

@@ -9,8 +9,8 @@ interface InsightCardProps {
 
 const toneStyles = {
   neutral: "bg-panel",
-  positive: "bg-green-50/70",
-  caution: "bg-amber-50/80",
+  positive: "bg-success-soft/70",
+  caution: "bg-warning-soft/80",
 };
 
 export function InsightCard({ title, body, tone = "neutral" }: InsightCardProps) {

ui/src/components/app/InspectionPanel.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { InspectionPanel } from "@/components/app/InspectionPanel";
+import type { InspectionData } from "@/types/inspection";
+
+const inspection: InspectionData = {
+  id: "inspection_1",
+  title: "Enterprise conversion review",
+  status: "valid",
+  verified: true,
+  queryType: "SQL",
+  engine: "DuckDB",
+  dataSource: "Revenue warehouse",
+  rowsReturned: 3,
+  lastUpdated: "2026-04-14T12:00:00.000Z",
+  filters: ["segment = enterprise"],
+  query: "select * from revenue_pipeline",
+  runtimeMs: 814,
+  confidence: 0.92,
+  metadata: [
+    { label: "Warehouse", value: "Revenue warehouse" },
+    { label: "Model", value: "revenue_pipeline" },
+  ],
+  results: {
+    columns: ["segment", "conversion_rate"],
+    rows: [{ segment: "Enterprise", conversion_rate: "34.1%" }],
+  },
+  trace: [
+    {
+      id: "trace_1",
+      label: "Compiled SQL",
+      description: "The query writer produced the final SQL for execution.",
+      detail: "1 statement compiled.",
+      durationLabel: "142 ms",
+      status: "complete",
+    },
+  ],
+  validation: [
+    {
+      id: "validation_1",
+      label: "Query valid",
+      detail: "SQL parsed and executed without syntax errors.",
+      status: "pass",
+    },
+  ],
+};
+
+describe("InspectionPanel", () => {
+  it("renders without an expand control and uses the wide drawer layout", () => {
+    render(
+      <InspectionPanel
+        open
+        loading={false}
+        error={null}
+        inspection={inspection}
+        activeTab="sql"
+        onClose={vi.fn()}
+        onTabChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: /expand|collapse/i })).not.toBeInTheDocument();
+
+    const dialog = screen.getByRole("dialog", { name: "Enterprise conversion review" });
+    expect(dialog.className).toContain("lg:w-[min(88vw,980px)]");
+  });
+});

ui/src/components/app/InspectionPanel.tsx

@@ -1,7 +1,6 @@
 import { Drawer } from "@/components/shared/Drawer";
 import { ErrorState } from "@/components/shared/ErrorState";
 import { Spinner } from "@/components/shared/Spinner";
-import { Button } from "@/components/shared/Button";
 import { SqlPreview } from "@/components/app/SqlPreview";
 import { ResultTable } from "@/components/app/ResultTable";
 import { ValidationSummary } from "@/components/app/ValidationSummary";
@@ -17,9 +16,7 @@ interface InspectionPanelProps {
   error: string | null;
   inspection: InspectionData | null;
   activeTab: InspectionTabId;
-  maximized: boolean;
   onClose: () => void;
-  onToggleMaximized: () => void;
   onTabChange: (tab: InspectionTabId) => void;
 }
 
@@ -58,9 +55,7 @@ export function InspectionPanel({
   error,
   inspection,
   activeTab,
-  maximized,
   onClose,
-  onToggleMaximized,
   onTabChange,
 }: InspectionPanelProps) {
   return (
@@ -69,12 +64,7 @@ export function InspectionPanel({
       onClose={onClose}
       title={inspection?.title ?? "Inspection"}
       subtitle="LeetCode-style execution feedback adapted for analytics workflows."
-      maximized={maximized}
-      actions={
-        <Button variant="secondary" size="sm" onClick={onToggleMaximized}>
-          {maximized ? "Collapse" : "Expand"}
-        </Button>
-      }
+      size="wide"
     >
       {loading ? (
         <div className="flex h-full min-h-[420px] items-center justify-center">

ui/src/components/app/ResultTable.tsx

@@ -21,7 +21,7 @@ export function ResultTable({ title, table }: ResultTableProps) {
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-line/70 bg-white">
+          <tbody className="divide-y divide-line/70 bg-panel">
             {table.rows.map((row, rowIndex) => (
               <tr key={rowIndex}>
                 {table.columns.map((column) => (

ui/src/components/app/Sidebar.test.tsx

@@ -2,45 +2,97 @@ import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { Sidebar } from "@/components/app/Sidebar";
+import { ThemeProvider } from "@/context/ThemeProvider";
 import { AuthContext } from "@/context/auth-context";
 
 describe("Sidebar", () => {
-  it("does not render a recent uploads section", () => {
+  const renderSidebar = (props?: Partial<React.ComponentProps<typeof Sidebar>>) =>
     render(
       <MemoryRouter>
-        <AuthContext.Provider
-          value={{
-            user: {
-              id: 1,
-              email: "test@example.com",
-              display_name: null,
-              created_at: new Date().toISOString(),
-            },
-            token: "token_123",
-            isReady: true,
-            isAuthenticated: true,
-            login: vi.fn(),
-            signUp: vi.fn(),
-            logout: vi.fn(),
-          }}
-        >
-          <Sidebar
-            conversations={[]}
-            activeSection="chats"
-            activeConversationId=""
-            collapsed={false}
-            isMobile={false}
-            mobileOpen={false}
-            onSelectSection={vi.fn()}
-            onSelectConversation={vi.fn()}
-            onNewChat={vi.fn()}
-            onToggleCollapse={vi.fn()}
-            onCloseMobile={vi.fn()}
-          />
-        </AuthContext.Provider>
+        <ThemeProvider>
+          <AuthContext.Provider
+            value={{
+              user: {
+                id: 1,
+                email: "test@example.com",
+                display_name: null,
+                created_at: new Date().toISOString(),
+              },
+              token: "token_123",
+              isReady: true,
+              isAuthenticated: true,
+              login: vi.fn(),
+              signUp: vi.fn(),
+              logout: vi.fn(),
+            }}
+          >
+            <Sidebar
+              conversations={[]}
+              activeSection="chats"
+              activeConversationId=""
+              collapsed={false}
+              isMobile={false}
+              mobileOpen={false}
+              onSelectSection={vi.fn()}
+              onSelectConversation={vi.fn()}
+              onNewChat={vi.fn()}
+              onToggleCollapse={vi.fn()}
+              onCloseMobile={vi.fn()}
+              {...props}
+            />
+          </AuthContext.Provider>
+        </ThemeProvider>
       </MemoryRouter>,
     );
 
+  it("does not render a recent uploads section", () => {
+    renderSidebar();
+
     expect(screen.queryByText("Recent uploads")).not.toBeInTheDocument();
   });
+
+  it("renders the theme toggle in collapsed and mobile sidebar states", () => {
+    const { rerender } = renderSidebar({ collapsed: true });
+
+    expect(screen.getAllByRole("button", { name: "Switch to dark mode" }).length).toBeGreaterThan(0);
+
+    rerender(
+      <MemoryRouter>
+        <ThemeProvider>
+          <AuthContext.Provider
+            value={{
+              user: {
+                id: 1,
+                email: "test@example.com",
+                display_name: null,
+                created_at: new Date().toISOString(),
+              },
+              token: "token_123",
+              isReady: true,
+              isAuthenticated: true,
+              login: vi.fn(),
+              signUp: vi.fn(),
+              logout: vi.fn(),
+            }}
+          >
+            <Sidebar
+              conversations={[]}
+              activeSection="chats"
+              activeConversationId=""
+              collapsed={false}
+              isMobile
+              mobileOpen
+              onSelectSection={vi.fn()}
+              onSelectConversation={vi.fn()}
+              onNewChat={vi.fn()}
+              onToggleCollapse={vi.fn()}
+              onCloseMobile={vi.fn()}
+            />
+          </AuthContext.Provider>
+        </ThemeProvider>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getAllByRole("button", { name: "Switch to dark mode" }).length).toBeGreaterThan(0);
+  });
 });