@agent-native/core 0.109.2 → 0.109.4

package/corpus/templates/content/package.json

@@ -31,41 +31,41 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@tabler/icons-react": "catalog:",
-    "@tiptap/core": "3.27.1",
-    "@tiptap/extension-blockquote": "3.27.1",
-    "@tiptap/extension-bubble-menu": "3.27.1",
-    "@tiptap/extension-code-block-lowlight": "3.27.1",
-    "@tiptap/extension-collaboration": "3.27.1",
-    "@tiptap/extension-collaboration-caret": "3.27.1",
-    "@tiptap/extension-horizontal-rule": "3.27.1",
-    "@tiptap/extension-image": "3.27.1",
-    "@tiptap/extension-link": "3.27.1",
-    "@tiptap/extension-placeholder": "3.27.1",
-    "@tiptap/extension-table": "3.27.1",
-    "@tiptap/extension-table-cell": "3.27.1",
-    "@tiptap/extension-table-header": "3.27.1",
-    "@tiptap/extension-table-row": "3.27.1",
-    "@tiptap/extension-task-item": "3.27.1",
-    "@tiptap/extension-task-list": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
-    "@tiptap/starter-kit": "3.27.1",
-    "@tiptap/y-tiptap": "^3.0.5",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-blockquote": "catalog:",
+    "@tiptap/extension-bubble-menu": "catalog:",
+    "@tiptap/extension-code-block-lowlight": "catalog:",
+    "@tiptap/extension-collaboration": "catalog:",
+    "@tiptap/extension-collaboration-caret": "catalog:",
+    "@tiptap/extension-horizontal-rule": "catalog:",
+    "@tiptap/extension-image": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-placeholder": "catalog:",
+    "@tiptap/extension-table": "catalog:",
+    "@tiptap/extension-table-cell": "catalog:",
+    "@tiptap/extension-table-header": "catalog:",
+    "@tiptap/extension-table-row": "catalog:",
+    "@tiptap/extension-task-item": "catalog:",
+    "@tiptap/extension-task-list": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/y-tiptap": "catalog:",
     "drizzle-orm": "^0.45.2",
     "ffmpeg-static": "^5.3.0",
     "h3": "catalog:",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "catalog:",
     "isbot": "^5",
     "katex": "0.17.0",
-    "lowlight": "^3.3.0",
+    "lowlight": "catalog:",
     "prosemirror-markdown": "^1.13.4",
     "remark-mdx": "^3.1.1",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "tiptap-markdown": "^0.9.0",
+    "tiptap-markdown": "catalog:",
     "unified": "^11.0.5",
-    "y-protocols": "^1.0.7",
-    "yjs": "^13.6.31",
+    "y-protocols": "catalog:",
+    "yjs": "catalog:",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/corpus/templates/design/app/components/design/TweaksPanel.tsx

