@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/public/css/components/assistant-avatar.css

@@ -0,0 +1,279 @@
+/* The assistant's avatar: Druplicon, free on the page, and nothing else there. Shown from the robot button in
+   the assistant's header (html.assistant-avatar-on, decided before first paint), it lives in a frameless
+   layer of its own, flying from place to place. Every control is on the assistant's side: the bar under
+   the robot button's menu holds show or hide, the board, the windows and the settings. */
+.assistant-avatar-stage { display: none; }
+/* The drawing covers the whole window, transparent and click-through, so a move or a flight can reach
+   anywhere on the page and is never cut at a square edge. The card (.avatar-float) is invisible: it is
+   where the figure stands, and what you drag; the page around it stays usable. */
+.avatar-layer { position: fixed; inset: 0; z-index: 990; pointer-events: none; }
+.avatar-layer .assistant-avatar-stage { display: block; width: 100%; height: 100%; }
+.assistant-avatar-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .3s ease; touch-action: none; }
+.avatar-float { cursor: grab; touch-action: none; }
+.avatar-float.is-dragging { cursor: grabbing; }
+.assistant-avatar-stage.is-ready .assistant-avatar-canvas { opacity: 1; }
+.avatar-layer.is-listening .assistant-avatar-canvas { filter: drop-shadow(0 0 0.6rem var(--brand-primary)); }
+.assistant-avatar-menu-btn.is-current { background: rgba(255, 255, 255, 0.22); }
+
+.avatar-float {
+  position: fixed; z-index: 991; width: 13rem; height: 17rem; left: calc(100vw - 14rem); top: 40vh;
+  background: transparent; border: 0;
+  transition: left 1.2s cubic-bezier(.35, .1, .25, 1), top 1.2s cubic-bezier(.35, .1, .25, 1), width .3s ease, height .3s ease;
+}
+.avatar-float[data-size="small"] { width: 9rem; height: 12rem; }
+.avatar-float[data-size="large"] { width: 18rem; height: 23rem; }
+/* Very big and huge: to show it off, or to see its hands and face from across the room. */
+.avatar-float[data-size="xl"] { width: 26rem; height: 34rem; }
+.avatar-float[data-size="huge"] { width: min(40rem, 60vw); height: calc(100vh - 5rem); }
+.avatar-float.is-dragging { transition: none; }
+
+/* The robot button's menu: show or hide, the tools, and every setting. */
+.assistant-avatar-bar { width: min(22rem, calc(100vw - 2rem)); padding: 0.75rem; }
+.assistant-avatar-bar.uk-open { display: flex; flex-direction: column; gap: 0.5rem; }
+.assistant-avatar-toggle { align-self: flex-start; }
+.assistant-avatar-toggle[aria-pressed="true"] { background: var(--subtle-brand); color: var(--brand-primary); }
+.assistant-avatar-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.assistant-avatar-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem;
+  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
+  background: var(--surface); color: var(--brand-secondary);
+}
+.assistant-avatar-btn:hover, .assistant-avatar-btn:focus-visible { color: var(--brand-primary); border-color: var(--brand-primary); }
+.assistant-avatar-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
+.assistant-avatar-mute[aria-pressed="true"], .assistant-avatar-btn[aria-expanded="true"] { background: var(--subtle-brand); color: var(--brand-primary); }
+.assistant-avatar-mic { width: auto; padding: 0 0.7rem; border-radius: 999px; gap: 0.3rem; }
+.assistant-avatar-mic[aria-pressed="true"] { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
+.assistant-avatar-pops:empty { display: none; }
+.assistant-avatar-pops { padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--surface); }
+.avatar-browser-address:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
+.avatar-kit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
+.avatar-kit-list li { display: flex; align-items: center; gap: 0.3rem; }
+.avatar-kit-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
+.avatar-kit-empty { margin: 0; font-size: 0.8125rem; color: var(--text-subtle, inherit); }
+.avatar-kit-credit { margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--text-subtle, inherit); }
+.avatar-kit-settings { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.875rem; }
+.avatar-kit-settings > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
+.avatar-kit-settings > div > span, .avatar-kit-range > span { min-width: 3.5rem; font-weight: 600; }
+.avatar-kit-range { display: flex; align-items: center; gap: 0.5rem; }
+.avatar-kit-range input { flex: 1; accent-color: var(--brand-primary); }
+.avatar-kit-check { display: flex; align-items: center; gap: 0.4rem; }
+.avatar-kit-check input { accent-color: var(--brand-primary); }
+
+/* Quick replies, in the panel under its header: for a while after an answer, and while a video plays. */
+.assistant-avatar-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--line); }
+.assistant-avatar-chips[hidden] { display: none; }
+.avatar-chip {
+  padding: 0.15rem 0.6rem; font: inherit; font-size: 0.8125rem; line-height: 1.5;
+  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
+  background: var(--surface); color: var(--brand-secondary);
+}
+.avatar-chip:hover, .avatar-chip:focus-visible { border-color: var(--brand-primary); color: var(--brand-primary); }
+.avatar-chip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
+.avatar-chip-media { background: var(--subtle-brand); }
+.avatar-chip[aria-pressed="true"] { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
+
+/* The windows beside it. */
+.avatar-window {
+  position: fixed; z-index: 993;   /* above the avatar (990, 991): a board, a video or a page is never covered by it */ display: flex; flex-direction: column; max-height: calc(100vh - 6rem);
+  border: 1px solid var(--line); border-radius: 0.875rem; overflow: hidden;
+  background: var(--surface); box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.16);
+  animation: avatar-window-in .25s ease-out;
+}
+.avatar-window-head {
+  display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.75rem;
+  cursor: grab; user-select: none; touch-action: none;
+  background: var(--brand-secondary); color: white;
+}
+.avatar-window-head strong { flex: 1; font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.avatar-window-tools { display: inline-flex; gap: 0.25rem; }
+.avatar-window-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem;
+  border: 0; border-radius: 50%; background: transparent; color: white; cursor: pointer;
+}
+.avatar-window-btn:hover, .avatar-window-btn:focus-visible { background: rgba(255, 255, 255, 0.18); color: white; }
+.avatar-window-btn:focus-visible { outline: 2px solid white; outline-offset: 1px; }
+.avatar-window-body { flex: 1; min-height: 0; overflow: auto; }
+
+/* The board: a whiteboard, its lines of text above the drawing. */
+.avatar-window-board .avatar-window-body { background: white; color: var(--brand-secondary); padding: 0.5rem 0.75rem 0.75rem; }
+.avatar-board-lines { margin: 0 0 0.25rem; padding-left: 1.25rem; font-size: 0.9375rem; }
+.avatar-board-lines:empty { display: none; }
+.avatar-board-svg { display: block; width: 100%; height: auto; color: var(--brand-secondary); }
+.avatar-stroke { fill: none; stroke: currentColor; stroke-width: 0.45; stroke-linecap: round; stroke-linejoin: round; }
+.avatar-board-label { font: 2.6px/1 var(--font-primary, system-ui), sans-serif; fill: var(--brand-secondary); text-anchor: middle; dominant-baseline: middle; }
+.avatar-board-text { text-anchor: start; font-size: 3px; }
+@keyframes avatar-draw { to { stroke-dashoffset: 0; } }
+@keyframes avatar-fade { from { opacity: 0; } }
+
+.avatar-video { position: relative; aspect-ratio: 16 / 9; background: black; }
+.avatar-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
+.avatar-window-browser { height: min(36rem, calc(100vh - 8rem)); }
+.avatar-reader { display: block; width: 100%; height: 100%; border: 0; background: white; }
+
+@keyframes avatar-window-in { from { opacity: 0; transform: translateY(0.5rem); } }
+@media (max-width: 40em) {
+  .avatar-float { width: 9rem; height: 12rem; }
+  .avatar-window { left: 0.5rem !important; right: 0.5rem; width: auto !important; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .assistant-avatar-canvas, .avatar-float { transition: none; }
+  .avatar-window { animation: none; }
+}
+
+/* The avatar's tools: three round buttons down the stage's left edge, each opening a small popover. */
+.assistant-avatar-kit { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
+.avatar-kit-pop {
+  position: absolute; left: 2.5rem; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem;
+  width: min(17rem, calc(100vw - 6rem)); padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem;
+  background: var(--surface); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.14);
+}
+.avatar-kit-pop[hidden] { display: none; }
+
+/* Windows are not limited to their first size: a corner to drag, and one button to fill the page. */
+.avatar-window { resize: both; min-width: 18rem; min-height: 10rem; }
+.avatar-window.is-max { left: 1rem !important; top: 4.5rem !important; width: calc(100vw - 2rem) !important; height: calc(100vh - 5.5rem) !important; max-height: none; resize: none; }
+.avatar-window-board .avatar-window-body { display: flex; flex-direction: column; }
+
+/* The board's tools, its drawing area, the pen and the sticky notes. */
+.avatar-board-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding-bottom: 0.4rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
+.avatar-board-area { position: relative; flex: 1; min-height: 0; }
+.avatar-board-area .avatar-board-svg { width: 100%; height: 100%; max-height: 100%; }
+.avatar-board-area.is-pen .avatar-board-svg { cursor: crosshair; touch-action: none; }
+.avatar-ink { stroke-width: 0.5; }
+.avatar-note {
+  position: absolute; width: 22%; min-width: 9rem; display: flex; flex-direction: column;
+  background: var(--subtle-accent); border: 1px solid var(--line); border-radius: 0.35rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
+}
+.avatar-note-grip { display: flex; justify-content: flex-end; height: 1.25rem; cursor: grab; touch-action: none; background: var(--brand-accent); border-radius: 0.35rem 0.35rem 0 0; }
+.avatar-note-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.4rem; color: var(--brand-secondary); }
+.avatar-note-text { min-height: 3.5rem; padding: 0.35rem 0.5rem; font-size: 0.875rem; outline: none; color: var(--brand-secondary); }
+.avatar-note-text:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-primary); }
+
+/* The browser's own bar, and each video's controls. */
+.avatar-window-browser .avatar-window-body { display: flex; flex-direction: column; }
+.avatar-browser-bar, .avatar-video-bar { display: flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); background: var(--subtle-light); }
+.avatar-video-bar { border-bottom: 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
+.avatar-browser-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; flex: 0 0 auto;
+  border: 0; border-radius: 50%; background: transparent; color: var(--brand-secondary); cursor: pointer;
+}
+.avatar-browser-btn:hover, .avatar-browser-btn:focus-visible { background: var(--subtle-brand); color: var(--brand-primary); }
+.avatar-browser-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
+.avatar-browser-btn[aria-pressed="true"] { color: var(--brand-primary); }
+.avatar-browser-address {
+  flex: 1; min-width: 0; padding: 0.25rem 0.6rem; font: inherit; font-size: 0.8125rem;
+  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit;
+}
+.avatar-window-browser .avatar-reader { flex: 1; height: auto; min-height: 0; }
+.avatar-video-gap { flex: 0 0 0.4rem; }
+
+/* The board: soft dotted paper, a palette and pen widths. */
+.avatar-window-board .avatar-board-area {
+  background-color: white;
+  background-image: radial-gradient(color-mix(in srgb, var(--brand-secondary) 18%, transparent) 1px, transparent 1.2px);
+  background-size: 1rem 1rem; border-radius: 0.4rem;
+}
+.avatar-board-palette, .avatar-board-widths { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.2rem; }
+.avatar-swatch {
+  width: 1.25rem; height: 1.25rem; border-radius: 50%; cursor: pointer;
+  border: 2px solid white; box-shadow: 0 0 0 1px var(--line);
+}
+.avatar-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand-primary); }
+.avatar-swatch:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
+
+/* The voice dock under the conversation, as in the avatar app: voice on or off, the big hold-to-talk
+   button (or the Space bar), and keep listening. */
+/* deep-chat keeps filling the panel, and the dock takes its own height under it. */
+/* deep-chat's container copies its host's height (height: inherit), so deep-chat keeps its own 100% and the
+   panel's body leaves room at the bottom instead, where the dock is pinned. */
+.assistant-body:has(> .assistant-dock) { position: relative; padding-bottom: 4.6rem !important; }
+.assistant-dock {
+  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.9rem;
+  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+  padding-top: 0.6rem; border-top: 1px solid var(--line);
+}
+@media (max-width: 40em) { .assistant-dock { left: 0.875rem; right: 0.875rem; bottom: 0.6rem; } }
+.dock-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
+  min-width: 2.6rem; height: 2.6rem; padding: 0 0.7rem; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--line); background: var(--surface); color: var(--brand-secondary);
+  font: inherit; font-size: 0.875rem; user-select: none; touch-action: none;
+}
+.dock-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
+.dock-btn:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
+.dock-btn[hidden] { display: none; }
+.dock-voice[aria-pressed="false"] { color: var(--danger); border-color: var(--danger); }
+.dock-talk { flex: 1; max-width: 16rem; background: var(--brand-grad); color: white; border-color: transparent; font-weight: 600; }
+.dock-talk:hover { color: white; filter: brightness(1.06); }
+.dock-talk-icon { display: inline-flex; }
+.dock-talk kbd {
+  font: inherit; font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 0.3rem;
+  color: white; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.45);
+}
+.dock-talk.is-held { background: var(--danger); animation: dock-pulse 1.2s infinite; }
+.dock-mic[aria-pressed="true"] { background: var(--brand-primary); color: white; border-color: transparent; }
+.dock-mic.is-listening { animation: dock-breathe 2.4s ease-in-out infinite; }
+.dock-mic.is-blocked { color: var(--danger); border-color: var(--danger); }
+@keyframes dock-pulse { 50% { filter: brightness(1.15); } }
+@keyframes dock-breathe { 50% { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--brand-primary) 30%, transparent); } }
+@media (max-width: 59.99em) { .dock-talk span, .dock-talk kbd { display: none; } }
+@media (prefers-reduced-motion: reduce) { .dock-talk.is-held, .dock-mic.is-listening { animation: none; } }
+.avatar-kit-range select { flex: 1; min-width: 0; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.8125rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--surface); color: inherit; }
+
+/* Hair colour swatches in the avatar's settings. */
+.avatar-swatch {
+  width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; cursor: pointer;
+  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text-subtle, inherit); font-size: 0.75rem; line-height: 1;
+}
+.avatar-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand-primary); }
+.avatar-kit-settings input[type="color"] { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; }
+/* On a big move the card follows its path frame by frame: no transition to lag behind it. */
+.avatar-float.is-travelling { transition: width .3s ease, height .3s ease; }
+
+/* The interface glyphs, public/vendor/webship-icons. An interface icon is its SVG used as a
+   mask, filled with the text colour, at the size the design gives it: so it is black (ink) at rest, brand blue on
+   hover, and light in dark mode, from CSS alone. A brand icon (value, service) is an image in its own colours. */
+.vi {
+  display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; vertical-align: middle;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
+  -webkit-mask-position: center; mask-position: center;
+  -webkit-mask-size: auto; mask-size: auto;
+}
+.vi-menu, .vi-share { width: 1.5rem; height: 1.5rem; }
+.dock-btn:hover .vi, .avatar-browser-btn:hover .vi, .avatar-chip:hover .vi, .assistant-ctl:hover .vi { color: var(--brand-primary); }
+.assistant-head .assistant-ctl:hover .vi { color: inherit; }
+.avatar-chip-icon { display: inline-flex; align-items: center; gap: 0.25rem; }
+.avatar-note-stamp { width: 0.875rem; height: 0.875rem; margin: auto auto auto 0.35rem; }
+.avatar-float.is-sizing { transition: left 1.2s cubic-bezier(.35, .1, .25, 1), top 1.2s cubic-bezier(.35, .1, .25, 1); }
+
+/* Colours: a picker for each part of the avatar, in a wrapping grid, and a way back to its own. */
+.avatar-kit-colours { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
+.avatar-kit-colours > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.25rem 0.5rem; width: 100%; max-height: 9.5rem; overflow-y: auto; }
+.avatar-kit-colour { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; min-width: 0; }
+.avatar-kit-colour span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.avatar-kit-colour input[type="color"] { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
+.avatar-kit-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+.avatar-kit-colour input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
+.avatar-kit-settings > .avatar-kit-colours { display: flex; flex-direction: column; align-items: stretch; }
+.avatar-kit-colours > span { font-weight: 600; text-align: left; }
+.avatar-kit-colours > .avatar-chip { align-self: flex-start; }
+
+/* The agent's status at the avatar's feet, as the Claude Code CLI shows it: a spinner, a verb, the time so far. */
+.avatar-status {
+  position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); z-index: 1;   /* at its feet: at home the feet are near the page's bottom, so below them it would be cut off */
+  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; white-space: nowrap;
+  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); pointer-events: none;
+  font-size: 0.8125rem; color: var(--brand-secondary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+.avatar-status[hidden] { display: none; }
+.avatar-status-spin { display: inline-block; width: 1em; text-align: center; color: var(--brand-primary); font-weight: 700; }
+.avatar-status-verb { font-weight: 600; color: var(--brand-primary); }
+.avatar-status-time { color: var(--text-subtle, inherit); font-variant-numeric: tabular-nums; }
+/* The alert colours of the brand tokens: info while it works, success when done, danger when stopped. */
+.avatar-status-spin { color: var(--info); }
+.avatar-status.is-done { background: var(--success-soft); border-color: var(--success); }
+.avatar-status.is-done .avatar-status-spin, .avatar-status.is-done .avatar-status-verb { color: var(--success-ink); }
+.avatar-status.is-stopped { background: var(--danger-soft); border-color: var(--danger); }
+.avatar-status.is-stopped .avatar-status-spin, .avatar-status.is-stopped .avatar-status-verb { color: var(--danger-ink); }

package/public/css/components/assistant-views.css

@@ -0,0 +1,198 @@
+/* ---------- How the assistant is shown: sidebar, wide, floating, full page ----------
+ *
+ * One panel, four amounts of room. The state is on <html> — data-assistant-view and
+ * .assistant-closed, written by the pre-paint script in the head — so the page is laid out right on
+ * the first frame rather than reflowing once a deferred script has had its say.
+ *
+ * After the pattern Drupal's own AI assistant uses: a switch in the top toolbar, and the rest in a
+ * menu in the panel's header.
+ */
+
+/* Closed: the page gets the width back, and the switch in the toolbar is the way in. */
+html.assistant-closed .assistant-side { display: none; }
+html.assistant-closed[data-assistant-view] .app-content,
+html.assistant-closed .app-content { margin-left: 0; }
+
+/* Wide — the same column, doubled, for an answer a 25rem column cannot hold: a report, a diff, a
+ * list of thirty projects. Capped against the viewport so it never leaves the page a sliver. */
+html[data-assistant-view="wide"] .assistant-side { width: min(45rem, 60vw); }
+html[data-assistant-view="wide"] .app-content { margin-left: min(45rem, 60vw); }
+/* The chevron is the state: it points right to widen, left to come back. */
+html[data-assistant-view="wide"] .assistant-wider .ctl-mark { transform: rotate(180deg); }
+
+/* Floating — the panel over the page rather than beside it, and the page keeps its full width.
+ * The launcher is the way back when it is closed. */
+html[data-assistant-view="float"] .app-content { margin-left: 0; }
+html[data-assistant-view="float"] .assistant-side {
+  top: auto;
+  left: 1.375rem;
+  bottom: 1.375rem;
+  width: min(28rem, calc(100vw - 2.75rem));
+  height: min(38rem, calc(100vh - 8rem));
+  padding: 0;
+}
+html[data-assistant-view="float"] .assistant-side .assistant-head { display: flex; align-items: center; }
+html[data-assistant-view="float"] .assistant-panel {
+  border-radius: 0.9rem;
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+}
+
+/* Floating means it can be moved: the header is the handle, the way a window's title bar is, with a
+   grip drawn before the avatar so it says so. Dragging is offered only in this view — every other one
+   is laid out by the stylesheet, and a dragged sidebar would just be a floating panel. */
+html[data-assistant-view="float"] .assistant-side .assistant-head {
+  cursor: grab;
+  touch-action: none;
+}
+html[data-assistant-view="float"] .assistant-side .assistant-head::before {
+  content: "";
+  width: 0.625rem;
+  height: 1.125rem;
+  margin-right: 0.125rem;
+  flex: none;
+  opacity: .55;
+  /* Two columns of dots: the grip every draggable window has, drawn rather than vendored. */
+  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
+  background-size: 4px 4px;
+  align-self: center;
+}
+html[data-assistant-view="float"] .assistant-side .assistant-head-row { align-items: center; }
+html[data-assistant-view="float"] .assistant-side.is-dragging { user-select: none; }
+html[data-assistant-view="float"] .assistant-side.is-dragging .assistant-head { cursor: grabbing; }
+
+/* The launcher is the way back in, in EVERY view, whenever the panel is not showing — since the
+ * control moved into the rail there is nothing else on the page that opens it, and a collapsed rail is
+ * an icon strip a newcomer has no reason to search. Hidden while the panel is open, because a button
+ * that opens what is already open is a button that does nothing. */
+.assistant-launcher-wrap { display: none; }
+html.assistant-closed .assistant-launcher-wrap {
+  display: block;
+  position: fixed;
+  left: 1.375rem;
+  bottom: 1.375rem;
+  z-index: 40;
+}
+.assistant-launcher { display: none; }
+html.assistant-closed .assistant-launcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--brand-grad);
+  color: var(--text-inverse);
+  box-shadow: var(--shadow-float);
+  cursor: pointer;
+}
+
+/* The menu the launcher offers on hover. It opens to the right of the button, which is where there is
+   room — the launcher sits in the bottom-left corner. */
+.launcher-dropdown { min-width: 14rem; }
+html.assistant-closed .assistant-launcher:hover { filter: brightness(1.08); }
+.assistant-launcher .ai-mark { width: 1.5rem; height: 1.5rem; }
+
+/* Full page — /assistant. There is no side panel anywhere in this view; the switch in the toolbar
+ * is the way to the page, and the page itself is the panel. */
+html[data-assistant-view="full"] .assistant-side { display: none; }
+html[data-assistant-view="full"] .app-content { margin-left: 0; }
+
+/* The page the full view goes to. The panel fills the height it is given rather than collapsing to
+ * the height of one message, which on an empty conversation is a card floating in a white page. */
+.assistant-page .assistant-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: min(46rem, calc(100vh - 14rem));
+}
+.assistant-page .assistant-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+
+/* ---------- the header controls ---------- */
+
+.assistant-controls { display: flex; align-items: center; gap: 0.125rem; flex: none; }
+
+/* On the brand gradient, so light ink and a translucent hover — a default button here would be a
+ * light outline with near-black text, which is invisible against both ends of the gradient. */
+.assistant-head .assistant-ctl {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--text-inverse);
+  cursor: pointer;
+}
+.assistant-head .assistant-ctl:hover { background: rgba(0, 0, 0, .18); }
+.assistant-head .assistant-ctl:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
+
+/* The menu is an ordinary dropdown on the page's surface, not on the gradient: it hangs below the
+ * header, over the conversation. */
+.assistant-dropdown { min-width: 14rem; }
+.assistant-dropdown .uk-nav-header { padding-top: 0.35rem; }
+
+/* The assistant's control lives in the rail, with the other things that apply to whatever page you are
+   on. It was a tile in the toolbar, which is the corner the brand and the page identity own — and in
+   the full-page view no ordinary page draws a panel, so its own header menu is not on screen either.
+   One row here carries everything: show, hide, a new conversation, and which of the four ways it is
+   shown. */
+.actions-nav .actions-assistant-wrap { display: block; }
+.actions-nav .actions-assistant { cursor: pointer; width: 100%; text-align: left; }
+
+/* Show and hide are two items; the stylesheet knows which one applies, so neither needs a script to
+   rename it. */
+html.assistant-closed .assistant-when-open,
+html:not(.assistant-closed) .assistant-when-closed { display: none; }
+/* On the full page the assistant is in front of you, and neither applies. */
+html[data-page-assistant] .assistant-when-open { display: none; }
+
+/* Under 960px the sidebar views already give way to the page: a 25rem column on a phone is the
+ * whole screen. The panel becomes the floating one, which is what there is room for. */
+@media (max-width: 59.99em) {
+  html[data-assistant-view="wide"] .assistant-side,
+  html[data-assistant-view="sidebar"] .assistant-side {
+    top: auto;
+    left: 0.75rem;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    width: auto;
+    height: min(32rem, calc(100vh - 6rem));
+    padding: 0;
+  }
+  html[data-assistant-view="wide"] .app-content,
+  html[data-assistant-view="sidebar"] .app-content { margin-left: 0; }
+}
+
+/* On /assistant the panel IS the page: widening it and closing it are not things that page can do,
+   so those two controls are not offered there. The menu stays — it is the way back to a sidebar. */
+.assistant-page .assistant-wider,
+.assistant-page .assistant-hide { display: none; }
+
+/* The assistant's control is the mark alone, wherever the navigation puts it — the icon the launcher and
+   every reply carry, in the brand blue that says which of these controls is the assistant. Sized here
+   rather than on the SVG so the rail and the top bar can differ if they ever need to. */
+.actions-assistant .ai-mark { width: 1.05rem; height: 1.05rem; display: block; color: var(--brand-primary); }
+.actions-assistant { display: inline-flex; align-items: center; justify-content: center; }
+html.dark .actions-assistant .ai-mark { color: var(--link); }
+/* In the rail it is a full-width tile like its neighbours, so the mark sits where their icons do. */
+.actions-nav .actions-assistant { justify-content: flex-start; }
+
+/* An entry shown as its icon alone, or as its label alone. Both halves are left in the markup — a screen
+   reader still reads the name, and the title still answers a hover — so this is presentation and nothing
+   else. */
+.nav-show-icon .action-label { display: none; }
+.nav-show-icon > .action-btn { padding-left: 0.45rem; padding-right: 0.45rem; }
+.actions-rail-inner .nav-show-icon > .action-btn { justify-content: center; }
+/* Text alone hides the glyph, whichever kind it is — UIKit's, Tabler's sprite, or the assistant's mark.
+   A count badge is not an icon and stays. */
+.nav-show-text [uk-icon],
+.nav-show-text .uk-icon,
+.nav-show-text .tabler-icon,
+.nav-show-text .ai-mark { display: none; }
+
+.assistant-dropdown .assistant-switch-row label { display: flex; align-items: center; gap: .5rem; padding: 5px 0; cursor: pointer; }

