root/larp-quant-agent
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

terminal: put Orchestra (left) and Agent flow graph (right) side by side
All checks were successful
deploy / deploy (push) Successful in 7s
Details

Browse source 
xl 2-col row (0.85fr / 1.15fr), stacks below xl. Orchestra takes a gridClass
prop → dense 3×2 layout when side-by-side (avoids 6-col squish in the half
column on wide viewports). Agent flow SVG min-width lowered to fit the column.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
zefiroff 2026-06-09 19:06:54 +04:00
parent f3b533b032
commit 34eb14f848
3 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/viz/AgentWorkflow.tsx
View file

@ -252,7 +252,7 @@ export function AgentWorkflow({
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
role="group" role="group"
aria-label="Agent workflow graph" aria-label="Agent workflow graph"
style={{ display: 'block', width: '100%', minWidth: 760, height: 'auto' }} style={{ display: 'block', width: '100%', minWidth: 600, height: 'auto' }}
> >
{/* edges */} {/* edges */}
<g fill="none"> <g fill="none">

5
src/components/viz/Orchestra.tsx
View file

@ -144,6 +144,7 @@ export function Orchestra({
onHover, onHover,
onInspect, onInspect,
loading, loading,
gridClass = 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
}: { }: {
votes: Vote[] votes: Vote[]
decision: Direction decision: Direction
@ -152,6 +153,8 @@ export function Orchestra({
onHover?: (a: string | null) => void onHover?: (a: string | null) => void
onInspect?: (s: string | null) => void onInspect?: (s: string | null) => void
loading?: boolean loading?: boolean
/** Tailwind grid-cols classes for the layer columns — override when placed side-by-side. */
gridClass?: string
}) { }) {
const decCol = dirColor(decision) const decCol = dirColor(decision)
@ -164,7 +167,7 @@ export function Orchestra({
</span> </span>
</header> </header>
<div className="grid grid-cols-2 gap-px bg-line-soft sm:grid-cols-3 lg:grid-cols-6"> <div className={`grid gap-px bg-line-soft ${gridClass}`}>
{STATIC.map((layer) => ( {STATIC.map((layer) => (
<div key={layer.code} className="flex flex-col gap-1.5 bg-panel px-2.5 py-2.5"> <div key={layer.code} className="flex flex-col gap-1.5 bg-panel px-2.5 py-2.5">
<div className="flex items-baseline gap-1.5 pb-0.5"> <div className="flex items-baseline gap-1.5 pb-0.5">

10
src/pages/Terminal.tsx
View file

@ -494,11 +494,11 @@ export function Terminal() {
loading={loading} loading={loading}
/> />
{/* ── orchestra · the full agent pipeline ── */} {/* ── pipeline row · Orchestra (left) ‖ Agent flow graph (right) ── */}
<Orchestra votes={votes} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} loading={loading} /> <div className="grid grid-cols-1 items-start gap-2.5 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]">
<Orchestra votes={votes} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} loading={loading} gridClass="grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-3" />
{/* ── agent flow · the pipeline as an interactive workflow graph ── */} <AgentWorkflow data={data} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} updatedAt={updatedAt} live={live} loading={loading} />
<AgentWorkflow data={data} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} updatedAt={updatedAt} live={live} loading={loading} /> </div>
{/* ── workspace ── */} {/* ── workspace ── */}
<div className="grid items-start gap-2.5 lg:grid-cols-[250px_minmax(0,1fr)_330px]"> <div className="grid items-start gap-2.5 lg:grid-cols-[250px_minmax(0,1fr)_330px]">