@heyramzi/ui 2.8.0 → 2.9.0

package/src/work/docs/outline.ts

@@ -0,0 +1,60 @@
+/**
+ * The outline of a document: which headings it lists, and the anchor each one gets.
+ * Pure, so the editor's anchors and the outline's ids can never disagree.
+ */
+
+import { anchorIds } from "../../editor/anchors.js";
+
+export { anchorIds, slugify } from "../../editor/anchors.js";
+
+export type OutlineLevel = 2 | 3;
+
+export type OutlineHeading = { id: string; label: string; level: OutlineLevel };
+
+type DocNode = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: DocNode[];
+  text?: string;
+};
+
+function textOf(node: DocNode): string {
+  if (node.type === "text") return node.text ?? "";
+  return (node.content ?? []).map(textOf).join("");
+}
+
+export type FoundHeading = { id: string; label: string; level: number };
+
+/** Every heading in document order, at any depth, with its anchor. */
+export function headingsOf(doc: unknown): FoundHeading[] {
+  const found: { label: string; level: number }[] = [];
+  const walk = (node: DocNode) => {
+    if (node.type === "heading") {
+      const level = typeof node.attrs?.level === "number" ? node.attrs.level : 1;
+      found.push({ label: textOf(node).trim(), level });
+      return;
+    }
+    for (const child of node.content ?? []) walk(child);
+  };
+  if (doc && typeof doc === "object") walk(doc as DocNode);
+  const ids = anchorIds(found.map((heading) => heading.label));
+  return found.map((heading, i) => ({ id: ids[i], label: heading.label, level: heading.level }));
+}
+
+/**
+ * What the outline lists: H2 and H3 with a label. H1 and H4 are ignored, and a
+ * document with fewer than two entries gets no outline at all.
+ */
+export function outlineOf(headings: FoundHeading[]): OutlineHeading[] {
+  const items = headings.filter(
+    (heading): heading is FoundHeading & { level: OutlineLevel } =>
+      (heading.level === 2 || heading.level === 3) && heading.label !== "",
+  );
+  if (items.length < 2) return [];
+  return items.map(({ id, label, level }) => ({ id, label, level }));
+}
+
+/** The outline of a Tiptap document. */
+export function outlineOfDoc(doc: unknown): OutlineHeading[] {
+  return outlineOf(headingsOf(doc));
+}

package/src/{tasks → work}/gantt/gantt-group-row.svelte

@@ -28,7 +28,7 @@
 			<span
 				class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
 			>
-				{row.count}
+				{row.count.toLocaleString()}
 			</span>
 		</div>
 	</div>

package/src/{tasks → work}/inbox/inbox-card.svelte

@@ -9,7 +9,14 @@
 	import StatusDot from "../../status/status-dot.svelte";
 	import { TONE_TEXT } from "../../lib/tone.js";
 	import InboxDraftEditor from "./inbox-draft.svelte";
-	import { canUndo, isOpen, startDraft } from "./inbox-logic.js";
+	import {
+		canUndo,
+		cardFacts,
+		freshReasoning,
+		isOpen,
+		startDraft,
+		whenOf,
+	} from "./inbox-logic.js";
 	import {
 		SOURCE_ICON,
 		SOURCE_LABEL,
@@ -29,15 +36,38 @@
 		onverdict: (verdict: InboxVerdict) => void;
 		/** Replaces the summary lines, for a host that renders its own proposal. */
 		renderProposal?: Snippet<[InboxItem]>;
+		/** How the source time reads. Defaults to a relative time, never a raw ISO string. */
+		when?: (at: string) => string;
 	}
 
-	let { item, selected = false, onselect, onverdict, renderProposal }: Props = $props();
+	const FACT =
+		"relative inline-flex items-center ps-3 before:absolute before:start-1 before:opacity-40 before:content-['·']";
+
+	let {
+		item,
+		selected = false,
+		onselect,
+		onverdict,
+		renderProposal,
+		when = whenOf,
+	}: Props = $props();
 
 	let drafts = $derived(item.proposal.drafts ?? []);
 	let open = $derived(isOpen(item));
 	let level = $derived(confidenceLevel(item.confidence.score));
 	let tone = $derived(inboxConfidence.tone(level));
 	let SourceIcon = $derived(SOURCE_ICON[item.trace.source.type]);
