pi-feats 0.1.2 → 0.1.4

package/extensions/lib/workflow-harness.ts

@@ -0,0 +1,238 @@
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { DatabaseSync } from "node:sqlite";
+import { AsyncLocalStorage } from "node:async_hooks";
+/** Session ownership and execution gates. Prompts explain state; these gates enforce it. */
+export function workflowHarness(host: ExtensionAPI, db: DatabaseSync) {
+    db.exec("PRAGMA busy_timeout = 5000");
+    if (!(db.prepare("PRAGMA table_info(workflows)").all() as any[]).some(c => c.name === "session_id")) {
+        db.exec("ALTER TABLE workflows ADD COLUMN session_id TEXT");
+    }
+    db.exec(`CREATE INDEX IF NOT EXISTS workflow_session_idx ON workflows(session_id);
+    CREATE TABLE IF NOT EXISTS workflow_focus (session_id TEXT PRIMARY KEY, stack TEXT NOT NULL);
+    CREATE TABLE IF NOT EXISTS workflow_collect_checkpoint (task_id INTEGER PRIMARY KEY REFERENCES workflow_tasks(id), user_entry_id TEXT);`);
+    const context = new AsyncLocalStorage<ExtensionContext>();
+    const session = () => {
+        const id = context.getStore()?.sessionManager.getSessionId();
+        if (!id)
+            throw new Error("Workflow operations require a session context.");
+        return id;
+    };
+    const row = (id: number) => db.prepare("SELECT * FROM workflows WHERE id = ?").get(id) as any;
+    const task = (id: number) => db.prepare("SELECT * FROM workflow_tasks WHERE workflow_id = ? AND status NOT IN ('accepted', 'failed') ORDER BY position LIMIT 1").get(id) as any;
+    const active = (w: any) => w && ["running", "awaiting_user", "evaluating"].includes(w.status);
+    const save = (stack: number[]) => db.prepare("INSERT INTO workflow_focus VALUES (?, ?) ON CONFLICT(session_id) DO UPDATE SET stack=excluded.stack").run(session(), JSON.stringify(stack));
+    const stack = (): number[] => {
+        const saved = db.prepare("SELECT stack FROM workflow_focus WHERE session_id = ?").get(session()) as any;
+        return (saved ? JSON.parse(saved.stack) : []).filter((id: number) => {
+            const w = row(id);
+            return active(w) && w.session_id === session();
+        });
+    };
+    const focus = () => stack().at(-1);
+    const own = (id: number) => {
+        const w = row(id);
+        if (!w || w.session_id !== session())
+            throw new Error("Workflow does not belong to this session. Use /workflow-adopt explicitly to transfer a workflow tree.");
+        return w;
+    };
+    const userEntry = () => context.getStore()!.sessionManager.getBranch().filter((e: any) => e.type === "message" && e.message.role === "user").at(-1)?.id ?? null;
+    const checkpoint = () => {
+        const id = focus();
+        const t = id ? task(id) : undefined;
+        if (t?.type === "collect" && t.status === "awaiting_user")
+            db.prepare("INSERT OR IGNORE INTO workflow_collect_checkpoint VALUES (?, ?)").run(t.id, userEntry());
+    };
+    let queue: Promise<unknown> = Promise.resolve();
+    const transaction = <T>(ctx: ExtensionContext, work: () => Promise<T> | T): Promise<T> => {
+        const next = queue.then(() => context.run(ctx, async () => {
+            db.exec("BEGIN IMMEDIATE");
+            try {
+                const result = await work();
+                save(stack());
+                checkpoint();
+                db.exec("COMMIT");
+                return result;
+            }
+            catch (error) {
+                db.exec("ROLLBACK");
+                throw error;
+            }
+        }));
+        queue = next.catch(() => undefined);
+        return next;
+    };
+    let namedFailure = false;
+    const assertOperation = (name: string, params: any) => {
+        if (namedFailure && (name === "sequential_workflow_create" || name.endsWith("create_from_template")))
+            throw new Error("Named activation failed; a new user request is required before creating a replacement.");
+        if (params.workflowId !== undefined && name !== "sequential_workflow_cancel")
+            own(params.workflowId);
+        if (name.endsWith("record_result") || name.endsWith("evaluate")) {
+            if (focus() !== params.workflowId)
+                throw new Error("Only the focused workflow can advance. Use /workflow-focus explicitly.");
+            const t = task(params.workflowId);
+            if (!t || t.id !== params.taskId)
+                throw new Error("Stale or incorrect taskId; inspect the current task.");
+            if (name.endsWith("record_result") && t.type === "collect") {
+                const saved = db.prepare("SELECT user_entry_id FROM workflow_collect_checkpoint WHERE task_id = ?").get(t.id) as any;
+                if (!saved || !userEntry() || saved.user_entry_id === userEntry())
+                    throw new Error("Collect requires a new user response after activation.");
+            }
+        }
+        if (name === "sequential_workflow_create" || name.endsWith("create_from_template")) {
+            if (params.parentWorkflowId !== undefined)
+                own(params.parentWorkflowId);
+            if (params.parentTaskId !== undefined) {
+                const t = db.prepare("SELECT * FROM workflow_tasks WHERE id = ?").get(params.parentTaskId) as any;
+                if (!t || own(t.workflow_id).id !== focus() || task(t.workflow_id)?.id !== t.id)
+                    throw new Error("Child must belong to the current focused task.");
+            }
+            else if (focus() !== undefined)
+                throw new Error("Suspend the current workflow with /workflow-suspend before creating an independent execution.");
+        }
+    };
+    const tools = new Map<string, any>();
+    const api = new Proxy(host, { get(target, key) {
+            if (key !== "registerTool")
+                return Reflect.get(target, key);
+            return (definition: any) => {
+                const wrapped = { ...definition, async execute(id: string, params: any, signal: any, update: any, ctx: ExtensionContext) {
+                        return transaction(ctx, async () => {
+                            assertOperation(definition.name, params);
+                            const result = await definition.execute(id, params, signal, update, ctx);
+                            if (definition.name === "sequential_workflow_create" || definition.name.endsWith("create_from_template")) {
+                                save([...stack(), result.details.workflowId]);
+                            }
+                            return result;
+                        });
+                    } };
+                tools.set(definition.name, wrapped);
+                host.registerTool(wrapped);
+            };
+        } });
+    let namedActivation = false;
+    host.on("before_agent_start", (_event, ctx) => context.run(ctx, () => {
+        if (!namedActivation)
+            return;
+        namedActivation = false;
+        const id = focus();
+        const t = id ? task(id) : undefined;
+        if (t?.type === "collect")
+            db.prepare("UPDATE workflow_collect_checkpoint SET user_entry_id=? WHERE task_id=?").run(userEntry(), t.id);
+    }));
+    // Named activation is resolved before the model can invent a replacement plan.
+    host.on("input", async (event, ctx) => {
+        namedFailure = false;
+        const match = event.text.trim().match(/^(?:ative|execute|inicie|activate|run|start)\s+(?:(?:o|the)\s+)?sequential[ -]workflow\s+([\w.-]+)\s*$/i);
+        if (!match)
+            return;
+        try {
+            const result = await tools.get("sequential_workflow_create_from_template").execute("named-start", { path: match[1] }, undefined, undefined, ctx);
+            namedActivation = true;
+            return { action: "transform" as const, text: `${event.text}\n${result.content[0].text}\nThe named template was executed by the harness. Do not create another workflow; follow its current task.` };
+        }
+        catch (error) {
+            namedFailure = true;
+            ctx.ui.notify(String(error), "error");
+            return { action: "transform" as const, text: `${event.text}\nNamed workflow activation failed: ${String(error)}. Report the failure; do not invent a substitute workflow.` };
+        }
+    });
+    let continuationKey = "";
+    let continuations = 0;
+    host.on("input", (event) => { if (event.source !== "extension")
+        continuations = 0; });
+    host.on("agent_end", (event, ctx) => context.run(ctx, () => {
+        const last = event.messages.filter(m => m.role === "assistant").at(-1);
+        if (last?.role === "assistant" && ["aborted", "error"].includes(last.stopReason))
+            return;
+        const id = focus();
+        const t = id ? task(id) : undefined;
+        if (!t || t.status === "awaiting_user" || t.status === "waiting_subworkflow")
+            return;
+        const key = `${session()}:${id}:${t.id}:${t.status}:${t.attempts}`;
+        if (key !== continuationKey) {
+            continuationKey = key;
+            continuations = 0;
+        }
+        if (continuations++ >= 2) {
+            ctx.ui.notify("Workflow remains pending: automatic continuation limit reached. Inspect the current task before resuming.", "warning");
+            return;
+        }
+        host.sendMessage({ customType: "sequential-workflow-state", display: false, content: `Workflow ${id}, task ${t.id} is still ${t.status}. Complete the current phase and record its transition; do not claim workflow completion.` }, { triggerTurn: true, deliverAs: "followUp" });
+    }));
+    // Pi preflights sibling calls before executing them. Allow only one call per
+    // model turn while focused (including a create call that establishes focus).
+    let dispatched = false;
+    host.on("turn_start", () => { dispatched = false; });
+    host.on("tool_call", (event, ctx) => context.run(ctx, () => {
+        const id = focus();
+        if (id === undefined && !event.toolName.startsWith("sequential_workflow_create")) {
+            dispatched = true;
+            return;
+        }
+        if (dispatched)
+            return { block: true, reason: "Sequential Workflow requires one tool call per model turn." };
+        const t = id ? task(id) : undefined;
+        const workflowTool = event.toolName.startsWith("sequential_workflow_");
+        if (t && !workflowTool && (t.type !== "action" || t.status !== "running"))
+            return { block: true, reason: `Task ${t.id} is ${t.type}/${t.status}; external tools are blocked until the required workflow transition.` };
+        try {
+            if (workflowTool)
+                assertOperation(event.toolName, event.input);
+        }
+        catch (error) {
+            return { block: true, reason: String(error) };
+        }
+        dispatched = true;
+    }));
+    host.on("context", (event, ctx) => context.run(ctx, () => {
+        const messages = event.messages.filter(m => !(m.role === "custom" && m.customType === "sequential-workflow-state"));
+        const id = focus();
+        if (id !== undefined)
+            messages.push({ role: "custom", customType: "sequential-workflow-state", display: false, timestamp: Date.now(), content: `Session workflow focus: ${id}. Current task: ${JSON.stringify(task(id))}. Work only on this task. Pass workflowId and taskId for transitions. Collect requires a new user response. External tools are blocked outside a running Action. Use one tool per turn. User commands /workflow-suspend and /workflow-focus control focus.` });
+        return { messages };
+    }));
+    const command = (name: string, description: string, work: (args: string) => void) => host.registerCommand(name, { description, handler: async (args, ctx) => {
+            try {
+                await transaction(ctx, () => work(args.trim()));
+                ctx.ui.notify("Workflow state updated.", "info");
+            }
+            catch (error) {
+                ctx.ui.notify(String(error), "error");
+            }
+        } });
+    command("workflow-suspend", "Suspend this session's focused workflow without cancelling it", () => { save([]); });
+    command("workflow-focus", "Focus an owned workflow by ID", args => {
+        let w = own(Number(args));
+        if (!active(w))
+            throw new Error("Workflow is terminal.");
+        const chain = [w.id];
+        while (task(w.id)?.status === "waiting_subworkflow") {
+            w = own(task(w.id).child_workflow_id);
+            if (chain.includes(w.id) || !active(w))
+                throw new Error("Invalid child dependency.");
+            chain.push(w.id);
+        }
+        save(chain);
+    });
+    command("workflow-adopt", "Explicitly transfer a root workflow and its descendants to this session", args => {
+        const w = row(Number(args));
+        if (!active(w) || w.parent_workflow_id)
+            throw new Error("Specify an active root workflow.");
+        const ids = (db.prepare("WITH RECURSIVE tree(id) AS (SELECT ? UNION SELECT w.id FROM workflows w JOIN tree t ON w.parent_workflow_id=t.id) SELECT id FROM tree").all(w.id) as any[]).map(x => x.id);
+        for (const id of ids) {
+            db.prepare("UPDATE workflows SET session_id=? WHERE id=?").run(session(), id);
+            db.prepare("INSERT INTO workflow_events(workflow_id,phase,payload) VALUES (?, 'adopted', ?)").run(id, JSON.stringify({ fromSession: w.session_id, toSession: session() }));
+        }
+        let leaf = w.id;
+        const chain = [leaf];
+        while (task(leaf)?.status === "waiting_subworkflow") {
+            leaf = task(leaf).child_workflow_id;
+            if (chain.includes(leaf))
+                throw new Error("Invalid cycle.");
+            chain.push(leaf);
+        }
+        save(chain);
+    });
+    return { api, session, own, transaction, context, checkpoint };
+}

