cli-jaw 2.17.72 → 2.17.73

package/public/js/features/employees.ts

@@ -77,7 +77,7 @@ export function renderEmployees(): void {
         el.innerHTML = `<div style="color:var(--text-dim);font-size:11px;padding:4px 0">${t('emp.addPrompt')}</div>`;
         return;
     }
-    const cliKeys = getCliKeys();
+    const cliKeys = getCliKeys().filter(cli => cli !== 'aside');
     el.innerHTML = employees.map(a => {
         const isStatic = a.source === 'static';
         const models = MODEL_MAP[a.cli] || [];
@@ -115,7 +115,7 @@ export function renderEmployees(): void {
         // the Model column.
         const cliField = isStatic
             ? `<select disabled title="CLI fixed for built-in employee"><option>${escapeHtml(a.cli)}</option></select>`
-            : `<select data-emp-cli="${escapeHtml(a.id)}">${cliKeys.map(c => `<option${a.cli === c ? ' selected' : ''}>${escapeHtml(c)}</option>`).join('')}</select>`;
+            : `<select data-emp-cli="${escapeHtml(a.id)}">${a.cli === 'aside' ? '<option value="aside" selected disabled>Aside (main-only)</option>' : ''}${cliKeys.map(c => `<option${a.cli === c ? ' selected' : ''}>${escapeHtml(c)}</option>`).join('')}</select>`;
         const roleField = isStatic
             ? `<div style="font-size:11px;color:var(--text-dim);padding:4px 0">${escapeHtml(a.role || '')}</div>`
             : `<select data-emp-role="${escapeHtml(a.id)}">${ROLE_PRESETS.map(r => `<option value="${r.value}"${presetVal === r.value ? ' selected' : ''}>${r.label}</option>`).join('')}</select>
@@ -136,7 +136,7 @@ export function renderEmployees(): void {
                 </div>
                 <div>
                     <label>Model</label>
-                    <select data-emp-model="${escapeHtml(a.id)}">
+                    <select data-emp-model="${escapeHtml(a.id)}"${a.cli === 'aside' ? ' disabled title="Aside supports the main agent only"' : ''}>
                         <option value="default"${selectedModel === 'default' ? ' selected' : ''}>default</option>
                         ${models.map(m => `<option${selectedModel === m ? ' selected' : ''}>${escapeHtml(m)}</option>`).join('')}
                         ${selectedModel !== 'default' && !models.includes(selectedModel) ? `<option selected>${escapeHtml(selectedModel)}</option>` : ''}

package/public/js/features/heartbeat.ts

@@ -14,8 +14,14 @@ interface HeartbeatData {
     jobs: HeartbeatJob[];
 }
 
+let mainCli: string | undefined;
+
 export async function openHeartbeatModal(): Promise<void> {
-    const data = await api<HeartbeatData>('/api/heartbeat');
+    const [data, settings] = await Promise.all([
+        api<HeartbeatData>('/api/heartbeat'),
+        api<{ cli?: string }>('/api/settings'),
+    ]);
+    mainCli = settings?.cli;
     state.heartbeatJobs = (data?.jobs || []).map(normalizeHeartbeatJob);
     state.heartbeatErrors = collectHeartbeatErrors(state.heartbeatJobs as HeartbeatJob[]);
     renderHeartbeatJobs();
@@ -75,6 +81,13 @@ export function renderHeartbeatJobs(): void {
             `;
         }).join('');
     }
+    if (mainCli === 'aside') {
+        const notice = document.createElement('p');
+        notice.className = 'hb-schedule-meta hb-help';
+        notice.setAttribute('role', 'status');
+        notice.textContent = t('hb.asideUnsupported');
+        container.prepend(notice);
+    }
     const active = jobs.filter(j => j.enabled).length;
     const btn = document.getElementById('hbSidebarBtn');
     if (btn) btn.innerHTML = `${ICONS.heartPulse} Heartbeat (${active})`;

package/public/js/features/settings-core.ts

@@ -225,8 +225,9 @@ function syncCliOptionSelects(settings: SettingsData | null = null): void {
     const flushCli = document.getElementById('flushCli') as HTMLSelectElement | null;
     if (flushCli) {
         const current = settings?.memory?.cli || flushCli.value || '';
-        flushCli.innerHTML = '<option value="">(active CLI)</option>' +
-            cliKeys.map(cli => `<option value="${escapeHtml(cli)}">${escapeHtml(cliDisplayLabel(cli))}</option>`).join('');
+        flushCli.innerHTML = (settings?.cli === 'aside' || selCli?.value === 'aside' ? '' : '<option value="">(active CLI)</option>') +
+            cliKeys.filter(cli => cli !== 'aside').map(cli => `<option value="${escapeHtml(cli)}">${escapeHtml(cliDisplayLabel(cli))}</option>`).join('');
+        if (current === 'aside') { appendCustomOption(flushCli, current); const option = Array.from(flushCli.options).find(o => o.value === current); if (option) { option.disabled = true; option.textContent = 'Aside (main-only)'; } }
         preserveRetiredRuntimeOption(flushCli, current);
         if (Array.from(flushCli.options).some(o => o.value === current)) flushCli.value = current;
     }
@@ -290,7 +291,16 @@ function syncActiveEffortOptions(cli: string, selected = '', model?: string): vo
         cli,
         model ?? (document.getElementById('selModel') as HTMLSelectElement | null)?.value ?? '',
     );
