scriptoriumadmin/strix
1
0
Fork 0
mirror of https://github.com/usestrix/strix.git synced 2026-09-11 22:51:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tidy up the agent modal sizing

Browse source
This commit is contained in:
Jonathan Singer 2026-07-17 15:09:46 -04:00
parent db29c77b30
commit 9a9b5cc1c2
6 changed files with 123 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
strix/viewer/viewer_dist/assets/index-B8pfoev9.css Normal file
View file

File diff suppressed because one or more lines are too long

112
strix/viewer/viewer_dist/assets/index-BQfxrWUY.js → strix/viewer/viewer_dist/assets/index-DcwQJgKU.js
View file

File diff suppressed because one or more lines are too long

10
strix/viewer/viewer_dist/assets/index-Di2TwyAB.css
View file

File diff suppressed because one or more lines are too long

4
strix/viewer/viewer_dist/index.html
View file

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Strix Results</title>
<script type="module" crossorigin src="./assets/index-BQfxrWUY.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-Di2TwyAB.css">
<script type="module" crossorigin src="./assets/index-DcwQJgKU.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-B8pfoev9.css">
</head>
<body>
<div id="root"></div>

49
strix/viewer_src/src/components/live/AgentDetailModal.tsx
View file

@ -3,11 +3,21 @@ import { X } from "lucide-react";
import { AgentTranscript } from "./AgentTranscript";
import type { TranscriptAgent, TranscriptEvent } from "@/data/serverSource";
/** Status -> the small leading dot color, matching the graph node styling. */
const STATUS_DOT: Record<string, string> = {
completed: "bg-emerald-400",
running: "bg-blue-400",
waiting: "bg-yellow-400",
stopped: "bg-[#888]",
crashed: "bg-red-400",
failed: "bg-red-400",
};
/**
* Overlay modal showing a single agent's full transcript. Matches the cloud
* app, where clicking a node in the agent graph opens a modal (rather than
* revealing a section beneath the graph). Closes on backdrop click, the X
* button, or Escape.
* app: a fixed-size panel with a pinned header (status dot + agent name) and
* the transcript scrolling beneath it. Closes on backdrop click, the X button,
* or Escape.
*/
export function AgentDetailModal({
agent,
@ -33,26 +43,35 @@ export function AgentDetailModal({
return (
<div
className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 sm:p-8"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-label={`Agent ${agent.name}`}
>
<div
className="relative my-auto w-full max-w-3xl rounded-xl border border-[#222] bg-[#0a0a0a] shadow-2xl"
className="relative flex h-[80vh] w-full max-w-5xl flex-col rounded-xl border border-[#222] bg-[#0a0a0a] shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<button
type="button"
onClick={onClose}
aria-label="Close"
className="absolute right-3 top-3 z-10 rounded-md p-1 text-[#888] transition-colors hover:bg-[#1a1a1a] hover:text-white"
>
<X className="h-4 w-4" />
</button>
<div className="max-h-[85vh] overflow-y-auto p-5">
<AgentTranscript agent={agent} events={events} />
<div className="flex items-center justify-between gap-3 border-b border-[#222] px-5 py-3.5">
<div className="flex min-w-0 items-center gap-2">
<span
className={`h-2 w-2 flex-shrink-0 rounded-full ${STATUS_DOT[agent.status] ?? "bg-[#888]"}`}
/>
<span className="truncate text-sm font-semibold text-white">{agent.name}</span>
<span className="flex-shrink-0 font-mono text-xs text-[#555]">{agent.id}</span>
</div>
<button
type="button"
onClick={onClose}
aria-label="Close"
className="flex-shrink-0 rounded-md p-1 text-[#888] transition-colors hover:bg-[#1a1a1a] hover:text-white"
>
<X className="h-4 w-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-5">
<AgentTranscript agent={agent} events={events} showHeader={false} />
</div>
</div>
</div>

36
strix/viewer_src/src/components/live/AgentTranscript.tsx
View file

@ -153,9 +153,11 @@ export function buildGraphAgents(
export function AgentTranscript({
agent,
events,
showHeader = true,
}: {
agent: TranscriptAgent;
events: TranscriptEvent[];
showHeader?: boolean;
}) {
const mine = useMemo(
() =>
@ -170,21 +172,25 @@ export function AgentTranscript({
return (
<div>
<div className="flex items-center gap-2 flex-wrap mb-1">
<span className="text-base font-semibold text-white truncate">{agent.name}</span>
<span
className={`flex-shrink-0 text-xs font-medium capitalize px-2 py-0.5 rounded-full border ${
STATUS_STYLE[agent.status] ?? "text-[#aaa] border-[#333] bg-[#1a1a1a]"
}`}
>
{agent.status}
</span>
<span className="font-mono text-xs text-[#555]">{agent.id}</span>
</div>
<p className="text-xs text-[#666] mb-4">
{msgCount} message{msgCount === 1 ? "" : "s"} · {toolCount} tool call
{toolCount === 1 ? "" : "s"}
</p>
{showHeader && (
<>
<div className="flex items-center gap-2 flex-wrap mb-1">
<span className="text-base font-semibold text-white truncate">{agent.name}</span>
<span
className={`flex-shrink-0 text-xs font-medium capitalize px-2 py-0.5 rounded-full border ${
STATUS_STYLE[agent.status] ?? "text-[#aaa] border-[#333] bg-[#1a1a1a]"
}`}
>
{agent.status}
</span>
<span className="font-mono text-xs text-[#555]">{agent.id}</span>
</div>
<p className="text-xs text-[#666] mb-4">
{msgCount} message{msgCount === 1 ? "" : "s"} · {toolCount} tool call
{toolCount === 1 ? "" : "s"}
</p>
</>
)}
{mine.length === 0 ? (
<p className="text-sm text-[#666]">No recorded activity for this agent.</p>