@polderlabs/bizar 4.4.12 → 4.5.0

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

@@ -1,5 +1,13 @@
 // src/lib/api.ts — REST client. Single instance, type-safe wrappers.
 //
+// v3.6.2 — Token URL pickup for reverse-proxy / Tailscale Serve access.
+// When the dashboard is accessed via Tailscale Serve (or any reverse
+// proxy) the browser runs on a different origin than localhost. The server
+// sees the remote client through the local proxy and requires auth.
+// The `?token=…` URL param lets operators share a direct link that
+// automatically installs the token into localStorage so the dashboard
+// "just works" after the first paste — no separate localhost tab needed.
+//
 // 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
@@ -53,6 +61,35 @@ class ApiClient {
     }
   }
 
+  /**
+   * v3.6.2 — Check the URL search params for a `token` value and
+   * persist it into localStorage if found. Strips the param from the
+   * URL via `history.replaceState` so the token doesn't leak into
+   * browser history or shared links.
+   *
+   * Returns `true` if a token was found and saved, `false` otherwise.
+   * Safe to call multiple times (subsequent calls with no token in URL
+   * return `false` and are no-ops).
+   */
+  pickupTokenFromUrl(): boolean {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const tok = params.get('token');
+      if (!tok) return false;
+      this.setToken(tok);
+      // Remove the token param from the URL without a page reload.
+      params.delete('token');
+      const newSearch = params.toString();
+      const newUrl = newSearch
+        ? `${window.location.pathname}?${newSearch}`
+        : window.location.pathname;
+      history.replaceState(null, '', newUrl);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   /** Build the URL with the token appended as ?token=… if present. */
   urlWithToken(path: string): string {
     const url = this.base + path;
@@ -180,6 +217,12 @@ class ApiClient {
 }
 
 export const api = new ApiClient();
+
+// v3.6.2 — Auto-pickup token from URL on module load so the dashboard
+// works through reverse proxies (Tailscale Serve, nginx, etc.) without
+// needing a separate localhost tab.
+api.pickupTokenFromUrl();
+
 export { ApiClient, TOKEN_KEY };
 
 /**

package/bizar-dash/src/web/main.tsx

@@ -9,6 +9,7 @@ import './styles/main.css';
 import './styles/mobile.css';
 import './styles/glyphs.css';
 import './styles/minimax-usage.css';
+import './styles/skills.css';
 
 function Root() {
   const [isMobile, setIsMobile] = useState(() => {

package/bizar-dash/src/web/mobile/views/MobileChat.tsx

@@ -1,5 +1,9 @@
-// src/web/mobile/views/MobileChat.tsx — mobile-adapted chat using shared components.
-// Composer state (agent, model, text, attachments) is local.
+// src/web/mobile/views/MobileChat.tsx — mobile chat (v4.2.5).
+//
+// v4.2.5 — matches Chat.tsx overhaul: opencode session-create via the
+// new endpoint, source-routed composer (opencode send vs. local chat),
+// source indicator badge, rename / delete / export on the info panel,
+// and matching busy flags.
 
 import { useEffect, useRef, useState } from 'react';
 import { ChatTopBar } from '../../components/chat/ChatTopBar';
@@ -22,28 +26,41 @@ interface Props {
   onClearTaskId?: () => void;
 }
 
-export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, onClearTaskId }: Props) {
+export function MobileChat({
+  snapshot,
+  settings,
+  setActiveTab,
+  initialTaskId,
+  onClearTaskId,
+}: Props) {
   const toast = useToast();
   const modal = useModal();
 
   const chat = useChat(snapshot, settings, initialTaskId ?? '');
+  useEffect(() => {
+    chat.setToast({
+      error: (msg: string) => toast.error(msg),
+      success: (msg: string) => toast.success(msg),
+      info: (msg: string) => toast.info(msg),
+      warning: (msg: string) => toast.warning(msg),
+    });
+  }, [chat, toast]);
 
   const [text, setText] = useState('');
   const [agent, setAgent] = useState(settings.defaultAgent || 'odin');
   const [model, setModel] = useState(settings.defaultModel || '');
   const [attachments, setAttachments] = useState<string[]>([]);
-  const [creating, setCreating] = useState(false);
   const [sessionsOpen, setSessionsOpen] = useState(false);
   const [infoOpen, setInfoOpen] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { allCommands, suggestions, setQuery } = useSlashCommands(snapshot);
-
-  useEffect(() => { setQuery(text); }, [text, setQuery]);
+  useEffect(() => {
+    setQuery(text);
+  }, [text, setQuery]);
 
   const onAttach = () => fileInputRef.current?.click();
-
   const onFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files) return;
@@ -56,30 +73,19 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
-  const handleSend = () => {
+  const handleSend = async () => {
     const msg = text.trim();
     if (!msg) return;
     setText('');
     setQuery('');
-    chat.onSend(msg, agent, model, attachments);
+    const result = await chat.onSend(msg, agent, model, attachments);
+    if (result.ok) chat.jumpToLatest();
   };
 
   const handleCreateSession = async () => {
-    if (creating) return;
-    if (!snapshot.activeProject) {
-      toast.warning('Pick a project in Overview to scope chat sessions.', 4000);
-      return;
-    }
-    setCreating(true);
-    try {
-      const created = await fetch('/chat/sessions', { method: 'POST' }).then((r) => r.json());
-      chat.loadChat(created.id);
-      toast.success(`Session ${created.id} created.`);
-    } catch (err) {
-      toast.error(`Create failed: ${(err as Error).message}`);
-    } finally {
-      setCreating(false);
-    }
+    if (chat.busy.create) return;
+    await chat.onCreateSession();
+    setSessionsOpen(false);
   };
 
   const handleDelete = (idx: number) => {
@@ -88,7 +94,9 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
       children: <p style={{ margin: 0 }}>This action cannot be undone.</p>,
       footer: (
         <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-          <Button variant="secondary" size="sm" onClick={() => modal.close()}>Cancel</Button>
+          <Button variant="secondary" size="sm" onClick={() => modal.close()}>
+            Cancel
+          </Button>
           <Button
             variant="danger"
             size="sm"
@@ -104,6 +112,34 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
     });
   };
 
+  const handleDeleteSession = (id: string, title: string) => {
+    modal.open({
+      title: 'Delete session?',
+      children: (
+        <p style={{ margin: 0 }}>
+          Delete <strong>{title}</strong>? This cannot be undone.
+        </p>
+      ),
+      footer: (
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+          <Button variant="secondary" size="sm" onClick={() => modal.close()}>
+            Cancel
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={async () => {
+              modal.close();
+              await chat.deleteSession(id);
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      ),
+    });
+  };
+
   return (
     <div className="chat-shell">
       <ChatTopBar
@@ -116,7 +152,9 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
         onOpenOverview={() => setActiveTab?.('overview')}
       />
       <div className="chat-body">
-        <aside className={`chat-sessions ${!sessionsOpen ? 'chat-sessions-hidden' : ''}`}>
+        <aside
+          className={`chat-sessions ${!sessionsOpen ? 'chat-sessions-hidden' : ''}`}
+        >
           <SessionList
             sessions={chat.sessions}
             opencodeSessions={chat.opencodeSessions}
@@ -126,19 +164,30 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
             onCreateSession={handleCreateSession}
             onSelectSession={chat.selectBizarSession}
             onSelectOpencodeSession={(s) => chat.loadOpencodeSession(s.id)}
-            creating={creating}
+            creating={chat.busy.create}
           />
         </aside>
 
         <main className="chat-main">
           <ChatThread
-            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
+            messages={
+              chat.activeSource === 'opencode'
+                ? chat.opencodeMessages
+                : chat.bizarMessages
+            }
             loading={chat.loading}
             activeProject={snapshot.activeProject}
-            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
+            sessionId={
+              chat.activeSource === 'opencode'
+                ? chat.activeOpencodeSessionId ?? chat.sessionId
+                : chat.sessionId
+            }
             pinned={chat.pinned}
+            activeSource={chat.activeSource}
             onPickSuggestion={(t) => setText(t)}
-            onCopy={(m) => chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])}
+            onCopy={(m) =>
+              chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])
+            }
             onDelete={handleDelete}
             onTogglePin={chat.togglePin}
             onRegenerate={chat.onRegenerate}
@@ -151,6 +200,7 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
             text={text}
             setText={setText}
             sending={chat.sending}
+            activeSource={chat.activeSource}
             onSend={handleSend}
             attachments={attachments}
             setAttachments={setAttachments}
@@ -161,22 +211,47 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
             sessionsOpen={sessionsOpen}
             infoOpen={infoOpen}
           />
-          <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={onFiles} />
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            style={{ display: 'none' }}
+            onChange={onFiles}
+          />
         </main>
 
-        <aside className={`chat-info ${!infoOpen ? 'chat-info-hidden' : ''}`}>
+        <aside
+          className={`chat-info ${!infoOpen ? 'chat-info-hidden' : ''}`}
+        >
           <InfoPanel
-            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
-            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
+            sessionId={
+              chat.activeSource === 'opencode'
+                ? chat.activeOpencodeSessionId ?? chat.sessionId
+                : chat.sessionId
+            }
+            messages={
+              chat.activeSource === 'opencode'
+                ? chat.opencodeMessages
+                : chat.bizarMessages
+            }
             pinned={chat.pinned}
             agent={agent}
             model={model}
             agents={snapshot.agents || []}
             mcps={snapshot.mcps || []}
             allCommands={allCommands}
+            activeSource={chat.activeSource}
+            onDelete={() => {
+              const id =
+                chat.activeSource === 'opencode'
+                  ? chat.activeOpencodeSessionId
+                  : chat.sessionId;
+              if (!id) return;
+              handleDeleteSession(id, id);
+            }}
           />
         </aside>
       </div>
     </div>
   );
-}
+}

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

@@ -1598,4 +1598,138 @@
   font-size: 0.8125rem; color: var(--text-muted); margin: 0;
   max-width: 320px;
 }
-.chat-empty-state-action { margin-top: 0.5rem; }
+.chat-empty-state-action { margin-top: 0.5rem; }
+
+/* ============================================================
+   v4.2.5 — CHAT OVERHAUL: source badge, info-actions, error
+   row, and source-tinted composer. These are additive — they
+   don't override any of the legacy rules above.
+   ============================================================ */
+
+/* ---- source badge (opencode / bizar chat) ---- */
+.chat-source-badge {
+  display: inline-flex; align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font: 10px/1 var(--font-mono);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+}
+.chat-source-opencode {
+  background: rgba(139, 92, 246, 0.12);
+  color: var(--accent);
+  border-color: rgba(139, 92, 246, 0.4);
+}
+.chat-source-bizar {
+  background: var(--bg-2);
+  color: var(--text-muted);
+  border-color: var(--border);
+}
+.chat-source-none {
+  background: var(--bg-2);
+  color: var(--text-muted);
+  border-color: var(--border);
+  opacity: 0.7;
+}
+
+/* ---- thread-head title row (so badge sits inline) ---- */
+.chat-thread-title-row {
+  display: flex; align-items: center; gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ---- thread error row (SSE/upstream failures) ---- */
+.chat-thread-error {
+  margin-top: 4px;
+  padding: 4px 10px;
+  background: rgba(248, 81, 73, 0.08);
+  border: 1px solid rgba(248, 81, 73, 0.4);
+  border-radius: var(--radius-sm);
+  font: 11px/1.3 var(--font-mono);
+  color: var(--error);
+}
+
+/* ---- info-panel section heads + actions ---- */
+.chat-info-section-head {
+  display: flex; align-items: center;
+  margin-bottom: 8px;
+}
+.chat-info-value {
+  font: 13px/1.4 var(--font-sans);
+  color: var(--text);
+}
+.chat-info-actions {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-top: 8px;
+}
+.chat-info-actions .btn {
+  font: 11px/1 var(--font-sans);
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: inline-flex; align-items: center; gap: 4px;
+  transition: background var(--motion-fast) var(--motion-ease);
+}
+.chat-info-actions .btn:hover:not(:disabled) {
+  background: var(--bg-1);
+}
+.chat-info-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.chat-info-actions .btn-danger { color: var(--error); border-color: rgba(248, 81, 73, 0.4); }
+.chat-info-actions .btn-danger:hover:not(:disabled) {
+  background: rgba(248, 81, 73, 0.08);
+}
+
+/* ---- btn-ghost tokens (also defined in main.css but we re-stamp here for safety) ---- */
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font: 11px/1 var(--font-mono);
+  cursor: pointer;
+  transition: background var(--motion-fast) var(--motion-ease),
+              color var(--motion-fast) var(--motion-ease);
+}
+.btn-ghost:hover:not(:disabled) { background: var(--bg-1); color: var(--text); }
+.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-ghost.btn-danger { color: var(--error); }
+.btn-ghost.btn-sm { padding: 4px 6px; font-size: 11px; }
+
+/* ---- composer: source-tinted pill border + hint line ---- */
+.chat-composer-source-opencode .chat-composer-pill {
+  border-color: rgba(139, 92, 246, 0.35);
+}
+.chat-composer-source-opencode .chat-composer-pill:focus-within {
+  border-color: var(--accent);
+}
+.chat-composer-source-opencode::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  opacity: 0.6;
+}
+.chat-composer-wrap {
+  position: relative;
+}
+.chat-composer-source-hint {
+  margin-left: auto;
+  font: 10px/1 var(--font-mono);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  opacity: 0.8;
+}
+
+/* ---- legacy composer pointer-events fix ---- */
+.chat-composer-wrap.legacy {
+  pointer-events: none;
+}
+.chat-composer-wrap.legacy > * { pointer-events: auto; }

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

@@ -166,6 +166,18 @@ pre,
   --space-10: 40px;
   --space-12: 48px;
 
+  /* v4.6.0 — Semantic spacing aliases. These mirror the existing
+     --space-* numeric scale so existing rules stay untouched, and
+     new code can pick the alias that fits the intent. Use whichever
+     reads clearer at the call site; they resolve to the same pixel
+     values. Goal: kill the "is this 12 or 16?" guessing in
+     view-level padding. */
+  --spacing-xs: var(--space-1);  /* 4px  — micro gap, icon-to-text */
+  --spacing-sm: var(--space-2);  /* 8px  — tight stack, between rows */
+  --spacing-md: var(--space-3);  /* 12px — default card padding */
+  --spacing-lg: var(--space-4);  /* 16px — section padding */
+  --spacing-xl: var(--space-6);  /* 24px — page-level padding */
+
   /* Radius */
   --radius-sm: 4px;
   --radius: 8px;
@@ -417,6 +429,34 @@ pre,
   font-size: 12px;
 }
 
+/* v3.6.2 — Token-entry form on boot-error screen */
+.token-entry-form {
+  margin: var(--space-4) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.token-entry-row {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+.token-entry-row .input {
+  flex: 1;
+  min-width: 0;
+}
+.token-entry-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.token-entry-hint code {
+  background: var(--bg);
+  padding: 1px 4px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+}
+
 /* ─── Topbar ───────────────────────────────────────────────────────── */
 
 .topbar {
@@ -5581,6 +5621,12 @@ html[data-compact-mode="true"] {
   --space-4: 12px;
   --space-5: 16px;
   --space-6: 20px;
+  /* Spacing aliases track the scaled numeric scale. */
+  --spacing-xs: var(--space-1);
+  --spacing-sm: var(--space-2);
+  --spacing-md: var(--space-3);
+  --spacing-lg: var(--space-4);
+  --spacing-xl: var(--space-6);
 }
 html[data-compact-mode="true"] .kanban-col-header { padding: 4px; }
 html[data-compact-mode="true"] .task-card { padding: 6px; }