From 6d70c5f8a3ed90564b08616a3fb041409916059c Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 07:30:40 -0800
Subject: Phase 4: React UI

- Add renderer/src/types.ts with Project, Session, Message, Phase types
- Add renderer/src/styles/globals.css with full styling
  - Dark theme with accent colors
  - Header, document pane, chat pane, action bar layouts
  - Phase indicator, token usage bar, buttons
- Add renderer/src/components/Header.tsx
  - Project/session dropdowns with create buttons
  - Phase indicator showing current workflow state
- Add renderer/src/components/DocumentPane.tsx
  - Markdown viewer/editor with toggle
  - Syntax highlighting for review comments
  - Task checkbox rendering
- Add renderer/src/components/ChatPane.tsx
  - Message list with auto-scroll
  - Input field with Enter to send
  - Loading state indicator
- Add renderer/src/components/ActionBar.tsx
  - Token usage bar with color coding
  - Review/Submit buttons for workflow
  - Permission mode toggle for implement phase
- Add renderer/src/App.tsx
  - Full state management for projects, sessions, messages
  - Claude message subscription
  - Workflow handlers (review, submit, phase advance)
- Update renderer/src/main.tsx to render App
---
 renderer/src/App.tsx                     | 241 +++++++++++++++++++
 renderer/src/components/ActionBar.tsx    |  97 ++++++++
 renderer/src/components/ChatPane.tsx     |  66 ++++++
 renderer/src/components/DocumentPane.tsx | 104 ++++++++
 renderer/src/components/Header.tsx       |  99 ++++++++
 renderer/src/main.tsx                    |  11 +-
 renderer/src/styles/globals.css          | 391 +++++++++++++++++++++++++++++++
 renderer/src/types.ts                    |  35 +++
 8 files changed, 1041 insertions(+), 3 deletions(-)
 create mode 100644 renderer/src/App.tsx
 create mode 100644 renderer/src/components/ActionBar.tsx
 create mode 100644 renderer/src/components/ChatPane.tsx
 create mode 100644 renderer/src/components/DocumentPane.tsx
 create mode 100644 renderer/src/components/Header.tsx
 create mode 100644 renderer/src/styles/globals.css
 create mode 100644 renderer/src/types.ts

