From e4b1b26c1d61854b93c2cc3cba1714df2d7417d5 Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 08:11:41 -0800
Subject: Add onboarding screen for first-time users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 renderer/src/App.tsx                     |  1 +
 renderer/src/components/DocumentPane.tsx | 37 +++++++++++++++++++++
 renderer/src/styles/globals.css          | 56 ++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+)

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 22082a2..d5a2efd 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -256,6 +256,7 @@ export function App() {
           onChange={setDocumentContent}
           phase={selectedSession?.phase || "research"}
           disabled={!selectedSession || selectedSession.phase === "implement"}
+          showOnboarding={!selectedProject}
         />
 
         <ChatPane
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">
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index d917f7e..809ff15 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -413,3 +413,59 @@ body {
 .error-bar button:hover {
   opacity: 0.8;
 }
+
+/* Onboarding */
+.onboarding h1 {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.onboarding h2 {
+  font-size: 20px;
+  margin-top: 28px;
+  margin-bottom: 12px;
+  color: var(--accent);
+}
+
+.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: 6px;
+  margin: 12px 0;
+}
+
+.onboarding code {
+  font-family: "SF Mono", Monaco, monospace;
+  font-size: 13px;
+}
+
+.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 6px 6px 0;
+}
-- 
cgit v1.2.3