Merged
Conversation
Owner
Author
PR Review: #4 - feat(dashboard): MVP Session UI OverhaulSummary[1-2 sentence overview of your findings regarding the Session UI Overhaul implementation] Recommendation[APPROVE | REQUEST_CHANGES | COMMENT] Key Findings🔴 Blocking Issues (must fix)
🟡 Suggestions (should consider)
🟢 Nitpicks (optional)
Checklist Summary
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b2f1ffe8da
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
MattMagg
added a commit
that referenced
this pull request
Feb 23, 2026
## 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes Made