(limited to 'renderer')

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
new file mode 100644
index 0000000..7a8c378
--- /dev/null
+++ b/renderer/src/App.tsx
@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Header } from "./components/Header";
+import { DocumentPane } from "./components/DocumentPane";
+import { ChatPane } from "./components/ChatPane";
+import { ActionBar } from "./components/ActionBar";
+import type { Project, Session, Message, Phase, TokenUsage } from "./types";
+import "./styles/globals.css";
+
+const api = window.api;
+
+export function App() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [selectedSession, setSelectedSession] = useState<Session | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [documentContent, setDocumentContent] = useState<string>("");
+  const [originalContent, setOriginalContent] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [tokenUsage, setTokenUsage] = useState<TokenUsage>({
+    inputTokens: 0,
+    outputTokens: 0,
+  });
+
+  const hasChanges = documentContent !== originalContent;
+
+  // Load projects on mount
+  useEffect(() => {
+    api.listProjects().then(setProjects);
+  }, []);
+
+  // Load sessions when project changes
+  useEffect(() => {
+    if (selectedProject) {
+      api.listSessions(selectedProject.id).then(setSessions);
+    } else {
+      setSessions([]);
+    }
+  }, [selectedProject]);
+
+  // Load messages and artifact when session changes
+  useEffect(() => {
+    if (selectedSession && selectedProject) {
+      // Load messages
+      api.listMessages(selectedSession.id).then(setMessages);
+
+      // Load artifact
+      const filename =
+        selectedSession.phase === "research" ? "research.md" : "plan.md";
+      api.readArtifact(selectedProject.path, filename).then((content) => {
+        const text = content || "";
+        setDocumentContent(text);
+        setOriginalContent(text);
+      });
+    } else {
+      setMessages([]);
+      setDocumentContent("");
+      setOriginalContent("");
+    }
+  }, [selectedSession?.id, selectedSession?.phase, selectedProject]);
+
+  // Subscribe to Claude messages
+  useEffect(() => {
+    const unsubscribe = api.onClaudeMessage((sessionId, msg) => {
+      if (sessionId !== selectedSession?.id) return;
+
+      if (msg.type === "result" && msg.subtype === "success") {
+        setIsLoading(false);
+        if (msg.usage) {
+          setTokenUsage({
+            inputTokens: msg.usage.input_tokens,
+            outputTokens: msg.usage.output_tokens,
+            cacheHits: msg.usage.cache_read_input_tokens,
+          });
+        }
+        // Reload artifact after Claude updates it
+        if (selectedProject) {
+          const filename =
+            selectedSession.phase === "research" ? "research.md" : "plan.md";
+          api.readArtifact(selectedProject.path, filename).then((content) => {
+            const text = content || "";
+            setDocumentContent(text);
+            setOriginalContent(text);
+          });
+        }
+      }
+
+      if (msg.type === "assistant") {
+        const content = (
+          msg.message.content as Array<{ type: string; text?: string }>
+        )
+          .filter((c) => c.type === "text" && c.text)
+          .map((c) => c.text!)
+          .join("\n");
+
+        if (content) {
+          setMessages((prev) => {
+            const last = prev[prev.length - 1];
+            if (last?.role === "assistant") {
+              // Update existing assistant message
+              return [...prev.slice(0, -1), { ...last, content }];
+            }
+            // Add new assistant message
+            return [
+              ...prev,
+              {
+                id: crypto.randomUUID(),
+                session_id: sessionId,
+                role: "assistant",
+                content,
+                created_at: Date.now() / 1000,
+              },
+            ];
+          });
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [selectedSession?.id, selectedSession?.phase, selectedProject]);
+
+  const handleSendMessage = async (message: string) => {
+    if (!selectedSession) return;
+    setIsLoading(true);
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        session_id: selectedSession.id,
+        role: "user",
+        content: message,
+        created_at: Date.now() / 1000,
+      },
+    ]);
+    await api.sendMessage(selectedSession.id, message);
+  };
+
+  const handleReview = async () => {
+    if (!selectedSession || !selectedProject) return;
+    // Save user edits first
+    const filename =
+      selectedSession.phase === "research" ? "research.md" : "plan.md";
+    await api.writeArtifact(selectedProject.path, filename, documentContent);
+    setOriginalContent(documentContent);
+    setIsLoading(true);
+    await api.triggerReview(selectedSession.id);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedSession || !selectedProject) return;
+    // Save any pending edits
+    const filename =
+      selectedSession.phase === "research" ? "research.md" : "plan.md";
+    await api.writeArtifact(selectedProject.path, filename, documentContent);
+
+    const nextPhase = await api.advancePhase(selectedSession.id);
+    if (nextPhase) {
+      setSelectedSession({ ...selectedSession, phase: nextPhase });
+      // Trigger initial message for next phase
+      setIsLoading(true);
+      const initialMsg =
+        nextPhase === "plan"
+          ? "Create a detailed implementation plan based on the research."
+          : "Begin implementing the plan.";
+      await api.sendMessage(selectedSession.id, initialMsg);
+    }
+  };
+
+  const handleCreateProject = async () => {
+    const path = await api.selectDirectory();
+    if (!path) return;
+    const name = path.split("/").pop() || "New Project";
+    const project = await api.createProject(name, path);
+    setProjects((prev) => [project, ...prev]);
+    setSelectedProject(project);
+  };
+
+  const handleCreateSession = async () => {
+    if (!selectedProject) return;
+    const name = `Session ${sessions.length + 1}`;
+    const session = await api.createSession(selectedProject.id, name);
+    setSessions((prev) => [session, ...prev]);
+    setSelectedSession(session);
+    setMessages([]);
+    setDocumentContent("");
+    setOriginalContent("");
+  };
+
+  return (
+    <div className="app">
+      <Header
+        projects={projects}
+        sessions={sessions}
+        selectedProject={selectedProject}
+        selectedSession={selectedSession}
+        onSelectProject={setSelectedProject}
+        onSelectSession={setSelectedSession}
+        onCreateProject={handleCreateProject}
+        onCreateSession={handleCreateSession}
+      />
+
+      <div className="main-content">
+        <DocumentPane
+          content={documentContent}
+          onChange={setDocumentContent}
+          phase={selectedSession?.phase || "research"}
+          disabled={!selectedSession || selectedSession.phase === "implement"}
+        />
+
+        <ChatPane
+          messages={messages}
+          onSend={handleSendMessage}
+          isLoading={isLoading}
+          disabled={!selectedSession}
+          placeholder={
+            selectedSession
+              ? `Chat with Claude (${selectedSession.phase})...`
+              : "Select a session to start"
+          }
+        />
+      </div>
+
+      <ActionBar
+        phase={selectedSession?.phase || "research"}
+        hasChanges={hasChanges}
+        isLoading={isLoading}
+        tokenUsage={tokenUsage}
+        permissionMode={selectedSession?.permission_mode || "acceptEdits"}
+        onReview={handleReview}
+        onSubmit={handleSubmit}
+        onPermissionModeChange={(mode) => {
+          if (selectedSession) {
+            api.setPermissionMode(selectedSession.id, mode);
+            setSelectedSession({ ...selectedSession, permission_mode: mode });
+          }
+        }}
+        disabled={!selectedSession}
+      />
+    </div>
+  );
+}
diff --git a/renderer/src/components/ActionBar.tsx b/renderer/src/components/ActionBar.tsx
new file mode 100644
index 0000000..22f34b4
--- /dev/null
+++ b/renderer/src/components/ActionBar.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import type { Phase, PermissionMode, TokenUsage } from "../types";
+
+interface ActionBarProps {
+  phase: Phase;
+  hasChanges: boolean;
+  isLoading: boolean;
+  tokenUsage: TokenUsage;
+  permissionMode: PermissionMode;
+  onReview: () => void;
+  onSubmit: () => void;
+  onPermissionModeChange: (mode: PermissionMode) => void;
+  disabled: boolean;
+}
+
+export function ActionBar({
+  phase,
+  hasChanges,
+  isLoading,
+  tokenUsage,
+  permissionMode,
+  onReview,
+  onSubmit,
+  onPermissionModeChange,
+  disabled,
+}: ActionBarProps) {
+  const totalTokens = tokenUsage.inputTokens + tokenUsage.outputTokens;
+  const maxTokens = 200000;
+  const usagePercent = Math.min((totalTokens / maxTokens) * 100, 100);
+
+  const getBarColor = () => {
+    if (usagePercent > 80) return "#ef4444";
+    if (usagePercent > 50) return "#f59e0b";
+    return "#10b981";
+  };
+
+  return (
+    <div className="action-bar">
+      <div className="action-bar-left">
+        <div className="token-indicator">
+          <div className="token-bar">
+            <div
+              className="token-fill"
+              style={{
+                width: `${usagePercent}%`,
+                backgroundColor: getBarColor(),
+              }}
+            />
+          </div>
+          <span className="token-label">
+            {(totalTokens / 1000).toFixed(1)}k / 200k
+          </span>
+        </div>
+
+        {phase === "implement" && (
+          <label className="permission-toggle">
+            <input
+              type="checkbox"
+              checked={permissionMode === "bypassPermissions"}
+              onChange={(e) =>
+                onPermissionModeChange(
+                  e.target.checked ? "bypassPermissions" : "acceptEdits"
+                )
+              }
+              disabled={disabled}
+            />
+            Bypass Permissions
+          </label>
+        )}
+      </div>
+
+      <div className="action-bar-right">
+        {phase !== "implement" && (
+          <>
+            <button
+              onClick={onReview}
+              disabled={disabled || isLoading || !hasChanges}
+              className="btn-secondary"
+            >
+              Review
+            </button>
+            <button
+              onClick={onSubmit}
+              disabled={disabled || isLoading}
+              className="btn-primary"
+            >
+              Submit →
+            </button>
+          </>
+        )}
+        {phase === "implement" && isLoading && (
+          <span className="implementing-status">Implementing...</span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/ChatPane.tsx b/renderer/src/components/ChatPane.tsx
new file mode 100644
index 0000000..917d462
--- /dev/null
+++ b/renderer/src/components/ChatPane.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect } from "react";
+import type { Message } from "../types";
+
+interface ChatPaneProps {
+  messages: Message[];
+  onSend: (message: string) => void;
+  isLoading: boolean;
+  disabled: boolean;
+  placeholder: string;
+}
+
+export function ChatPane({
+  messages,
+  onSend,
+  isLoading,
+  disabled,
+  placeholder,
+}: ChatPaneProps) {
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSend = () => {
+    if (!input.trim() || isLoading || disabled) return;
+    onSend(input.trim());
+    setInput("");
+  };
+
+  return (
+    <div className="chat-pane">
+      <div className="chat-messages">
+        {messages.map((msg) => (
+          <div key={msg.id} className={`message ${msg.role}`}>
+            <div className="message-content">{msg.content}</div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="message assistant loading">
+            <div className="message-content">Thinking...</div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+          placeholder={placeholder}
+          disabled={disabled || isLoading}
+        />
+        <button
+          onClick={handleSend}
+          disabled={disabled || isLoading || !input.trim()}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
new file mode 100644
index 0000000..e44b0fb
--- /dev/null
+++ b/renderer/src/components/DocumentPane.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useMemo } from "react";
+import type { Phase } from "../types";
+
+interface DocumentPaneProps {
+  content: string;
+  onChange: (content: string) => void;
+  phase: Phase;
+  disabled: boolean;
+}
+
+function renderMarkdown(md: string): string {
+  return (
+    md
+      // Headers
+      .replace(/^### (.*$)/gm, "<h3>$1</h3>")
+      .replace(/^## (.*$)/gm, "<h2>$1</h2>")
+      .replace(/^# (.*$)/gm, "<h1>$1</h1>")
+      // Bold/italic
+      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+      // Code blocks
+      .replace(
+        /```(\w*)\n([\s\S]*?)```/g,
+        '<pre><code class="language-$1">$2</code></pre>'
+      )
+      .replace(/`([^`]+)`/g, "<code>$1</code>")
+      // Lists
+      .replace(/^- \[x\] (.*$)/gm, '<li class="task done">☑ $1</li>')
+      .replace(/^- \[ \] (.*$)/gm, '<li class="task">☐ $1</li>')
+      .replace(/^- (.*$)/gm, "<li>$1</li>")
+      // Review comments (highlight them)
+      .replace(/(\/\/ REVIEW:.*$)/gm, '<mark class="review">$1</mark>')
+      .replace(/(\/\/ NOTE:.*$)/gm, '<mark class="note">$1</mark>')
+      // Paragraphs
+      .replace(/\n\n/g, "</p><p>")
+      .replace(/^(.+)$/gm, "<p>$1</p>")
+      // Clean up
+      .replace(/<p><\/p>/g, "")
+      .replace(/<p>(<h[1-3]>)/g, "$1")
+      .replace(/(<\/h[1-3]>)<\/p>/g, "$1")
+      .replace(/<p>(<pre>)/g, "$1")
+      .replace(/(<\/pre>)<\/p>/g, "$1")
+      .replace(/<p>(<li)/g, "$1")
+      .replace(/(<\/li>)<\/p>/g, "$1")
+  );
+}
+
+export function DocumentPane({
+  content,
+  onChange,
+  phase,
+  disabled,
+}: DocumentPaneProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const renderedHtml = useMemo(() => renderMarkdown(content), [content]);
+
+  if (phase === "implement") {
+    return (
+      <div className="document-pane">
+        <div className="document-header">
+          <span>plan.md</span>
+          <span className="badge">Implementing...</span>
+        </div>
+        <div
+          className="document-content rendered"
+          dangerouslySetInnerHTML={{ __html: renderedHtml }}
+        />
+      </div>
+    );
+  }
+
+  const filename = phase === "research" ? "research.md" : "plan.md";
+
+  return (
+    <div className="document-pane">
+      <div className="document-header">
+        <span>{filename}</span>
+        <button onClick={() => setIsEditing(!isEditing)}>
+          {isEditing ? "Preview" : "Edit"}
+        </button>
+      </div>
+
+      {isEditing ? (
+        <textarea
+          className="document-content editing"
+          value={content}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          placeholder={`${filename} will appear here...`}
+        />
+      ) : (
+        <div
+          className="document-content rendered"
+          dangerouslySetInnerHTML={{
+            __html:
+              renderedHtml ||
+              '<p class="empty">Document will appear here after Claude generates it...</p>',
+          }}
+          onClick={() => !disabled && setIsEditing(true)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
new file mode 100644
index 0000000..3dcbba9
--- /dev/null
+++ b/renderer/src/components/Header.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import type { Project, Session, Phase } from "../types";
+
+interface HeaderProps {
+  projects: Project[];
+  sessions: Session[];
+  selectedProject: Project | null;
+  selectedSession: Session | null;
+  onSelectProject: (project: Project | null) => void;
+  onSelectSession: (session: Session | null) => void;
+  onCreateProject: () => void;
+  onCreateSession: () => void;
+}
+
+const phaseLabels: Record<Phase, string> = {
+  research: "Research",
+  plan: "Plan",
+  implement: "Implement",
+};
+
+const phases: Phase[] = ["research", "plan", "implement"];
+
+export function Header({
+  projects,
+  sessions,
+  selectedProject,
+  selectedSession,
+  onSelectProject,
+  onSelectSession,
+  onCreateProject,
+  onCreateSession,
+}: HeaderProps) {
+  return (
+    <header className="header">
+      <div className="header-left">
+        <select
+          value={selectedProject?.id || ""}
+          onChange={(e) => {
+            const project = projects.find((p) => p.id === e.target.value);
+            onSelectProject(project || null);
+            onSelectSession(null);
+          }}
+        >
+          <option value="">Select Project...</option>
+          {projects.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+        <button onClick={onCreateProject}>+ Project</button>
+
+        {selectedProject && (
+          <>
+            <select
+              value={selectedSession?.id || ""}
+              onChange={(e) => {
+                const session = sessions.find((s) => s.id === e.target.value);
+                onSelectSession(session || null);
+              }}
+            >
+              <option value="">Select Session...</option>
+              {sessions.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name}
+                </option>
+              ))}
+            </select>
+            <button onClick={onCreateSession}>+ Session</button>
+          </>
+        )}
+      </div>
+
+      <div className="header-right">
+        {selectedSession && (
+          <div className="phase-indicator">
+            {phases.map((phase) => {
+              const phaseIndex = phases.indexOf(phase);
+              const currentIndex = phases.indexOf(selectedSession.phase);
+              const isComplete = phaseIndex < currentIndex;
+              const isActive = phase === selectedSession.phase;
+
+              return (
+                <span
+                  key={phase}
+                  className={`phase-step ${isActive ? "active" : ""} ${
+                    isComplete ? "complete" : ""
+                  }`}
+                >
+                  {phaseLabels[phase]}
+                </span>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/renderer/src/main.tsx b/renderer/src/main.tsx
index 9a6b03b..a2f33db 100644
--- a/renderer/src/main.tsx
+++ b/renderer/src/main.tsx
@@ -1,4 +1,9 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client'
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
 
-createRoot(document.getElementById('root')!).render(<main>hi</main>)
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
new file mode 100644
index 0000000..57dc917
--- /dev/null
+++ b/renderer/src/styles/globals.css
@@ -0,0 +1,391 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #252525;
+  --bg-tertiary: #333;
+  --border: #444;
+  --text-primary: #e0e0e0;
+  --text-secondary: #888;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  -webkit-app-region: drag;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  -webkit-app-region: no-drag;
+}
+
+.header select,
+.header button {
+  padding: 6px 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.header button:hover {
+  background: var(--border);
+}
+
+.phase-indicator {
+  display: flex;
+  gap: 4px;
+}
+
+.phase-step {
+  padding: 4px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.phase-step.active {
+  background: var(--accent);
+  color: white;
+}
+
+.phase-step.complete {
+  background: var(--success);
+  color: white;
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Document Pane */
+.document-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+}
+
+.document-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.document-header button {
+  padding: 4px 8px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.document-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.document-content.editing {
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  background: var(--bg-primary);
+  border: none;
+  resize: none;
+  color: var(--text-primary);
+}
+
+.document-content.rendered {
+  line-height: 1.7;
+}
+
+.document-content.rendered h1 {
+  font-size: 28px;
+  margin: 24px 0 16px;
+}
+.document-content.rendered h2 {
+  font-size: 22px;
+  margin: 20px 0 12px;
+  color: var(--text-secondary);
+}
+.document-content.rendered h3 {
+  font-size: 18px;
+  margin: 16px 0 8px;
+}
+.document-content.rendered p {
+  margin: 8px 0;
+}
+.document-content.rendered code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+.document-content.rendered pre {
+  background: var(--bg-tertiary);
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 16px 0;
+}
+.document-content.rendered pre code {
+  background: none;
+  padding: 0;
+}
+.document-content.rendered li {
+  margin-left: 24px;
+  margin-bottom: 4px;
+}
+.document-content.rendered li.task {
+  list-style: none;
+  margin-left: 0;
+}
+.document-content.rendered li.task.done {
+  color: var(--success);
+}
+.document-content.rendered mark.review {
+  background: var(--warning);
+  color: black;
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+.document-content.rendered mark.note {
+  background: var(--accent);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+.document-content.rendered .empty {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.badge {
+  background: var(--accent);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+/* Chat Pane */
+.chat-pane {
+  width: 380px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.message {
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  max-width: 90%;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.message.user {
+  background: var(--accent);
+  margin-left: auto;
+}
+
+.message.assistant {
+  background: var(--bg-tertiary);
+}
+
+.message.loading {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.chat-input {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--border);
+}
+
+.chat-input input {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.chat-input input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.chat-input button {
+  padding: 10px 16px;
+  background: var(--accent);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.chat-input button:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.chat-input button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Action Bar */
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+}
+
+.action-bar-left,
+.action-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.token-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.token-bar {
+  width: 100px;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.token-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.token-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.permission-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.permission-toggle input {
+  cursor: pointer;
+}
+
+.btn-secondary {
+  padding: 8px 16px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--border);
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  padding: 8px 20px;
+  background: var(--accent);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.implementing-status {
+  color: var(--success);
+  font-size: 14px;
+}
diff --git a/renderer/src/types.ts b/renderer/src/types.ts
new file mode 100644
index 0000000..11062ee
--- /dev/null
+++ b/renderer/src/types.ts
@@ -0,0 +1,35 @@
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface Session {
+  id: string;
+  project_id: string;
+  name: string;
+  phase: Phase;
+  claude_session_id: string | null;
+  permission_mode: PermissionMode;
+  created_at: number;
+  updated_at: number;
+}
+
+export type Phase = "research" | "plan" | "implement";
+export type PermissionMode = "acceptEdits" | "bypassPermissions";
+
+export interface Message {
+  id: string;
+  session_id: string;
+  role: "user" | "assistant";
+  content: string;
+  created_at: number;
+}
+
+export interface TokenUsage {
+  inputTokens: number;
+  outputTokens: number;
+  cacheHits?: number;
+}
-- 
cgit v1.2.3