zidane-ui 9.1.3 → 9.1.5

package/dist/session/PlanTracker.d.ts

@@ -0,0 +1,54 @@
+import { InboxPlans } from "./headless/plans.js";
+import { CSSProperties } from "react";
+import { PlanView } from "zidane/chat";
+//#region src/session/PlanTracker.d.ts
+/** Props for {@link PlanTracker}. */
+interface PlanTrackerProps {
+  /** The session the plan belongs to. */
+  sessionId: string;
+  /** The plan to show. */
+  plan: PlanView;
+  /** Leave out the title row (a "Recent" row opened already shows it). */
+  hideHeader?: boolean;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+/**
+ * The tone of a plan's state chip.
+ *
+ * @param plan - The plan.
+ */
+declare function planStateTone(plan: PlanView): 'accent' | 'warn' | 'success' | 'muted';
+/**
+ * A session's plans for the Inbox: the one in progress and the recent ones. Reads the session from the host once.
+ *
+ * @param sessionId - The session.
+ */
+declare function useInboxPlans(sessionId: string): InboxPlans;
+/**
+ * Renders one plan with its step edits, retry, add box, tally, and the plan's stop, resume and drop.
+ *
+ * @param props - The {@link PlanTrackerProps}.
+ */
+declare function PlanTracker({ sessionId, plan, hideHeader, className, style }: PlanTrackerProps): import("react").JSX.Element;
+/** Props for {@link RecentPlans}. */
+interface RecentPlansProps {
+  /** The session the plans belong to. */
+  sessionId: string;
+  /** Closed plans, newest first (`useInboxPlans`). */
+  plans: readonly PlanView[];
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+/**
+ * The Inbox's "Recent" plans: one line each (title, how it ended, its tally), opened in place to read its steps.
+ *
+ * @param props - The {@link RecentPlansProps}.
+ */
+declare function RecentPlans({ sessionId, plans, className, style }: RecentPlansProps): import("react").JSX.Element;
+//#endregion
+export { PlanTracker, PlanTrackerProps, RecentPlans, RecentPlansProps, planStateTone, useInboxPlans };

package/dist/session/PlanTracker.js

@@ -0,0 +1,412 @@
+import { IconButton } from "../components/IconButton.js";
+import { buttonClass } from "../components/button.js";
+import { MetaChip } from "../components/Form.js";
+import { useMinuteTick } from "../hooks/useMinuteTick.js";
+import { inboxPlans } from "./headless/plans.js";
+import { useSessionHost, useSessionPlans } from "./SessionProvider.js";
+import { useSessionLabels } from "./useSessionLabels.js";
+import { ProseMarkdown } from "../chat/transcript/ProseMarkdown.js";
+import { StepStatusIcon } from "./StepStatusIcon.js";
+import { isDoneTodo } from "./TodoList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { buildPlanResumeMessage, buildStepRetryMessage, describeTime, planProgress } from "zidane/chat/pure";
+//#region src/session/PlanTracker.tsx
+/**
+* One plan as a card, its steps live as the agent works: the Inbox's
+* "In progress" card, and a "Recent" plan opened. At parity with the TUI's
+* todos modal.
+*
+* Every edit goes to the host's plan gate (`plans.edit` / `plans.control`),
+* never to a copy here: the agent reads the same plan and is told what
+* changed. Only "which row is mid-edit", the add box and the drop
+* confirmation are local.
+*
+* On an applying or stopped plan: click a step's text to rename it (Enter
+* saves, Esc cancels, blur saves), retry asks the agent to redo the step,
+* cancel marks it cancelled (a step is never deleted), the box adds a step,
+* Stop stops the plan and the run applying it, Resume asks the agent to
+* continue a stopped plan, Drop closes it after an inline confirm. A closed
+* plan is read-only. Without `plans.edit` there is no add, rename or
+* cancel; without `plans.control` no stop or drop; without `plans.retry` no
+* retry or resume.
+*
+*   const { current, recent } = useInboxPlans(sessionId)
+*   <PlanTracker sessionId={sessionId} plan={current} />
+*/
+const INPUT_CLS = "zg-well flex-1 min-w-0 font-mono text-zg-label px-2.5 py-1 placeholder:text-[var(--zg-text-subtle)]";
+const GHOST_BTN = buttonClass({
+	variant: "ghost",
+	size: "xs"
+});
+const ROW_ACTION_CLS = "opacity-0 group-hover:opacity-100 focus-visible:opacity-100";
+/** The quiet note after a step's title: who cancelled it, or that it was added after approval. */
+function stepMarker(step, labels) {
+	if (step.status === "cancelled" && step.cancelledBy === "user") return labels.stepCancelledByYou;
+	if (step.status === "cancelled" && step.cancelledBy === "agent") return labels.stepDroppedByAgent;
+	return step.added ? labels.stepAdded : null;
+}
+/**
+* The tone of a plan's state chip.
+*
+* @param plan - The plan.
+*/
+function planStateTone(plan) {
+	if (plan.state === "applying") return plan.possiblyInterrupted ? "muted" : "accent";
+	if (plan.state === "stopped") return "warn";
+	return plan.state === "done" ? "success" : "muted";
+}
+const NO_INBOX_PLANS = {
+	current: null,
+	recent: []
+};
+/**
+* A session's plans for the Inbox: the one in progress and the recent ones. Reads the session from the host once.
+*
+* @param sessionId - The session.
+*/
+function useInboxPlans(sessionId) {
+	const refresh = useSessionHost().plans?.refresh;
+	const snap = useSessionPlans(sessionId);
+	useEffect(() => {
+		refresh?.(sessionId);
+	}, [sessionId, refresh]);
+	return snap ? inboxPlans(snap.plans) : NO_INBOX_PLANS;
+}
+/**
+* Renders one plan with its step edits, retry, add box, tally, and the plan's stop, resume and drop.
+*
+* @param props - The {@link PlanTrackerProps}.
+*/
+function PlanTracker({ sessionId, plan, hideHeader = false, className, style }) {
+	const labels = useSessionLabels();
+	const host = useSessionHost().plans;
+	const edit = host?.edit;
+	const control = host?.control;
+	const retryRun = host?.retry;
+	const steps = plan?.steps ?? [];
+	const applying = plan?.state === "applying";
+	const stopped = plan?.state === "stopped";
+	const open = applying || stopped;
+	const canEdit = open && Boolean(edit);
+	const progress = planProgress(plan);
+	const hasActions = Boolean(open && control || stopped && retryRun);
+	const stopStep = plan.stoppedAt ? steps.findIndex((s) => s.id === plan.stoppedAt) + 1 : 0;
+	const [editingId, setEditingId] = useState(null);
+	const [draft, setDraft] = useState("");
+	const [adding, setAdding] = useState("");
+	const [error, setError] = useState(null);
+	const [confirmDrop, setConfirmDrop] = useState(false);
+	const editRef = useRef(null);
+	const planKey = `${plan.id}:${open}`;
+	const [shownKey, setShownKey] = useState(planKey);
+	if (shownKey !== planKey) {
+		setShownKey(planKey);
+		setEditingId(null);
+		setConfirmDrop(false);
+	}
+	useEffect(() => {
+		if (editingId) {
+			editRef.current?.focus();
+			editRef.current?.select();
+		}
+	}, [editingId]);
+	/** Runs a host call; its rejection (the gate's reason) shows under the list. */
+	const run = (call) => {
+		if (!call) return;
+		setError(null);
+		call.catch((err) => setError(err instanceof Error ? err.message : String(err)));
+	};
+	const startEdit = (step) => {
+		if (!canEdit) return;
+		setEditingId(step.id);
+		setDraft(step.title);
+	};
+	const saveEdit = () => {
+		if (!editingId) return;
+		const step = steps.find((s) => s.id === editingId);
+		const title = draft.trim();
+		if (step && title.length > 0 && title !== step.title) run(edit?.(sessionId, plan.id, {
+			kind: "rename",
+			stepId: step.id,
+			title
+		}));
+		setEditingId(null);
+	};
+	const submitAdd = () => {
+		const title = adding.trim();
+		if (title.length === 0) return;
+		run(edit?.(sessionId, plan.id, {
+			kind: "add",
+			title
+		}));
+		setAdding("");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["flex flex-col gap-2 py-2", className].filter(Boolean).join(" "),
+		style,
+		"data-plan-state": plan.state,
+		"data-testid": "plan-tracker",
+		children: [
+			!hideHeader && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-2 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 min-w-0 truncate text-zg-ui font-medium text-[var(--zg-text)]",
+						title: plan.title || void 0,
+						children: plan.title || labels.planUntitled
+					}),
+					/* @__PURE__ */ jsx(MetaChip, {
+						tone: planStateTone(plan),
+						children: labels.planState[plan.state]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-testid": "todo-progress",
+						children: /* @__PURE__ */ jsx(MetaChip, { children: labels.todosProgress(progress.completed + progress.cancelled, progress.total) })
+					})
+				]
+			}),
+			stopped && /* @__PURE__ */ jsx("p", {
+				className: "m-0 px-2 text-zg-meta text-[var(--zg-warn)]",
+				children: labels.planStopped(stopStep > 0 ? stopStep : null, plan.stopReason)
+			}),
+			applying && plan.possiblyInterrupted && /* @__PURE__ */ jsx("p", {
+				className: "m-0 px-2 text-zg-meta text-[var(--zg-text-muted)]",
+				children: labels.planMaybeInterrupted
+			}),
+			plan.body && /* @__PURE__ */ jsx("div", {
+				"data-testid": "plan-body",
+				className: "px-2 text-zg-ui text-[var(--zg-text)] zg-pretty",
+				children: /* @__PURE__ */ jsx(ProseMarkdown, { children: plan.body })
+			}),
+			steps.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "m-0 px-2 text-zg-meta text-[var(--zg-text-muted)]",
+				children: labels.planNoSteps
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				className: "flex flex-col gap-1.5 m-0 px-2 list-none",
+				children: steps.map((step, i) => {
+					const dim = isDoneTodo(step.status);
+					const marker = stepMarker(step, labels);
+					const haltedHere = stopped && step.id === plan.stoppedAt && !dim;
+					return /* @__PURE__ */ jsxs("li", {
+						"data-status": step.status,
+						className: "group flex items-start gap-2 zg-tray rounded-zg-md px-2.5 py-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "flex items-center h-6 shrink-0",
+								children: /* @__PURE__ */ jsx(StepStatusIcon, {
+									state: haltedHere ? "stopped" : step.status,
+									label: labels.todoStatus(step.status),
+									className: "text-zg-ui"
+								})
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "zg-meta leading-6 w-4 shrink-0",
+								children: [i + 1, "."]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 min-w-0 flex flex-col",
+								children: [
+									editingId === step.id ? /* @__PURE__ */ jsx("input", {
+										ref: editRef,
+										type: "text",
+										value: draft,
+										spellCheck: false,
+										"aria-label": labels.todoEdit,
+										onChange: (e) => setDraft(e.target.value),
+										onBlur: saveEdit,
+										onKeyDown: (e) => {
+											if (e.key === "Enter") saveEdit();
+											if (e.key === "Escape") setEditingId(null);
+										},
+										className: INPUT_CLS
+									}) : /* @__PURE__ */ jsx("button", {
+										type: "button",
+										disabled: !canEdit,
+										onClick: () => startEdit(step),
+										title: canEdit ? labels.todoEdit : step.title,
+										className: `min-w-0 text-left text-zg-ui leading-6 font-medium bg-transparent border-0 p-0 cursor-text disabled:cursor-default zg-balance transition-colors ${dim ? "text-[var(--zg-text-muted)]" : "text-[var(--zg-text)]"}${step.status === "cancelled" ? " line-through" : ""}`,
+										children: step.title
+									}),
+									step.description && /* @__PURE__ */ jsx("span", {
+										className: "text-zg-meta mt-0.5 text-[var(--zg-text-muted)] zg-pretty",
+										children: step.description
+									}),
+									step.note && /* @__PURE__ */ jsx("span", {
+										className: "text-zg-meta leading-4 text-[var(--zg-text-subtle)] italic zg-pretty",
+										children: labels.stepAgentNote(step.note)
+									})
+								]
+							}),
+							marker && /* @__PURE__ */ jsx("span", {
+								className: "zg-meta shrink-0",
+								children: marker
+							}),
+							open && retryRun && /* @__PURE__ */ jsx(IconButton, {
+								size: "xs",
+								icon: "i-ph-arrow-clockwise",
+								label: labels.todoRetry,
+								title: labels.todoRetryHint,
+								onClick: () => run(retryRun(sessionId, buildStepRetryMessage(step))),
+								className: ROW_ACTION_CLS
+							}),
+							canEdit && !dim && /* @__PURE__ */ jsx(IconButton, {
+								size: "xs",
+								icon: "i-ph-x",
+								label: labels.stepCancel,
+								title: labels.stepCancelHint,
+								tone: "danger",
+								onClick: () => run(edit?.(sessionId, plan.id, {
+									kind: "cancel",
+									stepId: step.id
+								})),
+								className: ROW_ACTION_CLS
+							})
+						]
+					}, step.id);
+				})
+			}),
+			(error || canEdit || hasActions) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 px-2",
+				children: [
+					error && /* @__PURE__ */ jsx("div", {
+						className: "text-zg-meta text-[var(--zg-warn)]",
+						role: "alert",
+						children: error
+					}),
+					canEdit && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "text",
+							placeholder: labels.todoAddPlaceholder,
+							"aria-label": labels.todoAddLabel,
+							value: adding,
+							spellCheck: false,
+							onChange: (e) => setAdding(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Enter") submitAdd();
+							},
+							className: INPUT_CLS
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: GHOST_BTN,
+							disabled: adding.trim().length === 0,
+							onClick: submitAdd,
+							children: labels.todoAdd
+						})]
+					}),
+					hasActions && /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-end gap-3 min-h-6",
+						children: confirmDrop && control ? /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5 text-zg-meta",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-[var(--zg-text-muted)]",
+									children: labels.planDropConfirm(applying)
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: `${GHOST_BTN} text-[var(--zg-error)]`,
+									onClick: () => {
+										run(control(sessionId, plan.id, "drop"));
+										setConfirmDrop(false);
+									},
+									children: labels.planDropYes
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: GHOST_BTN,
+									onClick: () => setConfirmDrop(false),
+									children: labels.planDropCancel
+								})
+							]
+						}) : /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1",
+							children: [
+								applying && control && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: GHOST_BTN,
+									title: labels.planStopHint,
+									onClick: () => run(control(sessionId, plan.id, "stop")),
+									children: labels.planStop
+								}),
+								stopped && retryRun && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: GHOST_BTN,
+									title: labels.planResumeHint,
+									onClick: () => run(retryRun(sessionId, buildPlanResumeMessage(plan))),
+									children: labels.planResume
+								}),
+								open && control && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: GHOST_BTN,
+									title: labels.planDropHint,
+									onClick: () => setConfirmDrop(true),
+									children: labels.planDrop
+								})
+							]
+						})
+					})
+				]
+			})
+		]
+	});
+}
+/**
+* The Inbox's "Recent" plans: one line each (title, how it ended, its tally), opened in place to read its steps.
+*
+* @param props - The {@link RecentPlansProps}.
+*/
+function RecentPlans({ sessionId, plans, className, style }) {
+	const labels = useSessionLabels();
+	const [open, setOpen] = useState(null);
+	useMinuteTick();
+	const now = Date.now();
+	return /* @__PURE__ */ jsx("ul", {
+		className: ["m-0 p-0 list-none flex flex-col gap-1", className].filter(Boolean).join(" "),
+		style,
+		children: plans.map((plan) => {
+			const progress = planProgress(plan);
+			const expanded = open === plan.id;
+			return /* @__PURE__ */ jsxs("li", {
+				"data-testid": "recent-plan",
+				"data-plan-state": plan.state,
+				className: "zg-raised border rounded-zg-lg overflow-hidden",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": expanded,
+					onClick: () => setOpen(expanded ? null : plan.id),
+					className: "flex items-center gap-2 w-full px-3 py-2 text-left bg-transparent border-0 cursor-pointer hover:bg-[var(--zg-row-hover)]",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 min-w-0 truncate text-zg-ui text-[var(--zg-text)]",
+							children: plan.title || labels.planUntitled
+						}),
+						/* @__PURE__ */ jsx(MetaChip, {
+							title: new Date(plan.createdAt).toLocaleString(),
+							className: "tabular-nums",
+							children: describeTime(plan.createdAt, now)
+						}),
+						/* @__PURE__ */ jsx(MetaChip, {
+							tone: planStateTone(plan),
+							children: labels.planState[plan.state]
+						}),
+						/* @__PURE__ */ jsx(MetaChip, { children: labels.todosProgress(progress.completed + progress.cancelled, progress.total) }),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: `${expanded ? "i-ph-caret-up" : "i-ph-caret-down"} text-zg-label text-[var(--zg-text-muted)]`
+						})
+					]
+				}), expanded && /* @__PURE__ */ jsx(PlanTracker, {
+					sessionId,
+					plan,
+					hideHeader: true,
+					className: "px-1 pb-2"
+				})]
+			}, plan.id);
+		})
+	});
+}
+//#endregion
+export { PlanTracker, RecentPlans, planStateTone, useInboxPlans };

