Frontend:
- Lazy load SyntaxHighlighter via React.lazy() - saves ~500KB from initial bundle
- Add LazyCodeBlock wrapper with Suspense fallback
- Main bundle now 448KB instead of 1.1MB
Backend:
- Implement WebSocket message queue with backpressure handling
- Add heartbeat timeout check (60s) to detect zombie connections
- Add process startup timeout (30s) and max lifetime (24h)
- Fix restart race condition with timeout fallback
- Replace sessions Map with LRU Map (max 100 sessions)
- Add periodic cleanup for idle sessions (4h)
- Track session activity timestamps
These changes address critical issues identified in performance analysis:
- No more unbounded memory growth from sessions
- No more stuck isRestarting state
- No more message drops during heavy Claude output
- No more zombie WebSocket connections
- Faster initial page load
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Frontend:
- Add memoization to MessageList with custom comparison function
- Implement incremental caching for processedMessages to avoid O(n) rebuilds during streaming
- Wrap Message component with memo()
- Add better error handling for file uploads in SessionContext
Backend:
- Improve upload error handling with proper response checks
Infrastructure:
- Add client_max_body_size 100m to nginx for file uploads
- Add Tanuki avatar (optimized 256x256, 77KB)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add global settings system (autoConnect, autoStart) with localStorage persistence
- Auto-connect: Automatically establish WebSocket connections on page load
- Auto-start: Automatically start Claude sessions after connecting (requires auto-connect)
- Add two new toggles in Sidebar under Working Directory section
- Auto-start toggle is disabled/grayed out when auto-connect is off
- Disabling auto-connect also disables auto-start automatically
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add red marker line at 78% showing auto-compact threshold
- Change bar color to orange at 70% usage (warning stage)
- Show pulsing warning icon at 77% (imminent compact)
- Add tooltip explaining auto-compact threshold
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Load available commands from Claude at session start (control_initialized event)
- Display commands in autocomplete dropdown with search in name and description
- Group commands into "UI Commands" and "Claude Commands" sections
- Shorten display names by removing common prefixes (taches-cc-resources:, claude-mem:)
- Blacklist TUI-only commands (vim, terminal-setup, ide, etc.)
- Add max-height with scrollbar for long command lists
- Implement auto-scroll to keep selected command visible during keyboard navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ESC now sends SIGINT to interrupt generation gracefully
- Automatic silent restart with --continue after interrupt
- Added isRestarting flag to prevent session_ended during restart
- No UI messages during interrupt/restart cycle
- Removed SIGKILL fallback - SIGINT is sufficient
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract token usage from message_delta events in backend
- Calculate context usage percentage (input + cache tokens / 200k)
- Add context_update, compacting_started/finished, compact_boundary events
- Display progress bar that fills up as context is consumed
- Color-coded warnings (green→yellow→red) based on usage
- Show compacting status indicator when auto-compact runs
- Display system messages for compact start/finish with usage stats
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add avatar field to hosts.json config for Neko and Mochi
- Create HostContext to provide host config to components
- Display host avatar and name in chat messages instead of generic Claude
- Add user avatar and first name to user messages
- Include avatar in /api/hosts endpoint response
- Fix appendFileSync import for debug logging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Restore slash command autocomplete (type "/" to see suggestions)
- Add /compact command to trigger context compaction
- Add /clear command to clear chat history
- Add /help command with styled modal dialog
- Add HelpDialog component with command list
- Add system event handler for context warnings
- Add debug logging for all Claude events to /tmp/claude-events-debug.jsonl
TODO: Parse context warning from Claude events when identified
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove broken token-based context calculation. The StatusBar now only
shows context remaining when Claude reports "Context left until
auto-compact: X%" - which happens when context is actually getting low.
This eliminates confusing/incorrect percentages and only shows relevant
information when needed.
TODO: Test this in a long session to verify the context warning appears
when Claude reports it.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract token counts from modelUsage (per-model stats) instead of
basic usage object for accurate values
- Add contextWindow from modelUsage to calculate proper context %
- Show "X% used" when > 70% free, "X% left" when running low
- Color coding: green (ok), yellow (<30% left), red (<15%), pulsing (<5%)
- Fix totalTokens undefined error (renamed to contextUsed)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract CustomInputSection as isolated memoized component
- Use uncontrolled input (defaultValue + ref) instead of controlled (value + onChange)
- Add cacheMeasurements for TextareaAutosize performance
- Only track hasText boolean for button state, not actual content
- Matches ChatInput pattern for consistent lag-free typing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add OIDC login flow with Authentik provider
- Implement session-based auth with Redis store
- Add avatar display from OIDC claims
- Fix input field performance with react-textarea-autosize
- Stabilize callbacks to prevent unnecessary re-renders
- Fix history loading to skip empty session files
- Add 2-row default height for input textarea
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add SessionContext for central state management
- Add TabBar component for session tabs
- Add SplitLayout for side-by-side session viewing
- Add ChatPanel wrapper component
- Refactor ChatInput to uncontrolled input for performance
- Add SCP file transfer for SSH hosts (Mochi)
- Fix stats undefined crash on session restore
- Store host info in sessions for upload routing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Tool rendering: Unified tool_use/tool_result cards with collapsible results
- Special rendering for WebSearch, WebFetch, Task, Write tools
- File upload support with drag & drop
- Permission dialog for tool approvals
- Status bar with session stats and permission mode toggle
- SSH-only mode: Removed local container execution
- Host switching disabled during active session with visual indicator
- Directory browser: Browse remote directories via SSH
- Recent directories dropdown with localStorage persistence
- Follow-up messages during generation
- Improved scroll behavior with "back to bottom" button
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Backend: SSH execution via spawn() with -T flag for JSON streaming
- Backend: PATH setup for non-login shells on remote hosts
- Backend: History loading via SSH (tail -n 2000 for large files)
- Frontend: Host selector UI with colored buttons in Sidebar
- Frontend: Auto-select first project when host changes
- Frontend: Pass host parameter to history and session APIs
- Docker: Install openssh-client, mount SSH keys
Enables running Claude sessions on remote hosts via SSH while
viewing them through the web UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Backend:
- Load hosts from config/hosts.json
- New /api/hosts endpoint listing available hosts
- Dynamic project scanning with configurable depth
- Support for local and SSH hosts (SSH execution coming next)
Frontend (by Web-UI Claude):
- Slash commands: /clear, /help, /export, /scroll, /new, /info
- Chat export as Markdown
Config:
- hosts.json defines hosts with connection info and base paths
- hosts.example.json as template (real config is gitignored)
- Each host has name, description, color, icon, basePaths
Next steps:
- SSH command execution for remote hosts
- Frontend host selector UI
- Multi-agent collaboration
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Initial implementation of a web-based Claude Code interface with:
Backend (Node.js + Express + WebSocket):
- Claude CLI spawning with JSON stream mode
- Session management with resume support (--continue flag)
- Session history API endpoint
- Real-time WebSocket communication
- --include-partial-messages for live streaming
Frontend (React + Vite + Tailwind):
- Modern dark theme UI (Discord/Slack style)
- Live text streaming with content_block_delta handling
- Markdown rendering with react-markdown + remark-gfm
- Syntax highlighting with react-syntax-highlighter (One Dark)
- Collapsible high-tech tool cards with:
- Tool-specific icons and colors
- Compact summaries (Read, Glob, Bash, Edit, etc.)
- Expandable JSON details
- Session history loading on resume
- Project directory selection
- Resume session toggle
Docker:
- Multi-container setup (backend + nginx frontend)
- Isolated Claude config directory
- Host network mode for backend
Built collaboratively by Neko (VPS Claude) and Web-UI Claude,
with Web-UI Claude implementing most frontend features while
running inside the interface itself (meta-programming!).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
