@heyramzi/ui 2.7.0 → 2.9.0

package/src/work/docs/edited.ts

@@ -0,0 +1,54 @@
+/** The "Edited Oct 23" chip: how a stamp reads, and what to show when it can't be read. */
+
+export type DateInput = Date | string | number | null | undefined;
+
+export type StampOptions = {
+  /** The clock, so a test doesn't depend on today. */
+  now?: Date;
+  locale?: string;
+  timeZone?: string;
+};
+
+export function parseStamp(value: DateInput): Date | null {
+  if (value === null || value === undefined || value === "") return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function yearOf(date: Date, { locale = "en-US", timeZone }: StampOptions) {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", timeZone }).format(date);
+}
+
+/** "Oct 23", or "Oct 23, 2025" when it isn't this year. Empty when the date can't be read. */
+export function shortDate(value: DateInput, options: StampOptions = {}): string {
+  const date = parseStamp(value);
+  if (!date) return "";
+  const { locale = "en-US", timeZone, now = new Date() } = options;
+  const sameYear = yearOf(date, options) === yearOf(now, options);
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: sameYear ? undefined : "numeric",
+    timeZone,
+  }).format(date);
+}
+
+/** "Oct 23, 14:44" for the last-edit row. Empty when the date can't be read. */
+export function editStamp(value: DateInput, options: StampOptions = {}): string {
+  const date = parseStamp(value);
+  if (!date) return "";
+  const { locale = "en-US", timeZone } = options;
+  const time = new Intl.DateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZone,
+  }).format(date);
+  return `${shortDate(date, options)}, ${time}`;
+}
+
+/** The chip's text. `label` is the word ("Edited"); a bad date leaves only the word. */
+export function editedLabel(value: DateInput, label = "Edited", options: StampOptions = {}) {
+  const day = shortDate(value, options);
+  return day ? `${label} ${day}` : label;
+}

package/src/work/docs/index.ts

@@ -0,0 +1,38 @@
+/**
+ * The document surface: a page to write one, the "Edited" chip, the `…` menu and the outline
+ * logic behind the edge ticks. The app supplies the data and every handler.
+ */
+export { default as DocEditorPage } from "./doc-editor-page.svelte";
+export { default as DocMenu } from "./doc-menu.svelte";
+export { default as EditedChip } from "./edited-chip.svelte";
+export { DEFAULT_DOC_LABELS, docLabels, type DocLabels } from "./labels.js";
+export {
+  anchorIds,
+  headingsOf,
+  outlineOf,
+  outlineOfDoc,
+  slugify,
+  type FoundHeading,
+  type OutlineHeading,
+  type OutlineLevel,
+} from "./outline.js";
+export {
+  editStamp,
+  editedLabel,
+  parseStamp,
+  shortDate,
+  type DateInput,
+  type StampOptions,
+} from "./edited.js";
+export {
+  copyOptions,
+  filterMenu,
+  menuItems,
+  shortcutLabel,
+  shortcutTarget,
+  type CopyKind,
+  type CopyOption,
+  type MenuId,
+  type MenuItem,
+  type Shortcut,
+} from "./menu.js";

package/src/work/docs/labels.ts

@@ -0,0 +1,70 @@
+/** Every word the docs surface prints. The app passes a partial to localise it. */
+export type DocLabels = {
+  titlePlaceholder: string;
+  untitled: string;
+  edited: string;
+  showAuthorNames: string;
+  ownedBy: string;
+  lastEditBy: string;
+  showHistory: string;
+  menu: string;
+  filter: string;
+  noResults: string;
+  moveTo: string;
+  duplicate: string;
+  rename: string;
+  template: string;
+  favorite: string;
+  unfavorite: string;
+  copy: string;
+  copyUrl: string;
+  copyTitle: string;
+  copyTitleAsLink: string;
+  copyMarkdown: string;
+  remind: string;
+  history: string;
+  delete: string;
+  deleteTitle: (title: string) => string;
+  deleteDetail: string;
+  cancel: string;
+  back: string;
+  outline: string;
+  copyLink: string;
+};
+
+export const DEFAULT_DOC_LABELS: DocLabels = {
+  titlePlaceholder: "New document",
+  untitled: "Untitled",
+  edited: "Edited",
+  showAuthorNames: "Show author names",
+  ownedBy: "Owned by",
+  lastEditBy: "Last edit by",
+  showHistory: "Show document history",
+  menu: "Document actions",
+  filter: "Filter…",
+  noResults: "Nothing matches",
+  moveTo: "Move to",
+  duplicate: "Duplicate",
+  rename: "Rename",
+  template: "New template from document",
+  favorite: "Favorite",
+  unfavorite: "Remove from favorites",
+  copy: "Copy",
+  copyUrl: "Copy URL",
+  copyTitle: "Copy title",
+  copyTitleAsLink: "Copy title as link",
+  copyMarkdown: "Copy content as Markdown",
+  remind: "Remind me",
+  history: "Show document history",
+  delete: "Delete",
+  deleteTitle: (title) => `Delete "${title}"`,
+  deleteDetail: "This can't be undone.",
+  cancel: "Cancel",
+  back: "Back",
+  outline: "Outline",
+  copyLink: "Copy link",
+};
+
+export function docLabels(partial?: Partial<DocLabels>): DocLabels {
+  return { ...DEFAULT_DOC_LABELS, ...partial };
+}

package/src/work/docs/menu.ts

