Restyle UI with light/dark theme support

- Add light/dark theme toggle with localStorage persistence
- Add 'Claude Flow' wordmark in header
- Switch to monospace font (SF Mono, Cascadia Code, etc.)
- Update accent colors (lighter blue)
- Add theme-aware CodeMirror styling (oneDark vs defaultHighlightStyle)
- Update window title to 'Claude Flow'
- Refine spacing and visual polish throughout
- Add .claude-flow/ artifacts from self-restyling session

2 files changed, 22 insertions, 2 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index c5f456c..f5368b3 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -5,6 +5,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
+import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { oneDark } from "@codemirror/theme-one-dark";
 import type { Phase } from "../types";
@@ -15,16 +16,19 @@ interface DocumentPaneProps {
   phase: Phase;
   disabled: boolean;
   showOnboarding?: boolean;
+  theme: "dark" | "light";
 }
 
 function MarkdownEditor({
   content,
   onChange,
   disabled,
+  theme,
 }: {
   content: string;
   onChange: (content: string) => void;
   disabled: boolean;
+  theme: "dark" | "light";
 }) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -47,7 +51,7 @@ function MarkdownEditor({
         history(),
         keymap.of([...defaultKeymap, ...historyKeymap]),
         markdown({ codeLanguages: languages }),
-        oneDark,
+        theme === "dark" ? oneDark : syntaxHighlighting(defaultHighlightStyle),
         updateListener,
         EditorView.editable.of(!disabled),
         EditorView.lineWrapping,
@@ -81,7 +85,7 @@ function MarkdownEditor({
       view.destroy();
       viewRef.current = null;
     };
-  }, [disabled]);
+  }, [disabled, theme]);
 
   // Update content when it changes externally
   useEffect(() => {
@@ -109,6 +113,7 @@ export function DocumentPane({
   phase,
   disabled,
   showOnboarding,
+  theme,
 }: DocumentPaneProps) {
   const [isEditing, setIsEditing] = useState(false);
 
@@ -211,6 +216,7 @@ export function DocumentPane({
           content={content}
           onChange={onChange}
           disabled={disabled}
+          theme={theme}
         />
       ) : (
         <div
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index b6bed26..b4faa6e 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import type { Project, Session, Phase } from "../types";
 
+type Theme = "dark" | "light";
+
 interface HeaderProps {
   projects: Project[];
   sessions: Session[];
@@ -12,6 +14,8 @@ interface HeaderProps {
   onCreateSession: () => void;
   onDeleteProject?: (id: string) => void;
   onDeleteSession?: (id: string) => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -33,6 +37,8 @@ export function Header({
   onCreateSession,
   onDeleteProject,
   onDeleteSession,
+  theme,
+  onToggleTheme,
 }: HeaderProps) {
   const handleDeleteProject = () => {
     if (!selectedProject || !onDeleteProject) return;
@@ -51,6 +57,9 @@ export function Header({
   return (
     <header className="header">
       <div className="header-left">
+        {/* ── Wordmark ── */}
+        <span className="app-wordmark">Claude Flow</span>
+
         <select
           value={selectedProject?.id || ""}
           onChange={(e) => {
@@ -129,6 +138,11 @@ export function Header({
             })}
           </div>
         )}
+
+        {/* ── Theme toggle ── */}
+        <button className="theme-toggle" onClick={onToggleTheme}>
+          {theme === "dark" ? "[light]" : "[dark]"}
+        </button>
       </div>
     </header>
   );