@agent-native/core 0.109.2 → 0.109.3

package/corpus/core/src/server/http-response-telemetry.ts

@@ -1,18 +1,58 @@
-import { defineEventHandler, getHeader, getMethod } from "h3";
-import type { EventHandler, H3Event } from "h3";
+import { randomUUID } from "node:crypto";
 
+import {
+  getHeader,
+  getMethod,
+  getResponseStatus,
+  setResponseHeader,
+  setServerTiming,
+} from "h3";
+import type { H3Event } from "h3";
+
+import {
+  claimStartupDatabaseTelemetry,
+  createDatabaseRequestTelemetry,
+  enterDatabaseRequestTelemetry,
+  type DatabaseRequestTelemetry,
+} from "../db/request-telemetry.js";
 import { getDatabaseRuntimeFingerprint } from "../db/runtime-diagnostics.js";
 import { isMcpPublicPath } from "../mcp/route-paths.js";
 import { track } from "../tracking/index.js";
 import { getAppName } from "./app-name.js";
 
 const TELEMETRY_EVENT_NAME = "http.response";
+const REQUEST_ID_HEADER = "x-agent-native-request-id";
 const TRACKING_INGEST_PATHS = new Set([
   "/track",
   "/api/analytics/track",
   "/api/events/track",
   "/_agent-native/track",
 ]);