@@ -0,0 +1,127 @@
+/**
+ * The `…` menu as data: which items exist, which show, how a filter reads them and
+ * which keys fire them. The component only draws what this returns.
+ */
+import { tiptapToMarkdown } from "../../editor/markdown.js";
+import type { DocLabels } from "./labels.js";
+
+export type MenuId =
+  | "move"
+  | "duplicate"
+  | "rename"
+  | "template"
+  | "favorite"
+  | "copy"
+  | "remind"
+  | "history"
+  | "delete";
+
+export type Shortcut = { key: string; shift?: boolean; alt?: boolean };
+
+export type MenuItem = {
+  id: MenuId;
+  label: string;
+  shortcut?: Shortcut;
+  /** Opens a second list instead of firing. */
+  submenu?: boolean;
+  danger?: boolean;
+  /** Items in one group sit together; a hairline separates groups. */
+  group: number;
+};
+
+export const SHORTCUTS: Partial<Record<MenuId, Shortcut>> = {
+  move: { key: "P", shift: true },
+  rename: { key: "R", shift: true },
+  favorite: { key: "F", alt: true },
+  remind: { key: "H", shift: true },
+};
+
+/** "⇧P", "⌥F". */
+export function shortcutLabel(shortcut: Shortcut): string {
+  return `${shortcut.shift ? "⇧" : ""}${shortcut.alt ? "⌥" : ""}${shortcut.key.toUpperCase()}`;
+}
+
+/** Which callbacks the host passed. An item with no callback never shows. */
+export type MenuAvailable = Partial<Record<MenuId, boolean>>;
+
+export function menuItems(
+  available: MenuAvailable,
+  labels: DocLabels,
+  options: { favorited?: boolean } = {},
+): MenuItem[] {
+  const all: MenuItem[] = [
+    { id: "move", label: labels.moveTo, group: 0 },
+    { id: "duplicate", label: labels.duplicate, group: 0 },
+    { id: "rename", label: labels.rename, group: 0 },
+    { id: "template", label: labels.template, group: 0 },
+    { id: "favorite", label: options.favorited ? labels.unfavorite : labels.favorite, group: 1 },
+    { id: "copy", label: labels.copy, submenu: true, group: 1 },
+    { id: "remind", label: labels.remind, group: 1 },
+    { id: "history", label: labels.history, group: 2 },
+    { id: "delete", label: labels.delete, danger: true, group: 2 },
+  ];
+  return all
+    .filter((item) => available[item.id])
+    .map((item) => Object.assign(item, { shortcut: SHORTCUTS[item.id] }));
+}
+
+/** Case-insensitive, every typed word must appear. An empty query keeps everything. */
+export function filterMenu<T extends { label: string }>(items: T[], query: string): T[] {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return items;
+  return items.filter((item) => {
+    const label = item.label.toLowerCase();
+    return words.every((word) => label.includes(word));
+  });
+}
+
+/** The item a key press fires, or null. `code` is the physical key, since Option+F types "ƒ". */
+export function shortcutTarget(
+  event: { code: string; shiftKey: boolean; altKey: boolean; metaKey: boolean; ctrlKey: boolean },
+  items: MenuItem[],
+): MenuId | null {
+  if (event.metaKey || event.ctrlKey) return null;
+  const hit = items.find(
+    (item) =>
+      item.shortcut &&
+      event.code === `Key${item.shortcut.key.toUpperCase()}` &&
+      !!item.shortcut.shift === event.shiftKey &&
+      !!item.shortcut.alt === event.altKey,
+  );
+  return hit?.id ?? null;
+}
+
+export type CopyKind = "url" | "title" | "link" | "markdown";
+
+export type CopyOption = { kind: CopyKind; label: string; text: string };
+
+/** The Copy submenu. A kind with nothing to copy is left out: no URL, no content. */
+export function copyOptions(
+  source: { title: string; url?: string; content?: unknown },
+  labels: DocLabels,
+): CopyOption[] {
+  const title = source.title.trim() || labels.untitled;
+  const options: CopyOption[] = [];
+  if (source.url) options.push({ kind: "url", label: labels.copyUrl, text: source.url });
+  options.push({ kind: "title", label: labels.copyTitle, text: title });
+  if (source.url) {
+    options.push({
+      kind: "link",
+      label: labels.copyTitleAsLink,
+      text: `[${title.replace(/([[\]\\])/g, "\\$1")}](${source.url})`,
+    });
+  }
+  if (source.content) {
+    options.push({
+      kind: "markdown",
+      label: labels.copyMarkdown,
+      text: tiptapToMarkdown(source.content),
+    });
+  }
+  return options;
+}
+
+/** What the delete confirm calls the doc. */
+export function deleteName(title: string, labels: DocLabels): string {
+  return title.trim() || labels.untitled;
+}

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-grid.svelte

@@ -73,7 +73,7 @@
 <style>
 	.g-today {
 		transform-origin: top;
-		animation: g-today-in var(--duration-very-slow, 500ms)
+		animation: g-today-in var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 	}
 
@@ -89,7 +89,7 @@
 	.g-arrow-line {
 		stroke-dasharray: 1;
 		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-very-slow, 500ms)
+		animation: g-draw var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
 	}
 

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}/gantt/gantt.css

@@ -1,6 +1,6 @@
 /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
 .g-enter {
-  animation: g-bar-in var(--duration-slow, 400ms)
+  animation: g-bar-in var(--duration-slow, 300ms)
     var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
   animation-delay: calc(var(--g-i, 0) * var(--duration-stagger, 40ms));
 }

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