@@ -1,4 +1,5 @@
-import { useT, VisualTweakControl } from "@agent-native/core/client";
+import { useT } from "@agent-native/core/client";
+import { VisualTweakControl } from "@agent-native/toolkit/design-tweaks";
 import type { TweakDefinition } from "@shared/api";
 import {
   IconX,

package/corpus/templates/design/package.json

@@ -40,7 +40,7 @@
     "pako": "^3.0.0",
     "pdf-parse": "^2.4.5",
     "prettier": "^3.9.4",
-    "yjs": "^13.6.31",
+    "yjs": "catalog:",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/corpus/templates/mail/package.json

@@ -70,13 +70,13 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "catalog:",
     "@tanstack/react-query": "^5.99.2",
-    "@tiptap/extension-code-block-lowlight": "3.27.1",
-    "@tiptap/extension-image": "3.27.1",
-    "@tiptap/extension-link": "3.27.1",
-    "@tiptap/extension-placeholder": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
-    "@tiptap/starter-kit": "3.27.1",
+    "@tiptap/extension-code-block-lowlight": "catalog:",
+    "@tiptap/extension-image": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-placeholder": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
     "@types/node": "^24.2.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -88,7 +88,7 @@
     "dotenv": "^17.3.1",
     "drizzle-kit": "^0.31.10",
     "globals": "^16.3.0",
-    "lowlight": "^3.3.0",
+    "lowlight": "catalog:",
     "motion": "^12.38.0",
     "next-themes": "^0.4.6",
     "oxfmt": "catalog:",
@@ -100,7 +100,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "catalog:",
-    "tiptap-markdown": "^0.9.0",
+    "tiptap-markdown": "catalog:",
     "tsx": "^4.20.3",
     "typescript-7": "catalog:",
     "vaul": "^1.1.2",

package/corpus/templates/plan/.agents/skills/visual-plan/SKILL.md

@@ -290,6 +290,8 @@ folding framework chrome into the product UI.
   needs to operate the behavior. Keep the static wireframes in
   `content.canvas`, add the aligned functional prototype in
   `content.prototype`, and rely on the top visual tabs to switch between them.
+  When both surfaces are present, open the Wireframes tab by default; the
+  prototype remains available as the interactive follow-up view.
 - **Prototype-first** when the user asks to operate the UI or when interaction is
   the main question. Use `create-prototype-plan`, which still preserves static
   mocks where useful.

package/corpus/templates/plan/app/components/editor/PlanDocumentEditor.tsx

@@ -4,21 +4,21 @@ import {
   type BlockDataChangeMeta,
 } from "@agent-native/core/blocks";
 import {
+  generateTabId,
+  useT,
+  useCollaborativeDoc,
+  type UseCollaborativeDocResult,
+} from "@agent-native/core/client";
+import {
+  applyDocSurgically,
   DragHandle,
   RICH_MARKDOWN_PROGRAMMATIC_TRANSACTION,
   RunId,
   SharedRichEditor,
-  generateTabId,
-  useT,
-  useCollaborativeDoc,
   type DragHandleDropContext,
   type DragHandleOptions,
   type RichMarkdownCollabUser,
-  type UseCollaborativeDocResult,
-} from "@agent-native/core/client";
-// `applyDocSurgically` is re-exported from the editor subpath barrel (the top
-// `@agent-native/core/client` barrel doesn't surface the surgical helpers).
-import { applyDocSurgically } from "@agent-native/core/client/editor";
+} from "@agent-native/toolkit/editor";
 import { isNotionCompatibleBlockType } from "@shared/notion-compat";
 import {
   createPlanBlockId,

package/corpus/templates/plan/app/components/editor/planSlashCommands.ts

@@ -3,16 +3,16 @@ import {
   buildRegistryBlockSlashItems,
   getRegistryBlockSlashDescription,
   getRegistryBlockSlashSearchText,
-  type SlashCommandItem,
 } from "@agent-native/core/client";
+import type { SlashCommandItem } from "@agent-native/toolkit/editor";
 import { isNotionCompatibleBlockType } from "@shared/notion-compat";
 import { createPlanBlockId } from "@shared/plan-content";
 
 /**
- * The Tiptap editor handed to a slash command's `action`. Derived from the core
+ * The Tiptap editor handed to a slash command's `action`. Derived from the Toolkit
  * {@link SlashCommandItem} contract instead of importing `@tiptap/react`
  * directly, so this file carries no extra tiptap dependency (the plan template
- * uses tiptap transitively through `@agent-native/core/client`).
+ * uses tiptap through `@agent-native/toolkit/editor`).
  */
 type SlashEditor = Parameters<SlashCommandItem["action"]>[0];
 
@@ -20,7 +20,7 @@ type SlashEditor = Parameters<SlashCommandItem["action"]>[0];
  * The `insertTable` command is contributed by `@tiptap/extension-table`, which
  * the shared editor registers at runtime but whose `ChainedCommands` type
  * augmentation is not visible from this template (it has no direct tiptap
- * dependency — tiptap is transitive through `@agent-native/core/client`). This
+ * dependency — tiptap is transitive through `@agent-native/toolkit/editor`). This
  * narrow shape re-adds just that one command signature so the Table slash item
  * stays type-safe without importing tiptap here.
  */
