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 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 241 insertions(+)
 create mode 100644 renderer/src/App.tsx

(limited to 'renderer/src/App.tsx')

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>
+  );
+}
-- 
cgit v1.2.3