the background job button wears the amber a running job wears

Not white. `toneText.warning` — hsl(43 96% 56%), the same amber a running task
chip shows two rows up, so the control and the thing it produces read as one
feature rather than two.

Taken from `toneText` rather than typed as `text-warning`, so it cannot drift
from the chips it is matching. The name is misleading in this one place: nothing
here is a warning, it is just where that colour lives in the palette.

Dialog title icon follows, same reason as the glyph did.

tsgo clean, frontend builds.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-16 02:47:53 +00:00
co-authored by Claude Opus 5
parent a78541a341
commit 08d725bfb3
2 changed files with 9 additions and 3 deletions
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { CirclePlay } from 'lucide-react';
import { toneText } from '@/components/Data';
import { Button } from '@/components/ui/button';
import {
Dialog,
@@ -87,7 +88,7 @@ export const BackgroundJobDialog = ({ open, onOpenChange, cwd, onSubmit }: Backg
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<CirclePlay className="h-4 w-4" />
<CirclePlay className={`h-4 w-4 ${toneText.warning}`} />
Background job
</DialogTitle>
<DialogDescription>
@@ -1,5 +1,6 @@
import { useEffect } from 'react';
import { CirclePlay } from 'lucide-react';
import { toneText } from '@/components/Data';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import type { ModelOption } from 'state/useModels';
import { getProviderDisplayName } from 'state/useModels';
@@ -132,13 +133,17 @@ export function ModelSelector({
already set, and this is the one control on this row that DOES something. The earlier glyph was
a radio tower, on the reasoning that a play button implies one-shot — but most of what gets
started here is a long-running process, and a watcher is still something you press start on.
Recognisable beats precise at 18px. */}
Recognisable beats precise at 18px.
`warning` is not a warning here: it is the amber a RUNNING task chip wears two rows up, so the
button and the thing it produces are the same colour. Taken from `toneText` rather than written
as `text-warning`, so it cannot drift from the chips it is meant to match. */}
{onBackgroundJob && (
<button
type="button"
onClick={onBackgroundJob}
title="Start a background job or watcher"
className="shrink-0 cursor-pointer rounded-md p-1.5 text-foreground transition-colors hover:bg-foreground/10"
className={`shrink-0 cursor-pointer rounded-md p-1.5 transition-colors hover:bg-foreground/10 ${toneText.warning}`}
>
<CirclePlay className="h-[18px] w-[18px]" />
</button>