-    const effortsList = resolveEffortChoices(meta, activeModel, providerEfforts, cliProvider || undefined);
+    const effortsList = cli === 'aside' ? meta?.effortsByModel?.[activeModel || 'default'] || [] : resolveEffortChoices(meta, activeModel, providerEfforts, cliProvider || undefined);
+    if (cli === 'aside') {
+        const valid = !selected || selected === 'default' || effortsList.includes(selected);
+        selEffort.innerHTML = '<option value="">(default)</option>' + effortsList.map(e => `<option value="${escapeHtml(e)}">${escapeHtml(e)}</option>`).join('');
+        if (!valid) { appendCustomOption(selEffort, selected); const option = Array.from(selEffort.options).find(o => o.value === selected); if (option) { option.disabled = true; option.textContent = `${selected} (unavailable)`; } }
+        selEffort.value = selected === 'default' ? '' : selected;
+        selEffort.disabled = effortsList.length === 0 && valid;
+        selEffort.title = valid ? 'Aside effort belongs to the selected concrete model.' : 'Saved Aside effort is unavailable.';
+        return;
+    }
     if (effortsList.length === 0) {
         const note = meta?.effortNote || '— none';
         selEffort.innerHTML = `<option value="">${escapeHtml(note)}</option>`;
@@ -388,12 +398,13 @@ export async function loadSettings(): Promise<void> {
     const ao = s.activeOverrides?.[s.cli] || {};
     const pc = s.perCli?.[s.cli] || {};
     const activeModel = ao.model || pc.model;
-    const activeEffort = ao.effort ?? pc.effort ?? '';
+    const activeEffort = s.cli === 'aside' ? ao.effort || pc.effort || '' : ao.effort ?? pc.effort ?? '';
     const selModel = document.getElementById('selModel') as HTMLSelectElement | null;
     if (activeModel && selModel) {
         const displayModel = normalizeModelForDisplay(s.cli, activeModel);
         if (displayModel && !Array.from(selModel.options).some(o => o.value === displayModel)) {
             appendCustomOption(selModel, displayModel);
+            if (s.cli === 'aside') { const option = Array.from(selModel.options).find(o => o.value === displayModel); if (option) { option.disabled = true; option.textContent = `${displayModel} (unavailable)`; } }
         }
         selModel.value = displayModel;
     }
@@ -506,7 +517,13 @@ export function onCliChange(save = true): void {
         syncActiveEffortOptions(cli);
         return;
     }
-    if (meta?.modelNote && modelSel) {
+    if (cli === 'aside' && modelSel) {
+        setSelectOptions(modelSel, models);
+        const defaultOption = Array.from(modelSel.options).find(o => o.value === 'default');
+        if (defaultOption && meta?.observedDefaultModel) defaultOption.textContent = `Default (${meta.observedDefaultModel})`;
+        modelSel.disabled = models.length === 0;
+        modelSel.title = t('cli.asideHelp');
+    } else if (meta?.modelNote && modelSel) {
         modelSel.innerHTML = `<option value="">${escapeHtml(meta.modelNote)}</option>`;
         modelSel.title = meta.modelNote;
         modelSel.disabled = true;
@@ -537,7 +554,7 @@ export function onCliChange(save = true): void {
         saveActiveCliSettings();
     };
     if (!modelSel) { if (save) updateSettings(); return; }
-    modelSel.parentElement?.appendChild(inp);
+    if (cli !== 'aside') modelSel.parentElement?.appendChild(inp);
     modelSel.onchange = function () {
         if ((this as HTMLSelectElement).value === '__custom__') {
             inp.style.display = 'block';
@@ -562,13 +579,13 @@ export function onCliChange(save = true): void {
             || selCli.value !== cli
             || document.getElementById('selCliProvider') !== providerSel
             || document.getElementById('selModel') !== modelSel
-            || document.getElementById('selModelCustom') !== inp
+            || (cli !== 'aside' && document.getElementById('selModelCustom') !== inp)
             || document.getElementById('selEffort') !== effortSel
             || ((meta?.providers?.length ?? 0) > 0 && getSelectedCliProvider(cli) !== cliProvider)) return;
         const ao = s.activeOverrides?.[cli] || {};
         const pc = s.perCli?.[cli] || {};
         const model = ao.model || pc.model;
-        const effort = ao.effort ?? pc.effort ?? '';
+        const effort = cli === 'aside' ? ao.effort || pc.effort || '' : ao.effort ?? pc.effort ?? '';
         if (cli !== 'pi' && meta?.providers?.length) {
             const savedProvider = pc.provider || meta.defaultProvider || '';
             if (savedProvider !== cliProvider) return;
@@ -576,6 +593,7 @@ export function onCliChange(save = true): void {
         if (model && modelSel) {
             const displayModel = normalizeModelForDisplay(cli, model);
             appendCustomOption(modelSel, displayModel);
+            if (cli === 'aside' && !models.includes(displayModel)) { const option = Array.from(modelSel.options).find(o => o.value === displayModel); if (option) { option.disabled = true; option.textContent = `${displayModel} (unavailable)`; } }
             modelSel.value = displayModel;
         }
         syncActiveEffortOptions(cli, effort);
@@ -595,7 +613,12 @@ export async function saveActiveCliSettings(): Promise<void> {
     const effortEl = document.getElementById('selEffort') as HTMLSelectElement | null;
     const overrides: Record<string, PerCliConfig> = {};
     overrides[cli] = { model };
-    if (effortEl && !effortEl.disabled) overrides[cli].effort = effortEl.value || '';
+    if (effortEl && (!effortEl.disabled || cli === 'aside')) overrides[cli].effort = effortEl.value || (cli === 'aside' ? 'default' : '');
+    if (cli === 'aside') {
+        const meta = getCliMeta(cli);
+        const effort = effortEl?.value || '';
+        if (!meta?.models.includes(model) || (effort && !meta.effortsByModel?.[model]?.includes(effort))) return;
+    }
     const patch: Record<string, unknown> = { activeOverrides: overrides };
     const patchMeta = getCliMeta(cli);
     if (cli !== 'pi' && patchMeta?.providers?.length) patch['perCli'] = { [cli]: { provider: getSelectedCliProvider(cli) } };
@@ -609,9 +632,10 @@ export async function saveActiveCliSettings(): Promise<void> {
 export function onFlushCliChange(): void {
     const flushCli = (document.getElementById('flushCli') as HTMLSelectElement)?.value || '';
     const effectiveCli = flushCli || (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
-    const models = MODEL_MAP[effectiveCli] || [];
+    const models = effectiveCli === 'aside' ? [] : MODEL_MAP[effectiveCli] || [];
     const flushModelSel = document.getElementById('flushModel') as HTMLSelectElement | null;
-    setSelectOptions(flushModelSel, models, { includeDefault: true });
+    setSelectOptions(flushModelSel, models, { includeDefault: effectiveCli !== 'aside' });
+    if (flushModelSel) { flushModelSel.disabled = effectiveCli === 'aside'; flushModelSel.title = effectiveCli === 'aside' ? 'Aside cannot run memory flush.' : ''; }
     updateFlushBadge();
     saveFlushAgentSettings();
 }
@@ -624,8 +648,9 @@ export async function loadFlushAgentSidebar(): Promise<void> {
     if (flushCliSel && data.cli) flushCliSel.value = data.cli;
 
     const effectiveCli = data.cli || (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
-    const models = MODEL_MAP[effectiveCli] || [];
-    setSelectOptions(flushModelSel, models, { includeDefault: true });
+    const models = effectiveCli === 'aside' ? [] : MODEL_MAP[effectiveCli] || [];
+    setSelectOptions(flushModelSel, models, { includeDefault: effectiveCli !== 'aside' });
+    if (flushModelSel) { flushModelSel.disabled = effectiveCli === 'aside'; flushModelSel.title = effectiveCli === 'aside' ? 'Aside cannot run memory flush.' : ''; }
     if (flushModelSel && data.model) {
         appendCustomOption(flushModelSel, data.model);
         flushModelSel.value = data.model;
@@ -636,6 +661,7 @@ export async function loadFlushAgentSidebar(): Promise<void> {
 async function saveFlushAgentSettings(): Promise<void> {
     const cli = (document.getElementById('flushCli') as HTMLSelectElement)?.value || '';
     const model = (document.getElementById('flushModel') as HTMLSelectElement)?.value || '';
+    if (cli === 'aside' || (!cli && (document.getElementById('selCli') as HTMLSelectElement)?.value === 'aside')) return;
     await apiJson('/api/memory-files/settings', 'PUT', { cli, model });
 }
 

package/public/js/features/settings-types.ts

@@ -3,7 +3,7 @@
 import type { RuntimeTransport } from '../../../src/shared/runtime-contract.js';
 import type { PresentationMode } from '../../../src/shared/presentation.js';
 
-export interface PerCliConfig { provider?: string; model?: string; effort?: string; transport?: RuntimeTransport; fastMode?: boolean; }
+export interface PerCliConfig { account?: string; host?: string; provider?: string; model?: string; effort?: string; transport?: RuntimeTransport; fastMode?: boolean; }
 export interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; mentionOnly?: boolean; }
 export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; mentionOnly?: boolean; }
 // Slack needs TWO distinctly-scoped tokens: the bot token drives the Web API,

package/public/locales/en.json

@@ -273,6 +273,8 @@
   "role.label.security": "Security",
   "role.label.testing": "Testing",
   "role.label.custom": "Custom...",
+  "cli.asideHelp": "Experimental · local main agent only. Scheduled heartbeat runs are unsupported with Aside as the main runtime and will be rejected. Configure the explicit account in Settings / Agent.",
+  "hb.asideUnsupported": "Scheduled heartbeat runs are unsupported with Aside as the main runtime and will be rejected. Choose another main runtime in Agent settings to use heartbeat.",
   "hb.empty": "No heartbeats",
   "hb.name": "Name",
   "hb.prompt": "Prompt...",

package/public/locales/ja.json

@@ -271,6 +271,8 @@
   "role.label.security": "セキュリティ",
   "role.label.testing": "テスト",
   "role.label.custom": "カスタム...",
+  "cli.asideHelp": "実験的機能 · ローカルのメインエージェント専用です。Asideをメインランタイムにすると、定期ハートビート実行はサポートされず拒否されます。設定 / エージェントでアカウントを明示的に指定してください。",
+  "hb.asideUnsupported": "Asideをメインランタイムにすると、定期ハートビート実行はサポートされず拒否されます。ハートビートを使うには、エージェント設定で別のメインランタイムを選択してください。",
   "hb.empty": "heartbeat はありません",
   "hb.name": "名前",
   "hb.prompt": "プロンプト...",

package/public/locales/ko.json

@@ -273,6 +273,8 @@
   "role.label.security": "보안",
   "role.label.testing": "테스트",
   "role.label.custom": "커스텀...",
+  "cli.asideHelp": "실험 기능 · 로컬 메인 에이전트 전용입니다. Aside를 메인 런타임으로 사용하면 예약 하트비트 실행은 지원되지 않으며 거부됩니다. 설정 / 에이전트에서 계정을 명시적으로 지정하세요.",
+  "hb.asideUnsupported": "Aside를 메인 런타임으로 사용하면 예약 하트비트 실행은 지원되지 않으며 거부됩니다. 하트비트를 사용하려면 에이전트 설정에서 다른 메인 런타임을 선택하세요.",
   "hb.empty": "하트비트가 없습니다",
   "hb.name": "이름",
   "hb.prompt": "프롬프트...",

package/public/locales/zh.json

@@ -271,6 +271,8 @@
   "role.label.security": "安全",
   "role.label.testing": "测试",
   "role.label.custom": "自定义...",
+  "cli.asideHelp": "实验性功能 · 仅限本地主要代理。使用 Aside 作为主运行时时，不支持定时心跳运行，运行将被拒绝。请在设置 / 代理中明确指定账户。",
+  "hb.asideUnsupported": "使用 Aside 作为主运行时时，不支持定时心跳运行，运行将被拒绝。要使用心跳，请在代理设置中选择其他主运行时。",
   "hb.empty": "暂无 heartbeat",
   "hb.name": "名称",
   "hb.prompt": "提示...",

package/public/manager/src/settings/SettingsShell.tsx

@@ -80,7 +80,7 @@ export function SettingsShell({ port = null, instanceUrl = null, onDirtyChange,
     const proxyClient = useMemo(() => port === null ? null : createSettingsClient(port), [port]);
     const unavailableClient: SettingsClient = useMemo(() => {
         const reject = async (): Promise<never> => { throw new Error('No selected instance'); };
-        return { get: reject, put: reject, post: reject, delete: reject };
+        return { url: () => { throw new Error('No selected instance'); }, get: reject, put: reject, post: reject, delete: reject };
     }, []);
     const client = suppliedClient ?? proxyClient ?? unavailableClient;
     const available = entriesForScopes(scopes, hasInstance, locale).filter(entry => entry.scope !== 'manager' || manager);

package/public/manager/src/settings/pages/Agent.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { SettingsPageProps, DirtyEntry } from '../types';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { SettingsPageProps, SettingsClient, DirtyEntry } from '../types';
 import {
     CLI_STATUS_POLL_HORIZON_MS,
     planCliStatusPoll,
@@ -9,8 +9,11 @@ import {
     PageLoading,
     PageOffline,
     usePageSnapshot,
+    type SnapshotState,
 } from './page-shell';
 import { parsePermissionsValue, permissionsEditMode } from './Permissions';
+import { AsideSelectionFields } from './components/AsideSelectionFields';
+import { useAsideModels, asideSelectionError, isAsideAccount } from './components/aside-models';
 import { RuntimeHeader } from './components/agent/RuntimeHeader';
 import { PermissionQuickSection } from './components/agent/PermissionQuickSection';
 import { FlushAgentSection } from './components/agent/FlushAgentSection';
@@ -120,6 +123,8 @@ type FlushSnapshot = {
 
 type RuntimeDraft = {
     cli: string;
+    account: string;
+    host: string;
     provider: string;
     model: string;
     effort: string;
@@ -130,10 +135,26 @@ type RuntimeDraft = {
     permissions: unknown;
 };
 
-export default function Agent({ port, client, dirty, registerSave }: SettingsPageProps) {
-    const { state, refresh, setData } = usePageSnapshot<AgentSnapshot>(client, '/api/settings');
+const ownsAgentKey = (key: string) => ['cli', 'workingDir', 'permissions', 'runtimeEmployees', 'flushCli', 'flushModel', 'multiSession.midRunPolicy'].includes(key) || key.startsWith('activeOverrides.') || key.startsWith('perCli.');
+
+export default function Agent({ port, instanceUrl, client, dirty, registerSave }: SettingsPageProps) {
+    const instance = useMemo(() => ({ client, port, instanceUrl, dirty }), [client, port, instanceUrl, dirty]);
+    const activeInstance = useRef<typeof instance | null>(null);
+    const activeOperation = useRef<Promise<void> | null>(null);
+    const metadataGeneration = useRef(0);
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const snapshotClient = useMemo<SettingsClient>(() => ({ ...client,
+        get: async <T,>(path: string, init?: RequestInit) => ({ instance, value: await client.get<AgentSnapshot>(path, init) }) as T,
+    }), [client, instance]);
+    const { state: boundState, refresh, setData: setBoundData } = usePageSnapshot<{ instance: typeof instance; value: AgentSnapshot }>(snapshotClient, '/api/settings');
+    const state: SnapshotState<AgentSnapshot> = boundState.kind === 'ready'
+        ? boundState.data.instance === instance ? { kind: 'ready', data: boundState.data.value } : { kind: 'loading' } : boundState;
+    const setData = useCallback((value: AgentSnapshot) => setBoundData({ instance, value }), [instance, setBoundData]);
     const [draft, setDraft] = useState<RuntimeDraft>({
         cli: '',
+        account: '',
+        host: '',
         provider: '',
         model: '',
         effort: '',
@@ -156,16 +177,37 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
     const [sessionMigrationError, setSessionMigrationError] = useState<string | null>(null);
 
     const loadCliMeta = useCallback(async () => {
+        const generation = ++metadataGeneration.current;
         try {
             const response = await client.get<{ data?: unknown } | Record<string, unknown>>('/api/cli-registry');
+            if (activeInstance.current !== instance || generation !== metadataGeneration.current) return;
             const data = response && typeof response === 'object' && 'data' in response
                 ? (response as { data?: unknown }).data
                 : response;
             setCliMeta(normalizeCliMetaRegistry(data));
         } catch {
-            setCliMeta(null);
+            if (activeInstance.current === instance && generation === metadataGeneration.current) setCliMeta(null);
+        }
+    }, [client, instance]);
+
+    const aside = useAsideModels(client, instanceUrl, port, draft.account);
+    const savedAside = state.kind === 'ready' ? state.data.perCli?.['aside'] : undefined;
+    const asideModel = draft.cli === 'aside' ? draft.model : String(dirty.pending.get('activeOverrides.aside.model')?.value || savedAside?.model || '');
+    const asideEffort = draft.cli === 'aside' ? draft.effort : String(dirty.pending.get('activeOverrides.aside.effort')?.value || savedAside?.effort || '');
+    const asideError = draft.host !== 'local' ? 'Aside requires the local host.' : asideSelectionError(aside.inventory, asideModel, asideEffort);
+    useEffect(() => {
+        for (const [key, entry] of dirty.pending) {
+            if (key.startsWith('perCli.aside.') || key.startsWith('activeOverrides.aside.') || (key === 'cli' && draft.cli === 'aside')) {
+                const valid = !asideError;
+                if (entry.valid !== valid) dirty.set(key, { ...entry, valid });
+            }
         }
-    }, [client]);
+    }, [asideError, dirty, draft.cli]);
+    useLayoutEffect(() => {
+        activeInstance.current = instance; activeOperation.current = null; ++metadataGeneration.current;
+        setSaving(false); setSaveError(null); setCliMeta(null);
+        return () => { activeInstance.current = null; activeOperation.current = null; ++metadataGeneration.current; };
+    }, [instance]);
 
     // Generation ref, same convention as Browser.tsx: clearing a timer does not
     // stop a request that is already in flight, and that response would
@@ -177,45 +219,49 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
     const loadCliStatus = useCallback(async (gen?: number) => {
         try {
             const next = await client.get<Record<string, CliStatusInfo>>('/api/cli-status');
-            if (gen !== undefined && gen !== cliStatusGenRef.current) return;
+            if (activeInstance.current !== instance || (gen !== undefined && gen !== cliStatusGenRef.current)) return;
             cliStatusRef.current = next;
             setCliStatus(next);
         } catch {
-            if (gen !== undefined && gen !== cliStatusGenRef.current) return;
+            if (activeInstance.current !== instance || (gen !== undefined && gen !== cliStatusGenRef.current)) return;
             cliStatusRef.current = {};
             setCliStatus({});
         }
-    }, [client]);
+    }, [client, instance]);
 
     const loadFlush = useCallback(async () => {
         setFlushLoading(true);
         setFlushError(null);
         try {
             const data = await client.get<FlushSnapshot>('/api/memory-files');
+            if (activeInstance.current !== instance) return;
             const next = { cli: data.cli || '', model: data.model || '' };
             setFlushOriginal(next);
             setFlushDraft(next);
         } catch (err: unknown) {
+            if (activeInstance.current !== instance) return;
             setFlushError(err instanceof Error ? err.message : String(err));
         } finally {
-            setFlushLoading(false);
+            if (activeInstance.current === instance) setFlushLoading(false);
         }
-    }, [client]);
+    }, [client, instance]);
 
     const loadEmployees = useCallback(async () => {
         setEmployeeLoading(true);
         setEmployeeError(null);
         try {
             const response = await client.get<RuntimeEmployeesResponse>('/api/employees');
+            if (activeInstance.current !== instance) return;
             const rows = unwrapRuntimeEmployees(response);
             setEmployeeOriginal(rows);
             setEmployeeDraft(rows);
         } catch (err: unknown) {
+            if (activeInstance.current !== instance) return;
             setEmployeeError(err instanceof Error ? err.message : String(err));
         } finally {
-            setEmployeeLoading(false);
+            if (activeInstance.current === instance) setEmployeeLoading(false);
         }
-    }, [client]);
+    }, [client, instance]);
 
     useEffect(() => {
         void loadCliMeta();
@@ -284,6 +330,8 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
         const meta = metaFor(cli, cliMeta);
         setDraft({
             cli,
+            account: state.data.perCli?.['aside']?.account || '',
+            host: state.data.perCli?.['aside']?.host || '',
             provider: state.data.perCli?.[cli]?.provider || meta.defaultProvider || '',
             model: runtimeModelFor(cli, state.data.perCli, state.data.activeOverrides),
             effort: runtimeEffortFor(cli, state.data.perCli, state.data.activeOverrides),
@@ -297,39 +345,50 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
                 : permissions.mode === 'safe' ? 'safe'
                 : 'auto',
         });
-    }, [cliMeta, state]);
+    }, [state.kind === 'ready' ? state.data : null]);
 
-    useEffect(() => {
-        return () => {
-            for (const key of Array.from(dirty.pending.keys())) {
-                if (
-                    key === 'cli' ||
-                    key === 'workingDir' ||
-                    key === 'permissions' ||
-                    key === 'runtimeEmployees' ||
-                    key === 'flushCli' ||
-                    key === 'flushModel' ||
-                    key.startsWith('activeOverrides.')
-                ) {
-                    dirty.remove(key);
-                }
-            }
-        };
-    }, [dirty]);
-
-    const setEntry = useCallback((key: string, entry: DirtyEntry) => dirty.set(key, entry), [dirty]);
-
-    const onSave = useCallback(async () => {
-        const bundle = dirty.saveBundle();
-        if (Object.keys(bundle).length === 0) return;
-        const freshSettings = await saveAgentRuntime({ client, bundle, employeeDraft, employeeOriginal });
-        dirty.clear();
-        if (freshSettings) setData(freshSettings as AgentSnapshot);
-        await refresh();
-        await loadCliMeta();
-        await loadFlush();
-        await loadEmployees();
-    }, [client, dirty, employeeDraft, employeeOriginal, loadCliMeta, loadEmployees, loadFlush, refresh, setData]);
+    useEffect(() => () => {
+        for (const key of Array.from(dirty.pending.keys())) if (ownsAgentKey(key)) dirty.remove(key);
+    }, [dirty, instance]);
+
+    const setEntry = useCallback((key: string, entry: DirtyEntry) => {
+        if (activeInstance.current === instance && !activeOperation.current && ownsAgentKey(key)) dirty.set(key, entry);
+    }, [dirty, instance]);
+
+    const onSave = useCallback((): Promise<void> => {
+        if (activeInstance.current !== instance) return Promise.resolve();
+        if (activeOperation.current) return activeOperation.current;
+        if ([...dirty.pending.keys()].some(key => key.startsWith('perCli.aside.') || key.startsWith('activeOverrides.aside.')) && asideError) return Promise.reject(new Error(asideError));
+        const bundle = Object.fromEntries(Object.entries(dirty.saveBundle()).filter(([key]) => ownsAgentKey(key)));
+        if (!Object.keys(bundle).length) return Promise.resolve();
+        if ((draft.cli === 'aside' || Object.keys(bundle).some(key => key.startsWith('perCli.aside.') || key.startsWith('activeOverrides.aside.'))) && asideError)
+            return Promise.reject(new Error(asideError));
+        if ((Object.hasOwn(bundle, 'flushCli') || Object.hasOwn(bundle, 'flushModel')) && (flushDraft.cli || draft.cli) === 'aside') return Promise.reject(new Error('Aside cannot run memory flush.'));
+        if (Object.hasOwn(bundle, 'perCli.aside.account')) {
+            bundle['activeOverrides.aside.model'] ??= '';
+            bundle['activeOverrides.aside.effort'] ??= '';
+        }
+        const submitted = new Map([...dirty.pending].filter(([key]) => Object.hasOwn(bundle, key)));
+        setSaving(true); setSaveError(null);
+        const operation = Promise.resolve().then(async () => {
+            if (activeInstance.current !== instance) return;
+            const freshSettings = await saveAgentRuntime({ client, bundle, employeeDraft, employeeOriginal });
+            if (activeInstance.current !== instance) return;
+            for (const [key, entry] of submitted) if (dirty.pending.get(key) === entry) dirty.remove(key);
+            if (freshSettings) setData(freshSettings as AgentSnapshot);
+            await refresh();
+            await loadCliMeta();
+            await loadFlush();
+            await loadEmployees();
+        }).catch(error => {
+            if (activeInstance.current === instance) throw error;
+        }).finally(() => {
+            if (activeOperation.current === operation) activeOperation.current = null;
+            if (activeInstance.current === instance) setSaving(false);
+        });
+        activeOperation.current = operation;
+        return operation;
+    }, [client, dirty, draft.cli, flushDraft.cli, asideError, instance, employeeDraft, employeeOriginal, loadCliMeta, loadEmployees, loadFlush, refresh, setData]);
 
     useEffect(() => {
         if (!registerSave) return;
@@ -414,12 +473,12 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
 
     function resetActiveOverrideKeys(): void {
         for (const key of Array.from(dirty.pending.keys())) {
-            if (key.startsWith('activeOverrides.')) dirty.remove(key);
+            if (key.startsWith('activeOverrides.') && !key.startsWith('activeOverrides.aside.')) dirty.remove(key);
         }
     }
 
     function setRuntimeDraft(next: RuntimeDraft): void {
-        setDraft(next);
+        if (activeInstance.current === instance && !activeOperation.current) setDraft(next);
     }
 
     return (
@@ -427,9 +486,11 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
             className="settings-page-form"
             onSubmit={(event) => {
                 event.preventDefault();
-                void onSave();
+                void onSave().catch(error => { if (activeInstance.current === instance) setSaveError(describeError(error)); });
             }}
         >
+            {saveError ? <PageError message={saveError} /> : null}
+            <fieldset disabled={saving} style={{ border: 0, padding: 0, margin: 0, minWidth: 0 }}>
             {settingsData.runtimeDefaultMigration?.state === 'pending' ? (
                 <div className="settings-inline-notice" role="status">
                     <strong>기본 런타임 변경 안내</strong>
@@ -480,6 +541,27 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
             </label>
             <CliProbeNotice status={cliStatus[draft.cli]} exhausted={cliStatusExhausted} />
             <RuntimeHeader
+                asideFields={draft.cli === 'aside' ? <AsideSelectionFields id="agent-aside" account={draft.account} host={draft.host}
+                    model={draft.model} effort={draft.effort} inventory={aside.inventory} disabled={saving} refresh={aside.refresh}
+                    onAccountChange={next => {
+                        if (activeInstance.current !== instance || activeOperation.current) return;
+                        setRuntimeDraft({ ...draft, account: next, host: 'local', model: perCli['aside']?.model || '', effort: perCli['aside']?.effort || '' });
+                        setEntry('perCli.aside.account', { value: next, original: perCli['aside']?.account || '', valid: isAsideAccount(next) });
+                        setEntry('perCli.aside.host', { value: 'local', original: perCli['aside']?.host || '', valid: true });
+                        setEntry('activeOverrides.aside.model', { value: '', original: activeOverrides['aside']?.model || '', valid: true });
+                        setEntry('activeOverrides.aside.effort', { value: '', original: activeOverrides['aside']?.effort || '', valid: true });
+                    }}
+                    onModelChange={next => {
+                        if (activeInstance.current !== instance || activeOperation.current) return;
+                        setRuntimeDraft({ ...draft, model: next });
+                        setEntry('activeOverrides.aside.model', { value: next, original: dirty.pending.has('perCli.aside.account') ? '' : activeOverrides['aside']?.model || '', valid: true });
+                    }}
+                    onEffortChange={next => {
+                        if (activeInstance.current !== instance || activeOperation.current) return;
+                        const effort = next || 'default';
+                        setRuntimeDraft({ ...draft, effort });
+                        setEntry('activeOverrides.aside.effort', { value: effort, original: dirty.pending.has('perCli.aside.account') ? '' : activeOverrides['aside']?.effort || '', valid: true });
+                    }} /> : null}
                 cli={draft.cli}
                 cliOptions={cliOptions}
                 provider={activeProvider}
@@ -496,9 +578,11 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
                     const nextDraft = {
                         ...draft,
                         cli: next,
+                        account: draft.account,
+                        host: draft.host,
                         provider: perCli[next]?.provider || nextMeta.defaultProvider || '',
-                        model: runtimeModelFor(next, perCli, activeOverrides),
-                        effort: runtimeEffortFor(next, perCli, activeOverrides),
+                        model: next === 'aside' && (dirty.pending.has('activeOverrides.aside.model') || dirty.pending.has('perCli.aside.account')) ? String(dirty.pending.get('activeOverrides.aside.model')?.value || perCli['aside']?.model || '') : runtimeModelFor(next, perCli, activeOverrides),
+                        effort: next === 'aside' && (dirty.pending.has('activeOverrides.aside.effort') || dirty.pending.has('perCli.aside.account')) ? String(dirty.pending.get('activeOverrides.aside.effort')?.value || perCli['aside']?.effort || '') : runtimeEffortFor(next, perCli, activeOverrides),
                     };
                     resetActiveOverrideKeys();
                     setRuntimeDraft(nextDraft);
@@ -594,7 +678,7 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
                 onFlushCliChange={(next) => {
                     const model = next ? metaFor(next, cliMeta).models[0] || '' : '';
                     setFlushDraft({ cli: next, model });
-                    setEntry('flushCli', { value: next, original: flushOriginal.cli || '', valid: true });
+                    setEntry('flushCli', { value: next, original: flushOriginal.cli || '', valid: next !== 'aside' && (next !== '' || draft.cli !== 'aside') });
                     setEntry('flushModel', { value: model, original: flushOriginal.model || '', valid: true });
                 }}
                 onFlushModelChange={(next) => {
@@ -605,7 +689,7 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
             <AgentEmployeesSection
                 roster={employeeDraft}
                 original={employeeOriginal}
-                cliOptions={cliOptions}
+                cliOptions={cliOptions.filter(cli => cli !== 'aside')}
                 cliMeta={cliMeta}
                 loading={employeeLoading}
                 error={employeeError}
@@ -622,6 +706,7 @@ export default function Agent({ port, client, dirty, registerSave }: SettingsPag
                     });
                 }}
             />
+            </fieldset>
         </form>
     );
 }

package/public/manager/src/settings/pages/Heartbeat.tsx

@@ -65,6 +65,7 @@ type HeartbeatBlock = {
     target?: string;
 };
 type SettingsSnapshot = {
+    cli?: string;
     heartbeat?: HeartbeatBlock;
     perCli?: Record<string, unknown>;
     [key: string]: unknown;
@@ -178,6 +179,11 @@ export default function Heartbeat({ port, client, dirty, registerSave }: Setting
                 title="Heartbeat"
                 hint="Background prompts the agent runs on a schedule."
             >
+                {settingsSnap.state.data.cli === 'aside' ? (
+                    <div className="settings-inline-notice" role="status">
+                        <p>Scheduled heartbeat runs are unsupported with Aside as the main runtime and will be rejected. Choose another main runtime in Agent settings to use heartbeat.</p>
+                    </div>
+                ) : null}
                 <ToggleField
                     id="hb-enabled"
                     label="Heartbeat enabled"