@aion0/forge 0.10.90 → 0.11.0

package/RELEASE_NOTES.md

@@ -1,12 +1,20 @@
-# Forge v0.10.90
+# Forge v0.11.0
 
-Released: 2026-06-17
+Released: 2026-06-18
 
-## Changes since v0.10.89
+## Changes since v0.10.90
 
 ### Other
-- fix(build): revert to default Turbopack — pin is the real fix, not webpack
-- fix(build): pin next to exact 16.2.1 — 16.2.9 breaks webpack middleware
+- fix(kanban): denser compact card — tighter spacing, thin list rows, hide footer, slim callout, +20px height
+- fix(kanban): smaller tiles, single-line list rows, one-row tiles in modal, terse-text guidance
+- fix(kanban): smaller compact metric tiles + wider default modal (760px)
+- feat(kanban): polished widget renderer — Style A cards + Style B modal
+- fix(server): don't pass --use-system-ca when NODE_EXTRA_CA_CERTS is set
+- fix(task): auto-inject corporate CA into spawned CLI env
+- fix(kanban): task settle by widget-file (survive exit-1) + reconcile + lean prompt
+- feat(kanban): task-backed execution mode (B) + artifacts + help doc
+- feat(kanban): compact cards + expand modal + in-place prompt editing
+- feat(kanban): connector-driven home dashboard (P1–P4)
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.89...v0.10.90
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.90...v0.11.0

package/app/api/kanban/[id]/artifact/[...name]/route.ts

@@ -0,0 +1,33 @@
+/**
+ * GET /api/kanban/:id/artifact/:name — serve a file a task-mode card wrote into
+ * <dataDir>/kanban/:id/ (report.md, data, …) so widgets can link to richer
+ * generated content. Read-only, path-sanitized (no traversal). Auth via proxy.ts.
+ */
+
+import { NextResponse } from 'next/server';
+import { readFileSync } from 'node:fs';
+import { extname } from 'node:path';
+import { safeArtifactPath } from '@/lib/kanban/artifacts';
+
+const TYPES: Record<string, string> = {
+  '.md': 'text/markdown; charset=utf-8',
+  '.txt': 'text/plain; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.csv': 'text/csv; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.svg': 'image/svg+xml',
+};
+
+export async function GET(_req: Request, { params }: { params: Promise<{ id: string; name: string[] }> }) {
+  const { id, name } = await params;
+  const rel = (name || []).join('/');
+  const full = safeArtifactPath(id, rel);
+  if (!full) return NextResponse.json({ error: 'not found' }, { status: 404 });
+  try {
+    const buf = readFileSync(full);
+    const ct = TYPES[extname(full).toLowerCase()] || 'application/octet-stream';
+    return new NextResponse(buf, { headers: { 'content-type': ct, 'cache-control': 'no-store' } });
+  } catch {
+    return NextResponse.json({ error: 'unreadable' }, { status: 404 });
+  }
+}

package/app/api/kanban/[id]/run/route.ts

@@ -0,0 +1,27 @@
+/**
+ * POST /api/kanban/:id/run — run a card now (manual refresh). Inline cards run
+ * synchronously and return the fresh widget; task-mode cards are dispatched and
+ * return immediately with status 'running' (the task listener settles them).
+ * Auth handled by proxy.ts.
+ */
+
+import { NextResponse } from 'next/server';
+import { runKanbanCard } from '@/lib/kanban/executor';
+import { runKanbanCardViaTask } from '@/lib/kanban/task-executor';
+import { installKanbanTaskListener } from '@/lib/kanban/task-listener';
+import { getCard } from '@/lib/kanban/store';
+
+export async function POST(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const card = getCard(id);
+  if (!card) return NextResponse.json({ error: 'card not found' }, { status: 404 });
+
+  if (card.execMode === 'task') {
+    installKanbanTaskListener(); // ensure settle works even if tick never ran
+    const taskId = runKanbanCardViaTask(id);
+    return NextResponse.json({ ok: !!taskId, dispatched: true, taskId, card: getCard(id) });
+  }
+
+  const r = await runKanbanCard(id);
+  return NextResponse.json({ ok: r.ok, error: r.error, card: getCard(id) });
+}

package/app/api/kanban/route.ts

