shipit: Skill for Claude Code

Client Architecture

The client is a React 19 SPA built with Vite and Tailwind CSS v4. State management uses Zustand stores. Communication with the server uses three channels: HTTP for reads/mutations, per-session WebSocket for streaming and real-time interaction, and SSE for global broadcasts.

Entry Point

src/client/main.tsx renders the app inside a BrowserRouter with an ErrorBoundary. Two route patterns:

• /session/:sessionId — session view
• * — catch-all (home screen, /{slug}/new for new repo sessions)

src/client/App.tsx is the main component. It wires together all hooks, stores, and UI components. Layout is a three-panel design: sidebar (sessions), center (chat), right (preview/files/git/terminal).

State Management (Zustand)

The main stores (partial — ls src/client/stores/ for the full set):

Store	File	Key State
Session	session-store.ts	sessionId, messages[], isLoading, activity, sessions[], authUrl, queuedMessages[]
Git	git-store.ts	commits[], identity, turnDiff, lastCommitPair
File	file-store.ts	tree[], viewingFile, viewingFileContent, docFiles[]
Preview	preview-store.ts	status, selectedPort, installStatus, crashInfo
Terminal	terminal-store.ts	entries[], mode, shellStarted
PR	pr-store.ts	result, status, descGenerating
Settings	settings-store.ts	permissionMode, systemPromptContent, githubStatus, pendingFiles[]
UI	ui-store.ts	rightTab, templates[], agentList, modelInfo, toast, features[]
Repo	repo-store.ts	repos[], addRepoDialogOpen

Patterns

• Stores are created with create<StateType>((set, get) => ({...})).
• Each store has a reset() method for clearing session-specific state during session switching.
• Components subscribe to individual fields via selectors: useSessionStore((s) => s.messages).
• Stores are updated directly — no centralized dispatcher. Handlers call store.getState().setX(value).
• App.tsx selects single rows, never a list that changes for other sessions (sessions, the PR store's per-session maps): each such change would re-render the whole app. setSessions keeps unchanged row objects (utils/session-rows.ts), so a one-row selector is stable. A reader of the whole list goes in a leaf component (AttentionNotifications, AllSessionsDialogWithRows) or in AppLayout, which gets the panels as finished elements. Guard: App.render-count.test.tsx.