@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,47 +0,0 @@
-// src/components/chat/useSlashCommands.ts — filter slash-command suggestions from mods.
-
-import { useMemo, useState } from 'react';
-import type { Mod, Snapshot } from '../../lib/types';
-
-export type SlashCommand = { cmd: string; desc: string; mod?: string };
-
-const BUILTIN_COMMANDS: SlashCommand[] = [
-  { cmd: '/visual-plan [on|off|status]', desc: 'Toggle or view visual plan mode' },
-  { cmd: '/plan new <slug> [template]', desc: 'Create a new plan' },
-  { cmd: '/plan list', desc: 'List all plans' },
-  { cmd: '/plan open <slug>', desc: 'Open a plan in the viewer' },
-  { cmd: '/plan status <slug> <status>', desc: 'Set plan status' },
-  { cmd: '/plan get <slug>', desc: 'Fetch plan canvas' },
-  { cmd: '/plan add <slug> --title T --type kind', desc: 'Add element to a plan' },
-  { cmd: '/plan update <slug> <id>', desc: 'Update a plan element' },
-  { cmd: '/plan delete <slug> <id>', desc: 'Delete a plan element' },
-  { cmd: '/plan comment <slug> [id] "text"', desc: 'Add a comment' },
-  { cmd: '/plan comments <slug> [id]', desc: 'Read plan comments' },
-  { cmd: '/bizar', desc: 'Launch Bizar dashboard' },
-  { cmd: '/bizar <args>', desc: 'Route via Bizar menu' },
-  { cmd: '/audit', desc: 'Run security audit' },
-  { cmd: '/explain <q>', desc: 'Read-only code Q&A' },
-  { cmd: '/init', desc: 'Initialize .bizar/ in this project' },
-  { cmd: '/learn', desc: 'Extract patterns from session' },
-  { cmd: '/pr-review', desc: 'PR review' },
-  { cmd: '/help | /commands', desc: 'Show all Bizar commands' },
-];
-
-export function useSlashCommands(snapshot: Snapshot) {
-  const [query, setQuery] = useState('');
-
-  const allCommands = useMemo<SlashCommand[]>(() => [
-    ...BUILTIN_COMMANDS,
-    ...(snapshot.mods || []).flatMap((m: Mod) =>
-      m.entry?.command ? [{ cmd: `/${m.id}`, desc: m.description || m.name, mod: m.id }] : [],
-    ),
-  ], [snapshot.mods]);
-
-  const suggestions = useMemo(() => {
-    if (!query.startsWith('/') || query.includes(' ')) return [];
-    const q = query.toLowerCase();
-    return allCommands.filter((c) => c.cmd.toLowerCase().startsWith(q)).slice(0, 6);
-  }, [query, allCommands]);
-
-  return { allCommands, suggestions, setQuery };
-}

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

@@ -1,86 +0,0 @@
-// 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

@@ -1,111 +0,0 @@
-// 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;

package/bizar-dash/src/web/components/tasks/BacklogPanel.css

