@aion0/forge 0.10.20 → 0.10.23

package/RELEASE_NOTES.md

@@ -1,8 +1,26 @@
-# Forge v0.10.20
+# Forge v0.10.23
 
-Released: 2026-05-31
+Released: 2026-06-01
 
-## Changes since v0.10.19
+## Changes since v0.10.22
 
+### Features
+- feat: long-task watch — lightweight async background tool-call primitive for chat
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.19...v0.10.20
+### Documentation
+- docs: mark watch backend implemented on feat/watch
+
+### Other
+- fix(chat): cap tool_result at 16k chars — oversized result (e.g. full test tree) no longer blows the history budget → orphan strip → empty messages → provider 'messages must not be empty'; + clear-error guard if history is ever empty
+- feat(dashboard): expandable Alerts/notifications — click a row to see full title+body (was truncated, no way to read in full); auto-marks read on expand
+- docs(help): add 24-watch.md (background watches: async block + start_watch, where to see/cancel) + index/routing
+- feat(watch): start_watch builtin — LLM-driven dynamic watch (poll/done/interval), coexists with declarative async blocks
+- feat(chat): show per-message timestamp in /chat (time-of-day, or date+time if older)
+- docs(watch): document terminal watch_status → immediate chip removal (prune is fallback)
+- fix(watch): emit terminal watch_status on finish so the progress chip clears immediately (was lingering until 150s prune)
+- feat(watch): Background Watches section in MonitorPanel (list + cancel/delete)
+- fix(watch): pre-resolve {args.*}/{result.*}/{settings.*} in watch messages at register time
+- feat(watch): /chat UI — ambient progress chip (watch_status) + Background watches panel (list/cancel/delete); help doc for async block
+
+
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.22...v0.10.23

package/app/api/connectors/route.ts

@@ -65,7 +65,7 @@ function deriveModeLabel(entries: ConnectorEntry[]): 'server-side' | 'browser-si
     }
   }
   if (ps.size === 0) return 'browser-side';
-  const allServer = [...ps].every((p) => p === 'http' || p === 'shell');
+  const allServer = [...ps].every((p) => p === 'http' || p === 'shell' || p === 'ssh');
   const allBrowser = [...ps].every((p) => p === 'browser');
   return allServer ? 'server-side' : allBrowser ? 'browser-side' : 'mixed';
 }

package/app/api/watches/[id]/route.ts

@@ -0,0 +1,25 @@
+/**
+ * POST   /api/watches/:id   { action: "cancel" } — stop an active watch.
+ * DELETE /api/watches/:id   — remove the row.
+ *
+ * Writes go to workflow.db; the runner (chat-standalone) reads state each
+ * tick, so a cancel here takes effect within one tick without IPC.
+ */
+import { NextResponse } from 'next/server';
+import { cancelWatch, deleteWatch, getWatch } from '@/lib/watch/watch-store';
+
+export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const body = await req.json().catch(() => ({}));
+  const action = String(body?.action || 'cancel');
+  if (action !== 'cancel') return NextResponse.json({ error: `unknown action "${action}"` }, { status: 400 });
+  if (!getWatch(id)) return NextResponse.json({ error: 'watch not found' }, { status: 404 });
+  const ok = cancelWatch(id, Date.now());
+  return NextResponse.json({ ok, watch: getWatch(id) });
+}
+
+export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const ok = deleteWatch(id);
+  return NextResponse.json({ ok });
+}

package/app/api/watches/route.ts

@@ -0,0 +1,17 @@
+/**
+ * GET /api/watches — list background long-task watches (active first,
+ * then recent terminal). Read-only management surface for the watch
+ * runner that lives in chat-standalone; both share workflow.db.
+ */
+import { NextResponse } from 'next/server';
+import { listWatches } from '@/lib/watch/watch-store';
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const limit = Math.min(200, Math.max(1, Number(url.searchParams.get('limit')) || 50));
+  try {
+    return NextResponse.json({ watches: listWatches(limit) });
+  } catch (e) {
+    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
+  }
+}

