@aion0/forge 0.8.5 → 0.8.6

package/RELEASE_NOTES.md

@@ -1,8 +1,8 @@
-# Forge v0.8.5
+# Forge v0.8.6
 
-Released: 2026-05-20
+Released: 2026-05-21
 
-## Changes since v0.8.4
+## Changes since v0.8.5
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.8.4...v0.8.5
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.8.5...v0.8.6

package/app/api/agents/route.ts

@@ -11,7 +11,17 @@ export async function GET(req: Request) {
     return NextResponse.json(info);
   }
 
-  const agents = listAgents();
+  // ?include=cli|api|all (default: cli) — API profiles aren't useful in
+  // Terminal / Task / Pipeline pickers (no CLI binary to spawn), so the
+  // default hides them. WorkspaceView's API mode passes ?include=all
+  // (or ?include=api) to surface them when needed.
+  const include = (url.searchParams.get('include') || 'cli').toLowerCase();
+  const all = listAgents();
+  const agents = include === 'all'
+    ? all
+    : include === 'api'
+      ? all.filter((a: any) => a.backendType === 'api')
+      : all.filter((a: any) => a.backendType !== 'api');
   const defaultAgent = getDefaultAgentId();
   return NextResponse.json({ agents, defaultAgent });
 }

package/app/api/jobs/preview/route.ts

@@ -46,6 +46,48 @@ function pickPath(obj: unknown, path: string): unknown {
   return cur;
 }
 
