@polderlabs/bizar 4.4.13 → 4.5.1

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

@@ -1,29 +1,77 @@
-// src/components/chat/ChatInfoPanel.tsx — right info panel (v3.22 design).
+// src/components/chat/ChatInfoPanel.tsx — right info panel (v4.2.5).
 //
-// Replaces InfoPanel. Layout follows the design HTML's sectioned
-// info panel: Session / Project / Model / Tokens / Cost / Attached
-// agents / Linked.
-//
-// Props match the original InfoPanel EXACTLY (so Chat.tsx doesn't need
-// any changes).
+// v4.2.5 — overhauled: shows session metadata (id, agent, model,
+// provider, message count), the current `activeSource`, the model
+// 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.
 
-import { MessageSquare, Bot, Server, Terminal } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import {
+  MessageSquare,
+  Bot,
+  Server,
+  Terminal,
+  Pencil,
+  Trash2,
+  Download,
+  CircleDollarSign,
+} from 'lucide-react';
+import type { ChatMessage } from '../../lib/types';
 
 interface Props {
   sessionId: string;
-  messages: Array<unknown>;
+  messages: ChatMessage[];
   pinned: Set<number>;
   agent: string;
   model: string;
   agents: Array<{ name: string; model?: string; mode?: string }>;
   mcps: Array<{ id: string; command?: string; enabled?: boolean }>;
   allCommands: Array<{ cmd: string; desc: string; mod?: string }>;
+  /** Which stream is currently displayed. */
+  activeSource?: 'bizar' | 'opencode' | null;
+  /** Optional rename/delete/export handlers wired by Chat.tsx. */
+  onRename?: () => void;
+  onDelete?: () => void;
+  onExport?: () => void;
+  /** Per-action busy flags — disable buttons while pending. */
+  busy?: { rename?: boolean; delete?: boolean };
+}
+
+interface UsageRow {
+  promptTokens: number;
+  completionTokens: number;
+  totalTokens: number;
+  costUsd: number;
 }
 
 function formatNumber(n: number): string {
   return n.toLocaleString();
 }
 
