Skip to content

CLAUDE.md

Latest commit

 

History

History
65 lines (51 loc) · 2.13 KB

CLAUDE.md

File metadata and controls

65 lines (51 loc) · 2.13 KB

Shoji - tmux Web UI

モバイルブラウザからtmuxペインを表示・操作するWebアプリケーション。

Tech Stack

  • Runtime: Bun
  • Server: Hono
  • Client: React 19 + Vite + Tailwind CSS v4
  • Terminal: xterm.js
  • Protocol: WebSocket
  • Path alias: @shared -> src/shared/

Directory Structure

src/
  client/              # React SPA
    components/        # UI components (Layout, PaneList, TerminalView, SpecialKeys)
    hooks/             # Custom hooks (useAuth, useWebSocket, usePaneStream, etc.)
    pages/             # Route pages (HomePage, PanePage)
    styles/            # global.css (Tailwind)
    App.tsx            # Router setup
    main.tsx           # Entry point
  server/              # Hono HTTP + WebSocket server
    auth/              # Token-based auth (middleware, token generation)
    routes/            # REST API endpoints
    tmux/              # tmux process interaction (client, input, types)
    ws/                # WebSocket handler & pane streaming
    index.ts           # Server entry point (port 3274)
    app.ts             # Hono app setup
  shared/              # Client/Server shared code
    protocol.ts        # WebSocket message types
bin/
  shoji.mjs            # CLI entry point
dist/                  # Build output

Commands

# Development (server + client concurrently)
bun run dev

# Server only (with hot reload)
bun run dev:server

# Client only (Vite dev server, port 5173)
bun run dev:client

# Production build
bun run build

Dev mode: Vite dev server (port 5173) が API リクエストを Hono server (port 3274) にプロキシする。

Verification

変更を加えた後は以下を実施すること：

  1. ビルド確認: bun run build を実行し、ビルドエラーがないことを確認
  2. ブラウザ確認: Claude In Chrome (MCP browser tools) を使って実際にブラウザ上で動作確認
    • dev serverを起動し、http://localhost:5173 で表示を確認
    • UIの変更はスクリーンショットで目視確認
    • WebSocket接続やAPI呼び出しはブラウザのコンソール/ネットワークタブで確認