+/**
+ * Guess the right items_path purely from the response shape, so the UI
+ * can offer it even when the user left the field blank (or set it wrong).
+ *   - top-level array            → ''                      (scheduler iterates directly)
+ *   - object with exactly one array-valued key → that key
+ *   - object with several array-valued keys    → prefer common names
+ *   - top-level single object    → ''                      (scheduler wraps as 1-item)
+ */
+function suggestItemsPath(parsed: unknown): string | null {
+  if (Array.isArray(parsed)) return '';
+  if (parsed && typeof parsed === 'object') {
+    const obj = parsed as Record<string, unknown>;
+    const arrayKeys = Object.entries(obj).filter(([, v]) => Array.isArray(v)).map(([k]) => k);
+    if (arrayKeys.length === 0) return '';
+    // Only suggest a non-empty items_path when one of the keys looks
+    // like a *list payload* name. Otherwise this is probably a detail
+    // object (e.g. mantis.get_bug returns {id, summary, ..., history,
+    // notes}) — `history` is an internal array, not the items list.
+    // For detail responses, empty items_path → scheduler wraps the
+    // single object as a 1-item list.
+    const common = ['items', 'data', 'results', 'records', 'bugs', 'issues', 'merge_requests', 'mrs', 'projects', 'pipelines'];
+    for (const name of common) if (arrayKeys.includes(name)) return name;
+    return '';
+  }
+  return null;
+}
+
+/**
+ * Pick the most-likely unique-identifier key from the sample item.
+ * Order matches what users typically expect, with `iid` (GitLab project-scoped
+ * issue/MR id) preferred over the global `id` when both exist.
+ */
+function suggestDedupField(itemKeys: string[]): string | null {
+  // Prefer the globally-unique `id` over GitLab's project-scoped `iid`
+  // so dedup remains safe if a job ever spans multiple projects.
+  const priority = ['id', 'iid', 'key', 'uuid', 'global_id', 'guid', 'sha', 'commit_id'];
+  for (const p of priority) if (itemKeys.includes(p)) return p;
+  const trailingId = itemKeys.find((k) => /_id$/i.test(k));
+  if (trailingId) return trailingId;
+  return null;
+}
+
 /**
  * Best-effort match a workflow input name to a key on the sample item.
  * The mantis case (bug_id ← id, base_branch ← nothing) drove this list:
@@ -109,11 +151,10 @@ export async function POST(req: Request) {
   const callName = `${source_connector}.${source_tool}`;
   let toolResult;
   try {
-    toolResult = await dispatchTool({
-      id: `jobs-preview-${Date.now()}`,
-      name: callName,
-      input: source_input || {},
-    });
+    toolResult = await dispatchTool(
+      { id: `jobs-preview-${Date.now()}`, name: callName, input: source_input || {} },
+      { noTruncation: true },
+    );
   } catch (e) {
     return NextResponse.json({ ok: false, error: `connector call threw: ${(e as Error).message}` }, { status: 500 });
   }
@@ -136,6 +177,11 @@ export async function POST(req: Request) {
     }, { status: 200 });
   }
 
+  // Always compute the shape-based items_path suggestion — UI offers it
+  // both on success ("you may also want this") and on failure ("apply
+  // this and retry"), so the user never has to guess.
+  const suggestedItemsPath = suggestItemsPath(parsed);
+
   let items = pickPath(parsed, items_path || '');
   // Same single-object-as-1-item-list logic as the scheduler, so the
   // preview matches what runtime will see.
@@ -152,6 +198,7 @@ export async function POST(req: Request) {
         ? `items_path resolved to an empty array — no sample item available`
         : `items_path "${items_path || '(empty)'}" did not resolve to an array or object`,
       top_level_keys: topKeys,
+      suggested_items_path: suggestedItemsPath,
     }, { status: 200 });
   }
 
@@ -188,6 +235,8 @@ export async function POST(req: Request) {
     sample_item: sampleItem,
     item_keys: itemKeys,
     suggested_template: suggestedTemplate,
+    suggested_items_path: suggestedItemsPath,
+    suggested_dedup_field: suggestDedupField(itemKeys),
     total_items: items.length,
   });
 }

package/app/api/jobs/recipes/route.ts

@@ -0,0 +1,59 @@
+/**
+ * /api/jobs/recipes
+ *
+ *   GET                              — list installed recipes
+ *   GET ?name=<name>                 — fetch a single recipe (UI form metadata)
+ *   POST   { action: 'instantiate',  name, params }   — create Job from recipe
+ *   POST   { action: 'upload',       yaml }            — save a user-supplied recipe yaml
+ *   POST   { action: 'delete',       name }            — delete a recipe file
+ */
+
+import { NextResponse } from 'next/server';
+import {
+  listRecipes,
+  getRecipe,
+  saveRecipeYaml,
+  deleteRecipe,
+  instantiateRecipe,
+} from '@/lib/jobs/recipes';
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const name = searchParams.get('name');
+  if (name) {
+    const r = getRecipe(name);
+    if (!r) return NextResponse.json({ error: 'not found' }, { status: 404 });
+    return NextResponse.json({ recipe: r });
+  }
+  return NextResponse.json({ recipes: listRecipes() });
+}
+
+export async function POST(req: Request) {
+  let body: any;
+  try { body = await req.json(); }
+  catch { return NextResponse.json({ ok: false, error: 'invalid JSON body' }, { status: 400 }); }
+  const action = body?.action;
+
+  if (action === 'instantiate') {
+    if (!body.name) return NextResponse.json({ ok: false, error: 'name required' }, { status: 400 });
+    const r = instantiateRecipe(body.name, body.params || {});
+    if (!r.ok) return NextResponse.json(r, { status: 400 });
+    return NextResponse.json(r);
+  }
+
+  if (action === 'upload') {
+    if (typeof body.yaml !== 'string' || !body.yaml.trim()) {
+      return NextResponse.json({ ok: false, error: 'yaml required' }, { status: 400 });
+    }
+    const r = saveRecipeYaml(body.yaml);
+    return NextResponse.json(r, { status: r.ok ? 200 : 400 });
+  }
+
+  if (action === 'delete') {
+    if (!body.name) return NextResponse.json({ ok: false, error: 'name required' }, { status: 400 });
+    const ok = deleteRecipe(body.name);
+    return NextResponse.json({ ok }, { status: ok ? 200 : 404 });
+  }
+
+  return NextResponse.json({ ok: false, error: 'unknown action' }, { status: 400 });
+}

package/app/api/workflows/marketplace/route.ts

