Improve Claude UI

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

• New Features
  • Added Claude session history integration with automatic session discovery and metadata display.
  • Sessions now organized by time groups (Today, Yesterday, This Week).
  • Auto-naming of sessions based on first user message content.
  • Infinite scrolling support for browsing large session lists.
  • Enhanced session information showing timestamps, Git branch data, and message previews.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR adds Claude session integration to the desktop application, introducing backend utilities to scan and read Claude session files, exposing these through tRPC router procedures, and integrating session history management into the chat UI with infinite scrolling session selection.

Changes

Cohort / File(s)	Summary
Claude Session Backend Utilities apps/desktop/src/lib/trpc/routers/ai-chat/utils/claude-session-scanner/claude-session-reader.ts, claude-session-scanner.ts, index.ts	New modules for reading Claude session JSONL files and scanning session metadata from ~/.claude/projects. Includes types ClaudeSessionMessage, ClaudeSessionMessagePart, ClaudeSessionInfo, ClaudeSessionPage, and functions readClaudeSessionMessages, scanClaudeSessions, findSessionFilePath with TTL-cached index and pagination support.
tRPC Router Integration apps/desktop/src/lib/trpc/routers/ai-chat/index.ts	Added two public procedures: getClaudeSessionMessages(sessionId) to fetch messages and scanClaudeSessions(cursor, limit) to list sessions with pagination defaults.
Chat UI Hook & Utilities apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/hooks/useClaudeCodeHistory/*, utils/extract-title.ts	New hook useClaudeCodeHistory to manage Claude session history and auto-rename chat titles, and utility extractTitleFromMessages to derive titles from first user message (max 80 characters).
ChatInterface Component apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/ChatInterface/ChatInterface.tsx	Integrated useClaudeCodeHistory hook; replaced inline message handling with hook-managed allMessages and added auto-rename callback for session titles.
SessionSelector Component apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/ChatPane/components/SessionSelector/SessionSelector.tsx	Added infinite scrolling pagination for Claude sessions, merged Claude and Superset sessions with time-based grouping (Today, Yesterday, This Week, etc.), and enhanced display with metadata (timestamp, Git branch, message preview).

Sequence Diagram(s)

sequenceDiagram
    participant UI as ChatInterface/SessionSelector
    participant Hook as useClaudeCodeHistory Hook
    participant tRPC as tRPC Router (ai-chat)
    participant Scanner as Claude Session Scanner
    participant Reader as Claude Session Reader
    participant FS as Filesystem (~/.claude/projects)

    UI->>Hook: Mount with sessionId
    Hook->>tRPC: Query getClaudeSessionMessages(sessionId)
    tRPC->>Scanner: findSessionFilePath(sessionId)
    Scanner->>FS: Scan index in ~/.claude/projects
    FS-->>Scanner: Session file paths
    Scanner-->>tRPC: File path for sessionId
    tRPC->>Reader: readClaudeSessionMessages(sessionId)
    Reader->>FS: Read JSONL session file
    FS-->>Reader: File content (JSON lines)
    Reader-->>tRPC: Parsed messages array
    tRPC-->>Hook: Messages data
    Hook->>Hook: Combine with live messages
    Hook->>Hook: Extract title & auto-rename
    Hook-->>UI: allMessages + isClaudeCodeSession

    UI->>tRPC: scanClaudeSessions(cursor, limit)
    tRPC->>Scanner: Scan sessions with pagination
    Scanner->>FS: Index and metadata read
    FS-->>Scanner: Session files
    Scanner-->>tRPC: ClaudeSessionPage (sessions + nextCursor)
    tRPC-->>UI: Session list
    UI->>UI: Render with time-based grouping

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(desktop): add Claude binary bundling and AI chat tRPC router #1204: Modifies the same ai-chat tRPC router (apps/desktop/src/lib/trpc/routers/ai-chat/index.ts) to add Claude session procedures directly.
• fix(desktop): fix chat infinite re-render and model selector logo #1283: Updates ChatInterface.tsx to refactor session lifecycle management, affecting the same component where Claude history integration is added.
• feat(desktop): add local session persistence and restore for chat #1287: Expands ai-chat router with additional session management procedures (restore, delete, rename, list, getSession) that complement the session scanning/reading logic.

Poem

🐰 Claude's sessions now hop through the app,
With files scanned from projects map,
Through hooks and tRPC they gracefully fly,
Auto-renamed titles reaching the sky,
Sessions scrolling infinite, one by one,
The Claude integration dance has begun! 🎉

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch kitenite/more-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ⚠️ Neon database branch
• ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