package/dist/session/ProjectHome.d.ts

@@ -1,7 +1,15 @@
 import { WorkspacePanels } from "../workspace/headless/host.js";
 import { PanelOpenEvent } from "../workspace/PanelContentView.js";
 import { CSSProperties, ReactNode } from "react";
+import { PanelStartSession } from "zidane/chat/pure";
 //#region src/session/ProjectHome.d.ts
+/** What a block row's start answered: done, or why not in words. */
+type ProjectHomeStartResult = {
+  ok: true;
+} | {
+  ok: false;
+  message: string;
+};
 /** The project a home is for. */
 interface ProjectHomeProject {
   /** Its name (the folder's). */
@@ -57,6 +65,11 @@ interface ProjectHomeProps {
   onOpenSession?: (sessionId: string) => void;
   /** Opens a block row's path. */
   onOpenPath?: (path: string, event?: PanelOpenEvent) => void;
+  /**
+   * A block row's "start a session" (a pull request's Open in worktree, a ticket's Open here): sets up the new-chat
+   * draft (`useStartFromPanel`, `zidane-ui/git`). A failure shows on the block. Absent: those buttons are not offered.
+   */
+  onStartSession?: (start: PanelStartSession) => Promise<ProjectHomeStartResult>;
   /** A click on the repository chip (its web page, or the working tree). Absent: the chip is plain text. */
   onOpenRepo?: () => void;
   /** A click on the project's path chip: open the Files panel. Absent: the chip is plain text. */
@@ -77,6 +90,6 @@ interface ProjectHomeProps {
  *
  * @param props - The {@link ProjectHomeProps}.
  */
-declare function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavailable, defaultBlocks, onOpenSession, onOpenPath, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor, now: nowProp, className, style }: ProjectHomeProps): import("react").JSX.Element;
+declare function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavailable, defaultBlocks, onOpenSession, onOpenPath, onStartSession, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor, now: nowProp, className, style }: ProjectHomeProps): import("react").JSX.Element;
 //#endregion
-export { ProjectHome, ProjectHomeProject, ProjectHomeProps, ProjectHomeRepo, ProjectHomeSwitcher };
+export { ProjectHome, ProjectHomeProject, ProjectHomeProps, ProjectHomeRepo, ProjectHomeStartResult, ProjectHomeSwitcher };