@@ -0,0 +1,52 @@
+/**
+ * /api/workflows/marketplace
+ *
+ *   GET                      — list registry + installed recipes/pipelines (merged)
+ *   POST { action: 'sync' }                     — pull registry.json from forge-workflow
+ *   POST { action: 'install',   kind, name }    — download yaml → save to local dir
+ *   POST { action: 'uninstall', kind, name }    — remove the local yaml file
+ *
+ * `kind` is "recipe" | "pipeline". Built-in pipelines are protected
+ * elsewhere (lib/workflow-marketplace.ts excludes them from `installed`,
+ * and the pipelines delete-workflow route rejects them).
+ */
+
+import { NextResponse } from 'next/server';
+import {
+  syncMarketplace,
+  listMarketplace,
+  installFromMarketplace,
+  uninstallFromMarketplace,
+  type WorkflowKind,
+} from '@/lib/workflow-marketplace';
+
+export async function GET() {
+  return NextResponse.json(listMarketplace());
+}
+
+export async function POST(req: Request) {
+  let body: any;
+  try { body = await req.json(); }
+  catch { return NextResponse.json({ ok: false, error: 'invalid JSON body' }, { status: 400 }); }
+  const action = body?.action;
+
+  if (action === 'sync') {
+    const r = await syncMarketplace();
+    return NextResponse.json(r, { status: r.ok ? 200 : 502 });
+  }
+
+  if (action === 'install' || action === 'uninstall') {
+    const kind = body.kind as WorkflowKind;
+    const name = body.name;
+    if (kind !== 'recipe' && kind !== 'pipeline') {
+      return NextResponse.json({ ok: false, error: 'kind must be "recipe" or "pipeline"' }, { status: 400 });
+    }
+    if (!name) return NextResponse.json({ ok: false, error: 'name required' }, { status: 400 });
+    const r = action === 'install'
+      ? await installFromMarketplace(kind, name, { target_name: body.target_name, overwrite: !!body.overwrite })
+      : uninstallFromMarketplace(kind, name);
+    return NextResponse.json(r, { status: r.ok ? 200 : 400 });
+  }
+
+  return NextResponse.json({ ok: false, error: 'unknown action' }, { status: 400 });
+}

package/bin/forge-server.mjs

@@ -145,6 +145,27 @@ if (!isStop) {
     console.warn('[forge] Install Codex:        https://github.com/openai/codex#installation');
     console.warn('[forge] Or configure API-only profiles in Settings after login.');
   }
+
+  // ── Optional helpers used by built-in workflows (mr-review-fix etc.).
+  // Warn-only: Forge starts fine without them, but specific Jobs/Pipelines
+  // will fail at the shell node if they're missing — better to flag here.
+  const optional = [
+    { bin: 'jq',   used: 'shell pipelines that parse JSON output' },
+    { bin: 'glab', used: 'GitLab MR review / mr-review-fix workflow' },
+  ];
+  const missing = optional.filter((o) => !has(o.bin));
+  if (missing.length) {
+    console.warn(`[forge] ⚠️  Optional CLIs missing: ${missing.map((m) => m.bin).join(', ')}`);
+    for (const m of missing) console.warn(`[forge]    - ${m.bin}: used by ${m.used}`);
+    if (process.platform === 'darwin') {
+      console.warn(`[forge] Install with: brew install ${missing.map((m) => m.bin).join(' ')}`);
+    } else if (process.platform === 'linux') {
+      console.warn('[forge] Install via your distro\'s package manager.');
+      if (missing.some((m) => m.bin === 'glab')) {
+        console.warn('[forge]    glab: see https://gitlab.com/gitlab-org/cli#installation');
+      }
+    }
+  }
 }
 
 // ── Load <data-dir>/.env.local ──

package/components/PipelineView.tsx

@@ -459,6 +459,70 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
   const [editorIsConversation, setEditorIsConversation] = useState(false);
   const [showImport, setShowImport] = useState(false);
   const [importYaml, setImportYaml] = useState('');
