cli-jaw 2.0.1 → 2.0.2

package/public/js/virtual-scroll.ts

@@ -7,10 +7,9 @@ import {
 } from '@tanstack/virtual-core';
 import { generateId } from './uuid.js';
 import { releaseMermaidNodes } from './render.js';
+import { releaseProcessBlockDetails } from './features/process-block.js';
 
-// Activates at THRESHOLD messages to prevent DOM bloat
-// Activate immediately — tanstack virtualizes DOM so only visible
-// items are rendered, preventing DOM bloat at any message count
+// Activate immediately: tanstack keeps only visible items mounted.
 const THRESHOLD = 1;
 const EST_HEIGHT = 80;
 const OVERSCAN = 5;
@@ -31,6 +30,7 @@ export interface VirtualItem {
     id: string;
     html: string;
     height: number; // used as estimateSize hint; tanstack measures real heights
+    rehydratesProcessDetails?: boolean;
 }
 
 export type LazyRenderCallback = (targets: HTMLElement[]) => void;
@@ -86,8 +86,6 @@ export class VirtualScroll {
     get active(): boolean { return this._active; }
     get count(): number { return this.items.length; }
 
-    // ── Measure gap from CSS ──
-
     private measureGap(): number {
         if (this.itemGap > 0) return this.itemGap;
         const probe = document.createElement('div');
@@ -114,8 +112,6 @@ export class VirtualScroll {
         this.renderItems();
     }
 
-    // ── Public API (preserved for callers) ──
-
     /** Bulk-load items. Call AFTER registering onLazyRender/onPostRender. */
     setItems(
         items: VirtualItem[],
@@ -128,9 +124,7 @@ export class VirtualScroll {
         }
     }
 
-    /** Seed heights into items so estimateSize returns accurate values.
-     *  tanstack will re-measure via ResizeObserver on mount, but seeding
-     *  gives accurate initial getTotalSize() for scrollToIndex precision. */
+    /** Seed heights so estimateSize is accurate before ResizeObserver runs. */
     seedMeasuredHeights(startIndex: number, heights: number[]): void {
         for (let offset = 0; offset < heights.length; offset++) {
             const idx = startIndex + offset;
@@ -148,7 +142,10 @@ export class VirtualScroll {
     }
 
     addItem(id: string, html: string): void {
-        const item: VirtualItem = { id, html, height: EST_HEIGHT };
+        this.appendItem({ id, html, height: EST_HEIGHT });
+    }
+
+    appendItem(item: VirtualItem): void {
         this.items.push(item);
         if (!this._active && this.items.length >= THRESHOLD) {
             this.activate(true);
@@ -409,14 +406,15 @@ export class VirtualScroll {
         }
         this.virtualizer = null;
         this._active = false;
-        for (const el of this.mounted.values()) releaseMermaidNodes(el);
+        for (const el of this.mounted.values()) {
+            releaseMermaidNodes(el);
+            releaseProcessBlockDetails(el);
+        }
         this.mounted.clear();
         this.container.classList.remove('vs-active');
         this.container.innerHTML = '';
     }
 
-    // ── Render loop (called by tanstack onChange) ──
-
     private renderItems(): void {
         if (!this.virtualizer) return;
         this.virtualizer._willUpdate();
@@ -424,50 +422,42 @@ export class VirtualScroll {
         const virtualItems = this.virtualizer.getVirtualItems();
         const totalSize = this.virtualizer.getTotalSize();
 
-        // Update inner container height (provides scrollbar range)
         this.innerEl.style.height = `${totalSize}px`;
 
-        // Determine which indices tanstack wants rendered
         const wantedSet = new Set(virtualItems.map(vi => vi.index));
 
-        // Remove items no longer in range
         for (const [idx, el] of this.mounted) {
             if (!wantedSet.has(idx)) {
                 releaseMermaidNodes(el);
+                const item = this.items[idx];
+                if (item?.rehydratesProcessDetails) releaseProcessBlockDetails(el);
                 el.remove();
                 this.mounted.delete(idx);
             }
         }
 
-        // Mount / reposition items
         const newlyMounted: HTMLElement[] = [];
         for (const vItem of virtualItems) {
             let el = this.mounted.get(vItem.index);
 
             if (!el) {
-                // Create new element from stored HTML
                 const item = this.items[vItem.index];
                 if (!item) continue;
                 const wrapper = document.createElement('div');
                 wrapper.innerHTML = item.html;
                 el = wrapper.firstElementChild as HTMLElement;
                 if (!el) continue;
-                el.dataset.vsIdx = String(vItem.index);
+                el.dataset['vsIdx'] = String(vItem.index);
                 this.innerEl.appendChild(el);
                 this.mounted.set(vItem.index, el);
                 newlyMounted.push(el);
             }
 
-            // Position via transform only — left/right/width handled by CSS
-            // so .msg-user align-self / left:auto works correctly
+            // CSS owns left/right/width, including .msg-user alignment.
             el.style.transform = `translateY(${vItem.start}px)`;
         }
 
-        // Lazy render BEFORE measuring — onLazyRender processes markdown,
-        // code blocks, math which dramatically changes element heights.
-        // Measuring first would record pre-render heights (e.g. 50px),
-        // then lazy render expands to 300px+, causing overlap until the
-        // deferred ResizeObserver catches up (1+ frames later).
+        // Lazy render before measuring; markdown/code/math change heights.
         if (this.onLazyRender) {
             const lazyTargets = this.innerEl.querySelectorAll<HTMLElement>('.lazy-pending');
             if (lazyTargets.length > 0) {
@@ -475,23 +465,19 @@ export class VirtualScroll {
             }
         }
 
-        // Post render: activate widgets, linkify paths
         if (this.onPostRender) {
             this.onPostRender(this.innerEl);
         }
 
-        // Now measure real heights — elements have their final rendered content.
-        // Only for newly mounted elements (already-observed ones are tracked).
+        // Newly mounted elements now have their final rendered content.
         for (const el of newlyMounted) {
-            const index = Number(el.dataset.vsIdx || '-1');
+            const index = Number(el.dataset['vsIdx'] || '-1');
             syncMeasuredItemHeight(this.items, index, el);
             this.virtualizer!.measureElement(el);
         }
     }
 }
 
-// ── Singleton ──
-
 let instance: VirtualScroll | null = null;
 
 export function getVirtualScroll(): VirtualScroll {

package/public/js/ws.ts

@@ -55,12 +55,18 @@ interface WsMessage {
     subtasks?: { agent?: string; name?: string }[];
     action?: string;
     icon?: string;
+    rawIcon?: string;
     label?: string;
     toolType?: string;
     detail?: string;
     stepRef?: string;
+    traceRunId?: string;
+    traceSeq?: number;
+    detailAvailable?: boolean;
+    detailBytes?: number;
+    rawRetentionStatus?: string;
     text?: string;
-    toolLog?: { icon: string; label: string; detail?: string; toolType?: string; stepRef?: string }[];
+    toolLog?: { icon: string; label: string; detail?: string; toolType?: string; stepRef?: string; traceRunId?: string; traceSeq?: number; detailAvailable?: boolean; detailBytes?: number; rawRetentionStatus?: string }[];
     from?: string;
     to?: string;
     source?: string;
@@ -263,8 +269,8 @@ function applyOrcState(orcState: string, title?: string) {
     const brand = document.getElementById('pabcBrand');
 
     if (roadmap && shark) {
-        if (!roadmap.dataset.resizeObserved) {
-            roadmap.dataset.resizeObserved = '1';
+        if (!roadmap.dataset['resizeObserved']) {
+            roadmap.dataset['resizeObserved'] = '1';
             new ResizeObserver(() => {
                 if (currentSharkPhase && shark.classList.contains('running')) {
                     positionShark(roadmap, shark, currentSharkPhase);
@@ -379,10 +385,15 @@ export function connect(): void {
                 id: `step-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
                 type: stepType,
                 icon: msg.icon || ICONS.tool,
-                rawIcon: (msg as any).rawIcon || msg.icon || '',
+                rawIcon: msg.rawIcon || msg.icon || '',
                 label: empPrefix + (msg.label || ''),
                 detail: msg.detail || '',
                 stepRef: msg.stepRef || '',
+                traceRunId: msg.traceRunId || '',
+                traceSeq: msg.traceSeq,
+                detailAvailable: msg.detailAvailable,
+                detailBytes: msg.detailBytes,
+                rawRetentionStatus: msg.rawRetentionStatus,
                 status: (msg.status as 'running' | 'done' | 'error') || 'running',
                 startTime: Date.now(),
             });
@@ -413,14 +424,15 @@ export function connect(): void {
         } else if (msg.type === 'agent_added' || msg.type === 'agent_updated' || msg.type === 'agent_deleted') {
             import('./features/employees.js').then(m => m.loadEmployees());
         } else if (msg.type === 'heartbeat_pending') {
-            applyHeartbeatRuntime({
+            const heartbeatRuntimePatch: Partial<HeartbeatRuntimeState> = {
                 pending: msg.pending || 0,
                 deferredPending: msg.deferredPending || 0,
-                reason: msg.reason,
-                policy: msg.policy,
-                jobId: msg.jobId,
-                jobName: msg.jobName,
-            });
+            };
+            if (msg.reason !== undefined) heartbeatRuntimePatch.reason = msg.reason;
+            if (msg.policy !== undefined) heartbeatRuntimePatch.policy = msg.policy;
+            if (msg.jobId !== undefined) heartbeatRuntimePatch.jobId = msg.jobId;
+            if (msg.jobName !== undefined) heartbeatRuntimePatch.jobName = msg.jobName;
+            applyHeartbeatRuntime(heartbeatRuntimePatch);
         } else if (msg.type === 'orc_state') {
             if (!shouldApplyOrcStateEvent(msg.scope, currentOrcScope)) return;
             applyOrcState(typeof msg.state === 'string' ? msg.state : 'IDLE', msg.title);

package/public/manager/src/App.tsx

@@ -26,6 +26,11 @@ import { summarizeActivityTitleSupport } from './dashboard-settings/activity-tit
 import { dashboardSettingsUiFromView } from './dashboard-settings/dashboard-settings-ui';
 import { NotesSidebar } from './notes/NotesSidebar';
 import { NotesWorkspace } from './notes/NotesWorkspace';
+import { useNotesModel } from './notes/useNotesModel';
+import { publishInvalidation } from './sync/invalidation-bus';
+import { useInvalidationSubscription } from './sync/useInvalidationSubscription';
+import { IframeBridge } from './sync/IframeBridge';
+import { VisibilityBridge } from './sync/VisibilityBridge';
 import { DashboardBoardSidebar } from './dashboard-board/DashboardBoardSidebar';
 import { DashboardBoardWorkspace } from './dashboard-board/DashboardBoardWorkspace';
 import type { BoardView } from './dashboard-board/board-view';
@@ -198,6 +203,8 @@ export function App() {
         } : current);
     }
 
+    useInvalidationSubscription('instances', () => void load(), 'app');
+
     useEffect(() => {
         async function initialize(): Promise<void> {
             try {
@@ -233,7 +240,7 @@ export function App() {
     }, []);
 
     async function saveUi(ui: Parameters<typeof registry.save>[0]['ui']): Promise<void> {
-        if (!hydrated) return;
+        if (!hydrated || ui === undefined) return;
         await registry.save({ ui });
     }
 
@@ -245,7 +252,7 @@ export function App() {
     }, [instances]);
     const summary = useMemo(() => {
         return instances.reduce((acc, instance) => {
-            acc.total += 1;
+            acc['total'] += 1;
             acc[instance.status] = (acc[instance.status] || 0) + 1;
             return acc;
         }, { total: 0 } as Record<string, number>);
@@ -287,6 +294,10 @@ export function App() {
     function handleTabChange(tab: DashboardDetailTab): void {
         if (tab !== 'settings' && !canLeaveDirtySettings()) return;
         if (tab !== 'settings') setSettingsDirty(false);
+        if (view.activeDetailTab === 'preview' && tab !== 'preview') {
+            const port = view.selectedPort;
+            if (port != null) activityUnread.markPortSeen(port);
+        }
         view.setActiveDetailTab(tab);
         if (tab === 'preview') {
             const port = view.selectedPort;
@@ -318,6 +329,10 @@ export function App() {
     }
 
     function handleSidebarModeChange(mode: DashboardSidebarMode): void {
+        if (view.sidebarMode === 'instances' && mode !== 'instances' && view.activeDetailTab === 'preview') {
+            const port = view.selectedPort;
+            if (port != null) activityUnread.markPortSeen(port);
+        }
         const sidebarMode = normalizeSidebarModeForBuild(mode);
         view.setSidebarMode(sidebarMode); void saveUi({ sidebarMode });
     }
@@ -342,6 +357,12 @@ export function App() {
         view.setNotesTreeWidth(value); void saveUi({ notesTreeWidth: value });
     }
 
+    const notesModel = useNotesModel({
+        active: view.sidebarMode === 'notes',
+        selectedPath: view.notesSelectedPath,
+        onSelectedPathChange: handleNotesSelectedPathChange,
+    });
+
     function handleDashboardSettingsPatch(ui: NonNullable<Parameters<typeof saveUi>[0]>): void {
         if (ui.showLatestActivityTitles !== undefined) view.setShowLatestActivityTitles(ui.showLatestActivityTitles);
         if (ui.showInlineLabelEditor !== undefined) view.setShowInlineLabelEditor(ui.showInlineLabelEditor);
@@ -387,6 +408,7 @@ export function App() {
                 setLifecycleMessage(`${result.message} (not yet reachable, refresh manually if needed)`);
             }
             await load();
+            publishInvalidation({ topics: ['instances'], reason: 'instance:lifecycle', source: 'ui', sourceId: 'app' });
             view.setSelectedPort(instance.port);
         } catch (err) {
             setLifecycleMessage((err as Error).message);
@@ -452,15 +474,21 @@ export function App() {
             onSettingsDirtyChange={setSettingsDirty}
             onSettingsSaved={() => {
                 if (selectedInstance) void refreshInstance(selectedInstance.port);
+                publishInvalidation({ topics: ['instances'], reason: 'instance:settings-saved', source: 'ui', sourceId: 'app' });
             }}
             onRegistryPatch={(port, patch) => {
-                void registry.save({ instances: { [String(port)]: patch } }).then(() => load());
+                void registry.save({ instances: { [String(port)]: patch } }).then(() => {
+                    load();
+                    publishInvalidation({ topics: ['instances'], reason: 'instance:registry-patched', source: 'ui', sourceId: 'app' });
+                });
             }}
         />
     );
 
     return (
         <>
+            <IframeBridge />
+            <VisibilityBridge />
             <ManagerShell
                 sidebarCollapsed={view.sidebarCollapsed}
                 commandBar={(
@@ -484,12 +512,12 @@ export function App() {
                         onCloseDrawer={() => view.setDrawerOpen(false)}
                         navigator={(
                             <>
-                                <SidebarRail onlineCount={summary.online || 0} collapsed={view.sidebarCollapsed} mode={view.sidebarMode} scheduleWorkspaceEnabled={SCHEDULE_WORKSPACE_ENABLED} onModeChange={handleSidebarModeChange} onToggleSidebar={handleSidebarToggle} helpOpen={helpOpen} onToggleHelp={() => setHelpOpen(open => !open)} />
+                                <SidebarRail onlineCount={summary['online'] || 0} collapsed={view.sidebarCollapsed} mode={view.sidebarMode} scheduleWorkspaceEnabled={SCHEDULE_WORKSPACE_ENABLED} onModeChange={handleSidebarModeChange} onToggleSidebar={handleSidebarToggle} helpOpen={helpOpen} onToggleHelp={() => setHelpOpen(open => !open)} />
                                 <div id="manager-sidebar-list" className="manager-sidebar-list">
                                     {view.sidebarMode === 'settings' ? (
                                         <DashboardSettingsSidebar activeSection={dashboardSettingsSection} locale={view.locale} onSectionChange={setDashboardSettingsSection} />
                                     ) : view.sidebarMode === 'notes' ? (
-                                        <NotesSidebar selectedPath={view.notesSelectedPath} dirtyPath={notesDirtyPath} treeWidth={view.notesTreeWidth} onSelectedPathChange={handleNotesSelectedPathChange} />
+                                        <NotesSidebar tree={notesModel.tree} loading={notesModel.loading} error={notesModel.error} notesRoot={notesModel.notesRoot} selectedPath={view.notesSelectedPath} dirtyPath={notesDirtyPath} treeWidth={view.notesTreeWidth} onSelectedPathChange={handleNotesSelectedPathChange} onRefreshTree={notesModel.refresh} />
                                     ) : view.sidebarMode === 'board' ? (
                                         <DashboardBoardSidebar view={boardView} onViewChange={setBoardView} instances={instances} titlesByPort={messageActivity.titlesByPort} busyPorts={messageActivity.busyPorts} />
                                     ) : SCHEDULE_WORKSPACE_ENABLED && view.sidebarMode === 'schedule' ? (
@@ -524,7 +552,7 @@ export function App() {
                                         )} logs={detailContent('logs')} settings={detailContent('settings')} />
                                     </WorkspaceSurface>
                                     <WorkspaceSurface active={view.sidebarMode === 'notes'}>
-                                        <NotesWorkspace active={view.sidebarMode === 'notes'} selectedPath={view.notesSelectedPath} viewMode={view.notesViewMode} authoringMode={view.notesAuthoringMode} wordWrap={view.notesWordWrap} treeWidth={view.notesTreeWidth} onSelectedPathChange={handleNotesSelectedPathChange} onDirtyPathChange={setNotesDirtyPath} onViewModeChange={handleNotesViewModeChange} onAuthoringModeChange={handleNotesAuthoringModeChange} onWordWrapChange={handleNotesWordWrapChange} onTreeWidthChange={handleNotesTreeWidthChange} />
+                                        <NotesWorkspace active={view.sidebarMode === 'notes'} selectedPath={view.notesSelectedPath} vaultIndex={notesModel.index} viewMode={view.notesViewMode} authoringMode={view.notesAuthoringMode} wordWrap={view.notesWordWrap} treeWidth={view.notesTreeWidth} onSelectedPathChange={handleNotesSelectedPathChange} onDirtyPathChange={setNotesDirtyPath} onViewModeChange={handleNotesViewModeChange} onAuthoringModeChange={handleNotesAuthoringModeChange} onWordWrapChange={handleNotesWordWrapChange} onTreeWidthChange={handleNotesTreeWidthChange} />
                                     </WorkspaceSurface>
                                     <WorkspaceSurface active={view.sidebarMode === 'settings'}>
                                         <DashboardSettingsWorkspace activeSection={dashboardSettingsSection} ui={dashboardSettingsUi} titleSupport={titleSupport} onUiPatch={handleDashboardSettingsPatch} />

package/public/manager/src/api.ts

@@ -2,7 +2,9 @@ import type {
     DashboardInstance,
     DashboardLifecycleAction,
     DashboardLifecycleResult,
+    DashboardNoteAssetResponse,
     DashboardNoteFileResponse,
+    DashboardNotesCapabilities,
     DashboardNoteTreeEntry,
     DashboardPutNoteRequest,
     DashboardProcessControlState,
@@ -14,6 +16,7 @@ import type {
     HealthEvent,
     InstanceLogSnapshot,
     ManagerEvent,
+    VaultIndexSnapshot,
 } from './types';
 
 export class DashboardApiError extends Error {
@@ -90,7 +93,9 @@ export async function stopManagedProcesses(): Promise<DashboardProcessControlSta
 }
 
 export async function fetchInstanceStatus(port: number, options: { signal?: AbortSignal } = {}): Promise<DashboardInstance | null> {
-    const response = await fetch(`/api/dashboard/instances/${port}`, { signal: options.signal });
+    const init: RequestInit = {};
+    if (options.signal !== undefined) init.signal = options.signal;
+    const response = await fetch(`/api/dashboard/instances/${port}`, init);
     if (!response.ok) throw new Error(`status fetch failed: ${response.status}`);
     const body = await response.json() as { ok: boolean; instance: DashboardInstance | null };
     return body.instance;
@@ -146,11 +151,27 @@ export async function fetchNotesInfo(): Promise<{ root: string }> {
     return await parseNotesResponse<{ root: string }>(response, `notes info fetch failed: ${response.status}`);
 }
 
+export async function fetchNotesVersion(): Promise<number> {
+    const response = await fetch('/api/dashboard/notes/version');
+    const body = await parseNotesResponse<{ version: number }>(response, `notes version fetch failed: ${response.status}`);
+    return body.version;
+}
+
 export async function fetchNotesTree(): Promise<DashboardNoteTreeEntry[]> {
     const response = await fetch('/api/dashboard/notes/tree');
     return await parseNotesResponse<DashboardNoteTreeEntry[]>(response, `notes tree fetch failed: ${response.status}`);
 }
 
+export async function fetchNotesIndex(): Promise<VaultIndexSnapshot> {
+    const response = await fetch('/api/dashboard/notes/index');
+    return await parseNotesResponse<VaultIndexSnapshot>(response, `notes index fetch failed: ${response.status}`);
+}
+
+export async function fetchNotesCapabilities(): Promise<DashboardNotesCapabilities> {
+    const response = await fetch('/api/dashboard/notes/capabilities');
+    return await parseNotesResponse<DashboardNotesCapabilities>(response, `notes capabilities fetch failed: ${response.status}`);
+}
+
 export async function fetchNoteFile(path: string): Promise<DashboardNoteFileResponse> {
     const response = await fetch(`/api/dashboard/notes/file?path=${encodeURIComponent(path)}`);
     return await parseNotesResponse<DashboardNoteFileResponse>(response, `note fetch failed: ${response.status}`);
@@ -174,6 +195,39 @@ export async function saveNoteFile(request: DashboardPutNoteRequest): Promise<Da
     return await parseNotesResponse<DashboardNoteFileResponse>(response, `note save failed: ${response.status}`);
 }
 
+function bytesToBase64(bytes: Uint8Array): string {
+    let binary = '';
+    const chunkSize = 0x8000;
+    for (let index = 0; index < bytes.length; index += chunkSize) {
+        const chunk = bytes.subarray(index, index + chunkSize);
+        binary += String.fromCharCode(...chunk);
+    }
+    return btoa(binary);
+}
+
+export async function uploadNoteAsset(notePath: string, file: File): Promise<DashboardNoteAssetResponse> {
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    const response = await fetch('/api/dashboard/notes/asset', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+            notePath,
+            mime: file.type,
+            dataBase64: bytesToBase64(bytes),
+        }),
+    });
+    return await parseNotesResponse<DashboardNoteAssetResponse>(response, `note asset upload failed: ${response.status}`);
+}
+
+export async function uploadRemoteNoteAsset(notePath: string, url: string): Promise<DashboardNoteAssetResponse> {
+    const response = await fetch('/api/dashboard/notes/asset/remote', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ notePath, url }),
+    });
+    return await parseNotesResponse<DashboardNoteAssetResponse>(response, `remote note asset upload failed: ${response.status}`);
+}
+
 export async function createNoteFolder(path: string): Promise<{ path: string }> {
     const response = await fetch('/api/dashboard/notes/folder', {
         method: 'POST',

package/public/manager/src/components/ActivityTimeline.tsx

@@ -58,7 +58,7 @@ const FIVE_MINUTES_MS = 5 * 60 * 1000;
 
 function normalize(entry: ActivityEntry | ManagerEvent | string, fallbackAt: string): ActivityEntry {
     if (typeof entry === 'string') {
-        return { at: fallbackAt, source: undefined, message: entry };
+        return { at: fallbackAt, message: entry };
     }
     if ('kind' in entry) {
         return eventToEntry(entry);

package/public/manager/src/components/InstanceDetailPanel.tsx

@@ -47,8 +47,8 @@ export function InstanceDetailPanel(props: InstanceDetailPanelProps) {
                         key={instance.port}
                         port={instance.port}
                         instanceUrl={`http://localhost:${instance.port}`}
-                        onDirtyChange={props.onSettingsDirtyChange}
-                        onSaved={props.onSettingsSaved}
+                        {...(props.onSettingsDirtyChange !== undefined ? { onDirtyChange: props.onSettingsDirtyChange } : {})}
+                        {...(props.onSettingsSaved !== undefined ? { onSaved: props.onSettingsSaved } : {})}
                     />
                 )}
 

package/public/manager/src/components/InstanceGroups.tsx

@@ -79,17 +79,17 @@ function renderInstanceRow(
         <InstanceRow
             key={instance.port}
             instance={instance}
-            profile={profile}
+            {...(profile !== undefined ? { profile } : {})}
             selected={props.selectedPort === instance.port}
             busy={props.lifecycleBusyPort === instance.port}
             transitioning={props.transitioningPort === instance.port ? props.transitionAction || null : null}
             activityUnreadCount={props.activityUnreadByPort?.[instance.port] || 0}
             latestActivityTitle={props.latestTitleByPort?.[instance.port] || null}
             agentBusy={props.busyPorts?.has(instance.port) || false}
-            showLatestActivityTitle={props.showLatestActivityTitles}
-            showInlineLabelEditor={props.showInlineLabelEditor}
-            showRuntimeLine={props.showSidebarRuntimeLine}
-            showSelectedActions={props.showSelectedRowActions}
+            {...(props.showLatestActivityTitles !== undefined ? { showLatestActivityTitle: props.showLatestActivityTitles } : {})}
+            {...(props.showInlineLabelEditor !== undefined ? { showInlineLabelEditor: props.showInlineLabelEditor } : {})}
+            {...(props.showSidebarRuntimeLine !== undefined ? { showRuntimeLine: props.showSidebarRuntimeLine } : {})}
+            {...(props.showSelectedRowActions !== undefined ? { showSelectedActions: props.showSelectedRowActions } : {})}
             label={props.getLabel(instance)}
             uptime={props.formatUptime(instance.uptime)}
             onSelect={props.onSelect}

package/public/manager/src/components/InstanceListContent.tsx

@@ -60,7 +60,7 @@ export function InstanceListContent(props: InstanceListContentProps) {
                     transitionAction={props.transitionAction}
                     activityUnreadByPort={props.activityUnreadByPort}
                     latestTitleByPort={props.latestTitleByPort}
-                    busyPorts={props.busyPorts}
+                    {...(props.busyPorts !== undefined ? { busyPorts: props.busyPorts } : {})}
                     showLatestActivityTitles={props.showLatestActivityTitles}
                     showInlineLabelEditor={props.showInlineLabelEditor}
                     showSidebarRuntimeLine={props.showSidebarRuntimeLine}

package/public/manager/src/dashboard-features.ts

@@ -3,7 +3,7 @@ import type { DashboardSidebarMode } from './types';
 export const NPM_HIDDEN_WORKSPACE_MODES = new Set<DashboardSidebarMode>(['schedule']);
 
 export const SCHEDULE_WORKSPACE_ENABLED =
-    import.meta.env.DEV || import.meta.env.VITE_CLI_JAW_EXPERIMENTAL_DASHBOARD === '1';
+    import.meta.env.DEV || import.meta.env['VITE_CLI_JAW_EXPERIMENTAL_DASHBOARD'] === '1';
 
 export function isNpmHiddenWorkspaceMode(mode: DashboardSidebarMode): boolean {
     return NPM_HIDDEN_WORKSPACE_MODES.has(mode);

package/public/manager/src/manager-notes.css

@@ -313,10 +313,34 @@
     min-height: 0;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    grid-auto-rows: minmax(0, 1fr);
+    grid-template-rows: max-content minmax(0, 1fr);
     overflow: hidden;
 }
 
+.notes-inline-title {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px 28px 4px;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.3;
+    font-family: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.notes-inline-title:focus {
+    background: var(--canvas-panel);
+}
+
 .notes-mode-raw .notes-document-grid,
 .notes-mode-preview .notes-document-grid {
     grid-template-columns: minmax(0, 1fr);
@@ -329,8 +353,15 @@
     overflow: auto;
 }
 
-.notes-editor,
 .notes-preview {
+    grid-row: 2;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: auto;
+}
+
+.notes-editor {
     min-width: 0;
     min-height: 0;
     height: 100%;
@@ -338,6 +369,7 @@
 }
 
 .notes-editor-pane {
+    grid-row: 2;
     min-width: 0;
     min-height: 0;
     height: 100%;
@@ -437,6 +469,18 @@
     background: var(--danger-soft, var(--canvas-panel));
 }
 
+.notes-wysiwyg-upload-status {
+    padding: 4px 12px;
+    font-size: 13px;
+    color: var(--text-secondary, #888);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.notes-wysiwyg-upload-status[data-status="error"] {
+    color: var(--danger-strong, var(--text-primary));
+    background: var(--danger-soft, var(--canvas-panel));
+}
+
 .notes-milkdown-root .ProseMirror {
     min-height: 100%;
     padding: 24px 28px 160px;
@@ -832,9 +876,12 @@
     vertical-align: top;
 }
 
+.notes-preview img,
 .notes-milkdown-root .ProseMirror img {
+    display: block;
     max-width: 100%;
     height: auto;
+    border-radius: 6px;
 }
 
 .notes-milkdown-root .ProseMirror hr {

package/public/manager/src/notes/MarkdownEditor.tsx

@@ -22,6 +22,7 @@ type MarkdownEditorProps = {
     active: boolean;
     authoringMode: NotesAuthoringMode;
     content: string;
+    notePath: string;
     wordWrap: boolean;
     onChange: (value: string) => void;
 };
@@ -53,7 +54,10 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
             notesEditorTheme,
             notesSyntaxHighlighting,
             markdown({ codeLanguages: languages }),
-            richMarkdownPastePolicy(),
+            richMarkdownPastePolicy({
+                notePath: props.notePath,
+                onError: error => console.warn('[notes-image-paste]', error),
+            }),
             richMarkdownExtension({
                 enabled: props.authoringMode === 'rich' || props.authoringMode === 'wysiwyg',
                 active: props.active,
@@ -64,13 +68,13 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
         ];
         if (props.wordWrap) base.push(EditorView.lineWrapping);
         return base;
-    }, [props.active, props.authoringMode, props.wordWrap, registerWidget, requestMeasure, unregisterWidget]);
+    }, [props.active, props.authoringMode, props.notePath, props.wordWrap, registerWidget, requestMeasure, unregisterWidget]);
 
     if (isWysiwyg) {
         return (
             <div className="notes-editor notes-wysiwyg-editor">
                 <Suspense fallback={<div className="notes-wysiwyg-loading">Loading WYSIWYG editor...</div>}>
-                    <MilkdownWysiwygEditor active={props.active} content={props.content} onChange={props.onChange} />
+                    <MilkdownWysiwygEditor active={props.active} content={props.content} notePath={props.notePath} onChange={props.onChange} />
                 </Suspense>
             </div>
         );