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 { Textarea } from '$lib/components/ui/textarea'
|
||||||
import AgentTrace from './AgentTrace.svelte'
|
import AgentTrace from './AgentTrace.svelte'
|
||||||
import OperatorQuestion from './OperatorQuestion.svelte'
|
import OperatorQuestion from './OperatorQuestion.svelte'
|
||||||
|
import Spinner from './Spinner.svelte'
|
||||||
import CornerDownLeftIcon from '@lucide/svelte/icons/corner-down-left'
|
import CornerDownLeftIcon from '@lucide/svelte/icons/corner-down-left'
|
||||||
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
|
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
|
||||||
import SquareIcon from '@lucide/svelte/icons/square'
|
import SquareIcon from '@lucide/svelte/icons/square'
|
||||||
@@ -418,9 +419,17 @@
|
|||||||
{#if working && !streaming}
|
{#if working && !streaming}
|
||||||
<!-- Background/autonomous turn in progress (no live stream to watch):
|
<!-- Background/autonomous turn in progress (no live stream to watch):
|
||||||
keep the composer open so the operator can queue a follow-up
|
keep the composer open so the operator can queue a follow-up
|
||||||
(plan 2026-08-03 F1/F2). -->
|
(plan 2026-08-03 F1/F2). Styled as a terminal status strip that
|
||||||
<div class="mb-1 px-1 text-[10px] text-muted-foreground">
|
mirrors AgentTrace's running idiom (spinner + fg label + a
|
||||||
Nomos is working in the background — your message will queue and run when it's free.
|
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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<form
|
<form
|
||||||
@@ -640,6 +649,30 @@
|
|||||||
opacity: 0.3;
|
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 */
|
/* Code copy button — global: injected via render() into {html} blocks */
|
||||||
.prose-chat :global(.code-block-wrapper) {
|
.prose-chat :global(.code-block-wrapper) {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
Reference in New Issue
Block a user