@polderlabs/bizar 5.3.0 → 5.4.0

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

@@ -1949,6 +1949,186 @@ code,
   }
 }
 
+/* ─── Mobile Overview (v5.4) ───────────────────────────────────────────── */
+.mobile-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mobile-hero {
+  padding: 20px 16px;
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.10));
+  border: 1px solid var(--border);
+  border-radius: 14px;
+}
+
+.mobile-hero h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mobile-hero p {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.4;
+}
+
+.mobile-hero-input {
+  width: 100%;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.mobile-hero-submit {
+  width: 100%;
+  padding: 10px;
+  background: var(--accent, #8b5cf6);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.mobile-hero-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mobile-stats-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mobile-stat-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.mobile-stat-card.is-blue { border-left: 4px solid #58a6ff; }
+.mobile-stat-card.is-purple { border-left: 4px solid #8b5cf6; }
+.mobile-stat-card.is-green { border-left: 4px solid #3fb950; }
+.mobile-stat-card.is-yellow { border-left: 4px solid #d29922; }
+
+.mobile-stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--surface-2);
+  color: var(--text);
+  flex-shrink: 0;
+}
+
+.mobile-stat-body { flex: 1; min-width: 0; }
+
+.mobile-stat-label {
+  font-size: 12px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.mobile-stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 2px;
+}
+
+.mobile-stat-subtext {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.mobile-activity-card,
+.mobile-quick-actions {
+  padding: 16px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.mobile-activity-card h3 {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mobile-activity-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mobile-activity-item {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--surface-2);
+  font-size: 12px;
+}
+
+.mobile-activity-time {
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.mobile-activity-text {
+  word-break: break-word;
+}
+
+.mobile-quick-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mobile-quick-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
 /* ─── Reduce motion ──────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *,

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

@@ -761,3 +761,113 @@
   opacity: 0.5;
 }
 
+/* ─────────────────────────────────────────────────────────────────────
+   v5.4 — Mobile settings accordion (mobile-settings)
+   ───────────────────────────────────────────────────────────────────── */
+
+.mobile-settings {
+  padding: 16px;
+}
+
+.mobile-settings-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--surface-2, var(--bg-elev-2, #1e1e2e));
+  border: 1px solid var(--border, #3a3a4a);
+  border-radius: 10px;
+  margin-bottom: 16px;
+  color: var(--text-dim, #888);
+}
+
+.mobile-settings-search input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text, #e0e0e0);
+  font-size: 15px;
+  outline: none;
+}
+
+.mobile-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mobile-settings-item {
+  background: var(--surface-1, var(--bg-elev, #18181f));
+  border: 1px solid var(--border, #3a3a4a);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.mobile-settings-item-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
+  background: transparent;
+  border: none;
+  color: var(--text, #e0e0e0);
+  text-align: left;
+  cursor: pointer;
+}
+
+.mobile-settings-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--surface-2, var(--bg-elev-2, #1e1e2e));
+  color: var(--accent, #8b5cf6);
+  flex-shrink: 0;
+}
+
+.mobile-settings-item-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-settings-item-title {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.mobile-settings-item-desc {
+  font-size: 12px;
+  color: var(--text-dim, #888);
+  margin-top: 2px;
+}
+
+.mobile-settings-item-chevron {
+  color: var(--text-dim, #888);
+  transition: transform 200ms;
+  flex-shrink: 0;
+}
+
+.mobile-settings-item-chevron.is-rotated {
+  transform: rotate(90deg);
+}
+
+.mobile-settings-item.is-expanded {
+  border-color: var(--accent, #8b5cf6);
+}
+
+.mobile-settings-item-body {
+  padding: 0 16px 16px;
+  border-top: 1px solid var(--border, #3a3a4a);
+  background: var(--surface-2, var(--bg-elev-2, #1e1e2e));
+}
+
+.mobile-settings-empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--text-dim, #888);
+  font-size: 14px;
+}
+

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

@@ -287,4 +287,309 @@
   justify-content: center;
   padding: var(--space-12);
   color: var(--text-dim);
+}
+
+/* ── Mobile Tasks (v5.4) ──────────────────────────────────────────── */
+
+.mobile-tasks {
+  padding: 14px 16px 80px;
+}
+
+.mobile-tasks-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 12px;
+}
+
+.mobile-tasks-search-icon {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.mobile-tasks-search-input {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  min-width: 0;
+}
+
+.mobile-tasks-search-input::placeholder {
+  color: var(--text-dim);
+}
+
+.mobile-tasks-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 16px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.mobile-tasks-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  color: var(--text-dim);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.mobile-tasks-tab.is-active {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+.mobile-tasks-count {
+  background: rgba(255, 255, 255, 0.15);
+  padding: 0 6px;
+  border-radius: 8px;
+  font-size: 10px;
+}
+
+.mobile-tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* ── Mobile task card ──────────────────────────────────────────────── */
+
+.task-card-mobile {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.task-card-mobile.is-todo,
+.task-card-mobile.is-queued {
+  border-left: 4px solid #8b949e;
+}
+
+.task-card-mobile.is-doing {
+  border-left: 4px solid #d29922;
+}
+
+.task-card-mobile.is-done {
+  border-left: 4px solid #3fb950;
+  opacity: 0.7;
+}
+
+.task-card-mobile.is-failed,
+.task-card-mobile.is-blocked {
+  border-left: 4px solid #f85149;
+}
+
+.task-card-mobile-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  cursor: pointer;
+}
+
+.task-card-mobile-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.task-card-mobile-status.is-doing { background: #d29922; }
+.task-card-mobile-status.is-done { background: #3fb950; }
+.task-card-mobile-status.is-failed { background: #f85149; }
+.task-card-mobile-status.is-blocked { background: #f85149; }
+
+.task-card-mobile-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-card-mobile-title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-priority-badge {
+  display: inline-block;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 6px;
+  margin-top: 2px;
+}
+
+.task-priority-badge.is-high {
+  background: rgba(239, 68, 68, 0.2);
+  color: #f85149;
+}
+
+.task-priority-badge.is-medium {
+  background: rgba(210, 153, 34, 0.2);
+  color: #d29922;
+}
+
+.task-priority-badge.is-low {
+  background: rgba(63, 185, 80, 0.2);
+  color: #3fb950;
+}
+
+.task-chevron {
+  flex-shrink: 0;
+  color: var(--text-dim);
+  transition: transform 150ms ease;
+}
+
+.task-chevron.is-rotated {
+  transform: rotate(90deg);
+}
+
+.task-card-mobile-details {
+  padding: 0 14px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--surface-2);
+}
+
+.task-card-mobile-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin: 8px 0;
+  line-height: 1.4;
+}
+
+.task-card-mobile-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.task-card-mobile-meta .tag {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1px 6px;
+  font-size: 11px;
+}
+
+.task-card-mobile-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+/* ── Bottom sheet ─────────────────────────────────────────────────── */
+
+.sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 60;
+}
+
+.sheet-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--surface-1);
+  border-top: 1px solid var(--border);
+  border-radius: 16px 16px 0 0;
+  padding: 12px 16px 24px;
+  z-index: 70;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.sheet-handle {
+  width: 36px;
+  height: 4px;
+  background: var(--text-dim);
+  border-radius: 2px;
+  margin: 0 auto 12px;
+}
+
+.sheet-title {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.sheet-input,
+.sheet-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 15px;
+  font-family: inherit;
+  margin-bottom: 10px;
+  outline: none;
+  transition: border-color 120ms ease;
+}
+
+.sheet-input:focus,
+.sheet-textarea:focus {
+  border-color: var(--accent);
+}
+
+.sheet-priority {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.sheet-priority-btn {
+  flex: 1;
+  padding: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  text-transform: capitalize;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.sheet-priority-btn.is-active.is-high {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.sheet-priority-btn.is-active.is-medium {
+  background: rgba(210, 153, 34, 0.2);
+}
+
+.sheet-priority-btn.is-active.is-low {
+  background: rgba(63, 185, 80, 0.2);
+}
+
+.sheet-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
 }

package/bizar-dash/tests/mobile-chat.test.tsx

@@ -0,0 +1,82 @@
+/**
+ * tests/mobile-chat.test.tsx
+ *
+ * v5.4 — Mobile chat smoke tests.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { MobileChat } from '../src/web/mobile/MobileChat';
+import type { Snapshot, Settings, ChatMessage, ChatSession } from '../src/web/lib/types';
+
+const mockSnapshot = (overrides: Partial<Snapshot> = {}): Snapshot => ({
+  overview: {
+    counts: { agents: 0, plans: 0, projects: 0, sessions: 0, activeProject: null },
+    recentActivity: [],
+    versions: { node: '', platform: '', projectRoot: '', bizarRoot: '' },
+    generatedAt: new Date().toISOString(),
+  },
+  agents: [],
+  artifacts: [],
+  projects: [],
+  activeProject: null,
+  config: { path: '', data: {}, raw: '', exists: false },
+  settings: {
+    path: '',
+    data: {
+      theme: {
+        mode: 'dark',
+        accent: '#8b5cf6',
+        success: '#3fb950',
+        warning: '#d29922',
+        error: '#f85149',
+        info: '#58a6ff',
+        fontFamily: '',
+        fontSize: 14,
+        compactMode: false,
+        animations: true,
+      },
+      ui: { layout: 'topnav', showHeader: true, showStatusBar: true, defaultTab: '' },
+      defaultAgent: 'odin',
+      defaultModel: '',
+      notifications: { onAgentComplete: false, onPlanApproval: false },
+      dashboard: { autoLaunchWeb: false },
+      service: { enabled: false, autostart: false },
+      about: { version: '', homepage: '', license: '' },
+      agents: { maxParallel: 1, stuckThresholdMs: 0, autoRestart: false },
+      personalization: { displayName: '', role: '', team: '', aboutMe: '', preferences: '' },
+      workflow: { artifactsEnabled: false, agentsDecideAutonomously: false, chatAutonomous: false },
+    } as Settings,
+    exists: false,
+  },
+  tasks: [],
+  mods: [],
+  schedules: [],
+  providers: [],
+  mcps: [],
+  ...overrides,
+});
+
+describe('MobileChat', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the chat shell', () => {
+    render(<MobileChat snapshot={mockSnapshot()} settings={mockSnapshot().settings!.data} />);
+    expect(document.querySelector('.chat-shell')).toBeInTheDocument();
+  });
+
+  it('shows the top bar with project name', () => {
+    const snap = mockSnapshot({
+      activeProject: { id: 'proj-1', name: 'My Project', path: '/test', status: 'active' },
+    });
+    render(<MobileChat snapshot={snap} settings={snap.settings!.data} />);
+    expect(screen.getByText('My Project')).toBeInTheDocument();
+  });
+
+  it('renders composer with send button', () => {
+    render(<MobileChat snapshot={mockSnapshot()} settings={mockSnapshot().settings!.data} />);
+    expect(document.querySelector('.chat-composer-pill')).toBeInTheDocument();
+  });
+});