@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/components/ThinkRoutineDetail.d.ts

@@ -5,16 +5,19 @@ import * as React from "react";
 interface ThinkRoutineDetailProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends React.HTMLAttributes<HTMLElement> {
   routine: TRoutine;
   busy?: boolean;
+  showOwner?: boolean;
   onEnabledChange?: (enabled: boolean) => void;
-  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+  /** App-authored TanStack Router Link for each recent execution. */
+  renderRunLink?: (run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
 }
 /** Readable definition, schedule settings, and recent executions for one routine. */
 declare function ThinkRoutineDetail<TRoutine extends ThinkRoutine = ThinkRoutine>({
   busy,
   className,
   routine,
+  showOwner,
   onEnabledChange,
-  onRunSelect,
+  renderRunLink,
   ref,
   ...props
 }: ThinkRoutineDetailProps<TRoutine> & {

package/dist/components/ThinkRoutineDetail.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
@@ -10,7 +10,7 @@ function taskInstructions(routine) {
 	return typeof routine.task.prompt === "string" ? routine.task.prompt : "Runs an app-defined scheduled handler.";
 }
 /** Readable definition, schedule settings, and recent executions for one routine. */
-function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange, onRunSelect, ref, ...props }) {
+function ThinkRoutineDetail({ busy = false, className, routine, showOwner = true, onEnabledChange, renderRunLink, ref, ...props }) {
 	const titleId = React.useId();
 	const definitionId = React.useId();
 	const settingsId = React.useId();
@@ -72,7 +72,7 @@ function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange,
 							children: [
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Repeats" }), /* @__PURE__ */ jsx("dd", { children: routine.task.schedule })] }),
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Next run" }), /* @__PURE__ */ jsx("dd", { children: getThinkRoutineNextRun(routine) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Agent" }), /* @__PURE__ */ jsx("dd", { children: routine.owner.name })] })
+								showOwner ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Agent" }), /* @__PURE__ */ jsx("dd", { children: routine.owner.name })] }) : null
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -93,7 +93,7 @@ function ThinkRoutineDetail({ busy = false, className, routine, onEnabledChange,
 			}),
 			/* @__PURE__ */ jsx(ThinkRoutineRuns, {
 				runs: routine.runs,
-				onRunSelect
+				renderRunLink
 			})
 		]
 	});

package/dist/components/ThinkRoutineForm.d.ts

@@ -12,15 +12,16 @@ interface ThinkRoutineFormProps extends React.HTMLAttributes<HTMLElement> {
    * `getDefaultTimezone()` own wall-clock fallback behavior.
    */
   schedules: readonly ThinkScheduledTaskSchedule[];
-  onCancel?: () => void;
+  /** App-authored TanStack Router Link to the routine catalog. */
+  cancelLink?: React.ReactElement;
   onCreate: (request: ThinkRoutineCreateRequest) => void;
 }
 /** Authoring surface for a serializable, prompt-based Think scheduled task. */
 declare function ThinkRoutineForm({
   busy,
+  cancelLink,
   className,
   owners,
-  onCancel,
   onCreate,
   schedules,
   ref,

package/dist/components/ThinkRoutineForm.js

@@ -1,6 +1,7 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { V as SpinnerIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { K as SpinnerIcon } from "../icons-DKXiSepE.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
 import { Textarea } from "./Textarea.js";
@@ -32,7 +33,7 @@ function RoutineSelect({ label, onValueChange, options, value }) {
 	});
 }
 /** Authoring surface for a serializable, prompt-based Think scheduled task. */
-function ThinkRoutineForm({ busy = false, className, owners, onCancel, onCreate, schedules, ref, ...props }) {
+function ThinkRoutineForm({ busy = false, cancelLink, className, owners, onCreate, schedules, ref, ...props }) {
 	const [name, setName] = React.useState("");
 	const [ownerId, setOwnerId] = React.useState(owners[0]?.id ?? "");
 	const [prompt, setPrompt] = React.useState("");
@@ -131,12 +132,12 @@ function ThinkRoutineForm({ busy = false, className, owners, onCancel, onCreate,
 				})
 			] }), /* @__PURE__ */ jsxs("footer", {
 				className: "think-routine-library__form-actions",
-				children: [onCancel ? /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					color: "neutral",
-					disabled: busy,
-					onClick: onCancel,
+				children: [cancelLink ? /* @__PURE__ */ jsx(NavigationLink, {
+					render: cancelLink,
+					className: buttonVariants({
+						variant: "ghost",
+						color: "neutral"
+					}),
 					children: "Cancel"
 				}) : null, /* @__PURE__ */ jsxs(Button, {
 					type: "submit",

package/dist/components/ThinkRoutineLibrary.d.ts

@@ -1,7 +1,6 @@
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import { ThinkRoutine, ThinkRoutineCreateRequest, ThinkRoutineOwner, ThinkRoutineRunOf } from "./ThinkRoutine.js";
 import * as React from "react";
-import { ThinkScheduledTaskSchedule } from "@cloudflare/think";
 
 //#region src/components/ThinkRoutineLibrary.d.ts
 interface ThinkRoutineLibraryDetailRenderProps<TRoutine extends ThinkRoutine = ThinkRoutine> {
@@ -12,37 +11,33 @@ interface ThinkRoutineLibraryDetailRenderProps<TRoutine extends ThinkRoutine = T
   /** Custom detail surfaces must honor this while invoking the supplied actions. */
   busy: boolean;
   onEnabledChange?: (enabled: boolean) => void;
-  onRunSelect?: (run: ThinkRoutineRunOf<TRoutine>) => void;
+  renderRunLink?: (run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
 }
 interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   /** App-owned routine catalog assembled from native Think and Agents records. */
   routines: readonly TRoutine[];
-  /** Agents available as owners when authoring a routine. */
-  owners: readonly ThinkRoutineOwner[];
-  /** Upstream Think schedule DSL values offered by the composed authoring form. */
-  schedules: readonly ThinkScheduledTaskSchedule[];
-  /** Selected routine id when selection is controlled by the host app. */
-  selectedRoutineId?: string;
-  /** Initial routine id when the library owns selection state. */
-  defaultSelectedRoutineId?: string;
-  /** Called when the user selects a routine from the collection. */
-  onSelectedRoutineIdChange?: (routineId: string) => void;
+  /** Routine selected by the current application route. */
+  selectedRoutineId: string | null;
+  /** App-authored TanStack Router Link for every routine destination. */
+  renderRoutineLink: (routine: TRoutine) => React.ReactElement;
+  /** App-authored TanStack Router Link to the routine creation route. */
+  createRoutineLink?: React.ReactElement;
+  /** App-authored TanStack Router Link to edit the selected routine. */
+  renderEditRoutineLink?: (routine: TRoutine) => React.ReactElement;
+  /** App-authored TanStack Router Link for recent execution destinations. */
+  renderRunLink?: (routine: TRoutine, run: ThinkRoutineRunOf<TRoutine>) => React.ReactElement;
+  /** Whether to show routine owners in the browser and detail. Defaults to true. */
+  showOwner?: boolean;
+  /** Host-owned catalog error shown above the library without replacing loaded routines. */
+  error?: React.ReactNode;
   /** Product navigation rendered after the built-in schedule navigation control. */
   appBarLeading?: React.ReactNode;
-  /** Opens a host-owned create route instead of the library's built-in form. */
-  onCreateRoutineRequest?: () => void;
-  /** Creates an app-owned routine from a whole native Think scheduled task. */
-  onCreateRoutine?: (request: ThinkRoutineCreateRequest) => void | Promise<void>;
-  /** Opens a host-owned editor for the selected routine. */
-  onEditRoutine?: (routine: TRoutine) => void;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
   onRoutineEnabledChange?: (routine: TRoutine, enabled: boolean) => void | Promise<void>;
   /** Permanently removes the selected app-owned routine. */
   onDeleteRoutine?: (routine: TRoutine) => void | Promise<void>;
-  /** Opens one native Workflow or submission from the selected routine history. */
-  onRunSelect?: (routine: TRoutine, run: ThinkRoutineRunOf<TRoutine>) => void;
   /**
    * Replaces only the selected-routine surface while preserving the library
    * shell, navigation, actions, async state, and upstream routine contract.
@@ -52,29 +47,27 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
 /**
  * Full-page, cross-agent routine library. This intentionally does not live in
  * ThinkFullApp's per-thread workbench: the host app owns aggregation, routes,
- * authoring callables, and the association between schedules and native runs.
+ * authoring routes, and the association between schedules and native runs.
  * The application shell composes `ThinkRoutineBrowser`, `ThinkRoutineDetail`,
- * `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
- * surfaces independently.
+ * and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
+ * route and may also use these surfaces independently.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
   appBarLeading,
   className,
-  defaultSelectedRoutineId,
-  onCreateRoutine,
-  onCreateRoutineRequest,
+  createRoutineLink,
+  error: catalogError,
   onDeleteRoutine,
-  onEditRoutine,
   onRoutineEnabledChange,
   onRunRoutine,
-  onRunSelect,
-  onSelectedRoutineIdChange,
-  owners,
+  renderEditRoutineLink,
+  renderRoutineLink,
   renderRoutineDetail,
-  schedules,
+  renderRunLink,
   ref,
   routines,
   selectedRoutineId,
+  showOwner,
   ...props
 }: ThinkRoutineLibraryProps<TRoutine> & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/components/ThinkRoutineLibrary.js

@@ -1,23 +1,23 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { F as PlayIcon, J as WarningIcon, V as SpinnerIcon, g as EllipsisIcon, n as ArrowLeftIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { B as PlayIcon, K as SpinnerIcon, Q as WarningIcon, d as ChevronDownIcon, y as EllipsisIcon } from "../icons-DKXiSepE.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { AlertDialog } from "./AlertDialog.js";
 import { ResponsiveSidebarShell } from "./ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
-import { ThinkRoutineForm } from "./ThinkRoutineForm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRoutineLibrary.tsx
 function errorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
+function RoutineTopBarActions({ busy, onDelete, editLink, onRun, routineName }) {
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
 	const moreActionsRef = React.useRef(null);
-	const hasMenu = Boolean(onEdit || onDelete);
+	const hasMenu = Boolean(editLink || onDelete);
 	if (!onRun && !hasMenu) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AppTopBar.Trailing, {
 		"aria-label": "Schedule actions",
@@ -39,8 +39,8 @@ function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
 		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			align: "end",
 			sideOffset: 4,
-			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [onEdit ? /* @__PURE__ */ jsx(Menu.Item, {
-				onClick: onEdit,
+			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
+				render: editLink,
 				children: "Edit schedule"
 			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
 				variant: "destructive",
@@ -77,33 +77,25 @@ function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
 /**
 * Full-page, cross-agent routine library. This intentionally does not live in
 * ThinkFullApp's per-thread workbench: the host app owns aggregation, routes,
-* authoring callables, and the association between schedules and native runs.
+* authoring routes, and the association between schedules and native runs.
 * The application shell composes `ThinkRoutineBrowser`, `ThinkRoutineDetail`,
-* `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
-* surfaces independently.
+* and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
+* route and may also use these surfaces independently.
 */
-function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineId, onCreateRoutine, onCreateRoutineRequest, onDeleteRoutine, onEditRoutine, onRoutineEnabledChange, onRunRoutine, onRunSelect, onSelectedRoutineIdChange, owners, renderRoutineDetail, schedules, ref, routines, selectedRoutineId, ...props }) {
-	const [view, setView] = React.useState("library");
-	const [innerSelectedId, setInnerSelectedId] = React.useState(defaultSelectedRoutineId ?? routines[0]?.id ?? "");
+function ThinkRoutineLibrary({ appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
 	const [busy, setBusy] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
-	const [error, setError] = React.useState(null);
-	const activeId = selectedRoutineId ?? innerSelectedId;
-	const selectedRoutine = routines.find((routine) => routine.id === activeId) ?? (selectedRoutineId === void 0 ? routines[0] : void 0);
-	const requestCreate = onCreateRoutineRequest ?? (onCreateRoutine ? () => setView("create") : void 0);
-	const selectRoutine = (id) => {
-		if (selectedRoutineId === void 0) setInnerSelectedId(id);
-		onSelectedRoutineIdChange?.(id);
-	};
+	const [actionError, setActionError] = React.useState(null);
+	const selectedRoutine = selectedRoutineId ? routines.find((routine) => routine.id === selectedRoutineId) : void 0;
 	const perform = async (action, message) => {
 		setBusy(true);
-		setError(null);
+		setActionError(null);
 		try {
 			await action();
 			setAnnouncement(message);
 			return true;
 		} catch (nextError) {
-			setError(errorMessage(nextError));
+			setActionError(errorMessage(nextError));
 			return false;
 		} finally {
 			setBusy(false);
@@ -112,82 +104,60 @@ function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineI
 	const detailProps = selectedRoutine ? {
 		routine: selectedRoutine,
 		busy,
-		onRunSelect: onRunSelect ? (run) => onRunSelect(selectedRoutine, run) : void 0,
+		renderRunLink: renderRunLink ? (run) => renderRunLink(selectedRoutine, run) : void 0,
 		onEnabledChange: onRoutineEnabledChange ? (enabled) => void perform(() => onRoutineEnabledChange(selectedRoutine, enabled), `${selectedRoutine.name} ${enabled ? "activated" : "paused"}.`) : void 0
 	} : void 0;
-	if (view === "create") return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("think-routine-library", className),
-		...props,
-		children: [
-			error ? /* @__PURE__ */ jsxs("div", {
-				className: "think-routine-library__error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
-			}) : null,
-			/* @__PURE__ */ jsxs(AppTopBar.Root, {
-				"aria-label": "Schedule editor controls",
-				children: [/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
-					label: "Back to schedules",
-					onClick: () => setView("library"),
-					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-				}), appBarLeading] }), /* @__PURE__ */ jsx(AppTopBar.Title, { children: "New schedule" })]
-			}),
-			/* @__PURE__ */ jsx(ThinkRoutineForm, {
-				busy,
-				owners,
-				schedules,
-				onCancel: () => setView("library"),
-				onCreate: (request) => {
-					if (!onCreateRoutine) return;
-					perform(() => onCreateRoutine(request), `Created ${request.name}.`).then((created) => {
-						if (created) setView("library");
-					});
-				}
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status sigvelo-visually-hidden",
-				role: "status",
-				"aria-atomic": "true",
-				children: announcement
-			})
-		]
-	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-routine-library", className),
 		...props,
 		children: [
-			error ? /* @__PURE__ */ jsxs("div", {
+			catalogError || actionError ? /* @__PURE__ */ jsxs("div", {
 				className: "think-routine-library__error",
 				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: catalogError || actionError })]
 			}) : null,
 			/* @__PURE__ */ jsx(ResponsiveSidebarShell, {
 				className: "think-routine-library__layout",
 				sidebarLabel: "schedules",
+				defaultSidebarOpen: false,
 				toolbarLabel: "Schedule navigation controls",
 				showMainLabel: "Show selected schedule",
-				topBar: ({ sidebarToggle }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
+				topBar: ({ sidebarId, sidebarOpen, sidebarToggle, toggleSidebar }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 					"aria-label": "Schedule controls",
 					children: [
 						/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarToggle, appBarLeading] }),
-						/* @__PURE__ */ jsx(AppTopBar.Title, { children: selectedRoutine?.name ?? "Schedules" }),
+						/* @__PURE__ */ jsxs(AppTopBar.Title, { children: [/* @__PURE__ */ jsx("span", {
+							className: "think-routine-library__app-title",
+							children: selectedRoutine?.name ?? "Schedules"
+						}), selectedRoutine ? /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "ghost",
+							color: "neutral",
+							size: "sm",
+							className: "think-routine-library__schedule-trigger",
+							"aria-controls": sidebarId,
+							"aria-expanded": sidebarOpen,
+							onClick: (event) => toggleSidebar(event.currentTarget),
+							children: [/* @__PURE__ */ jsx("span", { children: selectedRoutine.name }), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+						}) : null] }),
 						/* @__PURE__ */ jsx(RoutineTopBarActions, {
 							busy,
 							routineName: selectedRoutine?.name ?? "schedule",
+							editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
 							onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
-							onEdit: selectedRoutine && onEditRoutine ? () => onEditRoutine(selectedRoutine) : void 0,
 							onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
 						})
 					]
 				}),
 				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
 					routines,
-					selectedRoutineId: selectedRoutine?.id,
-					onCreateRoutine: requestCreate,
-					onSelectedRoutineIdChange: (id) => {
-						selectRoutine(id);
+					selectedRoutineId,
+					showOwner,
+					renderRoutineLink,
+					createRoutineLink,
+					onRoutineLinkClick: (event) => {
+						if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.currentTarget.target === "_blank") return;
 						closeSidebarOnCompact();
 					}
 				}),
@@ -195,17 +165,24 @@ function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineI
 					className: "think-routine-library__main",
 					children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
 						...detailProps,
-						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps })
-					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps }) }, detailProps.routine.id) : /* @__PURE__ */ jsxs("div", {
+						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+							...detailProps,
+							showOwner
+						})
+					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+						...detailProps,
+						showOwner
+					}) }, detailProps.routine.id) : /* @__PURE__ */ jsxs("div", {
 						className: "think-routine-library__empty-detail",
 						children: [
-							/* @__PURE__ */ jsx("h1", { children: routines.length ? "Schedule unavailable" : "No schedules yet" }),
+							/* @__PURE__ */ jsx("h1", { children: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet" }),
 							/* @__PURE__ */ jsx("p", { children: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts." }),
-							!routines.length && requestCreate ? /* @__PURE__ */ jsx(Button, {
-								className: "think-routine-library__empty-action",
-								type: "button",
-								color: "primary",
-								onClick: requestCreate,
+							!routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
+								render: createRoutineLink,
+								className: buttonVariants({
+									color: "primary",
+									className: "think-routine-library__empty-action"
+								}),
 								children: "Create schedule"
 							}) : null
 						]

package/dist/components/ThinkRoutineRuns.d.ts

@@ -6,7 +6,8 @@ interface ThinkRoutineRunsProps<TRun extends ThinkExecutionRun = ThinkExecutionR
   runs: readonly TRun[];
   title?: React.ReactNode;
   emptyState?: React.ReactNode;
-  onRunSelect?: (run: TRun) => void;
+  /** App-authored TanStack Router Link for each durable execution destination. */
+  renderRunLink?: (run: TRun) => React.ReactElement;
 }
 /** Compact execution history shared by routine detail surfaces. */
 declare function ThinkRoutineRuns<TRun extends ThinkExecutionRun = ThinkExecutionRun>({
@@ -14,7 +15,7 @@ declare function ThinkRoutineRuns<TRun extends ThinkExecutionRun = ThinkExecutio
   runs,
   title,
   emptyState,
-  onRunSelect,
+  renderRunLink,
   ref,
   ...props
 }: ThinkRoutineRunsProps<TRun> & {

package/dist/components/ThinkRoutineRuns.js

@@ -1,13 +1,14 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { buttonVariants } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { formatThinkExecutionShortTimestamp, getThinkExecutionRunId, getThinkExecutionRunStatus, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRoutineRuns.tsx
 /** Compact execution history shared by routine detail surfaces. */
-function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState = "Run this schedule now or wait for its next occurrence.", onRunSelect, ref, ...props }) {
+function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState = "Run this schedule now or wait for its next occurrence.", renderRunLink, ref, ...props }) {
 	const titleId = React.useId();
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
@@ -31,30 +32,36 @@ function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState =
 			children: runs.map((run) => {
 				const status = getThinkExecutionRunStatus(run);
 				const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
-				return /* @__PURE__ */ jsx("li", {
-					"data-status": status,
-					children: /* @__PURE__ */ jsxs(Button, {
-						type: "button",
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ThinkExecutionStatus, {
+						run,
+						className: "think-routine-library__run-marker"
+					}),
+					/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("strong", { children: formatThinkExecutionShortTimestamp(run.createdAt, "Not scheduled") }) }),
+					/* @__PURE__ */ jsx(Badge, {
+						className: "think-routine-library__run-kind",
 						variant: "ghost",
 						color: "neutral",
 						size: "sm",
+						children: kind
+					})
+				] });
+				const runClassName = buttonVariants({
+					variant: "ghost",
+					color: "neutral",
+					size: "sm",
+					className: "think-routine-library__run"
+				});
+				return /* @__PURE__ */ jsx("li", {
+					"data-status": status,
+					children: renderRunLink ? /* @__PURE__ */ jsx(NavigationLink, {
+						render: renderRunLink(run),
+						className: runClassName,
+						"aria-label": `Open ${kind} ${getThinkExecutionRunId(run)}`,
+						children: content
+					}) : /* @__PURE__ */ jsx("div", {
 						className: "think-routine-library__run",
-						disabled: !onRunSelect,
-						onClick: onRunSelect ? () => onRunSelect(run) : void 0,
-						children: [
-							/* @__PURE__ */ jsx(ThinkExecutionStatus, {
-								run,
-								className: "think-routine-library__run-marker"
-							}),
-							/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("strong", { children: formatThinkExecutionShortTimestamp(run.createdAt, "Not scheduled") }) }),
-							/* @__PURE__ */ jsx(Badge, {
-								className: "think-routine-library__run-kind",
-								variant: "ghost",
-								color: "neutral",
-								size: "sm",
-								children: kind
-							})
-						]
+						children: content
 					})
 				}, `${kind}:${getThinkExecutionRunId(run)}`);
 			})

package/dist/components/ThinkThreadPicker.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 //#region src/components/ThinkThreadPicker.d.ts
 interface ThinkThreadItem {
-  /** Stable child-agent/thread id passed back to the app's route state. */
+  /** Stable child-agent/thread id used by the app-authored link's route params. */
   id: string;
   /** Human-readable thread title, usually generated by the parent Think agent. */
   title: string;
@@ -31,15 +31,20 @@ interface ThinkThreadStatusIndicatorsProps {
   summary: ThinkThreadStatusSummary;
   className?: string;
 }
-interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect" | "title"> {
+interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
   /** Threads from the parent agent, already sorted in the order the app wants to show. */
   threads: readonly ThinkThreadItem[];
-  /** Selected child-agent/thread id. */
-  selectedId?: string;
-  /** Called when a thread row is selected; callers route this into `useAgent({ sub })`. */
-  onSelect: (id: string) => void;
+  /**
+   * Renders the application-owned TanStack Router Link for a thread.
+   *
+   * Put `to`, `params`, `search`, and active state on this element so they stay
+   * inferred from the consuming application's registered route tree.
+   */
+  renderThreadLink: (thread: ThinkThreadItem) => React.ReactElement;
   /** Optional parent-agent create action, usually `parent.stub.createThread()`. */
   onCreate?: () => void | Promise<void>;
+  /** Optional parent-agent delete action, usually `parent.stub.deleteThread(thread.id)`. */
+  onDelete?: (thread: ThinkThreadItem) => void | Promise<void>;
   /** Visible heading for the roster. */
   title?: React.ReactNode;
   /** Accessible label for the list navigation. */
@@ -54,15 +59,16 @@ declare function ThinkThreadStatusIndicators({
  * Thread roster UI for sub-agent chat apps.
  *
  * This component does not call Think or Cloudflare RPC methods directly. Feed
- * it from the parent agent's roster method, then route `onSelect` into the
- * child `useAgent({ sub: [...] })` name. Keep backend contract notes beside the
- * parent Think agent because `listThreads()`/`createThread()` are app-owned.
+ * it from the parent agent's roster method, then render app-owned route links
+ * that select the child `useAgent({ sub: [...] })` name. Keep backend contract
+ * notes beside the parent Think agent because
+ * `listThreads()`/`createThread()`/`deleteThread()` are app-owned.
  */
 declare function ThinkThreadPicker({
   threads,
-  selectedId,
-  onSelect,
+  renderThreadLink,
   onCreate,
+  onDelete,
   className,
   title,
   "aria-label": ariaLabel,