@beastmode-develeap/beastmode 0.1.12 → 0.1.14

package/dist/methodologies/design-thinking.json

@@ -0,0 +1,47 @@
+{
+  "id": "design-thinking",
+  "name": "Design Thinking",
+  "description": "Human-centered approach — empathize, define, ideate, prototype, test",
+  "phases": [
+    {
+      "id": "empathize",
+      "name": "Empathize",
+      "agent_role": "UX Researcher",
+      "description": "Understand the users, their needs, pain points, and context",
+      "artifact": "empathy-map.md",
+      "prompt_template": "You are a UX Researcher conducting the Empathize phase of Design Thinking.\n\nGoal: Build deep understanding of the target users.\n- Who are the users? What do they do daily?\n- What are their pain points and frustrations?\n- What are their goals and motivations?\n- What workarounds do they use today?\n\nAsk questions one at a time. Produce an empathy map as the artifact.\n\nTopic: {idea}"
+    },
+    {
+      "id": "define",
+      "name": "Define",
+      "agent_role": "Product Designer",
+      "description": "Synthesize research into a clear problem statement",
+      "artifact": "problem-statement.md",
+      "prompt_template": "You are a Product Designer conducting the Define phase.\n\nUsing the empathy research, craft a clear problem statement:\n- Point of View (POV) statement: [User] needs [need] because [insight]\n- How Might We questions\n- Success criteria\n\nPrevious artifacts:\n{previous_artifacts}"
+    },
+    {
+      "id": "ideate",
+      "name": "Ideate",
+      "agent_role": "Innovation Facilitator",
+      "description": "Generate a wide range of creative solutions",
+      "artifact": "ideas.md",
+      "prompt_template": "You are an Innovation Facilitator conducting the Ideate phase.\n\nGenerate diverse solutions:\n- Quantity over quality — no idea is too wild\n- Build on existing ideas\n- Group and theme the ideas\n- Vote on top 3-5 to prototype\n\nProblem statement:\n{previous_artifacts}"
+    },
+    {
+      "id": "prototype",
+      "name": "Prototype",
+      "agent_role": "Product Designer",
+      "description": "Create lightweight representations of the best ideas",
+      "artifact": "prototype-spec.md",
+      "prompt_template": "You are a Product Designer in the Prototype phase.\n\nFor the selected ideas, create lightweight specs:\n- User flows and wireframe descriptions\n- Key interactions and states\n- What to test and what assumptions to validate\n\nSelected ideas:\n{previous_artifacts}"
+    },
+    {
+      "id": "test",
+      "name": "Test",
+      "agent_role": "UX Researcher",
+      "description": "Define how to validate the prototypes with real users",
+      "artifact": "test-plan.md",
+      "prompt_template": "You are a UX Researcher designing the Test phase.\n\nCreate a test plan:\n- What hypotheses to test\n- Test scenarios and tasks\n- Success/failure criteria\n- How to collect and analyze feedback\n\nPrototypes:\n{previous_artifacts}"
+    }
+  ]
+}

package/dist/methodologies/superpowers.json

@@ -0,0 +1,7 @@
+{
+  "id": "superpowers",
+  "name": "Superpowers Brainstorming",
+  "description": "Structured collaborative brainstorm — explore intent, propose approaches, refine design before implementation",
+  "phases": [],
+  "system_prompt_template": "You are conducting a structured brainstorming session using the Superpowers methodology.\n\nProcess:\n1. Understand the idea — ask clarifying questions one at a time\n2. Explore alternatives — propose 2-3 approaches with trade-offs\n3. Refine the design — present sections incrementally, get approval\n4. Document — summarize decisions and next steps\n\nRules:\n- One question at a time\n- Prefer multiple choice when possible\n- YAGNI ruthlessly — remove unnecessary features\n- Be ready to go back and clarify\n\nThe user's topic: {idea}"
+}

package/dist/web/board.html

