@parallelworks/ui 0.25.0 → 0.27.0

package/dist/ai/ai.css

@@ -105,9 +105,10 @@
   border-radius: 0.5rem;
 }
 
-/* Streamdown tables: the body's own type,
- * hairlines at a tenth of the ink, a header on a five-percent tint, and the
- * copy/download controls only while the pointer is over the table. */
+/* Streamdown tables: the body's own type, open rows on hairlines at a tenth
+ * of the ink under a firmer rule for the header (no frame, no fill, so a
+ * table reads as part of the answer rather than a widget dropped into it),
+ * and the copy/download controls only while the pointer is over the table. */
 .markdown [data-streamdown="table-wrapper"] {
   --table-line: color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
   position: relative;
@@ -136,8 +137,8 @@
 }
 .markdown [data-streamdown="table-wrapper"] > div:last-child {
   padding: 0;
-  border: 1px solid var(--table-line);
-  border-radius: 0.5rem;
+  border: 0;
+  border-radius: 0;
   background: transparent;
 }
 .markdown [data-streamdown="table-wrapper"] table {
@@ -148,10 +149,10 @@
 .markdown [data-streamdown="table"] th {
   padding: 0.4375rem 0.75rem;
   font-size: 1rem;
-  font-weight: 500;
+  font-weight: 600;
   color: inherit;
-  background: color-mix(in oklab, var(--theme-panel, #000) 5%, transparent);
-  border-bottom: 1px solid var(--table-line);
+  background: transparent;
+  border-bottom: 1px solid color-mix(in oklab, var(--theme-panel, #000) 28%, transparent);
 }
 .markdown [data-streamdown="table"] td {
   padding: 0.4375rem 0.75rem;
@@ -163,6 +164,16 @@
   /* A prose column keeps enough room to read; a wide table scrolls instead. */
   min-width: 9rem;
 }
+.markdown [data-streamdown="table"] thead {
+  background: transparent;
+}
+/* Unframed, the outer columns line up with the prose around the table. */
+.markdown [data-streamdown="table"] :is(th, td):first-child {
+  padding-left: 0;
+}
+.markdown [data-streamdown="table"] :is(th, td):last-child {
+  padding-right: 0;
+}
 .markdown [data-streamdown="table"] tbody tr {
   border-bottom: 1px solid var(--table-line);
 }
@@ -175,24 +186,54 @@
   }
 }
 
-/* Streamdown code blocks — tighten spacing, remove inner double-border */
+/* Streamdown code blocks: one surface, not a frame around an inset panel.
+ * A wash of the ink with a hairline edge holds the language on its top edge,
+ * the copy and download controls quiet beside it, and the code on the same
+ * ground, so the block reads as part of the answer. */
 .markdown [data-streamdown="code-block"] {
-  padding: 0.375rem 0.5rem 0;
-  margin: 0.5em 0;
   gap: 0;
+  margin: 0.875rem 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--theme-panel, #000) 4%, var(--theme-panel-bg, #fff));
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 8%, transparent);
 }
 .markdown [data-streamdown="code-block-header"] {
-  padding: 0.25rem 0.25rem;
+  height: 2.25rem;
+  padding: 0 0.75rem 0 0.75rem;
+  font-size: 0.75rem;
+  color: var(--theme-muted-text-color, #6a7282);
+}
+.markdown [data-streamdown="code-block-actions"] {
+  gap: 0.125rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+.markdown [data-streamdown="code-block-actions"] button {
+  padding: 0.3125rem;
+  border-radius: 0.375rem;
+  color: var(--theme-muted-text-color, #6a7282);
+  transition:
+    background-color 150ms ease-out,
+    color 150ms ease-out;
+}
+.markdown [data-streamdown="code-block-actions"] button:hover {
+  color: var(--theme-panel, #000);
+  background: color-mix(in oklab, var(--theme-panel, #000) 7%, transparent);
 }
 .markdown [data-streamdown="code-block-body"] {
-  border: none;
-  border-radius: 0 0 0.5rem 0.5rem;
+  border: 0;
+  border-radius: 0;
   padding: 0;
+  background: transparent;
 }
-/* Remove prose pre margin and code block body inner pre margin */
 .markdown [data-streamdown="code-block-body"] pre {
   margin: 0;
-  padding: 0.75rem 1rem;
+  padding: 0.125rem 1rem 0.875rem;
   overflow-x: auto;
   /* Code reads looser than prose; Streamdown's text-sm line is too tight. */
   line-height: 1.6;
@@ -206,20 +247,21 @@
    explicitly to ensure correct colors in all modes.
    See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
 
-/* Light mode: use the primary Shiki theme (--sdm-bg/--sdm-c) */
+/* Light mode: the primary Shiki theme's colours (--sdm-c) on the block's own
+   surface, which stands in for the theme's background. */
 .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
-  background-color: var(--sdm-bg, inherit) !important;
+  background-color: transparent !important;
   color: var(--sdm-fg, inherit);
 }
 .markdown [data-streamdown="code-block-body"] pre code > span > span {
   color: var(--sdm-c, inherit);
 }
 
-/* Dark mode: switch to --shiki-dark variants */
+/* Dark mode: the --shiki-dark colours, again on the block's surface. */
 .dark .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
-  background-color: var(--shiki-dark-bg, var(--sdm-bg, inherit)) !important;
+  background-color: transparent !important;
   color: var(--shiki-dark, var(--sdm-fg, inherit));
 }
 .dark .markdown [data-streamdown="code-block-body"] pre code > span > span {
@@ -301,7 +343,7 @@
   background-image: linear-gradient(
     90deg,
     var(--theme-muted-text-color, #6a7282) 0%,
-    var(--theme-app, #d1d5db) 20%,
+    var(--theme-accent, #06354f) 20%,
     var(--theme-muted-text-color, #6a7282) 40%
   );
   -webkit-background-clip: text;
@@ -328,3 +370,137 @@
     animation: none;
   }
 }
+
+/* Tints of the ink for controls that sit on the panel: the theme's hover is a
+ * shade off another surface and would not read as a highlight here. */
+@utility chat-tint {
+  background-color: color-mix(in oklab, var(--theme-panel, #000) 6%, transparent);
+}
+@utility chat-tint-strong {
+  background-color: color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+}
+
+/* The composer is one surface lifted off the page: a hairline of the ink for
+ * its edge, and a short, soft shadow that deepens while it has focus. The
+ * shadow is black on every scheme; an ink-coloured one would glow on dark. */
+.chat-composer {
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 12%, transparent),
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 6px 16px -8px rgb(0 0 0 / 0.12);
+  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.chat-composer:focus-within {
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 22%, transparent),
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 10px 24px -10px rgb(0 0 0 / 0.18);
+}
+
+/* The thread runs under the docked composer and fades out above it, so the
+ * last lines dissolve rather than cut off at the dock's edge. */
+.chat-composer-dock::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 100%;
+  height: 1.5rem;
+  background: linear-gradient(to top, var(--theme-panel-bg, #fff), transparent);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-composer {
+    transition: none;
+  }
+}
+
+/* The tail of the reasoning while it streams fades in from the top, so the
+ * lines scrolling out read as more above rather than as cut off. */
+.chat-reasoning-tail {
+  mask-image: linear-gradient(to bottom, transparent, black 1.25rem);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 1.25rem);
+}
+
+/* An edge drawn from the ink rather than the theme's border, so a card reads
+ * the same on the panel and on a tinted bubble. */
+.chat-hairline {
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+}
+
+/* A bubble carrying pastes would shrink to its shortest line and squeeze
+ * its cards and blocks into a column; give it room for them to read. */
+.chat-bubble-roomy {
+  min-width: min(100%, 24rem);
+}
+
+/* ---- Accent ---------------------------------------------------------------
+ * The host's accent is the chat's signature: the send button, the caret, the
+ * focus ring, the thinking shimmer and the tint on what the reader wrote. Everything else stays ink, so the accent always means "this is the
+ * conversation's own voice or the reader's next move". */
+.chat-thread,
+.chat-composer,
+.chat-empty,
+.chat-reasoning-body {
+  --chat-accent: var(--theme-accent, var(--theme-element, #06354f));
+}
+
+/* What the reader wrote carries a wash of the accent: theirs, not the
+ * assistant's, at a glance. */
+.chat-bubble-user {
+  background-color: color-mix(
+    in oklab,
+    var(--theme-accent, #06354f) 9%,
+    var(--theme-panel-bg, #fff)
+  );
+}
+
+/* The reader's next move is the accent: the caret in the box, its ring on
+ * focus, and (in ChatInput) the filled send button. */
+.chat-composer textarea {
+  caret-color: var(--chat-accent);
+}
+.chat-composer:focus-within {
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--chat-accent) 55%, transparent),
+    0 0 0 4px color-mix(in oklab, var(--chat-accent) 12%, transparent),
+    0 10px 24px -10px rgb(0 0 0 / 0.18);
+}
+@utility chat-send-idle {
+  background-color: color-mix(in oklab, var(--theme-accent, #06354f) 14%, transparent);
+  color: color-mix(in oklab, var(--theme-accent, #06354f) 70%, var(--theme-panel-bg, #fff));
+}
+
+/* The reply being written ends in the accent's caret. */
+.chat-thread [style*="--streamdown-caret"] > :last-child::after {
+  color: var(--chat-accent);
+}
+
+/* Selected text inside the chat takes the accent too. */
+.chat-thread ::selection,
+.chat-composer ::selection {
+  background-color: color-mix(in oklab, var(--chat-accent) 22%, transparent);
+}
+
+/* A thought hangs off a line of the accent rather than a gray rule. */
+.chat-reasoning-body {
+  border-left: 1px solid color-mix(in oklab, var(--theme-accent, #06354f) 35%, transparent);
+}
+
+/* A paste in the reader's bubble is a code block like the assistant's, set on
+ * the panel so it stands off the bubble's tint, with the bubble's spacing
+ * rather than the answer's. */
+.chat-paste-code .markdown [data-streamdown="code-block"] {
+  margin: 0;
+  background: var(--theme-panel-bg, #fff);
+  white-space: normal;
+}
+
+/* A queued message is written but not yet sent: its own outline, dashed,
+ * where a sent one has its fill, so it reads as pending without the text
+ * losing contrast. */
+.chat-queued .chat-bubble-user {
+  background: transparent;
+  outline: 1px dashed color-mix(in oklab, var(--theme-panel, #000) 30%, transparent);
+  outline-offset: -1px;
+}

package/dist/ai/components/AllocationSelector.js

@@ -40,10 +40,10 @@ function AllocationSelector({ variant = "default" } = {}) {
 			value: selectedAllocation ?? "",
 			onChange: (v) => setSelectedAllocation(v || null),
 			variant,
-			textBoxClassName: bare ? "rounded-md px-1.5 py-0.5 text-[11px] hover:theme-muted-panel" : "h-8 rounded-lg border theme-border text-xs px-2",
+			textBoxClassName: bare ? "rounded-full h-8 px-2.5 text-[13px] hover:chat-tint" : "h-8 rounded-lg border theme-border text-xs px-2",
 			placeholder: "Select allocation"
 		}), selected && /* @__PURE__ */ jsxs("span", {
-			className: "text-[10px] theme-muted-text whitespace-nowrap",
+			className: "text-xs tabular-nums theme-muted-text whitespace-nowrap",
 			children: [
 				"$",
 				(selected.used ?? 0).toFixed(2),

package/dist/ai/components/BranchNavigator.js

@@ -25,19 +25,19 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 		if (hasNext && next) onNavigate(next.id);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "inline-flex items-center gap-1 text-xs theme-muted-text",
+		className: "inline-flex items-center text-xs theme-muted-text",
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: handlePrev,
 				disabled: !hasPrev,
-				className: "p-0.5 rounded theme-hover disabled:opacity-30 disabled:cursor-not-allowed",
+				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
 				title: t.previous,
 				"aria-label": t.previous,
-				children: /* @__PURE__ */ jsx(FaAngleLeft, { className: "w-3 h-3" })
+				children: /* @__PURE__ */ jsx(FaAngleLeft, { className: "w-3.5 h-3.5" })
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "min-w-[3ch] text-center",
+				className: "min-w-[3ch] text-center tabular-nums",
 				children: [
 					currentIndex + 1,
 					"/",
@@ -48,10 +48,10 @@ function BranchNavigator({ messages, currentMessageId, onNavigate }) {
 				type: "button",
 				onClick: handleNext,
 				disabled: !hasNext,
-				className: "p-0.5 rounded theme-hover disabled:opacity-30 disabled:cursor-not-allowed",
+				className: "p-1.5 rounded-md transition-colors enabled:hover:chat-tint enabled:hover:theme-text disabled:opacity-30 disabled:cursor-not-allowed",
 				title: t.next,
 				"aria-label": t.next,
-				children: /* @__PURE__ */ jsx(FaAngleRight, { className: "w-3 h-3" })
+				children: /* @__PURE__ */ jsx(FaAngleRight, { className: "w-3.5 h-3.5" })
 			})
 		]
 	});

package/dist/ai/components/ChatEmptyState.js

@@ -12,7 +12,6 @@ import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
 import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
-import cx from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatEmptyState.tsx
@@ -71,7 +70,7 @@ function ChatEmptyState({ targetSession }) {
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
 	const attachmentsAvailable = !!adapter.attachments;
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full bg-(--theme-panel-bg)",
+		className: "chat-empty flex h-full bg-(--theme-panel-bg)",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex-1 flex flex-col min-w-0",
 			children: [
@@ -110,31 +109,31 @@ function ChatEmptyState({ targetSession }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1 flex flex-col relative bg-(--theme-panel-bg)",
 					...attachmentsAvailable ? dragHandlers : {},
-					children: [
-						isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl m-4" }),
-						/* @__PURE__ */ jsx("div", {
-							className: "flex-1 flex flex-col items-center justify-center p-8",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "max-w-2xl w-full",
-								children: [!(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsxs("div", {
-									className: "text-center mb-10",
+					children: [isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl m-4" }), /* @__PURE__ */ jsx("div", {
+						className: "flex-1 flex flex-col items-center justify-center pt-8 pb-[12vh]",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "w-full",
+							children: [
+								!(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsxs("div", {
+									className: "mx-auto mb-6 max-w-[50rem] px-8 text-center",
 									children: [/* @__PURE__ */ jsx("h1", {
-										className: cx("text-2xl font-semibold text-(--theme-panel)", "tracking-tight"),
+										className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-panel)",
 										children: greeting
 									}), /* @__PURE__ */ jsx("p", {
 										className: "mt-2 text-sm theme-muted-text",
 										children: t.modernSubtitle
 									})]
-								}), hasLoadedModels && models.length === 0 ? /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-col items-center justify-center gap-4 py-8",
+								}),
+								hasLoadedModels && models.length === 0 && /* @__PURE__ */ jsxs("div", {
+									className: "mx-auto mb-6 flex max-w-md flex-col items-center gap-3 px-8 text-center",
 									children: [
-										/* @__PURE__ */ jsx(FaCloud, { className: "h-16 w-16 theme-muted-text opacity-50" }),
+										/* @__PURE__ */ jsx(FaCloud, { className: "h-10 w-10 theme-muted-text opacity-60" }),
 										/* @__PURE__ */ jsx("p", {
-											className: "text-lg theme-muted-text",
+											className: "text-lg font-medium theme-text",
 											children: t.noProvidersTitle
 										}),
 										/* @__PURE__ */ jsx("p", {
-											className: "text-sm theme-muted-text text-center max-w-md",
+											className: "text-sm theme-muted-text",
 											children: t.noProvidersBody
 										}),
 										extraLinks.addProvider && /* @__PURE__ */ jsxs(LinkComponent, {
@@ -142,31 +141,35 @@ function ChatEmptyState({ targetSession }) {
 												kind: "external",
 												href: extraLinks.addProvider
 											},
-											className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium theme-element hover:opacity-90",
+											className: "mt-1 inline-flex items-center gap-2 px-4 py-2 rounded-full transition-opacity text-sm font-medium theme-element hover:opacity-90",
 											children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), t.addProvider]
 										})
 									]
-								}) : /* @__PURE__ */ jsx("div", {
-									className: "grid grid-cols-1 md:grid-cols-2 gap-3",
-									children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: () => handleSuggestedPrompt(prompt),
-										disabled: isLoading || isLoadingModels || models.length === 0,
-										className: "text-left p-4 rounded-2xl border theme-border\n                          hover:opacity-80 transition-all duration-200 cursor-pointer\n                          disabled:opacity-50 disabled:cursor-not-allowed\n                          text-sm shadow-sm bg-(--theme-panel-bg) text-(--theme-panel)",
-										children: prompt
+								}),
+								/* @__PURE__ */ jsx(ChatInput, {
+									ref: inputRef,
+									onSend: handleSendMessage,
+									disabled: isLoading || isLoadingModels || models.length === 0,
+									placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
+									settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+									settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								}),
+								prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
+									className: "mx-auto max-w-[50rem] px-8",
+									children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("li", {
+										className: "border-b theme-border last:border-b-0",
+										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => handleSuggestedPrompt(prompt),
+											disabled: isLoading || isLoadingModels || models.length === 0,
+											className: "-mx-3 my-1 block w-[calc(100%+1.5rem)] text-pretty rounded-lg px-3 py-2 text-left text-sm theme-muted-text transition-colors hover:chat-tint hover:theme-text disabled:opacity-50 disabled:cursor-not-allowed",
+											children: prompt
+										})
 									}, key))
-								})]
-							})
-						}),
-						/* @__PURE__ */ jsx(ChatInput, {
-							ref: inputRef,
-							onSend: handleSendMessage,
-							disabled: isLoading || isLoadingModels || models.length === 0,
-							placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
-							settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-							settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								})
+							]
 						})
-					]
+					})]
 				})
 			]
 		})

package/dist/ai/components/ChatInput.js

@@ -1,6 +1,6 @@
 import { FaArrowUp } from "../../icons/fa/FaArrowUp.js";
-import { FaPaperclip } from "../../icons/fa/FaPaperclip.js";
 import { FaStop } from "../../icons/fa/FaStop.js";
+import { GoPlus } from "../../icons/go/GoPlus.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
@@ -56,9 +56,11 @@ function AttachButton({ open, disabled, label, onClick }) {
 		type: "button",
 		onClick,
 		disabled,
-		className: cx("flex-shrink-0 p-3 ml-1 mb-1 rounded-xl transition-colors", open ? "text-blue-600" : "theme-muted-text hover:theme-text", "disabled:opacity-50 disabled:cursor-not-allowed"),
+		"aria-expanded": open,
+		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
 		"aria-label": label,
-		children: /* @__PURE__ */ jsx(FaPaperclip, { className: "h-5 w-5" })
+		title: label,
+		children: /* @__PURE__ */ jsx(GoPlus, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
 	});
 }
 function SendButton({ onClick, enabled, emphasised, label, testId }) {
@@ -67,7 +69,7 @@ function SendButton({ onClick, enabled, emphasised, label, testId }) {
 		onClick,
 		disabled: !enabled,
 		"data-testid": testId,
-		className: cx("p-2.5 rounded-xl transition-all duration-200", emphasised ? "theme-element hover:opacity-90" : "theme-muted-panel theme-muted-text", !enabled && "cursor-not-allowed"),
+		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
 		"aria-label": label,
 		title: label,
 		children: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" })
@@ -198,22 +200,28 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 		if (pastes && handleTextPaste(e.clipboardData.getData("text/plain"))) e.preventDefault();
 	};
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
+	const toolbar = attachmentsAvailable || !flush && !!settingsRight;
+	const action = isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: stopStreaming,
+		disabled: turn?.stopping,
+		className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-(--theme-panel) text-(--theme-panel-bg) transition-opacity hover:opacity-85 disabled:opacity-50",
+		"aria-label": t.stopGenerating,
+		title: t.stopGenerating,
+		children: /* @__PURE__ */ jsx(FaStop, { className: "h-3 w-3" })
+	}) : /* @__PURE__ */ jsx(SendButton, {
+		onClick: handleSubmit,
+		enabled: canSend,
+		emphasised,
+		label: sendLabel ?? t.sendMessage,
+		testId: sendTestId
+	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative", !flush && "px-4 pb-6 pt-2 bg-(--theme-panel-bg)"),
+		className: cx("relative", !flush && "chat-composer-dock px-4 pb-5 pt-2 bg-(--theme-panel-bg)"),
 		...attachmentsAvailable ? dragHandlers : {},
 		children: [isDragging && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl" }), /* @__PURE__ */ jsxs("div", {
 			className: cx(!flush && "w-full max-w-[50rem] mx-auto px-4"),
 			children: [
-				showAttachments && attachmentsAvailable && /* @__PURE__ */ jsx("div", {
-					className: "mb-3 p-3 rounded-2xl border theme-border shadow-sm bg-(--theme-panel-bg)",
-					children: /* @__PURE__ */ jsx(AttachmentUpload, {
-						ref: attachmentUploadRef,
-						conversationId,
-						attachments,
-						onAttachmentsChange: setAttachments,
-						maxFiles: 10
-					})
-				}),
 				context && /* @__PURE__ */ jsx(ComposerContext, { children: context }),
 				cards.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "mb-2 flex flex-wrap gap-2",
@@ -238,56 +246,55 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 							textareaRef.current?.focus();
 						}
 					}), /* @__PURE__ */ jsxs("div", {
-						className: cx("relative flex items-end gap-2", "rounded-3xl border shadow-sm", "px-2 overflow-hidden", "transition-all duration-200", "focus-within:shadow-md", "theme-border", "bg-(--theme-panel-bg)"),
-						children: [attachmentsAvailable && /* @__PURE__ */ jsx(AttachButton, {
-							open: showAttachments,
-							disabled,
-							label: t.attachFiles,
-							onClick: () => setShowAttachments(!showAttachments)
-						}), /* @__PURE__ */ jsx("div", {
-							className: "flex-1 relative max-h-[200px] overflow-y-auto",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "flex items-end",
-								children: [/* @__PURE__ */ jsx("textarea", {
-									ref: textareaRef,
-									value: input,
-									onChange: (e) => setInputAndPersist(e.target.value),
-									onKeyDown: handleKeyDown,
-									onPaste: handlePaste,
-									placeholder: effectivePlaceholder,
-									"aria-label": inputLabel,
-									disabled,
-									rows: 1,
-									className: cx("theme-text", "flex-1 resize-none py-3.5 px-2 pr-3", "bg-transparent border-0", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-base leading-relaxed", "overflow-hidden")
-								}), /* @__PURE__ */ jsx("div", {
-									className: "flex-shrink-0 p-1.5 mr-1 sticky bottom-1 flex items-center",
-									children: isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: stopStreaming,
-										disabled: turn?.stopping,
-										className: cx("p-2.5 rounded-xl", "theme-muted-panel", "hover:theme-hover", "transition-colors"),
-										"aria-label": t.stopGenerating,
-										title: t.stopGenerating,
-										children: /* @__PURE__ */ jsx(FaStop, { className: "h-4 w-4" })
-									}) : /* @__PURE__ */ jsx(SendButton, {
-										onClick: handleSubmit,
-										enabled: canSend,
-										emphasised,
-										label: sendLabel ?? t.sendMessage,
-										testId: sendTestId
+						className: "chat-composer flex flex-col rounded-[1.25rem] bg-(--theme-panel-bg)",
+						children: [
+							showAttachments && attachmentsAvailable && /* @__PURE__ */ jsx("div", {
+								className: "px-3 pt-3",
+								children: /* @__PURE__ */ jsx(AttachmentUpload, {
+									ref: attachmentUploadRef,
+									conversationId,
+									attachments,
+									onAttachmentsChange: setAttachments,
+									maxFiles: 10
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: cx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "max-h-[200px] min-w-0 flex-1 overflow-y-auto",
+									children: /* @__PURE__ */ jsx("textarea", {
+										ref: textareaRef,
+										value: input,
+										onChange: (e) => setInputAndPersist(e.target.value),
+										onKeyDown: handleKeyDown,
+										onPaste: handlePaste,
+										placeholder: effectivePlaceholder,
+										"aria-label": inputLabel ?? effectivePlaceholder,
+										disabled,
+										rows: 1,
+										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
+								}), !toolbar && action]
+							}),
+							toolbar && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1 px-2 pb-2",
+								children: [attachmentsAvailable && /* @__PURE__ */ jsx(AttachButton, {
+									open: showAttachments,
+									disabled,
+									label: t.attachFiles,
+									onClick: () => setShowAttachments(!showAttachments)
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "ml-auto flex min-w-0 items-center gap-1",
+									children: [!flush && settingsRight, action]
 								})]
 							})
-						})]
+						]
 					})]
 				}),
-				!flush && /* @__PURE__ */ jsx(ComposerSettings, {
-					left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
-						className: "text-[11px] theme-muted-text",
-						children: t.filesAttached(uploadedCount)
-					})] }),
-					children: settingsRight
-				})
+				!flush && (settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-[11px] theme-muted-text",
+					children: t.filesAttached(uploadedCount)
+				})] }) })
 			]
 		})]
 	});