@shivaedev/work-board 0.13.0 → 0.14.0

package/src/client/react/UpdatesToggle.tsx

@@ -1,13 +1,16 @@
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { Pause, Play } from "lucide-react";
 import type { BrowserClient } from "#client/client.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
 import { shellIds } from "./shellIds.ts";
 
-export function UpdatesToggle({ client }: { readonly client: BrowserClient }) {
+export function UpdatesToggle({ client }: { readonly client: { readonly updates: Pick<BrowserClient["updates"], "paused"> } }) {
 	const paused = useAtomValue(client.updates.paused);
 	const setPaused = useAtomSet(client.updates.paused);
 	return (
-		<button aria-pressed={paused} id={shellIds.updatesToggle} onClick={() => setPaused((value) => !value)} type="button">
+		<Button aria-pressed={paused} id={shellIds.updatesToggle} onClick={() => setPaused((value) => !value)} type="button" variant="outline">
+			{paused ? <Play aria-hidden="true" /> : <Pause aria-hidden="true" />}
 			{paused ? "Resume updates" : "Pause updates"}
-		</button>
+		</Button>
 	);
 }

package/src/client/react/VisualViewer.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { KeyboardHints } from "./KeyboardHints.tsx";
 import { shellIds } from "./shellIds.ts";
 import { VisualControls } from "./VisualControls.tsx";
 import { graphicWidth, visualFilename } from "./visualDimensions.ts";
@@ -140,7 +141,8 @@ export function VisualViewer({ selection, close }: { readonly selection: VisualS
 				</div>
 			</section>
 			<p className="visual-help">
-				Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.
+				<KeyboardHints>Arrow keys choose images · Escape returns to the source. </KeyboardHints>
+				Zoom and scroll to inspect. Recorded evidence does not verify acceptance.
 			</p>
 		</div>
 	);

package/src/client/react/WorkCard.tsx

@@ -0,0 +1,38 @@
+import { cardStatus, type FleetWork, holderOf } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { Card } from "#client/react/components/ui/Card.tsx";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { Age } from "./Age.tsx";
+import { PrChip } from "./PrChip.tsx";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+
+export function WorkCard({
+	item,
+	state,
+	fleet,
+}: {
+	readonly item: WorkProjection["rows"][number];
+	readonly state: State;
+	readonly fleet: FleetWork | undefined;
+}) {
+	const holder = holderOf(item.metadata, fleet);
+	return (
+		<Card className="work-card" data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			<p className="work-kind">{item.metadata.kind ?? ""}</p>
+			<h3>
+				<WorkItemTitle item={item} state={state} />
+			</h3>
+			<div className="flex flex-wrap items-center gap-2">
+				<StatusChip status={cardStatus(item.metadata, fleet, item.waiting)} title={item.waiting} />
+				<PrChip url={fleet?.prUrl} />
+			</div>
+			{holder && <p className="work-owner">Holder: {holder}</p>}
+			{fleet?.stageEnteredAt !== undefined && fleet.stageEnteredAt !== null && (
+				<p className="work-stage">
+					In {fleet.stage} for <Age modified={fleet.stageEnteredAt} short />
+				</p>
+			)}
+		</Card>
+	);
+}

package/src/client/react/WorkCardList.tsx

@@ -0,0 +1,30 @@
+import type { FleetWork } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { useVirtualRows } from "./useVirtualRows.ts";
+import { WorkCard } from "./WorkCard.tsx";
+
+export function WorkCardList({
+	rows,
+	state,
+	fleet,
+	virtual,
+}: {
+	readonly rows: WorkProjection["rows"];
+	readonly state: State;
+	readonly fleet: ReadonlyMap<string, FleetWork>;
+	readonly virtual: boolean;
+}) {
+	const window = useVirtualRows(rows.length, 224, virtual);
+	return (
+		<section aria-label="Lane items" className="work-card-list" onScroll={window.onScroll}>
+			<div style={{ paddingBottom: window.bottom, paddingTop: window.top }}>
+				{rows.slice(window.start, window.end).map((item) => (
+					<div className="work-card-slot" key={item.id}>
+						<WorkCard fleet={fleet.get(item.id)} item={item} state={state} />
+					</div>
+				))}
+			</div>
+		</section>
+	);
+}

package/src/client/react/WorkCards.tsx

@@ -1,39 +1,27 @@
+import { useContext } from "react";
+import { compareStatuses } from "#browser/views/now.ts";
 import type { WorkProjection } from "#browser/views/schema.ts";
-import type { State } from "#browser/views/state.ts";
-import { WorkItemTitle } from "./WorkItemTitle.tsx";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { WorkCardList } from "./WorkCardList.tsx";
+
 export function WorkCards({ data }: { readonly data: WorkProjection }) {
-	const columns = [...Map.groupBy(data.rows, (item) => item.metadata.status)].map(([status, items]) => (
-		<Column items={items} key={status ?? ""} state={data.state} status={status} />
-	));
-	return <div className="work-columns">{columns}</div>;
-}
-function Column({ items, state, status }: { readonly items: WorkProjection["rows"]; readonly state: State; readonly status: string | undefined }) {
+	const fleet = useContext(FleetItemsContext);
+	const items = new Map(fleet?.state === "ready" ? [...fleet.completed, ...fleet.items].map((item) => [item.workId, item] as const) : []);
+	const columns = [...Map.groupBy(data.rows, (item) => item.metadata.status)].sort(([left], [right]) => compareStatuses(left, right));
 	return (
-		<section aria-label={status ?? "Status not recorded"} className="work-column">
-			<h2>
-				{status ?? "Status not recorded"} <span className="work-count">{items.length}</span>
-			</h2>
-			{items.map((item) => (
-				<Card item={item} key={item.id} state={state} />
+		<div className="work-columns">
+			{columns.map(([status, rows]) => (
+				<section aria-label={status ?? ""} className="work-column" key={status ?? ""}>
+					{Boolean(status) && (
+						<h2>
+							<StatusChip status={status} />
+							<span className="work-count">{rows.length}</span>
+						</h2>
+					)}
+					<WorkCardList fleet={items} rows={rows} state={data.state} virtual={data.rows.length > 200} />
+				</section>
 			))}
-		</section>
-	);
-}
-function Card({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
-	return (
-		<article className="work-card" data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
-			{Boolean(item.waiting) && (
-				<span className="waiting-badge" title={item.waiting}>
-					Waiting on you
-				</span>
-			)}
-			<p className="work-kind">{item.metadata.kind ?? "Kind not recorded"}</p>
-			<h3>
-				<WorkItemTitle item={item} state={state} />
-			</h3>
-			<p className="work-id">{item.id}</p>
-			<p className="work-owner">Owner: {item.metadata.owner ?? "Not recorded"}</p>
-			{Boolean(item.metadata.nextAction) && <p className="work-next">Next: {item.metadata.nextAction}</p>}
-		</article>
+		</div>
 	);
 }

package/src/client/react/WorkControls.tsx

@@ -4,9 +4,7 @@ import { shellIds } from "./shellIds.ts";
 export function WorkControls({ data }: { readonly data: WorkProjection }) {
 	const { state } = data;
 	function fields(field: "owner" | "status") {
-		const values = new Map(
-			data.items.map((item) => [fieldFilter(item.metadata[field]), item.metadata[field] ?? `${field === "owner" ? "Owner" : "Status"} not recorded`]),
-		);
+		const values = new Map(data.items.flatMap((item) => (item.metadata[field] ? [[fieldFilter(item.metadata[field]), item.metadata[field]]] : [])));
 		const current = state[field];
 		if (current && !values.has(current)) {
 			values.set(current, `${current.startsWith("value:") ? current.slice(6) : current} (no current matches)`);

package/src/client/react/WorkDetail.tsx

@@ -1,8 +1,9 @@
 import type { WorkProjection } from "#browser/views/schema.ts";
 import { viewUrl } from "#browser/views/state.ts";
 import { DocumentPage } from "./DocumentPage.tsx";
+import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
-export function WorkDetail({ data }: { readonly data: WorkProjection }) {
+export function WorkDetail({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
 	const { state, selected } = data;
 	if (!state.item) {
 		return null;
@@ -28,7 +29,7 @@ export function WorkDetail({ data }: { readonly data: WorkProjection }) {
 					</p>
 				</>
 			) : (
-				<DocumentPage document={selected} key={selected.identity ?? selected.file} />
+				<DocumentPage api={api} document={selected} key={selected.identity ?? selected.file} />
 			)}
 		</aside>
 	);

package/src/client/react/WorkLane.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import type { FleetWork, NowLane } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { WorkCardList } from "#client/react/WorkCardList.tsx";
+
+export function WorkLane({
+	lane,
+	rows,
+	state,
+	fleet,
+	virtual,
+	collapsed,
+}: {
+	readonly lane: NowLane;
+	readonly rows: WorkProjection["rows"];
+	readonly state: State;
+	readonly fleet: ReadonlyMap<string, FleetWork>;
+	readonly virtual: boolean;
+	readonly collapsed: boolean;
+}) {
+	const [open, setOpen] = useState(!collapsed);
+	return (
+		<section aria-label={lane} className="work-column min-w-0">
+			<h2 className="m-0 mb-3 flex min-h-8 items-center justify-between gap-3 whitespace-nowrap font-semibold text-sm">
+				{collapsed ? (
+					<Button aria-expanded={open} onClick={() => setOpen(!open)} size="sm" variant="outline">
+						{lane}
+					</Button>
+				) : (
+					lane
+				)}
+				<span className="work-count shrink-0 text-muted-foreground text-xs tabular-nums">{rows.length}</span>
+			</h2>
+			{Boolean(open) && <WorkCardList fleet={fleet} rows={rows} state={state} virtual={virtual} />}
+		</section>
+	);
+}

package/src/client/react/WorkNow.tsx

@@ -0,0 +1,35 @@
+import { Clock, Effect } from "effect";
+import { useContext } from "react";
+import { laneOf, nowLanes } from "#browser/views/now.ts";
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { FleetItemsContext } from "#client/react/FleetItemsContext.ts";
+import { WorkLane } from "#client/react/WorkLane.tsx";
+
+export function WorkNow({ data }: { readonly data: WorkProjection }) {
+	const fleet = useContext(FleetItemsContext);
+	const ready = fleet?.state === "ready";
+	const items = new Map(ready ? [...fleet.completed, ...fleet.items].map((item) => [item.workId, item] as const) : []);
+	const recent = new Set(
+		ready
+			? fleet.completed.filter((item) => item.completedAt >= Effect.runSync(Clock.currentTimeMillis) - 604_800_000).map((item) => item.workId)
+			: [],
+	);
+	const groups = Map.groupBy(data.rows, (item) => laneOf(item.metadata, items.get(item.id), item.fleetApproved));
+	return (
+		<>
+			{!ready && (
+				<p role="status">
+					Fleet is unavailable. Lanes use authored status. {fleet?.state === "unavailable" ? fleet.reason : "Fleet data has not loaded."}
+				</p>
+			)}
+			<div className="work-columns work-now grid auto-cols-[minmax(260px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2 max-md:auto-cols-auto max-md:grid-flow-row">
+				{nowLanes.map((lane, index) => {
+					const rows = (groups.get(lane) ?? []).filter((item) => index !== 5 || recent.has(item.id));
+					return (
+						<WorkLane collapsed={index === 5} fleet={items} key={lane} lane={lane} rows={rows} state={data.state} virtual={data.rows.length > 200} />
+					);
+				})}
+			</div>
+		</>
+	);
+}

package/src/client/react/WorkPage.tsx

@@ -1,25 +1,30 @@
 import type { WorkProjection } from "#browser/views/schema.ts";
 import { viewUrl } from "#browser/views/state.ts";
-import { shellIds } from "./shellIds.ts";
-import { WorkControls } from "./WorkControls.tsx";
-import { WorkDetail } from "./WorkDetail.tsx";
-import { WorkResults } from "./WorkResults.tsx";
-import { WorkTools } from "./WorkTools.tsx";
-export function WorkPage({ data }: { readonly data: WorkProjection }) {
+import { SavedViews } from "#client/react/SavedViews.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import { WorkControls } from "#client/react/WorkControls.tsx";
+import { WorkDetail } from "#client/react/WorkDetail.tsx";
+import { WorkResults } from "#client/react/WorkResults.tsx";
+import { WorkTools } from "#client/react/WorkTools.tsx";
+export function WorkPage({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
 	const { state } = data;
 	const source = `/_board/item/${encodeURIComponent(state.board)}/`;
 	return (
 		<>
-			<header className="work-head">
-				<p className="work-eyebrow">WORK · {state.view.toUpperCase()} VIEW</p>
-				<h1>{data.validBoard ? data.title : "Board unavailable"}</h1>
-				<p>Views use recorded fields. A section heading does not set an item's status.</p>
+			<header className="work-head mb-4 space-y-2">
+				{state.view !== "now" && <p className="work-eyebrow">WORK · {state.view.toUpperCase()} VIEW</p>}
+				<h1 className="m-0 font-semibold text-2xl">{data.validBoard ? data.title : "Board unavailable"}</h1>
 				{Boolean(state.board) && data.validBoard && <a href={source}>Board source</a>}
 			</header>
 			<WorkTools state={state} />
-			<WorkControls data={data} key={viewUrl(state)} />
+			<details className="work-options mb-4" open={state.view !== "now"}>
+				<summary className="cursor-pointer text-muted-foreground text-sm">Filter</summary>
+				<SavedViews url={viewUrl(state, { item: "" })} />
+				<WorkControls data={data} key={viewUrl(state)} />
+			</details>
 			{data.validBoard ? (
-				<WorkContent data={data} />
+				<WorkContent api={api} data={data} />
 			) : (
 				<p className="empty">
 					{state.board} is missing, has a duplicate ID, or is not a declared board. Choose another board or open its{" "}
@@ -29,7 +34,7 @@ export function WorkPage({ data }: { readonly data: WorkProjection }) {
 		</>
 	);
 }
-function WorkContent({ data }: { readonly data: WorkProjection }) {
+function WorkContent({ data, api }: { readonly data: WorkProjection; readonly api?: ShellApi | undefined }) {
 	const issues = data.issues.map((issue) => <li key={issue}>{issue}</li>);
 	return (
 		<>
@@ -39,9 +44,11 @@ function WorkContent({ data }: { readonly data: WorkProjection }) {
 					<ul>{issues}</ul>
 				</details>
 			)}
-			<p className="work-total" role="status">
-				{data.rows.length} shown · {data.items.length} items in this view
-			</p>
+			{data.state.view !== "now" && (
+				<p className="work-total" role="status">
+					{data.rows.length} shown · {data.items.length} items in this view
+				</p>
+			)}
 			<div className={data.state.item ? "work-layout has-detail" : "work-layout"}>
 				<section aria-label="Work items" id={shellIds.workResults} tabIndex={-1}>
 					{data.items.length === 0 && (
@@ -52,7 +59,7 @@ function WorkContent({ data }: { readonly data: WorkProjection }) {
 					)}
 					<WorkResults data={data} />
 				</section>
-				<WorkDetail data={data} />
+				<WorkDetail api={api} data={data} />
 			</div>
 		</>
 	);

package/src/client/react/WorkResults.tsx

@@ -1,7 +1,11 @@
 import type { WorkProjection } from "#browser/views/schema.ts";
 import { WorkCards } from "./WorkCards.tsx";
+import { WorkNow } from "./WorkNow.tsx";
 import { WorkTable } from "./WorkTable.tsx";
 export function WorkResults({ data }: { readonly data: WorkProjection }) {
+	if (data.state.view === "now") {
+		return <WorkNow data={data} />;
+	}
 	if (data.rows.length === 0) {
 		return <p className="empty">No work matches these filters.</p>;
 	}

package/src/client/react/WorkTable.tsx

@@ -1,39 +1,65 @@
 import type { WorkProjection } from "#browser/views/schema.ts";
 import type { State } from "#browser/views/state.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { useVirtualRows } from "./useVirtualRows.ts";
 import { WorkItemTitle } from "./WorkItemTitle.tsx";
 export function WorkTable({ data }: { readonly data: WorkProjection }) {
+	const window = useVirtualRows(data.rows.length, 96);
+	const virtual = data.rows.length > 200;
 	const headings = ["Work", "Kind", "Status", "Owner", "Next action"].map((label) => (
 		<th key={label} scope="col">
 			{label}
 		</th>
 	));
 	return (
-		<div className="work-table-wrap">
+		<div className="work-table-wrap" onScroll={window.onScroll}>
 			<table className="work-table">
 				<caption className="sr-only">Identified work, sorted by {data.state.sort}</caption>
 				<thead>
 					<tr>{headings}</tr>
 				</thead>
 				<tbody>
-					{data.rows.map((item) => (
-						<Row item={item} key={item.id} state={data.state} />
+					{window.top > 0 && (
+						<tr>
+							<td colSpan={5} style={{ height: window.top, padding: 0 }} />
+						</tr>
+					)}
+					{data.rows.slice(window.start, window.end).map((item) => (
+						<Row item={item} key={item.id} state={data.state} virtual={virtual} />
 					))}
+					{window.bottom > 0 && (
+						<tr>
+							<td colSpan={5} style={{ height: window.bottom, padding: 0 }} />
+						</tr>
+					)}
 				</tbody>
 			</table>
 		</div>
 	);
 }
-function Row({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+function Row({ item, state, virtual }: { readonly item: WorkProjection["rows"][number]; readonly state: State; readonly virtual: boolean }) {
 	return (
-		<tr data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+		<tr className={virtual ? "work-virtual-row" : undefined} data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
 			<th scope="row">
-				<WorkItemTitle item={item} state={state} />
-				<span className="work-id">{item.id}</span>
+				<div className="work-cell">
+					<WorkItemTitle item={item} state={state} />
+					<span className="work-id">{item.id}</span>
+				</div>
 			</th>
-			<td>{item.metadata.kind ?? "Not recorded"}</td>
-			<td>{item.waiting ? `Waiting on you · ${item.metadata.status ?? "Status not recorded"}` : (item.metadata.status ?? "Not recorded")}</td>
-			<td>{item.metadata.owner ?? "Not recorded"}</td>
-			<td>{item.metadata.nextAction ?? "Not recorded"}</td>
+			<td>
+				<div className="work-cell">{item.metadata.kind ?? ""}</div>
+			</td>
+			<td>
+				<div className="work-cell">
+					{Boolean(item.waiting) && <StatusChip status="needs-you" />} <StatusChip status={item.metadata.status} />
+				</div>
+			</td>
+			<td>
+				<div className="work-cell">{item.metadata.owner ?? ""}</div>
+			</td>
+			<td>
+				<div className="work-cell">{item.metadata.nextAction ?? ""}</div>
+			</td>
 		</tr>
 	);
 }

package/src/client/react/WorkTools.tsx

@@ -1,17 +1,19 @@
 import type { State } from "#browser/views/state.ts";
 import { viewUrl } from "#browser/views/state.ts";
-import { SavedViews } from "./SavedViews.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
 export function WorkTools({ state }: { readonly state: State }) {
 	return (
-		<>
-			<nav aria-label="Work layout" className="view-layouts">
-				{(["board", "table"] as const).map((view) => (
-					<a aria-current={state.view === view ? "page" : undefined} href={viewUrl(state, { view }, "work-results")} key={view}>
-						{view === "board" ? "Board" : "Table"}
-					</a>
-				))}
-			</nav>
-			<SavedViews url={viewUrl(state, { item: "" })} />
-		</>
+		<nav aria-label="Work layout" className="view-layouts mb-4 flex flex-wrap gap-2">
+			{(["now", "board", "table"] as const).map((view) => (
+				<a
+					aria-current={state.view === view ? "page" : undefined}
+					className={buttonVariants({ size: "sm", variant: state.view === view ? "secondary" : "outline" })}
+					href={viewUrl(state, { view }, "work-results")}
+					key={view}
+				>
+					{{ board: "All work", now: "Now", table: "Table" }[view]}
+				</a>
+			))}
+		</nav>
 	);
 }

package/src/client/react/activeRead.ts

@@ -1,8 +1,8 @@
 import type { Cause } from "effect";
 import * as Atom from "effect/reactivity/Atom";
-import type { BrowserClient } from "#client/client.ts";
 import { resolvedDocumentFailure } from "#client/page/resolvedDocumentFailure.ts";
-import { pageQuery } from "./pageQuery.ts";
+import { pageQueries } from "./pageQueries.ts";
+import type { ShellApi } from "./ShellApi.ts";
 
 function health(value: { readonly _tag: string; readonly waiting: boolean; readonly cause?: Cause.Cause<unknown> }) {
 	return {
@@ -10,6 +10,10 @@ function health(value: { readonly _tag: string; readonly waiting: boolean; reado
 		pending: value.waiting || value._tag === "Initial",
 	};
 }
-export function activeRead(client: BrowserClient, kind: string, url: string, baseline: string | null) {
-	return pageQuery(client.api, kind, url, baseline).pipe(Atom.map(health));
+export function activeRead(api: ShellApi, kind: string, url: string) {
+	const queries = pageQueries(api, kind, url);
+	return Atom.make((get) => {
+		const readings = queries.map((query) => health(get(query)));
+		return { failed: readings.some((reading) => reading.failed), pending: readings.some((reading) => reading.pending) };
+	});
 }

package/src/client/react/command-palette.css

@@ -0,0 +1,59 @@
+#search-dialog.command-palette {
+	width: min(640px, calc(100vw - 32px));
+	max-height: calc(100dvh - 32px);
+	padding: 0;
+	margin: auto;
+	overflow: hidden;
+	color: var(--popover-foreground);
+	background: var(--popover);
+	border-radius: var(--radius);
+	box-shadow: 0 16px 48px rgb(0 0 0 / 0.18);
+}
+.command-palette .search-header {
+	padding: 12px 16px;
+}
+.command-palette .search-header h2 {
+	font-size: 1rem;
+	font-weight: 600;
+}
+.command-palette #search-form {
+	padding: 12px 16px;
+	margin: 0;
+	border-block: 1px solid var(--border);
+}
+.command-palette #search-form label {
+	font-size: 0.8rem;
+	color: var(--muted-foreground);
+}
+.command-palette #search-query {
+	background: transparent;
+}
+.command-palette :is(.search-help, #search-status) {
+	margin: 8px 16px;
+	font-size: 0.75rem;
+}
+.command-palette #search-results {
+	max-height: min(420px, calc(100dvh - 260px));
+	padding: 4px;
+	overflow-y: auto;
+	overscroll-behavior: contain;
+}
+.command-palette #search-results a {
+	padding: 10px 12px;
+	color: var(--popover-foreground);
+}
+.command-palette #search-results a[aria-selected="true"] {
+	outline: none;
+	background: var(--accent);
+}
+.command-palette #search-results small {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	align-items: center;
+	margin-top: 4px;
+}
+.command-palette #search-results p {
+	font-size: 0.8rem;
+	color: var(--muted-foreground);
+}

package/src/client/react/components/ui/Badge.tsx

@@ -0,0 +1,11 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+
+const badgeVariants = cva("inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 font-medium text-xs [&_svg]:size-3.5", {
+	defaultVariants: { variant: "default" },
+	variants: { variant: { default: "border-transparent bg-secondary text-secondary-foreground", outline: "border-border text-foreground" } },
+});
+export function Badge({ className, variant, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+	return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/src/client/react/components/ui/Button.tsx

@@ -0,0 +1,8 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { buttonVariants } from "./buttonVariants.ts";
+
+export function Button({ className, variant, size, type = "button", ...props }: ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+	return <button className={cn(buttonVariants({ size, variant }), className)} type={type} {...props} />;
+}

package/src/client/react/components/ui/Card.tsx

@@ -0,0 +1,5 @@
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+export function Card({ className, ...props }: ComponentProps<"article">) {
+	return <article className={cn("rounded-lg border bg-card p-4 text-card-foreground shadow-sm", className)} {...props} />;
+}