@@ -5278,7 +5278,7 @@ function InceptionSetup({ methodologies, onStart, onCancel }) {
   return html`
     <div class="card" style="max-width:600px;margin:40px auto;">
       <div class="card-header">
-        <h3>New Product</h3>
+        <h3>Product Inception</h3>
       </div>
       <div class="form-field">
         <label>Product Name</label>
@@ -5504,17 +5504,16 @@ function ChatPage({ selectedProject, inceptionMode, quickBrainstorm, resumeSessi
         return [...prev, { id: Date.now(), role: 'assistant', content: data.delta.text, timestamp: new Date() }];
       });
     } else if (data.type === 'tool_use') {
-      // Tool call — seal any in-progress assistant message, show tool card, keep thinking
+      // Tool call — seal any in-progress assistant message, keep thinking.
+      // Don't render tool cards in the chat — just show the thinking indicator.
       setMessages(prev => {
         if (prev.length > 0 && prev[prev.length - 1].role === 'assistant' && !prev[prev.length - 1].sealed) {
           return [...prev.slice(0, -1), { ...prev[prev.length - 1], sealed: true }];
         }
         return prev;
       });
-      addMessage('tool', data.name || 'tool', { input: data.input, id: data.id });
       setThinking(true);
     } else if (data.type === 'tool_result') {
-      addMessage('tool_result', data.output || '', { id: data.id, name: data.name });
       // Keep thinking — Claude will respond after processing tool results
       setThinking(true);
     } else if (data.type === 'error') {
@@ -5809,112 +5808,219 @@ function ToolResultCard({ content, extra }) {
 }
 
 // ================================================================
-// Strategy Page
+// Strategy Start Screen — 1-liner prompt or Product inception form
 // ================================================================
 
+function StrategyStartPage({ selectedProject, sessionType }) {
+  const [topic, setTopic] = useState('');
+  const [approach, setApproach] = useState('auto');
+  const [methodologies, setMethodologies] = useState([]);
+
+  useEffect(() => {
+    api('GET', '/api/methodologies').then(data => setMethodologies(data.methodologies || [])).catch(() => {});
+  }, []);
+
+  // Product type: show full inception form
+  if (sessionType === 'product') {
+    return html`<${InceptionSetup}
+      methodologies=${methodologies}
+      onStart=${(config) => {
+        api('POST', '/api/strategy/' + selectedProject + '/sessions', {
+          name: config.productName,
+          idea: config.idea,
+          methodology: config.methodology,
+          interactionMode: config.interactionMode,
+          sessionType: 'product',
+          approach: config.methodology,
+        }).then(session => {
+          navigate('#/strategy-session/' + session.sessionId);
+        });
+      }}
+      onCancel=${() => navigate('#/strategy')}
+    />`;
+  }
+
+  // Free-form: create session and go straight to chat
+  if (sessionType === 'free-form') {
+    useEffect(() => {
+      api('POST', '/api/strategy/' + selectedProject + '/sessions', {
+        name: 'Free-form session',
+        idea: 'Open-ended strategic thinking',
+        methodology: 'none',
+        sessionType: 'free-form',
+        approach: 'auto',
+      }).then(session => {
+        navigate('#/strategy-session/' + session.sessionId);
+      });
+    }, []);
+    return html`<${SkeletonLoader} type="page" />`;
+  }
+
+  // Everything else: 1-liner prompt + approach dropdown
+  const typeLabel = (SESSION_TYPES.find(t => t.id === sessionType) || {}).name || sessionType;
+
+  const approaches = [
+    { id: 'auto', name: 'Auto', desc: 'Claude picks based on topic' },
+    ...(methodologies || []).map(m => ({ id: m.id, name: m.name, desc: m.description })),
+  ];
+
+  return html`
+    <div class="page-content">
+      <div class="card" style="max-width:500px;margin:60px auto;">
+        <div class="card-header">
+          <h3>${typeLabel} Session</h3>
+        </div>
+        <div class="form-field">
+          <label>What are you thinking about?</label>
+          <textarea class="form-input form-textarea" rows="3"
+                    placeholder="Describe what you want to explore..."
+                    value=${topic} onInput=${(e) => setTopic(e.target.value)}></textarea>
+        </div>
+        <div class="form-field">
+          <label>Approach</label>
+          <select class="form-input" value=${approach} onChange=${(e) => setApproach(e.target.value)}>
+            ${approaches.map(a => html`
+              <option key=${a.id} value=${a.id}>${a.name}${a.desc ? ' — ' + a.desc : ''}</option>
+            `)}
+          </select>
+        </div>
+        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px;">
+          <button class="btn" onClick=${() => navigate('#/strategy')}>Cancel</button>
+          <button class="btn btn-primary" disabled=${!topic.trim()}
+                  onClick=${() => {
+                    api('POST', '/api/strategy/' + selectedProject + '/sessions', {
+                      name: topic.trim().substring(0, 60),
+                      idea: topic.trim(),
+                      methodology: approach === 'auto' ? 'none' : approach,
+                      sessionType,
+                      approach,
+                    }).then(session => {
+                      navigate('#/strategy-session/' + session.sessionId);
+                    });
+                  }}>
+            Start
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ================================================================
+// Strategy Page — Brain + Door
+// ================================================================
+
+const SESSION_TYPES = [
+  { id: 'feature', name: 'Feature', color: '#F5A623', desc: 'Brainstorm a new feature or enhancement' },
+  { id: 'architecture', name: 'Architecture', color: '#4CAF50', desc: 'Evaluate design decisions & trade-offs' },
+  { id: 'refactor', name: 'Refactor', color: '#2196F3', desc: 'Plan tech debt cleanup or restructuring' },
+  { id: 'product', name: 'Product', color: '#9C27B0', desc: 'Full product inception (BMAD/Lean/PRD)' },
+  { id: 'review', name: 'Review', color: '#FF9800', desc: 'Retrospective on recent work & runs' },
+  { id: 'free-form', name: 'Free-form', color: '#888', desc: 'Open-ended strategic thinking' },
+];
+
+const FEED_TYPE_STYLES = {
+  session:  { letter: 'S', color: '#F5A623' },
+  decision: { letter: 'D', color: '#4CAF50' },
+  task:     { letter: 'T', color: '#2196F3' },
+  learning: { letter: 'L', color: '#FF9800' },
+  run:      { letter: 'R', color: '#9C27B0' },
+};
+
 function StrategyPage({ selectedProject }) {
-  const [sessions, setSessions] = useState([]);
+  const [feed, setFeed] = useState([]);
+  const [feedTotal, setFeedTotal] = useState(0);
+  const [nextCursor, setNextCursor] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [index, setIndex] = useState(null);
+
+  const loadFeed = (cursor) => {
+    const url = '/api/strategy/' + selectedProject + '/feed' + (cursor ? '?cursor=' + cursor : '');
+    api('GET', url).then(data => {
+      if (cursor) {
+        setFeed(prev => [...prev, ...(data.items || [])]);
+      } else {
+        setFeed(data.items || []);
+      }
+      setFeedTotal(data.total || 0);
+      setNextCursor(data.nextCursor || null);
+    }).catch(() => {}).finally(() => setLoading(false));
+  };
 
   useEffect(() => {
     if (!selectedProject || selectedProject === 'all') { setLoading(false); return; }
-    Promise.all([
-      api('GET', '/api/strategy/' + selectedProject + '/sessions').catch(() => ({ sessions: [] })),
-      api('GET', '/api/strategy/' + selectedProject + '/index').catch(() => null),
-    ]).then(([sessData, indexData]) => {
-      setSessions(sessData.sessions || []);
-      setIndex(indexData);
-    }).finally(() => setLoading(false));
+    loadFeed(null);
   }, [selectedProject]);
 
-  if (loading) return html`<${SkeletonLoader} type="cards" />`;
-
   if (!selectedProject || selectedProject === 'all') {
     return html`<div class="page-content">
       <div class="page-header"><h2>Strategy</h2><p>Select a project to view its strategy space</p></div>
     </div>`;
   }
 
-  const learnings = (index?.artifacts || []).filter(a => a.type === 'learning');
+  if (loading) return html`<${SkeletonLoader} type="cards" />`;
 
   return html`
     <div class="page-content">
       <div class="page-header">
         <h2>Strategy — ${selectedProject}</h2>
-        <p>Plan major changes, brainstorm features, track strategic decisions</p>
+        <p>Plan, brainstorm, decide, track</p>
       </div>
 
-      <div style="display:flex;gap:10px;margin-bottom:20px;">
-        <button class="btn btn-primary btn-pill" onClick=${() => navigate('#/new-session')}>
-          <${Icon} name="plus" size=${14} /> New Session
-        </button>
-        <button class="btn btn-pill" onClick=${() => navigate('#/quick-brainstorm')}>
-          <${Icon} name="chat" size=${14} /> Quick Brainstorm
-        </button>
+      <!-- Session Launcher -->
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px;">
+        ${SESSION_TYPES.map(t => html`
+          <div key=${t.id} style="padding:14px;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color 0.15s;"
+               onMouseOver=${(e) => e.currentTarget.style.borderColor = t.color}
+               onMouseOut=${(e) => e.currentTarget.style.borderColor = 'var(--border)'}
+               onClick=${() => navigate('#/strategy-start/' + t.id)}>
+            <div style="font-size:13px;font-weight:600;color:${t.color};">${t.name}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t.desc}</div>
+          </div>
+        `)}
       </div>
 
-      ${learnings.length > 0 ? html`
-        <div class="card" style="margin-bottom:16px;">
-          <div class="card-header">
-            <h3>Active Learnings</h3>
-            <span class="badge badge-accent">${learnings.length}</span>
-          </div>
-          ${learnings.map(l => html`
-            <div class="activity-item" key=${l.path}>
-              <div class="activity-name" style="font-size:13px;">${l.summary}</div>
-              <div class="activity-meta">
-                <span class="activity-time">${timeAgo(l.date)}</span>
-              </div>
-            </div>
-          `)}
+      <!-- Feed Header -->
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span style="font-size:14px;font-weight:600;color:var(--text);">Activity</span>
+          <span class="badge badge-muted">${feedTotal}</span>
         </div>
-      ` : null}
+        <button class="btn btn-pill" style="font-size:12px;" onClick=${() => {
+          const title = prompt('Decision title:');
+          if (title) {
+            api('POST', '/api/strategy/' + selectedProject + '/decisions', { title, context: '' }).then(() => loadFeed(null));
+          }
+        }}>Log a decision</button>
+      </div>
 
-      <div class="card">
-        <div class="card-header">
-          <h3>Past Sessions</h3>
-          <span class="badge badge-muted">${sessions.length}</span>
-        </div>
-        ${sessions.length === 0
-          ? html`<${EmptyState} icon="runs" title="No strategy sessions yet"
-                    description="Start a new session to plan features and brainstorm ideas." />`
-          : sessions.map(s => html`
-            <div class="activity-item" key=${s.sessionId} style="cursor:pointer;padding:14px 12px;"
-                 onClick=${() => navigate('#/strategy-session/' + s.sessionId)}>
-              <div style="display:flex;justify-content:space-between;align-items:center;">
-                <div>
-                  <div class="activity-name" style="font-size:14px;font-weight:600;">${s.name}</div>
-                  <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">
-                    ${s.methodology.toUpperCase()} — ${s.status}
-                    ${s.phases ? ' — ' + s.phases.filter(p => p.status === 'approved').length + '/' + s.phases.length + ' phases' : ''}
+      <!-- Activity Feed -->
+      ${feed.length === 0
+        ? html`<${EmptyState} icon="runs" title="No strategic activity yet"
+                  description="Start a session above to begin building your project's strategic record." />`
+        : html`<div class="card" style="padding:0;">
+            ${feed.map(item => {
+              const style = FEED_TYPE_STYLES[item.type] || { letter: '?', color: '#666' };
+              return html`
+                <div key=${item.id} style="display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:${item.link ? 'pointer' : 'default'};"
+                     onClick=${() => item.link && navigate(item.link)}>
+                  <div style="width:28px;height:28px;background:${style.color};border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#000;flex-shrink:0;">
+                    ${style.letter}
+                  </div>
+                  <div style="flex:1;min-width:0;">
+                    <div style="font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${item.title}</div>
+                    ${item.subtitle ? html`<div style="font-size:11px;color:var(--text-muted);margin-top:2px;">${item.subtitle}</div>` : null}
                   </div>
+                  <div style="font-size:11px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;">${timeAgo(item.timestamp)}</div>
                 </div>
-                <span class="activity-time">${timeAgo(s.createdAt)}</span>
+              `;
+            })}
+            ${nextCursor ? html`
+              <div style="padding:12px;text-align:center;">
+                <button class="btn btn-pill" style="font-size:12px;" onClick=${() => loadFeed(nextCursor)}>Load more</button>
               </div>
-            </div>
-          `)}
-      </div>
-
-      ${index ? html`
-        <div class="card" style="margin-top:16px;">
-          <div class="card-header"><h3>Project Intelligence</h3></div>
-          <div class="quick-info-row">
-            <div class="quick-info-item">
-              <div><div class="quick-info-label">Sessions</div>
-              <div class="quick-info-value mono">${index.stats.totalSessions}</div></div>
-            </div>
-            <div class="quick-info-item">
-              <div><div class="quick-info-label">Runs</div>
-              <div class="quick-info-value mono">${index.stats.totalRuns}</div></div>
-            </div>
-            <div class="quick-info-item">
-              <div><div class="quick-info-label">Learnings</div>
-              <div class="quick-info-value mono">${index.stats.activeLearnings}</div></div>
-            </div>
-          </div>
-        </div>
-      ` : null}
+            ` : null}
+          </div>`
+      }
     </div>
   `;
 }
