@aion0/forge 0.10.32 → 0.10.33

package/RELEASE_NOTES.md

@@ -1,11 +1,23 @@
-# Forge v0.10.32
+# Forge v0.10.33
 
 Released: 2026-06-02
 
-## Changes since v0.10.31
+## Changes since v0.10.32
+
+### Documentation
+- docs: update help-docs for activity pill, marketplace, usage move, watch builtins
 
 ### Other
-- fix(watch): builtin pollers return JSON + add get_task_status
+- refactor(marketplace): Pipelines first + default landing
+- refactor(dashboard): move Activity pill next to Automation tab
+- refactor(dashboard): promote Chat (web) + open standalone routes in new tab
+- refactor(dashboard): promote Settings, add icons to user menu rows
+- refactor(dashboard): move Usage into user menu next to Monitor/Login Status
+- refactor(marketplace): split category dropdown by group
+- perf(pipeline-view): invalidate cache after mutations
+- fix(activity): view link uses forge:navigate event
+- perf(pipeline-view): module-level SWR cache for meta + per-workflow runs
+- feat(activity): top-right Activity pill — running pipelines + upcoming schedules
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.31...v0.10.32
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.32...v0.10.33

package/app/api/activity/summary/route.ts

@@ -0,0 +1,135 @@
+/**
+ * GET /api/activity/summary
+ *
+ * Small snapshot for the Activity pill / dashboard. Three sections:
+ *   - running:  pipelines currently in flight (status queued|running)
+ *   - upcoming: enabled schedules sorted by next_run_at ASC
+ *   - recent:   last 8 finished pipelines (succeeded|failed|cancelled)
+ *
+ * Aim <5KB response, <30ms. No expensive joins, no per-pipeline detail.
+ * Front-end refetches every 5s when ActivityPanel is open.
+ */
+
+import { NextResponse } from 'next/server';
+import { listPipelinesSummary } from '@/lib/pipeline';
+import { listSchedules } from '@/lib/schedules/store';
+
+interface RunningRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  currentNode: string | null;
+  progress: { done: number; total: number };
+  createdAt: string;
+}
+
+interface UpcomingRow {
+  id: string;
+  name: string;
+  body_kind: string;
+  body_ref: string;
+  next_run_at: string | null;
+  schedule_kind: string;
+  schedule_summary: string;
+}
+
+interface RecentRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  completedAt: string | null;
+  durationMs: number | null;
+}
+
+interface Summary {
+  running: RunningRow[];
+  upcoming: UpcomingRow[];
+  recent: RecentRow[];
+  generated_at: string;
+}
+
+function scheduleSummary(s: {
+  schedule_kind: string;
+  schedule_interval_minutes: number;
+  schedule_at: string | null;
+  schedule_cron: string | null;
+}): string {
+  switch (s.schedule_kind) {
+    case 'period':
+      return s.schedule_interval_minutes >= 60
+        ? `every ${Math.round(s.schedule_interval_minutes / 60)}h`
+        : `every ${s.schedule_interval_minutes}m`;
+    case 'cron':
+      return `cron: ${s.schedule_cron || '?'}`;
+    case 'once':
+      return s.schedule_at ? `at ${s.schedule_at}` : 'one-shot';
+    case 'manual':
+      return 'manual only';
+    default:
+      return s.schedule_kind;
+  }
+}
+
+export async function GET() {
+  // Single listPipelinesSummary call — uses the parse cache, sorted desc.
+  // 200 runs cap is plenty; we'll filter into running + recent and discard
+  // the rest.
+  const all = listPipelinesSummary({ limit: 200 });
+
+  const running: RunningRow[] = [];
+  const recent: RecentRow[] = [];
+  for (const p of all) {
+    const isActive = p.status === 'running';
+    if (isActive && running.length < 30) {
+      // Compute progress + current node from the in-memory nodes map.
+      let done = 0;
+      let current: string | null = null;
+      for (const name of p.nodeOrder) {
+        const st = p.nodes[name]?.status;
+        if (st === 'done' || st === 'skipped') done++;
+        else if (!current && st === 'running') current = name;
+      }
+      running.push({
+        id: p.id,
+        workflowName: p.workflowName,
+        status: p.status,
+        currentNode: current,
+        progress: { done, total: p.nodeOrder.length },
+        createdAt: p.createdAt,
+      });
+    } else if (!isActive && recent.length < 8) {
+      const startedMs = Date.parse(p.createdAt);
+      const endedMs = p.completedAt ? Date.parse(p.completedAt) : NaN;
+      recent.push({
+        id: p.id,
+        workflowName: p.workflowName,
+        status: p.status,
+        completedAt: p.completedAt || null,
+        durationMs: isFinite(startedMs) && isFinite(endedMs) ? endedMs - startedMs : null,
+      });
+    }
+  }
+
+  // Upcoming = enabled schedules sorted by next_run_at ASC, top 10.
+  const schedules = listSchedules()
+    .filter((s) => s.enabled && s.next_run_at)
+    .sort((a, b) => String(a.next_run_at).localeCompare(String(b.next_run_at)))
+    .slice(0, 10);
+  const upcoming: UpcomingRow[] = schedules.map((s) => ({
+    id: s.id,
+    name: s.name,
+    body_kind: s.body_kind,
+    body_ref: s.body_ref,
+    next_run_at: s.next_run_at,
+    schedule_kind: s.schedule_kind,
+    schedule_summary: scheduleSummary(s),
+  }));
+
+  const summary: Summary = {
+    running,
+    upcoming,
+    recent,
+    generated_at: new Date().toISOString(),
+  };
+  return NextResponse.json(summary);
+}

