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

1 files changed, 97 insertions, 0 deletions

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>
+  );
+}