@@ -0,0 +1,102 @@
+/**
+ * GET    /api/kanban            list cards
+ * POST   /api/kanban            create card { connectorId, title, prompt, icon?, periodSec? }
+ *        /api/kanban  body { reorder: [{id, order}] }   → batch reorder
+ * PATCH  /api/kanban?id=        update card
+ * DELETE /api/kanban?id=        delete card
+ *
+ * Card execution (run/refresh) lands in P2. Auth is handled by proxy.ts.
+ */
+
+import { NextResponse } from 'next/server';
+import {
+  listCards,
+  createCard,
+  updateCard,
+  deleteCard,
+  reorderCards,
+} from '@/lib/kanban/store';
+import { getInstalledConnector } from '@/lib/connectors/registry';
+import { reconcileRunningKanbanTaskCards } from '@/lib/kanban/task-listener';
+import type { KanbanCard, UpdateKanbanCardInput } from '@/lib/kanban/types';
+
+/** Attach each card's connector website (base_url) so the UI can link out. */
+function withConnectorUrl(cards: KanbanCard[]): KanbanCard[] {
+  const cache = new Map<string, string | null>();
+  return cards.map((c) => {
+    if (!cache.has(c.connectorId)) {
+      const cfg = (getInstalledConnector(c.connectorId)?.config || {}) as Record<string, unknown>;
+      const url = (cfg.base_url || cfg.baseUrl || cfg.url || null) as string | null;
+      cache.set(c.connectorId, url);
+    }
+    return { ...c, connectorUrl: cache.get(c.connectorId) ?? null };
+  });
+}
+
+export async function GET() {
+  // Self-heal task-mode cards stuck 'running' whose task already finished
+  // (covers missed terminal events) before returning the list.
+  try { reconcileRunningKanbanTaskCards(listCards()); } catch { /* best effort */ }
+  return NextResponse.json({ cards: withConnectorUrl(listCards()) });
+}
+
+export async function POST(req: Request) {
+  let body: any = {};
+  try { body = await req.json(); } catch {}
+
+  // Batch reorder shares the POST verb (drag-to-reorder sends the whole order).
+  if (Array.isArray(body.reorder)) {
+    const rows = body.reorder
+      .filter((r: any) => r && typeof r.id === 'string' && typeof r.order === 'number')
+      .map((r: any) => ({ id: r.id, order: r.order }));
+    reorderCards(rows);
+    return NextResponse.json({ ok: true, cards: listCards() });
+  }
+
+  const connectorId = typeof body.connectorId === 'string' ? body.connectorId.trim() : '';
+  const title = typeof body.title === 'string' ? body.title.trim() : '';
+  const prompt = typeof body.prompt === 'string' ? body.prompt.trim() : '';
+  if (!connectorId || !title || !prompt) {
+    return NextResponse.json(
+      { error: 'connectorId, title and prompt are required' },
+      { status: 400 },
+    );
+  }
+  const card = createCard({
+    connectorId,
+    title,
+    prompt,
+    icon: typeof body.icon === 'string' ? body.icon : null,
+    periodSec: typeof body.periodSec === 'number' && body.periodSec > 0 ? body.periodSec : undefined,
+    enabled: body.enabled !== false,
+  });
+  return NextResponse.json({ ok: true, card });
+}
+
+export async function PATCH(req: Request) {
+  const id = new URL(req.url).searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'id query param required' }, { status: 400 });
+
+  let body: any = {};
+  try { body = await req.json(); } catch {}
+
+  const patch: UpdateKanbanCardInput = {};
+  if (typeof body.title === 'string')      patch.title = body.title;
+  if (typeof body.prompt === 'string')     patch.prompt = body.prompt;
+  if (body.icon === null || typeof body.icon === 'string') patch.icon = body.icon;
+  if (typeof body.periodSec === 'number' && body.periodSec > 0) patch.periodSec = body.periodSec;
+  if (typeof body.order === 'number')      patch.order = body.order;
+  if (typeof body.enabled === 'boolean')   patch.enabled = body.enabled;
+
+  const ok = updateCard(id, patch);
+  if (!ok) return NextResponse.json({ error: 'card not found or nothing to update' }, { status: 404 });
+  return NextResponse.json({ ok: true });
+}
+
+export async function DELETE(req: Request) {
+  const id = new URL(req.url).searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'id query param required' }, { status: 400 });
+  const ok = deleteCard(id);
+  if (!ok) return NextResponse.json({ error: 'card not found' }, { status: 404 });
+  return NextResponse.json({ ok: true });
+}