package/public/css/components/build-order.css

@@ -0,0 +1,74 @@
+/* Settings → Build order.
+ *
+ * The navigation editor's `.nav-entries` is a WRAPPING row of pills, which is right for a rail group of
+ * six short labels and wrong for this: forty builders whose names run to sixty characters, where the
+ * question is only ever "what is above what". So the list keeps the navigation's entry chrome — the
+ * handle, the drag behaviour, the classes ui.js already knows — and overrides the layout to a single
+ * column of full-width rows, numbered, so a position can be read rather than counted.
+ *
+ * Every rule here is written `.nav-entries.build-order-list`, TWO classes, rather than the one it
+ * needs: components with no entry in COMPONENT_ORDER are concatenated alphabetically, and
+ * `build-order` sorts before `commands-center` — which owns `.nav-entries { display: flex }`. At equal
+ * specificity the later file wins, so a single class here would lose the tie and this list would
+ * silently render as a wrapping row of forty pills. Out-specify rather than depend on file order.
+ */
+
+.nav-entries.build-order-list {
+  display: block;                      /* not the flex row .nav-entries is */
+  counter-reset: build-order;
+  margin: 0.75rem 0 1rem;
+  max-width: 46rem;
+}
+
+.nav-entries.build-order-list .build-order-row {
+  counter-increment: build-order;
+  width: 100%;
+  border-radius: 0.6rem;               /* a row, not a pill */
+  padding: 0.4rem 0.6rem;
+  margin-bottom: 0.3rem;
+  gap: 0.6rem;
+}
+
+/* The position, as the list's own numbering rather than an <ol> marker: the marker sits outside the
+   row and does not move with a drag, so it would go on counting past an item that had been moved. */
+.nav-entries.build-order-list .build-order-row::before {
+  content: counter(build-order);
+  flex: 0 0 1.6rem;
+  text-align: right;
+  color: var(--text-subtle);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
+}
+
+/* The label takes the room, so the file name and the controls stay at the right edge in one column
+   down the list rather than wherever each name happens to end. */
+.nav-entries.build-order-list .nav-entry-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.build-order-file {
+  font-size: 0.7rem;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+
+.build-order-where {
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+/* Below the phone breakpoint the file name is the first thing to go: it is the identity of the row for
+   somebody editing YAML, and the label is the identity for everyone else. */
+@media (max-width: 47.9375em) {
+  .build-order-file,
+  .build-order-where { display: none; }
+}
+
+.nav-entries.build-order-list .uk-sortable-drag .build-order-row,
+.nav-entries.build-order-list .build-order-row.uk-sortable-drag {
+  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
+}

package/public/css/components/clone-as-a-git-worktree.css

@@ -0,0 +1,30 @@
+/* Cloning a project as a git worktree.
+ *
+ * The option is one checkbox with two fields behind it, and a form that shows
+ * every field of every branch it might take reads as three decisions instead of
+ * one — so the branch field and its note appear only once the option is chosen.
+ * Done in CSS keyed on a class the checkbox toggles, so the disclosure survives
+ * the fragment being re-swapped by HTMX.
+ */
+.clone-worktree {
+  border-left: 2px solid var(--subtle-brand);
+  padding-left: .75rem;
+}
+.clone-worktree.is-on { border-left-color: var(--brand-primary); }
+
+.clone-worktree .worktree-branch,
+.clone-worktree .worktree-branch-note { display: none; }
+.clone-worktree.is-on .worktree-branch,
+.clone-worktree.is-on .worktree-branch-note { display: block; }
+
+/* The row's git relationship. A worktree and its main checkout are two folders
+   of one repository, and a listing gives no hint of that — which matters because
+   removing the main one destroys the other's history. Quiet by default; the main
+   checkout carries the brand accent because it is the one with dependents. */
+.proj-worktree,
+.proj-worktree-main { border: 1px solid var(--subtle-brand); border-radius: 999px; padding: 0 .5rem; }
+.proj-worktree-main { border-color: var(--brand-primary); color: var(--brand-primary); }
+
+/* The clone form's extra-address option, framed like the worktree one so the two
+   optional blocks read as siblings rather than as stray checkboxes in a form. */
+.clone-address { border-left: 2px solid var(--subtle-brand); padding-left: .75rem; }

package/public/css/components/command-palette.css

@@ -0,0 +1,61 @@
+/* The command palette and the shortcut sheet (public/palette.js). A quiet layer: one panel, a hairline,
+   the brand blue only on the selected row. */
+#palette {
+  position: fixed; inset: 0; z-index: 1100;
+  display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 12vh;
+  background: rgba(10, 18, 36, 0.45);
+  overscroll-behavior: contain;
+}
+#palette[hidden] { display: none; }
+#palette .palette-dialog {
+  width: min(40rem, 92vw);
+  max-height: 70vh;
+  display: flex; flex-direction: column;
+  background: var(--surface-card);
+  color: var(--text-default);
+  border: 1px solid var(--line);
+  border-radius: 0.875rem;
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+}
+#palette .palette-input {
+  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
+  padding: 1rem 1.125rem; font-size: 1.0625rem;
+  background: transparent; color: inherit; outline: none;
+}
+#palette .palette-input:focus-visible { box-shadow: inset 0 -2px 0 var(--brand-primary); }
+#palette .palette-list { list-style: none; margin: 0; padding: 0.375rem; overflow-y: auto; overscroll-behavior: contain; }
+#palette .palette-group {
+  padding: 0.625rem 0.75rem 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-subtle);
+}
+#palette .palette-row {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
+  padding: 0.5rem 0.75rem; border-radius: 0.5rem; cursor: pointer;
+}
+#palette .palette-row[aria-selected="true"] { background: var(--subtle-brand); box-shadow: inset 0.1875rem 0 0 var(--brand-primary); }
+html.dark #palette .palette-row[aria-selected="true"] { background: rgba(0, 116, 224, 0.22); }
+#palette .palette-label { font-weight: 500; }
+#palette .palette-hint { color: var(--text-subtle); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#palette .palette-shortcut { cursor: default; display: grid; grid-template-columns: 13rem 1fr; align-items: baseline; gap: 0.75rem; }
+#palette .palette-shortcut kbd { justify-self: start; }
+#palette .palette-empty { padding: 1rem 0.75rem; color: var(--text-subtle); }
+#palette .palette-foot {
+  display: flex; gap: 1.25rem; padding: 0.5rem 1rem; border-top: 1px solid var(--line);
+  font-size: 0.8125rem; color: var(--text-subtle);
+}
+#palette kbd {
+  display: inline-block; margin-right: 0.25rem; padding: 0 0.375rem;
+  border: 1px solid var(--line); border-radius: 0.3125rem; border-bottom-width: 2px;
+  font: 0.75rem/1.4 var(--font-code, monospace); color: var(--text-default); background: var(--surface-card);
+}
+@media (prefers-reduced-motion: reduce) { #palette * { transition: none !important; animation: none !important; } }
+
+/* The way in, in the toolbar: a search icon and the key, quiet until hovered. */
+.palette-trigger { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; cursor: pointer; color: var(--text-subtle); }
+.palette-trigger:hover { color: var(--text-default); }
+.palette-trigger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 0.375rem; }
+.palette-trigger .palette-trigger-key {
+  padding: 0 0.375rem; border: 1px solid var(--line); border-radius: 0.3125rem;
+  font: 0.75rem/1.4 var(--font-code, monospace); color: inherit;
+}