+	let facts = $derived(cardFacts(item));
+	let time = $derived(when(item.trace.source.at));
+	let why = $derived(freshReasoning(item, facts));
+	// WHY not the source link alone: a trace holding only "Open source" was a disclosure to open
+	// for a link the host already shows.
+	let hasTrace = $derived(item.trace.evidence.length > 0 || !!why);
+	let expanded = $state(false);
+	let longCommand = $derived(
+		!!facts.command &&
+			(facts.command.text.length > 240 || facts.command.text.split("\n").length > 3),
+	);
 
 	let pickedDraft = $state<string>();
 	let edits = $state<InboxDraftEdits>({});
@@ -167,64 +197,99 @@
 	<header class="flex items-start gap-2.5">
 		<StatusDot statuses={inboxStates} status={item.state} class="mt-0.5" />
 		<span class="sr-only">{inboxStates.label(item.state)}.</span>
-		<div class="flex min-w-0 flex-1 flex-col gap-1">
+		<div class="flex min-w-0 flex-1 flex-col gap-2">
 			<div class="flex flex-wrap items-center gap-x-2 gap-y-1">
 				<h3 class="text-sm leading-5 font-medium text-balance">{item.title}</h3>
-				<StatusBadge statuses={inboxKinds} status={item.kind} />
+				{#if item.kind !== "action"}
+					<StatusBadge statuses={inboxKinds} status={item.kind} />
+				{/if}
 				{#if !open}
 					<StatusBadge statuses={inboxStates} status={item.state} />
 				{/if}
 			</div>
+
 			{#if renderProposal}
 				{@render renderProposal(item)}
 			{:else}
-				<p class="text-muted-foreground text-sm text-pretty">{item.proposal.summary}</p>
-				{#if item.proposal.detail}
-					<p class="text-muted-foreground text-sm text-pretty">{item.proposal.detail}</p>
+				{#if facts.command}
+					<div class="flex flex-col items-start gap-1">
+						<!-- The padding sits on a wrapper: on the clamped box itself, the 4th line showed through it. -->
+						<div class="bg-muted/50 w-full rounded-md px-2.5 py-2">
+							<pre
+								class={cn(
+									"text-foreground font-mono text-xs leading-5 break-words whitespace-pre-wrap",
+									!expanded && "line-clamp-3",
+								)}><span class="text-muted-foreground select-none"
+									>{facts.command.tool} </span>{facts.command.text}</pre>
+						</div>
+						{#if longCommand}
+							<button
+								type="button"
+								class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"
+								aria-expanded={expanded}
+								onclick={() => (expanded = !expanded)}
+							>
+								{expanded ? "Show less" : "Show all"}
+							</button>
+						{/if}
+					</div>
 				{/if}
+				{#each facts.lines as line, i (i)}
+					<p class="text-muted-foreground text-sm text-pretty">{line}</p>
+				{/each}
 			{/if}
-		</div>
-	</header>
 
-	<div class="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 pl-6 text-xs">
-		<span class="inline-flex items-center gap-1.5">
-			<SourceIcon size={14} aria-hidden="true" />
-			{SOURCE_LABEL[item.trace.source.type]}, {item.trace.source.at}
-		</span>
-		<span class={cn("inline-flex items-center gap-1.5 tabular-nums", TONE_TEXT[tone])}>
-			<StatusDot
-				statuses={inboxConfidence}
-				status={level}
-				progress={item.confidence.score}
-				size={12}
-				animate={false}
-			/>
-			{Math.round(item.confidence.score * 100)}% sure
-		</span>
-		{#if item.agent}
-			<span class="inline-flex items-center gap-1.5">
-				<AgentAvatar
-					name={item.agent.name}
-					shape={item.agent.shape}
-					color={item.agent.color}
-					state={item.state === "working" ? "working" : "default"}
-					size={16}
-					paused={item.state !== "working"}
-					interactive={false}
-					aria-hidden
-				/>
-				{item.agent.name}
-			</span>
-		{/if}
-	</div>
+			<!-- Each dot hangs off the fact it leads, in a gutter the wrapper clips, so a wrapped line
+			     never starts with a dot. The same pattern as DetailHeader's meta line. -->
+			<div class="overflow-hidden">
+				<p class="text-muted-foreground -ms-3 flex flex-wrap items-center gap-y-1 text-xs">
+					{#if item.agent}
+						<span class={cn(FACT, "gap-1.5")}>
+							<AgentAvatar
+								name={item.agent.name}
+								shape={item.agent.shape}
+								color={item.agent.color}
+								state={item.state === "working" ? "working" : "default"}
+								size={16}
+								paused={item.state !== "working"}
+								interactive={false}
+								aria-hidden
+							/>
+							{item.agent.name}
+						</span>
+					{:else}
+						<span class={cn(FACT, "gap-1.5")}>
+							<SourceIcon size={14} aria-hidden="true" />
+							{SOURCE_LABEL[item.trace.source.type]}
+						</span>
+					{/if}
+					{#if time}
+						<span class={cn(FACT, "tabular-nums")}>{time}</span>
+					{/if}
+					{#if level !== "high"}
+						<span class={cn(FACT, "gap-1.5 tabular-nums", TONE_TEXT[tone])}>
+							<StatusDot
+								statuses={inboxConfidence}
+								status={level}
+								progress={item.confidence.score}
+								size={12}
+								animate={false}
+							/>
+							{Math.round(item.confidence.score * 100)}% sure
+						</span>
+					{/if}
+				</p>
+			</div>
 
-	{#if item.confidence.missing && level !== "high" && open}
-		<p class={cn("pl-6 text-sm", TONE_TEXT[tone])}>Missing: {item.confidence.missing}</p>
-	{/if}
+			{#if item.confidence.missing && level !== "high" && open}
+				<p class={cn("text-sm", TONE_TEXT[tone])}>Missing: {item.confidence.missing}</p>
+			{/if}
 
-	<div class="pl-6">
-		<InboxTraceView trace={item.trace} />
-	</div>
+			{#if hasTrace}
+				<InboxTraceView trace={item.trace} reasoning={why} agent={item.agent?.name} />
+			{/if}
+		</div>
+	</header>
 
 	{#if item.state === "working"}
 		<div class="flex flex-col gap-1.5 pl-6">
@@ -272,11 +337,9 @@
 		<div class="flex flex-wrap items-center gap-2 pl-6">
 			<Button size="sm" onclick={approve} aria-keyshortcuts="a">{sendLabel}</Button>
 			{#if !drafts.some((d) => d.outcome === "decline")}
-				<Button size="sm" variant="destructive" onclick={decline} aria-keyshortcuts="d"
-					>Decline</Button
-				>
+				<Button size="sm" variant="ghost" onclick={decline} aria-keyshortcuts="d">Decline</Button>
 			{/if}
-			<Button size="sm" variant="outline" onclick={steer} aria-keyshortcuts="s">Steer</Button>
+			<Button size="sm" variant="ghost" onclick={steer} aria-keyshortcuts="s">Steer</Button>
 			{#if drafts.length}
 				<Button size="sm" variant="ghost" onclick={copy} class="ml-auto" aria-live="polite">
 					{copied ? "Copied" : "Copy"}

package/src/work/inbox/inbox-logic.ts

@@ -0,0 +1,98 @@
+import type { InboxDraft, InboxItem } from "./inbox-types.js";
+
+/** The draft to open on: the agent's pick, else the first. */
+export function startDraft(drafts: InboxDraft[], recommended?: string): InboxDraft | undefined {
+  return drafts.find((draft) => draft.templateId === recommended) ?? drafts[0];
+}
+
+/** A person can act on an item only while it waits for them. */
+export function isOpen(item: InboxItem): boolean {
+  return item.tier === "ask" && item.state === "proposed";
+}
+
+export function canUndo(item: InboxItem): boolean {
+  return item.tier === "auto" && item.state === "done";
+}
+
+/** Lowercase, one space between words, no trailing ellipsis: what two copies of a line share. */
+function plain(text: string): string {
+  return text
+    .replace(/(…|\.{3})\s*$/, "")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+}
+
+/** The lines of a card that say something the title and the command don't. */
+export type CardFacts = {
+  lines: string[];
+  command?: { tool: string; text: string };
+};
+
+/**
+ * Each fact once: a line that repeats the title or the command, even clipped, is dropped, and
+ * one that starts with the title keeps only the rest.
+ */
+export function cardFacts(item: InboxItem): CardFacts {
+  const { command, summary, detail } = item.proposal;
+  const shown = [plain(item.title)];
+  if (command) shown.push(plain(`${command.tool}: ${command.text}`), plain(command.text));
+  const lines: string[] = [];
+  for (const raw of [summary, detail]) {
+    let line = raw?.trim() ?? "";
+    const title = item.title.trim();
+    if (line.toLowerCase().startsWith(title.toLowerCase()) && line.length > title.length) {
+      line = line.slice(title.length).replace(/^[\s:.,;-]+/, "");
+    }
+    const key = plain(line);
+    if (!key || shown.some((seen) => seen.includes(key) || key.includes(seen))) continue;
+    shown.push(key);
+    lines.push(line);
+  }
+  return { lines, command };
+}
+
+/** The reasoning of a trace when no line of the card already says it. */
+export function freshReasoning(item: InboxItem, facts: CardFacts): string {
+  const reasoning = item.trace.reasoning.trim();
+  const key = plain(reasoning);
+  if (!key) return "";
+  const said = [item.title, item.proposal.summary, item.proposal.detail ?? "", ...facts.lines]
+    .map(plain)
+    .filter(Boolean);
+  return said.some((line) => line.includes(key) || key.includes(line)) ? "" : reasoning;
+}
+
+const ISO = /^\d{4}-\d{2}-\d{2}T/;
+const UNITS: [number, Intl.RelativeTimeFormatUnit][] = [
+  [604_800, "week"],
+  [86_400, "day"],
+  [3_600, "hour"],
+  [60, "minute"],
+];
+
+/**
+ * A time as a person says it: "3 hr. ago", "Oct 12". A host-formatted string stays as written,
+ * and a raw ISO string never reaches the screen.
+ */
+export function whenOf(at: string, now: number = Date.now(), locale = "en-GB"): string {
+  if (!ISO.test(at)) return at;
+  const time = Date.parse(at);
+  if (Number.isNaN(time)) return "";
+  const seconds = Math.round((time - now) / 1000);
+  const age = Math.abs(seconds);
+  if (age >= 4 * 604_800) {
+    return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(time);
+  }
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
+  for (const [size, unit] of UNITS) {
+    if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+  }
+  return rtf.format(0, "second");
+}
+
+/** True when a key press belongs to a text field and so isn't a shortcut. */
+export function isTyping(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+}

package/src/work/inbox/inbox-trace.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Reasoning, ReasoningContent, ReasoningTrigger } from "../../ai/reasoning/index.js";
+	import type { InboxTrace } from "./inbox-types.js";
+
+	interface Props {
+		trace: InboxTrace;
+		/** The reasoning no other line of the card says. Empty when the card already shows it. */
+		reasoning?: string;
+		/** The name the card's meta line shows, so the source label doesn't repeat it. */
+		agent?: string;
+	}
+
+	let { trace, reasoning = "", agent }: Props = $props();
+
+	let count = $derived(trace.evidence.length);
+	let label = $derived(
+		trace.source.label.trim() === agent?.trim() ? "" : trace.source.label.trim(),
+	);
+</script>
+
+<!-- WHY the shared Reasoning and not a local disclosure: it is already the
+     collapsed-by-default "how the agent got here" pattern, with the same chevron. -->
+<Reasoning>
+	<ReasoningTrigger class="w-auto">
+		<span>Trace{count > 0 ? ` · ${count} ${count === 1 ? "quote" : "quotes"}` : ""}</span>
+	</ReasoningTrigger>
+	<ReasoningContent>
+		<div class="flex flex-col gap-3">
+			{#if label || trace.source.href}
+				<p class="text-foreground">
+					{label}
+					{#if trace.source.href}
+						<a href={trace.source.href} class="text-foreground underline underline-offset-2"
+							>Open source</a
+						>
+					{/if}
+				</p>
+			{/if}
+			{#if count > 0}
+				<ul class="flex flex-col gap-2">
+					{#each trace.evidence as evidence, i (i)}
+						<li>
+							<blockquote class="text-foreground">&ldquo;{evidence.quote}&rdquo;</blockquote>
+							{#if evidence.by || evidence.at}
+								<span class="text-xs tabular-nums"
+									>{[evidence.by, evidence.at].filter(Boolean).join(", ")}</span
+								>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+			{#if reasoning}
+				<p><span class="text-foreground font-medium">Why:</span> {reasoning}</p>
+			{/if}
+		</div>
+	</ReasoningContent>
+</Reasoning>

package/src/{tasks → work}/inbox/inbox-types.ts

@@ -28,6 +28,8 @@ export type InboxDraft = {
 export type InboxProposal = {
   summary: string;
   detail?: string;
+  /** The exact call to run, drawn once in monospace. Summary and detail that repeat it are dropped. */
+  command?: { tool: string; text: string };
   drafts?: InboxDraft[];
   /** The draft to open on. Defaults to the first. */
   recommended?: string;

package/src/{tasks → work}/index.ts

@@ -13,16 +13,6 @@ export type {
   KanbanMove,
   KanbanSortKey,
 } from "./kanban-types.js";
-export { StatusBadge, StatusDot, StatusIcon, defineStatuses } from "../status/index.js";
-export type {
-  StatusDef,
-  StatusDotVariant,
-  StatusId,
-  StatusMap,
-  Statuses,
-} from "../status/index.js";
-export { SidePanel } from "../panel/index.js";
-export type { PanelStat, SidePanelWidth } from "../panel/index.js";
 export { default as TaskList } from "./task-list.svelte";
 export { default as TaskGantt } from "./task-gantt.svelte";
 export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";

package/src/{tasks → work}/kanban-board.svelte

@@ -484,7 +484,7 @@
 									<span class="truncate whitespace-nowrap">{column.label}</span>
 									{#if count > 0}
 										<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums"
-											>{count}</span
+											>{count.toLocaleString()}</span
 										>
 									{/if}
 								{/if}

package/src/{tasks → work}/task-list.svelte

@@ -254,7 +254,7 @@
 				<span
 					class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
 				>
-					{count}
+					{count.toLocaleString()}
 				</span>
 			{/if}
 			{#if actions}

package/src/{tasks → work}/time/time-tracker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from "svelte";
 	import { cn } from "../../lib/utils.js";
+	import { initial } from "../../lib/initials.js";
 	import { TONE_COLOR, TONE_TEXT } from "../../lib/tone.js";
 	import * as Popover from "../../shadcn/popover/index.js";
 	import {
@@ -206,10 +207,6 @@
 			deleting = null;
 		}
 	}
-
-	function initial(name: string): string {
-		return name.trim().charAt(0).toLocaleUpperCase() || "?";
-	}
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -468,7 +465,7 @@
 	}
 
 	.time-toggle:active {
-		transform: scale(0.94);
+		transform: scale(0.96);
 	}
 
 	@media (any-pointer: coarse) {

package/src/tasks/inbox/inbox-logic.ts

@@ -1,21 +0,0 @@
-import type { InboxDraft, InboxItem } from "./inbox-types.js";
-
-/** The draft to open on: the agent's pick, else the first. */
-export function startDraft(drafts: InboxDraft[], recommended?: string): InboxDraft | undefined {
-  return drafts.find((draft) => draft.templateId === recommended) ?? drafts[0];
-}
-
-/** A person can act on an item only while it waits for them. */
-export function isOpen(item: InboxItem): boolean {
-  return item.tier === "ask" && item.state === "proposed";
-}
-
-export function canUndo(item: InboxItem): boolean {
-  return item.tier === "auto" && item.state === "done";
-}
-
-/** True when a key press belongs to a text field and so isn't a shortcut. */
-export function isTyping(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
-}

package/src/tasks/inbox/inbox-trace.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	import { Reasoning, ReasoningContent, ReasoningTrigger } from "../../ai/reasoning/index.js";
-	import { SOURCE_ICON, SOURCE_LABEL } from "./inbox-statuses.js";
-	import type { InboxTrace } from "./inbox-types.js";
-
-	interface Props {
-		trace: InboxTrace;
-	}
-
-	let { trace }: Props = $props();
-
-	let count = $derived(trace.evidence.length);
-	let SourceIcon = $derived(SOURCE_ICON[trace.source.type]);
-</script>
-
-<!-- WHY the shared Reasoning and not a local disclosure: it is already the
-     collapsed-by-default "how the agent got here" pattern, with the same chevron. -->
-<Reasoning>
-	<ReasoningTrigger class="w-auto">
-		<SourceIcon size={14} class="shrink-0" aria-hidden="true" />
-		<span>
-			Trace: {SOURCE_LABEL[trace.source.type]}, {trace.source.at}, {count}
-			{count === 1 ? "quote" : "quotes"}
-		</span>
-	</ReasoningTrigger>
-	<ReasoningContent>
-		<div class="flex flex-col gap-3">
-			<p class="text-foreground">
-				{trace.source.label}
-				{#if trace.source.href}
-					<a href={trace.source.href} class="text-foreground ml-1 underline underline-offset-2"
-						>Open source</a
-					>
-				{/if}
-			</p>
-			<ul class="flex flex-col gap-2">
-				{#each trace.evidence as evidence, i (i)}
-					<li>
-						<blockquote class="text-foreground">&ldquo;{evidence.quote}&rdquo;</blockquote>
-						{#if evidence.by || evidence.at}
-							<span class="text-xs tabular-nums"
-								>{[evidence.by, evidence.at].filter(Boolean).join(", ")}</span
-							>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-			<p><span class="text-foreground font-medium">Why:</span> {trace.reasoning}</p>
-		</div>
-	</ReasoningContent>
-</Reasoning>