From 2b73290994c5bd42636fa5bfc4c1060af7aef859 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Mon, 3 Aug 2026 22:56:14 +0200
Subject: [PATCH] fix(web): integrate composer "working/queued" strip into the
 terminal aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The background-working hint was a plain muted text line bolted above the
textarea — misaligned with the input column and off-idiom. Restyle it as a
terminal status strip: spinner + uppercase fg "Working" label + muted detail,
hairline primary-tinted border (matching .trace.running), square, aligned to
the textarea's max-w-3xl column. Reads as part of the working state now.

VERSION: 0.17.1 -> 0.17.2
---
 VERSION                                  |  2 +-
 web/src/lib/components/ChatThread.svelte | 39 ++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/VERSION b/VERSION
index 7cca771..c3d16c1 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.17.1
+0.17.2
diff --git a/web/src/lib/components/ChatThread.svelte b/web/src/lib/components/ChatThread.svelte
index d757515..cfde1da 100644
--- a/web/src/lib/components/ChatThread.svelte
+++ b/web/src/lib/components/ChatThread.svelte
@@ -11,6 +11,7 @@
   import { Textarea } from '$lib/components/ui/textarea'
   import AgentTrace from './AgentTrace.svelte'
   import OperatorQuestion from './OperatorQuestion.svelte'
+  import Spinner from './Spinner.svelte'
   import CornerDownLeftIcon from '@lucide/svelte/icons/corner-down-left'
   import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
   import SquareIcon from '@lucide/svelte/icons/square'
@@ -418,9 +419,17 @@
         {#if working && !streaming}
           <!-- Background/autonomous turn in progress (no live stream to watch):
                keep the composer open so the operator can queue a follow-up
-               (plan 2026-08-03 F1/F2). -->
-          <div class="mb-1 px-1 text-[10px] text-muted-foreground">
-            Nomos is working in the background — your message will queue and run when it's free.
+               (plan 2026-08-03 F1/F2). Styled as a terminal status strip that
+               mirrors AgentTrace's running idiom (spinner + fg label + a
+               primary-tinted hairline border) and aligns to the textarea's
+               column, so it reads as part of the working state rather than a
+               floating footnote. -->
+          <div class="composer-status mx-auto mb-2 w-full max-w-3xl">
+            <Spinner class="size-3 shrink-0 text-primary" />
+            <span class="composer-status-label">Working</span>
+            <span class="composer-status-text"
+              >message will queue — runs when Nomos is free</span
+            >
           </div>
         {/if}
         <form
@@ -640,6 +649,30 @@
     opacity: 0.3;
   }
 
+  /* Composer "working/queued" status strip — terminal status-bar idiom: a
+     hairline primary-tinted border (matching .trace.running), square corners,
+     a spinner + an uppercase fg label + muted detail. Border-driven, no
+     shadow — same language as the rest of the cyberspace surfaces. */
+  .composer-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3rem 0.6rem;
+    border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
+    border-radius: 0;
+    background: color-mix(in oklab, var(--primary) 6%, var(--card));
+    font-size: 11px;
+    color: var(--muted-foreground);
+  }
+  .composer-status-label {
+    color: var(--foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .composer-status-text {
+    color: var(--muted-foreground);
+  }
+
   /* Code copy button — global: injected via render() into {html} blocks */
   .prose-chat :global(.code-block-wrapper) {
     position: relative;