Move artifacts to ~/.claude-flow/ (outside repo)

- Store session artifacts in ~/.claude-flow/projects/{projectId}/sessions/{sessionId}/
- Artifacts no longer live in project directory - can't be accidentally committed
- Remove .claude-flow/ from .gitignore (not needed anymore)
- Update all IPC handlers and renderer to use projectId instead of projectPath
- Update prompts to remove worktree references
- Update README with new storage location

9 files changed, 1376 insertions, 145 deletions

diff --git a/.claude-flow/plan.md b/.claude-flow/plan.md
new file mode 100644
index 0000000..bbcae6a
--- /dev/null
+++ b/.claude-flow/plan.md
@@ -0,0 +1,1090 @@
+# Implementation Plan
+
+## Goal
+Restyle the Claude Flow Electron app with:
+1. Fix the window/tab title from "minimal" → "Claude Flow"
+2. Add a "CLAUDE FLOW" wordmark to the header
+3. Apply a cipherpunk aesthetic (full monospace UI font, sharper geometry, electric-blue accent, uppercase meta labels, focus glow)
+4. Add light/dark mode with a text toggle (`[dark]` / `[light]`) persisted to `localStorage`
+
+## Approach
+Five files touched in order of dependency. No new npm packages. The CSS rewrite is the biggest change; the JS/TSX changes are small and surgical.
+
+**Order of changes:**
+1. `renderer/index.html` — title fix (trivial, isolated)
+2. `renderer/src/styles/globals.css` — full restyle (all visual work)
+3. `renderer/src/App.tsx` — add theme state, wire it down
+4. `renderer/src/components/Header.tsx` — wordmark + toggle button
+5. `renderer/src/components/DocumentPane.tsx` — dynamic CodeMirror theme
+
+---
+
+## Changes
+
+### 1. Fix Window Title
+**File:** `renderer/index.html`
+**What:** Change `<title>minimal</title>` to `<title>Claude Flow</title>` on line 10.
+
+```html
+<!-- BEFORE -->
+<title>minimal</title>
+
+<!-- AFTER -->
+<title>Claude Flow</title>
+```
+
+---
+
+### 2. Restyle the CSS
+**File:** `renderer/src/styles/globals.css`
+**What:** Complete replacement of the file. Key changes from the original:
+- `:root` dark-mode accent updated to `#60a5fa` / `#93c5fd`
+- `body` font-family changed to full monospace stack
+- New `html[data-theme="light"]` block added after `:root`
+- `border-radius` reduced to 2px on all interactive controls (4px on chat bubbles)
+- `text-transform: uppercase; letter-spacing: 0.07em` added to all meta/chrome labels
+- Focus glow (`box-shadow`) added on inputs and focused buttons
+- New `.app-wordmark` class added
+- New `.theme-toggle` class added
+- All existing selectors preserved; only values changed
+
+```css
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Dark theme (default) ────────────────────────────────────── */
+:root {
+  --bg-primary:     #1a1a1a;
+  --bg-secondary:   #252525;
+  --bg-tertiary:    #333;
+  --border:         #444;
+  --text-primary:   #e0e0e0;
+  --text-secondary: #888;
+  --accent:         #60a5fa;   /* electric blue — brighter than original #3b82f6 */
+  --accent-hover:   #93c5fd;
+  --success:        #10b981;
+  --warning:        #f59e0b;
+  --danger:         #ef4444;
+}
+
+/* ── Light theme overrides ───────────────────────────────────── */
+html[data-theme="light"] {
+  --bg-primary:     #f4f4f2;
+  --bg-secondary:   #e8e8e5;
+  --bg-tertiary:    #d8d8d4;
+  --border:         #b4b4b0;
+  --text-primary:   #1a1a18;
+  --text-secondary: #5a5a56;
+  --accent:         #2563eb;
+  --accent-hover:   #1d4ed8;
+  --success:        #059669;
+  --warning:        #d97706;
+  --danger:         #dc2626;
+}
+
+/* ── Base ────────────────────────────────────────────────────── */
+body {
+  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code",
+    Monaco, "Courier New", monospace;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  overflow: hidden;
+  font-size: 13px;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* ── Header ──────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 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;
+}
+
+/* App wordmark */
+.app-wordmark {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  padding-right: 12px;
+  border-right: 1px solid var(--border);
+  margin-right: 4px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.header select,
+.header button {
+  padding: 5px 10px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.header button:hover {
+  background: var(--border);
+}
+
+.header button.btn-delete {
+  background: transparent;
+  border: 1px solid var(--border);
+  padding: 5px 8px;
+  font-size: 13px;
+}
+
+.header button.btn-delete:hover {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+
+/* Theme toggle */
+.theme-toggle {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.theme-toggle:hover {
+  opacity: 1;
+  background: var(--bg-tertiary) !important;
+}
+
+/* Phase indicator */
+.phase-indicator {
+  display: flex;
+  gap: 4px;
+}
+
+.phase-step {
+  padding: 3px 10px;
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  border-radius: 2px;
+  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);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.document-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.document-header button {
+  padding: 3px 8px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+}
+
+.document-header button:hover {
+  background: var(--border);
+}
+
+.document-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.document-content.editing {
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.6;
+  background: var(--bg-primary);
+  border: none;
+  resize: none;
+  color: var(--text-primary);
+}
+
+.codemirror-editor {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.codemirror-editor .cm-editor {
+  height: 100%;
+  max-width: 100%;
+}
+
+.codemirror-editor .cm-scroller {
+  overflow: auto !important;
+}
+
+.codemirror-editor .cm-gutters {
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+}
+
+.document-content.rendered {
+  line-height: 1.7;
+}
+
+.document-content.rendered h1 {
+  font-size: 22px;
+  margin: 24px 0 16px;
+  letter-spacing: -0.01em;
+}
+.document-content.rendered h2 {
+  font-size: 17px;
+  margin: 20px 0 12px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.document-content.rendered h3 {
+  font-size: 14px;
+  margin: 16px 0 8px;
+}
+.document-content.rendered p {
+  margin: 8px 0;
+  line-height: 1.6;
+}
+.document-content.rendered code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 12px;
+  font-family: inherit;
+}
+.document-content.rendered pre {
+  background: var(--bg-tertiary);
+  padding: 16px;
+  border-radius: 2px;
+  overflow-x: auto;
+  margin: 16px 0;
+}
+.document-content.rendered pre code {
+  background: none;
+  padding: 0;
+}
+.document-content.rendered ul,
+.document-content.rendered ol {
+  margin: 12px 0;
+  padding-left: 24px;
+}
+.document-content.rendered li {
+  margin-bottom: 6px;
+  line-height: 1.5;
+}
+.document-content.rendered ul.contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+.document-content.rendered li.task-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.document-content.rendered li.task-list-item input[type="checkbox"] {
+  margin-top: 4px;
+}
+.document-content.rendered table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 12px;
+}
+.document-content.rendered th,
+.document-content.rendered td {
+  padding: 8px 12px;
+  text-align: left;
+  border: 1px solid var(--border);
+}
+.document-content.rendered th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
+}
+.document-content.rendered tr:nth-child(even) td {
+  background: var(--bg-secondary);
+}
+.document-content.rendered blockquote {
+  border-left: 3px solid var(--accent);
+  margin: 16px 0;
+  padding-left: 16px;
+  color: var(--text-secondary);
+}
+.document-content.rendered hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 24px 0;
+}
+.document-content.rendered a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.document-content.rendered a:hover {
+  text-decoration: underline;
+}
+.document-content.rendered .empty {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.badge {
+  background: var(--accent);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ── 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: 10px;
+  padding: 9px 13px;
+  border-radius: 4px;
+  max-width: 90%;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.message.user {
+  background: var(--accent);
+  margin-left: auto;
+  color: white;
+}
+
+.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: 9px 13px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.chat-input input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+html[data-theme="light"] .chat-input input:focus {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
+.chat-input button {
+  padding: 9px 15px;
+  background: var(--accent);
+  border: none;
+  border-radius: 2px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  transition: background 0.15s;
+}
+
+.chat-input button:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.chat-input button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Action Bar ──────────────────────────────────────────────── */
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 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: 4px;
+  background: var(--bg-tertiary);
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.token-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.token-label {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.permission-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.permission-toggle input {
+  cursor: pointer;
+}
+
+.btn-secondary {
+  padding: 6px 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+  transition: background 0.15s;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--border);
+}
+
+.btn-secondary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  padding: 6px 18px;
+  background: var(--accent);
+  border: none;
+  border-radius: 2px;
+  color: white;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.implementing-status {
+  color: var(--success);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* ── Error Bar ───────────────────────────────────────────────── */
+.error-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--danger);
+  color: white;
+  font-size: 12px;
+  letter-spacing: 0.03em;
+}
+
+.error-bar button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.error-bar button:hover {
+  opacity: 0.8;
+}
+
+/* ── Onboarding ──────────────────────────────────────────────── */
+.onboarding h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.onboarding h2 {
+  font-size: 13px;
+  margin-top: 28px;
+  margin-bottom: 12px;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.onboarding p {
+  margin: 12px 0;
+  line-height: 1.6;
+}
+
+.onboarding ol {
+  margin: 12px 0 12px 24px;
+}
+
+.onboarding li {
+  margin: 8px 0;
+  line-height: 1.5;
+}
+
+.onboarding pre {
+  background: var(--bg-tertiary);
+  padding: 12px 16px;
+  border-radius: 2px;
+  margin: 12px 0;
+}
+
+.onboarding code {
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.onboarding a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.onboarding a:hover {
+  text-decoration: underline;
+}
+
+.onboarding-tip {
+  margin-top: 28px;
+  padding: 16px;
+  background: var(--bg-tertiary);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 2px 2px 0;
+}
+```
+
+---
+
+### 3. Add Theme State to App
+**File:** `renderer/src/App.tsx`
+**What:** Three additions to the existing file — no existing logic is touched.
+
+**3a. Add `Theme` type and `theme` state** — insert after the existing imports, before the `App` function:
+
+```typescript
+// Add this type alias near the top, alongside other local types if any,
+// or just before the App function:
+type Theme = "dark" | "light";
+```
+
+**3b. Add `theme` state and side-effects** — insert inside `App()`, after the existing `useState` declarations (after `const [error, setError] = useState<string | null>(null)`):
+
+```typescript
+const [theme, setTheme] = useState<Theme>(
+  () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
+);
+
+// Keep document.documentElement in sync, and persist to localStorage
+useEffect(() => {
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("cf-theme", theme);
+}, [theme]);
+
+const handleToggleTheme = () =>
+  setTheme((t) => (t === "dark" ? "light" : "dark"));
+```
+
+**3c. Pass new props to `Header` and `DocumentPane`** — update the JSX inside the `return`:
+
+```tsx
+// Header — add two new props:
+<Header
+  projects={projects}
+  sessions={sessions}
+  selectedProject={selectedProject}
+  selectedSession={selectedSession}
+  onSelectProject={setSelectedProject}
+  onSelectSession={setSelectedSession}
+  onCreateProject={handleCreateProject}
+  onCreateSession={handleCreateSession}
+  onDeleteProject={handleDeleteProject}
+  onDeleteSession={handleDeleteSession}
+  theme={theme}
+  onToggleTheme={handleToggleTheme}
+/>
+
+// DocumentPane — add one new prop:
+<DocumentPane
+  content={documentContent}
+  onChange={setDocumentContent}
+  phase={selectedSession?.phase || "research"}
+  disabled={!selectedSession || selectedSession.phase === "implement"}
+  showOnboarding={!selectedProject}
+  theme={theme}
+/>
+```
+
+---
+
+### 4. Update Header Component
+**File:** `renderer/src/components/Header.tsx`
+**What:** Add `theme` and `onToggleTheme` to the props interface, insert wordmark element, add toggle button.
+
+**Complete updated file:**
+
+```tsx
+import React from "react";
+import type { Project, Session, Phase } from "../types";
+
+type Theme = "dark" | "light";
+
+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;
+  onDeleteProject?: (id: string) => void;
+  onDeleteSession?: (id: string) => void;
+  theme: Theme;
+  onToggleTheme: () => 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,
+  onDeleteProject,
+  onDeleteSession,
+  theme,
+  onToggleTheme,
+}: HeaderProps) {
+  const handleDeleteProject = () => {
+    if (!selectedProject || !onDeleteProject) return;
+    if (confirm(`Delete project "${selectedProject.name}"? This cannot be undone.`)) {
+      onDeleteProject(selectedProject.id);
+    }
+  };
+
+  const handleDeleteSession = () => {
+    if (!selectedSession || !onDeleteSession) return;
+    if (confirm(`Delete session "${selectedSession.name}"? This cannot be undone.`)) {
+      onDeleteSession(selectedSession.id);
+    }
+  };
+
+  return (
+    <header className="header">
+      <div className="header-left">
+        {/* ── Wordmark ── */}
+        <span className="app-wordmark">Claude Flow</span>
+
+        <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 && onDeleteProject && (
+          <button
+            onClick={handleDeleteProject}
+            className="btn-delete"
+            title="Delete 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>
+            {selectedSession && onDeleteSession && (
+              <button
+                onClick={handleDeleteSession}
+                className="btn-delete"
+                title="Delete 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>
+        )}
+
+        {/* ── Theme toggle ── */}
+        <button className="theme-toggle" onClick={onToggleTheme}>
+          {theme === "dark" ? "[light]" : "[dark]"}
+        </button>
+      </div>
+    </header>
+  );
+}
+```
+
+---
+
+### 5. Dynamic CodeMirror Theme in DocumentPane
+**File:** `renderer/src/components/DocumentPane.tsx`
+**What:** Three surgical changes to `MarkdownEditor` — add `theme` prop, update imports, update `useEffect`.
+
+**5a. Update imports** — add `syntaxHighlighting` and `defaultHighlightStyle` to the `@codemirror/language` import:
+
+```typescript
+// BEFORE:
+import { markdown } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+
+// AFTER:
+import { markdown } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+```
+
+**5b. Update `MarkdownEditor` props interface** — add `theme`:
+
+```typescript
+// BEFORE:
+function MarkdownEditor({
+  content,
+  onChange,
+  disabled,
+}: {
+  content: string;
+  onChange: (content: string) => void;
+  disabled: boolean;
+})
+
+// AFTER:
+function MarkdownEditor({
+  content,
+  onChange,
+  disabled,
+  theme,
+}: {
+  content: string;
+  onChange: (content: string) => void;
+  disabled: boolean;
+  theme: "dark" | "light";
+})
+```
+
+**5c. Update the `useEffect` inside `MarkdownEditor`** — swap the theme extension and add `theme` to the dependency array:
+
+```typescript
+// BEFORE (inside useEffect):
+extensions: [
+  lineNumbers(),
+  highlightActiveLine(),
+  drawSelection(),
+  history(),
+  keymap.of([...defaultKeymap, ...historyKeymap]),
+  markdown({ codeLanguages: languages }),
+  oneDark,           // ← hardcoded
+  updateListener,
+  EditorView.editable.of(!disabled),
+  EditorView.lineWrapping,
+  EditorView.theme({ ... }),
+],
+// dependency array:
+}, [disabled]);
+
+// AFTER:
+extensions: [
+  lineNumbers(),
+  highlightActiveLine(),
+  drawSelection(),
+  history(),
+  keymap.of([...defaultKeymap, ...historyKeymap]),
+  markdown({ codeLanguages: languages }),
+  theme === "dark" ? oneDark : syntaxHighlighting(defaultHighlightStyle),  // ← dynamic
+  updateListener,
+  EditorView.editable.of(!disabled),
+  EditorView.lineWrapping,
+  EditorView.theme({ ... }),
+],
+// dependency array:
+}, [disabled, theme]);   // ← theme added
+```
+
+**5d. Update `DocumentPaneProps` interface and pass `theme` through** — add to the interface and forward to `MarkdownEditor`:
+
+```typescript
+// BEFORE:
+interface DocumentPaneProps {
+  content: string;
+  onChange: (content: string) => void;
+  phase: Phase;
+  disabled: boolean;
+  showOnboarding?: boolean;
+}
+
+// AFTER:
+interface DocumentPaneProps {
+  content: string;
+  onChange: (content: string) => void;
+  phase: Phase;
+  disabled: boolean;
+  showOnboarding?: boolean;
+  theme: "dark" | "light";
+}
+```
+
+And in the `DocumentPane` function body, destructure `theme` and pass it to `MarkdownEditor`:
+
+```tsx
+// BEFORE:
+export function DocumentPane({
+  content,
+  onChange,
+  phase,
+  disabled,
+  showOnboarding,
+}: DocumentPaneProps)
+
+// AFTER:
+export function DocumentPane({
+  content,
+  onChange,
+  phase,
+  disabled,
+  showOnboarding,
+  theme,
+}: DocumentPaneProps)
+```
+
+```tsx
+// BEFORE (in JSX):
+<MarkdownEditor
+  content={content}
+  onChange={onChange}
+  disabled={disabled}
+/>
+
+// AFTER:
+<MarkdownEditor
+  content={content}
+  onChange={onChange}
+  disabled={disabled}
+  theme={theme}
+/>
+```
+
+---
+
+## TODO
+- [x] **1.** `renderer/index.html` — change `<title>minimal</title>` to `<title>Claude Flow</title>`
+- [x] **2.** `renderer/src/styles/globals.css` — full replacement with new CSS (monospace body, electric accent, 2px radii, uppercase labels, light theme block, focus glow, `.app-wordmark`, `.theme-toggle`)
+- [x] **3a.** `renderer/src/App.tsx` — add `type Theme` alias
+- [x] **3b.** `renderer/src/App.tsx` — add `theme` state + `useEffect` + `handleToggleTheme`
+- [x] **3c.** `renderer/src/App.tsx` — pass `theme`/`onToggleTheme` to `Header`, pass `theme` to `DocumentPane`
+- [x] **4.** `renderer/src/components/Header.tsx` — full replacement (new props, wordmark, toggle button)
+- [x] **5a.** `renderer/src/components/DocumentPane.tsx` — add `syntaxHighlighting, defaultHighlightStyle` import
+- [x] **5b.** `renderer/src/components/DocumentPane.tsx` — add `theme` to `MarkdownEditor` props
+- [x] **5c.** `renderer/src/components/DocumentPane.tsx` — dynamic theme extension + `theme` in dep array
+- [x] **5d.** `renderer/src/components/DocumentPane.tsx` — add `theme` to `DocumentPaneProps`, destructure, forward to `MarkdownEditor`
+
+---
+
+## Risks / Considerations
+
+**CodeMirror reinitialization on theme switch**: Adding `theme` to the `useEffect` dependency array means the entire editor is torn down and recreated when the theme changes. This is intentional and correct — CodeMirror extensions are baked into the `EditorState` at creation time and can't be hot-swapped. The existing `content` sync `useEffect` will immediately restore the document contents after reinit, so no text loss occurs. There is a brief visual flash on theme toggle; this is acceptable.
+
+**`data-theme` initial state and flash of wrong theme**: The `useState` initializer reads `localStorage` synchronously, and the `useEffect` sets `data-theme` on first render. Because this happens before paint (Electron loads the renderer in a hidden window and only shows it after load), there should be no flash of the wrong theme in production. In dev the Vite HMR setup may briefly show unstyled content; this is not a concern for shipping.
+
+**Monospace font rendering differences per OS**: "SF Mono" ships with macOS/Xcode; "Cascadia Code" ships with Windows Terminal; "JetBrains Mono" and "Fira Code" are user-installed. The fallback chain is safe — `Monaco` is widely available on macOS, and `"Courier New", monospace` are universal final fallbacks. No font files are bundled; this is system-font-only.
+
+**`Theme` type duplication**: The `type Theme = "dark" | "light"` alias is defined in both `App.tsx` and `Header.tsx`. This is a minor smell. If it grows to more places, move it into `renderer/src/types.ts`. For this task (2 files) the duplication is acceptable.
+
+**Light mode CodeMirror gutter background**: The `.codemirror-editor .cm-gutters` rule uses `var(--bg-secondary)` which will automatically pick up the light-mode value — no extra change needed there.
+
+**`select` element styling in light mode**: Native `<select>` elements on macOS render with a system style that may look slightly inconsistent in light mode. This is an existing limitation of the app's native select usage and is out of scope for this task.
diff --git a/.claude-flow/research.md b/.claude-flow/research.md
new file mode 100644
index 0000000..30c4832
--- /dev/null
+++ b/.claude-flow/research.md
@@ -0,0 +1,214 @@
+# Research Findings
+
+## Overview
+
+This is an Electron + React + TypeScript app called "Claude Flow" that provides a structured AI-assisted coding workflow (Research → Plan → Implement). The styling is managed through a single monolithic CSS file using CSS custom properties. The current window title is "minimal" (a leftover from the starter template). There is no light/dark mode — only dark. The goal is to: rename the title, add a header wordmark, modernize the UI with a cipherpunk aesthetic (full monospace font, sharper borders, electric-blue accent), and add a text-based light/dark mode toggle.
+
+---
+
+## Architecture
+
+### Tech Stack
+- **Electron 38** — main process, window chrome, IPC
+- **React 19 + Vite** — renderer process
+- **TypeScript** throughout
+- **CodeMirror 6** — markdown editor in DocumentPane
+- **better-sqlite3** — local DB for projects/sessions/messages
+
+### Renderer Structure
+```
+renderer/
+  index.html                   ← <title>minimal</title> — MUST CHANGE to "Claude Flow"
+  src/
+    main.tsx                   ← React root mount
+    App.tsx                    ← Top-level state, layout
+    types.ts                   ← Shared TS types
+    styles/globals.css         ← ALL styling lives here (CSS custom properties)
+    components/
+      Header.tsx               ← Top bar: project/session selectors, phase indicator
+      DocumentPane.tsx         ← Left pane: CodeMirror editor + ReactMarkdown preview
+      ChatPane.tsx             ← Right pane: message list + text input
+      ActionBar.tsx            ← Bottom bar: token usage bar, Review/Submit buttons
+```
+
+### Main Process Structure
+```
+src/main/
+  index.ts       ← BrowserWindow creation (titleBarStyle: "hiddenInset"), IPC setup
+  preload.ts     ← Exposes window.api bridge
+  ipc/handlers.ts
+  db/            ← SQLite schema/queries
+  claude/        ← Claude SDK integration
+```
+
+---
+
+## Relevant Files
+
+| File | Relevance to Task |
+|------|-------------------|
+| `renderer/index.html` | **Line 10**: `<title>minimal</title>` → change to `Claude Flow` |
+| `renderer/src/styles/globals.css` | **All CSS** — CSS custom properties `:root {}` define the entire theme. Single file, ~543 lines |
+| `renderer/src/components/Header.tsx` | Add app wordmark + text theme toggle button (header-right div) |
+| `renderer/src/App.tsx` | Add theme state, persist to localStorage, set `data-theme` on `document.documentElement`, pass props down |
+| `renderer/src/components/DocumentPane.tsx` | Make CodeMirror theme dynamic — swap `oneDark` ↔ `syntaxHighlighting(defaultHighlightStyle)` |
+| `src/main/index.ts` | `titleBarStyle: "hiddenInset"` — macOS frameless, HTML title used in Dock/app switcher |
+
+---
+
+## Key Insights
+
+### 1. Title Change — Two Locations
+The title "minimal" appears in:
+- `renderer/index.html` line 10: `<title>minimal</title>` — the browser/OS-level window title
+- `package.json` line 1: `"name": "minimal-electron-vite-react-better-sqlite"` — package name (lower-priority)
+- `package.json` line 19: `"appId": "com.example.minimalbsqlite"` — build identifier (lower-priority)
+
+**Primary fix**: change `<title>minimal</title>` in `renderer/index.html`.
+
+### 2. Current Color Palette (Dark Only)
+```css
+:root {
+  --bg-primary:    #1a1a1a   /* near-black background */
+  --bg-secondary:  #252525   /* panels, header */
+  --bg-tertiary:   #333      /* inputs, code blocks */
+  --border:        #444      /* dividers */
+  --text-primary:  #e0e0e0   /* main text */
+  --text-secondary:#888      /* muted text, labels */
+  --accent:        #3b82f6   /* blue — buttons, links */
+  --accent-hover:  #2563eb
+  --success:       #10b981   /* green */
+  --warning:       #f59e0b   /* amber */
+  --danger:        #ef4444   /* red */
+}
+```
+No light mode variables exist. The mechanism for light/dark is straightforward: add `html[data-theme="light"]` overrides.
+
+### 3. Light/Dark Mode — Implementation Path
+**Theme storage**: `localStorage` — persist across sessions
+**Toggle mechanism**: Set `data-theme="light"` or `data-theme="dark"` on `document.documentElement`
+**CSS**: Override variables under `html[data-theme="light"]` selector
+**State**: `useState` + `useEffect` in `App.tsx` — no Context needed, just pass `theme` + `onToggleTheme` as props
+**Toggle style**: Text-only, bracket notation: `[dark]` / `[light]` — fits the cipherpunk chrome feel
+
+The `Header` will receive `theme: "dark" | "light"` and `onToggleTheme: () => void` as new props.
+
+**CodeMirror — RESOLVED (no new packages needed)**:
+`@codemirror/language` is already installed as a transitive dependency and exports both `defaultHighlightStyle` and `syntaxHighlighting`. The `defaultHighlightStyle` provides a full light-mode syntax highlighting scheme (keywords in purple, strings in red, literals in green, etc.) — identical coverage to `oneDark`, just different colors.
+
+Strategy:
+- **Dark** → use `[oneDark]` as today
+- **Light** → use `[syntaxHighlighting(defaultHighlightStyle)]` from `@codemirror/language`
+
+`DocumentPane` will receive a `theme` prop. The CodeMirror `useEffect` dependency array will include `theme` (alongside the existing `disabled`) so the editor reinitializes with the correct extension set when the theme changes.
+
+### 4. Accent Color — RESOLVED
+
+**Keep blue, go more electric. No green/cyan.**
+
+The cipherpunk feel will come from sharpness and monospace typography — not a color gimmick.
+
+Proposed accent colors:
+```
+Dark mode:   #60a5fa  (bright electric blue — more vivid than current #3b82f6)
+             hover:   #93c5fd
+Light mode:  #2563eb  (deeper blue — maintains contrast on light backgrounds)
+             hover:   #1d4ed8
+```
+
+### 5. Font — RESOLVED: Full Monospace
+
+Apply a monospace font stack to `body` — the entire UI goes mono. The codebase already uses this stack for code blocks, so extending it to the whole UI creates a unified terminal aesthetic without importing any font files.
+
+```css
+body {
+  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Monaco, "Courier New", monospace;
+}
+```
+
+### 6. Header Wordmark — RESOLVED: Yes, Add It
+
+Add a styled `<span className="app-wordmark">CLAUDE FLOW</span>` as the **first element** inside `.header-left`, before the project dropdown. Separated from the controls by a subtle right border.
+
+```css
+.app-wordmark {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  padding-right: 12px;
+  border-right: 1px solid var(--border);
+  margin-right: 4px;
+  user-select: none;
+  white-space: nowrap;
+}
+```
+
+### 7. Other Cipherpunk Touches — All CSS-Only
+
+- **Sharper borders**: reduce `border-radius` from 4–8px → **2px** on all controls (buttons, inputs, messages, badges). Phase steps → 2px. Chat messages → 4px.
+- **Uppercase meta labels**: `text-transform: uppercase; letter-spacing: 0.07em` on `.token-label`, `.phase-step`, `.document-header span`, `.badge`, `.implementing-status`
+- **Subtle focus glow**: `box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3)` on focused inputs and buttons
+- **Phase brackets**: Phase step text to be updated in `Header.tsx` JSX: `[Research]` → `[RESEARCH]` etc., with CSS uppercase doing the work so the component just renders the labels naturally
+
+### 8. Light Mode Color Palette (Proposed)
+
+```css
+html[data-theme="light"] {
+  --bg-primary:    #f4f4f2;   /* warm off-white — not stark, feels terminal-adjacent */
+  --bg-secondary:  #e8e8e5;   /* panels, header */
+  --bg-tertiary:   #d8d8d4;   /* inputs, code blocks */
+  --border:        #b4b4b0;   /* dividers */
+  --text-primary:  #1a1a18;   /* near-black */
+  --text-secondary:#5a5a56;   /* muted */
+  --accent:        #2563eb;   /* deep blue */
+  --accent-hover:  #1d4ed8;
+  --success:       #059669;
+  --warning:       #d97706;
+  --danger:        #dc2626;
+}
+```
+
+Warm stone tones rather than pure white — keeps the app from feeling like a generic SaaS product.
+
+### 9. No Existing Theme Infrastructure
+There is currently **no ThemeContext, no localStorage usage, no `data-theme` attribute**. Fully greenfield. Simple prop-passing from `App.tsx` is sufficient.
+
+### 10. Window Styling Note
+- **macOS** (`titleBarStyle: "hiddenInset"`): traffic lights appear, no visible title text in window frame. HTML `<title>` shows in Dock tooltip and app switcher.
+- **Linux/Windows**: default Electron title bar shows `<title>` in window chrome. Critical to fix.
+
+---
+
+## Resolved Decisions
+
+| Question | Decision |
+|----------|----------|
+| Accent color | Electric blue: `#60a5fa` (dark) / `#2563eb` (light). No green/cyan. |
+| CodeMirror light theme | `syntaxHighlighting(defaultHighlightStyle)` from already-installed `@codemirror/language`. Zero new packages. |
+| Font scope | **Full mono** — `body` font-family. Entire UI uses monospace stack. |
+| Header wordmark | **Yes** — `CLAUDE FLOW` in `.header-left`, uppercase + letter-spacing + right-border separator |
+| Theme toggle style | **Text toggle**: `[dark]` / `[light]` bracket notation |
+
+---
+
+## Proposed Change Scope
+
+| Change | File(s) | Effort |
+|--------|---------|--------|
+| Fix `<title>` | `renderer/index.html` | Trivial |
+| Apply monospace body font | `globals.css` | Trivial |
+| Sharpen border-radius across all controls | `globals.css` | Small |
+| Uppercase + letter-spacing on meta labels | `globals.css` | Small |
+| Brighter dark-mode accent (#60a5fa) | `globals.css` | Trivial |
+| Add `html[data-theme="light"]` color block | `globals.css` | Small |
+| Add focus glow styles | `globals.css` | Small |
+| Add `.app-wordmark` styles | `globals.css` | Trivial |
+| Add `[dark]`/`[light]` toggle button styles | `globals.css` | Trivial |
+| Add theme state + `localStorage` init | `App.tsx` | Small |
+| Pass `theme` + `onToggleTheme` props to Header | `App.tsx` → `Header.tsx` | Small |
+| Pass `theme` prop to DocumentPane | `App.tsx` → `DocumentPane.tsx` | Small |
+| Add `CLAUDE FLOW` wordmark element | `Header.tsx` | Trivial |
+| Add `[dark]`/`[light]` toggle button | `Header.tsx` | Small |
+| Make CodeMirror theme dynamic | `DocumentPane.tsx` | Small |
diff --git a/.gitignore b/.gitignore
index 737dd85..4569d3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 node_modules
 release
 dist
-.claude-flow/
 *.sync-conflict-*
diff --git a/README.md b/README.md
index ceac0f3..07d3839 100644
--- a/README.md
+++ b/README.md
@@ -14,15 +14,12 @@ At each phase, edit the document to add notes (`// REVIEW:`, `// NOTE:`), click
 
 ## Sessions
 
-Each session has isolated artifacts:
+Each session has isolated artifacts stored in `~/.claude-flow/projects/{projectId}/sessions/{sessionId}/`:
 
-```
-.claude-flow/sessions/{sessionId}/
-├── research.md    # Session research
-└── plan.md        # Session plan
-```
+- `research.md` — Session research
+- `plan.md` — Session plan
 
-Concurrent sessions supported — switch between them freely.
+Concurrent sessions supported — switch between them freely. Artifacts live outside your repo so they never get accidentally committed.
 
 ## Setup
 
diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index c56f292..f7ba41d 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -92,10 +92,10 @@ export function App() {
       // Load messages
       api.listMessages(selectedSession.id).then(setMessages);
 
-      // Load session-specific artifact
+      // Load session-specific artifact (from ~/.claude-flow/)
       const filename =
         selectedSession.phase === "research" ? "research.md" : "plan.md";
-      api.readSessionArtifact(selectedProject.path, selectedSession.id, filename).then((content) => {
+      api.readSessionArtifact(selectedProject.id, selectedSession.id, filename).then((content) => {
         const text = content || "";
         setDocumentContent(text);
         setOriginalContent(text);
@@ -125,7 +125,7 @@ export function App() {
         if (selectedProject && selectedSession) {
           const filename =
             selectedSession.phase === "research" ? "research.md" : "plan.md";
-          api.readSessionArtifact(selectedProject.path, selectedSession.id, filename).then((content) => {
+          api.readSessionArtifact(selectedProject.id, selectedSession.id, filename).then((content) => {
             const text = content || "";
             setDocumentContent(text);
             setOriginalContent(text);
@@ -193,10 +193,10 @@ export function App() {
     if (!selectedSession || !selectedProject) return;
     setError(null);
     try {
-      // Save user edits first (session-specific)
+      // Save user edits first (session-specific, stored in ~/.claude-flow/)
       const filename =
         selectedSession.phase === "research" ? "research.md" : "plan.md";
-      await api.writeSessionArtifact(selectedProject.path, selectedSession.id, filename, documentContent);
+      await api.writeSessionArtifact(selectedProject.id, selectedSession.id, filename, documentContent);
       setOriginalContent(documentContent);
       setIsLoading(true);
       await api.triggerReview(selectedSession.id);
@@ -210,10 +210,10 @@ export function App() {
     if (!selectedSession || !selectedProject) return;
     setError(null);
     try {
-      // Save any pending edits (session-specific)
+      // Save any pending edits (session-specific, stored in ~/.claude-flow/)
       const filename =
         selectedSession.phase === "research" ? "research.md" : "plan.md";
-      await api.writeSessionArtifact(selectedProject.path, selectedSession.id, filename, documentContent);
+      await api.writeSessionArtifact(selectedProject.id, selectedSession.id, filename, documentContent);
 
       const nextPhase = await api.advancePhase(selectedSession.id);
       if (nextPhase) {
diff --git a/src/main/claude/index.ts b/src/main/claude/index.ts
index 4d8909b..b8c9c07 100644
--- a/src/main/claude/index.ts
+++ b/src/main/claude/index.ts
@@ -6,16 +6,28 @@ import { getProject } from "../db/projects";
 import { updateSession } from "../db/sessions";
 import fs from "node:fs";
 import path from "node:path";
+import os from "node:os";
 
 // Track active queries by session ID
 const activeQueries = new Map<string, Query>();
 
+// Global storage in home directory
+const GLOBAL_CLAUDE_FLOW_DIR = path.join(os.homedir(), ".claude-flow");
+
 function ensureDir(dirPath: string): void {
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, { recursive: true });
   }
 }
 
+function getProjectDir(projectId: string): string {
+  return path.join(GLOBAL_CLAUDE_FLOW_DIR, "projects", projectId);
+}
+
+function getSessionDir(projectId: string, sessionId: string): string {
+  return path.join(getProjectDir(projectId), "sessions", sessionId);
+}
+
 export interface SendMessageOptions {
   session: Session;
   message: string;
@@ -30,8 +42,8 @@ export async function sendMessage({
   const project = getProject(session.project_id);
   if (!project) throw new Error("Project not found");
 
-  // Ensure session artifact directory exists
-  const sessionDir = path.join(project.path, getSessionArtifactDir(session.id));
+  // Ensure session artifact directory exists in global storage
+  const sessionDir = getSessionDir(session.project_id, session.id);
   ensureDir(sessionDir);
 
   const phaseConfig = getPhaseConfig(
@@ -100,22 +112,22 @@ export function advancePhase(session: Session): Phase | null {
 }
 
 /**
- * Get the artifact path for a session and phase
+ * Get the artifact path for a session and phase (in global storage)
  */
 export function getArtifactPath(session: Session): string {
   const filename = getArtifactFilename(session.phase as Phase);
-  return path.join(getSessionArtifactDir(session.id), filename);
+  return path.join(getSessionDir(session.project_id, session.id), filename);
 }
 
 /**
- * Read an artifact file for a session
+ * Read an artifact file for a session (from global storage)
  */
 export function readSessionArtifact(
-  projectPath: string,
+  projectId: string,
   sessionId: string,
   filename: string
 ): string | null {
-  const filePath = path.join(projectPath, getSessionArtifactDir(sessionId), filename);
+  const filePath = path.join(getSessionDir(projectId, sessionId), filename);
   if (fs.existsSync(filePath)) {
     return fs.readFileSync(filePath, "utf-8");
   }
@@ -123,15 +135,15 @@ export function readSessionArtifact(
 }
 
 /**
- * Write an artifact file for a session
+ * Write an artifact file for a session (to global storage)
  */
 export function writeSessionArtifact(
-  projectPath: string,
+  projectId: string,
   sessionId: string,
   filename: string,
   content: string
 ): void {
-  const dir = path.join(projectPath, getSessionArtifactDir(sessionId));
+  const dir = getSessionDir(projectId, sessionId);
   ensureDir(dir);
   fs.writeFileSync(path.join(dir, filename), content, "utf-8");
 }
@@ -156,37 +168,10 @@ export function writeClaudeMd(projectPath: string, content: string): void {
 }
 
 /**
- * Read an artifact file from the project's .claude-flow directory (legacy path)
- */
-export function readArtifact(
-  projectPath: string,
-  filename: string
-): string | null {
-  const filePath = path.join(projectPath, ".claude-flow", filename);
-  if (fs.existsSync(filePath)) {
-    return fs.readFileSync(filePath, "utf-8");
-  }
-  return null;
-}
-
-/**
- * Write an artifact file to the project's .claude-flow directory (legacy path)
- */
-export function writeArtifact(
-  projectPath: string,
-  filename: string,
-  content: string
-): void {
-  const dir = path.join(projectPath, ".claude-flow");
-  ensureDir(dir);
-  fs.writeFileSync(path.join(dir, filename), content, "utf-8");
-}
-
-/**
- * Clear session artifacts
+ * Clear session artifacts from global storage
  */
-export function clearSessionArtifacts(projectPath: string, sessionId: string): void {
-  const dir = path.join(projectPath, getSessionArtifactDir(sessionId));
+export function clearSessionArtifacts(projectId: string, sessionId: string): void {
+  const dir = getSessionDir(projectId, sessionId);
   if (fs.existsSync(dir)) {
     fs.rmSync(dir, { recursive: true, force: true });
   }
diff --git a/src/main/claude/phases.ts b/src/main/claude/phases.ts
index 6678c08..f1df719 100644
--- a/src/main/claude/phases.ts
+++ b/src/main/claude/phases.ts
@@ -10,9 +10,9 @@ export interface PhaseConfig {
   initialMessage: string;
 }
 
-// Get session-specific artifact path
+// Get session-specific artifact path (relative to ~/.claude-flow/)
 export function getSessionArtifactDir(sessionId: string): string {
-  return `.claude-flow/sessions/${sessionId}`;
+  return `sessions/${sessionId}`;
 }
 
 export function getArtifactPath(phase: Phase, sessionId: string): string {
@@ -30,7 +30,7 @@ export const phaseConfigs: Record<Phase, PhaseConfig> = {
     systemPrompt: `You are in RESEARCH mode. Your ONLY job is to understand the codebase.
 
 CRITICAL RULES:
-1. You MUST write ALL findings to \`.claude-flow/sessions/{sessionId}/research.md\` — this is your PRIMARY output
+1. You MUST write ALL findings to the session research.md — this is your PRIMARY output
 2. DO NOT just respond in chat. The document viewer shows research.md, so write there.
 3. DO NOT suggest moving to planning or implementation
 4. DO NOT ask "are you ready to implement?" or similar
@@ -38,16 +38,15 @@ CRITICAL RULES:
 6. The user controls phase transitions via UI buttons — never prompt them about it
 
 CONTEXT:
-- You are in a git worktree at \`.claude-flow/worktrees/{sessionId}/\`
-- Read CLAUDE.md in the project root for shared codebase overview
-- If CLAUDE.md doesn't exist, create it with your initial findings
+- Read CLAUDE.md in the project root (if it exists) for codebase overview
 - This file contains general architecture info shared across all sessions
+- If CLAUDE.md doesn't exist, create it with your initial findings
 
 WORKFLOW:
 1. Read CLAUDE.md (create at project root if missing)
 2. Ask what to research (if unclear)
 3. Read files thoroughly using Read, Glob, Grep
-4. Write findings to \`.claude-flow/sessions/{sessionId}/research.md\`
+4. Write findings to session research.md
 5. Update CLAUDE.md with any new general insights worth sharing
 
 FORMAT for research.md:
@@ -70,7 +69,7 @@ FORMAT for research.md:
 [Things that need clarification]
 \`\`\`
 
-Remember: Your output goes in \`.claude-flow/sessions/{sessionId}/research.md\`, not chat. Chat is for clarifying questions only.`,
+Remember: Your output goes in research.md, not chat. Chat is for clarifying questions only.`,
   },
 
   plan: {
@@ -81,7 +80,7 @@ Remember: Your output goes in \`.claude-flow/sessions/{sessionId}/research.md\`,
     systemPrompt: `You are in PLANNING mode. Your ONLY job is to create an implementation plan.
 
 CRITICAL RULES:
-1. You MUST write the plan to \`.claude-flow/sessions/{sessionId}/plan.md\` — this is your PRIMARY output
+1. You MUST write the plan to session plan.md — this is your PRIMARY output
 2. DO NOT just respond in chat. The document viewer shows plan.md, so write there.
 3. DO NOT implement anything — no code changes to source files
 4. DO NOT ask "should I start implementing?" or similar
@@ -89,14 +88,13 @@ CRITICAL RULES:
 6. Base your plan on the session research.md and CLAUDE.md
 
 CONTEXT:
-- You are in a git worktree at \`.claude-flow/worktrees/{sessionId}/\`
 - Read CLAUDE.md at project root for codebase overview
-- Read \`.claude-flow/sessions/{sessionId}/research.md\` for this specific task
+- Read the session research.md to understand the specific task
 
 WORKFLOW:
 1. Read CLAUDE.md for codebase overview
 2. Read the session research.md to understand the specific task
-3. Write a detailed plan to \`.claude-flow/sessions/{sessionId}/plan.md\`
+3. Write a detailed plan to session plan.md
 4. Include specific code snippets showing proposed changes
 5. Make the plan detailed enough that implementation is mechanical
 
@@ -134,47 +132,30 @@ FORMAT for plan.md:
 
 When the user adds annotations to plan.md and clicks Review, address each annotation and update the document.
 
-Remember: Your output goes in \`.claude-flow/sessions/{sessionId}/plan.md\`, not chat. Chat is for clarifying questions only.`,
+Remember: Your output goes in plan.md, not chat. Chat is for clarifying questions only.`,
   },
 
   implement: {
     permissionMode: "acceptEdits",
     tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep"],
     initialMessage:
-      "Starting implementation. I'll follow the plan exactly, commit as I go, and mark tasks complete.",
+      "Starting implementation. I'll follow the plan exactly and mark tasks complete as I go.",
     systemPrompt: `You are in IMPLEMENTATION mode. Execute the approved plan.
 
 CRITICAL RULES:
-1. Read \`.claude-flow/sessions/{sessionId}/plan.md\` and follow it exactly
+1. Read session plan.md and follow it exactly
 2. Mark tasks complete in plan.md as you finish them: - [ ] → - [x]
 3. DO NOT deviate from the plan without asking
 4. Run tests/typecheck if available
-5. Make git commits as you complete logical chunks of work
-6. Stop and ask if you encounter issues not covered by the plan
-
-CONTEXT:
-- You are in a git worktree at \`.claude-flow/worktrees/{sessionId}/\`
-- This is an isolated branch: \`claude-flow/{sessionId}\`
-- Your commits will not affect the main branch until merged
-- The user can review your work in this worktree before accepting
+5. Stop and ask if you encounter issues not covered by the plan
 
 WORKFLOW:
-1. Read \`.claude-flow/sessions/{sessionId}/plan.md\`
+1. Read session plan.md
 2. Execute each task in order
 3. Update plan.md to mark tasks complete
-4. Make git commits with clear messages as you finish chunks
-5. Continue until all tasks are done
-
-COMMIT GUIDELINES:
-- Commit after completing logical units of work
-- Use clear commit messages (e.g., "Add user authentication middleware")
-- Don't commit broken or incomplete code
-- Update CLAUDE.md at project root if you discover important architecture info
-
-When complete, summarize what was done and tell the user how to review:
-- The work is in worktree: \`.claude-flow/worktrees/{sessionId}/\`
-- Branch: \`claude-flow/{sessionId}\`
-- They can review, then merge or discard as needed`,
+4. Continue until all tasks are done
+
+When complete, summarize what was done and any follow-up tasks.`,
   },
 };
 
diff --git a/src/main/ipc/handlers.ts b/src/main/ipc/handlers.ts
index 2d5e3d3..d9beaf0 100644
--- a/src/main/ipc/handlers.ts
+++ b/src/main/ipc/handlers.ts
@@ -26,11 +26,8 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
   ipcMain.handle("sessions:delete", (_, id: string) => {
     const session = sessions.getSession(id);
     if (session) {
-      const project = projects.getProject(session.project_id);
-      if (project) {
-        // Clean up session artifacts
-        claude.clearSessionArtifacts(project.path, id);
-      }
+      // Clean up session artifacts from global storage
+      claude.clearSessionArtifacts(session.project_id, id);
     }
     sessions.deleteSession(id);
   });
@@ -103,22 +100,22 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
     }
   );
 
-  // Session Artifacts (new session-specific API)
+  // Session Artifacts (stored in ~/.claude-flow/)
   ipcMain.handle(
     "artifact:readSession",
-    (_, projectPath: string, sessionId: string, filename: string) => {
-      return claude.readSessionArtifact(projectPath, sessionId, filename);
+    (_, projectId: string, sessionId: string, filename: string) => {
+      return claude.readSessionArtifact(projectId, sessionId, filename);
     }
   );
 
   ipcMain.handle(
     "artifact:writeSession",
-    (_, projectPath: string, sessionId: string, filename: string, content: string) => {
-      claude.writeSessionArtifact(projectPath, sessionId, filename, content);
+    (_, projectId: string, sessionId: string, filename: string, content: string) => {
+      claude.writeSessionArtifact(projectId, sessionId, filename, content);
     }
   );
 
-  // CLAUDE.md
+  // CLAUDE.md (stored in project)
   ipcMain.handle("claudemd:read", (_, projectPath: string) => {
     return claude.readClaudeMd(projectPath);
   });
@@ -127,21 +124,6 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
     claude.writeClaudeMd(projectPath, content);
   });
 
-  // Legacy artifact API (for backward compatibility)
-  ipcMain.handle(
-    "artifact:read",
-    (_, projectPath: string, filename: string) => {
-      return claude.readArtifact(projectPath, filename);
-    }
-  );
-
-  ipcMain.handle(
-    "artifact:write",
-    (_, projectPath: string, filename: string, content: string) => {
-      claude.writeArtifact(projectPath, filename, content);
-    }
-  );
-
   // Dialogs
   ipcMain.handle("dialog:selectDirectory", async () => {
     const result = await dialog.showOpenDialog(mainWindow, {
diff --git a/src/main/preload.ts b/src/main/preload.ts
index 7c1d634..2c228dd 100644
--- a/src/main/preload.ts
+++ b/src/main/preload.ts
@@ -31,34 +31,23 @@ export interface ClaudeFlowAPI {
     mode: UserPermissionMode
   ) => Promise<void>;
 
-  // Session Artifacts (session-specific)
+  // Session Artifacts (stored in ~/.claude-flow/)
   readSessionArtifact: (
-    projectPath: string,
+    projectId: string,
     sessionId: string,
     filename: string
   ) => Promise<string | null>;
   writeSessionArtifact: (
-    projectPath: string,
+    projectId: string,
     sessionId: string,
     filename: string,
     content: string
   ) => Promise<void>;
 
-  // CLAUDE.md
+  // CLAUDE.md (stored in project)
   readClaudeMd: (projectPath: string) => Promise<string | null>;
   writeClaudeMd: (projectPath: string, content: string) => Promise<void>;
 
-  // Legacy Artifacts (backward compat)
-  readArtifact: (
-    projectPath: string,
-    filename: string
-  ) => Promise<string | null>;
-  writeArtifact: (
-    projectPath: string,
-    filename: string,
-    content: string
-  ) => Promise<void>;
-
   // Events
   onClaudeMessage: (
     callback: (sessionId: string, message: SDKMessage) => void
@@ -97,23 +86,17 @@ const api: ClaudeFlowAPI = {
   setPermissionMode: (sessionId, mode) =>
     ipcRenderer.invoke("workflow:setPermissionMode", sessionId, mode),
 
-  // Session Artifacts
-  readSessionArtifact: (projectPath, sessionId, filename) =>
-    ipcRenderer.invoke("artifact:readSession", projectPath, sessionId, filename),
-  writeSessionArtifact: (projectPath, sessionId, filename, content) =>
-    ipcRenderer.invoke("artifact:writeSession", projectPath, sessionId, filename, content),
+  // Session Artifacts (stored in ~/.claude-flow/)
+  readSessionArtifact: (projectId, sessionId, filename) =>
+    ipcRenderer.invoke("artifact:readSession", projectId, sessionId, filename),
+  writeSessionArtifact: (projectId, sessionId, filename, content) =>
+    ipcRenderer.invoke("artifact:writeSession", projectId, sessionId, filename, content),
 
-  // CLAUDE.md
+  // CLAUDE.md (stored in project)
   readClaudeMd: (projectPath) => ipcRenderer.invoke("claudemd:read", projectPath),
   writeClaudeMd: (projectPath, content) =>
     ipcRenderer.invoke("claudemd:write", projectPath, content),
 
-  // Legacy Artifacts
-  readArtifact: (projectPath, filename) =>
-    ipcRenderer.invoke("artifact:read", projectPath, filename),
-  writeArtifact: (projectPath, filename, content) =>
-    ipcRenderer.invoke("artifact:write", projectPath, filename, content),
-
   // Events
   onClaudeMessage: (callback) => {
     const handler = (