Polish thread-row, tool-row, composer, and delete-project UI

apps/web/src/components/chat/composer/composer-context-usage.tsx

@@ -23,9 +23,8 @@ export function ComposerContextUsage({
 	const percent = Math.round(ratio * 100);
 	const overloaded = hasLimit && percent > 90;
 
-	// Match ComposerPrimaryAction: sm:h-8 sm:w-8 (32px)
-	const size = 32;
-	const stroke = 3;
+	const size = 22;
+	const stroke = 2;
 	const radius = (size - stroke) / 2;
 	const circumference = 2 * Math.PI * radius;
 	const dashOffset = circumference * (1 - ratio);
@@ -44,7 +43,7 @@ export function ComposerContextUsage({
 					<button
 						aria-label={label}
 						className={cn(
-							"relative inline-flex size-8 shrink-0 cursor-default items-center justify-center rounded-full",
+							"relative inline-flex size-6 shrink-0 cursor-default items-center justify-center rounded-full",
 							"text-muted-foreground outline-none transition-colors",
 							"hover:bg-accent hover:text-foreground",
 							"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
@@ -85,7 +84,7 @@ export function ComposerContextUsage({
 				</svg>
 				<span
 					className={cn(
-						"relative font-medium text-[9px] tabular-nums leading-none",
+						"relative font-medium text-[8px] tabular-nums leading-none",
 						overloaded ? "text-destructive" : "text-muted-foreground"
 					)}
 				>

apps/web/src/components/chat/composer/footer-controls.tsx

@@ -3,7 +3,6 @@ import type { RegisteredAgent } from "@cyrus/schemas/rtc/agents";
 import { useMediaQuery } from "@mantine/hooks";
 import { AgentModelPicker } from "@/components/chat/composer/agent-model-picker";
 import { CompactComposerControls } from "@/components/chat/composer/compact-composer-controls";
-import { ComposerContextUsage } from "@/components/chat/composer/composer-context-usage";
 import { Show } from "@/components/helpers/show";
 import { Button } from "@/components/ui/button";
 import {
@@ -111,7 +110,6 @@ export function ComposerFooterControls({
 }) {
 	const isCompact = useMediaQuery("(max-width: 768px)", false);
 	const {
-		contextUsage,
 		displayEffort,
 		displayMode,
 		displayPersona,
@@ -182,8 +180,6 @@ export function ComposerFooterControls({
 					threadId={threadId}
 				/>
 			</Show>
-
-			<ComposerContextUsage usage={contextUsage} />
 		</div>
 	);
 }

apps/web/src/components/chat/composer/index.tsx

@@ -8,6 +8,7 @@ import { useProjects } from "@cyrus/hooks/queries/use-projects";
 import { useComposerDraftHydrated } from "@cyrus/hooks/stores/composer-draft";
 import { useEffect, useState } from "react";
 import { FileMentionAutocomplete } from "@/components/chat/composer/composer-attachments";
+import { ComposerContextUsage } from "@/components/chat/composer/composer-context-usage";
 import { ComposerPendingInteractive } from "@/components/chat/composer/composer-interactive";
 import { ComposerLowerChrome } from "@/components/chat/composer/composer-lower-chrome";
 import { ComposerPromptEditor } from "@/components/chat/composer/composer-prompt-editor";
@@ -200,9 +201,10 @@ export function Composer({
 							threadId={threadId}
 						/>
 						<div
-							className="flex shrink-0 flex-nowrap items-center justify-end gap-2"
+							className="flex shrink-0 flex-nowrap items-center justify-end gap-4"
 							data-chat-composer-actions="right"
 						>
+							<ComposerContextUsage usage={catalog.contextUsage} />
 							<ComposerPrimaryAction
 								busy={busy}
 								canSend={

apps/web/src/components/chat/work-log/tool-row.test.tsx

@@ -50,4 +50,17 @@ describe("ToolRow", () => {
 
 		expect(screen.getByText("a.ts")).toBeInTheDocument();
 	});
+
+	test("chevron styling is scoped to a direct child, not every descendant svg", () => {
+		const { container } = render(<ToolRow tool={tool} />);
+
+		const trigger = container.querySelector('[data-slot="accordion-trigger"]');
+		expect(trigger).not.toBeNull();
+		expect(trigger?.className).toContain("[&>svg]");
+		expect(trigger?.className).not.toContain("[&_svg:last-child]");
+
+		const statusIcon = container.querySelector("svg.lucide-check");
+		expect(statusIcon).not.toBeNull();
+		expect(statusIcon).toHaveClass("text-green-600");
+	});
 });

apps/web/src/components/chat/work-log/tool-row.tsx

@@ -1,16 +1,15 @@
 import type { ToolCallView } from "@cyrus/schemas/view";
 import { extractToolFields } from "@cyrus/utils/tool-fields";
 import { cn } from "cnfast";
-import {
-	CheckIcon,
-	ChevronDownIcon,
-	MinusIcon,
-	TerminalIcon,
-	XIcon,
-} from "lucide-react";
-import { type KeyboardEvent, useState } from "react";
+import { CheckIcon, MinusIcon, TerminalIcon, XIcon } from "lucide-react";
 import { DiffRow } from "@/components/chat/work-log/diff-row";
 import { Show } from "@/components/helpers/show";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
 import {
 	KIND_PRESENTATIONS,
 	type ToolPresentation,
@@ -48,91 +47,102 @@ function ToolStatusIcon({
 	return null;
 }
 
-export function ToolRow({ tool }: { tool: ToolCallView }) {
-	const [open, setOpen] = useState(false);
-	const presentation = deriveToolPresentation(tool);
+function ToolRowHeading({
+	tool,
+	presentation,
+}: {
+	tool: ToolCallView;
+	presentation: ToolPresentation;
+}) {
 	const Icon = presentation.icon;
-	const hasDiffs = Boolean(tool.diffs?.length);
-	const canExpand = hasDiffs || Boolean(presentation.detail?.trim());
 	const showSuccess = tool.status === "completed";
 	const showFailed = tool.status === "failed";
 	const showPending =
 		tool.status === "pending" || tool.status === "in_progress";
 
 	return (
-		<div className="flex flex-col rounded-md px-0.5 py-0.5 text-xs transition-colors">
-			<div
-				className={cn(
-					"flex select-none items-center gap-1.5 rounded-sm",
-					canExpand &&
-						"cursor-pointer hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-inset"
-				)}
-				{...(canExpand
-					? {
-							role: "button" as const,
-							tabIndex: 0,
-							"aria-expanded": open,
-							onClick: () => setOpen((value) => !value),
-							onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {
-								if (event.key === "Enter" || event.key === " ") {
-									event.preventDefault();
-									setOpen((value) => !value);
-								}
-							},
-						}
-					: {})}
-			>
-				<span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground/65">
-					<Icon className="size-3.5 stroke-[1.8] opacity-80" />
-				</span>
-				<div className="flex min-w-0 flex-1 items-center gap-1.5">
-					<p className="flex min-w-0 items-baseline gap-1.5 text-[12px] leading-5">
-						<span className="min-w-0 shrink truncate font-medium text-foreground/82">
-							{presentation.heading}
+		<>
+			<span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground/65">
+				<Icon className="size-3.5 stroke-[1.8] opacity-80" />
+			</span>
+			<span className="flex min-w-0 flex-1 items-center gap-1.5">
+				<span className="flex min-w-0 items-baseline gap-1.5 text-[12px] leading-5">
+					<span className="min-w-0 shrink truncate font-medium text-foreground/82">
+						{presentation.heading}
+					</span>
+					<Show when={Boolean(presentation.preview)}>
+						<span className="min-w-0 flex-1 truncate text-muted-foreground/55">
+							{presentation.preview}
 						</span>
-						<Show when={Boolean(presentation.preview)}>
-							<span className="min-w-0 flex-1 truncate text-muted-foreground/55">
-								{presentation.preview}
-							</span>
-						</Show>
-					</p>
-				</div>
-				<div className="flex shrink-0 items-center gap-px text-muted-foreground/55">
-					<Show when={canExpand}>
-						<ChevronDownIcon
-							className={cn(
-								"size-3 shrink-0 opacity-70 transition-transform duration-200",
-								open && "rotate-180"
-							)}
-						/>
 					</Show>
-					<span className="flex size-4 items-center justify-center">
-						<ToolStatusIcon
-							showFailed={showFailed}
-							showPending={showPending}
-							showSuccess={showSuccess}
-						/>
-					</span>
-				</div>
+				</span>
+			</span>
+			<span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground/55">
+				<ToolStatusIcon
+					showFailed={showFailed}
+					showPending={showPending}
+					showSuccess={showSuccess}
+				/>
+			</span>
+		</>
+	);
+}
+
+function ToolRowDetail({
+	tool,
+	presentation,
+}: {
+	tool: ToolCallView;
+	presentation: ToolPresentation;
+}) {
+	const hasDiffs = Boolean(tool.diffs?.length);
+
+	return (
+		<Show
+			fallback={
+				<Show when={Boolean(presentation.detail?.trim())}>
+					<pre className="wrap-break-word max-h-64 overflow-auto whitespace-pre-wrap font-mono text-[11px] text-muted-foreground leading-relaxed">
+						{presentation.detail}
+					</pre>
+				</Show>
+			}
+			when={hasDiffs}
+		>
+			{tool.diffs?.map((diff) => (
+				<DiffRow diff={diff} key={diff.id} />
+			))}
+		</Show>
+	);
+}
+
+export function ToolRow({ tool }: { tool: ToolCallView }) {
+	const presentation = deriveToolPresentation(tool);
+	const hasDiffs = Boolean(tool.diffs?.length);
+	const canExpand = hasDiffs || Boolean(presentation.detail?.trim());
+
+	if (!canExpand) {
+		return (
+			<div className="flex select-none items-center gap-1.5 rounded-md px-0.5 py-0.5 text-xs">
+				<ToolRowHeading presentation={presentation} tool={tool} />
 			</div>
-			<Show when={open && canExpand}>
-				<div className="ms-7 mt-1 flex flex-col gap-1 border-border/45 border-s ps-3 pt-0.5">
-					<Show
-						fallback={
-							<Show when={Boolean(presentation.detail?.trim())}>
-								<pre className="wrap-break-word max-h-64 overflow-auto whitespace-pre-wrap font-mono text-[11px] text-muted-foreground leading-relaxed">
-									{presentation.detail}
-								</pre>
-							</Show>
-						}
-						when={hasDiffs}
-					>
-						{tool.diffs?.map((diff) => (
-							<DiffRow diff={diff} key={diff.id} />
-						))}
-					</Show>
-				</div>
-			</Show>
-		</div>
+		);
+	}
+
+	return (
+		<Accordion className="text-xs" collapsible type="single">
+			<AccordionItem className="border-b-0" value={tool.toolCallId}>
+				<AccordionTrigger
+					className={cn(
+						"select-none items-center gap-1.5 rounded-md px-0.5 py-0.5 hover:bg-accent/20 hover:no-underline",
+						"[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:translate-y-0 [&>svg]:text-muted-foreground/55 [&>svg]:opacity-70"
+					)}
+				>
+					<ToolRowHeading presentation={presentation} tool={tool} />
+				</AccordionTrigger>
+				<AccordionContent className="ms-7 border-border/45 border-s ps-3 pt-0.5 pb-0">
+					<ToolRowDetail presentation={presentation} tool={tool} />
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
 	);
 }

apps/web/src/components/portals/delete-project-dialog.tsx

@@ -38,7 +38,10 @@ function DeleteProjectDialogContent({
 					<AlertDialogCancel onClick={() => call.end(false)}>
 						Cancel
 					</AlertDialogCancel>
-					<AlertDialogAction onClick={() => call.end(true)}>
+					<AlertDialogAction
+						onClick={() => call.end(true)}
+						variant="destructive"
+					>
 						Delete
 					</AlertDialogAction>
 				</AlertDialogFooter>