package/app/api/kanban/seed/route.ts

@@ -0,0 +1,14 @@
+/**
+ * POST /api/kanban/seed — create kanban cards from installed connectors'
+ * declared `kanban` defaults (idempotent). Returns the newly-created cards +
+ * the full list. Auth handled by proxy.ts.
+ */
+
+import { NextResponse } from 'next/server';
+import { seedKanbanFromConnectors } from '@/lib/kanban/seed';
+import { listCards } from '@/lib/kanban/store';
+
+export async function POST() {
+  const { created } = seedKanbanFromConnectors();
+  return NextResponse.json({ ok: true, created, cards: listCards() });
+}

package/bin/forge-server.mjs

@@ -729,7 +729,11 @@ function startBackground() {
       // inspection, Zscaler, etc.) install a custom root via MDM; Node
       // doesn't see it without this flag, so marketplace sync fails with
       // 'self-signed certificate in certificate chain' on api.github.com.
-      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+      // BUT it's inherited by spawned `claude` CLIs, where on some macOS
+      // setups it breaks TLS to api.anthropic.com ("SSL certificate
+      // verification failed"). Skip it when an explicit CA bundle is
+      // configured (NODE_EXTRA_CA_CERTS already covers the corp root).
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, process.env.NODE_EXTRA_CA_CERTS ? '' : '--use-system-ca'].filter(Boolean).join(' '),
     },
     detached: true,
   });
@@ -820,7 +824,11 @@ if (isDev) {
       // inspection, Zscaler, etc.) install a custom root via MDM; Node
       // doesn't see it without this flag, so marketplace sync fails with
       // 'self-signed certificate in certificate chain' on api.github.com.
-      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+      // BUT it's inherited by spawned `claude` CLIs, where on some macOS
+      // setups it breaks TLS to api.anthropic.com ("SSL certificate
+      // verification failed"). Skip it when an explicit CA bundle is
+      // configured (NODE_EXTRA_CA_CERTS already covers the corp root).
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, process.env.NODE_EXTRA_CA_CERTS ? '' : '--use-system-ca'].filter(Boolean).join(' '),
     },
   });
   child.on('exit', (code) => { stopServices(); process.exit(code || 0); });
@@ -839,7 +847,11 @@ if (isDev) {
       // inspection, Zscaler, etc.) install a custom root via MDM; Node
       // doesn't see it without this flag, so marketplace sync fails with
       // 'self-signed certificate in certificate chain' on api.github.com.
-      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+      // BUT it's inherited by spawned `claude` CLIs, where on some macOS
+      // setups it breaks TLS to api.anthropic.com ("SSL certificate
+      // verification failed"). Skip it when an explicit CA bundle is
+      // configured (NODE_EXTRA_CA_CERTS already covers the corp root).
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, process.env.NODE_EXTRA_CA_CERTS ? '' : '--use-system-ca'].filter(Boolean).join(' '),
     },
   });
   child.on('exit', (code) => { stopServices(); process.exit(code || 0); });

package/components/HomeView.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react'
 
 const WebChatPanel = lazy(() => import('./WebChatPanel'));
 const PipelineActivityPanel = lazy(() => import('./PipelineActivityPanel'));
+const KanbanBoard = lazy(() => import('./KanbanBoard'));
 
 // Home view: 3 columns with draggable splitters.
 //   col 1 — Session list (inside WebChatPanel; width controlled via prop)
@@ -84,7 +85,13 @@ export default function HomeView() {
   }, [leftWidth, rightWidth]);
 
   return (
-    <div className="flex-1 flex min-h-0 min-w-0">
+    <div className="flex-1 flex flex-col min-h-0 min-w-0">
+      {/* Top: connector-driven Kanban board (self-renders from prompt output). */}
+      <Suspense fallback={null}>
+        <KanbanBoard />
+      </Suspense>
+
+      <div className="flex-1 flex min-h-0 min-w-0">
       {/* Chat (session list + main chat — WebChatPanel handles both internally).
           The session-list splitter is rendered INSIDE WebChatPanel, between its
           aside and main, so it sits at the actual sidebar boundary. */}
@@ -137,6 +144,7 @@ export default function HomeView() {
           </div>
         </>
       )}
+      </div>
     </div>
   );
 }

package/components/KanbanBoard.tsx