@@ -34,7 +34,7 @@ type TableChain = {
 
 /**
  * Build the plan document editor's slash command list, returned in the exact
- * shape the shared core {@link SlashCommandItem} contract expects. `icon` is a
+ * shape the shared Toolkit {@link SlashCommandItem} contract expects. `icon` is a
  * short text glyph; `description` is compact visible copy; `searchText` carries
  * raw block types and aliases. `SharedRichEditor`/`RichMarkdownEditor` forward
  * this array to `SlashCommandMenu` via its `items` prop.
@@ -42,7 +42,7 @@ type TableChain = {
  * Two tiers of commands:
  *  - Base prose commands (Text, Headings, lists, quote, code, divider, table,
  *    image) drive standard Tiptap chains — mirroring the content app's slash set
- *    but emitting the core menu item type.
+ *    but emitting the Toolkit menu item type.
  *  - Registry block commands are derived from every `BlockSpec` whose
  *    `placement` includes `"block"`. Each inserts a `planBlock` node referencing
  *    the spec by `blockType` with a freshly minted `blockId`. The editor seeds

package/corpus/templates/plan/app/components/plan/PlanImageNode.tsx

@@ -1,8 +1,5 @@
-import {
-  SharedImage,
-  uploadEditorImage,
-  useT,
-} from "@agent-native/core/client";
+import { uploadEditorImage, useT } from "@agent-native/core/client";
+import { SharedImage } from "@agent-native/toolkit/editor";
 import {
   NodeViewWrapper,
   ReactNodeViewRenderer,
@@ -14,13 +11,13 @@ import { toast } from "sonner";
 import { PlanImageViewer } from "./PlanImageViewer";
 
 /**
- * The plan editor's image node. It extends the shared core `SharedImage` node —
+ * The plan editor's image node. It extends the shared Toolkit `SharedImage` node —
  * inheriting its byte-stable GFM `![alt](src)` serializer and the paste / drop /
  * `/image` upload plugin — and adds a React node view so editor images get the
  * same hover zoom button, lightbox, and three-dots menu (swap / download / copy)
  * as the read-only reader and structured image blocks.
  *
- * Plans inject this via `extraExtensions` with `features.image` off, so the core
+ * Plans inject this via `extraExtensions` with `features.image` off, so the shared
  * default image node never coexists with it. Content keeps its own richer image
  * node and is unaffected.
  */

package/corpus/templates/plan/app/components/plan/PlanMarkdownEditor.tsx

@@ -1,13 +1,15 @@
 import {
-  RichMarkdownEditor,
-  useCollaborativeDoc,
   generateTabId,
   uploadEditorImage,
+  useCollaborativeDoc,
+  type CollabUser,
+} from "@agent-native/core/client";
+import {
   createImageSlashCommand,
   DEFAULT_SLASH_COMMANDS,
+  RichMarkdownEditor,
   type RichMarkdownCollabUser,
-  type CollabUser,
-} from "@agent-native/core/client";
+} from "@agent-native/toolkit/editor";
 import { useCallback, useEffect, useRef } from "react";
 
 import { cn } from "@/lib/utils";

package/corpus/templates/plan/app/components/plan/PlanVisualSurface.tsx

