The "Back to bottom" button was incorrectly appearing after switching
from split view to tabbed view because scroll-related refs weren't
being reset when the session changed.
Added session change detection that resets:
- userScrolledAway ref
- showScrollButton state
- newMessageCount counter
- processedMessages cache
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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 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>
- 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 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>
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>
