feat(ui): wire shared Kanban pilot into both apps via AutoCodeClient adapters (U1)

apps/frontend/src/renderer/App.tsx

@@ -69,6 +69,7 @@ import { ProactiveSwapListener } from './components/ProactiveSwapListener';
 import { GitHubSetupModal } from './components/GitHubSetupModal';
 import { useProjectStore, loadProjects, addProject, initializeProject, removeProject } from './stores/project-store';
 import { useTaskStore, loadTasks } from './stores/task-store';
+import { KanbanPilotView } from './components/KanbanPilotView';
 import { useSettingsStore, loadSettings, loadProfiles, saveSettings } from './stores/settings-store';
 import { useClaudeProfileStore } from './stores/claude-profile-store';
 import { useTerminalStore, restoreTerminalSessions } from './stores/terminal-store';
@@ -1012,6 +1013,10 @@ export function App() {
                     isRefreshing={isRefreshingTasks}
                   />
                 )}
+                {/* U1 pilot: shared-UI Kanban (libs/ui) next to the legacy one */}
+                {activeView === 'kanban-next' && (
+                  <KanbanPilotView onTaskSelect={handleTaskClick} />
+                )}
                 {/* TerminalGrid is always mounted but hidden when not active to preserve terminal state */}
                 <div className={activeView === 'terminals' ? 'h-full' : 'hidden'}>
                   <TerminalGrid

