diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte index 5e4a00c..e6d5654 100644 --- a/v2/src/lib/components/Workspace/SettingsTab.svelte +++ b/v2/src/lib/components/Workspace/SettingsTab.svelte @@ -6,13 +6,15 @@ getActiveGroupId, getAllGroups, updateProject, + updateAgent, addProject, removeProject, addGroup, removeGroup, switchGroup, } from '../../stores/workspace.svelte'; - import { deriveIdentifier } from '../../types/groups'; + import { deriveIdentifier, type GroupAgentRole, AGENT_ROLE_ICONS } from '../../types/groups'; + import { generateAgentPrompt } from '../../utils/agent-prompts'; import { getSetting, setSetting } from '../../adapters/settings-bridge'; import { getCurrentTheme, setTheme } from '../../stores/theme.svelte'; import { THEME_LIST, getPalette, type ThemeId } from '../../styles/themes'; @@ -625,6 +627,117 @@ + {#if activeGroup && (activeGroup.agents?.length ?? 0) > 0} +
+

Agents in "{activeGroup.name}"

+ +
+ {#each activeGroup.agents ?? [] as agent (agent.id)} +
+
+ {AGENT_ROLE_ICONS[agent.role] ?? '๐Ÿค–'} + updateAgent(activeGroupId, agent.id, { name: (e.target as HTMLInputElement).value })} + /> + {agent.role} + +
+ +
+ + + Working Directory + +
+ updateAgent(activeGroupId, agent.id, { cwd: (e.target as HTMLInputElement).value || undefined })} + /> + +
+
+ +
+ + + Model + + updateAgent(activeGroupId, agent.id, { model: (e.target as HTMLInputElement).value || undefined })} + /> +
+ + {#if agent.role === 'manager'} +
+ + + Wake Interval + +
+ updateAgent(activeGroupId, agent.id, { wakeIntervalMin: parseInt((e.target as HTMLInputElement).value) })} + /> + {agent.wakeIntervalMin ?? 3} min +
+
+ {/if} + +
+ + + Custom Context + + +
+ +
+ + + Preview full introductory prompt + + 
{generateAgentPrompt({
+                role: agent.role as GroupAgentRole,
+                agentId: agent.id,
+                agentName: agent.name,
+                group: activeGroup,
+                customPrompt: agent.systemPrompt,
+              })}
+
+
+ {/each} +
+
+ {/if} + {#if activeGroup}

Projects in "{activeGroup.name}"

@@ -1727,4 +1840,118 @@ background: var(--ctp-base); font-size: 0.78rem; } + + /* Agent config cards */ + .agent-cards { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + .agent-config-card { + background: var(--ctp-surface0); + border: 1px solid var(--ctp-surface1); + border-left: 3px solid var(--ctp-mauve); + border-radius: 0.5rem; + padding: 0.625rem 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + transition: border-color 0.15s; + } + + .agent-config-card:hover { + border-color: var(--ctp-surface2); + border-left-color: var(--ctp-mauve); + } + + .agent-config-icon { + font-size: 1.1rem; + flex-shrink: 0; + } + + .agent-role-badge { + font-size: 0.6rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ctp-mauve); + background: color-mix(in srgb, var(--ctp-mauve) 10%, transparent); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + flex-shrink: 0; + } + + .card-field-input { + padding: 0.3125rem 0.5rem; + background: var(--ctp-base); + border: 1px solid var(--ctp-surface1); + border-radius: 0.25rem; + color: var(--ctp-text); + font-size: 0.78rem; + } + + .card-field-input:focus { + border-color: var(--ctp-blue); + outline: none; + } + + .agent-prompt-input { + padding: 0.375rem 0.5rem; + background: var(--ctp-base); + border: 1px solid var(--ctp-surface1); + border-radius: 0.25rem; + color: var(--ctp-text); + font-size: 0.75rem; + font-family: var(--ui-font-family, sans-serif); + line-height: 1.4; + resize: vertical; + min-height: 3rem; + } + + .agent-prompt-input:focus { + border-color: var(--ctp-blue); + outline: none; + } + + .agent-prompt-input::placeholder { + color: var(--ctp-overlay0); + } + + .prompt-preview { + border: 1px solid var(--ctp-surface1); + border-radius: 0.25rem; + overflow: hidden; + } + + .prompt-preview-toggle { + display: flex; + align-items: center; + gap: 0.375rem; + padding: 0.3125rem 0.5rem; + font-size: 0.65rem; + color: var(--ctp-overlay0); + cursor: pointer; + user-select: none; + transition: color 0.15s; + } + + .prompt-preview-toggle:hover { + color: var(--ctp-subtext0); + } + + .prompt-preview-content { + padding: 0.5rem; + margin: 0; + background: var(--ctp-base); + color: var(--ctp-subtext0); + font-size: 0.65rem; + font-family: var(--term-font-family, monospace); + line-height: 1.45; + white-space: pre-wrap; + word-break: break-word; + max-height: 20rem; + overflow-y: auto; + border-top: 1px solid var(--ctp-surface1); + } diff --git a/v2/src/lib/types/groups.ts b/v2/src/lib/types/groups.ts index 826e7d1..ff6e73d 100644 --- a/v2/src/lib/types/groups.ts +++ b/v2/src/lib/types/groups.ts @@ -26,7 +26,7 @@ export interface ProjectConfig { systemPrompt?: string; } -const AGENT_ROLE_ICONS: Record = { +export const AGENT_ROLE_ICONS: Record = { manager: '๐ŸŽฏ', architect: '๐Ÿ—', tester: '๐Ÿงช',