package/app/chat/page.tsx

@@ -21,6 +21,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import MarkdownContent from '@/components/MarkdownContent';
+import WatchesPanel from '@/components/WatchesPanel';
 import type { ContentBlock, Message, Session } from '@/lib/chat/types';
 
 const PROXY = '/api/chat-proxy';
@@ -46,6 +47,9 @@ export default function ChatPage() {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [activeId, setActiveId] = useState<string>('');
   const [messages, setMessages] = useState<Message[]>([]);
+  // Background-watch progress chips (watch_id → {text, ts}). Ambient,
+  // updated in place; pruned when stale. Not part of the message thread.
+  const [watchChips, setWatchChips] = useState<Record<string, { text: string; ts: number }>>({});
   const [input, setInput] = useState('');
   const [streaming, setStreaming] = useState(false);
   const [partial, setPartial] = useState('');
@@ -129,6 +133,18 @@ export default function ChatPage() {
         setPartial('');
         loadMessages(activeId);
         refreshSessions();
+      } else if (type === 'watch_status') {
+        // Ambient background-watch progress — a chip that updates in
+        // place, NOT a chat message (doesn't touch the thread / LLM).
+        // A terminal status (done/non-active) drops the chip at once.
+        const wid = String(data.watch_id || '');
+        if (wid) {
+          const terminal = !!data.done || (data.state && data.state !== 'active');
+          setWatchChips((c) => {
+            if (terminal) { const n = { ...c }; delete n[wid]; return n; }
+            return { ...c, [wid]: { text: String(data.text || ''), ts: Date.now() } };
+          });
+        }
       } else if (type === 'error') {
         setStreaming(false);
         setError(String(data.error || 'unknown error'));
@@ -145,6 +161,22 @@ export default function ChatPage() {
     if (el) el.scrollTop = el.scrollHeight;
   }, [messages, partial]);
 
+  // ─── Prune stale watch chips (no update in >150s = done/gone) ──
+  useEffect(() => {
+    const t = setInterval(() => {
+      setWatchChips((c) => {
+        const now = Date.now();
+        const next: typeof c = {};
+        let changed = false;
+        for (const [k, v] of Object.entries(c)) {
+          if (now - v.ts < 150_000) next[k] = v; else changed = true;
+        }
+        return changed ? next : c;
+      });
+    }, 30_000);
+    return () => clearInterval(t);
+  }, []);
+
   // ─── Auto-resize composer ─────────────────────────────────
   useEffect(() => {
     const el = composerRef.current;
@@ -282,6 +314,8 @@ export default function ChatPage() {
           })}
         </div>
 
+        <WatchesPanel />
+
         <div className="px-4 py-3 border-t border-[var(--border)] text-xs text-[var(--text-secondary)] space-y-1">
           <button
             type="button"
@@ -369,6 +403,23 @@ export default function ChatPage() {
           </div>
         </div>
 
+        {Object.keys(watchChips).length > 0 && (
+          <div className="px-6 pt-2">
+            <div className="max-w-3xl mx-auto flex flex-wrap gap-2">
+              {Object.entries(watchChips).map(([id, w]) => (
+                <span
+                  key={id}
+                  title={id}
+                  className="inline-flex items-center gap-1.5 text-xs rounded-full border border-[var(--border)] bg-[var(--bg-secondary)] px-3 py-1 text-[var(--text-secondary)]"
+                >
+                  <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+                  {w.text}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
         <form
           className="border-t border-[var(--border)] px-6 py-4"
           onSubmit={(e) => { e.preventDefault(); send(); }}
@@ -411,7 +462,17 @@ export default function ChatPage() {
 
 // ─── Message renderers ────────────────────────────────────
 
-function RoleBlock({ role, children }: { role: 'user' | 'assistant'; children: React.ReactNode }) {
+function fmtTs(ts?: number): string {
+  if (!ts) return '';
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return '';
+  const now = new Date();
+  const sameDay = d.toDateString() === now.toDateString();
+  const time = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return sameDay ? time : `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })} ${time}`;
+}
+
+function RoleBlock({ role, ts, children }: { role: 'user' | 'assistant'; ts?: number; children: React.ReactNode }) {
   const isUser = role === 'user';
   return (
     <div className="flex gap-4">
@@ -426,8 +487,9 @@ function RoleBlock({ role, children }: { role: 'user' | 'assistant'; children: R
         {isUser ? 'U' : 'AI'}
       </div>
       <div className="flex-1 min-w-0">
-        <div className="text-[11px] uppercase tracking-wide text-[var(--text-secondary)] mb-1">
-          {role}
+        <div className="flex items-baseline gap-2 mb-1">
+          <span className="text-[11px] uppercase tracking-wide text-[var(--text-secondary)]">{role}</span>
+          {ts ? <span className="text-[10px] text-[var(--text-secondary)] opacity-60">{fmtTs(ts)}</span> : null}
         </div>
         <div className="space-y-2">{children}</div>
       </div>
@@ -437,7 +499,7 @@ function RoleBlock({ role, children }: { role: 'user' | 'assistant'; children: R
 
 function MessageView({ m }: { m: Message }) {
   return (
-    <RoleBlock role={m.role}>
+    <RoleBlock role={m.role} ts={m.ts}>
       {m.blocks.map((b, i) => (
         <BlockView key={i} b={b} />
       ))}

package/components/Dashboard.tsx

@@ -141,6 +141,7 @@ export default function Dashboard({ user }: { user: any }) {
   const [notifications, setNotifications] = useState<any[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
   const [showNotifications, setShowNotifications] = useState(false);
+  const [expandedNotif, setExpandedNotif] = useState<string | null>(null);
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [theme, setTheme] = useState<'dark' | 'light'>('dark');
   const [displayName, setDisplayName] = useState(user?.name || 'Forge');
@@ -511,10 +512,23 @@ export default function Dashboard({ user }: { user: any }) {
                   {notifications.length === 0 ? (
                     <div className="p-6 text-center text-xs text-[var(--text-secondary)]">No notifications</div>
                   ) : (
-                    notifications.map((n: any) => (
+                    notifications.map((n: any) => {
+                      const expanded = expandedNotif === n.id;
+                      return (
                       <div
                         key={n.id}
-                        className={`group px-3 py-2 border-b border-[var(--border)]/50 hover:bg-[var(--bg-tertiary)] ${!n.read ? 'bg-[var(--accent)]/5' : ''}`}
+                        onClick={async () => {
+                          setExpandedNotif(expanded ? null : n.id);
+                          if (!expanded && !n.read) {
+                            await fetch('/api/notifications', {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ action: 'markRead', id: n.id }),
+                            });
+                            fetchNotifications();
+                          }
+                        }}
+                        className={`group px-3 py-2 border-b border-[var(--border)]/50 hover:bg-[var(--bg-tertiary)] cursor-pointer ${!n.read ? 'bg-[var(--accent)]/5' : ''}`}
                       >
                         <div className="flex items-start gap-2">
                           <span className="text-[10px] mt-0.5 shrink-0">
@@ -522,16 +536,17 @@ export default function Dashboard({ user }: { user: any }) {
                           </span>
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-1">
-                              <span className={`text-[11px] truncate ${!n.read ? 'font-semibold text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'}`}>
+                              <span className={`text-[11px] ${expanded ? 'break-words whitespace-pre-wrap' : 'truncate'} ${!n.read ? 'font-semibold text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'}`}>
                                 {n.title}
                               </span>
                               {!n.read && <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] shrink-0" />}
                             </div>
                             {n.body && (
-                              <p className="text-[9px] text-[var(--text-secondary)] truncate mt-0.5">{n.body}</p>
+                              <p className={`text-[9px] text-[var(--text-secondary)] mt-0.5 ${expanded ? 'break-words whitespace-pre-wrap' : 'truncate'}`}>{n.body}</p>
                             )}
                             <span className="text-[8px] text-[var(--text-secondary)]">
                               {new Date(n.createdAt).toLocaleString()}
+                              <span className="ml-1 opacity-50">· {expanded ? 'click to collapse' : 'click for detail'}</span>
                             </span>
                           </div>
                           <div className="hidden group-hover:flex items-center gap-1 shrink-0">
@@ -568,7 +583,8 @@ export default function Dashboard({ user }: { user: any }) {
                           </div>
                         </div>
                       </div>
-                    ))
+                      );
+                    })
                   )}
                 </div>
               </div>

package/components/MonitorPanel.tsx

@@ -157,6 +157,9 @@ export default function MonitorPanel({ onClose }: { onClose: () => void }) {
                 </div>
               )}
             </div>
+
+            {/* Background watches — long-task pollers (nac upgrade etc.) */}
+            <MonitorWatches />
           </div>
         ) : (
           <div className="p-8 text-center text-xs text-[var(--text-secondary)]">Loading...</div>
@@ -165,3 +168,88 @@ export default function MonitorPanel({ onClose }: { onClose: () => void }) {
     </div>
   );
 }
+
+// ─── Background watches ────────────────────────────────────
+// Long-task pollers registered by `async` connector tools (e.g. nac
+// upgrade → poll get_version until the build matches). Same data as the
+// /chat panel; lives here so it's visible alongside the other running
+// background resources. Reads /api/watches; cancel/delete per [id].
+
+interface WatchRow {
+  id: string;
+  label: string;
+  state: 'active' | 'done' | 'failed' | 'timed_out' | 'cancelled' | 'errored';
+  polls: number;
+  max_polls: number;
+  last_text: string | null;
+}
+
+const WATCH_STATE_COLOR: Record<string, string> = {
+  active: 'text-amber-400',
+  done: 'text-green-400',
+  failed: 'text-red-400',
+  timed_out: 'text-red-400',
+  errored: 'text-red-400',
+  cancelled: 'text-[var(--text-secondary)]',
+};
+
+function MonitorWatches() {
+  const [watches, setWatches] = useState<WatchRow[]>([]);
+  const load = useCallback(() => {
+    fetch('/api/watches?limit=30')
+      .then(r => r.json())
+      .then(j => setWatches(Array.isArray(j.watches) ? j.watches : []))
+      .catch(() => {});
+  }, []);
+  useEffect(() => {
+    load();
+    const t = setInterval(load, 10_000);
+    return () => clearInterval(t);
+  }, [load]);
+
+  const act = async (id: string, method: 'POST' | 'DELETE') => {
+    try {
+      await fetch(`/api/watches/${id}`, {
+        method,
+        ...(method === 'POST'
+          ? { headers: { 'content-type': 'application/json' }, body: JSON.stringify({ action: 'cancel' }) }
+          : {}),
+      });
+    } catch { /* ignore */ }
+    load();
+  };
+
+  const activeCount = watches.filter(w => w.state === 'active').length;
+
+  return (
+    <div>
+      <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">
+        Background Watches ({activeCount} active)
+      </h3>
+      {watches.length === 0 ? (
+        <div className="text-[10px] text-[var(--text-secondary)]">No watches</div>
+      ) : (
+        <div className="space-y-1.5">
+          {watches.map(w => (
+            <div key={w.id} className="rounded border border-[var(--border)] px-2 py-1.5">
+              <div className="flex items-center gap-2 text-[11px]">
+                <span className={`text-[9px] uppercase tracking-wide ${WATCH_STATE_COLOR[w.state] || ''}`}>{w.state}</span>
+                <span className="font-mono text-[var(--text-primary)] truncate flex-1" title={w.label}>{w.label}</span>
+                <span className="text-[9px] text-[var(--text-secondary)]">{w.polls}/{w.max_polls}</span>
+              </div>
+              {w.last_text && (
+                <div className="text-[9px] text-[var(--text-secondary)] truncate mt-0.5" title={w.last_text}>{w.last_text}</div>
+              )}
+              <div className="flex gap-2 mt-1">
+                {w.state === 'active' && (
+                  <button type="button" onClick={() => act(w.id, 'POST')} className="text-[9px] text-amber-400 hover:underline">cancel</button>
+                )}
+                <button type="button" onClick={() => act(w.id, 'DELETE')} className="text-[9px] text-[var(--text-secondary)] hover:underline">delete</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/WatchesPanel.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+/**
+ * Background-watch management — a compact list of long-task watches with
+ * cancel/delete. Reads GET /api/watches; cancel/delete via the [id] route.
+ * Lives in the /chat sidebar so users can see and rein in background
+ * pollers (avoid runaway / resource hogging). Pure backend otherwise —
+ * the watch runner lives in chat-standalone.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+
+interface Watch {
+  id: string;
+  label: string;
+  state: 'active' | 'done' | 'failed' | 'timed_out' | 'cancelled' | 'errored';
+  polls: number;
+  max_polls: number;
+  last_text: string | null;
+  updated_at: number;
+}
+
+const STATE_COLOR: Record<string, string> = {
+  active: 'text-amber-400',
+  done: 'text-green-400',
+  failed: 'text-red-400',
+  timed_out: 'text-red-400',
+  errored: 'text-red-400',
+  cancelled: 'text-[var(--text-secondary)]',
+};
+
+export default function WatchesPanel() {
+  const [watches, setWatches] = useState<Watch[]>([]);
+  const [open, setOpen] = useState(false);
+
+  const load = useCallback(() => {
+    fetch('/api/watches?limit=30')
+      .then((r) => r.json())
+      .then((j) => setWatches(Array.isArray(j.watches) ? j.watches : []))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    load();
+    const t = setInterval(load, 10_000);
+    return () => clearInterval(t);
+  }, [load]);
+
+  const act = async (id: string, method: 'POST' | 'DELETE') => {
+    try {
+      await fetch(`/api/watches/${id}`, {
+        method,
+        ...(method === 'POST' ? { headers: { 'content-type': 'application/json' }, body: JSON.stringify({ action: 'cancel' }) } : {}),
+      });
+    } catch { /* ignore */ }
+    load();
+  };
+
+  const activeCount = watches.filter((w) => w.state === 'active').length;
+  if (watches.length === 0) return null;
+
+  return (
+    <div className="px-4 py-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-2 w-full text-left hover:text-[var(--text-primary)] transition-colors"
+      >
+        <span>Background watches</span>
+        {activeCount > 0 && (
+          <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+        )}
+        <span className="ml-auto text-[10px] opacity-60">{activeCount} active · {open ? '▾' : '▸'}</span>
+      </button>
+      {open && (
+        <div className="mt-1.5 space-y-1.5 max-h-56 overflow-y-auto">
+          {watches.map((w) => (
+            <div key={w.id} className="rounded border border-[var(--border)] px-2 py-1.5">
+              <div className="flex items-center gap-2">
+                <span className={`text-[10px] uppercase tracking-wide ${STATE_COLOR[w.state] || ''}`}>{w.state}</span>
+                <span className="truncate font-medium text-[var(--text-primary)]" title={w.label}>{w.label}</span>
+                <span className="ml-auto text-[10px] opacity-60">{w.polls}/{w.max_polls}</span>
+              </div>
+              {w.last_text && <div className="text-[10px] opacity-70 truncate mt-0.5" title={w.last_text}>{w.last_text}</div>}
+              <div className="flex gap-2 mt-1">
+                {w.state === 'active' && (
+                  <button type="button" onClick={() => act(w.id, 'POST')} className="text-[10px] text-amber-400 hover:underline">cancel</button>
+                )}
+                <button type="button" onClick={() => act(w.id, 'DELETE')} className="text-[10px] opacity-60 hover:opacity-100 hover:underline">delete</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}