package/extensions/pi-console-webui/app/[section]/page.tsx

@@ -1,4 +1,9 @@
 import { notFound } from "next/navigation";
 import { ConsolePage } from "@/components/console-page";
-const sections = new Set(["chat", "profiles", "settings", "env", "soul", "guardrails", "skills", "tools", "packages", "pulses", "extensions", "applications", "api-server", "pi-console-webui", "skill-sources"]);
+import { sectionMetadata } from "@/lib/page-metadata";
+const sections = new Set(["chat", "profiles", "settings", "env", "soul", "context-memory", "guardrails", "skills", "tools", "packages", "pulses", "extensions", "applications", "api-server", "pi-console-webui", "skill-sources"]);
+export async function generateMetadata({ params, searchParams }: { params: Promise<{ section: string }>; searchParams: Promise<{ profile?: string }> }) {
+  return sectionMetadata((await params).section, (await searchParams).profile);
+}
+
 export default async function SectionPage({ params, searchParams }: { params: Promise<{ section: string }>; searchParams: Promise<{ profile?: string }> }) { const { section } = await params; if (!sections.has(section)) notFound(); return <ConsolePage section={section} profile={(await searchParams).profile}/>; }

package/extensions/pi-console-webui/app/applications/[slug]/page.tsx

@@ -1,2 +1,17 @@
 import { ConsolePage } from "@/components/console-page";
+import { pageMetadata } from "@/lib/page-metadata";
+import { piGet } from "@/lib/pi-api";
+
+type ApplicationResponse = { application: { name?: string } };
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  try {
+    const { application } = await piGet<ApplicationResponse>(`applications/${encodeURIComponent(slug)}`);
+    return pageMetadata(application.name?.trim() || `Application: ${slug}`);
+  } catch {
+    return pageMetadata(`Application: ${slug}`);
+  }
+}
+
 export default async function ApplicationPage({ params }: { params: Promise<{ slug: string }> }) { return <ConsolePage section="applications" applicationSlug={(await params).slug}/>; }

package/extensions/pi-console-webui/app/layout.tsx

@@ -1,5 +1,10 @@
 import "./globals.css";
 import { ToastProvider } from "@/components/toast";
 import { ConsoleStateProvider } from "@/components/console-state";
-export const metadata = { title: "Pi Console", description: "Pi API console" };
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: { default: "π Console", template: "%s | π Console" },
+  description: "Pi API console",
+};
 export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) { return <html lang="pt-BR"><body><ToastProvider><ConsoleStateProvider>{children}</ConsoleStateProvider></ToastProvider></body></html>; }

package/extensions/pi-console-webui/app/login/page.tsx

@@ -1,11 +1,7 @@
-"use client";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Loader2 } from "lucide-react";
+import { LoginForm } from "@/components/login-form";
+
+export const metadata = { title: "Sign in" };
+
 export default function Login() {
-  const router = useRouter(); const [username, setUsername] = useState(""), [password, setPassword] = useState(""), [error, setError] = useState(""), [loading, setLoading] = useState(false);
-  async function submit(event: React.FormEvent) { event.preventDefault(); if (loading) return; setError(""); setLoading(true); try { const response = await fetch("/api/auth/login", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ username, password }) }); if (response.ok) router.push("/"); else { setError("Invalid credentials."); window.setTimeout(() => setError(""), 4_000); } } catch { setError("Unable to sign in."); window.setTimeout(() => setError(""), 4_000); } finally { setLoading(false); } }
-  return <main className="grid min-h-screen place-items-center p-4"><form onSubmit={submit} className="w-full max-w-sm space-y-4 rounded-xl border border-zinc-800 bg-zinc-950 p-6 shadow-xl"><h1 className="text-2xl font-bold">Pi Console</h1><p className="text-sm text-zinc-400">Sign in to manage Pi.</p><Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" autoFocus /><Input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password" />{error && <p className="text-sm text-red-400">{error}</p>}<Button className="w-full" disabled={loading}>{loading ? <><Loader2 className="mr-2 animate-spin" size={16}/>Signing in…</> : "Sign in"}</Button></form></main>;
+  return <LoginForm/>;
 }

package/extensions/pi-console-webui/app/not-found.tsx

@@ -0,0 +1,5 @@
+export const metadata = { title: "Page not found" };
+
+export default function NotFound() {
+  return <main className="grid min-h-screen place-items-center p-6"><div className="text-center"><h1 className="text-2xl font-semibold">Page not found</h1><p className="mt-2 text-sm text-zinc-500">The requested Console page does not exist.</p></div></main>;
+}

package/extensions/pi-console-webui/app/page.tsx

@@ -1,2 +1,8 @@
 import { ConsolePage } from "@/components/console-page";
+import { sectionMetadata } from "@/lib/page-metadata";
+
+export async function generateMetadata({ searchParams }: { searchParams: Promise<{ profile?: string }> }) {
+  return sectionMetadata("overview", (await searchParams).profile);
+}
+
 export default async function Page({ searchParams }: { searchParams: Promise<{ profile?: string }> }) { return <ConsolePage section="overview" profile={(await searchParams).profile}/>; }

package/extensions/pi-console-webui/app/terminal/page.tsx

