mirror of
https://github.com/usestrix/strix.git
synced 2026-08-19 18:13:34 +02:00
Tidy up the agent modal sizing
This commit is contained in:
Jonathan Singer
File diff suppressed because one or more lines are too long
+56
-56
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user