package/components/ActivityPanel.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface RunningRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  currentNode: string | null;
+  progress: { done: number; total: number };
+  createdAt: string;
+}
+
+interface UpcomingRow {
+  id: string;
+  name: string;
+  body_kind: string;
+  body_ref: string;
+  next_run_at: string | null;
+  schedule_kind: string;
+  schedule_summary: string;
+}
+
+interface RecentRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  completedAt: string | null;
+  durationMs: number | null;
+}
+
+interface Summary {
+  running: RunningRow[];
+  upcoming: UpcomingRow[];
+  recent: RecentRow[];
+  generated_at: string;
+}
+
+const POLL_OPEN_MS = 5000;   // active polling while open
+const POLL_BADGE_MS = 30000; // background polling while closed (just for counts)
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return '';
+  const s = Math.round((Date.now() - Date.parse(iso)) / 1000);
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.round(s / 60)}m ago`;
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+  return `${Math.round(s / 86400)}d ago`;
+}
+
+function timeUntil(iso: string | null): string {
+  if (!iso) return '';
+  const s = Math.round((Date.parse(iso) - Date.now()) / 1000);
+  if (s < 0) return 'overdue';
+  if (s < 60) return `in ${s}s`;
+  if (s < 3600) return `in ${Math.round(s / 60)}m`;
+  if (s < 86400) return `in ${Math.round(s / 3600)}h`;
+  return `in ${Math.round(s / 86400)}d`;
+}
+
+function fmtDuration(ms: number | null): string {
+  if (ms == null) return '';
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms / 60_000)}m`;
+}
+
+function statusGlyph(s: string): string {
+  if (s === 'done') return '✓';
+  if (s === 'failed') return '✗';
+  if (s === 'cancelled') return '⊘';
+  if (s === 'running') return '▶';
+  return s;
+}
+
+function statusColor(s: string): string {
+  if (s === 'done') return 'text-green-500';
+  if (s === 'failed') return 'text-red-400';
+  if (s === 'cancelled') return 'text-gray-400';
+  if (s === 'running') return 'text-blue-400';
+  return 'text-[var(--text-secondary)]';
+}
+
+/**
+ * Activity pill — top-right glanceable status for running pipelines +
+ * upcoming schedules. Click to expand a 3-section dropdown. Polls every
+ * 5s while open, 30s in background for badge counts.
+ */
+export default function ActivityPanel() {
+  const [summary, setSummary] = useState<Summary | null>(null);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  const refetch = useCallback(async () => {
+    try {
+      const r = await fetch('/api/activity/summary');
+      if (!r.ok) return;
+      const j: Summary = await r.json();
+      setSummary(j);
+    } catch { /* network blip — silent */ }
+  }, []);
+
+  // Initial fetch + adaptive polling cadence
+  useEffect(() => {
+    refetch();
+    const ms = open ? POLL_OPEN_MS : POLL_BADGE_MS;
+    const id = setInterval(refetch, ms);
+    return () => clearInterval(id);
+  }, [open, refetch]);
+
+  // Click-outside dismisses
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('mousedown', onClick);
+    return () => window.removeEventListener('mousedown', onClick);
+  }, [open]);
+
+  const runningCount = summary?.running.length ?? 0;
+  const upcomingCount = summary?.upcoming.length ?? 0;
+  const recentFailed = (summary?.recent ?? []).filter((r) => r.status === 'failed').length;
+
+  // Pill chips
+  const chips: string[] = [];
+  if (runningCount) chips.push(`▶${runningCount}`);
+  if (upcomingCount) chips.push(`⏰${upcomingCount}`);
+  if (!chips.length) chips.push('✓');
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className={`text-[10px] px-2 py-0.5 rounded border border-[var(--border)] flex items-center gap-1.5
+          ${runningCount > 0 ? 'text-blue-400 border-blue-500/50' : 'text-[var(--text-secondary)]'}
+          hover:text-[var(--text-primary)]`}
+        title="Activity — running pipelines + upcoming schedules"
+      >
+        <span className="font-medium">{chips.join(' ')}</span>
+        {recentFailed > 0 && (
+          <span className="text-red-400 text-[9px]" title={`${recentFailed} recently failed`}>!{recentFailed}</span>
+        )}
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-1 w-[440px] max-h-[70vh] overflow-y-auto bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {summary === null ? (
+            <div className="p-6 text-center text-xs text-[var(--text-secondary)]">Loading…</div>
+          ) : (
+            <div className="p-3 space-y-4">
+              {/* Running */}
+              <Section title="Running" count={runningCount}>
+                {runningCount === 0 ? (
+                  <Empty>Nothing running.</Empty>
+                ) : (
+                  summary.running.map((r) => (
+                    <div key={r.id} className="flex items-start gap-2 text-xs py-1">
+                      <span className={`${statusColor(r.status)} mt-0.5`}>{statusGlyph(r.status)}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-[var(--text-primary)] font-medium truncate">{r.workflowName}</span>
+                          <span className="text-[10px] text-[var(--text-secondary)]">
+                            {r.progress.done}/{r.progress.total}
+                          </span>
+                          <span className="text-[10px] text-gray-500">{timeAgo(r.createdAt)}</span>
+                        </div>
+                        {r.currentNode && (
+                          <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+                            current: {r.currentNode}
+                          </div>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => {
+                          setOpen(false);
+                          window.dispatchEvent(new CustomEvent('forge:navigate', { detail: { view: 'pipelines', pipelineId: r.id } }));
+                        }}
+                        className="text-[10px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                      >
+                        view
+                      </button>
+                    </div>
+                  ))
+                )}
+              </Section>
+
+              {/* Upcoming */}
+              <Section title="Next up" count={upcomingCount}>
+                {upcomingCount === 0 ? (
+                  <Empty>No enabled schedules.</Empty>
+                ) : (
+                  summary.upcoming.map((u) => (
+                    <div key={u.id} className="flex items-start gap-2 text-xs py-1">
+                      <span className="text-[var(--text-secondary)] mt-0.5">⏰</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-[var(--text-primary)] font-medium truncate">{u.name}</span>
+                          <span className="text-[10px] text-blue-400">{timeUntil(u.next_run_at)}</span>
+                        </div>
+                        <div className="text-[10px] text-[var(--text-secondary)] mt-0.5 truncate">
+                          {u.body_kind}: {u.body_ref} · {u.schedule_summary}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </Section>
+
+              {/* Recent */}
+              <Section title="Recent" count={summary.recent.length}>
+                {summary.recent.length === 0 ? (
+                  <Empty>No recent runs.</Empty>
+                ) : (
+                  summary.recent.map((r) => (
+                    <div key={r.id} className="flex items-start gap-2 text-xs py-1">
+                      <span className={`${statusColor(r.status)} mt-0.5`}>{statusGlyph(r.status)}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-[var(--text-primary)] truncate">{r.workflowName}</span>
+                          <span className="text-[10px] text-[var(--text-secondary)]">
+                            {fmtDuration(r.durationMs)} · {timeAgo(r.completedAt)}
+                          </span>
+                        </div>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setOpen(false);
+                          window.dispatchEvent(new CustomEvent('forge:navigate', { detail: { view: 'pipelines', pipelineId: r.id } }));
+                        }}
+                        className="text-[10px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                      >
+                        view
+                      </button>
+                    </div>
+                  ))
+                )}
+              </Section>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Section({ title, count, children }: { title: string; count: number; children: React.ReactNode }) {
+  return (
+    <div>
+      <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-1 flex items-center gap-2">
+        {title}
+        <span className="text-gray-500 font-normal">({count})</span>
+      </h3>
+      <div className="space-y-0.5">{children}</div>
+    </div>
+  );
+}
+
+function Empty({ children }: { children: React.ReactNode }) {
+  return <div className="text-[10px] text-gray-500 italic py-0.5">{children}</div>;
+}

package/components/Dashboard.tsx

@@ -25,6 +25,7 @@ const NewTaskModal = lazy(() => import('./NewTaskModal'));
 const SettingsModal = lazy(() => import('./SettingsModal'));
 const MonitorPanel = lazy(() => import('./MonitorPanel'));
 const LoginStatusPanel = lazy(() => import('./LoginStatusPanel'));
+const ActivityPanel = lazy(() => import('./ActivityPanel'));
 const WorkspaceView = lazy(() => import('./WorkspaceView'));
 // WorkspaceTree moved into ProjectDetail — no longer needed at Dashboard level
 
@@ -398,6 +399,11 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Automation
             </button>
+            {/* Activity sub-pill — sits next to Automation since its content
+                (running pipelines + upcoming schedules + recent runs) is the
+                live read-side of Automation. Click anywhere → dropdown with
+                3 sections + a "view" jump to the run. */}
+            <Suspense fallback={null}><ActivityPanel /></Suspense>
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
             {/* Marketplace */}
             <button
@@ -465,14 +471,6 @@ export default function Dashboard({ user }: { user: any }) {
               </>
             )}
           </div>
-          <button
-            onClick={() => setViewMode('usage')}
-            className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
-              viewMode === 'usage'
-                ? 'border-[var(--accent)] text-[var(--accent)]'
-                : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
-            }`}
-          >Usage</button>
           <Suspense fallback={null}><TunnelToggle /></Suspense>
           {onlineCount.total > 0 && (
             <span className="text-[10px] text-[var(--text-secondary)] flex items-center gap-1" title={`${onlineCount.total} online${onlineCount.remote > 0 ? `, ${onlineCount.remote} remote` : ''}`}>
@@ -618,52 +616,73 @@ export default function Dashboard({ user }: { user: any }) {
             {showUserMenu && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowUserMenu(false)} />
-                <div className="absolute right-0 top-8 w-[140px] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50 py-1">
+                <div className="absolute right-0 top-8 w-[170px] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50 py-1">
+                  {/* Settings promoted to the top — most-reached item in this
+                      menu. Each row leads with a glyph so it's scannable. */}
+                  <button
+                    onClick={() => { setShowSettings(true); setShowUserMenu(false); }}
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
+                  >
+                    <span className="w-3 text-center">⚙</span><span>Settings</span>
+                  </button>
+                  {/* Chat (web) is a separate route — open in a new tab so
+                      the dashboard isn't replaced. Promoted up here so it's
+                      one of the prominent items, not buried below Logs. */}
+                  <a
+                    href="/chat"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
+                  >
+                    <span className="w-3 text-center">💬</span>
+                    <span className="flex-1">Chat (web)</span>
+                    <span className="text-[9px] text-[var(--text-secondary)]">↗</span>
+                  </a>
+                  <div className="border-t border-[var(--border)] my-1" />
                   <button
                     onClick={() => { setShowMonitor(true); setShowUserMenu(false); }}
-                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    Monitor
+                    <span className="w-3 text-center">📊</span><span>Monitor</span>
                   </button>
                   <button
                     onClick={() => { setShowLoginStatus(true); setShowUserMenu(false); }}
-                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center justify-between"
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    <span>Login Status</span>
+                    <span className="w-3 text-center">🔐</span>
+                    <span className="flex-1">Login Status</span>
                     {loginBadge && loginBadge.broken > 0 && (
-                      <span className="text-[9px] text-red-400">🔴 {loginBadge.broken}/{loginBadge.total}</span>
+                      <span className="text-[9px] text-red-400">{loginBadge.broken}/{loginBadge.total}</span>
                     )}
                   </button>
                   <button
-                    onClick={() => { setShowSettings(true); setShowUserMenu(false); }}
-                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                    onClick={() => { setViewMode('usage'); setShowUserMenu(false); }}
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    Settings
+                    <span className="w-3 text-center">💰</span><span>Usage</span>
                   </button>
                   <button
                     onClick={() => { setViewMode('logs'); setShowUserMenu(false); }}
-                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    Logs
+                    <span className="w-3 text-center">📜</span><span>Logs</span>
                   </button>
-                  <a
-                    href="/chat"
-                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
-                  >
-                    Chat (web)
-                  </a>
                   <a
                     href="/mobile"
-                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    Mobile View
+                    <span className="w-3 text-center">📱</span>
+                    <span className="flex-1">Mobile View</span>
+                    <span className="text-[9px] text-[var(--text-secondary)]">↗</span>
                   </a>
                   <div className="border-t border-[var(--border)] my-1" />
                   <button
                     onClick={() => signOut({ callbackUrl: '/login' })}
-                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--red)] hover:bg-[var(--bg-tertiary)]"
+                    className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--red)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
                   >
-                    Logout
+                    <span className="w-3 text-center">⏻</span><span>Logout</span>
                   </button>
                 </div>
               </>

package/components/PipelineView.tsx

@@ -7,6 +7,42 @@ import type { TaskLogEntry } from '@/src/types';
 const PipelineEditor = lazy(() => import('./PipelineEditor'));
 const ConversationEditor = lazy(() => import('./ConversationEditor'));
 
+// ─── Module-level SWR cache ──────────────────────────────
+// Survives tab switches (but not page refresh). On mount we hydrate
+// state from cache instantly if present (<30s old) and revalidate in
+// the background. Eliminates the "blank then slow load" feeling when
+// users switch away and come back to this tab. Cache is per-component-
+// module — entries are flushed when the page reloads.
+const _metaCache: { ts: number; workflows: any[]; projects: any[]; agents: any[] } | null = null as any;
+const _runsCache = new Map<string, { ts: number; runs: any[] }>();
+const META_TTL_MS = 30_000;
+const RUNS_TTL_MS = 15_000;
+let _metaCacheRef: typeof _metaCache = _metaCache;
+
+function readMetaCache() {
+  if (_metaCacheRef && Date.now() - _metaCacheRef.ts < META_TTL_MS) return _metaCacheRef;
+  return null;
+}
+function writeMetaCache(workflows: any[], projects: any[], agents: any[]) {
+  _metaCacheRef = { ts: Date.now(), workflows, projects, agents };
+}
+function readRunsCache(workflow: string) {
+  const c = _runsCache.get(workflow);
+  if (c && Date.now() - c.ts < RUNS_TTL_MS) return c;
+  return null;
+}
+function writeRunsCache(workflow: string, runs: any[]) {
+  _runsCache.set(workflow, { ts: Date.now(), runs });
+}
+// Invalidate after user mutations (delete/import/reinstall) so the next
+// fetchMeta/fetchWorkflowRuns doesn't hydrate stale UI from cache while
+// the live refetch is in flight.
+function clearMetaCache() { _metaCacheRef = null; }
+function clearRunsCache(workflow?: string) {
+  if (workflow) _runsCache.delete(workflow);
+  else _runsCache.clear();
+}
+
 // ─── Live Task Log Hook ──────────────────────────────────
 // Subscribes to SSE stream for a running task, returns live log entries
 function useTaskStream(taskId: string | undefined, isRunning: boolean) {
@@ -698,6 +734,7 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
       });
       const data = await res.json();
       if (!data.ok) { setMarketErr(data.error || 'install failed'); return; }
+      clearMetaCache();
       await Promise.all([fetchMarketplace(), fetchData()]);
     } catch (e) {
       setMarketErr(e instanceof Error ? e.message : String(e));
@@ -743,25 +780,52 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
   // Lightweight metadata only — no pipeline runs. Runs are lazy-loaded
   // per-workflow on click. Reduces initial page to a single workflow
   // table fetch + projects + agents, even with hundreds of runs on disk.
+  //
+  // SWR pattern: if module-level cache is fresh, hydrate UI instantly
+  // and revalidate in background. First visit per page-load still pays
+  // the full fetch cost; tab switches feel instant.
   const fetchMeta = useCallback(async () => {
+    const cached = readMetaCache();
+    if (cached) {
+      setWorkflows(cached.workflows);
+      setProjects(cached.projects.map((p: any) => ({ name: p.name, path: p.path })));
+      setAgents(cached.agents);
+      // Fall through to background refetch — comment out to make TTL strict.
+    }
     const [wRes, projRes, agentRes] = await Promise.all([
       fetch('/api/pipelines?type=workflows'),
       fetch('/api/projects'),
       fetch('/api/agents'),
     ]);
     const [wData, projData, agentData] = await Promise.all([wRes.json(), projRes.json(), agentRes.json()]);
-    if (Array.isArray(wData)) setWorkflows(wData);
-    if (Array.isArray(projData)) setProjects(projData.map((p: any) => ({ name: p.name, path: p.path })));
-    if (Array.isArray(agentData?.agents)) setAgents(agentData.agents);
+    const ws = Array.isArray(wData) ? wData : [];
+    const ps = Array.isArray(projData) ? projData : [];
+    const ags = Array.isArray(agentData?.agents) ? agentData.agents : [];
+    if (ws.length) setWorkflows(ws);
+    if (ps.length) setProjects(ps.map((p: any) => ({ name: p.name, path: p.path })));
+    if (ags.length) setAgents(ags);
+    writeMetaCache(ws, ps, ags);
   }, []);
 
   // Fetch the run history for ONE workflow. Used on first expand + on
   // the 5s polling tick (only for the currently active workflow).
   const fetchWorkflowRuns = useCallback(async (workflowName: string, opts: { append?: boolean } = {}) => {
+    // SWR for the first expand of a workflow tab (not for append=true
+    // "load more" calls, those want fresh server pagination).
+    if (!opts.append) {
+      const cached = readRunsCache(workflowName);
+      if (cached) {
+        setPipelines((prev) => {
+          const others = prev.filter((p) => p.workflowName !== workflowName);
+          return [...others, ...cached.runs];
+        });
+      }
+    }
     try {
       const res = await fetch(`/api/pipelines?workflow=${encodeURIComponent(workflowName)}&limit=100`);
       const data: Pipeline[] = await res.json();
       if (!Array.isArray(data)) return;
+      if (!opts.append) writeRunsCache(workflowName, data);
       setPipelines(prev => {
         if (!opts.append) {
           // Replace this workflow's runs (covers status changes during polling),
@@ -890,6 +954,8 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
       body: JSON.stringify({ action: 'delete' }),
     });
     if (selectedPipeline?.id === id) setSelectedPipeline(null);
+    const wf = pipelines.find((p) => p.id === id)?.workflowName;
+    clearRunsCache(wf);
     fetchData();
   };
 
@@ -1015,6 +1081,8 @@ initial_prompt: "{{input.task}}"
                               });
                               const data = await res.json();
                               if (!data.ok) { setMarketErr(data.error || 'reinstall failed'); return; }
+                              clearMetaCache();
+                              clearRunsCache(r.name);
                               await Promise.all([fetchMarketplace(), fetchData()]);
                               alert(`"${r.name}" reinstalled from registry (v${r.version}).`);
                             } catch (e) {
@@ -1052,6 +1120,7 @@ initial_prompt: "{{input.task}}"
                             });
                             const data = await res.json();
                             if (!data.ok) { setMarketErr(data.error || 'import failed'); return; }
+                            clearMetaCache();
                             await Promise.all([fetchMarketplace(), fetchData()]);
                             alert(`Imported as "${data.installed_as}". Open it from the Workflows list.`);
                           } catch (e) {
@@ -1287,6 +1356,8 @@ initial_prompt: "{{input.task}}"
                           const data = await res.json();
                           if (!res.ok || data.error) { alert(`Delete failed: ${data.error || res.status}`); return; }
                           if (activeWorkflow === w.name) setActiveWorkflow(null);
+                          clearMetaCache();
+                          clearRunsCache(w.name);
                           fetchData();
                         } catch { alert('Delete failed'); }
                       }}

package/components/SkillsPanel.tsx

@@ -142,7 +142,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
   const [syncing, setSyncing] = useState(false);
   const [loading, setLoading] = useState(true);
   const [installTarget, setInstallTarget] = useState<{ skill: string; show: boolean }>({ skill: '', show: false });
-  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins' | 'connectors' | 'crafts' | 'recipes' | 'pipelines'>('all');
+  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins' | 'connectors' | 'crafts' | 'recipes' | 'pipelines'>('pipelines');
   const [localItems, setLocalItems] = useState<{ name: string; type: string; scope: string; fileCount: number; projectPath?: string }[]>([]);
   // Rules (CLAUDE.md templates)
   const [rulesTemplates, setRulesTemplates] = useState<{ id: string; name: string; description: string; tags: string[]; builtin: boolean; isDefault: boolean; content: string }[]>([]);
@@ -414,30 +414,65 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
       <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] shrink-0">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-[var(--text-primary)]">Marketplace</span>
-          {/* Grouped category dropdown — replaces the long inline tab bar.
-              Native <optgroup> gives free keyboard nav + a coherent layout
-              regardless of category count. */}
-          <select
-            value={typeFilter}
-            onChange={(e) => setTypeFilter(e.target.value as typeof typeFilter)}
-            className="text-[10px] px-2 py-1 rounded bg-[var(--bg-tertiary)] border border-[var(--border)] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
-          >
-            <optgroup label="Catalog">
-              <option value="all">All ({skills.length})</option>
-              <option value="skill">Skills ({skillCount})</option>
-              <option value="command">Commands ({commandCount})</option>
-              <option value="local">Local ({localCount})</option>
-              <option value="rules">Rules</option>
-            </optgroup>
-            <optgroup label="Extensions">
-              <option value="plugins">Plugins</option>
-              <option value="connectors">Connectors</option>
-              <option value="crafts">Crafts</option>
-            </optgroup>
-            <optgroup label="Templates">
-              <option value="pipelines">Pipelines</option>
-            </optgroup>
-          </select>
+          {/* Three group-scoped dropdowns instead of one big <select>.
+              Order is by usage frequency: Extensions (Connectors lives
+              here) → Templates → Catalog. Each dropdown highlights when
+              its current value is active; the inactive ones show the
+              group label as a placeholder. Picking from any sets the
+              single global typeFilter. */}
+          {(() => {
+            const groups: Array<{ label: string; opts: Array<{ value: typeof typeFilter; label: string }> }> = [
+              { label: 'Templates', opts: [
+                { value: 'pipelines',  label: 'Pipelines' },
+              ]},
+              { label: 'Extensions', opts: [
+                { value: 'connectors', label: 'Connectors' },
+                { value: 'plugins',    label: 'Plugins' },
+                { value: 'crafts',     label: 'Crafts' },
+              ]},
+              { label: 'Catalog', opts: [
+                { value: 'all',     label: `All (${skills.length})` },
+                { value: 'skill',   label: `Skills (${skillCount})` },
+                { value: 'command', label: `Commands (${commandCount})` },
+                { value: 'local',   label: `Local (${localCount})` },
+                { value: 'rules',   label: 'Rules' },
+              ]},
+            ];
+            return groups.map((g) => {
+              const isActive = g.opts.some((o) => o.value === typeFilter);
+              if (g.opts.length === 1) {
+                const only = g.opts[0];
+                return (
+                  <button
+                    key={g.label}
+                    onClick={() => setTypeFilter(only.value)}
+                    className={`text-[10px] px-2 py-1 rounded border ${
+                      isActive
+                        ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/10'
+                        : 'border-[var(--border)] text-[var(--text-primary)] bg-[var(--bg-tertiary)] hover:border-[var(--text-secondary)]'
+                    }`}
+                  >{only.label}</button>
+                );
+              }
+              return (
+                <select
+                  key={g.label}
+                  value={isActive ? (typeFilter as string) : ''}
+                  onChange={(e) => { if (e.target.value) setTypeFilter(e.target.value as typeof typeFilter); }}
+                  className={`text-[10px] px-2 py-1 rounded bg-[var(--bg-tertiary)] border focus:outline-none ${
+                    isActive
+                      ? 'border-[var(--accent)] text-[var(--accent)]'
+                      : 'border-[var(--border)] text-[var(--text-primary)] focus:border-[var(--accent)]'
+                  }`}
+                >
+                  <option value="" disabled hidden>{g.label}</option>
+                  {g.opts.map((o) => (
+                    <option key={o.value} value={o.value as string}>{o.label}</option>
+                  ))}
+                </select>
+              );
+            });
+          })()}
         </div>
         <span className="text-[8px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">Claude Code</span>
         <input

package/lib/help-docs/00-overview.md

@@ -57,3 +57,17 @@ forge server start --port 4000  # custom port
 forge server start --dir ~/.forge-test  # custom data dir
 forge --reset-password          # reset admin password
 ```
+
+## Dashboard top bar
+
+The top toolbar is split between **at-a-glance signals** (left to right) and a **user menu** (right edge):
+
+- **? Help** — opens the in-app Help AI.
+- **Browser ▾** — open an embedded browser (float / right / left dock or external tab).
+- **Tunnel** — start/stop the Cloudflare tunnel + online-count badge.
+- **Alerts** — notifications (task done, pipeline failed, tunnel events).
+
+Next to the **Automation** tab in the left-side nav sits a small **Activity** sub-pill — running pipelines + upcoming schedules + recent runs (`▶<running>` `⏰<upcoming>`). Click for a 3-section dropdown with a "view" link that jumps to the run. It lives there because its content is the live read-side of Automation.
+- **User menu (▾)** — `⚙ Settings` + `💬 Chat (web) ↗` at the top (Chat opens in a new tab so the dashboard isn't replaced); then a divider, then the periodic-check screens `📊 Monitor` (background watches, processes, queues), `🔐 Login Status` (connector creds), `💰 Usage` (token/cost analytics), `📜 Logs`, `📱 Mobile View ↗`; then `⏻ Logout`.
+
+Periodic-check screens (Monitor / Login Status / Usage) live inside the user menu so the top bar only shows things worth glancing at.

package/lib/help-docs/06-skills.md

@@ -16,11 +16,21 @@ Both register as `/slash-command` in Claude Code.
 
 ## Install
 
-1. Go to **Skills** tab in Forge
+1. Go to **Marketplace** tab in Forge
 2. Click **Sync** to fetch latest registry
 3. Click **Install** on any skill → choose Global or specific project
 4. Use in Claude Code with `/<skill-name>`
 
+## Navigating the Marketplace
+
+The toolbar has three group-scoped controls, ordered by usage frequency. Opening the Marketplace tab lands on **Pipelines** by default — the highest-traffic category.
+
+- **Pipelines** (button) — Templates synced from `forge-workflow`. Default landing view.
+- **Extensions ▾** — Connectors / Plugins / Crafts
+- **Catalog ▾** — All / Skills / Commands / Local / Rules
+
+The control whose value is currently active highlights in the accent color; the other two show their group label as a placeholder. Click any option to switch — no need to traverse a single long dropdown.
+
 ## Update
 
 Skills with newer versions show a yellow "update" indicator. Click to update (checks for local modifications first).

package/lib/help-docs/12-usage.md

@@ -4,7 +4,7 @@ Forge tracks Claude API token usage and estimated costs across all your projects
 
 ## Access
 
-Click **Usage** in the Dashboard top navigation.
+Open the **user menu** (top-right `▾`) and click **Usage**. It sits next to Monitor and Login Status — the three periodic-check screens are grouped there so the top toolbar only carries at-a-glance signals.
 
 ## Data Source
 

package/lib/help-docs/24-watch.md

@@ -47,25 +47,50 @@ Both use the same background machinery; you experience them identically.
 ## `start_watch` (for the assistant)
 
 When you've just started a long job and have a tool that reports its
-status, register a watch instead of polling in the conversation:
+status, register a watch instead of polling in the conversation. Two
+poll forms are accepted:
+
+**1. Connector tool** — `"<connector>.<tool>"`, e.g. `jenkins.get_build`:
 
 ```
 start_watch({
-  poll: "jenkins.get_build",                       // <connector>.<status tool>
+  poll: "jenkins.get_build",
   poll_args: { job_path: "job/foo", build_number: 18 },
-  done_match: { path: "result", equals: "SUCCESS" },  // or done_path (truthy)
+  done_match: { path: "result", equals: "SUCCESS" },
   interval_sec: 60, timeout_sec: 1800,
-  message: "Build 18 finished: {poll.result}"      // {poll.<path>} = latest result
+  message: "Build 18 finished: {poll.result}"
+})
+```
+
+**2. Bare builtin name** — Forge's own status readers:
+
+| Builtin | Pair with | done condition |
+|---|---|---|
+| `get_pipeline_status` | `trigger_pipeline` → pipeline_id | `done_match={path:"status",equals:"done"}` (or `done_path:"terminal"`) |
+| `get_task_status` | `dispatch_task` → task_id | `done_path:"terminal"` |
+
+```
+start_watch({
+  poll: "get_pipeline_status",                   // bare builtin, no prefix
+  poll_args: { pipeline_id: "a8e049a3" },
+  done_path: "terminal",
+  message: "Pipeline {poll.workflowName} finished: {poll.status}"
 })
 ```
 
-Then **stop** — do not keep calling get_build in the conversation. A
-completion message arrives in chat; the user can cancel it from the watch
-list. Pick `done_match`/`done_path` from a field you saw in the status
-tool's output (you usually called it once already). Queue/startup errors
-(e.g. a build number 404 while still queued) are tolerated for a while.
-Guards (max polls, timeout, lifetime, active cap) keep it from running
-away; worst case it times out and reports that.
+Then **stop** — do not keep calling the status tool in the conversation.
+A completion message arrives in chat; the user can cancel it from the
+watch list. Pick `done_match`/`done_path` from a field you saw in the
+status tool's output (you usually called it once already). Queue/startup
+errors (e.g. a build number 404 while still queued) are tolerated for a
+while. Guards (max polls, timeout, lifetime, active cap) keep it from
+running away; worst case it times out and reports that.
+
+### `_raw` fallback for non-JSON tools
+
+The poll result is parsed as JSON. If the tool returns plain text (some
+shell-protocol tools), Forge wraps it as `{_raw: "...full output..."}`
+so you can still grep — e.g. `done_match={path:"_raw",contains:"DONE"}`.
 
 ## Limits
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aion0/forge",
-  "version": "0.10.32",
+  "version": "0.10.33",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {