@polderlabs/bizar 10.4.2 → 10.4.3

package/bizar-dash/src/web/v8/App.tsx

@@ -1,4 +1,5 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { Menu } from 'lucide-react';
 import { AppShell } from './shell/AppShell.js';
 import { Topbar } from './shell/Topbar.js';
 import { Sidebar, type SidebarSection } from './shell/Sidebar.js';
@@ -139,6 +140,7 @@ function iconFor(id: string): LucideIcon {
 
 export function App(): JSX.Element {
   const [activeId, setActiveId] = useState<string>('overview');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const theme = useTheme();
   const density = useDensity();
 
@@ -154,6 +156,36 @@ export function App(): JSX.Element {
     mainRef.current?.focus({ preventScroll: true });
   }, [activeId]);
 
+  // H6 — URL routing: sync activeId to/from window.location.hash.
+  // On mount, parse the hash (e.g. "#/tasks") and set activeId.
+  // On popstate (browser back/forward), re-parse and update.
+  // On every activeId change, push the new hash so deep links work.
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash.startsWith('#/')) {
+      const id = hash.slice(2);
+      if (id) setActiveId(id);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
+
+  useEffect(() => {
+    const onPop = (): void => {
+      const hash = window.location.hash;
+      if (hash.startsWith('#/')) {
+        const id = hash.slice(2);
+        if (id) setActiveId(id);
+      } else {
+        setActiveId('overview');
+      }
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+
+  useEffect(() => {
+    window.history.pushState(null, '', '#/' + activeId);
+  }, [activeId]);
+
   // Live counts for the sidebar. Polled on mount + WS refresh.
   const tasksRes = useFetch<{ tasks?: { id: string; status: string }[]; count?: number }>('/api/tasks');
   const goalsRes = useFetch<{ goals?: { id: string }[]; count?: number }>('/api/goals');
@@ -288,6 +320,29 @@ export function App(): JSX.Element {
       ref={mainRef}
       topbar={
         <Topbar
+          leading={
+            <button
+              type="button"
+              aria-label="Open navigation menu"
+              data-testid="mobile-menu-toggle"
+              onClick={() => setMobileMenuOpen(true)}
+              style={{
+                display: 'none',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 32,
+                height: 32,
+                background: 'transparent',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius-sm)',
+                color: 'var(--fg-muted)',
+                cursor: 'pointer',
+              }}
+              className="mobile-menu-toggle"
+            >
+              <Menu size={16} aria-hidden="true" />
+            </button>
+          }
           center={
             <Inline align="center" gap={2}>
               <button
@@ -330,9 +385,14 @@ export function App(): JSX.Element {
           sections={sections}
           defaultSections={false}
           activeId={activeId}
-          onItemSelect={handleNavigate}
+          onItemSelect={(id) => {
+            handleNavigate(id);
+            setMobileMenuOpen(false);
+          }}
         />
       }
+      mobileMenuOpen={mobileMenuOpen}
+      onMobileMenuClose={() => setMobileMenuOpen(false)}
     >
       <Suspense fallback={<PageSkeleton />}>{view}</Suspense>
       <AppCommandPalette
@@ -342,4 +402,4 @@ export function App(): JSX.Element {
       />
     </AppShell>
   );
-}
+}

package/bizar-dash/src/web/v8/__tests__/chat-view.test.tsx

@@ -92,17 +92,17 @@ describe('S38 ChatView', () => {
     expect(await screen.findByTestId('chat-bubble-assistant')).toBeTruthy();
   });
 
-  it('POSTs to /api/chat/sessions on `+ New session`', async () => {
-    const state = installFetchMock([
+  it('opens the New session modal on `+ New session` click', async () => {
+    installFetchMock([
       [/^\/api\/chat(\?|$)/, () => jsonResponse(200, { messages: [], sessions: [] })],
       [/^\/api\/chat\/sessions/, () => jsonResponse(200, { sessions: [] })],
     ]);
     render(<ChatView />);
     const create = await screen.findByTestId('chat-create-session');
     fireEvent.click(create);
+    // Modal should open with title "New Claude session"
     await waitFor(() => {
-      const hit = state.posts.find((p) => p.url.endsWith('/api/chat/sessions') && p.method === 'POST');
-      expect(hit).toBeTruthy();
+      expect(screen.getByText('New Claude session')).toBeTruthy();
     });
   });
 

package/bizar-dash/src/web/v8/shell/AppShell.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
+import * as RxDialog from '@radix-ui/react-dialog';
 import { Box } from '../ui/primitives/Box.js';
 import { Topbar } from './Topbar.js';
 import { Sidebar } from './Sidebar.js';
@@ -27,11 +28,14 @@ import { Sidebar } from './Sidebar.js';
 export interface AppShellProps {
   topbar?: ReactNode;
   sidebar?: ReactNode;
+  /** Controls the mobile sidebar drawer (open/close). */
+  mobileMenuOpen?: boolean;
+  onMobileMenuClose?: () => void;
   children?: ReactNode;
 }
 
 export const AppShell = forwardRef<HTMLElement, AppShellProps>(function AppShell(
-  { topbar, sidebar, children },
+  { topbar, sidebar, mobileMenuOpen, onMobileMenuClose, children },
   ref,
 ) {
   return (
@@ -55,7 +59,39 @@ export const AppShell = forwardRef<HTMLElement, AppShellProps>(function AppShell
           minHeight: 0, // critical: lets the body actually scroll instead of expanding
         }}
       >
-        {sidebar ?? <Sidebar />}
+        {/* Desktop sidebar — always present at >=768px */}
+        <Box className="v8-desktop-sidebar" style={{ flexShrink: 0 }}>
+          {sidebar ?? <Sidebar />}
+        </Box>
+
+        {/* Mobile sidebar drawer — shown via Dialog overlay on <768px */}
+        <RxDialog.Root open={mobileMenuOpen} onOpenChange={(open) => { if (!open) onMobileMenuClose?.(); }}>
+          <RxDialog.Portal>
+            <RxDialog.Overlay
+              className="v8-mobile-sidebar-overlay"
+              style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'oklch(0 0 0 / 0.4)',
+                zIndex: 'var(--z-modal)',
+              }}
+            />
+            <RxDialog.Content
+              className="v8-mobile-sidebar"
+              aria-label="Navigation"
+              style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: 'var(--sidebar-w)',
+                zIndex: 'calc(var(--z-modal) + 1)',
+              }}
+            >
+              {sidebar ?? <Sidebar />}
+            </RxDialog.Content>
+          </RxDialog.Portal>
+        </RxDialog.Root>
 
         <Box
           as="main"

package/bizar-dash/src/web/v8/shell/Sidebar.tsx

@@ -359,44 +359,54 @@ function SidebarSectionView({
   return (
     <Stack gap={1} data-sidebar-section={section.id}>
       {!collapsed && (
-        <button
-          type="button"
-          onClick={toggle}
-          aria-expanded={sectionOpen}
-          aria-controls={`sidebar-section-${section.id}`}
-          data-testid={`sidebar-section-toggle-${section.id}`}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 'var(--space-2)',
-            padding: 'var(--space-1) var(--space-3)',
-            background: 'transparent',
-            border: 0,
-            fontSize: 'var(--fs-12)',
-            fontWeight: 600,
-            color: 'var(--fg-subtle)',
-            letterSpacing: 'var(--tracking-wide)',
-            textTransform: 'uppercase',
-            cursor: 'pointer',
-            width: '100%',
-            textAlign: 'left',
-          }}
-        >
-          <span>{section.label}</span>
+        <div role="presentation" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
           <span
-            aria-hidden="true"
-            data-testid={`sidebar-section-chevron-${section.id}`}
             style={{
-              display: 'inline-block',
-              transition: 'transform var(--motion-fast) var(--ease-out)',
-              transform: sectionOpen ? 'rotate(90deg)' : 'rotate(0deg)',
-              fontSize: 10,
+              fontSize: 'var(--fs-12)',
+              fontWeight: 600,
+              color: 'var(--fg-subtle)',
+              letterSpacing: 'var(--tracking-wide)',
+              textTransform: 'uppercase',
+              flex: 1,
+              padding: 'var(--space-1) var(--space-3)',
             }}
           >
-            ▸
+            {section.label}
           </span>
-        </button>
+          <button
+            type="button"
+            onClick={toggle}
+            aria-expanded={sectionOpen}
+            aria-controls={`sidebar-section-${section.id}`}
+            data-section-toggle={section.id}
+            data-testid={`sidebar-section-toggle-${section.id}`}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 20,
+              height: 20,
+              background: 'transparent',
+              border: 0,
+              color: 'var(--fg-subtle)',
+              cursor: 'pointer',
+              padding: 0,
+            }}
+          >
+            <span
+              aria-hidden="true"
+              data-testid={`sidebar-section-chevron-${section.id}`}
+              style={{
+                display: 'inline-block',
+                transition: 'transform var(--motion-fast) var(--ease-out)',
+                transform: sectionOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                fontSize: 10,
+              }}
+            >
+              ▸
+            </span>
+          </button>
+        </div>
       )}
       {sectionOpen && (
         <div id={`sidebar-section-${section.id}`} role="group" aria-label={section.label}>
@@ -435,6 +445,7 @@ function SidebarItemView({
       aria-label={item.label}
       title={collapsed ? item.label : undefined}
       data-sidebar-item={item.id}
+      data-nav-item={item.id}
       className={cx('v8-sidebar-item', active && 'is-active')}
       style={{
         display: 'flex',

package/bizar-dash/src/web/v8/shell/Topbar.tsx

@@ -28,6 +28,8 @@ import { fetchJson, FetchError } from '../data/fetcher.js';
 
 export interface TopbarProps {
   brand?: ReactNode;
+  /** Leading slot — renders before brand (hamburger on mobile). */
+  leading?: ReactNode;
   center?: ReactNode;
   /** Right-aligned action cluster. */
   actions?: ReactNode;
@@ -35,7 +37,7 @@ export interface TopbarProps {
   status?: ReactNode;
 }
 
-export function Topbar({ brand, center, actions, status }: TopbarProps): JSX.Element {
+export function Topbar({ leading, brand, center, actions, status }: TopbarProps): JSX.Element {
   return (
     <Box
       as="header"
@@ -51,8 +53,9 @@ export function Topbar({ brand, center, actions, status }: TopbarProps): JSX.Ele
       }}
     >
       <Inline align="center" justify="between" gap={4} style={{ height: '100%' }}>
-        {/* left: brand */}
+        {/* left: leading (hamburger) + brand */}
         <Cluster align="center" gap={3}>
+          {leading}
           {brand ?? <BrandPlaceholder />}
         </Cluster>
 

package/bizar-dash/src/web/v8/ui/styles/globals.css

@@ -103,6 +103,32 @@ h4 {
   font-weight: var(--fw-medium);
 }
 
+/* ── mobile sidebar (C2 — < 768px) ─────────────────────────────────── */
+@media (max-width: 767px) {
+  /* Desktop sidebar hidden on mobile */
+  .v8-desktop-sidebar {
+    display: none;
+  }
+
+  /* Show hamburger button on mobile */
+  .mobile-menu-toggle {
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 768px) {
+  /* Mobile sidebar hidden on desktop */
+  .v8-mobile-sidebar,
+  .v8-mobile-sidebar-overlay {
+    display: none !important;
+  }
+
+  /* Hide hamburger on desktop */
+  .mobile-menu-toggle {
+    display: none !important;
+  }
+}
+
 /* ── a11y helpers (see VisuallyHidden primitive) ────────────────────── */
 .sr-only {
   position: absolute;

package/bizar-dash/src/web/v8/views/Agents/AgentsView.tsx

@@ -21,6 +21,31 @@ import type { BizarAgent, CCAgent, WsMessage } from '../../data/types.js';
 import { AlertTriangle, Bot, Cpu, Pause, Play, Plus, RotateCw } from 'lucide-react';
 import { AgentHierarchy } from './AgentHierarchy.js';
 
+/**
+ * Strip leaked LLM interior monologue from agent card snippets.
+ * Clips to the first sentence, caps at 140 chars.
+ */
+export function sanitizeSummary(raw: string | undefined): string {
+  if (!raw) return '';
+  let s = raw.replace(/<thinking>[\s\S]*?<\/thinking>/gi, '');
+  s = s.split('\n').filter((l) => !l.includes('```')).join('\n');
+  s = s.replace(/\bworktree:\s*/g, '');
+  s = s.replace(/\/tmp\//g, '');
+  s = s.replace(/\bReason:\s*/g, '');
+  s = s.replace(/^\s*→\s*/gm, '');
+  s = s.trim();
+  if (!s) return '';
+  // Strip leading bracketed prefix — [Premise — …] or [Analysis] etc.
+  s = s.replace(/^\[[\w\s]+[-—]\s*/, '');
+  s = s.replace(/^\[[\w\s]+\]\s*/gi, '');
+  s = s.trim();
+  if (!s) return '';
+  const m = s.match(/^[^.!?\n]+[.!?]/);
+  const first = m ? m[0] : s;
+  if (first.length <= 140) return first;
+  return first.slice(0, 137) + '…';
+}
+
 const SOURCE_STORAGE_KEY = 'bizar.agents.sourceFilter';
 const SOURCE_LABELS = {
   all: 'All',
@@ -94,7 +119,7 @@ function mapCC(a: CCAgent): AgentCardProps {
     name: a.name || a.sessionId?.slice(0, 8) || 'unknown',
     role: a.kind === 'background' ? 'CC background' : 'CC interactive',
     status,
-    currentTask: a.lastMessageSnippet || undefined,
+    currentTask: sanitizeSummary(a.lastMessageSnippet),
     lastActivity: a.lastMessageAt ? new Date(a.lastMessageAt).toLocaleTimeString() : (a.startedAt ? new Date(a.startedAt).toLocaleTimeString() : undefined),
     tasksToday: a.messageCount || 0,
     // CC agents don't expose successRate/tasksSucceeded — only messageCount.

package/bizar-dash/src/web/v8/views/Chat/ChatView.tsx

@@ -26,6 +26,7 @@ import { fetchJson, FetchError } from '../../data/fetcher.js';
 import { MessageBubble, EmptyTranscript } from '../../ui/chat/MessageBubble.js';
 import { readEventStream } from '../../ui/chat/EventStream.js';
 import type { ChatMessage, ChatSession, WsMessage } from '../../data/types.js';
+import { NewSessionModal } from '../ClaudeSessions/NewSessionModal.js';
 
 interface ChatPayload {
   messages: ChatMessage[];
@@ -55,6 +56,7 @@ export function ChatView(): JSX.Element {
   const [busy, setBusy] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [newSessionOpen, setNewSessionOpen] = useState<boolean>(false);
 
   // Seed active session from the first row in the response.
   useEffect(() => {
@@ -198,7 +200,7 @@ export function ChatView(): JSX.Element {
             <Button variant="ghost" onClick={() => void audit()} data-testid="chat-audit">
               <ShieldCheck size={14} aria-hidden /> Audit
             </Button>
-            <Button variant="primary" onClick={() => void createSession()} data-testid="chat-create-session">
+            <Button variant="primary" onClick={() => setNewSessionOpen(true)} data-testid="chat-create-session">
               <MessageSquarePlus size={14} aria-hidden /> New session
             </Button>
           </Inline>
@@ -351,6 +353,16 @@ export function ChatView(): JSX.Element {
           </CardBody>
         </Card>
       </Inline>
+
+      <NewSessionModal
+        open={newSessionOpen}
+        onOpenChange={setNewSessionOpen}
+        onCreated={(id) => {
+          setActiveId(id);
+          void payload.refetch();
+          void sessionsPayload.refetch();
+        }}
+      />
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/ClaudeSessions/NewSessionModal.tsx

@@ -0,0 +1,136 @@
+/**
+ * NewSessionModal — shared new-session Sheet, extracted from
+ * ClaudeSessionsView so ChatView can reuse the same form.
+ */
+
+import { useState } from 'react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Sheet, SheetClose, SheetContent } from '../../ui/feedback/Sheet.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface NewSessionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (id: string) => void;
+}
+
+export function NewSessionModal({ open, onOpenChange, onCreated }: NewSessionModalProps): JSX.Element {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" title="New Claude session" description="Spawn a Claude Code session via the runner.">
+        <NewSessionForm
+          onCreated={(id) => {
+            onOpenChange(false);
+            onCreated(id);
+          }}
+          onCancel={() => onOpenChange(false)}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface NewSessionFormProps {
+  onCreated: (id: string) => void;
+  onCancel: () => void;
+}
+
+export function NewSessionForm({ onCreated, onCancel }: NewSessionFormProps): JSX.Element {
+  const [title, setTitle] = useState<string>('');
+  const [agent, setAgent] = useState<string>('general');
+  const [prompt, setPrompt] = useState<string>('');
+  const [directory, setDirectory] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (): Promise<void> => {
+    if (!agent.trim() || !prompt.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetchJson<{ id: string }>('/api/claude-sessions/new', {
+        method: 'POST',
+        body: {
+          title: title.trim() || null,
+          agent: agent.trim(),
+          prompt: prompt.trim(),
+          directory: directory.trim() || undefined,
+        },
+      });
+      onCreated(res.id);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Stack gap={3} style={{ padding: 'var(--space-4)' }}>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Title (optional)</span>
+        <Input
+          value={title}
+          data-testid="claude-sessions-new-title"
+          onChange={(e) => setTitle((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Agent</span>
+        <Input
+          value={agent}
+          data-testid="claude-sessions-new-agent"
+          onChange={(e) => setAgent((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Seed prompt</span>
+        <textarea
+          value={prompt}
+          rows={4}
+          data-testid="claude-sessions-new-prompt"
+          onChange={(e) => setPrompt(e.target.value)}
+          style={{
+            background: 'var(--surface-0)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-md)',
+            padding: 'var(--space-2)',
+            color: 'var(--fg)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--fs-13)',
+            resize: 'vertical',
+          }}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Working directory (optional)</span>
+        <Input
+          value={directory}
+          data-testid="claude-sessions-new-directory"
+          onChange={(e) => setDirectory((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      {error !== null && (
+        <span role="alert" data-testid="claude-sessions-new-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+          {error}
+        </span>
+      )}
+      <Inline justify="end" gap={2}>
+        <SheetClose asChild>
+          <Button variant="ghost" onClick={onCancel} data-testid="claude-sessions-new-cancel">Cancel</Button>
+        </SheetClose>
+        <Button
+          variant="primary"
+          onClick={() => void submit()}
+          disabled={busy || !agent.trim() || !prompt.trim()}
+          data-testid="claude-sessions-new-submit"
+        >
+          Create
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/CommandPalette/AppCommandPalette.tsx

@@ -110,6 +110,14 @@ interface Project {
   cwd?: string;
 }
 
+/** Mirror of ProjectsView.isTestProject — keeps test projects out of the palette. */
+function isTestProject(p: Project): boolean {
+  return (
+    /^(bizar-(e2e|real-env|admin)|bh-(cold-boot|walk-proj))/.test(p.id) ||
+    (p.name != null && p.name === p.id)
+  );
+}
+
 async function spawnAgent(
   kind: string,
   onToast?: AppCommandPaletteProps['onToast'],
@@ -197,10 +205,12 @@ export function AppCommandPalette(props: AppCommandPaletteProps): JSX.Element {
     void newTask(title, onToast);
   };
 
-  const projectItems: NavItem[] = projects.map((p) => ({
-    id: `project:${p.id}`,
-    label: `Switch to ${p.name || p.id}`,
-  }));
+  const projectItems: NavItem[] = projects
+    .filter((p) => !isTestProject(p))
+    .map((p) => ({
+      id: `project:${p.id}`,
+      label: `Switch to ${p.name || p.id}`,
+    }));
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>