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 { useEffect, useState } from 'react';
import { CirclePlay } from 'lucide-react'; import { CirclePlay } from 'lucide-react';
import { toneText } from '@/components/Data';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
Dialog, Dialog,
@@ -87,7 +88,7 @@ export const BackgroundJobDialog = ({ open, onOpenChange, cwd, onSubmit }: Backg
<DialogContent className="sm:max-w-lg"> <DialogContent className="sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
<CirclePlay className="h-4 w-4" /> <CirclePlay className={`h-4 w-4 ${toneText.warning}`} />
Background job Background job
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
@@ -1,5 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { CirclePlay } from 'lucide-react'; import { CirclePlay } from 'lucide-react';
import { toneText } from '@/components/Data';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import type { ModelOption } from 'state/useModels'; import type { ModelOption } from 'state/useModels';
import { getProviderDisplayName } 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 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 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. 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 && ( {onBackgroundJob && (
<button <button
type="button" type="button"
onClick={onBackgroundJob} onClick={onBackgroundJob}
title="Start a background job or watcher" 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]" /> <CirclePlay className="h-[18px] w-[18px]" />
</button> </button>