@@ -1,4 +1,7 @@
 import { redirect } from "next/navigation";
 import { authenticated } from "@/lib/auth";
 import { TerminalClient } from "@/components/terminal-client";
+
+export const metadata = { title: "Terminal" };
+
 export default async function TerminalPage() { if (!(await authenticated())) redirect("/login"); return <TerminalClient/>; }

package/extensions/pi-console-webui/components/application-handler-editor.tsx

@@ -11,14 +11,14 @@ import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/toast";
 import { applicationHandlerTemplate } from "../../lib/application-handler-templates";
 
-type HandlerType = "inbound" | "outbound" | "transform";
+type HandlerType = "inbound" | "outbound" | "transform" | "context-memory";
 type TestResult = { ok: boolean; output?: unknown; logs: { stdout: string[]; stderr: string[] }; durationMs: number; error?: string };
-const handlerTypes: Array<{ value: HandlerType; label: string; description: string }> = [{ value: "inbound", label: "Inbound", description: "Converts incoming messages into a Pi profile and payload." }, { value: "outbound", label: "Outbound", description: "Converts Pi responses for the external destination." }, { value: "transform", label: "Transform", description: "Transforms payloads before the inbound handler." }];
+const handlerTypes: Array<{ value: HandlerType; label: string; description: string }> = [{ value: "inbound", label: "Inbound", description: "Converts incoming messages into a Pi profile and payload." }, { value: "outbound", label: "Outbound", description: "Converts Pi responses for the external destination." }, { value: "transform", label: "Transform", description: "Transforms payloads before the inbound handler." }, { value: "context-memory", label: "Context Memory", description: "Resolves private persistent context for an Application identity." }];
 const validName = (value: string) => /^[A-Za-z][A-Za-z0-9_-]*$/.test(value);
 const api = async (path: string, init?: RequestInit) => { const response = await fetch(`/api/pi/${path}`, { ...init, headers: { "content-type": "application/json", ...init?.headers } }); if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error?.message ?? "Request failed"); return response.json(); };
 const templateFor = (type: HandlerType) => applicationHandlerTemplate(type);
 const fileName = (path: string) => path.split("/").pop()!.replace(/\.ts$/, "");
-const typeForPath = (path: string): HandlerType => path.startsWith("transforms/") ? "transform" : fileName(path) === "outbound" ? "outbound" : "inbound";
+const typeForPath = (path: string): HandlerType => path.startsWith("transforms/") ? "transform" : path.startsWith("context-memory/") ? "context-memory" : fileName(path) === "outbound" ? "outbound" : "inbound";
 
 export function ApplicationHandlerEditor({ name, embedded = false }: { name: string; embedded?: boolean }) {
   const { toast } = useToast(); const base = `applications/${name}`;
@@ -30,7 +30,7 @@ export function ApplicationHandlerEditor({ name, embedded = false }: { name: str
   }, [name, selected]);
   const save = async () => { try { await api(`${base}/handler?path=${encodeURIComponent(selected)}`, { method: "PUT", body: JSON.stringify({ content }) }); toast("Handler saved. Changes apply to the next request."); } catch (error) { toast((error as Error).message, "error"); } };
   const test = async () => { if (!selected) return; let input: unknown; try { input = JSON.parse(payload); } catch { toast("Input must be valid JSON.", "error"); return; } if (!input || typeof input !== "object" || Array.isArray(input)) { toast("Input must be a JSON object.", "error"); return; } try { setTesting(true); setOutput(""); setLogs(""); const result = await api(`${base}/handler/test?path=${encodeURIComponent(selected)}`, { method: "POST", body: JSON.stringify({ payload: input, content }) }) as TestResult; setOutput(JSON.stringify(result.ok ? result.output ?? null : { error: result.error ?? "Handler test failed." }, null, 2)); const lines = [`Duration: ${result.durationMs} ms`, ...result.logs.stdout.map((line) => `[info] ${line}`), ...result.logs.stderr.map((line) => `[error] ${line}`)]; setLogs(lines.join("\n") || "No logs emitted."); } catch (error) { setLogs((error as Error).message); toast((error as Error).message, "error"); } finally { setTesting(false); } };
-  const create = async () => { if (!validName(newName)) return toast("Use a name beginning with a letter; only letters, numbers, hyphens and underscores are allowed.", "error"); const path = handlerType === "transform" ? `transforms/${newName}.ts` : `${newName}.ts`; if (files.includes(path)) return toast("A handler with this name already exists.", "error"); try { const template = templateFor(handlerType); await api(`${base}/handler?path=${encodeURIComponent(path)}`, { method: "PUT", body: JSON.stringify({ content: template }) }); setFiles((items) => [...new Set([...items, path])].sort()); setSelected(path); setContent(template); setCreateDialog(false); toast("Handler created. Configure it in Application Settings when ready."); } catch (error) { toast((error as Error).message, "error"); } };
+  const create = async () => { if (!validName(newName)) return toast("Use a name beginning with a letter; only letters, numbers, hyphens and underscores are allowed.", "error"); const path = handlerType === "transform" ? `transforms/${newName}.ts` : handlerType === "context-memory" ? `context-memory/${newName}.ts` : `${newName}.ts`; if (files.includes(path)) return toast("A handler with this name already exists.", "error"); try { const template = templateFor(handlerType); await api(`${base}/handler?path=${encodeURIComponent(path)}`, { method: "PUT", body: JSON.stringify({ content: template }) }); setFiles((items) => [...new Set([...items, path])].sort()); setSelected(path); setContent(template); setCreateDialog(false); toast("Handler created. Configure it in Application Settings when ready."); } catch (error) { toast((error as Error).message, "error"); } };
   const renameFile = async () => { if (!renamePath || !validName(renameName)) return toast("Use a valid handler name.", "error"); const path = renamePath.includes("/") ? `${renamePath.slice(0, renamePath.lastIndexOf("/") + 1)}${renameName}.ts` : `${renameName}.ts`; try { const data = await api(`${base}/handler?path=${encodeURIComponent(renamePath)}`, { method: "PATCH", body: JSON.stringify({ newPath: path }) }); setFiles((items) => items.map((item) => item === renamePath ? data.path : item).sort()); setSelected(data.path); setRenamePath(undefined); toast("Handler renamed and Application references updated."); } catch (error) { toast((error as Error).message, "error"); } };
   const deleteFile = async (path: string) => { if (!confirm(`Delete ${path}? This cannot be undone.`)) return; try { await fetch(`/api/pi/${base}/handler?path=${encodeURIComponent(path)}`, { method: "DELETE" }).then(async (response) => { if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error?.message ?? "Unable to delete handler"); }); setFiles((items) => items.filter((item) => item !== path)); if (selected === path) { const next = files.find((item) => item !== path) ?? ""; setSelected(next); setContent(""); } toast("Handler deleted."); } catch (error) { toast((error as Error).message, "error"); } };
   const groups = new Map<string, string[]>(); for (const file of files) { const index = file.lastIndexOf("/"); const folder = index < 0 ? "handlers" : `handlers/${file.slice(0, index)}`; groups.set(folder, [...(groups.get(folder) ?? []), file]); }

package/extensions/pi-console-webui/components/application-logs.tsx

@@ -3,15 +3,16 @@ import { useEffect, useMemo, useState } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { json as jsonLanguage } from "@codemirror/lang-json";
 import Link from "next/link";
-import { ArrowLeft, Check, Copy, Filter, Trash2 } from "lucide-react";
+import { ArrowLeft, Check, Copy, Filter, Loader2, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardTitle } from "@/components/ui/card";
-type Stage = { id: string; label: string; type: string; payload?: unknown; input?: unknown; output?: unknown; stdout: string[]; stderr: string[]; error?: string };
+import { useToast } from "@/components/toast";
+type Stage = { id: string; label: string; type: string; payload?: unknown; input?: unknown; output?: unknown; stdout: string[]; stderr: string[]; error?: string; completed?: boolean };
 type Call = { id: string; receivedAt: string; origin: string; status: string; stages: Stage[]; error?: string };
 const api = async (path: string, init?: RequestInit) => { const response = await fetch(`/api/pi/${path}`, init); if (!response.ok) throw new Error("Request failed"); return response.json(); };
 const json = (value: unknown) => JSON.stringify(value, null, 2) ?? "No data recorded.";
 const localDateTime = (date: Date) => { const offset = date.getTimezoneOffset() * 60_000; return new Date(date.getTime() - offset).toISOString().slice(0, 16); };