+  const importFileRef = useRef<HTMLInputElement | null>(null);
+
+  // Marketplace state — pull pipeline templates from the configured
+  // workflowRepoUrl (default: aiwatching/forge-workflow). Stays collapsed
+  // until the user clicks the header button.
+  type MarketRow = {
+    kind: 'pipeline'; name: string; display_name: string; description?: string;
+    version: string; author?: string; tags?: string[];
+    source: 'registry' | 'local'; installed: boolean;
+    installed_version?: string; has_update?: boolean;
+  };
+  const [showMarketplace, setShowMarketplace] = useState(false);
+  const [marketRows, setMarketRows] = useState<MarketRow[] | null>(null);
+  const [marketBusy, setMarketBusy] = useState(false);
+  const [marketErr, setMarketErr] = useState<string>('');
+
+  async function fetchMarketplace() {
+    try {
+      const res = await fetch('/api/workflows/marketplace');
+      const data = await res.json();
+      setMarketRows((data.pipelines || []) as MarketRow[]);
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+      setMarketRows([]);
+    }
+  }
+
+  async function syncMarketplace() {
+    setMarketBusy(true);
+    setMarketErr('');
+    try {
+      const res = await fetch('/api/workflows/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sync' }),
+      });
+      const data = await res.json();
+      if (!data.ok) setMarketErr(data.error || 'sync failed');
+      await fetchMarketplace();
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMarketBusy(false);
+    }
+  }
+
+  async function installFromMarketplace(name: string) {
+    setMarketBusy(true);
+    setMarketErr('');
+    try {
+      const res = await fetch('/api/workflows/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'install', kind: 'pipeline', name }),
+      });
+      const data = await res.json();
+      if (!data.ok) { setMarketErr(data.error || 'install failed'); return; }
+      await Promise.all([fetchMarketplace(), fetchData()]);
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMarketBusy(false);
+    }
+  }
   const [agents, setAgents] = useState<{ id: string; name: string; detected?: boolean }[]>([]);
 
   // "Load older runs" state, per-workflow. The initial /api/pipelines fetch
@@ -694,19 +758,155 @@ initial_prompt: "{{input.task}}"
             onClick={() => { setImportYaml(generateConversationTemplate()); setShowImport(true); }}
             className="text-[9px] text-purple-400 hover:underline"
           >+ Conversation</button>
+          <button
+            onClick={() => {
+              const next = !showMarketplace;
+              setShowMarketplace(next);
+              if (next && marketRows == null) void fetchMarketplace();
+            }}
+            className="text-[9px] text-blue-400 hover:underline"
+            title="Import a workflow from the marketplace as a new local copy"
+          >+ From marketplace</button>
         </div>
 