+const PROCESS_STATE_KEY = Symbol.for(
+  "@agent-native/core/http-response-telemetry.process-state",
+);
+type ProcessTelemetryState = { requestSequence: number };
+type GlobalWithProcessTelemetry = typeof globalThis & {
+  [PROCESS_STATE_KEY]?: ProcessTelemetryState;
+};
+const globalRef = globalThis as GlobalWithProcessTelemetry;
+const processState =
+  globalRef[PROCESS_STATE_KEY] ??
+  (globalRef[PROCESS_STATE_KEY] = { requestSequence: 0 });
+const REQUEST_TELEMETRY_KEY = Symbol.for(
+  "@agent-native/core/http-response-telemetry.request",
+);
+const installedApps = new WeakSet<object>();
+
+interface HttpRequestTelemetryState {
+  startedAt: number;
+  requestId: string;
+  processAgeAtStartMs: number;
+  requestSequence: number;
+  frameworkReadyWaitMs: number;
+  db: DatabaseRequestTelemetry;
+  startupDb?: DatabaseRequestTelemetry;
+}
 
 function envValue(key: string): string | undefined {
   const value = process.env[key]?.trim();
@@ -27,9 +67,9 @@ function boolEnv(key: string): boolean {
 
 function sampleRate(): number {
   const raw = envValue("AGENT_NATIVE_HTTP_TELEMETRY_SAMPLE_RATE");
-  if (!raw) return 1;
+  if (!raw) return 0.1;
   const parsed = Number.parseFloat(raw);
-  if (!Number.isFinite(parsed)) return 1;
+  if (!Number.isFinite(parsed)) return 0.1;
   return Math.max(0, Math.min(1, parsed));
 }
 
@@ -107,31 +147,63 @@ function organizationForHost(host: string | undefined): string | undefined {
     : undefined;
 }
 
-function shouldTrack(pathname: string, statusCode: number): boolean {
+function shouldTrack(
+  pathname: string,
+  statusCode: number,
+  state: HttpRequestTelemetryState,
+): boolean {
   if (shouldDisableTelemetry()) return false;
   if (TRACKING_INGEST_PATHS.has(pathname)) return false;
   if (pathname.startsWith("/api/analytics/replay")) return false;
   if (statusCode >= 500) return true;
+  if (
+    statusCode >= 400 &&
+    statusCode < 500 &&
+    /(?:^|\/)_agent-native\/actions(?:\/|$)/.test(pathname)
+  ) {
+    return true;
+  }
+  if (state.requestSequence === 1) return true;
+  if (state.startupDb) return true;
+  if (Date.now() - state.startedAt >= 1_000) return true;
+  if (state.db.errorCount > 0 || state.db.timeoutCount > 0) {
+    return true;
+  }
   const rate = sampleRate();
   if (rate <= 0) return false;
   if (rate >= 1) return true;
   return Math.random() < rate;
 }
 
-function responseStatusCode(event: H3Event): number {
+function responseStatusCode(event: H3Event, response?: Response): number {
   const raw =
+    response?.status ??
     (event.node?.res as any)?.statusCode ??
     (event.node?.res as any)?.status ??
-    (event as any).res?.status ??
+    getResponseStatus(event) ??
     200;
   const parsed = Number(raw);
   return Number.isFinite(parsed) ? parsed : 200;
 }
 
-function emitTelemetry(event: H3Event, startedAt: number): void {
-  const statusCode = responseStatusCode(event);
+function runtimeProvider(): string {
+  if (process.env.NETLIFY) return "netlify";
+  if (process.env.VERCEL) return "vercel";
+  if (process.env.AWS_LAMBDA_FUNCTION_NAME || process.env.LAMBDA_TASK_ROOT) {
+    return "aws-lambda";
+  }
+  if (process.env.CF_PAGES) return "cloudflare-pages";
+  return "node";
+}
+
+function emitTelemetry(
+  event: H3Event,
+  state: HttpRequestTelemetryState,
+  response?: Response,
+): void {
+  const statusCode = responseStatusCode(event, response);
   const pathname = requestPath(event);
-  if (!shouldTrack(pathname, statusCode)) return;
+  if (!shouldTrack(pathname, statusCode, state)) return;
 
   try {
     const host = hostForEvent(event);
@@ -146,7 +218,17 @@ function emitTelemetry(event: H3Event, startedAt: number): void {
       route_kind: routeKind(pathname),
       status_code: statusCode,
       status_class: statusClass(statusCode),
-      duration_ms: Math.max(0, Date.now() - startedAt),
+      duration_ms: Math.max(0, Date.now() - state.startedAt),
+      request_id: state.requestId,
+      measurement: "nitro_request",
+      cold_start: state.requestSequence === 1,
+      request_sequence: state.requestSequence,
+      process_age_ms: state.processAgeAtStartMs,
+      framework_ready_wait_ms: state.frameworkReadyWaitMs,
+      runtime_provider: runtimeProvider(),
+      function_name: envValue("AWS_LAMBDA_FUNCTION_NAME"),
+      function_memory_mb: envValue("AWS_LAMBDA_FUNCTION_MEMORY_SIZE"),
+      region: envValue("AWS_REGION") ?? envValue("VERCEL_REGION"),
       host,
       environment: envValue("NODE_ENV"),
       deploy_context: envValue("CONTEXT") ?? envValue("VERCEL_ENV"),
@@ -161,34 +243,154 @@ function emitTelemetry(event: H3Event, startedAt: number): void {
       db_url_hash: db.urlHash,
       db_neon_endpoint: db.neon?.endpointId,
       db_neon_pooled: db.neon?.pooled,
+      db_operation_count: state.db.operationCount,
+      db_query_count: state.db.queryCount,
+      db_connect_count: state.db.connectCount,
+      db_retry_count: state.db.retryCount,
+      db_error_count: state.db.errorCount,
+      db_timeout_count: state.db.timeoutCount,
+      db_operation_total_ms: Math.round(state.db.operationTotalMs),
+      db_operation_wall_ms: Math.round(state.db.operationWallMs),
+      db_query_total_ms: Math.round(state.db.queryTotalMs),
+      db_connect_total_ms: Math.round(state.db.connectTotalMs),
+      db_slowest_operation_ms: Math.round(state.db.slowestOperationMs),
+      startup_db_operation_count: state.startupDb?.operationCount,
+      startup_db_query_count: state.startupDb?.queryCount,
+      startup_db_connect_count: state.startupDb?.connectCount,
+      startup_db_retry_count: state.startupDb?.retryCount,
+      startup_db_error_count: state.startupDb?.errorCount,
+      startup_db_timeout_count: state.startupDb?.timeoutCount,
+      startup_db_operation_total_ms: state.startupDb
+        ? Math.round(state.startupDb.operationTotalMs)
+        : undefined,
+      startup_db_operation_wall_ms: state.startupDb
+        ? Math.round(state.startupDb.operationWallMs)
+        : undefined,
+      startup_db_query_total_ms: state.startupDb
+        ? Math.round(state.startupDb.queryTotalMs)
+        : undefined,
+      startup_db_connect_total_ms: state.startupDb
+        ? Math.round(state.startupDb.connectTotalMs)
+        : undefined,
+      startup_db_slowest_operation_ms: state.startupDb
+        ? Math.round(state.startupDb.slowestOperationMs)
+        : undefined,
     });
   } catch {
     // Response telemetry is best-effort. Never perturb request handling.
   }
 }
 
-export function createHttpResponseTelemetryMiddleware(): EventHandler {
-  return defineEventHandler((event) => {
-    const startedAt = Date.now();
-    const res = event.node?.res as
-      | {
-          once?: (event: "finish" | "close", cb: () => void) => void;
-          on?: (event: "finish" | "close", cb: () => void) => void;
-        }
-      | undefined;
-    let emitted = false;
-    const emitOnce = () => {
-      if (emitted) return;
-      emitted = true;
-      emitTelemetry(event, startedAt);
+function requestTelemetryState(
+  event: H3Event,
+): HttpRequestTelemetryState | undefined {
+  return (event.context as Record<PropertyKey, unknown>)[
+    REQUEST_TELEMETRY_KEY
+  ] as HttpRequestTelemetryState | undefined;
+}
+
+function appendServerTiming(
+  response: Response,
+  event: H3Event,
+  name: string,
+  durationMs: number,
+): void {
+  const duration = Math.max(0, Math.round(durationMs));
+  try {
+    response.headers.append("server-timing", `${name};dur=${duration}`);
+  } catch {
+    try {
+      setServerTiming(event, name, { dur: duration });
+    } catch {
+      // Some adapters finalize headers eagerly. Tracking still runs.
+    }
+  }
+}
+
+export function recordFrameworkReadyWait(
+  event: H3Event,
+  durationMs: number,
+): void {
+  const state = requestTelemetryState(event);
+  if (state) {
+    state.frameworkReadyWaitMs += Math.max(0, durationMs);
+    state.startupDb ??= claimStartupDatabaseTelemetry();
+  }
+}
+
+export function installHttpResponseTelemetryHooks(nitroApp: any): void {
+  if (!nitroApp || installedApps.has(nitroApp)) return;
+  const hooks = nitroApp.hooks;
+  if (!hooks?.hook) return;
+  installedApps.add(nitroApp);
+
+  hooks.hook("request", (event: H3Event) => {
+    const state: HttpRequestTelemetryState = {
+      startedAt: Date.now(),
+      requestId: randomUUID(),
+      processAgeAtStartMs: Math.max(0, Math.round(process.uptime() * 1_000)),
+      requestSequence: ++processState.requestSequence,
+      frameworkReadyWaitMs: 0,
+      db: createDatabaseRequestTelemetry(),
     };
+    (event.context as Record<PropertyKey, unknown>)[REQUEST_TELEMETRY_KEY] =
+      state;
+    enterDatabaseRequestTelemetry(state.db);
+  });
 
-    if (typeof res?.once === "function") {
-      res.once("finish", emitOnce);
-      res.once("close", emitOnce);
-    } else if (typeof res?.on === "function") {
-      res.on("finish", emitOnce);
-      res.on("close", emitOnce);
+  hooks.hook("response", (response: Response, event: H3Event) => {
+    const state = requestTelemetryState(event);
+    if (!state) return;
+
+    const durationMs = Math.max(0, Date.now() - state.startedAt);
+    try {
+      response.headers.set(REQUEST_ID_HEADER, state.requestId);
+    } catch {
+      try {
+        setResponseHeader(event, REQUEST_ID_HEADER, state.requestId);
+      } catch {
+        // Some adapters finalize headers eagerly. Tracking still has the id.
+      }
+    }
+    appendServerTiming(response, event, "app", durationMs);
+    if (state.frameworkReadyWaitMs > 0) {
+      appendServerTiming(
+        response,
+        event,
+        "startup",
+        state.frameworkReadyWaitMs,
+      );
     }
+    if (state.db.operationCount > 0) {
+      appendServerTiming(response, event, "db", state.db.operationWallMs);
+      appendServerTiming(
+        response,
+        event,
+        "db-connect",
+        state.db.connectTotalMs,
+      );
+      appendServerTiming(
+        response,
+        event,
+        "db-slowest",
+        state.db.slowestOperationMs,
+      );
+    }
+    if (state.startupDb && state.startupDb.operationCount > 0) {
+      appendServerTiming(
+        response,
+        event,
+        "startup-db",
+        state.startupDb.operationWallMs,
+      );
+      appendServerTiming(
+        response,
+        event,
+        "startup-db-connect",
+        state.startupDb.connectTotalMs,
+      );
+    }
+
+    emitTelemetry(event, state, response);
   });
 }

package/corpus/core/src/templates/workspace-core/.agents/skills/tracking/SKILL.md

@@ -138,6 +138,25 @@ Attribution parsing is fully defensive and never blocks signup — a missing/mal
 Other framework-level baseline events:
 
 - `session status` from `useSession()`, with `signed_in`
+- `action.response` from the browser action transport, with action name,
+  browser-perceived duration and TTFB, response status/outcome, response size
+  when known, and parsed `Server-Timing` phases for framework readiness and
+  database work. Its `request_id` joins the exact browser and server events.
+  This separates server time from CDN/network/body overhead.
+- `http.response` from Nitro request/response hooks, with normalized path,
+  status, request duration, first-request-in-isolate cold marker, process age,
+  framework readiness wait, deploy/runtime fingerprint, database
+  connection/query counts and timings, retries, timeouts, and failures. It also
+  emits `Server-Timing` for `app`, `startup`, `db`, `db-connect`, and
+  `db-slowest` plus an `X-Agent-Native-Request-Id` correlation header where
+  applicable. Query text and parameters are never captured.
+  Database activity that begins during the first two minutes of process/plugin
+  initialization is reported separately as `startup_db_*` on the first
+  framework request that passes the readiness gate.
+  Slow, cold-isolate, server failures, and 4xx action routes are always
+  retained; fast successful requests default to 10% sampling. Override with
+  `AGENT_NATIVE_HTTP_TELEMETRY_SAMPLE_RATE` on the server and
+  `VITE_AGENT_NATIVE_ACTION_TELEMETRY_SAMPLE_RATE` in the browser.
 - `signup` from Better Auth user creation, with `auth_provider`, `auth_user_id`, and first-touch referral attribution (`referral_source`, `referrer_user`, `referral_medium`, `referral_campaign`, `utm_*`, `first_touch_path`, `landing_referrer` — see "Referral / viral attribution" above)
 - `builder connect clicked` and `builder connect popup blocked` from browser Connect Builder CTAs
 - `builder connect started`, `builder connect succeeded`, `builder connect failed`, `builder disconnect succeeded`, and `builder disconnect failed` from the Builder connection routes, with LLM connection context when resolvable

package/corpus/templates/clips/actions/finalize-recording.ts

@@ -204,7 +204,9 @@ async function verifyServedMediaUrl(videoUrl: string): Promise<number | null> {
       const statusOk = response.status === 200 || response.status === 206;
       if (statusOk) {
         const servedBytes = servedMediaSizeBytes(response);
-        if (await responseHasReadableMediaBytes(response)) {
+        if (servedBytes === null) {
+          lastFailure = "Stored media byte count could not be verified";
+        } else if (await responseHasReadableMediaBytes(response)) {
           // Builder stable video URLs intentionally replace the source object
           // with a smaller compressed generation at the same URL. A positive,
           // readable object is the invariant here; source-byte equality is

package/corpus/templates/clips/actions/set-mobile-capture-state.ts

@@ -6,7 +6,7 @@ export const MOBILE_CAPTURE_STATE_KEY = "mobile-capture-state";
 
 const mobileCaptureStateSchema = z
   .object({
-    view: z.enum(["home", "dictate", "meeting", "video"]),
+    view: z.enum(["home", "dictate", "meeting", "video", "clips"]),
     phase: z.enum([
       "idle",
       "ready",
@@ -15,9 +15,12 @@ const mobileCaptureStateSchema = z
       "saving",
       "processing",
       "review",
+      "browsing",
+      "playing",
       "error",
     ]),
     captureId: z.string().trim().min(1).max(200).optional(),
+    recordingId: z.string().trim().min(1).max(200).optional(),
   })
   .strict();
 

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -384,12 +384,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
           ) : (
             <>
               <div className="px-3 py-3">
-                <Button
-                  className="w-full gap-1.5"
-                  variant="outline"
-                  size="sm"
-                  asChild
-                >
+                <Button className="w-full gap-1.5" size="sm" asChild>
                   <NavLink to="/record">
                     <IconPlayerRecord className="h-4 w-4" />
                     {t("navigation.newRecording")}

package/corpus/templates/clips/changelog/2026-07-18-new-recording-is-now-emphasized-as-the-primary-action-in-the.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-18
+---
+
+New recording is now emphasized as the primary action in the library sidebar.

package/corpus/templates/clips/changelog/2026-07-18-recordings-now-remain-safely-recoverable-until-the-stored-me.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-18
+---
+
+Recordings now remain safely recoverable until the stored media size is verified.

package/corpus/templates/tasks/AGENTS.md

@@ -38,6 +38,7 @@ Tasks is a task-list-first agent-native app. The task list at `/tasks` is the de
 | `update-visible-task-fields` | POST   | Replace which custom fields appear on task cards (max 3)                                     |
 | `view-screen`                | —      | Read navigation, UI bulk selection, visible tasks, and inbox snapshot                        |
 | `navigate`                   | —      | Move UI to a view: `tasks`, `inbox`, `fields`, `extensions`, `team` (`home`/`ask` → `tasks`) |
+| `render-task-list-inline`    | —      | Render an interactive task-list widget inline in chat without leaving the current view       |
 
 ## Store Functions And Transactions
 
@@ -128,6 +129,8 @@ Default navigation shape on `/tasks`:
 - Capture in chat → `create-inbox-item` by default; use `create-task` only when the user asks to add directly to the task list.
 - Call `view-screen` before ambiguous edits when the user says "this task", "these tasks", "this inbox item", or "the list".
 - On `/tasks` or `/inbox`, `view-screen` returns `list` (with `items`), optional `selectedItem` (`inListSnapshot`), and optional `selection` (`selectedItems`, `selectedIdsNotInVisibleList`) when bulk-select is active.
+- When the user asks to see, review, or manage tasks while `navigation.view` is not `tasks`, call `render-task-list-inline` instead of navigating away. Pass `includeDone: true` when completed tasks should be included. The widget can add tasks and toggle completion through the existing task actions.
+- When the user is already on `/tasks`, use `view-screen` and the native task list for task-list context unless the user explicitly asks for an inline widget.
 - Prefer `selection.selectedItems` when the user has UI rows selected; fall back to `selectedItem` for a single deep-link highlight.
 - `delete-task`, `bulk-delete-tasks`, and `delete-inbox-item` only after explicit user confirmation in chat.
 - Use `navigation.includeDone` and `list` from `view-screen` to match what the user sees on `/tasks`.

package/corpus/templates/tasks/actions/render-task-list-inline.ts

@@ -0,0 +1,202 @@
+import {
+  ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER,
+  defineAction,
+} from "@agent-native/core";
+import { z } from "zod";
+
+export const TASK_LIST_INLINE_CONTENT = `
+<script>
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("taskListWidget", () => ({
+      tasks: [],
+      draft: "",
+      includeDone: false,
+      isLoading: true,
+      isSaving: false,
+      pending: {},
+      error: "",
+      hasCompletedTasks: false,
+      init() {
+        this.includeDone = Boolean(window.slotContext?.includeDone);
+        window.onSlotContext?.((context) => {
+          if (context?.includeDone === undefined) return;
+          this.includeDone = Boolean(context.includeDone);
+          void this.refresh();
+        });
+        void this.refresh();
+      },
+      parseResult(result) {
+        if (typeof result === "string") {
+          try {
+            return JSON.parse(result);
+          } catch {
+            return {};
+          }
+        }
+        return result && typeof result === "object" ? result : {};
+      },
+      async refresh() {
+        this.isLoading = true;
+        this.error = "";
+        try {
+          const data = this.parseResult(
+            await appAction("list-tasks", { includeDone: this.includeDone }),
+          );
+          this.tasks = Array.isArray(data.tasks) ? data.tasks : [];
+          this.hasCompletedTasks = data.hasCompletedTasks === true;
+        } catch (error) {
+          this.error = error?.message || "Could not load tasks.";
+        } finally {
+          this.isLoading = false;
+        }
+      },
+      summaryLabel() {
+        if (this.isLoading) return "Loading your task list…";
+        const remaining = this.tasks.filter((task) => !task.done).length;
+        return this.includeDone
+          ? this.tasks.length + " shown · " + remaining + " remaining"
+          : remaining + " remaining";
+      },
+      setIncludeDone(value) {
+        this.includeDone = Boolean(value);
+        void this.refresh();
+      },
+      async toggle(task, done) {
+        const previous = task.done;
+        task.done = Boolean(done);
+        this.pending[task.id] = true;
+        this.error = "";
+        try {
+          await appAction("update-task", { taskId: task.id, done: task.done });
+          if (!this.includeDone && task.done) {
+            this.tasks = this.tasks.filter((item) => item.id !== task.id);
+          }
+          this.hasCompletedTasks = this.hasCompletedTasks || task.done;
+        } catch (error) {
+          task.done = previous;
+          this.error = error?.message || "Could not update that task.";
+        } finally {
+          delete this.pending[task.id];
+        }
+      },
+      async addTask() {
+        const title = this.draft.trim();
+        if (!title || this.isSaving) return;
+        this.isSaving = true;
+        this.error = "";
+        try {
+          await appAction("create-task", { title });
+          this.draft = "";
+          await this.refresh();
+        } catch (error) {
+          this.error = error?.message || "Could not add that task.";
+        } finally {
+          this.isSaving = false;
+        }
+      },
+    }));
+  });
+</script>
+
+<div x-data="taskListWidget" class="w-full max-w-xl rounded-xl border border-border bg-card p-4 text-card-foreground shadow-sm">
+  <div class="flex items-start justify-between gap-3">
+    <div class="min-w-0">
+      <h2 class="text-sm font-semibold">Tasks</h2>
+      <p class="mt-1 text-xs text-muted-foreground" x-text="summaryLabel()"></p>
+    </div>
+    <button
+      type="button"
+      class="shrink-0 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+      @click="refresh()"
+      :disabled="isLoading"
+    >Refresh</button>
+  </div>
+
+  <form class="mt-4 flex gap-2" @submit.prevent="addTask()">
+    <input
+      x-model="draft"
+      class="min-w-0 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+      aria-label="New task"
+      placeholder="Add a task"
+      :disabled="isSaving"
+    />
+    <button
+      type="submit"
+      class="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+      :disabled="isSaving || !draft.trim()"
+    >Add</button>
+  </form>
+
+  <label class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+    <input
+      type="checkbox"
+      class="size-3.5 accent-primary"
+      :checked="includeDone"
+      @change="setIncludeDone($event.target.checked)"
+    />
+    <span>Show completed</span>
+  </label>
+
+  <div x-show="error" class="mt-3 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive" role="alert">
+    <span x-text="error"></span>
+  </div>
+
+  <div x-show="isLoading" class="mt-4 space-y-2" aria-label="Loading tasks">
+    <div class="h-10 animate-pulse rounded-md bg-muted"></div>
+    <div class="h-10 animate-pulse rounded-md bg-muted"></div>
+  </div>
+
+  <div x-show="!isLoading && tasks.length === 0" class="mt-5 rounded-lg border border-dashed border-border px-3 py-5 text-center">
+    <p class="text-sm font-medium" x-text="hasCompletedTasks && !includeDone ? 'All tasks complete' : 'No tasks yet'"></p>
+    <p class="mt-1 text-xs text-muted-foreground" x-text="hasCompletedTasks && !includeDone ? 'Show completed to review them.' : 'Add a task above to get started.'"></p>
+  </div>
+
+  <ul x-show="!isLoading && tasks.length > 0" class="mt-4 divide-y divide-border rounded-lg border border-border" aria-label="Tasks list">
+    <template x-for="task in tasks" :key="task.id">
+      <li class="flex items-center gap-3 px-3 py-3" :class="task.done ? 'text-muted-foreground' : ''">
+        <input
+          type="checkbox"
+          class="size-4 shrink-0 accent-primary"
+          :checked="task.done"
+          :disabled="pending[task.id]"
+          @change="toggle(task, $event.target.checked)"
+          :aria-label="task.done ? 'Mark ' + task.title + ' incomplete' : 'Mark ' + task.title + ' complete'"
+        />
+        <span class="min-w-0 flex-1 break-words text-sm" :class="task.done ? 'line-through' : ''" x-text="task.title"></span>
+      </li>
+    </template>
+  </ul>
+</div>
+`;
+
+export default defineAction({
+  description:
+    "Render the current task list as an interactive widget inline in chat without navigating away from the current page. Use when the user asks to see, review, or manage tasks while they are not on /tasks.",
+  schema: z.object({
+    includeDone: z
+      .boolean()
+      .default(false)
+      .describe("When true, show completed tasks in the widget."),
+  }),
+  http: false,
+  readOnly: true,
+  chatUI: {
+    renderer: ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER,
+    title: "Task list",
+    description: "Render the task list inline in the conversation.",
+  },
+  run: async (args) => ({
+    ok: true,
+    inlineExtension: {
+      mode: "transient" as const,
+      id: `tasks-inline-${Date.now().toString(36)}-${Math.random()
+        .toString(36)
+        .slice(2, 8)}`,
+      name: "Task list",
+      description: args.includeDone ? "Open and completed tasks" : "Open tasks",
+      content: TASK_LIST_INLINE_CONTENT,
+      context: { includeDone: args.includeDone },
+      initialHeight: 360,
+    },
+  }),
+});

package/corpus/templates/tasks/changelog/2026-07-18-task-lists-can-now-appear-as-interactive-widgets-inline-in-c.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-18
+---
+
+Task lists can now appear as interactive widgets inline in chat without leaving the current page.

package/corpus/templates/tasks/docs/features/f8-chat.mdx

@@ -24,6 +24,7 @@ The **chat** is a first-class surface of the Tasks app — not a side panel bolt
 - **Triage inbox** — list, edit, delete, reorder, and **mark ready** ([F4](./f4-inbox.mdx)).
 - **Filter** the task list the same way as the UI (e.g. hide completed tasks).
 - **Ask what's on screen** — the agent can read the user's current view and selection before acting.
+- **Keep the current page open while reviewing tasks** — when the user is elsewhere in the app, the agent can show an interactive task-list widget inline in chat.
 
 <!-- status: todo -->
 
@@ -51,6 +52,7 @@ Every UI capability maps to agent tools (actions). The agent uses these — not
 | **[F2 Custom fields](./f2-custom-fields.mdx)** | Create, rename, configure options; set field values; delete fields                                       |
 | **Navigation**                                 | Open inbox, main task page, or a specific task via `navigate`                                            |
 | **Context**                                    | Read current screen and bulk `selection` via `view-screen`                                               |
+| **Inline task list**                           | Render the task list in chat with `render-task-list-inline` when the user is not on `/tasks`             |
 
 <!-- status: todo -->