feat(FN-3228): add droid runtime plugin with event bridge and process manag
This merge brings three major improvements: a new `fusion-plugin-droid-runtime` plugin that provides event bridging, process management, MCP schema serving, and tool mapping for spawning AI agents; comprehensive UX polish across the dashboard including tokenized danger/error styling in task details, Fusion-Task-Id: FN-3228
This commit is contained in:
Fusion
@@ -3,7 +3,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--space-xl);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
@@ -33,6 +33,12 @@
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.prompt-manager-tab:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
border-color: var(--todo);
|
||||
}
|
||||
|
||||
.prompt-manager-tab.active {
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
@@ -115,7 +121,7 @@
|
||||
.prompt-template-badge-override {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
padding: calc(var(--space-xs) * 0.5) calc(var(--space-xs) * 1.5);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -130,24 +136,74 @@
|
||||
}
|
||||
|
||||
.prompt-template-badge-custom {
|
||||
background: color-mix(in srgb, var(--ws-info) 15%, transparent);
|
||||
color: var(--ws-info);
|
||||
background: color-mix(in srgb, var(--color-info) 15%, transparent);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.prompt-template-badge-override {
|
||||
background: color-mix(in srgb, var(--ws-warning) 15%, transparent);
|
||||
color: var(--ws-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.prompt-template-badge-role {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
padding: calc(var(--space-xs) * 0.5) calc(var(--space-xs) * 1.5);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.prompt-template-badge-built-in,
|
||||
.prompt-template-badge-role,
|
||||
.prompt-role-badge {
|
||||
--prompt-role-color: var(--color-muted);
|
||||
}
|
||||
|
||||
.prompt-role-tone--executor {
|
||||
--prompt-role-color: var(--todo);
|
||||
}
|
||||
|
||||
.prompt-role-tone--triage {
|
||||
--prompt-role-color: var(--triage);
|
||||
}
|
||||
|
||||
.prompt-role-tone--reviewer {
|
||||
--prompt-role-color: var(--in-review);
|
||||
}
|
||||
|
||||
.prompt-role-tone--merger {
|
||||
--prompt-role-color: var(--done);
|
||||
}
|
||||
|
||||
.prompt-role-tone--scheduler {
|
||||
--prompt-role-color: var(--color-info);
|
||||
}
|
||||
|
||||
.prompt-role-tone--engineer {
|
||||
--prompt-role-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.prompt-role-tone--custom {
|
||||
--prompt-role-color: var(--color-muted);
|
||||
}
|
||||
|
||||
.prompt-template-badge-role,
|
||||
.prompt-role-badge {
|
||||
background: color-mix(in srgb, var(--prompt-role-color) 15%, transparent);
|
||||
color: var(--prompt-role-color);
|
||||
}
|
||||
|
||||
.prompt-template-badge-built-in.prompt-role-tone--executor,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--triage,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--reviewer,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--merger,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--scheduler,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--engineer,
|
||||
.prompt-template-badge-built-in.prompt-role-tone--custom {
|
||||
border-color: var(--prompt-role-color);
|
||||
}
|
||||
|
||||
.prompt-template-card-actions {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
@@ -356,6 +412,12 @@
|
||||
border-color: var(--todo);
|
||||
}
|
||||
|
||||
.prompt-role-select:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--todo);
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
.prompt-assignments-note {
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
@@ -408,6 +470,21 @@
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.prompt-override-info:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
.prompt-override-name {
|
||||
@@ -420,7 +497,7 @@
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-muted);
|
||||
padding: 2px 4px;
|
||||
padding: calc(var(--space-xs) * 0.5) var(--space-xs);
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
@@ -428,11 +505,11 @@
|
||||
.prompt-override-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
padding: calc(var(--space-xs) * 0.5) calc(var(--space-xs) * 1.5);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
background: color-mix(in srgb, var(--ws-warning) 15%, transparent);
|
||||
color: var(--ws-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
|
||||
color: var(--color-warning);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@@ -440,8 +517,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: var(--space-xl);
|
||||
height: var(--space-xl);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
@@ -455,6 +532,13 @@
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.prompt-override-expand-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.prompt-override-description {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
@@ -482,7 +566,7 @@
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
min-height: calc(var(--space-xl) * 3 + var(--space-sm));
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
@@ -516,8 +600,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: var(--space-xl);
|
||||
height: var(--space-xl);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
@@ -531,6 +615,13 @@
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.prompt-override-fullscreen-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* Fullscreen container — fixed position overlay */
|
||||
.prompt-override-fullscreen {
|
||||
position: fixed;
|
||||
@@ -647,7 +738,7 @@
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.prompt-manager {
|
||||
padding: 0 14px;
|
||||
padding: 0 var(--space-lg);
|
||||
}
|
||||
|
||||
.prompt-manager-tabs {
|
||||
@@ -680,100 +771,19 @@
|
||||
|
||||
/* Fullscreen prompt editor mobile overrides */
|
||||
.prompt-override-fullscreen {
|
||||
padding: var(--space-md);
|
||||
padding: max(var(--space-md), env(safe-area-inset-top, 0px))
|
||||
max(var(--space-md), env(safe-area-inset-right, 0px))
|
||||
max(var(--space-md), env(safe-area-inset-bottom, 0px))
|
||||
max(var(--space-md), env(safe-area-inset-left, 0px));
|
||||
}
|
||||
|
||||
.prompt-override-fullscreen textarea {
|
||||
font-size: 16px; /* Prevent iOS zoom */
|
||||
}
|
||||
}
|
||||
|
||||
.new-task-modal .form-group small {
|
||||
display: block;
|
||||
margin-top: var(--space-sm);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.new-task-modal textarea {
|
||||
min-height: 80px;
|
||||
transition: height 0.1s ease-out;
|
||||
}
|
||||
|
||||
.selected-deps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: var(--space-sm);
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.dep-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: 3px 8px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dep-chip-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin-left: 2px;
|
||||
border-radius: 50%;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.dep-chip-remove:hover {
|
||||
color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
}
|
||||
|
||||
.model-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.model-select-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.model-select-label {
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.model-select-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.model-select-label {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
.prompt-override-expand-btn,
|
||||
.prompt-override-fullscreen-btn {
|
||||
width: calc(var(--space-lg) * 2 + var(--space-xs));
|
||||
height: calc(var(--space-lg) * 2 + var(--space-xs));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,15 +41,8 @@ const ROLE_LABELS: Record<AgentCapability, string> = {
|
||||
custom: "Custom Agent",
|
||||
};
|
||||
|
||||
/** Role badge colors */
|
||||
const ROLE_COLORS: Record<AgentCapability, string> = {
|
||||
executor: "#3b82f6",
|
||||
triage: "#f59e0b",
|
||||
reviewer: "#8b5cf6",
|
||||
merger: "#10b981",
|
||||
scheduler: "#06b6d4",
|
||||
engineer: "#ec4899",
|
||||
custom: "#6b7280",
|
||||
const getRoleToneClassName = (role: AgentCapability): string => {
|
||||
return `prompt-role-tone--${role}`;
|
||||
};
|
||||
|
||||
/** Form data for editing/creating a custom template */
|
||||
@@ -385,6 +378,7 @@ export function AgentPromptsManager({
|
||||
{/* Tab Navigation */}
|
||||
<div className="prompt-manager-tabs">
|
||||
<button
|
||||
type="button"
|
||||
className={`prompt-manager-tab ${activeTab === "templates" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("templates")}
|
||||
data-testid="tab-templates"
|
||||
@@ -393,6 +387,7 @@ export function AgentPromptsManager({
|
||||
Templates
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`prompt-manager-tab ${activeTab === "assignments" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("assignments")}
|
||||
data-testid="tab-assignments"
|
||||
@@ -401,6 +396,7 @@ export function AgentPromptsManager({
|
||||
Assignments
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`prompt-manager-tab ${activeTab === "overrides" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("overrides")}
|
||||
data-testid="tab-overrides"
|
||||
@@ -549,6 +545,7 @@ export function AgentPromptsManager({
|
||||
|
||||
<div className="prompt-template-editor-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleCancelEdit}
|
||||
data-testid="cancel-template-btn"
|
||||
@@ -556,6 +553,7 @@ export function AgentPromptsManager({
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleSaveTemplate}
|
||||
data-testid="save-template-btn"
|
||||
@@ -586,17 +584,12 @@ export function AgentPromptsManager({
|
||||
{template.name}
|
||||
</span>
|
||||
<span
|
||||
className="prompt-template-badge-built-in"
|
||||
style={{ borderColor: ROLE_COLORS[template.role] }}
|
||||
className={`prompt-template-badge-built-in ${getRoleToneClassName(template.role)}`}
|
||||
>
|
||||
Built-in
|
||||
</span>
|
||||
<span
|
||||
className="prompt-template-badge-role"
|
||||
style={{
|
||||
backgroundColor: ROLE_COLORS[template.role] + "20",
|
||||
color: ROLE_COLORS[template.role],
|
||||
}}
|
||||
className={`prompt-template-badge-role ${getRoleToneClassName(template.role)}`}
|
||||
>
|
||||
{ROLE_LABELS[template.role]}
|
||||
</span>
|
||||
@@ -651,6 +644,7 @@ export function AgentPromptsManager({
|
||||
<p>Delete "{template.name}"?</p>
|
||||
<div className="prompt-template-delete-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleDeleteTemplate(template.id)}
|
||||
data-testid={`confirm-delete-${template.id}`}
|
||||
@@ -658,6 +652,7 @@ export function AgentPromptsManager({
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={() => setDeleteConfirmId(null)}
|
||||
data-testid={`cancel-delete-${template.id}`}
|
||||
@@ -677,11 +672,7 @@ export function AgentPromptsManager({
|
||||
Custom
|
||||
</span>
|
||||
<span
|
||||
className="prompt-template-badge-role"
|
||||
style={{
|
||||
backgroundColor: ROLE_COLORS[template.role] + "20",
|
||||
color: ROLE_COLORS[template.role],
|
||||
}}
|
||||
className={`prompt-template-badge-role ${getRoleToneClassName(template.role)}`}
|
||||
>
|
||||
{ROLE_LABELS[template.role]}
|
||||
</span>
|
||||
@@ -704,6 +695,7 @@ export function AgentPromptsManager({
|
||||
<Maximize2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-icon"
|
||||
onClick={() => handleStartEdit(template)}
|
||||
title="Edit"
|
||||
@@ -713,6 +705,7 @@ export function AgentPromptsManager({
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-icon"
|
||||
onClick={() => setDeleteConfirmId(template.id)}
|
||||
title="Delete"
|
||||
@@ -739,6 +732,7 @@ export function AgentPromptsManager({
|
||||
{/* Add Custom Template Button */}
|
||||
{!isCreating && editingTemplateId === null && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary prompt-template-add-btn"
|
||||
onClick={handleStartCreate}
|
||||
data-testid="add-template-btn"
|
||||
@@ -767,11 +761,7 @@ export function AgentPromptsManager({
|
||||
<div className="prompt-override-fullscreen-title">
|
||||
{fullscreenTemplate.name}
|
||||
<span
|
||||
className="prompt-template-badge-role"
|
||||
style={{
|
||||
backgroundColor: ROLE_COLORS[fullscreenTemplate.role] + "20",
|
||||
color: ROLE_COLORS[fullscreenTemplate.role],
|
||||
}}
|
||||
className={`prompt-template-badge-role ${getRoleToneClassName(fullscreenTemplate.role)}`}
|
||||
>
|
||||
{ROLE_LABELS[fullscreenTemplate.role]}
|
||||
</span>
|
||||
@@ -817,11 +807,7 @@ export function AgentPromptsManager({
|
||||
>
|
||||
<div className="prompt-role-assignment-label">
|
||||
<span
|
||||
className="prompt-role-badge"
|
||||
style={{
|
||||
backgroundColor: ROLE_COLORS[role] + "20",
|
||||
color: ROLE_COLORS[role],
|
||||
}}
|
||||
className={`prompt-role-badge ${getRoleToneClassName(role)}`}
|
||||
>
|
||||
{ROLE_LABELS[role]}
|
||||
</span>
|
||||
@@ -884,16 +870,10 @@ export function AgentPromptsManager({
|
||||
data-testid={`override-${key}`}
|
||||
>
|
||||
<div className="prompt-override-header">
|
||||
<div
|
||||
<button
|
||||
type="button"
|
||||
className="prompt-override-info"
|
||||
onClick={() => toggleOverrideExpanded(key)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
toggleOverrideExpanded(key);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="prompt-override-name">
|
||||
{promptMeta.name}
|
||||
@@ -902,10 +882,11 @@ export function AgentPromptsManager({
|
||||
{hasOverride && (
|
||||
<span className="prompt-override-badge">customized</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<div className="prompt-override-header-actions">
|
||||
{isExpanded && (
|
||||
<button
|
||||
type="button"
|
||||
className="prompt-override-fullscreen-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -918,6 +899,7 @@ export function AgentPromptsManager({
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="prompt-override-expand-btn"
|
||||
aria-label={isExpanded ? "Collapse" : "Expand"}
|
||||
data-testid={`expand-${key}`}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
.task-form-primary-section .description-with-refine textarea {
|
||||
min-height: 120px;
|
||||
padding: 12px 70px 12px 12px;
|
||||
padding: var(--space-md) calc(var(--space-2xl) * 2 + var(--space-sm) - var(--space-xs)) var(--space-md) var(--space-md);
|
||||
line-height: 1.5;
|
||||
background: var(--surface);
|
||||
}
|
||||
@@ -113,6 +113,12 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.task-form-more-options-toggle:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
border-color: var(--todo);
|
||||
}
|
||||
|
||||
.task-form-more-options-toggle svg {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
@@ -165,6 +171,90 @@
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.new-task-modal .form-group small {
|
||||
display: block;
|
||||
margin-top: var(--space-sm);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.new-task-modal textarea {
|
||||
min-height: calc(var(--space-xl) * 3 + var(--space-md));
|
||||
transition: height var(--transition-instant);
|
||||
}
|
||||
|
||||
.selected-deps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-sm);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dep-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dep-chip-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--space-lg);
|
||||
height: var(--space-lg);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin-left: var(--space-xs);
|
||||
border-radius: 50%;
|
||||
transition: background var(--transition-instant), color var(--transition-instant);
|
||||
}
|
||||
|
||||
.dep-chip-remove:hover {
|
||||
color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
}
|
||||
|
||||
.dep-chip-remove:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
color: var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
}
|
||||
|
||||
.model-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.model-select-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.model-select-label {
|
||||
width: calc(var(--space-xl) * 3);
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* === Workflow Steps Section (TaskForm & WorkflowResultsTab) === */
|
||||
.workflow-steps-section {
|
||||
display: flex;
|
||||
@@ -200,7 +290,7 @@
|
||||
.workflow-step-description {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
margin-top: calc(var(--space-xs) * 0.5);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -225,15 +315,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: 4px 6px;
|
||||
padding: var(--space-xs) calc(var(--space-xs) * 1.5);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.workflow-step-order-item + .workflow-step-order-item {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin-top: 2px;
|
||||
padding-top: 6px;
|
||||
margin-top: calc(var(--space-xs) * 0.5);
|
||||
padding-top: calc(var(--space-xs) * 1.5);
|
||||
}
|
||||
|
||||
.workflow-step-order-item:hover {
|
||||
@@ -244,8 +334,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
min-width: calc(var(--space-lg) + var(--space-xs));
|
||||
height: calc(var(--space-lg) + var(--space-xs));
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
@@ -275,8 +365,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: var(--space-xl);
|
||||
height: var(--space-xl);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
@@ -299,6 +389,13 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.workflow-step-order-actions .btn-icon:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
border-color: var(--todo);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.workflow-step-order-actions .btn-icon {
|
||||
width: 36px;
|
||||
@@ -364,6 +461,17 @@
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.model-select-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.model-select-label {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.task-form .dep-dropdown {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
Reference in New Issue
Block a user