fix(web): integrate composer "working/queued" strip into the terminal aesthetic
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
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user