@polderlabs/bizar 5.0.0 → 5.0.2

package/bizar-dash/src/web/components/chat/ChatInfoPanel.tsx

@@ -5,9 +5,17 @@
 // in use, a section for usage/cost placeholders (filled in by the
 // MiniMax usage module when present), and rename / delete / export
 // actions wired to the parent.
+//
+// v5.0.0 — bug #4 fix: the panel now renders a structured error
+// section when the opencode session load fails. The chat-thread
+// header (rendered by Chat.tsx) also shows the error inline; the
+// info-panel error makes it impossible to miss when the right
+// sidebar is in view, and exposes the server's `suggestion` and a
+// Retry button so the operator can act without scrolling.
 
 import { useEffect, useState } from 'react';
 import {
+  AlertTriangle,
   MessageSquare,
   Bot,
   Server,
@@ -16,6 +24,7 @@ import {
   Trash2,
   Download,
   CircleDollarSign,
+  RotateCw,
 } from 'lucide-react';
 import type { ChatMessage } from '../../lib/types';
 
@@ -36,6 +45,23 @@ interface Props {
   onExport?: () => void;
   /** Per-action busy flags — disable buttons while pending. */
   busy?: { rename?: boolean; delete?: boolean };
+  /**
+   * v5.0.0 — bug #4: structured error envelope from `loadOpencodeSession`.
+   * When present, the panel renders an error section above the Session
+   * section so the operator can see what went wrong without scrolling.
+   */
+  error?: {
+    code: string;
+    message: string;
+    suggestion?: string | null;
+    canRetry?: boolean;
+  } | null;
+  /**
+   * v5.0.0 — bug #4: retry handler invoked when the operator clicks
+   * the Retry button on the error section. Wired to
+   * `chat.retryOpencodeSession` by Chat.tsx.
+   */
+  onRetry?: () => void;
 }
 
 interface UsageRow {
@@ -86,6 +112,8 @@ export function ChatInfoPanel({
   onDelete,
   onExport,
   busy,
+  error,
+  onRetry,
 }: Props) {
   // Best-effort: pull usage summary from the MiniMax usage endpoint
   // when the session is opencode. Falls back silently if the module
@@ -129,6 +157,42 @@ export function ChatInfoPanel({
 
   return (
     <aside className="chat-info">
+      {error && (
+        <div
+          className="chat-info-section chat-info-error"
+          role="alert"
+          aria-live="polite"
+        >
+          <h4>
+            <AlertTriangle
+              size={11}
+              style={{ marginRight: 4, verticalAlign: -1 }}
+              aria-hidden
+            />{' '}
+            Couldn't load session
+          </h4>
+          <p className="chat-info-value chat-ellipsis" title={error.message}>
+            {error.message}
+          </p>
+          <div className="chat-info-mono">
+            code · {error.code}
+          </div>
+          {error.suggestion ? (
+            <p className="chat-info-suggestion">{error.suggestion}</p>
+          ) : null}
+          {error.canRetry !== false && onRetry ? (
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm chat-info-retry"
+              onClick={onRetry}
+              title="Retry loading the session"
+            >
+              <RotateCw size={12} aria-hidden /> Retry
+            </button>
+          ) : null}
+        </div>
+      )}
+
       <div className="chat-info-section">
         <div className="chat-info-section-head">
           <h4>

package/bizar-dash/src/web/components/chat/Composer.tsx

@@ -41,7 +41,7 @@ export function Composer({
 }: Props) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  useAutoGrowTextarea(inputRef, text, 200);
+  useAutoGrowTextarea(inputRef, text, 160);
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {

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

@@ -5,6 +5,13 @@
 //   - bizar     (GET /api/chat)
 //   - opencode  (GET /api/opencode-sessions/:id/messages + SSE)
 //
+// v5.0.0 — bug #4 fix: `loadOpencodeSession` failure path now extracts
+// structured `code`, `cause`, `status`, and `suggestion` from the
+// server's ApiError.data envelope and exposes them via a new
+// `opencodeErrorInfo` 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
@@ -59,6 +66,31 @@ export interface ChatBusyState {
   delete: boolean;
 }
 
+/**
+ * Structured error envelope surfaced by `loadOpencodeSession` when
+ * the upstream `/api/opencode-sessions/:id/messages` call fails.
+ *
+ * - `code` mirrors the server's `error` field (`plugin_offline`,
+ *   `directory_unknown`, `opencode_error`, `bad_request`).
+ * - `cause` is the server's structured cause (`network`, `timeout`,
+ *   `unknown`, or a raw ECONNREFUSED-style string).
+ * - `suggestion` is the operator-friendly hint from the server
+ *   (e.g. "Run `bizar doctor` for diagnostics").
+ * - `canRetry` is `true` whenever the failure is transient (network
+ *   error, upstream 502) — i.e. the user can fix it by trying again
+ *   after starting the plugin / waiting for opencode to come back.
+ *   False for hard failures (bad_request).
+ */
+export interface OpencodeErrorInfo {
+  type: 'session_load_failed';
+  code: string;
+  message: string;
+  cause?: string;
+  status?: number;
+  suggestion?: string | null;
+  canRetry: boolean;
+}
+
 /** Shape of one opencode SSE envelope after unwrapping. */
 interface OpencodeSseEnvelope {
   type: string;
@@ -95,6 +127,14 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
   const [activeSource, setActiveSource] = useState<'bizar' | 'opencode' | null>(null);
   const [activeOpencodeSessionId, setActiveOpencodeSessionId] = useState<string | null>(null);
   const [opencodeError, setOpencodeError] = useState<string | null>(null);
+  const [opencodeSuggestion, setOpencodeSuggestion] = useState<string | null>(null);
+  /**
+   * Structured error info for the opencode session load path. New in
+   * v5.0.0 — `ChatInfoPanel` consumes this to render its own error
+   * section (in addition to the chat-thread-header error already
+   * rendered by Chat.tsx). `null` when no error.
+   */
+  const [opencodeErrorInfo, setOpencodeErrorInfo] = useState<OpencodeErrorInfo | null>(null);
 
   // ── v3.22 — session-state, unread, tree per session ────────────────────────
   const [sessionStates, setSessionStates] = useState<Record<string, SessionDisplayState>>({});
@@ -300,6 +340,8 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
       sseAutoReconnectRef.current = true;
       sseReconnectAttemptRef.current = 0;
       setOpencodeError(null);
+      setOpencodeSuggestion(null);
+      setOpencodeErrorInfo(null);
 
       const connect = () => {
         if (!sseAutoReconnectRef.current) return;
@@ -527,6 +569,8 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
           // Successful (re)connect — reset backoff.
           sseReconnectAttemptRef.current = 0;
           setOpencodeError(null);
+          setOpencodeSuggestion(null);
+          setOpencodeErrorInfo(null);
         };
       };
 
@@ -554,6 +598,8 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     setOpencodeMessages([]);
     setSeenOpencodeMessages(new Set());
     setOpencodeError(null);
+    setOpencodeSuggestion(null);
+    setOpencodeErrorInfo(null);
     setActiveOpencodeSessionId(null);
     setActiveSource('bizar');
   }, []);
@@ -576,6 +622,8 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
       }
 
       setOpencodeError(null);
+      setOpencodeSuggestion(null);
+      setOpencodeErrorInfo(null);
       setLoading(true);
 
       try {
@@ -585,7 +633,62 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
         setOpencodeMessages(data.messages || []);
       } catch (err) {
         const msg = (err as Error).message;
-        toastRef.current?.error(`Opencode session load failed: ${msg}`);
+        // v5.0.0 — bug #4: surface the server's structured error
+        // envelope so the UI can render a useful suggestion instead
+        // of the raw upstream error string. The server returns
+        // `{error, message, cause?, status?, suggestion?}` for every
+        // non-2xx response (see serve-info.mjs + routes/opencode-
+        // session-detail.mjs).
+        let info: OpencodeErrorInfo | null = null;
+        if (err instanceof ApiError && err.data && typeof err.data === 'object') {
+          const d = err.data as {
+            error?: string;
+            message?: string;
+            cause?: string;
+            status?: number;
+            suggestion?: string;
+          };
+          // canRetry: 503/502 are transient (plugin offline /
+          // upstream hiccup); the operator can fix the plugin and
+          // try again. 400 is a hard bad_request — retrying with the
+          // same payload won't help.
+          const code = d.error || 'unknown';
+          const canRetry =
+            code !== 'bad_request' &&
+            code !== 'too_many_subscribers' &&
+            code !== 'unauthorized';
+          info = {
+            type: 'session_load_failed',
+            code,
+            message: d.message || msg,
+            cause: d.cause,
+            status: d.status,
+            suggestion: d.suggestion ?? null,
+            canRetry,
+          };
+        } else if (err instanceof ApiError) {
+          info = {
+            type: 'session_load_failed',
+            code: 'unknown',
+            message: msg,
+            suggestion: null,
+            canRetry: true,
+          };
+        }
+        // Legacy fields — kept so the existing Chat.tsx thread-header
+        // error display continues to work unchanged.
+        setOpencodeError(
+          info
+            ? `Opencode session load failed (${info.code}): ${info.message}`
+            : `Opencode session load failed: ${msg}`,
+        );
+        setOpencodeSuggestion(info?.suggestion ?? null);
+        setOpencodeErrorInfo(info);
+        toastRef.current?.error(
+          info
+            ? `Opencode session load failed: ${info.message}`
+            : `Opencode session load failed: ${msg}`,
+        );
         setOpencodeMessages([]);
       } finally {
         setLoading(false);
@@ -1039,6 +1142,20 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     activeSource,
     activeOpencodeSessionId,
     opencodeError,
+    opencodeSuggestion,
+    /**
+     * v5.0.0 — bug #4: structured error info consumed by
+     * `ChatInfoPanel`. `null` when no error is active.
+     */
+    opencodeErrorInfo,
+    /**
+     * v5.0.0 — bug #4: retry helper exposed for `ChatInfoPanel`'s
+     * Retry button. Calls `loadOpencodeSession` on the currently
+     * active opencode session (or no-op if none is active).
+     */
+    retryOpencodeSession: () => {
+      if (activeOpencodeSessionId) void loadOpencodeSession(activeOpencodeSessionId);
+    },
     // ── v3.22 — per-session display state ──────────────────────────────────
     sessionStates,
     busy,

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

@@ -0,0 +1,107 @@
+// 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/lib/types.ts

@@ -535,6 +535,140 @@ export type TailscaleStatus = {
   settings: { enabled: boolean; port: number; https: boolean; hostname: string };
 };
 
+// ────────────────────────────────────────────────────────────────────────
+// v6.0.0 — Doctor page types
+// ────────────────────────────────────────────────────────────────────────
+
+export type DoctorStatus = 'ok' | 'warn' | 'fail';
+
+export type DoctorCheck = {
+  name: string;
+  status: DoctorStatus;
+  message: string;
+};
+
+export type DoctorChecks = {
+  system: DoctorCheck[];
+  config: DoctorCheck[];
+  services: DoctorCheck[];
+};
+
+export type DoctorHealth = {
+  ts: string;
+  status: DoctorStatus;
+  issues: DoctorCheck[];
+  groups: DoctorChecks;
+};
+
+export type DoctorCounts = {
+  tasks: number;
+  schedules: number;
+  mods: number;
+  providers: number;
+  mcps: number;
+  agents: number;
+  projects: number;
+  activeProject: string | null;
+  workspaces: number;
+  voiceNotes: number;
+  evalRuns: number;
+  backups: number;
+};
+
+export type DoctorService = {
+  running: boolean;
+  port?: number;
+  host?: string;
+  pid?: number;
+  uptime?: number;
+  error?: string;
+  baseUrl?: string | null;
+  reachable?: boolean;
+  path?: string | null;
+  logPath?: string;
+  logExists?: boolean;
+};
+
+export type DoctorServices = {
+  dashboard: DoctorService;
+  headroom: DoctorService;
+  lightrag: DoctorService;
+  opencode: DoctorService;
+};
+
+export type DoctorRecentError = {
+  line: string;
+  ts: string | null;
+  tsMs: number | null;
+};
+
+export type DoctorOpencode = {
+  configExists: boolean;
+  configPath: string;
+  agentsDir: string;
+  agentFiles: string[];
+  dashboardConnected: boolean;
+};
+
+export type DoctorDisk = {
+  path: string;
+  exists: boolean;
+  sizeBytes: number;
+};
+
+export type DoctorSnapshot = {
+  timestamp: string;
+  bizarVersion: string;
+  nodeVersion: string;
+  platform: string;
+  arch: string;
+  uptime: number;
+  memory: NodeJS.MemoryUsage;
+  disk: DoctorDisk;
+  services: DoctorServices;
+  counts: DoctorCounts;
+  recentErrors: DoctorRecentError[];
+  configHealth: DoctorCheck[];
+  opencode: DoctorOpencode;
+  checks: DoctorChecks;
+  health: { status: DoctorStatus; issues: DoctorCheck[] };
+};
+
+/**
+ * The categories the Doctor page renders. Order is the render order.
+ * Each maps 1:1 to either a `DoctorChecks` group or a derived slice.
+ */
+export type DoctorCategory =
+  | 'system'
+  | 'services'
+  | 'counts'
+  | 'errors'
+  | 'actions';
+
+export type DoctorCheckOrInfo =
+  | DoctorCheck
+  | { kind: 'count'; label: string; value: number | string };
+
+export type DoctorPanelProps = {
+  category: DoctorCategory;
+  /** Title shown in the card header. Optional — derived from category if omitted. */
+  title?: string;
+  /** Lucide icon for the header. Optional — derived from category if omitted. */
+  icon?: React.ComponentType<{ size?: number; 'aria-hidden'?: boolean }>;
+  /** Per-line entries. Each carries an implicit `ok | warn | fail` status pill. */
+  checks: DoctorCheck[];
+  /**
+   * Plain key/value rows that aren't checks (e.g. counts). Rendered
+   * as a compact two-column list below the check rows when present.
+   */
+  info?: Array<{ label: string; value: string | number }>;
+  /** Meta line shown beneath the title. */
+  meta?: string;
+  /** Optional custom body — bypasses the default check-list render. */
+  children?: React.ReactNode;
+  className?: string;
+};
+
 export type SearchResult = {
   type: string;
   score: number;

package/bizar-dash/src/web/styles/chat.css

@@ -892,13 +892,15 @@
    ============================================================ */
 .chat-composer-wrap {
   position: relative;
-  padding: var(--space-3) var(--space-8) var(--space-5);
+  padding: 8px 16px 8px;
   border-top: 1px solid var(--border);
   background: var(--bg);
 }
 .chat-composer-pill {
-  display: flex; align-items: center; gap: var(--space-2);
+  display: flex; align-items: flex-end; gap: var(--space-2);
   width: 100%;
+  min-height: 48px;
+  max-height: 200px;
   padding: 8px 8px 8px 16px;
   background: var(--bg-1);
   border: 1px solid var(--border);
@@ -1480,9 +1482,9 @@
 .chat-composer-textarea {
   flex: 1; min-width: 0; width: 100%; resize: none;
   background: transparent; border: none; outline: none;
-  color: var(--text); font: inherit; font-size: 0.9375rem;
-  line-height: 1.5; padding: 0.5rem 0.5rem;
-  max-height: 200px; overflow-y: auto;
+  color: var(--text); font: inherit; font-size: 14px;
+  line-height: 1.4; padding: 8px 12px;
+  min-height: 24px; max-height: 160px; overflow-y: auto;
 }
 .chat-composer-textarea::placeholder { color: var(--text-muted); }
 .chat-attach-btn {
@@ -1494,6 +1496,7 @@
 .chat-attach-btn:hover { background: var(--bg-2); color: var(--text); }
 .chat-send-btn {
   flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  align-self: flex-end;
   width: 32px; height: 32px; padding: 0; background: var(--accent);
   color: white; border: none; border-radius: var(--radius-sm); cursor: pointer;
 }

package/bizar-dash/src/web/styles/main.css

@@ -349,11 +349,25 @@ pre,
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: var(--space-5);
+  gap: var(--space-6);
+  padding: var(--space-6) var(--space-6) 0;
   animation: view-in var(--motion-slow) var(--ease);
   min-height: 0;
 }
 
+/* v4.x.x — Responsive page-level padding for .view */
+@media (max-width: 1000px) {
+  .view {
+    padding: var(--space-4) var(--space-4) 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .view {
+    padding: var(--space-3) var(--space-3) 0;
+  }
+}
+
 @keyframes view-in {
   from {
     opacity: 0;
@@ -727,6 +741,35 @@ pre,
   flex-wrap: wrap;
 }
 
+/* v4.x.x — Page-level header spacing. Used by views that render a
+   title row above the content grid. Adds breathing room below the
+   view title and a bottom border to visually separate from content. */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header h1,
+.page-header h2 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 22px;
+  letter-spacing: -0.01em;
+  color: var(--text-strong);
+}
+
+/* v4.x.x — Extra breathing room between a view-header and the content
+   below it when the header has no bottom border. */
+.view-header {
+  margin-bottom: var(--space-6);
+}
+
 /* ─── Cards ────────────────────────────────────────────────────────── */
 
 .card {
@@ -782,6 +825,16 @@ pre,
   color: var(--text-dim);
 }
 
+/* v4.x.x — Card body used when a card is split into header + body */
+.card-body {
+  padding: var(--space-4) var(--space-5);
+}
+
+/* v4.x.x — Extra top margin between sibling cards */
+.card + .card {
+  margin-top: var(--space-4);
+}
+
 /* ─── Buttons ──────────────────────────────────────────────────────── */
 
 .btn {
@@ -7391,7 +7444,7 @@ select:focus-visible,
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-6) var(--space-6) 0;
   max-width: 1100px;
   margin: 0 auto;
 }
@@ -8990,3 +9043,25 @@ select:focus-visible,
   gap: 0.5rem;
   margin-top: 1rem;
 }
+
+/* v4.9.0 — Settings mode visual indicators */
+
+.settings-mode-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: linear-gradient(to right, rgba(139, 92, 246, 0.1), transparent);
+  border: 1px solid var(--accent, #8b5cf6);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  color: var(--text);
+}
+
+.settings-mode-indicator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--accent, #8b5cf6);
+  margin-left: 6px;
+}