@@ -1,109 +0,0 @@
-/* src/web/components/tasks/BacklogPanel.css — v3.22 */
-
-.backlog-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--card-bg, #1a1a2e);
-  border-bottom: 1px solid var(--border-color, #2d2d44);
-}
-
-.backlog-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.backlog-panel-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary, #a0a0b8);
-}
-
-.backlog-panel-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.backlog-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 280px;
-  overflow-y: auto;
-}
-
-.backlog-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 10px;
-  background: var(--bg-secondary, #16162a);
-  border: 1px solid var(--border-color, #2d2d44);
-  border-radius: 6px;
-}
-
-.backlog-item-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.backlog-item-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary, #e0e0f0);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.backlog-item-badge {
-  font-size: 10px;
-  padding: 1px 5px;
-  border-radius: 3px;
-  background: var(--bg-tertiary, #1e1e38);
-  color: var(--text-muted, #7070a0);
-  white-space: nowrap;
-}
-
-.backlog-item-desc {
-  font-size: 12px;
-  color: var(--text-muted, #7070a0);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.backlog-item-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.backlog-item-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.backlog-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 20px 0;
-  color: var(--text-muted, #7070a0);
-  font-size: 13px;
-}

package/bizar-dash/src/web/components/tasks/BacklogPanel.tsx

@@ -1,209 +0,0 @@
-// src/web/components/tasks/BacklogPanel.tsx — v3.22
-// Backlog panel: lists parked tasks, promote individually or all-at-once.
-import { useEffect, useState } from 'react';
-import {
-  ArrowUp,
-  Trash2,
-  Sparkles,
-  RefreshCw,
-  Inbox,
-} from 'lucide-react';
-import { Button } from '../Button';
-import { useToast } from '../Toast';
-import { api } from '../../lib/api';
-import { formatRelative } from '../../lib/utils';
-import type { Task, Agent } from '../../lib/types';
-
-type BacklogItemProps = {
-  task: Task;
-  agents: Agent[];
-  onPromote: (id: string) => void;
-  onDelete: (id: string) => void;
-  onEdit: (task: Task) => void;
-  onRefresh: () => Promise<void>;
-};
-
-function BacklogItem({ task, agents, onPromote, onDelete, onEdit, onRefresh }: BacklogItemProps) {
-  const toast = useToast();
-
-  const handlePromote = async () => {
-    try {
-      await api.post(`/tasks/${encodeURIComponent(task.id)}/promote`);
-      toast.success('Promoted to queued.', 1500);
-      onPromote(task.id);
-    } catch (err) {
-      toast.error(`Promote failed: ${(err as Error).message}`);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!confirm('Delete this task?')) return;
-    try {
-      await api.del(`/tasks/${encodeURIComponent(task.id)}`);
-      toast.success('Deleted.', 1500);
-      onDelete(task.id);
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  const priorityDot: Record<string, string> = {
-    high: 'var(--warning)',
-    normal: 'var(--info)',
-    low: 'var(--muted)',
-  };
-
-  return (
-    <div className="backlog-item" data-task-id={task.id}>
-      <div className="backlog-item-head">
-        <span
-          className="priority-dot"
-          style={{ background: priorityDot[task.priority] || 'var(--info)' }}
-        />
-        <span className="backlog-item-title">{task.title}</span>
-        {task.assignee && (
-          <span className="backlog-item-badge">@{task.assignee}</span>
-        )}
-        {task.tags?.length > 0 && (
-          <span className="backlog-item-badge">{task.tags.join(', ')}</span>
-        )}
-      </div>
-      {task.description && (
-        <div className="backlog-item-desc">{task.description.slice(0, 120)}</div>
-      )}
-      <div className="backlog-item-footer">
-        <span className="muted text-sm tabular-nums">
-          {formatRelative(task.createdAt)}
-        </span>
-        <div className="backlog-item-actions">
-          <button
-            type="button"
-            className="icon-btn"
-            title="Promote to queued"
-            onClick={handlePromote}
-          >
-            <ArrowUp size={13} />
-          </button>
-          <button
-            type="button"
-            className="icon-btn"
-            title="Edit"
-            onClick={() => onEdit(task)}
-          >
-            <Sparkles size={13} />
-          </button>
-          <button
-            type="button"
-            className="icon-btn icon-btn-danger"
-            title="Delete"
-            onClick={handleDelete}
-          >
-            <Trash2 size={13} />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-type Props = {
-  /** Current list of agents for the edit modal. */
-  agents: Agent[];
-  /** Called after any mutation so the parent can refresh snapshot. */
-  onRefresh: () => Promise<void>;
-};
-
-export function BacklogPanel({ agents, onRefresh }: Props) {
-  const toast = useToast();
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const load = async () => {
-    try {
-      setLoading(true);
-      const r = await api.get<{ tasks: Task[] }>('/tasks/backlog');
-      setTasks(Array.isArray(r.tasks) ? r.tasks : []);
-    } catch (err) {
-      toast.error(`Backlog load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { load(); }, []);
-
-  const handlePromote = async (id: string) => {
-    setTasks((cur) => cur.filter((t) => t.id !== id));
-    await onRefresh();
-  };
-
-  const handleDelete = async (id: string) => {
-    setTasks((cur) => cur.filter((t) => t.id !== id));
-    await onRefresh();
-  };
-
-  const handleEdit = (_task: Task) => {
-    // Editing is wired through the parent Tasks view's modal helper.
-    // Keep this no-op so the icon click is at least visible; the parent
-    // provides the real edit affordance via the kanban.
-  };
-
-  const handlePromoteAll = async () => {
-    if (tasks.length === 0) return;
-    try {
-      const r = await api.post<{ affected: { id: string; ok: boolean }[] }>('/tasks/promote-batch', {
-        ids: tasks.map((t) => t.id),
-      });
-      const ok = r.affected?.filter((a) => a.ok).length ?? 0;
-      toast.success(`Promoted ${ok} task(s).`, 2000);
-      setTasks([]);
-      await onRefresh();
-    } catch (err) {
-      toast.error(`Promote all failed: ${(err as Error).message}`);
-    }
-  };
-
-  return (
-    <div className="backlog-panel">
-      <div className="backlog-panel-header">
-        <span className="backlog-panel-title">
-          <Inbox size={15} />
-          Backlog ({tasks.length})
-        </span>
-        <div className="backlog-panel-header-actions">
-          {tasks.length > 0 && (
-            <Button variant="ghost" size="sm" onClick={handlePromoteAll} title="Promote all to queued">
-              <ArrowUp size={12} /> Promote all
-            </Button>
-          )}
-          <Button variant="ghost" size="sm" onClick={load} title="Refresh backlog" aria-label="Refresh backlog">
-            <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
-          </Button>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="backlog-empty">Loading…</div>
-      ) : tasks.length === 0 ? (
-        <div className="backlog-empty">
-          <Inbox size={28} />
-          <span>Backlog is empty.</span>
-        </div>
-      ) : (
-        <div className="backlog-list">
-          {tasks.map((t) => (
-            <BacklogItem
-              key={t.id}
-              task={t}
-              agents={agents}
-              onPromote={handlePromote}
-              onDelete={handleDelete}
-              onEdit={handleEdit}
-              onRefresh={onRefresh}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/hooks/useAutosave.ts

@@ -1,107 +0,0 @@
-// src/web/hooks/useAutosave.ts
-// Debounced autosave hook for settings fields.
-
-import { useState, useEffect, useRef, useCallback } from 'react';
-
-export type AutosaveStatus = 'idle' | 'saving' | 'saved' | 'error';
-
-export function useAutosave<T>(
-  initialValue: T,
-  saveFn: (value: T) => Promise<void>,
-  {
-    delay = 800,
-    onSaved,
-    onError,
-  }: { delay?: number; onSaved?: () => void; onError?: (e: Error) => void } = {},
-) {
-  const [value, setValue] = useState<T>(initialValue);
-  const [status, setStatus] = useState<AutosaveStatus>('idle');
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const pendingValueRef = useRef<T | null>(null);
-  const lastSavedValue = useRef<T>(initialValue);
-  // Tracks whether a debounce timeout is currently pending (set when timeout is scheduled, cleared when it fires)
-  const hasPendingDebounceRef = useRef(false);
-
-  const save = useCallback(
-    async (v: T) => {
-      setStatus('saving');
-      try {
-        await saveFn(v);
-        lastSavedValue.current = v;
-        pendingValueRef.current = null;
-        setStatus('saved');
-        onSaved?.();
-        setTimeout(() => setStatus('idle'), 2000);
-      } catch (err) {
-        setStatus('error');
-        onError?.(err as Error);
-      }
-    },
-    [saveFn, onSaved, onError],
-  );
-
-  const setValueAndSave = useCallback(
-    (v: T) => {
-      setValue(v);
-      pendingValueRef.current = v;
-      hasPendingDebounceRef.current = true;
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        timeoutRef.current = null;
-        hasPendingDebounceRef.current = false;
-        const toSave = pendingValueRef.current;
-        pendingValueRef.current = null;
-        if (toSave !== null) save(toSave);
-      }, delay);
-    },
-    [delay, save],
-  );
-
-  /**
-   * Clear any pending debounce without saving.
-   * Use this when you want the debounce to handle the save naturally.
-   */
-  const clearDebounce = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-      hasPendingDebounceRef.current = false;
-    }
-  }, []);
-
-  /**
-   * Flush any pending save immediately (called on unmount or explicit flush).
-   */
-  const flush = useCallback(async () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-      hasPendingDebounceRef.current = false;
-      const toSave = pendingValueRef.current;
-      pendingValueRef.current = null;
-      if (toSave !== null) await save(toSave);
-    }
-  }, [save]);
-
-  // Cleanup on unmount: fire pending save immediately
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-        const toSave = pendingValueRef.current;
-        pendingValueRef.current = null;
-        // Fire-and-forget: call saveFn directly to persist without awaiting
-        if (toSave !== null) {
-          setStatus('saving');
-          saveFn(toSave)
-            .then(() => { lastSavedValue.current = toSave; setStatus('saved'); onSaved?.(); })
-            .catch((err: Error) => { setStatus('error'); onError?.(err); })
-            .finally(() => { setTimeout(() => setStatus('idle'), 2000); });
-        }
-      }
-    };
-  }, [saveFn, onSaved, onError]);
-
-  return { value, setValue: setValueAndSave, status, save, flush, clearDebounce, hasPendingDebounceRef, pendingValueRef };
-}

package/bizar-dash/src/web/hooks/useI18n.ts

@@ -1,13 +0,0 @@
-// src/web/hooks/useI18n.ts — React hook for translations.
-import { useState } from 'react';
-import { t, setLocale, getLocale } from '../lib/i18n';
-
-export function useI18n() {
-  const [, force] = useState(0);
-  return {
-    t,
-    setLocale,
-    locale: getLocale(),
-    rerender: () => force((n) => n + 1),
-  };
-}