@@ -67,7 +67,7 @@ export function PlanVisualSurface({
     ? `${selectedDesignElement.frameId ?? ""}::${selectedDesignElement.blockId ?? ""}::${selectedDesignElement.elementId}`
     : null;
   const [tabValue, setTabValue] = useState<"prototype" | "wireframes">(
-    designCanvas ? "wireframes" : prototype ? "prototype" : "wireframes",
+    "wireframes",
   );
   const requestedTabValue =
     requestedVisualMode === "prototype" || requestedVisualMode === "wireframes"

package/corpus/templates/plan/changelog/2026-07-18-visual-plans-now-open-on-wireframes-by-default-when-a-protot.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-18
+---
+
+Visual plans now open on Wireframes by default when a prototype is also available.

package/corpus/templates/plan/package.json

@@ -22,9 +22,9 @@
     "@fontsource-variable/vazirmatn": "^5.2.8",
     "@libsql/client": "^0.15.8",
     "@tabler/icons-react": "catalog:",
-    "@tiptap/core": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
+    "@tiptap/core": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
     "diff": "9.0.0",
     "drizzle-orm": "^0.45.2",
     "gray-matter": "^4.0.3",

package/corpus/templates/slides/app/components/editor/SlideStyleInspector.tsx

@@ -1,12 +1,12 @@
+import { useT } from "@agent-native/core/client";
 import {
-  useT,
   VisualColorPicker,
   VisualControlRow,
   VisualInspectorPanel,
   VisualInspectorSection,
   VisualScrubInput,
   VisualSegmentedControl,
-} from "@agent-native/core/client";
+} from "@agent-native/toolkit/design-tweaks";
 import type { DesignSystemData } from "@shared/api";
 import {
   IconAlignCenter,

package/corpus/templates/slides/app/components/editor/TweaksPanel.tsx

@@ -1,9 +1,9 @@
+import { useT } from "@agent-native/core/client";
 import {
-  useT,
   VisualInspectorPanel,
   VisualInspectorSection,
   VisualTweakControl,
-} from "@agent-native/core/client";
+} from "@agent-native/toolkit/design-tweaks";
 import { IconAdjustmentsHorizontal, IconX } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";

package/corpus/templates/slides/package.json

@@ -28,17 +28,17 @@
     "@google/genai": "^1.42.0",
     "@libsql/client": "^0.15.0",
     "@tabler/icons-react": "catalog:",
-    "@tiptap/core": "3.27.1",
-    "@tiptap/extension-collaboration": "3.27.1",
-    "@tiptap/extension-collaboration-caret": "3.27.1",
-    "@tiptap/extension-color": "3.27.1",
-    "@tiptap/extension-link": "3.27.1",
-    "@tiptap/extension-placeholder": "3.27.1",
-    "@tiptap/extension-text-style": "3.27.1",
-    "@tiptap/pm": "3.27.1",
-    "@tiptap/react": "3.27.1",
-    "@tiptap/starter-kit": "3.27.1",
-    "@tiptap/y-tiptap": "^3.0.5",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-collaboration": "catalog:",
+    "@tiptap/extension-collaboration-caret": "catalog:",
+    "@tiptap/extension-color": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-placeholder": "catalog:",
+    "@tiptap/extension-text-style": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/y-tiptap": "catalog:",
     "dom-to-pptx": "2.0.2",
     "dompurify": "^3.3.1",
     "dotenv": "^17.2.1",
@@ -57,8 +57,8 @@
     "pptxgenjs": "4.0.1",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
-    "y-protocols": "^1.0.7",
-    "yjs": "^13.6.31",
+    "y-protocols": "catalog:",
+    "yjs": "catalog:",
     "zod": "^4.3.6"
   },
   "devDependencies": {

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 -->
 

package/corpus/templates/tasks/server/plugins/agent-chat.ts

@@ -9,6 +9,7 @@ import actionsRegistry from "../../.generated/actions-registry.js";
 const INITIAL_TOOL_NAMES = [
   "view-screen",
   "navigate",
+  "render-task-list-inline",
   "list-tasks",
   "create-task",
   "update-task",
@@ -38,6 +39,7 @@ Use reorder-tasks when the user asks to move or reorder tasks in the visible lis
 Use reorder-inbox-items when the user asks to reorder the inbox list.
 Use inbox actions to list, edit, delete, and promote inbox items.
 Call view-screen first when the user's visible task or inbox context matters.
+When the user asks to see, review, or manage the task list, check the current-screen navigation first. If the current view is not \`tasks\`, call render-task-list-inline so the task list appears in chat without navigating away. Pass includeDone when the user asks to include completed tasks. If the current view is already \`tasks\`, use view-screen and the native task list unless the user explicitly asks for an inline widget.
 When view-screen returns selection, treat selectedItems as the user's current UI multi-select on /tasks or /inbox.
 Prefer bulk-update-tasks and bulk-delete-tasks when the user clearly means multiple tasks (e.g. "mark these done", "delete the selected ones", or several titles at once). Use single-task actions for one task or when bulk selection is not in play.
 Prefer bulk-delete-inbox-items when the user clearly means multiple inbox items.