Add onboarding screen for first-time users

- Show welcome view when no project is selected
- Explain the Research → Plan → Implement workflow
- Include ANTHROPIC_API_KEY setup instructions
- List getting started steps (add project, create session, describe work)
- Explain iteration workflow with Review/Submit buttons
- Add CSS styling for onboarding content

1 files changed, 37 insertions, 0 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index e44b0fb..a22ecad 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -6,6 +6,7 @@ interface DocumentPaneProps {
   onChange: (content: string) => void;
   phase: Phase;
   disabled: boolean;
+  showOnboarding?: boolean;
 }
 
 function renderMarkdown(md: string): string {
@@ -50,10 +51,46 @@ export function DocumentPane({
   onChange,
   phase,
   disabled,
+  showOnboarding,
 }: DocumentPaneProps) {
   const [isEditing, setIsEditing] = useState(false);
   const renderedHtml = useMemo(() => renderMarkdown(content), [content]);
 
+  if (showOnboarding) {
+    return (
+      <div className="document-pane">
+        <div className="document-header">
+          <span>Welcome to Claude Flow</span>
+        </div>
+        <div className="document-content rendered onboarding">
+          <h1>Claude Flow</h1>
+          <p>
+            A structured workflow for AI-assisted coding: <strong>Research → Plan → Implement</strong>.
+          </p>
+
+          <h2>Setup</h2>
+          <p>Export your Anthropic API key:</p>
+          <pre><code>export ANTHROPIC_API_KEY=your-key-here</code></pre>
+          <p>Get one at <a href="https://platform.claude.com" target="_blank" rel="noopener">platform.claude.com</a></p>
+
+          <h2>Getting Started</h2>
+          <ol>
+            <li><strong>Add a project</strong> — Select a codebase folder</li>
+            <li><strong>Create a session</strong> — Start a new task</li>
+            <li><strong>Describe your work</strong> — Tell Claude what you want to build</li>
+          </ol>
+
+          <h2>Workflow</h2>
+          <p><strong>Research:</strong> Claude analyzes your codebase and writes findings to <code>research.md</code>. Add notes like <code>// REVIEW: check this</code> — click <strong>Review</strong> when done.</p>
+          <p><strong>Plan:</strong> Claude drafts an implementation plan in <code>plan.md</code> with code snippets and a TODO list. Iterate the same way.</p>
+          <p><strong>Implement:</strong> Claude executes the plan, marking tasks complete as it goes.</p>
+
+          <p className="onboarding-tip">Iterate on research and plan docs as long as you want. Click <strong>Submit</strong> when happy to move to the next phase.</p>
+        </div>
+      </div>
+    );
+  }
+
   if (phase === "implement") {
     return (
       <div className="document-pane">