Skip to content

Commit 1b644e7

Browse files
kathiekiwikathiekiwi
committed
fix(webapp): Investigate/Watch surfaces use the Ask Trigger glyph; drop editor's owner-bitmap row
Every feature surface (buttons, suggested prompts, chat history status, watch card, watch result block) now renders AgentMonoLogo instead of the heroicons magnifier/eye, matching the Ask Trigger nav button. Unrelated magnifiers/eyes (search inputs, admin search, password-visibility toggles) are untouched. storybook.ai-agent: remove the owner-drawn candidates row and the editor's description text; the interactive editor stays.
1 parent cb9f478 commit 1b644e7

7 files changed

Lines changed: 27 additions & 73 deletions

File tree

‎apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { MagnifyingGlassIcon, TrashIcon } from "@heroicons/react/20/solid";
1+
import { TrashIcon } from "@heroicons/react/20/solid";
22
import { formatDurationMilliseconds } from "@trigger.dev/core/v3/utils/durations";
3+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
34
import { Button } from "~/components/primitives/Buttons";
45
import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
56
import { FormButtons } from "~/components/primitives/FormButtons";
@@ -42,7 +43,7 @@ function ProcessIcon({ process }: { process: ChatProcess }) {
4243
return (
4344
<span title={label} aria-label={label} role="img" className="shrink-0 text-text-dimmed">
4445
{process === "investigating" ? (
45-
<MagnifyingGlassIcon className="size-3.5" />
46+
<AgentMonoLogo size={14} decorative />
4647
) : (
4748
<AgentSpinner size={14} />
4849
)}

‎apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import {
22
BookOpenIcon,
33
ChartBarIcon,
4-
EyeIcon,
5-
MagnifyingGlassIcon,
64
QuestionMarkCircleIcon,
75
SparklesIcon,
86
} from "@heroicons/react/20/solid";
97
import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
108
import { useMemo, useState } from "react";
9+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
1110
import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
1211
import type { RenderIcon } from "~/components/primitives/Icon";
1312
import {
@@ -20,8 +19,8 @@ import {
2019
const PROMPT_SLOT_BUTTON: Record<ResolvedPromptSlot, { variant: ButtonVariant; icon: RenderIcon }> =
2120
{
2221
promoted: { variant: "primary/small", icon: SparklesIcon },
23-
investigate: { variant: "primary/small", icon: MagnifyingGlassIcon },
24-
watch: { variant: "secondary/small", icon: EyeIcon },
22+
investigate: { variant: "primary/small", icon: <AgentMonoLogo size={16} decorative /> },
23+
watch: { variant: "secondary/small", icon: <AgentMonoLogo size={16} decorative /> },
2524
status: { variant: "secondary/small", icon: ChartBarIcon },
2625
explain: { variant: "tertiary/small", icon: QuestionMarkCircleIcon },
2726
docs: { variant: "docs/small", icon: BookOpenIcon },

‎apps/webapp/app/components/dashboard-agent/InvestigateButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
1+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
22
import { Button } from "~/components/primitives/Buttons";
33
import { useDashboardAgent } from "./dashboardAgentLauncher";
44

@@ -30,8 +30,7 @@ export function InvestigateButton({
3030
<Button
3131
type="button"
3232
variant={`${variant}/${size}`}
33-
LeadingIcon={MagnifyingGlassIcon}
34-
leadingIconClassName={variant === "primary" ? undefined : "text-text-dimmed"}
33+
LeadingIcon={<AgentMonoLogo size={16} decorative />}
3534
fullWidth={fullWidth}
3635
textAlignLeft={fullWidth}
3736
className={className}

‎apps/webapp/app/components/dashboard-agent/WatchButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { EyeIcon } from "@heroicons/react/20/solid";
21
import type { WatchSpec } from "@internal/dashboard-agent-contracts";
2+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
33
import { Button } from "~/components/primitives/Buttons";
44
import { useDashboardAgent } from "./dashboardAgentLauncher";
55
import { watchTooltipLabel } from "~/presenters/v3/dashboardAgent";
@@ -31,8 +31,7 @@ export function WatchButton({
3131
<Button
3232
type="button"
3333
variant={`${variant}/${size}`}
34-
LeadingIcon={EyeIcon}
35-
leadingIconClassName={variant === "primary" ? undefined : "text-text-dimmed"}
34+
LeadingIcon={<AgentMonoLogo size={16} decorative />}
3635
fullWidth={fullWidth}
3736
textAlignLeft={fullWidth}
3837
className={className}

‎apps/webapp/app/components/dashboard-agent/WatchCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
* Pure component: draft in, markup and callbacks out. Draft rules live in
1111
* `watch-card.ts` and wording in `app/presenters/v3/dashboardAgent`.
1212
*/
13-
import { EyeIcon } from "@heroicons/react/20/solid";
1413
import {
1514
WATCH_WINDOW_HOURS_OPTIONS,
1615
watchCadenceOptions,
1716
type WatchDraft,
1817
type WatchKind,
1918
} from "@internal/dashboard-agent-contracts";
2019
import { useId, useState } from "react";
20+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
2121
import { Button } from "~/components/primitives/Buttons";
2222
import { Checkbox } from "~/components/primitives/Checkbox";
2323
import { Input } from "~/components/primitives/Input";
@@ -167,7 +167,7 @@ export function WatchCard({
167167
return (
168168
<ChatSystemBlock
169169
label="Watch"
170-
icon={<EyeIcon className="size-3.5 shrink-0 text-text-dimmed" />}
170+
icon={<AgentMonoLogo size={14} decorative />}
171171
actions={
172172
<>
173173
{/* One confirm, expanded or not: an expanded card is submitted as shown. */}

‎apps/webapp/app/components/dashboard-agent/WatchResultBlock.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,35 @@
1010
* append time by `app/presenters/v3/dashboardAgent`, so a later copy change never rewrites what
1111
* a user was already told.
1212
*/
13-
import { CheckCircleIcon, EyeIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
13+
import { CheckCircleIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
1414
import type { WatchResultBlock as WatchResultBlockPayload } from "@internal/dashboard-agent-contracts";
15+
import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
1516
import { ChatSystemBlock } from "./chat-layout";
1617
import { TONE_ICON_COLOR } from "./agent-badges";
1718
import { cn } from "~/utils/cn";
1819

1920
/**
2021
* Icon and label per outcome. A confirmation is not a success (nothing has happened
21-
* yet) so it wears the neutral eye; the check belongs to the one-shot that did
22-
* answer the question.
22+
* yet) so it wears the neutral Ask Trigger glyph; the check belongs to the one-shot
23+
* that did answer the question.
2324
*/
2425
const OUTCOME = {
25-
watching: { label: "Watch", Icon: EyeIcon, tone: "neutral" },
26-
already_true: { label: "Watch", Icon: CheckCircleIcon, tone: "success" },
27-
impossible: { label: "Watch", Icon: InformationCircleIcon, tone: "neutral" },
26+
watching: { label: "Watch", icon: <AgentMonoLogo size={14} decorative /> },
27+
already_true: {
28+
label: "Watch",
29+
icon: <CheckCircleIcon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR.success)} />,
30+
},
31+
impossible: {
32+
label: "Watch",
33+
icon: <InformationCircleIcon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR.neutral)} />,
34+
},
2835
} as const;
2936

3037
export function WatchResultBlock({ block }: { block: WatchResultBlockPayload }) {
31-
const { label, Icon, tone } = OUTCOME[block.outcome] ?? OUTCOME.watching;
38+
const { label, icon } = OUTCOME[block.outcome] ?? OUTCOME.watching;
3239

3340
return (
34-
<ChatSystemBlock
35-
label={label}
36-
icon={<Icon className={cn("size-3.5 shrink-0", TONE_ICON_COLOR[tone])} />}
37-
>
41+
<ChatSystemBlock label={label} icon={icon}>
3842
<p className="text-sm text-text-bright">{block.headline}</p>
3943
{block.lifetime ? <p className="text-xs text-text-dimmed">{block.lifetime}</p> : null}
4044
{block.detail ? <p className="text-xs text-text-dimmed">{block.detail}</p> : null}

‎apps/webapp/app/routes/storybook.ai-agent/route.tsx‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -183,27 +183,15 @@ function DotMatrixTab() {
183183
</div>
184184
))}
185185
</div>
186-
<Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
187-
Icon editor — same grid as the shapes above (`dotMatrixGeometry`, `MATRIX`x`MATRIX`), at
188-
1.5x the size the candidates were shown at. Click a dot to toggle it; the bitmap below reads
189-
back as a `MATRIX`-line string, ready to paste into a shape definition.
190-
</Paragraph>
191186
<div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
192187
<DotGridEditor />
193188
</div>
194-
<Paragraph variant="small" className="mt-2 -mb-3 max-w-3xl">
195-
Owner-drawn candidates, exactly as given — editor size and {CANDIDATE_SMALL_SIZE}px, so
196-
legibility at icon size is judgeable. #2 and #5 are identical (an A/B pair).
197-
</Paragraph>
198-
<OwnerBitmapsRow />
199189
</div>
200190
);
201191
}
202192

203193
// 1.5x the 32px candidate icons this replaced.
204194
const EDITOR_SIZE = 48;
205-
// Within the 16-24px range action icons render at.
206-
const CANDIDATE_SMALL_SIZE = 20;
207195

208196
/**
209197
* Renders a flat `MATRIX * MATRIX` lit/unlit array on the shared grid geometry —
@@ -277,42 +265,6 @@ function DotGridEditor() {
277265
);
278266
}
279267

280-
function bitmapToLit(bitmap: string[]): boolean[] {
281-
return bitmap.flatMap((row) => [...row].map((cell) => cell === "#"));
282-
}
283-
284-
// Owner-drawn in the editor above, 5-line `MATRIX` bitmaps, exactly as given.
285-
const OWNER_BITMAPS: { id: number; bitmap: string[] }[] = [
286-
{ id: 1, bitmap: ["#.#.#", ".#.#.", "#...#", ".#.#.", "#.#.#"] },
287-
{ id: 2, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
288-
{ id: 3, bitmap: [".....", ".###.", "#.#.#", ".###.", "....."] },
289-
{ id: 4, bitmap: ["..#..", ".###.", "##.##", ".###.", "..#.."] },
290-
// Same as #2 — the owner may be A/B-ing it; rendered anyway.
291-
{ id: 5, bitmap: [".###.", "#####", "#.#.#", ".###.", "....."] },
292-
{ id: 6, bitmap: [".###.", "#.#.#", "#####", "#.#.#", ".###."] },
293-
{ id: 7, bitmap: ["..#..", "..#..", "##.##", "..#..", "..#.."] },
294-
{ id: 8, bitmap: [".###.", "#...#", "#...#", "#####", "..#.."] },
295-
{ id: 9, bitmap: [".###.", "#####", "#.#.#", "#####", "..#.."] },
296-
{ id: 10, bitmap: [".###.", "#####", "#####", "..#..", "..#.."] },
297-
];
298-
299-
function OwnerBitmapsRow() {
300-
return (
301-
<div className="flex flex-wrap items-end gap-8 rounded-md border border-grid-bright bg-background-bright px-6 py-5">
302-
{OWNER_BITMAPS.map(({ id, bitmap }) => {
303-
const lit = bitmapToLit(bitmap);
304-
return (
305-
<div key={id} className="flex flex-col items-end gap-2">
306-
<DotGrid lit={lit} size={EDITOR_SIZE} litClassName="text-text-bright" />
307-
<DotGrid lit={lit} size={CANDIDATE_SMALL_SIZE} litClassName="text-text-bright" />
308-
<div className="text-[10px] uppercase tracking-wide text-text-dimmed">#{id}</div>
309-
</div>
310-
);
311-
})}
312-
</div>
313-
);
314-
}
315-
316268
function AskTriggerButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSize: number }) {
317269
const [active, setActive] = useState(false);
318270
const timeout = useRef<ReturnType<typeof setTimeout>>();

0 commit comments

Comments
 (0)