-const stageFilters = [{ value: "request", label: "Request", className: "border-sky-400 bg-sky-50 text-sky-700" }, { value: "transform", label: "Transform", className: "border-amber-400 bg-amber-50 text-amber-800" }, { value: "inbound-handler", label: "Inbound handler", className: "border-emerald-400 bg-emerald-50 text-emerald-800" }, { value: "pi-agent", label: "Pi agent", className: "border-indigo-400 bg-indigo-50 text-indigo-800" }, { value: "outbound-handler", label: "Outbound handler", className: "border-fuchsia-400 bg-fuchsia-50 text-fuchsia-800" }, { value: "final-response", label: "Final response", className: "border-teal-400 bg-teal-50 text-teal-800" }];
+const stageFilters = [{ value: "request", label: "Request", className: "border-sky-400 bg-sky-50 text-sky-700" }, { value: "transform", label: "Transform", className: "border-amber-400 bg-amber-50 text-amber-800" }, { value: "inbound-handler", label: "Inbound handler", className: "border-emerald-400 bg-emerald-50 text-emerald-800" }, { value: "coalescing", label: "Coalescing", className: "border-cyan-400 bg-cyan-50 text-cyan-800" }, { value: "pi-agent", label: "Pi agent", className: "border-indigo-400 bg-indigo-50 text-indigo-800" }, { value: "outbound-handler", label: "Outbound handler", className: "border-fuchsia-400 bg-fuchsia-50 text-fuchsia-800" }, { value: "final-response", label: "Final response", className: "border-teal-400 bg-teal-50 text-teal-800" }];
 const stageColor = (type: string) => stageFilters.find((stage) => stage.value === type)?.className ?? "border-zinc-300 bg-zinc-50 text-zinc-700";
 function JsonView({ value }: { value: unknown }) {
   const [copied, setCopied] = useState(false);
@@ -28,11 +29,14 @@ function FlowArrow({ output, nextInput }: { output: unknown; nextInput: unknown
 
 export function ApplicationLogs({ name, embedded = false }: { name: string; embedded?: boolean }) {
   const base = `applications/${name}`;
-  const [calls, setCalls] = useState<Call[]>([]), [selected, setSelected] = useState<Call>(), [stage, setStage] = useState<Stage>(), [statuses, setStatuses] = useState<string[]>([]), [stages, setStages] = useState<string[]>([]), [start, setStart] = useState(() => localDateTime(new Date(Date.now() - 3 * 60 * 60 * 1000))), [end, setEnd] = useState(() => localDateTime(new Date(Date.now() + 60 * 60 * 1000)));
+  const { toast } = useToast();
+  const [calls, setCalls] = useState<Call[]>([]), [selected, setSelected] = useState<Call>(), [stage, setStage] = useState<Stage>(), [loading, setLoading] = useState(true), [loadingDetail, setLoadingDetail] = useState(false), [statuses, setStatuses] = useState<string[]>([]), [stages, setStages] = useState<string[]>([]), [start, setStart] = useState(() => localDateTime(new Date(Date.now() - 3 * 60 * 60 * 1000))), [end, setEnd] = useState(() => localDateTime(new Date(Date.now() + 60 * 60 * 1000)));
   const toggle = (value: string, setter: React.Dispatch<React.SetStateAction<string[]>>) => setter((items) => items.includes(value) ? items.filter((item) => item !== value) : [...items, value]);
-  const load = () => api(`${base}/logs`).then((data) => { setCalls(data.calls); setSelected((current) => data.calls.find((call: Call) => call.id === current?.id) ?? data.calls[0]); });
-  useEffect(() => { void load(); let socket: WebSocket | undefined; api(`${base}/logs/ticket`, { method: "POST" }).then(({ url }) => { socket = new WebSocket(url); socket.onmessage = () => void load(); }).catch(() => {}); return () => socket?.close(); }, [name]);
+  const selectCall = async (call: Call) => { try { setLoadingDetail(true); const data = await api(`${base}/logs/calls/${encodeURIComponent(call.id)}`) as { call: Call }; setSelected(data.call); setStage(data.call.stages.find((item) => item.error) ?? data.call.stages.at(-1) ?? data.call.stages[0]); } catch (error) { toast((error as Error).message, "error"); } finally { setLoadingDetail(false); } };
+  const load = async () => { try { setLoading(true); const params = new URLSearchParams({ summary: "1", limit: "250" }); if (start) params.set("start", new Date(start).toISOString()); if (end) params.set("end", new Date(end).toISOString()); const data = await api(`${base}/logs?${params}`) as { calls: Call[] }; setCalls(data.calls); const current = data.calls.find((call) => call.id === selected?.id) ?? data.calls[0]; if (current && current.id !== selected?.id) void selectCall(current); if (!current) { setSelected(undefined); setStage(undefined); } } catch (error) { toast((error as Error).message, "error"); } finally { setLoading(false); } };
+  useEffect(() => { void load(); }, [name, start, end]);
+  useEffect(() => { let socket: WebSocket | undefined; api(`${base}/logs/ticket`, { method: "POST" }).then(({ url }) => { socket = new WebSocket(url); socket.onmessage = () => void load(); }).catch((error) => toast((error as Error).message, "error")); return () => socket?.close(); }, [name]);
   const filtered = useMemo(() => calls.filter((call) => (statuses.length === 0 || statuses.includes(call.status)) && (stages.length === 0 || call.stages.some((item) => stages.includes(item.type))) && (!start || new Date(call.receivedAt) >= new Date(start)) && (!end || new Date(call.receivedAt) <= new Date(end))), [calls, statuses, stages, start, end]);
-  const current = selected && filtered.find((call) => call.id === selected.id) ? selected : filtered[0]; const detail = stage && current?.stages.some((item) => item.id === stage.id) ? stage : current?.stages[0]; const selectCall = (call: Call) => { setSelected(call); setStage(call.stages.find((item) => item.error) ?? call.stages.at(-1) ?? call.stages[0]); };
-  return <div className="space-y-4">{!embedded && <div className="flex items-center gap-3"><Link href="/applications?context=admin" className="rounded-lg p-2 text-zinc-500 hover:bg-zinc-100" title="Back to Applications"><ArrowLeft size={18}/></Link><div className="mr-auto"><h2 className="text-xl font-semibold">Call logs: {name}</h2><p className="text-sm text-zinc-500">Live Application calls retained for seven days.</p></div><Button className="bg-red-600 hover:bg-red-700" title="Clear all logs" onClick={async () => { if (confirm("Delete all logs for this Application? This cannot be undone.")) { await fetch(`/api/pi/${base}/logs`, { method: "DELETE" }); setCalls([]); setSelected(undefined); setStage(undefined); } }}><Trash2 size={17}/></Button></div>}<Card className="space-y-4"><div className="flex items-center gap-2 text-sm font-semibold"><Filter size={16} className="text-emerald-600"/>Log filters</div><div className="flex flex-wrap gap-2">{stageFilters.map((filter) => <button key={filter.value} onClick={() => toggle(filter.value, setStages)} className={`rounded-full border px-3 py-1 text-xs font-medium transition ${filter.className} ${stages.includes(filter.value) ? "ring-2 ring-offset-1 ring-zinc-400" : "opacity-70 hover:opacity-100"}`}>{filter.label}</button>)}{["success", "error", "running"].map((value) => <button key={value} onClick={() => toggle(value, setStatuses)} className={`rounded-full border border-zinc-500 px-3 py-1 text-xs font-medium capitalize ${statuses.includes(value) ? "bg-zinc-800 text-white" : "bg-white text-zinc-700"}`}>{value === "error" ? "Errors" : value}</button>)}</div><div className="grid max-w-xl gap-4 sm:grid-cols-2"><label className="grid gap-1 text-sm font-medium">Start (browser time)<input type="datetime-local" value={start} onChange={(event) => setStart(event.target.value)} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm"/></label><label className="grid gap-1 text-sm font-medium">End (browser time)<input type="datetime-local" value={end} onChange={(event) => setEnd(event.target.value)} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm"/></label></div></Card><div className="grid gap-4 lg:grid-cols-[280px_minmax(300px,1fr)_minmax(340px,1fr)]"><Card className="max-h-[650px] overflow-auto"><CardTitle>Calls</CardTitle><div className="mt-3 space-y-2">{filtered.map((call) => <button key={call.id} onClick={() => selectCall(call)} className={`w-full rounded-lg border p-3 text-left text-sm ${current?.id === call.id ? "border-emerald-400 bg-emerald-50" : "border-zinc-200 hover:bg-zinc-50"}`}><b>{new Date(call.receivedAt).toLocaleString()}</b><p className="truncate text-zinc-500">{call.origin}</p><p className={call.status === "error" ? "font-medium text-red-700" : call.status === "running" ? "text-amber-700" : "text-emerald-700"}>{call.status}</p>{call.error && <p className="mt-1 line-clamp-2 text-xs text-red-700">{call.error.split("\n")[0]}</p>}</button>)}{!filtered.length && <p className="text-sm text-zinc-500">No calls match the filters.</p>}</div></Card><Card className="max-h-[650px] overflow-auto"><CardTitle>Workflow</CardTitle><div className="mt-4 space-y-2">{current?.stages.map((item, index) => <div key={item.id}><button onClick={() => setStage(item)} className={`w-full rounded-lg border p-3 text-left transition ${item.error ? "border-red-300 bg-red-50 text-red-800" : `${stageColor(item.type)} hover:brightness-95`} ${detail?.id === item.id ? "ring-2 ring-offset-1 ring-zinc-400" : ""}`}><b>{item.label}</b><p className={item.error ? "text-xs text-red-700" : "text-xs opacity-75"}>{item.error ? item.error.split("\n")[0] : item.output !== undefined || item.payload !== undefined ? "Completed" : "Running"}</p></button>{index < current.stages.length - 1 && <FlowArrow output={item.output} nextInput={current.stages[index + 1].input}/>}</div>)}{current?.error && <div className="rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800"><b>Call error</b><p className="mt-1 whitespace-pre-wrap">{current.error}</p></div>}</div></Card><Card className="max-h-[650px] overflow-auto"><CardTitle>Details</CardTitle>{detail ? <><p className="mt-4 text-sm font-medium">{detail.label}</p><div className="mt-3 space-y-3"><section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">{detail.payload !== undefined ? "Payload" : "Input"}</p><JsonView value={detail.payload !== undefined ? detail.payload : detail.input}/></section>{detail.output !== undefined && <section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">Output</p><JsonView value={detail.output}/></section>}{(detail.stdout.length > 0 || detail.stderr.length > 0) && <section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">Handler console</p><JsonView value={{ stdout: detail.stdout, stderr: detail.stderr }}/></section>}{detail.error && <section><p className="mb-1 text-xs font-semibold uppercase text-red-700">Error</p><pre className="log-json border-red-300">{detail.error}</pre></section>}</div></> : <p className="mt-4 text-sm text-zinc-500">Select a call and a stage to inspect its data.</p>}</Card></div></div>;
+  const current = selected && filtered.find((call) => call.id === selected.id) ? selected : undefined; const detail = stage && current?.stages.some((item) => item.id === stage.id) ? stage : current?.stages[0];
+  return <div className="space-y-4">{!embedded && <div className="flex items-center gap-3"><Link href="/applications?context=admin" className="rounded-lg p-2 text-zinc-500 hover:bg-zinc-100" title="Back to Applications"><ArrowLeft size={18}/></Link><div className="mr-auto"><h2 className="text-xl font-semibold">Call logs: {name}</h2><p className="text-sm text-zinc-500">Live Application calls retained for seven days.</p></div><Button className="bg-red-600 hover:bg-red-700" title="Clear all logs" onClick={async () => { if (confirm("Delete all logs for this Application? This cannot be undone.")) { await fetch(`/api/pi/${base}/logs`, { method: "DELETE" }); setCalls([]); setSelected(undefined); setStage(undefined); } }}><Trash2 size={17}/></Button></div>}<Card className="space-y-4"><div className="flex items-center gap-2 text-sm font-semibold"><Filter size={16} className="text-emerald-600"/>Log filters</div><div className="flex flex-wrap gap-2">{stageFilters.map((filter) => <button key={filter.value} onClick={() => toggle(filter.value, setStages)} className={`rounded-full border px-3 py-1 text-xs font-medium transition ${filter.className} ${stages.includes(filter.value) ? "ring-2 ring-offset-1 ring-zinc-400" : "opacity-70 hover:opacity-100"}`}>{filter.label}</button>)}{["success", "error", "running"].map((value) => <button key={value} onClick={() => toggle(value, setStatuses)} className={`rounded-full border border-zinc-500 px-3 py-1 text-xs font-medium capitalize ${statuses.includes(value) ? "bg-zinc-800 text-white" : "bg-white text-zinc-700"}`}>{value === "error" ? "Errors" : value}</button>)}</div><div className="grid max-w-xl gap-4 sm:grid-cols-2"><label className="grid gap-1 text-sm font-medium">Start (browser time)<input type="datetime-local" value={start} onChange={(event) => setStart(event.target.value)} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm"/></label><label className="grid gap-1 text-sm font-medium">End (browser time)<input type="datetime-local" value={end} onChange={(event) => setEnd(event.target.value)} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm"/></label></div></Card><div className="grid gap-4 lg:grid-cols-[280px_minmax(300px,1fr)_minmax(340px,1fr)]"><Card className="max-h-[650px] overflow-auto"><CardTitle>Calls</CardTitle><div className="mt-3 space-y-2">{loading && <div className="flex items-center gap-2 py-1 text-sm text-zinc-500"><Loader2 className="animate-spin" size={16}/>Loading log calls…</div>}{filtered.map((call) => <button key={call.id} onClick={() => void selectCall(call)} className={`w-full rounded-lg border p-3 text-left text-sm ${current?.id === call.id ? "border-emerald-400 bg-emerald-50" : "border-zinc-200 hover:bg-zinc-50"}`}><b>{new Date(call.receivedAt).toLocaleString()}</b><p className="truncate text-zinc-500">{call.origin}</p><p className={call.status === "error" ? "font-medium text-red-700" : call.status === "running" ? "text-amber-700" : "text-emerald-700"}>{call.status}</p>{call.error && <p className="mt-1 line-clamp-2 text-xs text-red-700">{call.error.split("\n")[0]}</p>}</button>)}{!loading && !filtered.length && <p className="text-sm text-zinc-500">No calls match the filters.</p>}</div></Card><Card className="max-h-[650px] overflow-auto"><CardTitle>Workflow</CardTitle><div className="mt-4 space-y-2">{current?.stages.map((item, index) => <div key={item.id}><button onClick={() => setStage(item)} className={`w-full rounded-lg border p-3 text-left transition ${item.error ? "border-red-300 bg-red-50 text-red-800" : `${stageColor(item.type)} hover:brightness-95`} ${detail?.id === item.id ? "ring-2 ring-offset-1 ring-zinc-400" : ""}`}><b>{item.label}</b><p className={item.error ? "text-xs text-red-700" : "text-xs opacity-75"}>{item.error ? item.error.split("\n")[0] : item.completed || item.output !== undefined || item.payload !== undefined ? "Completed" : "Running"}</p></button>{index < current.stages.length - 1 && <FlowArrow output={item.output} nextInput={current.stages[index + 1].input}/>}</div>)}{current?.error && <div className="rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800"><b>Call error</b><p className="mt-1 whitespace-pre-wrap">{current.error}</p></div>}</div></Card><Card className="max-h-[650px] overflow-auto"><CardTitle>Details</CardTitle>{loadingDetail ? <div className="mt-4 flex min-h-32 items-center justify-center gap-2 text-sm text-zinc-500"><Loader2 className="animate-spin" size={17}/>Loading call details…</div> : detail ? <><p className="mt-4 text-sm font-medium">{detail.label}</p><div className="mt-3 space-y-3"><section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">{detail.payload !== undefined ? "Payload" : "Input"}</p><JsonView value={detail.payload !== undefined ? detail.payload : detail.input}/></section>{detail.output !== undefined && <section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">Output</p><JsonView value={detail.output}/></section>}{(detail.stdout.length > 0 || detail.stderr.length > 0) && <section><p className="mb-1 text-xs font-semibold uppercase text-zinc-500">Handler console</p><JsonView value={{ stdout: detail.stdout, stderr: detail.stderr }}/></section>}{detail.error && <section><p className="mb-1 text-xs font-semibold uppercase text-red-700">Error</p><pre className="log-json border-red-300">{detail.error}</pre></section>}</div></> : <p className="mt-4 text-sm text-zinc-500">Select a call and a stage to inspect its data.</p>}</Card></div></div>;
 }

package/extensions/pi-console-webui/components/application-settings.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/toast";
 
-type Settings = { inboundHandler: string; outboundHandler?: string; transformHandlers?: string[] };
+type Settings = { inboundHandler: string; outboundHandler?: string; transformHandlers?: string[]; messageCoalescing?: { enabled?: boolean; silenceDebounceSeconds?: number } };
 type App = { name: string; slug: string; enabled: boolean; responseMode: "ack" | "result"; defaultProfile: string | null; routingPolicy: "default_as_fallback" | "drop"; settings: Settings };
 type HandlerOptions = { inbound: string[]; outbound: string[]; transform: string[] };
 const api = async (path: string, init?: RequestInit) => { const response = await fetch(`/api/pi/${path}`, { ...init, headers: { "content-type": "application/json", ...init?.headers } }); if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error?.message ?? "Request failed"); return response.json(); };
@@ -48,6 +48,10 @@ export function ApplicationSettings({ slug }: { slug: string }) {
       <label className="text-sm font-medium">Routing policy<select className="mt-1 w-full rounded-lg border border-zinc-200 px-3 py-2" value={app.routingPolicy} onChange={(event) => update({ routingPolicy: event.target.value as App["routingPolicy"] })}><option value="default_as_fallback">Use default profile as fallback</option><option value="drop">Reject unresolved routes</option></select></label>
       <label className="flex items-center gap-2 text-sm font-medium md:col-span-2"><Switch checked={app.enabled} onCheckedChange={(enabled) => update({ enabled })}/>Enabled</label>
     </Card>
+    <Card className="space-y-4">
+      <div><CardTitle>Message coalescing</CardTitle><p className="mt-1 text-sm text-zinc-500">Collects messages from the same resolved identity after inbound handling. Only the last message after the silence interval dispatches the combined content to Pi.</p></div>
+      <div className="grid gap-4 md:grid-cols-2"><label className="flex items-center gap-2 text-sm font-medium"><Switch checked={settings.messageCoalescing?.enabled === true} onCheckedChange={(enabled) => updateSettings({ messageCoalescing: { enabled, silenceDebounceSeconds: settings.messageCoalescing?.silenceDebounceSeconds ?? 10 } })}/>Enabled</label><label className="text-sm font-medium">Silence debounce (seconds)<Input className="mt-1" type="number" min="1" max="3600" disabled={!settings.messageCoalescing?.enabled} value={settings.messageCoalescing?.silenceDebounceSeconds ?? 10} onChange={(event) => updateSettings({ messageCoalescing: { enabled: settings.messageCoalescing?.enabled === true, silenceDebounceSeconds: Number(event.target.value) } })}/></label></div>
+    </Card>
     <Card className="space-y-4">
       <div><CardTitle>Pipeline</CardTitle><p className="mt-1 text-sm text-zinc-500">{isNew ? "Save the Application before creating and selecting custom handlers." : "Handlers are managed in the Handlers tab. Transform order is execution order."}</p></div>
       <label className="block text-sm font-medium">Inbound handler<select className="mt-1 w-full rounded-lg border border-zinc-200 px-3 py-2" value={settings.inboundHandler} onChange={(event) => updateSettings({ inboundHandler: event.target.value })}>{renderHandlerOptions(handlers.inbound, settings.inboundHandler)}</select></label>

package/extensions/pi-console-webui/components/chat-workspace.tsx

@@ -7,6 +7,7 @@ import { Bot, Check, ChevronDown, ChevronRight, CircleStop, Copy, Loader2, Messa
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/toast";
 
 type Session = { id: string; name?: string; preview: string; updatedAt: string; messageCount: number };
 type Block = { type: "text" | "thinking"; text: string };
@@ -16,11 +17,11 @@ const ago = (date: string) => { const minutes = Math.max(0, Math.round((Date.now
 const text = (entry: Entry) => entry.content?.filter((block) => block.type === "text").map((block) => block.text).join("\n") ?? "";
 
 export function ChatWorkspace({ profile }: { profile: string }) {
-  const searchParams = useSearchParams(); const router = useRouter();
+  const searchParams = useSearchParams(); const router = useRouter(); const { toast } = useToast();
   // Profile selection updates the route asynchronously. Never resolve a
   // session from the previous URL against the newly selected profile.
   const requestedSession = (searchParams.get("profile") ?? "default") === profile ? searchParams.get("session") : null;
-  const [sessions, setSessions] = useState<Session[]>([]), [selected, setSelected] = useState<string>(), [entries, setEntries] = useState<Entry[]>([]), [hasMore, setHasMore] = useState(false), [nextBefore, setNextBefore] = useState<string | null>(null), [loadingOlder, setLoadingOlder] = useState(false), [copiedSessionId, setCopiedSessionId] = useState(false), [editingName, setEditingName] = useState(false), [sessionName, setSessionName] = useState(""), [query, setQuery] = useState(""), [debouncedQuery, setDebouncedQuery] = useState(""), [message, setMessage] = useState(""), [streaming, setStreaming] = useState(""), [busy, setBusy] = useState(false), [error, setError] = useState(""), [sidebar, setSidebar] = useState(true);
+  const [sessions, setSessions] = useState<Session[]>([]), [newMenu, setNewMenu] = useState(false), [applicationDialog, setApplicationDialog] = useState(false), [creatingApplicationSession, setCreatingApplicationSession] = useState(false), [applications, setApplications] = useState<Array<{ slug: string; name: string }>>([]), [application, setApplication] = useState(""), [identityKey, setIdentityKey] = useState(""), [selected, setSelected] = useState<string>(), [entries, setEntries] = useState<Entry[]>([]), [hasMore, setHasMore] = useState(false), [nextBefore, setNextBefore] = useState<string | null>(null), [loadingOlder, setLoadingOlder] = useState(false), [copiedSessionId, setCopiedSessionId] = useState(false), [editingName, setEditingName] = useState(false), [sessionName, setSessionName] = useState(""), [query, setQuery] = useState(""), [debouncedQuery, setDebouncedQuery] = useState(""), [message, setMessage] = useState(""), [streaming, setStreaming] = useState(""), [busy, setBusy] = useState(false), [error, setError] = useState(""), [sidebar, setSidebar] = useState(true);
   const abortRef = useRef<AbortController | undefined>(undefined); const bottom = useRef<HTMLDivElement>(null); const conversation = useRef<HTMLDivElement>(null); const loadingSession = useRef<string | undefined>(undefined);
   const loadSessions = async () => { const data = await (await call(`profiles/${profile}/sessions`)).json() as { sessions: Session[] }; setSessions(data.sessions); return data.sessions; };
   const loadConversation = async (id: string) => { const key = `${profile}\u0000${id}`; loadingSession.current = key; setSelected(id); setEditingName(false); setEntries([]); setHasMore(false); setNextBefore(null); setStreaming(""); const data = await (await call(`profiles/${profile}/sessions/${id}?limit=16`)).json() as { entries: Entry[]; hasMore: boolean; nextBefore: string | null }; if (loadingSession.current !== key) return; setEntries(data.entries); setHasMore(data.hasMore); setNextBefore(data.nextBefore); requestAnimationFrame(() => bottom.current?.scrollIntoView({ behavior: "auto" })); };
@@ -33,10 +34,12 @@ export function ChatWorkspace({ profile }: { profile: string }) {
   const activeSession = sessions.find((session) => session.id === selected);
   async function copySessionId() { if (!selected) return; try { await navigator.clipboard.writeText(selected); setCopiedSessionId(true); window.setTimeout(() => setCopiedSessionId(false), 2_000); } catch (cause) { setError((cause as Error).message || "Unable to copy session ID."); } }
   function openConversation(id: string) { router.push(`/chat?profile=${encodeURIComponent(profile)}&session=${encodeURIComponent(id)}`); }
-  function create() { router.push(`/chat?profile=${encodeURIComponent(profile)}`); loadingSession.current = undefined; setSelected(undefined); setCopiedSessionId(false); setEditingName(false); setEntries([]); setHasMore(false); setNextBefore(null); setStreaming(""); setMessage(""); setError(""); }
+  function create() { setNewMenu(false); router.push(`/chat?profile=${encodeURIComponent(profile)}`); loadingSession.current = undefined; setSelected(undefined); setCopiedSessionId(false); setEditingName(false); setEntries([]); setHasMore(false); setNextBefore(null); setStreaming(""); setMessage(""); setError(""); }
+  async function openApplicationDialog() { setNewMenu(false); try { const data = await (await call("applications")).json() as { applications: Array<{ slug: string; name: string; enabled?: boolean }> }; setApplications(data.applications.filter((item) => item.enabled !== false)); setApplication((current) => current || data.applications[0]?.slug || ""); setIdentityKey(""); setApplicationDialog(true); } catch (cause) { setError((cause as Error).message); } }
+  async function createApplicationSession() { if (!application || !identityKey.trim()) { toast("Select an Application and enter an Identity key.", "error"); return; } try { setCreatingApplicationSession(true); const created = await (await call(`profiles/${profile}/application-sessions`, { method: "POST", body: JSON.stringify({ application, identityKey: identityKey.trim() }) })).json() as { id: string }; setApplicationDialog(false); await loadSessions(); openConversation(created.id); } catch (cause) { toast((cause as Error).message, "error"); } finally { setCreatingApplicationSession(false); } }
   async function remove() { if (!selected || busy || !window.confirm("Delete this conversation permanently?")) return; try { await call(`profiles/${profile}/sessions/${selected}`, { method: "DELETE" }); setSelected(undefined); setEntries([]); setStreaming(""); setError(""); await loadSessions(); } catch (cause) { setError((cause as Error).message); } }
   async function rename() { if (!selected || !sessionName.trim()) return; try { await call(`profiles/${profile}/sessions/${selected}`, { method: "PATCH", body: JSON.stringify({ name: sessionName.trim() }) }); setEditingName(false); await loadSessions(); } catch (cause) { setError((cause as Error).message); } }
   async function send(event: React.FormEvent) { event.preventDefault(); if (!message.trim() || busy) return; let id = selected; try { setError(""); if (!id) { const created = await (await call(`profiles/${profile}/sessions`, { method: "POST", body: JSON.stringify({}) })).json() as { id: string }; id = created.id; setSelected(id); } const userEntry: Entry = { id: `local-${Date.now()}`, type: "message", role: "user", timestamp: new Date().toISOString(), content: [{ type: "text", text: message }] }; setEntries((current) => [...current, userEntry]); const prompt = message; setMessage(""); setBusy(true); setStreaming(""); const controller = new AbortController(); abortRef.current = controller; const response = await call(`profile/${profile}/api/sessions/${id}/chat/stream`, { method: "POST", body: JSON.stringify({ message: prompt }), signal: controller.signal }); const reader = response.body?.getReader(), decoder = new TextDecoder(); let buffer = "", complete = false; while (reader && !complete) { const part = await reader.read(); if (part.done) break; buffer += decoder.decode(part.value, { stream: true }); const events = buffer.split("\n\n"); buffer = events.pop() ?? ""; for (const item of events) { const data = item.split("\n").find((line) => line.startsWith("data: "))?.slice(6); if (!data) continue; const payload = JSON.parse(data); if (typeof payload.error === "string") throw new Error(payload.error); if (payload.text) setStreaming((current) => current + payload.text); if (typeof payload.response === "string") { setStreaming(payload.response); complete = true; break; } } } await loadConversation(id); await loadSessions(); } catch (cause) { if ((cause as Error).name !== "AbortError") setError((cause as Error).message); } finally { abortRef.current = undefined; setBusy(false); setStreaming(""); } }
-  return <Card className="h-[calc(100vh-215px)] min-h-[520px] p-0"><div className="flex h-full min-h-0 overflow-hidden rounded-xl"><aside className={`${sidebar ? "w-96" : "w-0"} flex shrink-0 flex-col overflow-hidden border-r border-zinc-200 bg-zinc-50 transition-all`}><div className="flex h-full w-96 min-h-0 flex-col p-4"><div className="mb-4 flex items-center justify-between"><h2 className="font-semibold">Conversations</h2><Button title="New chat" onClick={create}><Plus size={17}/></Button></div><div className="relative mb-3"><Search className="absolute left-3 top-2.5 text-zinc-400" size={16}/><Input className="pl-9" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search sessions"/></div><div className="min-h-0 flex-1 space-y-1 overflow-y-auto pr-1">{filtered.map((session) => <button key={session.id} onClick={() => { setCopiedSessionId(false); openConversation(session.id); }} className={`w-full rounded-lg p-3 text-left hover:bg-white ${selected === session.id ? "bg-white shadow-sm ring-1 ring-blue-200" : ""}`}><div className="flex items-center gap-2"><MessageSquare size={15} className="text-blue-600"/><span className="min-w-0 flex-1 truncate text-sm font-medium">{session.name || session.preview || "New conversation"}</span><span className="text-xs text-zinc-400">{ago(session.updatedAt)}</span></div><p className="mt-1 truncate text-xs text-zinc-500">{session.preview || `${session.messageCount} messages`}</p><p className="mt-1 truncate font-mono text-[10px] text-zinc-400">{session.id}</p></button>)}{filtered.length === 0 && <p className="p-4 text-center text-sm text-zinc-500">No sessions found.</p>}</div></div></aside><section className="flex min-h-0 min-w-0 flex-1 flex-col"><header className="flex items-center gap-3 border-b border-zinc-200 px-5 py-4"><Button className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200" onClick={() => setSidebar((current) => !current)}><PanelLeft size={17}/></Button><div className="min-w-0"><div className="flex items-center gap-1">{!editingName && <h2 className="truncate font-semibold">{selected ? activeSession?.name || activeSession?.preview || "Untitled session" : "New conversation"}</h2>}{selected && !editingName && <button className="shrink-0 rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-900" title="Rename session" onClick={() => { setSessionName(activeSession?.name || activeSession?.preview || ""); setEditingName(true); }}><Pencil size={14}/></button>}</div>{selected && editingName && <div className="mt-2 flex items-center gap-1"><Input autoFocus className="h-8 min-w-64" value={sessionName} onChange={(event) => setSessionName(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") void rename(); if (event.key === "Escape") setEditingName(false); }}/><button className="rounded p-1.5 text-emerald-700 hover:bg-emerald-50" title="Save session name" onClick={() => void rename()}><Check size={16}/></button><button className="rounded p-1.5 text-zinc-500 hover:bg-zinc-100" title="Cancel" onClick={() => setEditingName(false)}><X size={16}/></button></div>}<p className="text-xs text-zinc-500">Profile: {profile}</p>{selected && <div className="mt-1 flex items-center gap-1 text-xs text-zinc-400"><span className="truncate font-mono">{selected}</span><button className="shrink-0 rounded p-1 hover:bg-zinc-100" title="Copy session ID" onClick={() => void copySessionId()}>{copiedSessionId ? <Check size={13}/> : <Copy size={13}/>}</button></div>}</div>{selected && <Button className="ml-auto bg-zinc-100 text-zinc-700 hover:bg-red-50 hover:text-red-700" title="Delete conversation" onClick={remove} disabled={busy}><Trash2 size={17}/></Button>}</header><div ref={conversation} onScroll={(event) => { if (event.currentTarget.scrollTop < 80) void loadOlder(); }} className="min-h-0 flex-1 space-y-5 overflow-y-auto bg-white px-5 py-6">{loadingOlder && <div className="py-2 text-center text-xs text-zinc-400">Loading older messages…</div>}{hasMore && !loadingOlder && <div className="py-2 text-center text-xs text-zinc-400">Scroll up to load older messages</div>}{!selected && entries.length === 0 && <div className="mx-auto mt-28 max-w-md text-center"><div className="mx-auto mb-4 w-fit rounded-2xl bg-blue-50 p-4 text-blue-600"><Bot size={30}/></div><h3 className="text-xl font-semibold">Start a conversation</h3><p className="mt-2 text-sm text-zinc-500">Write a message below or choose a previous session.</p></div>}{entries.filter((entry) => entry.role !== "toolResult").map((entry) => <Message key={entry.id} entry={entry}/>) }{busy && <Message entry={{ id: "streaming", type: "message", role: "assistant", timestamp: new Date().toISOString(), content: [{ type: "text", text: streaming }] }} streaming/>}<div ref={bottom}/></div>{error && <p className="border-t border-red-200 bg-red-50 px-5 py-2 text-sm text-red-700">{error}</p>}<form onSubmit={send} className="border-t border-zinc-200 bg-zinc-50 p-4"><div className="flex gap-3"><textarea className="min-h-14 flex-1 resize-none rounded-xl border border-zinc-200 bg-white p-3 text-sm outline-none focus:border-blue-500" value={message} onChange={(event) => setMessage(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.nativeEvent.isComposing) { event.preventDefault(); event.currentTarget.form?.requestSubmit(); } }} placeholder="Message Pi… (Enter to send, Shift+Enter for a new line)"/>{busy ? <Button type="button" className="bg-zinc-700 hover:bg-zinc-600" title="Stop generation" onClick={() => abortRef.current?.abort()}><CircleStop size={17}/></Button> : <Button className="bg-slate-600 hover:bg-slate-500" title="Send message"><SendHorizontal size={17}/></Button>}</div></form></section></div></Card>;
+  return <Card className="h-[calc(100vh-215px)] min-h-[520px] p-0"><div className="flex h-full min-h-0 overflow-hidden rounded-xl"><aside className={`${sidebar ? "w-96" : "w-0"} flex shrink-0 flex-col overflow-hidden border-r border-zinc-200 bg-zinc-50 transition-all`}><div className="flex h-full w-96 min-h-0 flex-col p-4"><div className="mb-4 flex items-center justify-between"><h2 className="font-semibold">Conversations</h2><div className="relative"><Button title="New session" onClick={() => setNewMenu((current) => !current)}><Plus size={17}/></Button>{newMenu && <div className="absolute right-0 z-20 mt-1 w-48 rounded-lg border border-zinc-200 bg-white p-1 shadow-lg"><button className="w-full rounded px-3 py-2 text-left text-sm hover:bg-zinc-100" onClick={create}>Regular session</button><button className="w-full rounded px-3 py-2 text-left text-sm hover:bg-zinc-100" onClick={() => void openApplicationDialog()}>Application session</button></div>}</div></div><div className="relative mb-3"><Search className="absolute left-3 top-2.5 text-zinc-400" size={16}/><Input className="pl-9" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search sessions"/></div><div className="min-h-0 flex-1 space-y-1 overflow-y-auto pr-1">{filtered.map((session) => <button key={session.id} onClick={() => { setCopiedSessionId(false); openConversation(session.id); }} className={`w-full rounded-lg p-3 text-left hover:bg-white ${selected === session.id ? "bg-white shadow-sm ring-1 ring-blue-200" : ""}`}><div className="flex items-center gap-2"><MessageSquare size={15} className="text-blue-600"/><span className="min-w-0 flex-1 truncate text-sm font-medium">{session.name || session.preview || "New conversation"}</span><span className="text-xs text-zinc-400">{ago(session.updatedAt)}</span></div><p className="mt-1 truncate text-xs text-zinc-500">{session.preview || `${session.messageCount} messages`}</p><p className="mt-1 truncate font-mono text-[10px] text-zinc-400">{session.id}</p></button>)}{filtered.length === 0 && <p className="p-4 text-center text-sm text-zinc-500">No sessions found.</p>}</div></div></aside><section className="flex min-h-0 min-w-0 flex-1 flex-col"><header className="flex items-center gap-3 border-b border-zinc-200 px-5 py-4"><Button className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200" onClick={() => setSidebar((current) => !current)}><PanelLeft size={17}/></Button><div className="min-w-0"><div className="flex items-center gap-1">{!editingName && <h2 className="truncate font-semibold">{selected ? activeSession?.name || activeSession?.preview || "Untitled session" : "New conversation"}</h2>}{selected && !editingName && <button className="shrink-0 rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-900" title="Rename session" onClick={() => { setSessionName(activeSession?.name || activeSession?.preview || ""); setEditingName(true); }}><Pencil size={14}/></button>}</div>{selected && editingName && <div className="mt-2 flex items-center gap-1"><Input autoFocus className="h-8 min-w-64" value={sessionName} onChange={(event) => setSessionName(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") void rename(); if (event.key === "Escape") setEditingName(false); }}/><button className="rounded p-1.5 text-emerald-700 hover:bg-emerald-50" title="Save session name" onClick={() => void rename()}><Check size={16}/></button><button className="rounded p-1.5 text-zinc-500 hover:bg-zinc-100" title="Cancel" onClick={() => setEditingName(false)}><X size={16}/></button></div>}<p className="text-xs text-zinc-500">Profile: {profile}</p>{selected && <div className="mt-1 flex items-center gap-1 text-xs text-zinc-400"><span className="truncate font-mono">{selected}</span><button className="shrink-0 rounded p-1 hover:bg-zinc-100" title="Copy session ID" onClick={() => void copySessionId()}>{copiedSessionId ? <Check size={13}/> : <Copy size={13}/>}</button></div>}</div>{selected && <Button className="ml-auto bg-zinc-100 text-zinc-700 hover:bg-red-50 hover:text-red-700" title="Delete conversation" onClick={remove} disabled={busy}><Trash2 size={17}/></Button>}</header><div ref={conversation} onScroll={(event) => { if (event.currentTarget.scrollTop < 80) void loadOlder(); }} className="min-h-0 flex-1 space-y-5 overflow-y-auto bg-white px-5 py-6">{loadingOlder && <div className="py-2 text-center text-xs text-zinc-400">Loading older messages…</div>}{hasMore && !loadingOlder && <div className="py-2 text-center text-xs text-zinc-400">Scroll up to load older messages</div>}{!selected && entries.length === 0 && <div className="mx-auto mt-28 max-w-md text-center"><div className="mx-auto mb-4 w-fit rounded-2xl bg-blue-50 p-4 text-blue-600"><Bot size={30}/></div><h3 className="text-xl font-semibold">Start a conversation</h3><p className="mt-2 text-sm text-zinc-500">Write a message below or choose a previous session.</p></div>}{entries.filter((entry) => entry.role !== "toolResult").map((entry) => <Message key={entry.id} entry={entry}/>) }{busy && <Message entry={{ id: "streaming", type: "message", role: "assistant", timestamp: new Date().toISOString(), content: [{ type: "text", text: streaming }] }} streaming/>}<div ref={bottom}/></div>{error && <p className="border-t border-red-200 bg-red-50 px-5 py-2 text-sm text-red-700">{error}</p>}<form onSubmit={send} className="border-t border-zinc-200 bg-zinc-50 p-4"><div className="flex gap-3"><textarea className="min-h-14 flex-1 resize-none rounded-xl border border-zinc-200 bg-white p-3 text-sm outline-none focus:border-blue-500" value={message} onChange={(event) => setMessage(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.nativeEvent.isComposing) { event.preventDefault(); event.currentTarget.form?.requestSubmit(); } }} placeholder="Message Pi… (Enter to send, Shift+Enter for a new line)"/>{busy ? <Button type="button" className="bg-zinc-700 hover:bg-zinc-600" title="Stop generation" onClick={() => abortRef.current?.abort()}><CircleStop size={17}/></Button> : <Button className="bg-slate-600 hover:bg-slate-500" title="Send message"><SendHorizontal size={17}/></Button>}</div></form></section></div>{applicationDialog && <div className="fixed inset-0 z-50 grid place-items-center bg-black/30 p-4" role="dialog" aria-modal="true"><Card className="w-full max-w-md"><h3 className="text-lg font-semibold">Application session</h3><p className="mt-1 text-sm text-zinc-500">Creates a manual Console session with Context Memory for the selected Application and identity.</p><div className="mt-4 grid gap-4"><label className="grid gap-1.5 text-sm font-medium">Application<select className="rounded-md border border-zinc-200 px-3 py-2 font-normal" value={application} onChange={(event) => setApplication(event.target.value)}><option value="">Select an Application</option>{applications.map((item) => <option key={item.slug} value={item.slug}>{item.name}</option>)}</select></label><label className="grid gap-1.5 text-sm font-medium">Identity key<Input value={identityKey} onChange={(event) => setIdentityKey(event.target.value)} placeholder="e.g. person@example.com"/></label><div className="flex justify-end gap-2"><Button className="bg-zinc-700 hover:bg-zinc-600" onClick={() => setApplicationDialog(false)}>Cancel</Button><Button disabled={creatingApplicationSession} onClick={() => void createApplicationSession()}>{creatingApplicationSession ? <Loader2 className="animate-spin" size={17}/> : "Create session"}</Button></div></div></Card></div>}</Card>;
 }
 function Message({ entry, streaming = false }: { entry: Entry; streaming?: boolean }) { const [copied, setCopied] = useState(false); const copy = async () => { try { await navigator.clipboard.writeText(text(entry)); setCopied(true); window.setTimeout(() => setCopied(false), 2_000); } catch { /* The copy icon remains available for retry. */ } }; if (entry.type !== "message") return <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">{entry.type.replace("_", " ")}: {entry.summary || "Conversation context updated."}</div>; const user = entry.role === "user", assistant = entry.role === "assistant"; const thinking = entry.content?.filter((block) => block.type === "thinking") ?? []; return <article className={`flex gap-3 ${user ? "justify-end" : "justify-start"}`}><div className={`mt-1 grid size-8 shrink-0 place-items-center rounded-full ${user ? "order-2 bg-blue-600 text-white" : "bg-zinc-100 text-zinc-600"}`}>{user ? <User size={16}/> : <Bot size={16}/>}</div><div className={`min-w-0 max-w-[80%] overflow-hidden break-words [overflow-wrap:anywhere] rounded-2xl px-4 py-3 text-sm ${user ? "bg-blue-600 text-white" : entry.isError ? "bg-red-50 text-red-800" : entry.tools?.length ? "bg-[#f7fbfb] text-zinc-800" : "bg-zinc-100 text-zinc-800"}`}><div className={`prose prose-sm max-w-none break-words [&_pre]:whitespace-pre-wrap [&_pre]:break-all ${user ? "prose-invert" : ""}`}><ReactMarkdown remarkPlugins={[remarkGfm]}>{text(entry) || (streaming ? "" : entry.toolName ? `Tool result: ${entry.toolName}` : "")}</ReactMarkdown></div>{streaming && <Loader2 className="mt-2 animate-spin" size={15}/>} {entry.tools?.map((tool, index) => <details open key={`${tool.name}-${index}`} className="mt-3 rounded-lg p-2"><summary className="cursor-pointer font-medium">Tool: {tool.name}</summary><pre className="mt-2 overflow-auto text-xs">{JSON.stringify(tool.arguments, null, 2)}</pre></details>)}{thinking.length > 0 && <details className="mt-3 rounded-lg bg-black/5 p-2"><summary className="flex cursor-pointer items-center gap-1 font-medium">Reasoning <ChevronDown size={14}/></summary>{thinking.map((block, index) => <p key={index} className="mt-2 whitespace-pre-wrap text-xs opacity-80">{block.text}</p>)}</details>}<div className={`mt-2 flex items-center gap-2 text-[11px] ${user ? "text-blue-100" : "text-zinc-400"}`}><span>{entry.role === "toolResult" ? "Tool result" : user ? "You" : "Pi"}</span><span>{new Date(entry.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</span>{text(entry) && <button className="ml-auto" title="Copy" onClick={() => void copy()}>{copied ? <Check size={13}/> : <Copy size={13}/>}</button>}</div></div></article>; }

package/extensions/pi-console-webui/components/console-page.tsx

@@ -17,7 +17,9 @@ export async function ConsolePage({ section, applicationSlug, profile = "default
     else if (section === "guardrails") initial.guardrails = await piGet(`profiles/${profile}/guardrails`);
     else if (section === "packages") initial.packages = await piGet(`profiles/${profile}/packages`);
     else if (section === "pulses") initial.pulses = await piGet(`profiles/${profile}/pulses`);
-    else if (section === "skills" || section === "tools" || section === "extensions") initial.resources = await piGet(`profiles/${profile}/resources/${section}`);
+    // Tool discovery can require booting a sandboxed Pi runtime. Let the client
+    // render the Tools workspace immediately and load its catalog asynchronously.
+    else if (section === "skills" || section === "extensions") initial.resources = await piGet(`profiles/${profile}/resources/${section}`);
   } catch (error) { initial.error = error instanceof Error ? error.message : String(error); }
   return <Console section={section} applicationSlug={applicationSlug} initial={initial}/>;
 }