+        {/* Marketplace import — each pipeline in the registry can be
+            cloned to as many local copies as you want, each with a
+            unique name. The local copy is fully independent of the
+            upstream — edits don't propagate either way. */}
+        {showMarketplace && (
+          <div className="p-3 border-b border-[var(--border)] space-y-2">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-[10px] font-semibold text-[var(--text-secondary)] flex-1">
+                Pipelines from forge-workflow
+              </span>
+              <button
+                onClick={() => void syncMarketplace()}
+                disabled={marketBusy}
+                className="text-[9px] px-2 py-0.5 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:text-[var(--text-primary)] disabled:opacity-50"
+              >{marketBusy ? '…' : 'Sync'}</button>
+            </div>
+            {marketRows == null ? (
+              <div className="text-[10px] text-[var(--text-secondary)]">Loading…</div>
+            ) : marketRows.length === 0 ? (
+              <div className="text-[10px] text-[var(--text-secondary)]">
+                Nothing yet — click <b>Sync</b> to pull the registry.
+              </div>
+            ) : (
+              <div className="space-y-1.5 max-h-80 overflow-y-auto">
+                {marketRows.map((r) => (
+                  <div key={r.name} className="border border-[var(--border)]/60 rounded p-2 bg-[var(--bg-tertiary)]/40">
+                    <div className="flex items-baseline gap-1.5">
+                      <span className="text-[10px] font-semibold text-[var(--text-primary)] truncate flex-1">{r.display_name}</span>
+                      <span className="text-[8px] text-[var(--text-secondary)] font-mono">v{r.version}</span>
+                      {r.installed && (
+                        <span className="text-[8px] text-[var(--green)]">installed</span>
+                      )}
+                      {r.installed && (
+                        <button
+                          onClick={async () => {
+                            if (!confirm(`Reinstall "${r.name}" from registry (v${r.version})?\n\nThis OVERWRITES your local copy at ~/.forge/data/flows/${r.name}.yaml — any local edits will be lost.`)) return;
+                            setMarketBusy(true);
+                            setMarketErr('');
+                            try {
+                              const res = await fetch('/api/workflows/marketplace', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ action: 'install', kind: 'pipeline', name: r.name, target_name: r.name, overwrite: true }),
+                              });
+                              const data = await res.json();
+                              if (!data.ok) { setMarketErr(data.error || 'reinstall failed'); return; }
+                              await Promise.all([fetchMarketplace(), fetchData()]);
+                              alert(`"${r.name}" reinstalled from registry (v${r.version}).`);
+                            } catch (e) {
+                              setMarketErr(e instanceof Error ? e.message : String(e));
+                            } finally { setMarketBusy(false); }
+                          }}
+                          disabled={marketBusy}
+                          className="text-[8px] px-2 py-0.5 border border-[var(--yellow)] text-[var(--yellow)] rounded hover:bg-[var(--yellow)] hover:text-black disabled:opacity-50"
+                          title="Overwrite the local copy with the latest from registry"
+                        >Reinstall</button>
+                      )}
+                      <button
+                        onClick={async () => {
+                          const installed = r.installed;
+                          const defaultName = installed ? `${r.name}-2` : r.name;
+                          const localName = window.prompt(
+                            installed
+                              ? `"${r.name}" is already installed locally. Pick a NEW name for an additional copy (or click Reinstall to overwrite):`
+                              : `Create a local copy of "${r.name}". Pick a name for your copy:`,
+                            defaultName,
+                          );
+                          if (!localName) return;
+                          const trimmed = localName.trim();
+                          if (!/^[a-z0-9][a-z0-9_-]*$/.test(trimmed)) {
+                            alert('Name must be lowercase alphanumerics + hyphens/underscores');
+                            return;
+                          }
+                          setMarketBusy(true);
+                          setMarketErr('');
+                          try {
+                            const res = await fetch('/api/workflows/marketplace', {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ action: 'install', kind: 'pipeline', name: r.name, target_name: trimmed }),
+                            });
+                            const data = await res.json();
+                            if (!data.ok) { setMarketErr(data.error || 'import failed'); return; }
+                            await Promise.all([fetchMarketplace(), fetchData()]);
+                            alert(`Imported as "${data.installed_as}". Open it from the Workflows list.`);
+                          } catch (e) {
+                            setMarketErr(e instanceof Error ? e.message : String(e));
+                          } finally { setMarketBusy(false); }
+                        }}
+                        disabled={marketBusy}
+                        className="text-[8px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-50"
+                      >{r.installed ? 'Import as new copy…' : 'Import as…'}</button>
+                    </div>
+                    {r.description && (
+                      <p className="text-[9px] text-[var(--text-secondary)] mt-1 line-clamp-3">{r.description}</p>
+                    )}
+                    {r.tags && r.tags.length > 0 && (
+                      <div className="text-[8px] text-[var(--text-secondary)] mt-1">
+                        {r.tags.map((t) => `#${t}`).join(' ')}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+            {marketErr && (
+              <div className="text-[10px] text-[var(--red)]">{marketErr}</div>
+            )}
+          </div>
+        )}
+
         {/* Import form */}
         {showImport && (
           <div className="p-3 border-b border-[var(--border)] space-y-2">
+            <input
+              ref={importFileRef}
+              type="file"
+              accept=".yaml,.yml"
+              className="hidden"
+              onChange={(e) => {
+                const f = e.target.files?.[0];
+                e.target.value = '';
+                if (!f) return;
+                f.text().then(setImportYaml).catch(() => alert('Failed to read file'));
+              }}
+            />
             <textarea
               value={importYaml}
               onChange={e => setImportYaml(e.target.value)}
-              placeholder="Paste YAML workflow here..."
+              placeholder="Paste YAML workflow here, or pick a .yaml file →"
               className="w-full h-40 text-xs font-mono bg-[var(--bg-tertiary)] border border-[var(--border)] rounded p-2 text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)]"
               spellCheck={false}
             />
             <div className="flex gap-2">
+              <button
+                onClick={() => importFileRef.current?.click()}
+                className="text-[10px] px-3 py-1 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:text-[var(--text-primary)]"
+              >Pick file…</button>
               <button
                 onClick={async () => {
                   if (!importYaml.trim()) return;
@@ -850,6 +1050,45 @@ initial_prompt: "{{input.task}}"
                     className="text-[8px] text-green-400 hover:underline shrink-0"
                     title={w.builtin ? 'View YAML' : 'Edit'}
                   >{w.builtin ? 'View' : 'Edit'}</button>
+                  <button
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      try {
+                        const res = await fetch(`/api/pipelines?type=workflow-yaml&name=${encodeURIComponent(w.name)}`);
+                        const data = await res.json();
+                        if (!data.yaml) { alert('Failed to load yaml'); return; }
+                        // Trigger a file download — share = send this .yaml file.
+                        const blob = new Blob([data.yaml], { type: 'application/x-yaml' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url; a.download = `${w.name}.yaml`; a.click();
+                        URL.revokeObjectURL(url);
+                      } catch { alert('Export failed'); }
+                    }}
+                    className="text-[8px] text-blue-400 hover:underline shrink-0"
+                    title="Download YAML to share"
+                  >Export</button>
+                  {!w.builtin && (
+                    <button
+                      onClick={async (e) => {
+                        e.stopPropagation();
+                        if (!confirm(`Delete workflow "${w.name}"? This removes the .yaml file from disk.`)) return;
+                        try {
+                          const res = await fetch('/api/pipelines', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ action: 'delete-workflow', name: w.name }),
+                          });
+                          const data = await res.json();
+                          if (!res.ok || data.error) { alert(`Delete failed: ${data.error || res.status}`); return; }
+                          if (activeWorkflow === w.name) setActiveWorkflow(null);
+                          fetchData();
+                        } catch { alert('Delete failed'); }
+                      }}
+                      className="text-[8px] text-[var(--red)] hover:underline shrink-0"
+                      title="Delete this user workflow"
+                    >Del</button>
+                  )}
                 </div>
                 {/* Execution history for this workflow */}
                 {isActive && (() => {
@@ -1018,11 +1257,15 @@ initial_prompt: "{{input.task}}"
                 Started: {new Date(selectedPipeline.createdAt).toLocaleString()}
                 {selectedPipeline.completedAt && ` · Completed: ${new Date(selectedPipeline.completedAt).toLocaleString()}`}
               </div>
-              {Object.keys(selectedPipeline.input).length > 0 && (
-                <div className="text-[9px] text-[var(--text-secondary)] mt-1">
-                  Input: {Object.entries(selectedPipeline.input).map(([k, v]) => `${k}="${v}"`).join(', ')}
-                </div>
-              )}
+              {Object.keys(selectedPipeline.input).length > 0 && (() => {
+                const inputStr = Object.entries(selectedPipeline.input).map(([k, v]) => `${k}="${v}"`).join(', ');
+                return (
+                  <div
+                    className="text-[9px] text-[var(--text-secondary)] mt-1 max-h-20 overflow-y-auto whitespace-pre-wrap break-words"
+                    title={inputStr}
+                  >Input: {inputStr}</div>
+                );
+              })()}
             </div>
 
             {/* Conversation or DAG visualization */}
@@ -1088,7 +1331,12 @@ initial_prompt: "{{input.task}}"
                     >{w.builtin ? 'View YAML' : 'Edit'}</button>
                   </div>
                 </div>
-                {w.description && <p className="text-[10px] text-[var(--text-secondary)] mt-1">{w.description}</p>}
+                {w.description && (
+                  <p
+                    className="text-[10px] text-[var(--text-secondary)] mt-1 max-h-20 overflow-y-auto whitespace-pre-wrap break-words"
+                    title={w.description}
+                  >{w.description}</p>
+                )}
                 {Object.keys(w.input).length > 0 && (
                   <div className="mt-2 flex flex-wrap gap-1">
                     {Object.entries(w.input).map(([k, v]) => (