swarm-ui: show the inference settings and resource caps on one wrapping line each
This commit is contained in:
iris
mara
parent
e70560c0ad
commit
369946169c
6 changed files with 83 additions and 79 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
/* <AgentInference> — one setting per line: badge, then where it comes from. */
|
/* <AgentInference> — the settings in one wrapping line: each badge, then where it comes from. */
|
||||||
.ui-agent-inference {
|
.ui-agent-inference {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -6,17 +6,16 @@
|
||||||
gap: 0.3em;
|
gap: 0.3em;
|
||||||
}
|
}
|
||||||
.ui-agent-inference-list {
|
.ui-agent-inference-list {
|
||||||
|
display: contents;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: grid;
|
|
||||||
gap: 0.3em;
|
|
||||||
}
|
}
|
||||||
.ui-agent-inference-list li {
|
.ui-agent-inference-list li {
|
||||||
display: flex;
|
display: contents;
|
||||||
align-items: center;
|
}
|
||||||
gap: 0.5em;
|
.ui-agent-inference-source {
|
||||||
flex-wrap: wrap;
|
margin-left: -0.25em;
|
||||||
}
|
}
|
||||||
.ui-agent-inference-source,
|
.ui-agent-inference-source,
|
||||||
.ui-agent-inference-muted {
|
.ui-agent-inference-muted {
|
||||||
|
|
|
||||||
|
|
@ -222,62 +222,66 @@ export function AgentInference({ agent }: { agent: string }) {
|
||||||
return (
|
return (
|
||||||
<div class="ui-agent-inference">
|
<div class="ui-agent-inference">
|
||||||
{errorPanel}
|
{errorPanel}
|
||||||
<ul class="ui-agent-inference-list">
|
<div class="ui-badge-row">
|
||||||
<li>
|
<ul class="ui-agent-inference-list">
|
||||||
{effective ? (
|
<li>
|
||||||
<>
|
{effective ? (
|
||||||
<Badge label="model" value={effective.model} />
|
<>
|
||||||
<span class="ui-agent-inference-source">
|
<Badge label="model" value={effective.model} />
|
||||||
{SOURCE_LABEL[effective.model_source]}
|
<span class="ui-agent-inference-source">
|
||||||
</span>
|
{SOURCE_LABEL[effective.model_source]}
|
||||||
</>
|
</span>
|
||||||
) : (
|
</>
|
||||||
|
) : (
|
||||||
|
<Badge
|
||||||
|
label="model"
|
||||||
|
value={configured?.model ?? "its own"}
|
||||||
|
title="the agent has not reported what it runs on yet"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{effective ? (
|
||||||
|
<>
|
||||||
|
<Badge label="effort" value={effective.effort} />
|
||||||
|
<span class="ui-agent-inference-source">
|
||||||
|
{SOURCE_LABEL[effective.effort_source]}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Badge
|
||||||
|
label="effort"
|
||||||
|
value={configured?.effort ?? "its own"}
|
||||||
|
title="the agent has not reported what it runs on yet"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
<Badge
|
<Badge
|
||||||
label="model"
|
label="subagent models"
|
||||||
value={configured?.model ?? "its own"}
|
value={
|
||||||
title="the agent has not reported what it runs on yet"
|
swarmModels.length > 0 ? swarmModels.join(", ") : "its own"
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
|
||||||
{effective ? (
|
|
||||||
<>
|
|
||||||
<Badge label="effort" value={effective.effort} />
|
|
||||||
<span class="ui-agent-inference-source">
|
|
||||||
{SOURCE_LABEL[effective.effort_source]}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Badge
|
<Badge
|
||||||
label="effort"
|
label="max subagents"
|
||||||
value={configured?.effort ?? "its own"}
|
value={
|
||||||
title="the agent has not reported what it runs on yet"
|
configured?.max_subagents === 0
|
||||||
|
? "0 (no subagents)"
|
||||||
|
: String(configured?.max_subagents ?? "no cap")
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
<li>
|
<Badge
|
||||||
<Badge
|
variant="quiet"
|
||||||
label="subagent models"
|
value="edit"
|
||||||
value={swarmModels.length > 0 ? swarmModels.join(", ") : "its own"}
|
title={`set the swarm's model, effort, subagent models and subagent cap for ${agent}`}
|
||||||
/>
|
onClick={() => setEditing(true)}
|
||||||
</li>
|
/>
|
||||||
<li>
|
</div>
|
||||||
<Badge
|
|
||||||
label="max subagents"
|
|
||||||
value={
|
|
||||||
configured?.max_subagents === 0
|
|
||||||
? "0 (no subagents)"
|
|
||||||
: String(configured?.max_subagents ?? "no cap")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<Badge
|
|
||||||
variant="quiet"
|
|
||||||
value="edit"
|
|
||||||
title={`set the swarm's model, effort, subagent models and subagent cap for ${agent}`}
|
|
||||||
onClick={() => setEditing(true)}
|
|
||||||
/>
|
|
||||||
<Dialog
|
<Dialog
|
||||||
open={editing}
|
open={editing}
|
||||||
onClose={() => setEditing(false)}
|
onClose={() => setEditing(false)}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
/* <AgentLimits> — one cap per line, then the edit action. */
|
/* <AgentLimits> — the caps and the edit action in one wrapping line. */
|
||||||
.ui-agent-limits {
|
.ui-agent-limits {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -6,11 +6,10 @@
|
||||||
gap: 0.3em;
|
gap: 0.3em;
|
||||||
}
|
}
|
||||||
.ui-agent-limits-list {
|
.ui-agent-limits-list {
|
||||||
|
display: contents;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: grid;
|
|
||||||
gap: 0.3em;
|
|
||||||
}
|
}
|
||||||
.ui-agent-limits-muted {
|
.ui-agent-limits-muted {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
|
|
|
||||||
|
|
@ -138,20 +138,22 @@ export function AgentLimits({ agent }: { agent: string }) {
|
||||||
return (
|
return (
|
||||||
<div class="ui-agent-limits">
|
<div class="ui-agent-limits">
|
||||||
{errorPanel}
|
{errorPanel}
|
||||||
<ul class="ui-agent-limits-list">
|
<div class="ui-badge-row">
|
||||||
<li>
|
<ul class="ui-agent-limits-list">
|
||||||
<Badge label="cpu quota" value={caps.cpu_quota ?? HIVE_DECIDES} />
|
<li>
|
||||||
</li>
|
<Badge label="cpu quota" value={caps.cpu_quota ?? HIVE_DECIDES} />
|
||||||
<li>
|
</li>
|
||||||
<Badge label="memory max" value={caps.memory_max ?? HIVE_DECIDES} />
|
<li>
|
||||||
</li>
|
<Badge label="memory max" value={caps.memory_max ?? HIVE_DECIDES} />
|
||||||
</ul>
|
</li>
|
||||||
<Badge
|
</ul>
|
||||||
variant="quiet"
|
<Badge
|
||||||
value="edit"
|
variant="quiet"
|
||||||
title={`set the swarm's CPU and memory caps for ${agent}`}
|
value="edit"
|
||||||
onClick={() => setEditing(true)}
|
title={`set the swarm's CPU and memory caps for ${agent}`}
|
||||||
/>
|
onClick={() => setEditing(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
open={editing}
|
open={editing}
|
||||||
onClose={() => setEditing(false)}
|
onClose={() => setEditing(false)}
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,7 @@ export function AllowedDomains({ agent }: { agent: string }) {
|
||||||
return (
|
return (
|
||||||
<div class="ui-agent-limits">
|
<div class="ui-agent-limits">
|
||||||
{errorPanel}
|
{errorPanel}
|
||||||
<div class="ui-badge-popover-row">
|
<div class="ui-badge-row">
|
||||||
{shown.length === 0 ? (
|
{shown.length === 0 ? (
|
||||||
<Badge label="allowed domains" value="none added" />
|
<Badge label="allowed domains" value="none added" />
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,8 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.3em;
|
gap: 0.3em;
|
||||||
}
|
}
|
||||||
/* A line of badge popovers that wraps when it runs out of room. */
|
/* A line of badges that wraps when it runs out of room. */
|
||||||
.ui-badge-popover-row {
|
.ui-badge-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue