@shivaedev/work-board 0.13.0 → 0.14.0

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

@@ -0,0 +1,64 @@
+import { Search } from "lucide-react";
+import { useId, useState } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { Button } from "./Button.tsx";
+export function Command({
+	label,
+	items,
+	onSelect,
+}: {
+	readonly label: string;
+	readonly items: readonly { readonly value: string; readonly label: string }[];
+	readonly onSelect: (value: string) => void;
+}) {
+	const id = useId();
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState(0);
+	const filtered = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+	return (
+		<div className="overflow-hidden rounded-lg border bg-popover text-popover-foreground">
+			<div className="flex items-center gap-2 border-b px-3">
+				<Search aria-hidden="true" className="size-4 text-muted-foreground" />
+				<input
+					aria-activedescendant={filtered[active] ? `${id}-${active}` : undefined}
+					aria-autocomplete="list"
+					aria-controls={id}
+					aria-expanded="true"
+					aria-label={label}
+					className="h-10 w-full bg-transparent outline-none"
+					onChange={(event) => {
+						setQuery(event.target.value);
+						setActive(0);
+					}}
+					onKeyDown={(event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							setActive((active + (event.key === "ArrowDown" ? 1 : -1) + filtered.length) % Math.max(1, filtered.length));
+						}
+						if (event.key === "Enter" && filtered[active]) {
+							onSelect(filtered[active].value);
+						}
+					}}
+					role="combobox"
+					value={query}
+				/>
+			</div>
+			<div aria-label={label} className="max-h-72 overflow-y-auto p-1" id={id} role="listbox">
+				{filtered.map((item, index) => (
+					<Button
+						aria-selected={active === index}
+						className={cn("w-full justify-start", active === index && "bg-accent")}
+						id={`${id}-${index}`}
+						key={item.value}
+						onClick={() => onSelect(item.value)}
+						role="option"
+						variant="ghost"
+					>
+						{item.label}
+					</Button>
+				))}
+				{filtered.length === 0 && <p className="p-3 text-muted-foreground text-sm">No results.</p>}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { Button } from "./Button.tsx";
+export function Popover({
+	label,
+	trigger,
+	children,
+	className,
+	triggerId,
+	triggerClassName,
+}: {
+	readonly label: string;
+	readonly trigger: ReactNode;
+	readonly children: ReactNode;
+	readonly className?: string;
+	readonly triggerId?: string;
+	readonly triggerClassName?: string;
+}) {
+	const id = useId();
+	const [open, setOpen] = useState(false);
+	const ref = useRef<HTMLDivElement>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+		contentRef.current?.querySelector<HTMLElement>("select, button, input")?.focus();
+		function outside(event: PointerEvent) {
+			if (event.target instanceof Node && !ref.current?.contains(event.target)) {
+				setOpen(false);
+			}
+		}
+		function onEscape(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpen(false);
+				buttonRef.current?.focus();
+			}
+		}
+		function onFocus(event: FocusEvent) {
+			if (event.target instanceof Node && !ref.current?.contains(event.target)) {
+				setOpen(false);
+			}
+		}
+		document.addEventListener("focusin", onFocus);
+		document.addEventListener("pointerdown", outside);
+		document.addEventListener("keydown", onEscape);
+		return () => {
+			document.removeEventListener("focusin", onFocus);
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("keydown", onEscape);
+		};
+	}, [open]);
+	return (
+		<div className="relative shrink-0" ref={ref}>
+			<Button
+				aria-controls={id}
+				aria-expanded={open}
+				aria-haspopup="dialog"
+				aria-label={label}
+				className={triggerClassName}
+				id={triggerId}
+				onClick={() => setOpen(!open)}
+				ref={buttonRef}
+				size="icon"
+				variant="ghost"
+			>
+				{trigger}
+			</Button>
+			<div
+				aria-label={label}
+				className={cn(
+					"absolute top-full right-0 z-50 mt-2 w-72 max-w-[calc(100vw-2rem)] rounded-lg border bg-popover p-4 text-popover-foreground text-sm shadow-lg",
+					className,
+				)}
+				hidden={!open}
+				id={id}
+				ref={contentRef}
+				role="dialog"
+			>
+				{children}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,40 @@
+import { cn } from "#client/react/lib/cn.ts";
+import { Button } from "./Button.tsx";
+import { StatusSegments } from "./StatusSegments.tsx";
+
+interface Selection {
+	readonly label: string;
+	readonly onValueChange: (value: string) => void;
+	readonly options: readonly { readonly value: string; readonly label: string }[];
+	readonly value: string;
+}
+interface Counts {
+	readonly counts: Readonly<Record<string, number>>;
+	readonly label: string;
+	readonly size?: "small" | "large";
+}
+export function SegmentedBar(props: Selection | Counts) {
+	return "counts" in props ? (
+		<StatusSegments counts={props.counts} label={props.label} large={props.size === "large"} />
+	) : (
+		<SelectionBar {...props} />
+	);
+}
+function SelectionBar({ label, value, options, onValueChange }: Selection) {
+	return (
+		<fieldset aria-label={label} className="inline-flex gap-1 rounded-lg bg-muted p-1">
+			{options.map((option) => (
+				<Button
+					aria-pressed={value === option.value}
+					className={cn(value === option.value && "bg-background shadow-sm")}
+					key={option.value}
+					onClick={() => onValueChange(option.value)}
+					size="sm"
+					variant="ghost"
+				>
+					{option.label}
+				</Button>
+			))}
+		</fieldset>
+	);
+}

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { Modal } from "#client/react/Modal.tsx";
+export function Sheet({ className, ...props }: ComponentProps<typeof Modal>) {
+	return (
+		<Modal
+			className={cn(
+				"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-80 max-w-full overflow-y-auto border-l bg-background p-6 text-foreground shadow-xl backdrop:bg-black/45",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

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

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { Badge } from "./Badge.tsx";
+import { statusPresentation } from "./statusPresentation.ts";
+
+const colors = cva("", {
+	variants: {
+		status: {
+			"agent-working": "border-agent-working/25 bg-agent-working/10 text-agent-working",
+			blocked: "border-blocked/25 bg-blocked/10 text-blocked",
+			deferred: "border-deferred/25 bg-deferred/10 text-deferred",
+			done: "border-done/25 bg-done/10 text-done",
+			"needs-you": "border-needs-you/25 bg-needs-you/10 text-needs-you",
+			"waiting-on-agents": "border-waiting-on-agents/25 bg-waiting-on-agents/10 text-waiting-on-agents",
+		},
+	},
+});
+export function StatusChip({ status, className, ...props }: ComponentProps<"span"> & { readonly status: string | undefined }) {
+	if (!status) {
+		return null;
+	}
+	const value = statusPresentation(status);
+	const Icon = value.icon;
+	return (
+		<Badge className={cn(colors({ status: value.token }), className)} data-status-token={value.token} variant="outline" {...props}>
+			<Icon aria-hidden="true" />
+			{status}
+		</Badge>
+	);
+}

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

@@ -0,0 +1,56 @@
+import { cn } from "#client/react/lib/cn.ts";
+import { StatusChip } from "./StatusChip.tsx";
+import { statusPresentation } from "./statusPresentation.ts";
+
+const colors = {
+	"agent-working": "bg-agent-working",
+	blocked: "bg-blocked",
+	deferred: "bg-deferred",
+	done: "bg-done",
+	"needs-you": "bg-needs-you",
+	"waiting-on-agents": "bg-waiting-on-agents",
+};
+export function StatusSegments({
+	counts,
+	label,
+	large = false,
+}: {
+	readonly counts: Readonly<Record<string, number>>;
+	readonly label: string;
+	readonly large?: boolean;
+}) {
+	const entries = Object.entries(counts).sort(([a], [b]) => a.localeCompare(b));
+	const segments = large ? entries : entries.filter(([, count]) => count > 0);
+	const description = entries.map(([status, count]) => `${status}: ${count}`).join(", ") || "No linked work";
+	return (
+		<section aria-label={label} className={large ? "space-y-3" : undefined} data-goal-counts={large ? true : undefined}>
+			<div
+				aria-description={description}
+				aria-label={label}
+				className={large ? "flex h-8 overflow-hidden rounded-lg bg-muted" : "flex h-1.5 gap-0.5 overflow-hidden rounded-full bg-muted"}
+				role="img"
+				title={label}
+			>
+				{segments.map(([status, count]) => (
+					<span
+						className={cn(large && "border-background border-r", colors[statusPresentation(status).token])}
+						data-count={count}
+						data-status={status}
+						key={status}
+						style={{ flex: count }}
+					/>
+				))}
+			</div>
+			{large ? (
+				<ul className="!p-0 !list-none flex flex-wrap gap-x-5 gap-y-2">
+					{entries.map(([status, count]) => (
+						<li className="flex items-center gap-2" key={status}>
+							<span aria-hidden="true" className={`size-2 rounded-full ${colors[statusPresentation(status).token]}`} />
+							<strong>{count}</strong> <StatusChip status={status} />
+						</li>
+					))}
+				</ul>
+			) : null}
+		</section>
+	);
+}

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

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { useId } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+import { Button } from "./Button.tsx";
+export function Tabs({
+	label,
+	value,
+	tabs,
+	onValueChange,
+}: {
+	readonly label: string;
+	readonly value: string;
+	readonly tabs: readonly { readonly value: string; readonly label: string; readonly content: ReactNode }[];
+	readonly onValueChange: (value: string) => void;
+}) {
+	const id = useId();
+	function move(event: React.KeyboardEvent, index: number) {
+		let offset = 0;
+		if (event.key === "ArrowRight") {
+			offset = 1;
+		}
+		if (event.key === "ArrowLeft") {
+			offset = -1;
+		}
+		if (!offset) {
+			return;
+		}
+		event.preventDefault();
+		const next = (index + offset + tabs.length) % tabs.length;
+		const selected = tabs[next];
+		if (selected) {
+			onValueChange(selected.value);
+			document.getElementById(`${id}-tab-${next}`)?.focus();
+		}
+	}
+	return (
+		<div>
+			<div aria-label={label} className="flex gap-1 rounded-lg bg-muted p-1" role="tablist">
+				{tabs.map((tab, index) => (
+					<Button
+						aria-controls={`${id}-panel-${index}`}
+						aria-selected={value === tab.value}
+						className={cn(value === tab.value && "bg-background shadow-sm")}
+						id={`${id}-tab-${index}`}
+						key={tab.value}
+						onClick={() => onValueChange(tab.value)}
+						onKeyDown={(event) => move(event, index)}
+						role="tab"
+						tabIndex={value === tab.value ? 0 : -1}
+						variant="ghost"
+					>
+						{tab.label}
+					</Button>
+				))}
+			</div>
+			{tabs.map((tab, index) => (
+				<div
+					aria-labelledby={`${id}-tab-${index}`}
+					className="pt-4"
+					hidden={value !== tab.value}
+					id={`${id}-panel-${index}`}
+					key={tab.value}
+					role="tabpanel"
+				>
+					{tab.content}
+				</div>
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { cloneElement, useId } from "react";
+export function Tooltip({ children, text }: { readonly children: ReactElement<{ readonly "aria-describedby"?: string }>; readonly text: string }) {
+	const id = useId();
+	return (
+		<span className="group relative inline-flex">
+			{cloneElement(children, { "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ") })}
+			<span
+				className="pointer-events-none absolute top-full right-0 z-50 mt-2 hidden w-max max-w-64 rounded-md bg-foreground px-2 py-1 text-background text-xs group-focus-within:block group-hover:block"
+				id={id}
+				role="tooltip"
+			>
+				{text}
+			</span>
+		</span>
+	);
+}

package/src/client/react/components/ui/buttonVariants.ts

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+export const buttonVariants = cva(
+	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+	{
+		defaultVariants: { size: "default", variant: "default" },
+		variants: {
+			size: { default: "h-9 px-3 py-2", icon: "size-9 p-0", sm: "h-8 px-2" },
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				ghost: "border-0 bg-transparent hover:bg-accent hover:text-accent-foreground",
+				outline: "border border-input bg-background text-foreground hover:bg-accent",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			},
+		},
+	},
+);

package/src/client/react/components/ui/statusPresentation.ts

@@ -0,0 +1,32 @@
+import { Ban, Check, Circle, CircleHelp, CirclePause, Clock, Inbox, LoaderCircle, MessageCircle, Users } from "lucide-react";
+
+const statuses = {
+	active: { icon: LoaderCircle, token: "agent-working" },
+	adopting: { icon: LoaderCircle, token: "agent-working" },
+	"agent-working": { icon: LoaderCircle, token: "agent-working" },
+	blocked: { icon: Ban, token: "blocked" },
+	completed: { icon: Check, token: "done" },
+	deferred: { icon: CirclePause, token: "deferred" },
+	delivering: { icon: LoaderCircle, token: "agent-working" },
+	done: { icon: Check, token: "done" },
+	executing: { icon: LoaderCircle, token: "agent-working" },
+	"in progress": { icon: LoaderCircle, token: "agent-working" },
+	"in-progress": { icon: LoaderCircle, token: "agent-working" },
+	"needs-human": { icon: MessageCircle, token: "needs-you" },
+	"needs-you": { icon: MessageCircle, token: "needs-you" },
+	planned: { icon: Circle, token: "deferred" },
+	prepared: { icon: Circle, token: "deferred" },
+	received: { icon: Inbox, token: "deferred" },
+	repairing: { icon: LoaderCircle, token: "agent-working" },
+	reviewing: { icon: LoaderCircle, token: "agent-working" },
+	running: { icon: LoaderCircle, token: "agent-working" },
+	superseded: { icon: Clock, token: "deferred" },
+	validating: { icon: LoaderCircle, token: "agent-working" },
+	"waiting-on-agents": { icon: Users, token: "waiting-on-agents" },
+} as const;
+function known(status: string): status is keyof typeof statuses {
+	return Object.hasOwn(statuses, status);
+}
+export function statusPresentation(status: string | undefined) {
+	return status && known(status) ? statuses[status] : ({ icon: CircleHelp, token: "deferred" } as const);
+}

package/src/client/react/diagnosticsValues.tsx

@@ -65,7 +65,7 @@ function Usage({ name, window, now }: { readonly name: string; readonly window:
 }
 export function DiagnosticsWindows({ value, now }: { readonly value: CodexLimits; readonly now: number }) {
 	return (
-		<ul className="diagnostics-windows">
+		<ul className="m-0 grid list-none gap-4 p-0 sm:grid-cols-2 [&_meter]:w-full">
 			<Usage name="Primary" now={now} window={value.primary} />
 			<Usage name="Secondary" now={now} window={value.secondary} />
 		</ul>
@@ -80,8 +80,8 @@ export function DiagnosticsGithub({ value, now }: { readonly value: GithubLimits
 	).map(([name, window]) => <GithubWindow key={name} name={name} now={now} window={window} />);
 	return (
 		<>
-			<dl className="diagnostics-metrics">{windows}</dl>
-			<p className="diagnostics-freshness">Cached for one minute across all tabs.</p>
+			<dl className="grid gap-4 text-sm [&_dt]:text-muted-foreground">{windows}</dl>
+			<p className="text-muted-foreground text-xs">Cached for one minute across all tabs.</p>
 		</>
 	);
 }

package/src/client/react/documentRoute.ts

@@ -1,13 +1,13 @@
-import type { Navigation } from "#browser/navigation/schema.ts";
+import type { Navigation } from "#browser/Navigation.ts";
 import { fileUrl } from "#files/url.ts";
 export function documentRoute(pathname: string, home: Navigation["home"]): boolean {
 	if (
 		home
 		&& (pathname === "/"
 			|| pathname === fileUrl(home.file)
-			|| (home.identity !== undefined && pathname === `/_board/item/${encodeURIComponent(home.identity)}/`))
+			|| (home.identity !== undefined && pathname.replace(/\/$/u, "") === `/_board/item/${encodeURIComponent(home.identity)}`))
 	) {
 		return false;
 	}
-	return pathname === "/" || /\.md$/iu.test(pathname) || /^\/_board\/item\/[^/]+\/$/u.test(pathname);
+	return pathname === "/" || /\.md$/iu.test(pathname) || /^\/_board\/item\/[^/]+\/?$/u.test(pathname);
 }