@heyramzi/ui 2.7.0 → 2.9.0

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}/kanban-column.svelte

@@ -93,7 +93,7 @@
 	.kanban-column-expanding {
 		flex: 0 0 280px;
 		width: 280px;
-		animation: column-expand var(--duration-slow, 320ms) var(--ease-smooth-out, ease-out) both;
+		animation: column-expand var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) both;
 	}
 
 	@keyframes column-expand {

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}
@@ -408,7 +408,7 @@
 	}
 
 	.tl-row {
-		animation: tl-row-in var(--duration-slow, 400ms)
+		animation: tl-row-in var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger, 40ms));
 		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);

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

@@ -65,7 +65,7 @@
 <style>
 	.time-ring-arc {
 		transition:
-			stroke-dasharray var(--duration-slow, 400ms)
+			stroke-dasharray var(--duration-slow, 300ms)
 				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}

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) {
@@ -538,7 +535,7 @@
 	}
 
 	.time-segment {
-		transition: width var(--duration-slow, 400ms)
+		transition: width var(--duration-slow, 300ms)
 			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 

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>