@@ -0,0 +1,354 @@
+'use client';
+
+/**
+ * Home Kanban board — connector cards rendered from a prompt-driven WidgetSpec.
+ * Two render modes share one block renderer:
+ *   - compact (Style A): fixed-size card — accent bar, stat tiles, stripe lists.
+ *   - rich (Style B):    floating modal — big tiles, callouts, progress, avatars.
+ * See obsidian forge/kanban-design-mockup.html for the locked design.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { KanbanCard, WidgetSpec, WidgetBlock, WidgetColor } from '@/lib/kanban/types';
+
+const CARD_W = 300;
+const CARD_H = 208;
+
+// Vivid accent palette (reads well on light + dark). Structural colors use CSS vars.
+const HEX: Record<WidgetColor, string> = {
+  gray: '#8b97a6', red: '#f0626b', amber: '#f5b14c', yellow: '#eab308',
+  green: '#46c993', emerald: '#10b981', blue: '#5aa9ff', violet: '#a78bfa',
+};
+function hx(c?: WidgetColor): string { return (c && HEX[c]) || '#5aa9ff'; }
+function tint(c?: WidgetColor, a = '22'): string { return `${hx(c)}${a}`; }
+
+// ─── tiny markdown (escape → bold / code / links / bullets / headers) ──
+function mdInline(s: string): string {
+  let t = s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  t = t.replace(/\[([^\]]+)\]\((https?:[^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer" style="color:var(--accent)">$1</a>');
+  t = t.replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
+  t = t.replace(/`([^`]+)`/g, '<code style="background:var(--bg-tertiary);padding:1px 4px;border-radius:4px;font-size:.9em">$1</code>');
+  return t;
+}
+function Markdown({ text }: { text: string }) {
+  const lines = (text || '').split('\n');
+  return (
+    <div className="space-y-1">
+      {lines.map((ln, i) => {
+        const t = ln.trim();
+        if (!t) return null;
+        if (/^#{1,3}\s/.test(t)) return <div key={i} className="text-[11px] font-semibold tracking-wide uppercase text-[var(--text-secondary)] mt-1" dangerouslySetInnerHTML={{ __html: mdInline(t.replace(/^#{1,3}\s/, '')) }} />;
+        if (/^[-*]\s/.test(t)) return <div key={i} className="text-[12px] flex gap-1.5"><span className="text-[var(--text-secondary)]">•</span><span dangerouslySetInnerHTML={{ __html: mdInline(t.replace(/^[-*]\s/, '')) }} /></div>;
+        // A short, fully-bold line acts as a section header.
+        if (/^\*\*.+\*\*$/.test(t)) return <div key={i} className="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[var(--text-secondary)] mt-2 mb-0.5" dangerouslySetInnerHTML={{ __html: mdInline(t) }} />;
+        return <div key={i} className="text-[12px] leading-relaxed text-[var(--text-primary)]" dangerouslySetInnerHTML={{ __html: mdInline(t) }} />;
+      })}
+    </div>
+  );
+}
+
+// ─── block renderer (rich toggles tile/avatar sizes) ──────
+function Block({ b, rich }: { b: WidgetBlock; rich?: boolean }) {
+  switch (b.type) {
+    case 'metric_row':
+      // Always one row: columns = item count (capped).
+      return (
+        <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${Math.min(b.items.length, rich ? 6 : 4)}, minmax(0,1fr))` }}>
+          {b.items.map((it, i) => (
+            <div key={i} className="rounded-lg border border-[var(--border)] bg-[var(--bg-tertiary)] text-center overflow-hidden"
+              style={{ padding: rich ? '8px 6px' : '3px 3px' }}>
+              <div className="font-bold leading-none" style={{ color: it.color ? hx(it.color) : 'var(--text-primary)', fontSize: rich ? 19 : 13 }}>{it.value}</div>
+              <div className="text-[var(--text-secondary)] uppercase tracking-wide truncate" style={{ fontSize: rich ? 9.5 : 7.5, marginTop: rich ? 4 : 1 }}>{it.label}</div>
+            </div>
+          ))}
+        </div>
+      );
+    case 'callout':
+      return (
+        <div className={`flex items-center gap-2 rounded-lg ${rich ? 'px-3 py-2.5 text-[12px]' : 'px-2.5 py-1.5 text-[11px]'}`}
+          style={{ background: tint(b.color, '1a'), border: `1px solid ${tint(b.color, '55')}`, color: 'var(--text-primary)' }}>
+          <span className="leading-none" style={{ fontSize: rich ? 16 : 12 }}>{b.icon || '⚠️'}</span>
+          <span className={rich ? '' : 'truncate'} dangerouslySetInnerHTML={{ __html: mdInline(b.text) }} />
+        </div>
+      );
+    case 'list':
+      return (
+        <div>
+          {b.items.map((it, i) => (
+            <div key={i} className={`flex gap-2.5 border-b border-[var(--border)]/40 last:border-0 ${rich ? 'py-1.5' : 'py-[3px]'}`}>
+              {rich && it.avatar
+                ? <span className="shrink-0 grid place-items-center rounded-full font-bold" style={{ width: 24, height: 24, fontSize: 9.5, background: hx(it.badgeColor), color: '#0e1116' }}>{it.avatar}</span>
+                : <span className="shrink-0 rounded-full mt-1" style={{ width: 3, alignSelf: 'stretch', background: hx(it.badgeColor) }} />}
+              <div className="min-w-0 flex-1">
+                <div className={`text-[12px] leading-snug text-[var(--text-primary)] ${rich ? '' : 'truncate'}`}>
+                  {it.badge && <span className="inline-block font-bold align-middle mr-1.5 rounded-full" style={{ fontSize: 8.5, padding: '2px 6px', background: tint(it.badgeColor), color: hx(it.badgeColor) }}>{it.badge}</span>}
+                  {it.href ? <a href={it.href} target="_blank" rel="noreferrer" className="hover:underline" style={{ color: 'var(--text-primary)' }}>{it.text}</a> : it.text}
+                </div>
+                {it.sub && <div className={`text-[10.5px] text-[var(--text-secondary)] mt-0.5 ${rich ? '' : 'truncate'}`}>{it.sub}</div>}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    case 'progress': {
+      const pct = Math.max(0, Math.min(100, b.max ? (b.value / b.max) * 100 : 0));
+      const c = hx(b.color || 'green');
+      return (
+        <div>
+          <div className="flex justify-between text-[11px] text-[var(--text-secondary)] mb-1"><span>{b.label}</span><span>{b.value}/{b.max}</span></div>
+          <div className="rounded-full overflow-hidden bg-[var(--bg-tertiary)]" style={{ height: rich ? 8 : 6 }}>
+            <div className="h-full rounded-full" style={{ width: `${pct}%`, background: `linear-gradient(90deg, ${c}, ${hx('blue')})` }} />
+          </div>
+        </div>
+      );
+    }
+    case 'stat':
+      return (
+        <div>
+          <div className="font-bold" style={{ fontSize: rich ? 30 : 24, color: 'var(--text-primary)' }}>{b.value}</div>
+          <div className="text-[10.5px] text-[var(--text-secondary)]">{b.label}{b.delta && <span style={{ color: hx(b.deltaColor) }}> {b.delta}</span>}</div>
+        </div>
+      );
+    case 'table':
+      return (
+        <table className="w-full text-[10.5px]">
+          <thead><tr>{b.columns.map((c, i) => <th key={i} className="text-left font-medium text-[var(--text-secondary)] pb-1">{c}</th>)}</tr></thead>
+          <tbody>{b.rows.map((r, ri) => <tr key={ri} className="border-t border-[var(--border)]/40">{r.map((c, ci) => <td key={ci} className="pr-2 py-1 align-top">{c}</td>)}</tr>)}</tbody>
+        </table>
+      );
+    case 'badges':
+      return (
+        <div className="flex flex-wrap gap-1.5">
+          {b.items.map((it, i) => <span key={i} className="font-medium rounded-full" style={{ fontSize: 9.5, padding: '3px 8px', background: tint(it.color), color: hx(it.color) }}>{it.text}</span>)}
+        </div>
+      );
+    case 'text':
+    default:
+      return <Markdown text={(b as any).markdown ?? ''} />;
+  }
+}
+
+function WidgetView({ spec, rich }: { spec: WidgetSpec; rich?: boolean }) {
+  return (
+    <div className={rich ? 'space-y-3.5' : 'space-y-1.5'}>
+      {spec.blocks.map((b, i) => <Block key={i} b={b} rich={rich} />)}
+      {/* footer is low-value detail — only show it in the expanded modal. */}
+      {spec.footer && rich && <div className="text-[10px] text-[var(--text-secondary)] pt-1 border-t border-[var(--border)]/40">{spec.footer}</div>}
+    </div>
+  );
+}
+
+// ─── helpers ──────────────────────────────────────────────
+function ago(iso?: string | null): string {
+  if (!iso) return 'never';
+  const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 60) return `${s}s`; if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`; return `${Math.floor(s / 86400)}d`;
+}
+function statusDot(s: KanbanCard['status']): string {
+  return s === 'error' ? HEX.red : s === 'running' ? HEX.amber : s === 'ok' ? HEX.green : 'var(--text-secondary)';
+}
+
+// ─── compact card (Style A) ───────────────────────────────
+function Card({ card, onOpen, onRefresh, onDelete }: {
+  card: KanbanCard; onOpen: () => void; onRefresh: () => void; onDelete: () => void;
+}) {
+  const running = card.status === 'running';
+  const accent = card.lastResult?.accent;
+  const stop = (e: React.MouseEvent) => e.stopPropagation();
+  return (
+    <button onClick={onOpen}
+      className="shrink-0 flex flex-col rounded-xl border border-[var(--border)] bg-[var(--bg-secondary)] overflow-hidden text-left hover:border-[var(--accent)]/50 transition-colors shadow-sm"
+      style={{ width: CARD_W, height: CARD_H }} title="Click to expand">
+      <div className="h-[3px] w-full shrink-0" style={{ background: hx(accent) }} />
+      <div className="flex items-center gap-2 px-3 py-2 shrink-0">
+        <span className="grid place-items-center rounded-lg shrink-0" style={{ width: 24, height: 24, background: tint(accent, '28'), fontSize: 13 }}>{card.icon || '🔧'}</span>
+        <span className="text-[12.5px] font-semibold text-[var(--text-primary)] truncate flex-1">{card.title}</span>
+        <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: statusDot(card.status) }} />
+        <span className="text-[9px] text-[var(--text-secondary)] shrink-0">{running ? '…' : ago(card.lastRunAt)}</span>
+        {card.connectorUrl && <a href={card.connectorUrl} target="_blank" rel="noreferrer" onClick={stop} title="Open connector" className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-[11px]">↗</a>}
+        <span onClick={(e) => { stop(e); onRefresh(); }} title="Refresh" className={`text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-[11px] ${running ? 'opacity-40 pointer-events-none' : ''}`}>⟳</span>
+        <span onClick={(e) => { stop(e); onDelete(); }} title="Delete" className="text-[var(--text-secondary)] hover:text-red-500 text-[11px]">✕</span>
+      </div>
+      <div className="relative flex-1 overflow-hidden px-3 pb-2">
+        {card.lastResult ? <WidgetView spec={card.lastResult} />
+          : card.status === 'error' ? <div className="text-[10px] text-red-500 line-clamp-3">{card.lastError || 'failed'}</div>
+            : <div className="text-[10px] text-[var(--text-secondary)]">{running ? 'Running…' : 'No data yet — click ⟳.'}</div>}
+        <div className="pointer-events-none absolute bottom-0 inset-x-0 h-7 bg-gradient-to-t from-[var(--bg-secondary)] to-transparent" />
+      </div>
+    </button>
+  );
+}
+
+// ─── rich modal (Style B) ─────────────────────────────────
+function CardModal({ card, onClose, onRefresh, onSaved }: {
+  card: KanbanCard; onClose: () => void; onRefresh: () => void; onSaved: () => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [prompt, setPrompt] = useState(card.prompt);
+  const [periodMin, setPeriodMin] = useState(Math.round(card.periodSec / 60));
+  const [execMode, setExecMode] = useState<'inline' | 'task'>(card.execMode);
+  const [saving, setSaving] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const accent = card.lastResult?.accent;
+
+  const [size] = useState<{ w: number; h: number }>(() => {
+    if (typeof window === 'undefined') return { w: 760, h: 680 };
+    try { const s = JSON.parse(localStorage.getItem('forge.kanban.modalSize') || ''); if (s?.w && s?.h) return s; } catch {}
+    return { w: Math.min(760, window.innerWidth - 64), h: Math.min(720, Math.round(window.innerHeight * 0.84)) };
+  });
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  useEffect(() => {
+    const el = panelRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(() => { try { localStorage.setItem('forge.kanban.modalSize', JSON.stringify({ w: el.offsetWidth, h: el.offsetHeight })); } catch {} });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const save = async (thenRun: boolean) => {
+    setSaving(true);
+    await fetch(`/api/kanban?id=${card.id}`, {
+      method: 'PATCH', headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ prompt, periodSec: Math.max(60, periodMin * 60), execMode }),
+    }).catch(() => {});
+    setSaving(false); setEditing(false); onSaved();
+    if (thenRun) onRefresh();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+      <div ref={panelRef} className="flex flex-col rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)] shadow-2xl"
+        style={{ width: size.w, height: size.h, maxWidth: '95vw', maxHeight: '92vh', minWidth: 480, minHeight: 320, resize: 'both', overflow: 'hidden' }}
+        onClick={(e) => e.stopPropagation()}>
+        <div className="h-[3px] w-full shrink-0" style={{ background: hx(accent) }} />
+        <div className="flex items-center gap-2.5 px-4 py-3 border-b border-[var(--border)]">
+          <span className="grid place-items-center rounded-lg" style={{ width: 30, height: 30, background: tint(accent, '28'), fontSize: 16 }}>{card.icon || '🔧'}</span>
+          <span className="text-[15px] font-semibold text-[var(--text-primary)] flex-1 truncate">{card.title}</span>
+          <span className="text-[10px] text-[var(--text-secondary)]">{card.status} · {ago(card.lastRunAt)}</span>
+          {card.connectorUrl && <a href={card.connectorUrl} target="_blank" rel="noreferrer" className="text-[11px] text-[var(--accent)] hover:underline">open ↗</a>}
+          <button onClick={() => onRefresh()} disabled={card.status === 'running'} className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-sm disabled:opacity-40" title="Run now">⟳</button>
+          <button onClick={onClose} className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-sm" title="Close">✕</button>
+        </div>
+
+        <div className="flex-1 overflow-auto p-4">
+          {editing ? (
+            <div className="space-y-3">
+              <div>
+                <label className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">Prompt</label>
+                <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={11}
+                  className="mt-1 w-full text-[12px] rounded-md border border-[var(--border)] bg-[var(--bg-primary)] p-2 font-mono text-[var(--text-primary)] resize-y" />
+              </div>
+              <div className="flex items-center gap-2">
+                <label className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">Refresh every</label>
+                <input type="number" min={1} value={periodMin} onChange={(e) => setPeriodMin(Math.max(1, parseInt(e.target.value || '1', 10)))}
+                  className="w-20 text-[12px] rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 py-1 text-[var(--text-primary)]" />
+                <span className="text-[11px] text-[var(--text-secondary)]">minutes</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <label className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">Run mode</label>
+                <select value={execMode} onChange={(e) => setExecMode(e.target.value as 'inline' | 'task')}
+                  className="text-[12px] rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 py-1 text-[var(--text-primary)]">
+                  <option value="inline">inline — fast (simple cards)</option>
+                  <option value="task">task — heavier, multi-step</option>
+                </select>
+              </div>
+              <div className="flex gap-2 pt-1">
+                <button onClick={() => save(true)} disabled={saving} className="text-[11px] px-3 py-1 rounded-md bg-[var(--accent)] text-white disabled:opacity-50">{saving ? 'Saving…' : 'Save & run'}</button>
+                <button onClick={() => save(false)} disabled={saving} className="text-[11px] px-3 py-1 rounded-md border border-[var(--border)] text-[var(--text-primary)]">Save</button>
+                <button onClick={() => { setEditing(false); setPrompt(card.prompt); setPeriodMin(Math.round(card.periodSec / 60)); setExecMode(card.execMode); }} className="text-[11px] px-3 py-1 rounded-md text-[var(--text-secondary)]">Cancel</button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {card.lastResult ? <WidgetView spec={card.lastResult} rich />
+                : <div className="text-[11px] text-[var(--text-secondary)]">{card.status === 'running' ? 'Running…' : 'No data yet — run it with ⟳.'}</div>}
+              {card.status === 'error' && <div className="text-[10px] text-red-500/80 border-t border-[var(--border)] pt-2">last run failed: {card.lastError}</div>}
+            </div>
+          )}
+        </div>
+
+        {!editing && (
+          <div className="px-4 py-2 border-t border-[var(--border)] flex items-center">
+            <button onClick={() => setEditing(true)} className="text-[11px] text-[var(--accent)] hover:underline">Edit prompt / period</button>
+            <span className="flex-1" />
+            <span className="text-[10px] text-[var(--text-secondary)]">{card.connectorId} · {card.execMode} · every {Math.round(card.periodSec / 60)}m</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── board ────────────────────────────────────────────────
+export default function KanbanBoard() {
+  const [cards, setCards] = useState<KanbanCard[] | null>(null);
+  const [collapsed, setCollapsed] = useState(false);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const scroller = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { try { setCollapsed(localStorage.getItem('forge.kanban.collapsed') === '1'); } catch {} }, []);
+  const toggle = () => setCollapsed((c) => { const n = !c; try { localStorage.setItem('forge.kanban.collapsed', n ? '1' : '0'); } catch {} return n; });
+
+  const load = useCallback(async () => {
+    try { const r = await fetch('/api/kanban'); const j = await r.json(); setCards(Array.isArray(j.cards) ? j.cards : []); }
+    catch { setCards([]); }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+  useEffect(() => { const t = setInterval(() => { if (!collapsed) void load(); }, 15000); return () => clearInterval(t); }, [collapsed, load]);
+
+  const refresh = async (id: string) => {
+    setCards((cs) => cs?.map((c) => c.id === id ? { ...c, status: 'running' } : c) ?? cs);
+    await fetch(`/api/kanban/${id}/run`, { method: 'POST' }).catch(() => {});
+    void load();
+  };
+  const del = async (id: string) => {
+    if (!confirm('Delete this card?')) return;
+    await fetch(`/api/kanban?id=${id}`, { method: 'DELETE' }).catch(() => {});
+    if (openId === id) setOpenId(null);
+    void load();
+  };
+  const seed = async () => { await fetch('/api/kanban/seed', { method: 'POST' }).catch(() => {}); void load(); };
+  const scrollBy = (dx: number) => scroller.current?.scrollBy({ left: dx, behavior: 'smooth' });
+
+  if (cards === null) return null;
+  const open = openId ? cards.find((c) => c.id === openId) || null : null;
+
+  return (
+    <div className="shrink-0 border-b border-[var(--border)] bg-[var(--bg-primary)]">
+      <div className="flex items-center gap-2 px-3 py-1.5">
+        <button onClick={toggle} className="text-[11px] font-medium text-[var(--text-primary)] flex items-center gap-1">
+          <span className="text-[var(--text-secondary)]">{collapsed ? '▸' : '▾'}</span> Kanban
+        </button>
+        <span className="text-[10px] text-[var(--text-secondary)]">{cards.length}</span>
+        <div className="flex-1" />
+        {!collapsed && cards.length > 0 && (
+          <>
+            <button onClick={() => scrollBy(-CARD_W * 2)} title="Scroll left" className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-xs px-1">‹</button>
+            <button onClick={() => scrollBy(CARD_W * 2)} title="Scroll right" className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-xs px-1">›</button>
+          </>
+        )}
+        <button onClick={seed} title="Add default cards from installed connectors" className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1">+ defaults</button>
+      </div>
+
+      {!collapsed && (
+        cards.length === 0 ? (
+          <div className="px-3 pb-2 text-[10px] text-[var(--text-secondary)]">
+            No cards yet. <button onClick={seed} className="text-[var(--accent)] hover:underline">Seed from connectors</button> to auto-create cards.
+          </div>
+        ) : (
+          <div ref={scroller} className="flex gap-3 px-3 pb-3 overflow-x-auto">
+            {cards.map((c) => <Card key={c.id} card={c} onOpen={() => setOpenId(c.id)} onRefresh={() => refresh(c.id)} onDelete={() => del(c.id)} />)}
+          </div>
+        )
+      )}
+
+      {open && <CardModal card={open} onClose={() => setOpenId(null)} onRefresh={() => refresh(open.id)} onSaved={() => load()} />}
+    </div>
+  );
+}

package/lib/chat/agent-loop.ts

@@ -513,7 +513,7 @@ function detectMentionedConnectors(
   return { strong, medium };
 }
 
-function buildConnectorTools(): LlmTool[] {
+export function buildConnectorTools(): LlmTool[] {
   const out: LlmTool[] = [];
   for (const inst of listInstalledConnectors()) {
     if (!inst.enabled) continue;