@shivaedev/work-board 0.12.0 → 0.14.0

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} />;
+}

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/createResponse.ts

@@ -0,0 +1,40 @@
+import { Effect, Equal } from "effect";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { session } from "#client/entry.ts";
+import { responseFailure } from "#client/responses/failure.ts";
+import type { ResponseInput, ResponseSubmission } from "#client/responses/formSchema.ts";
+
+export function createResponse(
+	source: QuestionPreview,
+	submission: ResponseSubmission,
+	current: () => ResponseInput | undefined,
+	setOutcome: (outcome: string) => void,
+	setStatus: (status: string) => void,
+) {
+	return Effect.tryPromise({
+		catch: (error) => error,
+		try: async () => {
+			const native = session(window);
+			setOutcome("pending");
+			setStatus("Pending: registering reviewed context, then recording response…");
+			try {
+				const question = await native.mutate(
+					native.responses.registerQuestion.run({ item: source.item, request: source.request, revision: submission.revision }),
+				);
+				const { answerContext: _answerContext, recovery: _recovery, ...input } = submission;
+				await native.mutate(native.responses.recordResponse.run({ ...input, question: question.id }));
+				const newer = !Equal.equals(current(), submission);
+				setOutcome("saved");
+				setStatus(
+					`Saved: responses/${submission.id}.md. This records feedback, not acceptance.${newer ? " Your current draft remains unsaved." : ""}`,
+				);
+				return submission;
+			} catch (error) {
+				const failure = responseFailure(error);
+				setOutcome(failure.outcome);
+				setStatus(failure.text);
+				throw error;
+			}
+		},
+	});
+}

package/src/client/react/diagnosticsValues.tsx

@@ -0,0 +1,103 @@
+import type { CodexLimits, GithubLimits, UsageWindow } from "#browser/diagnostics/schema.ts";
+import { resetLabel } from "#diagnostics/resetLabel.ts";
+export function ObservedTime({ at }: { readonly at: number | null }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time dateTime={new Date(at).toISOString()}>
+			{new Date(at)
+				.toISOString()
+				.replace("T", " ")
+				.replace(/\.\d{3}Z$/u, " UTC")}
+		</time>
+	);
+}
+function Reset({ at, now }: { readonly at: number | null; readonly now: number }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time data-reset dateTime={new Date(at).toISOString()}>
+			{resetLabel(at, now)}
+		</time>
+	);
+}
+function windowLabel(name: string, minutes: number | null) {
+	if (minutes === null) {
+		return `${name} — duration not reported`;
+	}
+	if (minutes === 10_080) {
+		return "Weekly";
+	}
+	for (const [duration, unit] of [
+		[1440, "day"],
+		[60, "hour"],
+	] as const) {
+		if (minutes % duration === 0) {
+			return `${minutes / duration}-${unit}`;
+		}
+	}
+	return `${minutes}-minute`;
+}
+function Usage({ name, window, now }: { readonly name: string; readonly window: UsageWindow | null; readonly now: number }) {
+	if (!window) {
+		return (
+			<li>
+				<h3>{name}</h3>
+				<p>Window not reported</p>
+			</li>
+		);
+	}
+	const label = windowLabel(name, window.windowDurationMins);
+	return (
+		<li>
+			<h3>{label}</h3>
+			<p>
+				<strong>{window.usedPercent}% used</strong>
+			</p>
+			<meter aria-label={`${label} percent used`} max={100} min={0} value={Math.min(window.usedPercent, 100)}>
+				{window.usedPercent}%
+			</meter>
+			<p>
+				Resets <Reset at={window.resetsAt === null ? null : window.resetsAt * 1000} now={now} />
+			</p>
+		</li>
+	);
+}
+export function DiagnosticsWindows({ value, now }: { readonly value: CodexLimits; readonly now: number }) {
+	return (
+		<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>
+	);
+}
+export function DiagnosticsGithub({ value, now }: { readonly value: GithubLimits; readonly now: number }) {
+	const windows = (
+		[
+			["REST", value.core],
+			["GraphQL", value.graphql],
+		] as const
+	).map(([name, window]) => <GithubWindow key={name} name={name} now={now} window={window} />);
+	return (
+		<>
+			<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>
+		</>
+	);
+}
+function GithubWindow({ name, window, now }: { readonly name: string; readonly window: GithubLimits["core"]; readonly now: number }) {
+	return (
+		<div>
+			<dt>{name}</dt>
+			<dd>
+				<strong>
+					{window.remaining} / {window.limit}
+				</strong>{" "}
+				remaining
+			</dd>
+			<dd>
+				Resets <Reset at={window.reset * 1000} now={now} />
+			</dd>
+		</div>
+	);
+}