@@ -6167,13 +6273,16 @@ function App() {
     case '#/projects':        page = html`<${ProjectsPage} selectedProject=${selectedProject} onProjectChange=${setSelectedProject} />`; break;
     case '#/extensions':      page = html`<${ExtensionsPage} selectedProject=${selectedProject} />`; break;
     case '#/chat':            page = html`<${ChatPage} selectedProject=${selectedProject} />`; break;
-    case '#/new-product':     page = html`<${ChatPage} selectedProject=${selectedProject} inceptionMode=${true} />`; break;
-    case '#/new-session':     page = html`<${ChatPage} selectedProject=${selectedProject} inceptionMode=${true} strategyMode=${'full'} />`; break;
-    case '#/quick-brainstorm': page = html`<${ChatPage} selectedProject=${selectedProject} quickBrainstorm=${true} />`; break;
+    case '#/new-product':     navigate('#/strategy-start/product'); page = html`<${SkeletonLoader} type="page" />`; break;
+    case '#/new-session':     navigate('#/strategy-start/free-form'); page = html`<${SkeletonLoader} type="page" />`; break;
+    case '#/quick-brainstorm': navigate('#/strategy-start/free-form'); page = html`<${SkeletonLoader} type="page" />`; break;
     case '#/settings':        page = html`<${SettingsPage} selectedProject=${selectedProject} />`; break;
     case '#/help':            page = html`<${HelpPage} />`; break;
     default:
-      if (route.startsWith('#/strategy-session/')) {
+      if (route.startsWith('#/strategy-start/')) {
+        const sessionType = route.replace('#/strategy-start/', '');
+        page = html`<${StrategyStartPage} selectedProject=${selectedProject} sessionType=${sessionType} />`;
+      } else if (route.startsWith('#/strategy-session/')) {
         const sessionId = route.replace('#/strategy-session/', '');
         page = html`<${ChatPage} selectedProject=${selectedProject} resumeSession=${sessionId} />`;
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beastmode-develeap/beastmode",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "BeastMode Dark Factory — turn intent into verified software",
   "type": "module",
   "bin": {