apps/frontend/src/renderer/__tests__/autoCodeClient.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Tests for the task-store AutoCodeClient adapter (U1): status/progress
+ * mapping and the live-subscription bridge over a fake store.
+ */
+
+import { describe, expect, it } from 'vitest';
+import {
+  computeProgress,
+  createTaskStoreAutoCodeClient,
+  mapStatus,
+  mapTaskToUiTask,
+} from '../lib/autoCodeClient';
+import type { TaskStoreLike, UiTaskBadgeLabels } from '../lib/autoCodeClient';
+import type { Subtask, Task } from '../../shared/types/task';
+
+const LABELS: UiTaskBadgeLabels = { error: 'Error', prCreated: 'PR' };
+
+let subtaskSeq = 0;
+
+function makeSubtask(status: Subtask['status']): Subtask {
+  subtaskSeq += 1;
+  return {
+    id: `s-${subtaskSeq}`,
+    title: `Subtask ${subtaskSeq}`,
+    description: 'x',
+    status,
+    files: [],
+  };
+}
+
+function makeTask(overrides: Partial<Task> = {}): Task {
+  return {
+    id: 't1',
+    specId: '001-x',
+    projectId: 'p1',
+    title: 'Do the thing',
+    description: '',
+    status: 'backlog',
+    subtasks: [],
+    logs: [],
+    createdAt: new Date('2026-01-01T00:00:00Z'),
+    updatedAt: new Date('2026-01-01T00:00:00Z'),
+    ...overrides,
+  };
+}
+
+describe('mapStatus', () => {
+  it('maps every desktop status onto the shared closed set', () => {
+    expect(mapStatus('backlog')).toBe('draft');
+    expect(mapStatus('queue')).toBe('draft');
+    expect(mapStatus('in_progress')).toBe('running');
+    expect(mapStatus('ai_review')).toBe('review');
+    expect(mapStatus('human_review')).toBe('review');
+    expect(mapStatus('error')).toBe('review');
+    expect(mapStatus('done')).toBe('done');
+    expect(mapStatus('pr_created')).toBe('done');
+  });
+});
+
+describe('computeProgress', () => {
+  it('is undefined without subtasks and a rounded percent with them', () => {
+    expect(computeProgress(makeTask())).toBeUndefined();
+    const task = makeTask({
+      subtasks: [
+        makeSubtask('completed'),
+        makeSubtask('completed'),
+        makeSubtask('pending'),
+      ],
+    });
+    expect(computeProgress(task)).toBe(67);
+  });
+});
+
+describe('mapTaskToUiTask', () => {
+  it('adds an Error badge for errored tasks (surfaced in Review)', () => {
+    const ui = mapTaskToUiTask(makeTask({ status: 'error' }), LABELS);
+    expect(ui.status).toBe('review');
+    expect(ui.badges).toEqual([{ label: 'Error', tone: 'bad' }]);
+  });
+
+  it('adds a PR badge for pr_created tasks', () => {
+    const ui = mapTaskToUiTask(makeTask({ status: 'pr_created' }), LABELS);
+    expect(ui.status).toBe('done');
+    expect(ui.badges).toEqual([{ label: 'PR', tone: 'good' }]);
+  });
+
+  it('omits badges and empty descriptions otherwise', () => {
+    const ui = mapTaskToUiTask(makeTask(), LABELS);
+    expect(ui).toEqual({
+      id: 't1',
+      title: 'Do the thing',
+      status: 'draft',
+      description: undefined,
+      badges: undefined,
+      progress: undefined,
+    });
+  });
+});
+
+describe('createTaskStoreAutoCodeClient', () => {
+  function makeFakeStore(initial: Task[]): TaskStoreLike & {
+    push(tasks: Task[]): void;
+  } {
+    let state = { tasks: initial };
+    const listeners = new Set<(s: { tasks: Task[] }) => void>();
+    return {
+      getState: () => state,
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      push(tasks: Task[]) {
+        state = { tasks };
+        listeners.forEach((listener) => listener(state));
+      },
+    };
+  }
+
+  it('lists mapped tasks and pushes live updates until unsubscribed', async () => {
+    const store = makeFakeStore([makeTask()]);
+    const client = createTaskStoreAutoCodeClient(store, LABELS);
+
+    const initial = await client.listTasks();
+    expect(initial.map((task) => task.id)).toEqual(['t1']);
+
+    const seen: string[][] = [];
+    const unsubscribe = client.subscribeTasks?.((tasks) =>
+      seen.push(tasks.map((task) => task.id)),
+    );
+    store.push([makeTask(), makeTask({ id: 't2', status: 'in_progress' })]);
+    expect(seen).toEqual([['t1', 't2']]);
+
+    unsubscribe?.();
+    store.push([makeTask({ id: 't3' })]);
+    expect(seen).toEqual([['t1', 't2']]);
+  });
+
+  it('skips store updates that did not replace the tasks array', () => {
+    const tasks = [makeTask()];
+    const store = makeFakeStore(tasks);
+    const client = createTaskStoreAutoCodeClient(store, LABELS);
+
+    const seen: number[] = [];
+    client.subscribeTasks?.((next) => seen.push(next.length));
+
+    // Unrelated state change: same tasks reference -> no re-map, no onChange.
+    store.push(tasks);
+    expect(seen).toEqual([]);
+
+    store.push([makeTask(), makeTask({ id: 't2' })]);
+    expect(seen).toEqual([2]);
+  });
+
+  it('resolves labels lazily through a getter so the client can stay stable', () => {
+    const store = makeFakeStore([makeTask({ status: 'error' })]);
+    let labels = { error: 'Error', prCreated: 'PR' };
+    const client = createTaskStoreAutoCodeClient(store, () => labels);
+
+    const seen: string[] = [];
+    client.subscribeTasks?.((tasks) => {
+      seen.push(tasks[0].badges?.[0]?.label ?? '');
+    });
+
+    store.push([makeTask({ id: 'a', status: 'error' })]);
+    labels = { error: 'Erreur', prCreated: 'PR' }; // locale switch
+    store.push([makeTask({ id: 'b', status: 'error' })]);
+    expect(seen).toEqual(['Error', 'Erreur']);
+  });
+});

apps/frontend/src/renderer/components/KanbanPilotView.tsx

