@shivaedev/work-board 0.17.0 → 0.18.0

package/src/browser/responses/cardContext.ts

@@ -10,15 +10,16 @@ export function cardContext(source: string) {
 	return { links, recommendation };
 }
 
-export function optionLabel(id: string, source: string, reason: string) {
-	const heading = /^#{1,6}\s+(?<title>.+)$/mu.exec(source)?.groups?.title;
-	if (heading) {
-		return heading;
+export function optionText(id: string, source: string) {
+	const heading = promptHeading(source);
+	if (heading.title) {
+		return { description: heading.rest, label: heading.title };
 	}
-	if (id === "retry" && /reviewed pr is ready to merge/iu.test(reason)) {
-		return "Request changes (retry)";
+	const lead = /^\*\*(?<label>[^*]+)\*\*\s*(?:[—–:-]\s*)?/u.exec(source.trim());
+	if (lead?.groups?.label) {
+		return { description: source.trim().slice(lead[0].length).trim(), label: lead.groups.label.trim() };
 	}
-	return id.charAt(0).toUpperCase() + id.slice(1).replaceAll("-", " ");
+	return { description: source.trim(), label: id.charAt(0).toUpperCase() + id.slice(1).replaceAll("-", " ") };
 }
 
 function section(source: string, title: string) {
@@ -48,3 +49,8 @@ function section(source: string, title: string) {
 function nextFence(current: string | undefined, marker: string) {
 	return current?.startsWith(marker.charAt(0)) && marker.length >= current.length ? undefined : marker;
 }
+
+export function promptHeading(source: string) {
+	const heading = /^#{1,6}\s+(?<title>.+)$/mu.exec(source);
+	return { rest: heading ? source.replace(heading[0], "").trim() : source.trim(), title: heading?.groups?.title?.trim() };
+}

package/src/browser/views/now.ts

@@ -51,11 +51,51 @@ function authoredLane(status: string | undefined, approved: boolean): NowLane |
 	return Object.entries(stages).find(([stage]) => stage === status)?.[1];
 }
 
+const fleetHolders: Record<FleetWork["stage"], string> = {
+	adopting: "Fleet is working on this",
+	completed: "Fleet finished this",
+	delivering: "Fleet is working on this",
+	executing: "Fleet is working on this",
+	"needs-human": "Waiting on a person",
+	prepared: "Queued for Fleet",
+	released: "Fleet handed this back",
+	repairing: "Fleet is working on this",
+	reviewing: "Fleet is working on this",
+	validating: "Fleet is working on this",
+};
+
+export function fleetHolder(fleet: FleetWork): string {
+	if (fleet.attentionOwner === "maintainer") {
+		return "Needs you";
+	}
+	return fleet.attentionOwner === "orchestrator" ? "Waiting on the orchestrator" : fleetHolders[fleet.stage];
+}
+
 export function holderOf(metadata: Metadata, fleet: FleetWork | undefined): string | undefined {
 	if (fleet) {
-		return fleet.attentionOwner && fleet.attentionOwner !== "automation" ? fleet.attentionOwner : "Fleet";
+		return fleetHolder(fleet);
 	}
-	return ["maintainer", "orchestrator"].includes(metadata.owner ?? "") ? metadata.owner : undefined;
+	if (metadata.owner === "maintainer") {
+		return "Assigned to you";
+	}
+	return metadata.owner === "orchestrator" ? "Assigned to the orchestrator" : undefined;
+}
+
+const stageNames: Record<FleetWork["stage"], string> = {
+	adopting: "Adopting",
+	completed: "Done",
+	delivering: "Delivering",
+	executing: "Executing",
+	"needs-human": "Waiting",
+	prepared: "Queued",
+	released: "Handed back",
+	repairing: "Repairing",
+	reviewing: "Reviewing",
+	validating: "Validating",
+};
+
+export function stageTime(stage: FleetWork["stage"]): { readonly ended: boolean; readonly label: string } {
+	return { ended: stage === "completed" || stage === "released", label: stageNames[stage] };
 }
 
 export function cardStatus(metadata: Metadata, fleet: FleetWork | undefined, waiting: string | undefined): string | undefined {

package/src/browser/views/schema.ts

@@ -40,6 +40,7 @@ export const InboxProjection = Schema.Struct({
 	complete: Schema.Boolean,
 	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
 	items: Schema.Array(InboxItem),
+	later: Schema.Array(InboxItem),
 	parked: Schema.Array(InboxItem),
 	resolved: Schema.Array(InboxItem),
 	sourceIssues: Schema.Boolean,

package/src/client/document/View.ts

@@ -3,7 +3,7 @@ import { type Components, MarkdownHooks } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import type { PluggableList } from "unified";
 import type { Document } from "#browser/document/schema.ts";
-import { Age } from "#client/react/Age";
+import { Age } from "#client/react/Age.tsx";
 import { documentHeadings } from "#render/documentHeadings.ts";
 import { documentLinks } from "#render/documentLinks.ts";
 import { documentPlugins } from "#render/documentPlugins.ts";

package/src/client/formStatus.ts

@@ -1,5 +1,5 @@
 import { Option } from "effect";
-import type { SaveState } from "@shivaedev/effect-react/save-state.ts";
+import type { SaveState } from "@shivaedev/effect-react/client/saveState.ts";
 import { type SaveFailure, saveFailure } from "./saveFailure.ts";
 
 export type DraftInteraction = "draft" | "cleared" | "submitted";
@@ -30,6 +30,6 @@ export function formStatus<A>(
 	};
 }
 
-export function responseSaved(id: string, dirty: boolean) {
-	return `Saved: responses/${id}.md. This records feedback, not acceptance.${dirty ? " Your current draft remains unsaved." : ""}`;
+export function responseSaved(id: string, dirty: boolean, choice = "") {
+	return `Saved: your answer${choice ? ` “${choice}”` : ""} is recorded. The agent reads it from responses/${id}.md the next time it checks. This records your answer, not acceptance of the work.${dirty ? " Your current draft remains unsaved." : ""}`;
 }

package/src/client/react/AnswerContext.tsx

@@ -1,25 +1,30 @@
+import { ExternalLink } from "lucide-react";
 import { cardContext } from "#browser/responses/cardContext.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { cn } from "#client/react/lib/cn.ts";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 
 export function AnswerContext({ preview }: { readonly preview: QuestionPreview }) {
 	const context = cardContext(preview.context);
 	return (
 		<>
 			{Boolean(context.recommendation) && (
-				<div className="answer-recommendation">
-					<ResponseMarkdown file={preview.source} source={context.recommendation} />
+				<div className="rounded-lg bg-muted/60 px-4 py-3 text-sm">
+					<p className="mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wide">Recommendation</p>
+					<AnswerMarkdown className="answer-recommendation" file={preview.source} source={context.recommendation} />
 				</div>
 			)}
 			{context.links.length > 0 && (
 				<div className="answer-links flex flex-wrap gap-2">
 					{context.links.map((link) => (
 						<a
-							className={`answer-link ${link.primary ? "bg-primary text-primary-foreground" : "border border-border"} inline-flex items-center rounded-md px-4 py-2 font-medium`}
+							className={cn(buttonVariants({ size: "sm", variant: link.primary ? "default" : "outline" }), "answer-link")}
 							href={link.url}
 							key={link.url}
 						>
 							{link.label}
+							<ExternalLink aria-hidden="true" />
 						</a>
 					))}
 				</div>

package/src/client/react/AnswerForm.tsx

@@ -1,5 +1,8 @@
+import { CheckCircle2 } from "lucide-react";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { cn } from "#client/react/lib/cn.ts";
 import { AnswerMore } from "./AnswerMore.tsx";
 import { AnswerPrompts } from "./AnswerPrompts.tsx";
 import { FormField } from "./FormField.tsx";
@@ -7,6 +10,8 @@ import { shellIds } from "./shellIds.ts";
 import { useFormFocus } from "./useFormFocus.ts";
 import { useResponseForm } from "./useResponseForm.ts";
 
+const READ_ONLY = "This Board is read-only. Start it with --responses to record answers.";
+
 interface AnswerProps {
 	readonly document: Document;
 	readonly preview: QuestionPreview;
@@ -38,6 +43,7 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 	return (
 		<form
 			{...focus}
+			className="space-y-4"
 			data-item={preview.item}
 			data-question={preview.id}
 			data-request={preview.request}
@@ -76,13 +82,26 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 				showErrors={state.attempted}
 			/>
 			{prompts.length === 0 && body}
-			<button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
-				Record
-			</button>
-			<AnswerMore body={prompts.length > 0 ? body : undefined} id={id} request={request} state={state} />
-			<p data-outcome={state.outcome} id={id(shellIds.responseStatus)} role="status">
-				{data.writable ? writableStatus : `${state.status} Read-only. Restart with --responses to enable answers.`.trim()}
+			<div className="flex flex-wrap items-center gap-3">
+				<Button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
+					Record answer
+				</Button>
+			</div>
+			<p
+				className={cn(
+					"flex items-start gap-2 text-sm empty:hidden",
+					!data.writable && "text-muted-foreground",
+					state.outcome === "saved" && "rounded-md border border-done/40 bg-done/10 px-3 py-2",
+					(state.outcome === "rejected" || state.outcome === "uncertain") && "rounded-md border border-destructive/40 px-3 py-2 text-destructive",
+				)}
+				data-outcome={state.outcome}
+				id={id(shellIds.responseStatus)}
+				role="status"
+			>
+				{state.outcome === "saved" && <CheckCircle2 aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-done" />}
+				{data.writable ? writableStatus : `${state.status} ${READ_ONLY}`.trim()}
 			</p>
+			<AnswerMore body={prompts.length > 0 ? body : undefined} id={id} request={request} state={state} />
 		</form>
 	);
 }

package/src/client/react/AnswerMarkdown.tsx

@@ -0,0 +1,15 @@
+import { cn } from "#client/react/lib/cn.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+
+export function AnswerMarkdown({ className, file, source }: { readonly className?: string; readonly file: string; readonly source: string }) {
+	return (
+		<div
+			className={cn(
+				"[&_a]:underline [&_a]:underline-offset-4 [&_code]:font-mono [&_code]:text-[0.9em] [&_li]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:pl-5",
+				className,
+			)}
+		>
+			<ResponseMarkdown file={file} source={source} />
+		</div>
+	);
+}

package/src/client/react/AnswerMore.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { DocumentRequest } from "#browser/document/schema.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
 import { FormField } from "./FormField.tsx";
 import { shellIds } from "./shellIds.ts";
 import type { useResponseForm } from "./useResponseForm.ts";
@@ -16,52 +17,63 @@ export function AnswerMore({
 	readonly state: ReturnType<typeof useResponseForm>;
 }) {
 	return (
-		<details data-key="response-details">
-			<summary>More</summary>
-			<FormField
-				autoComplete="nickname"
-				form={state.form}
-				label="Local author label"
-				maxLength={200}
-				name="author"
-				required
-				showErrors={state.attempted}
-			/>
-			<FormField form={state.form} label="Response kind" name="type">
-				<option value="answer">Answer (including no)</option>
-				<option value="clarify">Ask back / clarify</option>
-				<option value="not_now">Not now</option>
-			</FormField>
-			{body}
-			<FormField form={state.form} label="Supersedes an earlier response (optional)" name="supersedes">
-				<option value="">Adds feedback; does not supersede</option>
-				{request.responses?.map((record) => (
-					<option key={record.id} value={record.id}>
-						{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
-					</option>
-				))}
-			</FormField>
-			<pre hidden={!state.recovery} id={id(shellIds.responseDraftRecovery)}>
-				{state.recovery}
-			</pre>
-			<p>
-				Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft. Saved responses are Markdown files in
-				responses/.
-			</p>
-			<button
-				disabled={typeof window === "undefined" || state.created.saving}
-				id={id(shellIds.responsePreview)}
-				onClick={state.showPreview}
-				type="button"
-			>
-				Preview Markdown
-			</button>
-			<pre hidden={!state.preview} id={id(shellIds.responsePreviewContent)}>
-				{state.preview}
-			</pre>
-			<button disabled={typeof window === "undefined" || state.created.saving} id={id(shellIds.responseClear)} onClick={state.clear} type="button">
-				Clear draft
-			</button>
+		<details className="group rounded-lg border px-4 py-2 text-sm [&[open]]:pb-4" data-key="response-details">
+			<summary className="cursor-pointer select-none py-1 text-muted-foreground hover:text-foreground">More options</summary>
+			<div className="mt-3 grid gap-4">
+				<FormField
+					autoComplete="nickname"
+					form={state.form}
+					label="Local author label"
+					maxLength={200}
+					name="author"
+					required
+					showErrors={state.attempted}
+				/>
+				<FormField form={state.form} label="Response kind" name="type">
+					<option value="answer">Answer (including no)</option>
+					<option value="clarify">Ask back / clarify</option>
+					<option value="not_now">Not now</option>
+				</FormField>
+				{body}
+				<FormField form={state.form} label="Supersedes an earlier response (optional)" name="supersedes">
+					<option value="">Adds feedback; does not supersede</option>
+					{request.responses?.map((record) => (
+						<option key={record.id} value={record.id}>
+							{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
+						</option>
+					))}
+				</FormField>
+				<pre className="whitespace-pre-wrap rounded-md bg-muted p-3 text-xs" hidden={!state.recovery} id={id(shellIds.responseDraftRecovery)}>
+					{state.recovery}
+				</pre>
+				<p className="text-muted-foreground text-xs">
+					Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft. Saved responses are Markdown files in
+					responses/.
+				</p>
+				<div className="flex flex-wrap gap-2">
+					<Button
+						disabled={typeof window === "undefined" || state.created.saving}
+						id={id(shellIds.responsePreview)}
+						onClick={state.showPreview}
+						size="sm"
+						variant="outline"
+					>
+						Preview Markdown
+					</Button>
+					<Button
+						disabled={typeof window === "undefined" || state.created.saving}
+						id={id(shellIds.responseClear)}
+						onClick={state.clear}
+						size="sm"
+						variant="ghost"
+					>
+						Clear draft
+					</Button>
+				</div>
+				<pre className="whitespace-pre-wrap rounded-md bg-muted p-3 text-xs" hidden={!state.preview} id={id(shellIds.responsePreviewContent)}>
+					{state.preview}
+				</pre>
+			</div>
 		</details>
 	);
 }

package/src/client/react/AnswerPanel.tsx

@@ -1,9 +1,10 @@
+import { MessageCircleQuestion } from "lucide-react";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import { reasonMarkdown } from "#browser/responses/reasonMarkdown.ts";
 import { AnswerContext } from "./AnswerContext.tsx";
 import { AnswerForm } from "./AnswerForm.tsx";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 import { ResponseHistory } from "./ResponseHistory.tsx";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 
 export function AnswerPanel({ document: data }: { readonly document: Document }) {
 	const requests = data.requests.filter(
@@ -30,23 +31,28 @@ function AnswerCard({ document: data, request }: { readonly document: Document;
 	return (
 		<section
 			aria-labelledby={`answer-title-${request.id}`}
-			className="response-panel rounded-lg border border-border bg-card p-4"
+			className="response-panel max-w-[72ch] space-y-5 rounded-xl border bg-card p-5 text-card-foreground shadow-sm"
 			id={`answer-card-${request.id}`}
 			tabIndex={-1}
 		>
-			<h2 id={`answer-title-${request.id}`}>{cardTitle(request, closed)}</h2>
+			<h2 className="flex items-center gap-2 font-medium text-muted-foreground text-sm" id={`answer-title-${request.id}`}>
+				{request.open ? <MessageCircleQuestion aria-hidden="true" className="size-4 text-needs-you" /> : null}
+				{cardTitle(request, closed)}
+			</h2>
 			{!(request.open || unavailable) && (
-				<p role="status">
+				<p className="text-muted-foreground text-sm" role="status">
 					{closed ? "This question is closed. Recorded answers remain below." : "Answer unavailable. Check the source diagnostics."}
 				</p>
 			)}
-			{Boolean(unavailable) && <p role="status">{unavailable}</p>}
+			{Boolean(unavailable) && (
+				<p className="rounded-md border border-destructive/40 px-3 py-2 text-sm" role="status">
+					{unavailable}
+				</p>
+			)}
 			{request.open && preview !== undefined && (
 				<>
+					<AnswerMarkdown className="answer-reason font-medium text-base" file={source.file} source={reasonMarkdown(preview.reason)} />
 					<AnswerContext preview={preview} />
-					<div className="answer-reason">
-						<ResponseMarkdown file={source.file} source={reasonMarkdown(preview.reason)} />
-					</div>
 				</>
 			)}
 			{request.open && preview && !unavailable && <AnswerForm document={source} preview={preview} request={request} />}

package/src/client/react/AnswerPrompts.tsx

@@ -1,10 +1,11 @@
 import { useAtomValue } from "@effect/atom-react";
 import { useId, useLayoutEffect, useRef } from "react";
 import type { Document } from "#browser/document/schema.ts";
+import { promptHeading } from "#browser/responses/cardContext.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
 import type { PromptAnswer } from "#browser/responses/schema.ts";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 import { PromptOption } from "./PromptOption.tsx";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 import type { useResponseForm } from "./useResponseForm.ts";
 
 type Model = ReturnType<typeof useResponseForm>["form"];
@@ -36,12 +37,9 @@ function PromptField({
 	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
 	const choices = document.metadata.options;
 
-	let guidance = "Answer in your own words.";
-	if (choices) {
-		guidance = "Choose an option or write another answer.";
-	} else if (prompt.mode !== "text") {
-		guidance = `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words.`;
-	}
+	const guidance = promptGuidance(prompt.mode, choices !== undefined);
+	const heading = promptHeading(prompt.source);
+	const title = heading.title ?? `Question ${index + 1}`;
 	function change(next: PromptAnswer) {
 		onEdit(index, next);
 	}
@@ -57,14 +55,14 @@ function PromptField({
 	}
 	let message = error;
 	if (error && answer.selected.length === 0 && !answer.text.trim()) {
-		message = `Unanswered: Question ${index + 1} · ${prompt.id}. Choose an option or answer in your own words.`;
+		message = `Unanswered: “${title}”. Choose an option or answer in your own words.`;
 	}
 	return (
-		<fieldset data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
-			<legend>{choices ? "Your answer" : `Question ${index + 1} · ${prompt.id}`}</legend>
-			{choices === undefined && <ResponseMarkdown file={document.file} source={prompt.source} />}
-			<p>{guidance} Nothing is selected for you.</p>
-			<div className={choices ? "question-choices" : undefined}>
+		<fieldset className="m-0 min-w-0 space-y-3 border-0 p-0" data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
+			<legend className="mb-1 p-0 font-semibold text-base">{choices === undefined ? title : "Your answer"}</legend>
+			{choices === undefined && heading.rest ? <AnswerMarkdown className="text-sm" file={document.file} source={heading.rest} /> : null}
+			<p className="text-muted-foreground text-sm">{guidance}</p>
+			<div className={`grid gap-2 ${choices ? "question-choices" : ""}`}>
 				{prompt.options.map((option, choice) => (
 					<PromptOption
 						checked={answer.selected.includes(option.id)}
@@ -78,26 +76,43 @@ function PromptField({
 				))}
 			</div>
 			{prompt.mode !== "text" && (
-				<button data-clear-choices onClick={() => change({ ...answer, selected: [] })} type="button">
+				<button
+					className="text-muted-foreground text-xs underline-offset-4 hover:underline disabled:opacity-50"
+					data-clear-choices
+					disabled={answer.selected.length === 0}
+					onClick={() => change({ ...answer, selected: [] })}
+					type="button"
+				>
 					Clear selections
 				</button>
 			)}
-			<label>
-				{choices ? "Another answer / additional text" : "Additional text / another answer"}
+			<label className="grid gap-2 text-sm">
+				<span>{prompt.mode === "text" ? "Your answer" : "Add a note or answer in your own words (optional)"}</span>
 				<textarea
 					aria-describedby={`${errorId}-error`}
 					aria-invalid={Boolean(error)}
+					className="w-full rounded-md border bg-background px-3 py-2 text-sm aria-invalid:border-destructive"
 					data-answer-text
 					maxLength={8192}
 					onInput={(event) => change({ ...answer, text: event.currentTarget.value })}
 					ref={ref}
-					rows={choices ? 4 : 3}
+					rows={choices || prompt.mode === "text" ? 4 : 2}
 					value={answer.text}
 				/>
-				<span className="response-field-error" hidden={!error} id={`${errorId}-error`}>
+				<span className="response-field-error text-destructive text-xs" hidden={!error} id={`${errorId}-error`}>
 					{message}
 				</span>
 			</label>
 		</fieldset>
 	);
 }
+
+function promptGuidance(mode: Prompt["mode"], authored: boolean) {
+	if (authored) {
+		return "Choose an option or write another answer. Nothing is selected for you.";
+	}
+	if (mode === "text") {
+		return "Answer in your own words.";
+	}
+	return `${mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words. Nothing is selected for you.`;
+}

package/src/client/react/BoardShell.tsx

@@ -2,9 +2,8 @@ import { useRouterState } from "@tanstack/react-router";
 import { Option } from "effect";
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { useCallback, useContext, useEffect, useState } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { BrowserClient } from "#client/client.ts";
-import { navigationQuery } from "#client/page/routeQuery.ts";
 import { AgeTicker } from "./Age.tsx";
 import { FleetMain } from "./FleetMain.tsx";
 import { FormContext } from "./FormContext.ts";
@@ -15,6 +14,7 @@ import { emptyMainLocation, type MainLocation } from "./mainLocation.ts";
 import { PhoneNavigation } from "./PhoneNavigation.tsx";
 import { ReadingLibrary } from "./ReadingLibrary.tsx";
 import { ReadingReadyContext, readingReady } from "./ReadingReadyContext.ts";
+import { navigationQuery } from "./routeQuery.ts";
 import { SearchDialog } from "./SearchDialog.tsx";
 import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";

package/src/client/react/DocumentMain.tsx

@@ -1,12 +1,12 @@
 import { Cause, Option } from "effect";
 import { useEffect, useState } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { documentQuery } from "#client/page/routeQuery.ts";
 import { DocumentPage } from "./DocumentPage.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionMain } from "./ProjectionMain.tsx";
 import { RemainingMain } from "./RemainingMain.tsx";
+import { documentQuery } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
 import { useDocumentPage } from "./useDocumentPage.ts";

package/src/client/react/FleetMain.tsx

@@ -1,6 +1,6 @@
 import { Option } from "effect";
 import type { ComponentProps } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import { BoardMain } from "./BoardMain.tsx";
 import { FleetItemsContext } from "./FleetItemsContext.ts";
 export function FleetMain(props: ComponentProps<typeof BoardMain>) {

package/src/client/react/FormField.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useId, useLayoutEffect, useRef } from "react";
-import { useField } from "@shivaedev/effect-form/react.ts";
+import { useField } from "@shivaedev/effect-form/client/react.ts";
 import type { Fields, Form, Name } from "@shivaedev/effect-form/shape.ts";
 
 type Control = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;

package/src/client/react/GoalPage.tsx

@@ -1,10 +1,10 @@
 import { Option } from "effect";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { GoalCriteria } from "./GoalCriteria.tsx";
 import { GoalWorkTable } from "./GoalWorkTable.tsx";
 import { targetsGoal } from "./goalWork.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function GoalPage({ api, document }: { readonly api: ShellApi; readonly document: Document }) {

package/src/client/react/GoalProgressHeader.tsx

@@ -1,9 +1,9 @@
 import { Option } from "effect";
 import { useId } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { GoalProgressSummary } from "./GoalProgressSummary.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function GoalProgressHeader({ api, document }: { readonly api: ShellApi; readonly document: Document }) {

package/src/client/react/Header.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { Badge } from "#client/react/components/ui/Badge.tsx";
 import { Button } from "#client/react/components/ui/Button.tsx";
 import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { destinationName } from "#client/react/destinationName.ts";
 import { cn } from "#client/react/lib/cn.ts";
 import { KeyboardHints } from "./KeyboardHints.tsx";
 import type { MainLocation } from "./mainLocation.ts";
@@ -12,7 +13,7 @@ import type { AppearanceControls } from "./useAppearance.ts";
 import type { SidebarControls } from "./useSidebar.ts";
 export function InboxCount({ count, id }: { readonly count: number | null; readonly id: string }) {
 	return (
-		<Badge aria-label={`${count ?? "?"} waiting`} id={id} role="status">
+		<Badge aria-label={count === null ? "Needs you unavailable" : `${count} need you`} id={id} role="status">
 			{count ?? "?"}
 		</Badge>
 	);
@@ -57,7 +58,7 @@ export function Header({
 			<Breadcrumbs file={main.title ?? main.file} />
 			<a
 				aria-current={main.view === "today" ? "page" : undefined}
-				aria-label="Today"
+				aria-label={destinationName("Today", count, "need you")}
 				className={cn(buttonVariants({ size: "sm", variant: "ghost" }), "hidden md:inline-flex")}
 				href="/"
 				id={shellIds.inboxTopbar}

package/src/client/react/LibraryContents.tsx

@@ -1,6 +1,6 @@
 import { Option } from "effect";
 import { useState } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Library, LibraryFile } from "#browser/navigation/library.ts";
 import { Age } from "./Age.tsx";
 import type { ShellApi } from "./ShellApi.ts";

package/src/client/react/LibraryMain.tsx

@@ -1,7 +1,7 @@
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { LibraryPage } from "./LibraryPage.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 export function LibraryMain({
 	api,