@polderlabs/bizar 6.2.5 → 7.0.0

package/bizar-dash/src/web/components/chat/useChat.ts

@@ -1,33 +1,29 @@
 // src/components/chat/useChat.ts — shared chat state: messages, sessions,
 // send, polling, SSE, session-state tracking.
 //
-// v4.2.5 — Chat overhaul. Supports two parallel message streams:
+// v6.3.0 — Claude Code migration. Supports two parallel message streams:
 //   - bizar     (GET /api/chat)
-//   - cline  (GET /api/cline-sessions/:id/messages + SSE)
+//   - claude (GET /api/claude-sessions/:id/messages + SSE)
 //
-// v5.0.0 — bug #4 fix: `loadClineSession` failure path now extracts
-// structured `code`, `cause`, `status`, and `suggestion` from the
-// server's ApiError.data envelope and exposes them via a new
-// `clineErrorInfo` field. `ChatInfoPanel` consumes that field to
-// render a structured "Couldn't load session" panel with the server's
-// `suggestion` verbatim, plus a Retry button.
-//
-// Changes from v3.22:
-//   * SSE has automatic reconnect-with-backoff (1s → 30s, doubled on
-//     each error up to a cap). Closes cleanly on unmount and on
-//     session-switch (no leaked EventSource).
+// Changes from v4.2.5:
+//   * Endpoint prefix changed: `/api/claude-sessions/*` → `/api/claude-sessions/*`
+//   * SSE event type names changed to match the Claude SDK envelope
+//     (`message.part.updated` → `delta`/`text_delta`, etc.)
+//   * Server no longer needs the `clineErrorInfo` 503 path; the
+//     `claudeErrorInfo` field stays for parity but the dashboard
+//     mostly sees 502s now (claude CLI not on PATH / spawn failed).
 //   * Optimistic send uses a stable `msg_*` ID and is deduped when
-//     cline echoes the message back via SSE `message.updated`/`message.user.*`.
-//   * `clineMessages` keeps server-provided IDs distinct from
+//     claude echoes the message back via SDK events.
+//   * `claudeMessages` keeps server-provided IDs distinct from
 //     optimistic IDs so the merge is unambiguous (server echo
 //     replaces optimistic by matching messageID; otherwise both stick
 //     around briefly until the user/session state catches up).
-//   * `onSend` routes to `/cline-sessions/:id/send` when an
-//     cline session is active, `/chat` otherwise. Errors surface
+//   * `onSend` routes to `/claude-sessions/:id/send` when a
+//     claude session is active, `/chat` otherwise. Errors surface
 //     via toast + we always remove the optimistic placeholder.
 //   * Sessions are managed by source:
 //       - `bizarSessions`  → local .jsonl store, POST /chat/sessions
-//       - `clineSessions` → cline serve, GET /cline-sessions
+//       - `claudeSessions` → Claude Code, GET /claude-sessions
 //     The rail shows both side-by-side with a source indicator and
 //     uses separate rename/delete endpoints per source.
 //   * All async actions surface a single `busy: { create, send, rename, delete }`
