@polderlabs/bizar 3.23.1 → 4.2.0

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

@@ -0,0 +1,55 @@
+// src/components/chat/SuggestionCards.tsx — 4 hardcoded suggestion cards for first-run.
+
+import { Code, BookOpen, Lightbulb, Image as ImageIcon } from 'lucide-react';
+
+interface Props {
+  projectName: string;
+  onPickSuggestion: (text: string) => void;
+}
+
+export function SuggestionCards({ projectName, onPickSuggestion }: Props) {
+  const suggestions = [
+    {
+      icon: <Code size={16} />,
+      title: projectName ? `Explain ${projectName}` : 'Explain this project',
+      preview: 'Give me a tour of the codebase, highlight the architecture, and call out any anti-patterns or hotspots.',
+      prompt: projectName
+        ? `Explain the ${projectName} project. Give me a tour of the codebase, highlight the architecture, and call out any anti-patterns or hotspots.`
+        : 'Explain the current project. Give me a tour of the codebase, highlight the architecture, and call out any anti-patterns or hotspots.',
+    },
+    {
+      icon: <BookOpen size={16} />,
+      title: 'Summarize recent sessions',
+      preview: 'Read my last 5 chat sessions and give me a 3-bullet summary of what I worked on and what got stuck.',
+      prompt: 'Read my last 5 chat sessions and give me a 3-bullet summary of what I worked on and what got stuck.',
+    },
+    {
+      icon: <Lightbulb size={16} />,
+      title: 'Suggest a refactor',
+      preview: 'Look for the largest, most painful files in this project and propose a concrete refactor for the worst one.',
+      prompt: 'Look for the largest, most painful files in this project and propose a concrete refactor for the worst one.',
+    },
+    {
+      icon: <ImageIcon size={16} />,
+      title: 'Find visual regressions',
+      preview: 'Open the dashboard, screenshot the Chat tab, and flag any layout problems or anti-patterns you see.',
+      prompt: 'Open the dashboard, screenshot the Chat tab, and flag any layout problems or anti-patterns you see.',
+    },
+  ];
+
+  return (
+    <div className="chat-suggestions">
+      {suggestions.map((s, i) => (
+        <button
+          key={i}
+          type="button"
+          className="chat-suggestion"
+          onClick={() => onPickSuggestion(s.prompt)}
+        >
+          <div className="chat-suggestion-title">{s.icon}<span>{s.title}</span></div>
+          <div className="chat-suggestion-preview">{s.preview}</div>
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+// src/components/chat/WelcomeScreen.tsx — gradient greeting + no-project state.
+
+import { Folder } from 'lucide-react';
+import { SuggestionCards } from './SuggestionCards';
+
+interface Props {
+  variant: 'empty' | 'no-project';
+  projectName: string;
+  onPickSuggestion: (text: string) => void;
+}
+
+export function WelcomeScreen({ variant, projectName, onPickSuggestion }: Props) {
+  if (variant === 'no-project') {
+    return (
+      <div className="chat-welcome">
+        <h1 className="chat-welcome-h1">
+          <span className="chat-greeting-hello">No project selected.</span>
+        </h1>
+        <p className="chat-welcome-subtitle">Pick a project in Overview to scope chat sessions.</p>
+      </div>
+    );
+  }
+
+  const displayName = projectName || 'there';
+
+  return (
+    <div className="chat-welcome">
+      <h1 className="chat-welcome-h1">
+        <span className="chat-greeting-hello">Hello, </span>
+        <span className="chat-greeting-name">{displayName}.</span>
+      </h1>
+      <p className="chat-welcome-subtitle">How can I help you today?</p>
+      <SuggestionCards projectName={projectName} onPickSuggestion={onPickSuggestion} />
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+// src/components/chat/index.ts — barrel export for all chat components and hooks.
+
+export { ChatTopBar } from './ChatTopBar';
+export { ChatThread } from './ChatThread';
+export { MessageBubble } from './MessageBubble';
+export { WelcomeScreen } from './WelcomeScreen';
+export { SuggestionCards } from './SuggestionCards';
+export { Composer } from './Composer';
+export { FloatingComposer } from './FloatingComposer';
+export { AgentChip } from './AgentChip';
+export { SessionList } from './SessionList';
+export { InfoPanel } from './InfoPanel';
+export { LoadingSkeleton } from './LoadingSkeleton';
+export { StreamingIndicator } from './StreamingIndicator';
+export { ConfirmModal } from './ConfirmModal';
+export { EmptyState } from './EmptyState';
+export { useChat } from './useChat';
+export { useSlashCommands } from './useSlashCommands';
+export { useAutoGrowTextarea } from './useAutoGrowTextarea';
+export type { SlashCommand } from './useSlashCommands';

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

@@ -0,0 +1,18 @@
+// src/components/chat/useAutoGrowTextarea.ts — auto-resize textarea up to maxHeight.
+
+import { useLayoutEffect } from 'react';
+
+export function useAutoGrowTextarea(
+  ref: React.RefObject<HTMLTextAreaElement | null>,
+  value: string,
+  maxHeight = 240,
+): void {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    const next = Math.min(el.scrollHeight, maxHeight);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+  }, [ref, value, maxHeight]);
+}

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

@@ -0,0 +1,219 @@
+// src/components/chat/useChat.ts — shared chat state: messages, sessions, send, polling.
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ChatMessage, ChatResponse, ChatSession, Settings, Snapshot } from '../../lib/types';
+import { api } from '../../lib/api';
+
+export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?: string | null) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [opencodeSessions, setOpencodeSessions] = useState<ChatSession[]>([]);
+  const [sessionId, setSessionId] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [pinned, setPinned] = useState<Set<number>>(new Set());
+
+  const listRef = useRef<HTMLDivElement>(null);
+  const toastRef = useRef<{ error: (msg: string) => void; success: (msg: string) => void; info: (msg: string) => void } | null>(null);
+
+  // Auto-scroll on new messages
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const loadChat = useCallback(async (sid?: string) => {
+    try {
+      const url = sid ? `/chat?session=${encodeURIComponent(sid)}` : '/chat?limit=200';
+      const data = await api.get<ChatResponse>(url);
+      setMessages(data.messages || []);
+      setSessions(data.sessions || []);
+    } catch (err) {
+      toastRef.current?.error(`Chat load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadTaskChat = useCallback(async (taskId: string) => {
+    setLoading(true);
+    try {
+      const data = await api.get<{ sessionId?: string; messages: ChatMessage[] }>(`/tasks/${encodeURIComponent(taskId)}/chat`);
+      setMessages(data.messages || []);
+      setSessionId(data.sessionId || taskId);
+    } catch (err) {
+      toastRef.current?.error(`Task chat load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refreshSessions = useCallback(async () => {
+    try {
+      const data = await api.get<{ sessions: ChatSession[] }>('/chat/sessions');
+      setSessions(data.sessions || []);
+    } catch { /* best-effort */ }
+  }, []);
+
+  const refreshOpencodeSessions = useCallback(async () => {
+    try {
+      const data = await api.get<{ sessions: ChatSession[] }>('/opencode-sessions');
+      // Enrich with source marker and opencodeUrl; port is discovered from serve.json
+      const enriched: ChatSession[] = (data.sessions || []).map((s) => ({
+        ...s,
+        source: 'opencode' as const,
+        opencodeUrl: `/opencode/session/${s.id}`,
+        title: s.title || s.id,
+      }));
+      setOpencodeSessions(enriched);
+    } catch { /* best-effort */ }
+  }, []);
+
+  const onCreateSession = useCallback(async () => {
+    if (!snapshot.activeProject) {
+      toastRef.current?.error('Pick a project in Overview to scope chat sessions.');
+      return;
+    }
+    try {
+      const created = await api.post<ChatSession>('/chat/sessions', {});
+      setSessionId(created.id);
+      setMessages([]);
+      setPinned(new Set());
+      await loadChat(created.id);
+      refreshSessions().catch(() => {});
+    } catch (err) {
+      toastRef.current?.error(`Create failed: ${(err as Error).message}`);
+    }
+  }, [snapshot.activeProject, loadChat, refreshSessions]);
+
+  const onSend = useCallback(async (message: string, agent: string, model: string, attachments?: string[]) => {
+    const optimistic: ChatMessage = {
+      role: 'user',
+      content: message,
+      agent,
+      ts: new Date().toISOString(),
+    };
+    setMessages((cur) => [...cur, optimistic]);
+    setSending(true);
+    try {
+      const response = await api.post<{ messages?: ChatMessage[] }>('/chat', { message, agent, model, attachments: attachments || [] });
+      if (response?.messages) {
+        for (const msg of response.messages) {
+          if (msg.role === 'assistant') {
+            setMessages((cur) => {
+              const exists = cur.some((m) => m.ts === msg.ts);
+              return exists ? cur : [...cur, msg];
+            });
+          }
+        }
+      } else {
+        toastRef.current?.info('Still processing… the response will appear shortly.');
+      }
+    } catch (err) {
+      setMessages((cur) => cur.filter((m) => m !== optimistic));
+      toastRef.current?.error(`Send failed: ${(err as Error).message}`);
+    } finally {
+      setSending(false);
+    }
+  }, []);
+
+  const onRegenerate = useCallback(async (messageId: string) => {
+    if (!sessionId) {
+      toastRef.current?.error('No active session to regenerate.');
+      return;
+    }
+    try {
+      await api.post('/chat/regenerate', { sessionId, messageId });
+      await loadChat(sessionId);
+    } catch (err) {
+      toastRef.current?.error(`Regenerate failed: ${(err as Error).message}`);
+    }
+  }, [sessionId, loadChat]);
+
+  const deleteMessage = useCallback((idx: number) => {
+    setMessages((cur) => cur.filter((_, i) => i !== idx));
+  }, []);
+
+  const togglePin = useCallback((idx: number) => {
+    setPinned((cur) => {
+      const next = new Set(cur);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  }, []);
+
+  const copyMessage = useCallback((m: ChatMessage) => {
+    const text = m.content || m.message || '';
+    navigator.clipboard?.writeText(text).then(
+      () => toastRef.current?.success('Copied.'),
+      () => toastRef.current?.error('Copy failed.'),
+    );
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    if (initialTaskId) {
+      loadTaskChat(initialTaskId);
+    } else {
+      loadChat();
+    }
+    refreshOpencodeSessions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Listen for bizar:setChatTask events
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const taskId = (e as CustomEvent<{ taskId: string }>).detail?.taskId;
+      if (taskId) loadTaskChat(taskId);
+    };
+    window.addEventListener('bizar:setChatTask', handler);
+    return () => window.removeEventListener('bizar:setChatTask', handler);
+  }, [loadTaskChat]);
+
+  // WebSocket for live updates — dynamically imported to avoid SSR issues
+  useEffect(() => {
+    let closed = false;
+    import('../../lib/ws').then(({ Ws }) => {
+      if (closed) return;
+      const ws = new Ws();
+      ws.on((msg) => {
+        if (msg.type !== 'chat:message') return;
+        const next = msg.message;
+        setMessages((cur) => {
+          const exists = cur.some((m) => m.ts === next.ts);
+          return exists ? cur : [...cur, next];
+        });
+      });
+    });
+    return () => { closed = true; };
+  }, []);
+
+  return {
+    // State
+    messages,
+    sessions,
+    opencodeSessions,
+    sessionId,
+    setSessionId,
+    loading,
+    sending,
+    pinned,
+    listRef,
+    // Setters for toast integration
+    setToast: (toast: typeof toastRef.current) => { toastRef.current = toast; },
+    // Actions
+    loadChat,
+    loadTaskChat,
+    refreshSessions,
+    refreshOpencodeSessions,
+    onCreateSession,
+    onSend,
+    onRegenerate,
+    deleteMessage,
+    togglePin,
+    copyMessage,
+  };
+}

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

@@ -0,0 +1,47 @@
+// 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/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bizar Dashboard</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪩</text></svg>" />
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <!-- v3.23.0 — Mobile app CSS at a stable URL so MobileApp renders with
+         styles even when the auto-redirect to /m is bypassed. -->
+    <link rel="stylesheet" href="/mobile.css" />
+    <script>
+      // v3.5.0 — Auto-redirect to /m on mobile devices.
+      // v3.23.0 — Also redirect on width alone so emulators + desktop browsers resized
+      // to a narrow window still land on the mobile app. The `pointer: coarse`
+      // check is kept as one signal but not required.
+      (function () {
+        var narrowViewport =
+          window.matchMedia('(max-width: 768px)').matches ||
+          window.matchMedia('(max-width: 768px) and (pointer: coarse)').matches;
+        var touchDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        var isMobile = narrowViewport || touchDevice;
+        var wantsDesktop = new URLSearchParams(window.location.search).has('desktop');
+        if (isMobile && !wantsDesktop && !window.location.pathname.startsWith('/m')) {
+          window.location.replace('/m' + window.location.pathname + window.location.search);
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/bizar-dash/src/web/lib/api.ts

@@ -0,0 +1,193 @@
+// src/lib/api.ts — REST client. Single instance, type-safe wrappers.
+//
+// v3.6.1 — Authentication is now loopback-aware on the server side.
+// The browser makes API calls over 127.0.0.1 (or via Tailscale serve
+// proxying to 127.0.0.1), and the server auto-trusts loopback
+// connections. So a fresh browser tab "just works" — no token paste
+// required for the normal case.
+//
+// The token still exists for non-loopback clients (external API
+// consumers, scripts) and as a defense-in-depth option via the
+// BIZAR_DASHBOARD_REQUIRE_AUTH=1 env var. The localStorage flow
+// remains: probe /api/auth/status on load, send the token header
+// if one is set, fall back to none if not (the server will trust
+// us anyway because we're loopback).
+//
+// For SSE routes, the token is also added as a `?token=...` query
+// parameter (browsers can't set custom headers on EventSource).
+// Again, loopback makes this optional but kept for safety.
+
+const TOKEN_KEY = 'bizar-auth-token';
+const LOOPBACK_KEY = 'bizar-loopback-trusted';
+
+export class ApiError extends Error {
+  status: number;
+  data: unknown;
+  constructor(message: string, status: number, data?: unknown) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.data = data;
+  }
+}
+
+class ApiClient {
+  base = '/api';
+
+  /** Get the cached bearer token from localStorage, or '' if none. */
+  getToken(): string {
+    try {
+      return localStorage.getItem(TOKEN_KEY) || '';
+    } catch {
+      return '';
+    }
+  }
+
+  /** Persist the token. Called from the Settings tab after Reveal/Regenerate. */
+  setToken(token: string): void {
+    try {
+      if (token) localStorage.setItem(TOKEN_KEY, token);
+      else localStorage.removeItem(TOKEN_KEY);
+    } catch {
+      /* localStorage unavailable — token won't persist across reloads */
+    }
+  }
+
+  /** Build the URL with the token appended as ?token=… if present. */
+  urlWithToken(path: string): string {
+    const url = this.base + path;
+    const tok = this.getToken();
+    if (!tok) return url;
+    const sep = url.includes('?') ? '&' : '?';
+    return `${url}${sep}token=${encodeURIComponent(tok)}`;
+  }
+
+  /**
+   * v3.6.1 — Probe the server's /api/auth/status endpoint and cache
+   * whether the current browser is on a loopback-trusted connection.
+   * Called once on app mount so the rest of the client can decide
+   * whether to surface the "paste your token" UI in Settings or
+   * just let the dashboard work.
+   *
+   * Returns a snapshot of the status; result is also cached for
+   * subsequent calls to isLoopbackTrusted().
+   */
+  async probeAuthStatus(): Promise<{ required: boolean; loopback: boolean; peer: string }> {
+    try {
+      const r = await this.get<{ required: boolean; loopback: boolean; peer: string }>('/auth/status');
+      try { localStorage.setItem(LOOPBACK_KEY, r.loopback ? '1' : '0'); } catch { /* noop */ }
+      return r;
+    } catch {
+      return { required: false, loopback: true, peer: '' };
+    }
+  }
+
+  /** Cached result of the last /api/auth/status probe. */
+  isLoopbackTrusted(): boolean {
+    try { return localStorage.getItem(LOOPBACK_KEY) !== '0'; } catch { return true; }
+  }
+
+  /**
+   * Perform an authenticated GET against the dashboard server.
+   *
+   * IMPORTANT: do NOT include the `/api` prefix in `path` — the
+   * wrapper adds it for you. Calling `api.get('/api/projects')` will
+   * 404 because the server sees `/api/api/projects`. Use the
+   * unprefixed form: `api.get('/projects')`.
+   *
+   * @example
+   *   const r = await api.get<ProjectList>('/projects');
+   */
+  async get<T>(path: string): Promise<T> {
+    return this.req<T>('GET', path);
+  }
+
+  /**
+   * Perform an authenticated POST against the dashboard server.
+   *
+   * IMPORTANT: do NOT include the `/api` prefix in `path` — the
+   * wrapper adds it. Use the unprefixed form: `api.post('/fs/mkdir', body)`.
+   */
+  async post<T>(path: string, body?: unknown): Promise<T> {
+    return this.req<T>('POST', path, body);
+  }
+
+  /**
+   * Perform an authenticated PUT against the dashboard server.
+   *
+   * IMPORTANT: do NOT include the `/api` prefix in `path` — the
+   * wrapper adds it. Use the unprefixed form: `api.put('/settings', body)`.
+   */
+  async put<T>(path: string, body?: unknown): Promise<T> {
+    return this.req<T>('PUT', path, body);
+  }
+
+  /**
+   * Perform an authenticated PATCH against the dashboard server.
+   *
+   * IMPORTANT: do NOT include the `/api` prefix in `path` — the
+   * wrapper adds it. Use the unprefixed form: `api.patch('/settings', body)`.
+   */
+  async patch<T>(path: string, body?: unknown): Promise<T> {
+    return this.req<T>('PATCH', path, body);
+  }
+
+  /**
+   * Perform an authenticated DELETE against the dashboard server.
+   *
+   * IMPORTANT: do NOT include the `/api` prefix in `path` — the
+   * wrapper adds it. Use the unprefixed form: `api.del('/projects/123')`.
+   */
+  async del<T = unknown>(path: string): Promise<T> {
+    return this.req<T>('DELETE', path);
+  }
+
+  private async req<T>(method: string, path: string, body?: unknown): Promise<T> {
+    const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+    const tok = this.getToken();
+    if (tok) headers.Authorization = `Bearer ${tok}`;
+    const opts: RequestInit = { method, headers };
+    if (body !== undefined && body !== null) {
+      opts.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
+    const r = await fetch(this.base + path, opts);
+    const ct = r.headers.get('content-type') || '';
+    if (ct.includes('application/json')) {
+      const data = await r.json();
+      if (!r.ok) {
+        const msg =
+          (data && typeof data === 'object' && 'message' in data
+            ? (data as { message?: string }).message
+            : undefined) || `${method} ${path}: ${r.status}`;
+        throw new ApiError(msg, r.status, data);
+      }
+      return data as T;
+    }
+    const text = await r.text();
+    if (!r.ok) {
+      throw new ApiError(
+        `${method} ${path}: ${r.status} — ${text.slice(0, 200)}`,
+        r.status,
+        text,
+      );
+    }
+    try {
+      return JSON.parse(text) as T;
+    } catch {
+      return text as T;
+    }
+  }
+}
+
+export const api = new ApiClient();
+export { ApiClient, TOKEN_KEY };
+
+/**
+ * Placeholder for the "Enhance prompt" feature.
+ * TODO: call system LLM API to improve the prompt
+ * Will use settings.systemLlm config
+ * Endpoint: POST /api/enhance-prompt with { text }
+ */
+export async function enhancePrompt(text: string): Promise<string> {
+  return text; // passthrough for now
+}