+/** Map a model id like "opencode/deepseek-v4-flash-free" → "opencode". */
+function providerFromModel(model: string): string {
+  if (!model) return '';
+  if (!model.includes('/')) return '';
+  return model.split('/')[0];
+}
+
+/** Map a model id to a cost (USD/M-token) — placeholder rates; the
+ *  MiniMax usage module supplies real numbers where available.  */
+function approxCostPer1M(model: string): number {
+  if (!model) return 0;
+  const m = model.toLowerCase();
+  if (m.includes('opus')) return 15;
+  if (m.includes('sonnet')) return 3;
+  if (m.includes('haiku')) return 0.8;
+  if (m.includes('gpt-4o')) return 5;
+  if (m.includes('gpt-4')) return 10;
+  if (m.includes('deepseek')) return 0.27;
+  if (m.includes('minimax')) return 0.3;
+  if (m.includes('llama-3.3-70b')) return 0.59;
+  return 1;
+}
+
 export function ChatInfoPanel({
   sessionId,
   messages,
@@ -33,22 +81,74 @@ export function ChatInfoPanel({
   agents,
   mcps,
   allCommands,
+  activeSource = 'bizar',
+  onRename,
+  onDelete,
+  onExport,
+  busy,
 }: Props) {
-  // Tokens + cost are stubbed — the dashboard doesn't currently
-  // surface these from the chat backend. Show the count of messages
-  // + pinned as a sensible default and leave token/cost placeholders
-  // clearly marked so it's obvious they're not yet wired.
+  // Best-effort: pull usage summary from the MiniMax usage endpoint
+  // when the session is opencode. Falls back silently if the module
+  // isn't installed yet.
+  const [usage, setUsage] = useState<UsageRow | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch('/api/usage?range=24h', {
+          headers: { Accept: 'application/json' },
+        });
+        if (!res.ok) return;
+        const body = (await res.json()) as UsageRow;
+        if (!cancelled) setUsage(body);
+      } catch {
+        /* ignore — usage is non-essential */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
   const msgCount = messages?.length ?? 0;
   const pinnedCount = pinned?.size ?? 0;
-  const tokensUsed = 0;
+
+  // Estimate tokens / cost from message length when no real usage
+  // data is available. Real numbers come from the MiniMax module.
+  const totalChars = messages.reduce(
+    (n, m) => n + ((m.content || m.message || '') as string).length,
+    0,
+  );
+  const approxTokens = Math.round(totalChars / 4);
+  const rate = approxCostPer1M(model);
+  const approxCostUsd = (approxTokens / 1_000_000) * rate;
+  const tokensUsed = usage?.totalTokens ?? approxTokens;
+  const costUsd = usage?.costUsd ?? approxCostUsd;
   const tokensTotal = 128_000;
-  const costUsd = 0;
+  const provider = providerFromModel(model);
 
   return (
     <aside className="chat-info">
       <div className="chat-info-section">
-        <h4>Session</h4>
-        <div>{sessionId || 'Live'}</div>
+        <div className="chat-info-section-head">
+          <h4>
+            <MessageSquare
+              size={11}
+              style={{ marginRight: 4, verticalAlign: -1 }}
+              aria-hidden
+            />{' '}
+            Session
+          </h4>
+          <span
+            className={`chat-source-badge chat-source-${activeSource ?? 'none'}`}
+            style={{ marginLeft: 'auto' }}
+          >
+            {activeSource === 'opencode' ? 'opencode' : 'bizar chat'}
+          </span>
+        </div>
+        <div className="chat-info-mono chat-ellipsis" title={sessionId}>
+          {sessionId || 'Live'}
+        </div>
         <div className="chat-info-mono">
           {formatNumber(msgCount)} message{msgCount === 1 ? '' : 's'}
           {pinnedCount > 0 && ` · ${pinnedCount} pinned`}
@@ -56,15 +156,24 @@ export function ChatInfoPanel({
       </div>
 
       <div className="chat-info-section">
-        <h4>Agent</h4>
-        <div>{agent || '—'}</div>
+        <h4>
+          <Bot size={11} style={{ marginRight: 4, verticalAlign: -1 }} aria-hidden />{' '}
+          Agent
+        </h4>
+        <div className="chat-info-value">{agent || '—'}</div>
       </div>
 
       <div className="chat-info-section">
-        <h4>Model</h4>
+        <h4>
+          <Server size={11} style={{ marginRight: 4, verticalAlign: -1 }} aria-hidden />{' '}
+          Model
+        </h4>
         <div className="chat-mono chat-ellipsis" title={model}>
           {model || '—'}
         </div>
+        {provider && (
+          <div className="chat-info-mono">provider · {provider}</div>
+        )}
       </div>
 
       <div className="chat-info-section">
@@ -75,20 +184,36 @@ export function ChatInfoPanel({
         <div className="chat-info-bar" aria-hidden>
           <div
             className="chat-info-bar-fill"
-            style={{ width: `${Math.min(100, (tokensUsed / Math.max(1, tokensTotal)) * 100)}%` }}
+            style={{
+              width: `${Math.min(100, (tokensUsed / Math.max(1, tokensTotal)) * 100)}%`,
+            }}
           />
         </div>
       </div>
 
       <div className="chat-info-section">
-        <h4>Cost</h4>
+        <h4>
+          <CircleDollarSign
+            size={11}
+            style={{ marginRight: 4, verticalAlign: -1 }}
+            aria-hidden
+          />{' '}
+          Cost
+        </h4>
         <div className="chat-mono">${costUsd.toFixed(4)}</div>
+        {!usage && (
+          <div className="chat-info-mono">approx · live from MiniMax</div>
+        )}
       </div>
 
       <div className="chat-info-section">
         <h4>
-          <Bot size={11} style={{ marginRight: 4, verticalAlign: -1 }} aria-hidden /> Attached
-          agents
+          <Bot
+            size={11}
+            style={{ marginRight: 4, verticalAlign: -1 }}
+            aria-hidden
+          />{' '}
+          Attached agents
         </h4>
         {agents?.length ? (
           <div className="chat-info-agents">
@@ -105,7 +230,12 @@ export function ChatInfoPanel({
 
       <div className="chat-info-section">
         <h4>
-          <Server size={11} style={{ marginRight: 4, verticalAlign: -1 }} aria-hidden /> MCPs
+          <Server
+            size={11}
+            style={{ marginRight: 4, verticalAlign: -1 }}
+            aria-hidden
+          />{' '}
+          MCPs
         </h4>
         {mcps?.length ? (
           <div className="chat-info-agents">
@@ -122,23 +252,55 @@ export function ChatInfoPanel({
 
       <div className="chat-info-section">
         <h4>
-          <Terminal size={11} style={{ marginRight: 4, verticalAlign: -1 }} aria-hidden /> Slash
-          commands
-        </h4>
-        <div className="chat-info-mono">{allCommands?.length ?? 0} available</div>
-      </div>
-
-      <div className="chat-info-section">
-        <h4>
-          <MessageSquare
+          <Terminal
             size={11}
             style={{ marginRight: 4, verticalAlign: -1 }}
             aria-hidden
           />{' '}
-          Linked
+          Slash commands
         </h4>
-        <div className="chat-info-mono">No links yet</div>
+        <div className="chat-info-mono">{allCommands?.length ?? 0} available</div>
       </div>
+
+      {(onRename || onDelete || onExport) && (
+        <div className="chat-info-section">
+          <h4>Actions</h4>
+          <div className="chat-info-actions">
+            {onRename && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                onClick={onRename}
+                disabled={busy?.rename}
+                title="Rename session"
+              >
+                <Pencil size={12} aria-hidden /> Rename
+              </button>
+            )}
+            {onExport && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                onClick={onExport}
+                title="Export transcript"
+              >
+                <Download size={12} aria-hidden /> Export
+              </button>
+            )}
+            {onDelete && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm btn-danger"
+                onClick={onDelete}
+                disabled={busy?.delete}
+                title="Delete session"
+              >
+                <Trash2 size={12} aria-hidden /> Delete
+              </button>
+            )}
+          </div>
+        </div>
+      )}
     </aside>
   );
-}
+}

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

@@ -1,4 +1,8 @@
 // src/components/chat/ChatThread.tsx — message list, welcome screen, loading skeleton.
+//
+// v4.2.5 — accepts `activeSource` so the loading skeleton can hint
+// which stream is loading and the welcome variant for "opencode"
+// can differ from the local chat welcome.
 
 import { useEffect, useRef } from 'react';
 import { LoadingSkeleton } from './LoadingSkeleton';
@@ -19,6 +23,12 @@ interface Props {
   activeProject: { name: string } | null;
   sessionId: string;
   pinned: Set<number>;
+  /** Which stream currently owns the thread — purely cosmetic, lets
+   *  the empty/loading states be slightly more specific. The type
+   *  uses `unknown` so we don't pull in a tight coupling; the value
+   *  is reflected back into the loading skeleton and welcome screen
+   *  via data attributes so CSS can style accordingly. */
+  activeSource?: 'bizar' | 'opencode' | null;
   onPickSuggestion: (text: string) => void;
   onCopy: (m: Message) => void;
   onDelete: (idx: number) => void;
@@ -32,6 +42,7 @@ export function ChatThread({
   activeProject,
   sessionId,
   pinned,
+  activeSource,
   onPickSuggestion,
   onCopy,
   onDelete,
@@ -40,19 +51,12 @@ export function ChatThread({
 }: Props) {
   const innerRef = useRef<HTMLDivElement>(null);
 
-  // v3.22 — only auto-scroll when we own the scroll container (i.e.
-  // when rendered directly as the message scroller). When embedded
+  // Only auto-scroll when we own the scroll container (i.e. when
+  // rendered directly as the message scroller). When embedded
   // inside Chat.tsx's chat-thread-scroll, the parent handles scroll.
-  // We detect this by checking if our closest scroll ancestor is
-  // ourselves; if so, auto-scroll. Otherwise, no-op.
   useEffect(() => {
     const el = innerRef.current;
     if (!el) return;
-    // If we ARE the scroll container (legacy / mobile path), scroll.
-    // If a parent .chat-thread-scroll wraps us, the parent scrolls.
-    const isScroller = el.scrollHeight > el.clientHeight && el.matches(':scope');
-    // Simpler heuristic: if no `.chat-thread-scroll` ancestor exists,
-    // auto-scroll. Otherwise let the parent handle it.
     let p: HTMLElement | null = el.parentElement;
     let wrapped = false;
     while (p) {
@@ -63,13 +67,13 @@ export function ChatThread({
       p = p.parentElement;
     }
     if (!wrapped) el.scrollTop = el.scrollHeight;
-    // isScroller is referenced for clarity; suppress unused warning.
-    void isScroller;
   }, [messages]);
 
+  const stream: 'bizar' | 'opencode' = activeSource === 'opencode' ? 'opencode' : 'bizar';
+
   if (loading) {
     return (
-      <div className="chat-thread legacy" ref={innerRef}>
+      <div className="chat-thread legacy" ref={innerRef} data-stream={stream}>
         <LoadingSkeleton count={3} />
       </div>
     );
@@ -77,16 +81,24 @@ export function ChatThread({
 
   if (!activeProject) {
     return (
-      <div className="chat-thread legacy" ref={innerRef}>
-        <WelcomeScreen variant="no-project" projectName="" onPickSuggestion={onPickSuggestion} />
+      <div className="chat-thread legacy" ref={innerRef} data-stream={stream}>
+        <WelcomeScreen
+          variant="no-project"
+          projectName=""
+          onPickSuggestion={onPickSuggestion}
+        />
       </div>
     );
   }
 
   if (messages.length === 0) {
     return (
-      <div className="chat-thread legacy" ref={innerRef}>
-        <WelcomeScreen variant="empty" projectName={activeProject.name} onPickSuggestion={onPickSuggestion} />
+      <div className="chat-thread legacy" ref={innerRef} data-stream={stream}>
+        <WelcomeScreen
+          variant="empty"
+          projectName={activeProject.name}
+          onPickSuggestion={onPickSuggestion}
+        />
       </div>
     );
   }
@@ -106,4 +118,4 @@ export function ChatThread({
       ))}
     </div>
   );
-}
+}

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

@@ -19,11 +19,17 @@ interface Props {
   onAttach: () => void;
   sessionsOpen: boolean;
   infoOpen: boolean;
+  /** Which stream will receive the next message — propagates the
+   *  pill border color and a small "→ opencode" hint. */
+  activeSource?: 'bizar' | 'opencode' | null;
 }
 
 export function FloatingComposer(props: Props) {
+  const { activeSource } = props;
   return (
-    <div className="chat-composer-wrap">
+    <div
+      className={`chat-composer-wrap chat-composer-source-${activeSource ?? 'none'} legacy`}
+    >
       <div className="chat-composer-pill">
         <Composer {...props} />
       </div>

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

@@ -1,7 +1,19 @@
-// src/components/chat/InfoPanel.tsx — compact 4-card info sidebar.
+// src/components/chat/InfoPanel.tsx — mobile-compact info sidebar.
+//
+// v4.2.5 — overhauled: shows activeSource badge, message count,
+// session metadata, model/provider, and rename/delete actions for
+// the active session.
 
 import { useState } from 'react';
-import { MessageSquare, Bot, Server, Terminal, ChevronDown } from 'lucide-react';
+import {
+  MessageSquare,
+  Bot,
+  Server,
+  Terminal,
+  ChevronDown,
+  Trash2,
+  Pencil,
+} from 'lucide-react';
 
 interface Props {
   sessionId: string;
@@ -12,6 +24,11 @@ interface Props {
   agents: Array<{ name: string; model?: string; mode?: string }>;
   mcps: Array<{ id: string; command?: string; enabled?: boolean }>;
   allCommands: Array<{ cmd: string; desc: string; mod?: string }>;
+  activeSource?: 'bizar' | 'opencode' | null;
+  /** Optional rename handler — when omitted the rename button is hidden. */
+  onRename?: () => void;
+  /** Optional delete handler — when omitted the delete button is hidden. */
+  onDelete?: () => void;
 }
 
 export function InfoPanel({
@@ -23,6 +40,9 @@ export function InfoPanel({
   agents,
   mcps,
   allCommands,
+  activeSource = 'bizar',
+  onRename,
+  onDelete,
 }: Props) {
   const [showAllAgents, setShowAllAgents] = useState(false);
   const [showCommands, setShowCommands] = useState(false);
@@ -30,11 +50,21 @@ export function InfoPanel({
   const visibleAgents = showAllAgents ? agents : agents.slice(0, 4);
   const visibleCommands = showCommands ? allCommands : allCommands.slice(0, 4);
 
+  // Derive a friendly provider from the model id (e.g.
+  // "opencode/deepseek-v4-flash-free" → provider "opencode").
+  const provider = model.includes('/') ? model.split('/')[0] : '';
+
   return (
     <div className="chat-info">
       <div className="chat-info-card">
         <div className="chat-info-card-title">
           <MessageSquare size={14} /> Session
+          <span
+            className={`chat-source-badge chat-source-${activeSource ?? 'none'}`}
+            style={{ marginLeft: 'auto' }}
+          >
+            {activeSource === 'opencode' ? 'opencode' : 'bizar chat'}
+          </span>
         </div>
         <dl className="env-table">
           <dt>id</dt>
@@ -46,8 +76,38 @@ export function InfoPanel({
           <dt>Agent</dt>
           <dd className="mono">{agent || '—'}</dd>
           <dt>Model</dt>
-          <dd className="mono ellipsis" title={model}>{model || '—'}</dd>
+          <dd className="mono ellipsis" title={model}>
+            {model || '—'}
+          </dd>
+          {provider && (
+            <>
+              <dt>Provider</dt>
+              <dd className="mono">{provider}</dd>
+            </>
+          )}
         </dl>
+        {(onRename || onDelete) && (
+          <div className="chat-info-actions">
+            {onRename && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                onClick={onRename}
+              >
+                <Pencil size={12} aria-hidden /> Rename
+              </button>
+            )}
+            {onDelete && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-danger btn-sm"
+                onClick={onDelete}
+              >
+                <Trash2 size={12} aria-hidden /> Delete
+              </button>
+            )}
+          </div>
+        )}
       </div>
 
       <div className="chat-info-card">
@@ -80,7 +140,9 @@ export function InfoPanel({
           <span className="chat-info-card-count">{mcps.length}</span>
         </div>
         <ul className="mod-mini-list">
-          {mcps.length === 0 ? <li className="muted">No MCPs configured.</li> : null}
+          {mcps.length === 0 ? (
+            <li className="muted">No MCPs configured.</li>
+          ) : null}
           {mcps.map((m) => (
             <li key={m.id} className="mod-mini">
               <span className="mod-mini-name">{m.id}</span>
@@ -101,7 +163,10 @@ export function InfoPanel({
         >
           <Terminal size={14} /> Slash commands
           <span className="chat-info-card-count">{allCommands.length}</span>
-          <ChevronDown size={12} className={`chat-info-card-chevron ${showCommands ? 'open' : ''}`} />
+          <ChevronDown
+            size={12}
+            className={`chat-info-card-chevron ${showCommands ? 'open' : ''}`}
+          />
         </button>
         {showCommands && (
           <ul className="mod-mini-list">
@@ -116,4 +181,4 @@ export function InfoPanel({
       </div>
     </div>
   );
-}
+}