feat(session-ui): comprehensive chat session UI overhaul

## Context
The session UI had severe UX regressions from a prior incomplete overhaul
(PR #4). Thinking blocks rendered as red JSON error cards, HITL approval
buttons were non-functional, the transcript used a flat layout with no
visual distinction between roles, and the sidebar lacked temporal grouping.
This commit addresses all outstanding issues and applies benchmark patterns
from open-webui and agent-chat-ui reference codebases.

## Changes

### Transcript (`transcript.tsx`)
- **Message layout redesign**: User messages now right-aligned with `rounded-2xl`
  pill background; assistant messages left-aligned with compact indigo avatar;
  system messages compact and muted with smaller amber avatar
- **Streaming indicator**: Staggered pulse dots `ThinkingDots` component with
  150ms delays replacing single ping animation; indigo blinking cursor bar
  for active streaming content
- **Entry animations**: `animate-in fade-in slide-in-from-bottom-2` on all
  message types for smooth appearance
- **Empty states**: Centered Cpu icon with descriptive text; loading state
  uses staggered dots animation
- **sessionKey prop**: Threaded through to EventRenderer and HitlApprovalCard
  to enable approval mutation wiring
- Removed unused `User` icon import

### HITL Approval Card (`hitl-approval-card.tsx`)
- **Functional Approve/Reject buttons**: Wired to `sessions.resolveApproval`
  tRPC mutation with Loader2 spinner during pending state
- **Optimistic local state**: `localResolution` prevents stale UI after action
- **Error display**: Inline mutation error message
- **Animated pending indicator**: Ping dot with "Pending" label replacing
  static "Waiting for user" text
- Added `useMutation`, `useQueryClient`, `useTRPC` imports; component now
  accepts optional `sessionKey` prop

### Content Normalizer (`normalize-content.ts`)
- **Object-format thinking recognition**: Added handler for
  `{type: "thinking", thinking: "..."}` and `{type: "reasoning", ...}`
  payloads that were previously falling through to the unknown event type
- These now render as purple "Agent Reasoning" cards with token estimates
  instead of raw JSON in an unknown payload card

### Gateway Client (`client.ts`)
- **`execApprovalsResolve()`**: New method calling `exec.approvals.resolve`
  RPC with `sessionKey` and `resolution` parameters

### tRPC Sessions Router (`sessions.ts`)
- **`resolveApproval` mutation**: New procedure with Zod-validated input
  (`sessionKey: string`, `resolution: "approved" | "rejected"`)
  proxying to `gateway.execApprovalsResolve()`

### Session Workspace (`session-workspace.tsx`)
- **Header metadata**: Agent Cpu icon, model/thinking/token count badges,
  `formatTokens()` helper for compact display (e.g., "12.2k")
- **Connection status**: Live indicator with Streaming (indigo ping dot) /
  Live (Wifi icon, emerald) / Polling (WifiOff, muted) states
- **Context panel persistence**: Toggle state saved to
  `localStorage("claw-dash:context-panel")` with SSR-safe initializer
- **sessionKey threading**: Passed to Transcript component

### Session Sidebar (`session-sidebar.tsx`)
- **Time grouping**: Sessions grouped into Today/Yesterday/This Week/Older
  with `getTimeGroup()` helper using start-of-day calculations
- **Fallback titles**: `generateFallbackTitle()` extracts agent name and
  formats timestamp from colon-delimited session keys
- **Active state**: Indigo left border (`border-l-2 border-l-indigo-500`)
  with `ring-1 ring-zinc-700/50` highlight

### Deep Thought Block (`deep-thought-block.tsx`)
- CSS grid `0fr → 1fr` expand animation replacing display toggle
- Token count estimate (`Math.ceil(rawText.length / 4)`)
- Purple theming with Brain icon; rotating chevron indicator
- `max-h-96 overflow-y-auto` on expanded content

### Tool Execution Card (`tool-execution-card.tsx`)
- **`TruncatedOutput` component**: 8-line truncation with gradient fade
  overlay and "Show N more lines" / "Show less" toggle
- **Pending state**: `Loader2 animate-spin` with amber "running" label
  when `isPending = !isResult && !payload.result`
- CSS grid expand animation; status icons (CheckCircle2/XCircle/Loader2)

### Unknown Payload Card (`unknown-payload-card.tsx`)
- Changed from alarming red error styling (bg-red-950, AlertTriangle) to
  neutral zinc collapsible card with FileJson2 icon
- CSS grid animation; CodeBlock for syntax-highlighted JSON

### Composer (`composer.tsx`)
- **Inline errors**: `fileError` and `mutationError` state with auto-dismiss
  amber/red banners replacing browser `alert()` calls
- **Drag-drop zone**: `isDragOver` state with indigo ring visual feedback
- **Auto-resize textarea**: `useCallback` + `useEffect` pattern
- **Compact action bar**: Model selector dropdown, thinking level pill
  buttons, Send/Stop with icon + spinner states

### Pre-Session Page (`page.tsx`)
- **Configuration grid**: 2x2 grid for Agent/Model/Workflow/Skills selects
  with shared `selectClass` for consistent styling
- **File handling**: `addFiles()` with 20MB limit and 5-file cap validation,
  inline amber error banner, drag-drop zone
- **Auto-resize textarea**: Matching composer pattern
- **Action bar**: Attachment button, thinking level pills, Start Session
  button with Loader2 spinner

## New Files
- **`docs/session_frontend_prompt.md`**: Originating spec prompt for the
  session UI overhaul, documenting the role definition, known issues,
  execution workflow phases, and benchmark research requirements

## Testing/Verification
- `npm run lint` — zero errors, zero warnings
- `npm run build` — compiled successfully, all routes generated
- Live browser audit via Chrome extension at localhost:3939/sessions:
  verified message layout, thinking block rendering, collapsible cards,
  context panel toggle, sidebar grouping, and composer functionality

## Related
- Follows PR #4 (001-session-ui-overhaul) which left several items incomplete
- Resolves: broken HITL buttons, red unknown payload cards, flat transcript
  layout, missing thinking block recognition for object payloads

Author: MattMagg

docs/session_frontend_prompt.md

@@ -0,0 +1,37 @@
+
+Below is the context of the chat session aspect of the dashboard.
+
+Originating prompt:
+
+```md
+Role & Objective
+You are an expert Frontend Architect, UX Researcher, and Next.js Engineer. Your objective is to create a comprehensive, world-class documentation suite for overhauling and perfecting the Claw Dash chat session UI. You must design an interface that serves as a premium, highly functional command center for agent orchestration.
+Context & Known Issues
+The current chat session UI has severe UX regressions and missing features outlined in ui-audit-report.md and docs/plans/2026-02-21-claw-dash-post-audit-improvements.md. Key known issues include:
+* Missing Streaming: The agent does not show real-time streaming; the UI waits for final payloads instead of optimistic, live rendering.
+* Broken Session Metadata: The sidebar shows unparsed strings instead of human-readable conversation titles, and the active header displays raw database IDs.
+* Unhandled Payloads: Expected events like thinking blocks render as glaring red JSON error boundaries instead of polished accordion components.
+* Tag Bleed: Internal routing tags (e.g., [[reply_to_current]]) bleed into the user-facing message feed.
+* Outdated Composer: The active chat input lacks the robust model selection, thinking level toggles, and attachment support recently added to the pre-session layout.
+Execution Workflow
+Phase 1: Live Application Audit & Walkthrough
+1. Launch the local development server by running npm run dev inside the claw-dash directory.
+2. Utilize your browser interaction capabilities (via the Claude Chrome extension or browser tools) to navigate to http://localhost:3939/sessions.
+3. Conduct a full, interactive user journey. Start a new session, send messages, and observe the UI's behavior.
+4. Verify the known issues listed above, establish a baseline context for the current UX, and identify any additional discrepancies, layout shifts, or areas lacking premium interaction design.
+Phase 2: Open Source Benchmark Research
+To ensure the proposed design represents the absolute state-of-the-art in AI chat interfaces, comprehensively examine the frontend codebases, component architectures, and styling layouts of the following local reference repositories:
+* /Users/matthewmaggio/open-webui
+* /Users/matthewmaggio/anything-llm
+* /Users/matthewmaggio/agent-chat-ui Extract layout paradigms, streaming implementations, and styling best practices that can be adapted to Claw Dash's unique orchestration requirements.
+Phase 3: Investigation & Proposal Generation
+Leverage your complete arsenal of tools, knowledge, and skills to propose optimal architectural fixes and UX improvements. You have access to:
+* Tools: context7, tavily, shadcn ui
+* Skills/Plugins: frontend design, ralph loop Note: Use your best judgment on when and how to deploy these resources based on your dynamic findings. Do not wait for explicit step-by-step tool instructions.
+Phase 4: Comprehensive Documentation Output
+Synthesize your live audit, benchmark research, and architectural investigation into a definitive documentation suite.
+* Formulate the documentation in any way you see fit.
+* You are required to dynamically create directories and multiple markdown files (e.g., splitting into component specs, state management for streaming, styling guidelines, etc.) if it best serves the comprehensiveness and readability of the plan.
+* The final output must leave no ambiguity for the implementing engineer on how to transform the Claw Dash session workspace into a flawless, premium product.
+
+```

src/app/sessions/page.tsx

@@ -1,38 +1,40 @@
 import * as React from "react";
-import { Brain, ChevronRight, ChevronDown } from "lucide-react";
+import { Brain, ChevronRight } from "lucide-react";
 import { ThoughtPayload } from "@/lib/normalize-content";
 
-
 interface Props {
     payload: ThoughtPayload;
 }
 
 export function DeepThoughtBlock({ payload }: Props) {
     const [isOpen, setIsOpen] = React.useState(false);
+    const estimatedTokens = payload.tokenCountEstimate ?? Math.ceil(payload.rawText.length / 4);
 
     return (
-        <div className="my-3 rounded-md border border-zinc-800/60 bg-zinc-950/30 overflow-hidden">
+        <div className="my-3 rounded-md border border-purple-900/30 bg-purple-950/10 overflow-hidden">
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex w-full items-center justify-between px-4 py-2 hover:bg-zinc-900/50 transition-colors text-left"
+                className="flex w-full items-center justify-between px-4 py-2.5 hover:bg-purple-950/20 transition-colors text-left"
             >
                 <div className="flex items-center gap-2">
-                    <Brain className="h-4 w-4 text-purple-400" />
-                    <span className="text-xs font-mono text-purple-400">Agent Reasoning</span>
-                    {payload.tokenCountEstimate && (
-                        <span className="text-[10px] text-zinc-600 ml-2">~{payload.tokenCountEstimate} tokens</span>
-                    )}
+                    <Brain className="h-4 w-4 text-purple-400/70" />
+                    <span className="text-xs font-medium text-purple-300/80">Agent Reasoning</span>
+                    <span className="text-[10px] text-zinc-600 tabular-nums">~{estimatedTokens.toLocaleString()} tokens</span>
                 </div>
-                <div className="text-zinc-500">
-                    {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                <div className="text-zinc-500 transition-transform duration-200" style={{ transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}>
+                    <ChevronRight className="h-4 w-4" />
                 </div>
             </button>
-
-            {isOpen && (
-                <div className="px-4 py-3 bg-zinc-950/60 border-t border-zinc-800/60 text-sm text-zinc-400 italic leading-relaxed break-words whitespace-pre-wrap">
-                    {payload.rawText}
+            <div
+                className="grid transition-all duration-200 ease-in-out"
+                style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
+            >
+                <div className="overflow-hidden">
+                    <div className="px-4 py-3 border-t border-purple-900/20 text-sm text-zinc-400/90 italic leading-relaxed break-words whitespace-pre-wrap max-h-96 overflow-y-auto">
+                        {payload.rawText}
+                    </div>
                 </div>
-            )}
+            </div>
         </div>
     );
 }

src/components/sessions/composer.tsx

@@ -1,57 +1,105 @@
+"use client";
+
 import * as React from "react";
-import { ShieldAlert, CheckCircle2, XCircle } from "lucide-react";
+import { ShieldAlert, CheckCircle2, XCircle, Loader2 } from "lucide-react";
 import { ApprovalPayload } from "@/lib/normalize-content";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/lib/trpc/react";
 
 interface Props {
     payload: ApprovalPayload;
+    sessionKey?: string;
 }
 
-export function HitlApprovalCard({ payload }: Props) {
-    const isResolved = !!payload.resolution;
-    const isApproved = payload.resolution === "approved";
+export function HitlApprovalCard({ payload, sessionKey }: Props) {
+    const [localResolution, setLocalResolution] = React.useState<"approved" | "rejected" | undefined>(undefined);
+    const trpc = useTRPC();
+    const queryClient = useQueryClient();
+
+    const resolution = localResolution ?? payload.resolution;
+    const isResolved = !!resolution;
+    const isApproved = resolution === "approved";
+
+    const mutation = useMutation(
+        trpc.sessions.resolveApproval.mutationOptions({
+            onSuccess: (_data, variables) => {
+                setLocalResolution(variables.resolution);
+                queryClient.invalidateQueries({ queryKey: trpc.sessions.history.queryKey() });
+            },
+        })
+    );
+
+    const handleResolve = (decision: "approved" | "rejected") => {
+        if (!sessionKey || mutation.isPending) return;
+        mutation.mutate({ sessionKey, resolution: decision });
+    };
 
     return (
-        <div className="my-4 rounded-lg border border-amber-900/50 bg-amber-950/20 overflow-hidden shadow-sm">
-            <div className="flex items-center justify-between px-4 py-3 bg-amber-950/40 border-b border-amber-900/50">
-                <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-md bg-amber-500/20 text-amber-500 ring-1 ring-inset ring-amber-500/30">
-                        <ShieldAlert className="h-4 w-4" />
-                    </div>
-                    <div>
-                        <div className="text-sm font-medium text-amber-500">
-                            Approval Required
-                        </div>
+        <div className="my-3 rounded-lg border border-amber-900/40 bg-amber-950/10 overflow-hidden">
+            <div className="flex items-center justify-between px-4 py-2.5 bg-amber-950/20 border-b border-amber-900/30">
+                <div className="flex items-center gap-2.5">
+                    <div className="flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-amber-500 ring-1 ring-inset ring-amber-500/20">
+                        <ShieldAlert className="h-3.5 w-3.5" />
                     </div>
+                    <span className="text-xs font-medium text-amber-400">
+                        Approval Required
+                    </span>
                 </div>
                 <div>
                     {isResolved ? (
                         isApproved ? (
-                            <div className="flex items-center gap-2 text-xs text-emerald-500 bg-emerald-500/10 px-2.5 py-1 rounded-full border border-emerald-500/20">
+                            <div className="flex items-center gap-1.5 text-[10px] text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20 font-medium">
                                 <CheckCircle2 className="h-3 w-3" /> Approved
                             </div>
                         ) : (
-                            <div className="flex items-center gap-2 text-xs text-red-500 bg-red-500/10 px-2.5 py-1 rounded-full border border-red-500/20">
+                            <div className="flex items-center gap-1.5 text-[10px] text-red-500 bg-red-500/10 px-2 py-0.5 rounded-full border border-red-500/20 font-medium">
                                 <XCircle className="h-3 w-3" /> Rejected
                             </div>
                         )
                     ) : (
-                        <div className="flex items-center gap-2 text-xs text-amber-500 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 animate-pulse">
-                            Waiting for user
+                        <div className="flex items-center gap-1.5 text-[10px] text-amber-500/80 font-medium">
+                            <span className="relative flex h-1.5 w-1.5">
+                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75" />
+                                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-amber-500" />
+                            </span>
+                            Pending
                         </div>
                     )}
                 </div>
             </div>
 
-            <div className="px-4 py-3 text-sm text-zinc-300">
+            <div className="px-4 py-2.5 text-sm text-zinc-300">
                 {payload.actionDescription}
             </div>
 
-            {!isResolved && (
-                <div className="px-4 py-3 bg-black/20 border-t border-amber-900/30 flex gap-3">
-                    <button className="flex-1 rounded-md bg-emerald-600 hover:bg-emerald-500 text-white py-1.5 text-xs font-medium transition-colors">
-                        Approve
+            {mutation.error && (
+                <div className="px-4 pb-2 text-xs text-red-400">
+                    {mutation.error.message}
+                </div>
+            )}
+
+            {!isResolved && sessionKey && (
+                <div className="px-4 py-2.5 bg-black/20 border-t border-amber-900/20 flex gap-2.5">
+                    <button
+                        onClick={() => handleResolve("approved")}
+                        disabled={mutation.isPending}
+                        className="flex-1 flex items-center justify-center gap-1.5 rounded-md bg-emerald-600/90 hover:bg-emerald-500 disabled:opacity-50 text-white py-1.5 text-xs font-medium transition-colors"
+                    >
+                        {mutation.isPending ? (
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                            <>
+                                <CheckCircle2 className="h-3 w-3" />
+                                Approve
+                            </>
+                        )}
                     </button>
-                    <button className="flex-1 rounded-md border border-red-900/50 hover:bg-red-950 text-red-500 py-1.5 text-xs font-medium transition-colors">
+                    <button
+                        onClick={() => handleResolve("rejected")}
+                        disabled={mutation.isPending}
+                        className="flex-1 flex items-center justify-center gap-1.5 rounded-md border border-red-900/40 hover:bg-red-950/50 disabled:opacity-50 text-red-400 py-1.5 text-xs font-medium transition-colors"
+                    >
+                        <XCircle className="h-3 w-3" />
                         Reject
                     </button>
                 </div>