@@ -0,0 +1,88 @@
+/**
+ * Kanban pilot on the shared design system (U1).
+ *
+ * Renders `libs/ui`'s KanbanBoard through the task-store AutoCodeClient
+ * adapter — the first screen served by the shared UI in the desktop target.
+ * Reachable via the "Kanban (new UI)" sidebar view next to the legacy board.
+ */
+
+import { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  AutoCodeClientProvider,
+  KanbanBoard as UiKanbanBoard,
+  useTasks,
+} from '@auto-code/ui';
+import type { KanbanColumn, UiTask } from '@auto-code/ui';
+import type { Task } from '../../shared/types/task';
+import { useTaskStore } from '../stores/task-store';
+import { createTaskStoreAutoCodeClient } from '../lib/autoCodeClient';
+
+export interface KanbanPilotViewProps {
+  onTaskSelect?: (task: Task) => void;
+}
+
+function PilotBoard({ onTaskSelect }: Readonly<KanbanPilotViewProps>) {
+  const { t } = useTranslation(['kanban']);
+  const { tasks, loading, error, reload } = useTasks();
+
+  const columns = useMemo<KanbanColumn[]>(
+    () => [
+      { status: 'draft', label: t('kanban:pilot.columns.draft') },
+      { status: 'running', label: t('kanban:pilot.columns.running') },
+      { status: 'review', label: t('kanban:pilot.columns.review') },
+      { status: 'done', label: t('kanban:pilot.columns.done') },
+    ],
+    [t],
+  );
+
+  const handleSelect = (uiTask: UiTask) => {
+    const task = useTaskStore
+      .getState()
+      .tasks.find((candidate) => candidate.id === uiTask.id);
+    if (task) onTaskSelect?.(task);
+  };
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <h1 className="mb-4 text-lg font-semibold">{t('kanban:pilot.title')}</h1>
+      {loading && <p>{t('kanban:pilot.loading')}</p>}
+      {error && (
+        <p role="alert">
+          {t('kanban:pilot.error')}{' '}
+          <button type="button" onClick={reload}>
+            {t('kanban:pilot.retry')}
+          </button>
+        </p>
+      )}
+      {!loading && !error && (
+        <UiKanbanBoard
+          tasks={tasks}
+          columns={columns}
+          onSelectTask={handleSelect}
+        />
+      )}
+    </div>
+  );
+}
+
+export function KanbanPilotView({ onTaskSelect }: Readonly<KanbanPilotViewProps>) {
+  const { t } = useTranslation(['kanban']);
+  // Keep the client identity stable across locale switches (recreating it
+  // would tear down and re-establish the store subscription): the labels are
+  // read through a ref that always holds the current translations.
+  const labelsRef = useRef({ error: '', prCreated: '' });
+  labelsRef.current = {
+    error: t('kanban:pilot.badges.error'),
+    prCreated: t('kanban:pilot.badges.prCreated'),
+  };
+  const client = useMemo(
+    () => createTaskStoreAutoCodeClient(useTaskStore, () => labelsRef.current),
+    [],
+  );
+  return (
+    <AutoCodeClientProvider client={client}>
+      <PilotBoard onTaskSelect={onTaskSelect} />
+    </AutoCodeClientProvider>
+  );
+}

apps/frontend/src/renderer/components/Sidebar.tsx

@@ -33,7 +33,8 @@ import {
   Database,
   MessageSquare,
   Code,
-  Brain
+  Brain,
+  LayoutDashboard
 } from 'lucide-react';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
@@ -70,7 +71,7 @@ import { SessionContextIndicator } from './SessionContextIndicator';
 import { NavIndicator } from './NavIndicator';
 import type { Project, AutoBuildVersionInfo, GitStatus, ProjectEnvConfig } from '../../shared/types';
 
-export type SidebarView = 'kanban' | 'terminals' | 'roadmap' | 'context' | 'ideation' | 'webhooks' | 'github-issues' | 'gitlab-issues' | 'github-prs' | 'gitlab-merge-requests' | 'changelog' | 'insights' | 'worktrees' | 'agent-tools' | 'plugins' | 'analytics' | 'productivity' | 'merge-analytics' | 'sessions' | 'scheduler' | 'feedback' | 'patterns' | 'model-usage' | 'agent-inspector';
+export type SidebarView = 'kanban' | 'kanban-next' | 'terminals' | 'roadmap' | 'context' | 'ideation' | 'webhooks' | 'github-issues' | 'gitlab-issues' | 'github-prs' | 'gitlab-merge-requests' | 'changelog' | 'insights' | 'worktrees' | 'agent-tools' | 'plugins' | 'analytics' | 'productivity' | 'merge-analytics' | 'sessions' | 'scheduler' | 'feedback' | 'patterns' | 'model-usage' | 'agent-inspector';
 
 interface SidebarProps {
   onSettingsClick: () => void;
@@ -89,6 +90,7 @@ interface NavItem {
 // Base nav items always shown
 const baseNavItems: NavItem[] = [
   { id: 'kanban', labelKey: 'navigation:items.kanban', icon: LayoutGrid, shortcut: 'K' },
+  { id: 'kanban-next', labelKey: 'navigation:items.kanbanNext', icon: LayoutDashboard },
   { id: 'terminals', labelKey: 'navigation:items.terminals', icon: Terminal, shortcut: 'A' },
   { id: 'insights', labelKey: 'navigation:items.insights', icon: Sparkles, shortcut: 'N' },
   { id: 'roadmap', labelKey: 'navigation:items.roadmap', icon: MapIcon, shortcut: 'D' },