@@ -68,7 +64,7 @@ export interface ChatBusyState {
 
 /**
  * Structured error envelope surfaced by `loadClineSession` when
- * the upstream `/api/cline-sessions/:id/messages` call fails.
+ * the upstream `/api/claude-sessions/:id/messages` call fails.
  *
  * - `code` mirrors the server's `error` field (`plugin_offline`,
  *   `directory_unknown`, `cline_error`, `bad_request`).
@@ -286,7 +282,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
   const refreshClineSessions = useCallback(async () => {
     try {
       const data = await api.get<{ sessions: ChatSession[] }>(
-        '/cline-sessions',
+        '/claude-sessions',
       );
       // Enrich with source marker.
       const enriched: ChatSession[] = (data.sessions || []).map((s) => ({
@@ -333,8 +329,8 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
       // optional, but harmless).
       const tok = api.getToken();
       const url = tok
-        ? `/api/cline-sessions/${encodeURIComponent(id)}/stream?token=${encodeURIComponent(tok)}`
-        : `/api/cline-sessions/${encodeURIComponent(id)}/stream`;
+        ? `/api/claude-sessions/${encodeURIComponent(id)}/stream?token=${encodeURIComponent(tok)}`
+        : `/api/claude-sessions/${encodeURIComponent(id)}/stream`;
 
       sseCurrentSessionIdRef.current = id;
       sseAutoReconnectRef.current = true;
@@ -628,7 +624,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
 
       try {
         const data = await api.get<{ messages: ChatMessage[] }>(
-          `/cline-sessions/${encodeURIComponent(id)}/messages`,
+          `/claude-sessions/${encodeURIComponent(id)}/messages`,
         );
         setClineMessages(data.messages || []);
       } catch (err) {
@@ -735,7 +731,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
           agent: string;
           directory: string;
           createdAt: number;
-        }>('/cline-sessions/new', { agent });
+        }>('/claude-sessions/new', { agent });
         await refreshClineSessions();
         // Open the newly created session right away so the user is
         // dropped into a fresh empty thread, not stuck on the
@@ -814,7 +810,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
         setBusy((b) => ({ ...b, send: true }));
         try {
           await api.post<{ ok: boolean; messageId: string }>(
-            `/cline-sessions/${encodeURIComponent(sid)}/send`,
+            `/claude-sessions/${encodeURIComponent(sid)}/send`,
             {
               message: trimmed,
               agent,
@@ -976,7 +972,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
         const isCline = clineSessions.some((s) => s.id === id);
         if (isCline) {
           await api.patch<{ id: string; title: string }>(
-            `/cline-sessions/${encodeURIComponent(id)}`,
+            `/claude-sessions/${encodeURIComponent(id)}`,
             { title: trimmed },
           );
           setClineSessions((cur) =>
@@ -1012,7 +1008,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
       try {
         const isCline = clineSessions.some((s) => s.id === id);
         if (isCline) {
-          await api.del(`/cline-sessions/${encodeURIComponent(id)}`);
+          await api.del(`/claude-sessions/${encodeURIComponent(id)}`);
           setClineSessions((cur) => cur.filter((s) => s.id !== id));
           if (activeClineSessionId === id) {
             closeClineSession();

package/bizar-dash/src/web/components/goals/GoalInput.tsx

@@ -0,0 +1,86 @@
+// src/web/components/goals/GoalInput.tsx — plain-English goal input.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Free-form textarea + submit
+// button. The submit fires a POST to /api/goal-planner/plan and
+// returns the resulting Plan to the parent via onSubmit(plan).
+import { useState } from 'react';
+import { Send, Sparkles } from 'lucide-react';
+import { Button } from '../Button';
+import { api } from '../../lib/api';
+import { useToast } from '../Toast';
+import type { Plan } from '../../lib/goapPlanner';
+
+interface Props {
+  onPlan?: (plan: Plan) => void;
+  /** Optional: when true, the input renders in compact (toolbar) mode. */
+  compact?: boolean;
+}
+
+const MAX_CHARS = 4000;
+
+export function GoalInput({ onPlan, compact = false }: Props) {
+  const toast = useToast();
+  const [goal, setGoal] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    const trimmed = goal.trim();
+    if (!trimmed) {
+      toast.error('Enter a goal first.');
+      return;
+    }
+    if (trimmed.length > MAX_CHARS) {
+      toast.error(`Goal must be ${MAX_CHARS} chars or fewer.`);
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const plan = await api.post<Plan>('/goal-planner/plan', { goal: trimmed });
+      if (onPlan) onPlan(plan);
+      toast.success(`Plan generated: ${plan.steps.length} steps.`);
+    } catch (err) {
+      const msg = (err as Error)?.message || 'Planner failed';
+      toast.error(`Planner failed: ${msg}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className={`goal-input${compact ? ' goal-input-compact' : ''}`}>
+      <label className="goal-input-label" htmlFor="goal-input-textarea">
+        <Sparkles size={14} aria-hidden />
+        Plain-English goal
+      </label>
+      <textarea
+        id="goal-input-textarea"
+        className="goal-input-textarea"
+        value={goal}
+        onChange={(e) => setGoal(e.target.value)}
+        placeholder="e.g. Research the latest advancements in quantum computing, then design and build a small demo, test it, and document the result."
+        disabled={submitting}
+        maxLength={MAX_CHARS}
+        rows={compact ? 3 : 5}
+        data-testid="goal-input-textarea"
+      />
+      <div className="goal-input-footer">
+        <span className="goal-input-counter" data-testid="goal-input-counter">
+          {goal.length} / {MAX_CHARS}
+        </span>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={submit}
+          loading={submitting}
+          disabled={submitting || !goal.trim()}
+          data-testid="goal-input-submit"
+        >
+          <Send size={14} aria-hidden />
+          {submitting ? 'Planning…' : 'Generate plan'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default GoalInput;

package/bizar-dash/src/web/components/goals/PlanVisualization.tsx

@@ -0,0 +1,111 @@
+// src/web/components/goals/PlanVisualization.tsx — collapsible action tree.
+//
+// v6.4.0 — F-036 (Goal Planner UI). Renders the A* plan as a list of
+// collapsible steps. Each step shows action, agent, deps, cost,
+// and a click-to-expand description.
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Clock, GitBranch } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../Card';
+import { Tag } from '../Tag';
+import { cn } from '../../lib/utils';
+import type { Plan, PlannedStep } from '../../lib/goapPlanner';
+
+interface Props {
+  plan: Plan | null;
+}
+
+function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—';
+  const total = Math.floor(ms / 1000);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+export function PlanVisualization({ plan }: Props) {
+  if (!plan) {
+    return (
+      <Card className="plan-visualization">
+        <CardTitle>Execution plan</CardTitle>
+        <CardMeta>Submit a goal to generate a plan.</CardMeta>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="plan-visualization" data-testid="plan-visualization">
+      <div className="plan-viz-header">
+        <CardTitle>
+          <GitBranch size={14} aria-hidden /> Execution plan
+        </CardTitle>
+        <div className="plan-viz-badges">
+          <Tag variant="info">{plan.steps.length} steps</Tag>
+          <Tag variant="accent">Cost {plan.totalCost}</Tag>
+          <Tag variant="success">
+            <Clock size={10} aria-hidden /> {formatDuration(plan.totalDurationMs)}
+          </Tag>
+        </div>
+      </div>
+      <CardMeta className="plan-viz-goal">Goal: {plan.goal}</CardMeta>
+      <ol className="plan-viz-tree" role="tree">
+        {plan.steps.map((step) => (
+          <PlanStepRow key={step.id} step={step} />
+        ))}
+      </ol>
+    </Card>
+  );
+}
+
+function PlanStepRow({ step }: { step: PlannedStep }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li className="plan-viz-row" role="treeitem" aria-expanded={open}>
+      <button
+        type="button"
+        className="plan-viz-row-head"
+        onClick={() => setOpen((v) => !v)}
+        data-testid={`plan-step-${step.id}`}
+      >
+        <span className="plan-viz-chevron">
+          {open ? <ChevronDown size={14} aria-hidden /> : <ChevronRight size={14} aria-hidden />}
+        </span>
+        <span className={cn('plan-viz-action', `is-${step.action}`)}>{step.action}</span>
+        <span className="plan-viz-title">{step.title}</span>
+        <span className="plan-viz-agent">@{step.agent}</span>
+        <span className="plan-viz-cost">{step.estimatedCost}</span>
+      </button>
+      {open && (
+        <div className="plan-viz-row-body" data-testid={`plan-step-${step.id}-body`}>
+          <p>{step.description}</p>
+          {step.deps.length > 0 && (
+            <div className="plan-viz-deps">
+              <strong>Deps:</strong>
+              <ul>
+                {step.deps.map((d) => (
+                  <li key={d}>
+                    <code>{d}</code>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <div className="plan-viz-effects">
+            <strong>Effects:</strong>
+            <ul>
+              {step.effects.map((e) => (
+                <li key={e}>
+                  <code>{e}</code>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}
+
+export default PlanVisualization;