cli-jaw 2.0.6 → 2.0.13

package/public/index.html

@@ -270,6 +270,7 @@
                     <option value="ai-e">AI-E</option>
                     <option value="claude">Claude</option>
                     <option value="claude-e">Claude E</option>
+                    <option value="agy">Antigravity</option>
                     <option value="codex">Codex</option>
                     <option value="codex-app">Codex App</option>
                     <option value="gemini">Gemini</option>
@@ -341,6 +342,7 @@
                             <option value="ai-e">AI-E</option>
                             <option value="claude">Claude</option>
                             <option value="claude-e">Claude E</option>
+                            <option value="agy">Antigravity</option>
                             <option value="codex">Codex</option>
                             <option value="codex-app">Codex App</option>
                             <option value="gemini">Gemini</option>
@@ -578,6 +580,22 @@
                 </div>
             </div>
 
+            <div class="settings-group">
+                <h4><span data-provider="agy"></span> Antigravity</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelAgy"></select>
+                    <input type="text" id="customModelAgy" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Effort</label>
+                    <select id="effortAgy">
+                        <option value="" selected>— none</option>
+                    </select>
+                </div>
+            </div>
+
             <div class="settings-group">
                 <h4><span data-provider="codex"></span> Codex</h4>
                 <div class="settings-row">

package/public/js/constants.ts

@@ -10,11 +10,19 @@ export interface CliEntry {
     modelsByProvider?: Record<string, string[]>;
     effortsByProvider?: Record<string, string[]>;
     effortNote?: string;
+    modelNote?: string;
 }
 
 export type CliRegistry = Record<string, CliEntry>;
 
 const FALLBACK_CLI_REGISTRY: CliRegistry = {
+    agy: {
+        label: 'Antigravity',
+        efforts: [],
+        effortNote: 'Change at TUI',
+        modelNote: 'Change at TUI',
+        models: [],
+    },
     'ai-e': {
         label: 'AI-E',
         defaultProvider: 'claude',
@@ -152,6 +160,9 @@ function normalizeRegistry(input: Record<string, unknown>): CliRegistry {
         if (typeof v['effortNote'] === 'string' && v['effortNote'].trim()) {
             normalized['effortNote'] = v['effortNote'];
         }
+        if (typeof v['modelNote'] === 'string' && v['modelNote'].trim()) {
+            normalized['modelNote'] = v['modelNote'];
+        }
         if (typeof v['defaultProvider'] === 'string') normalized.defaultProvider = v['defaultProvider'];
         if (Array.isArray(v['providers'])) normalized.providers = [...v['providers']] as string[];
         if (v['modelsByProvider'] && typeof v['modelsByProvider'] === 'object') {
@@ -205,7 +216,7 @@ export function getCliMeta(cli: string): CliEntry | null {
     return CLI_REGISTRY[cli] || null;
 }
 
-export const PRIMARY_CLIS: readonly string[] = ['claude', 'codex', 'gemini'];
+export const PRIMARY_CLIS: readonly string[] = ['claude', 'claude-e', 'agy', 'codex', 'gemini'];
 
 export interface RolePreset {
     value: string;

package/public/js/features/settings-cli-status.ts

@@ -10,6 +10,11 @@ import type { QuotaEntry } from './settings-types.js';
 const CLI_STATUS_INTERVAL_VALUES = new Set([0, 600, 1800]);
 const DEFAULT_CLI_STATUS_INTERVAL_SEC = 0;
 
+const QUOTA_HIDDEN_CLIS = new Set(['ai-e', 'codex-app']);
+const QUOTA_CUSTOM_MSG: Record<string, string> = {
+    claude: 'Currently subscribed, by June with credit',
+};
+
 let cliStatusTimer: number | null = null;
 
 const CLI_STATUS_COLLAPSED_KEY = 'cliStatusCollapsed';
@@ -118,6 +123,14 @@ export function normalizeQuotaWindowLabel(cliName: string, label: string): strin
         .replace(' Opus', '');
 }
 
+function describeStatusOnlyQuota(cliName: string, q: QuotaEntry): string {
+    if (q.delegatedProvider) return `Delegates quota/status to ${q.delegatedProvider}`;
+    const match = q.quotaSource?.match(/^not-exposed-by-(.*?)-cli$/);
+    if (match) return `Quota not exposed by ${match[1].toUpperCase()} CLI`;
+    if (q.quotaSource) return q.quotaSource;
+    return cliName === 'opencode' ? 'Auth/status only' : 'Usage data not exposed by this CLI';
+}
+
 export async function loadCliStatus(force = false): Promise<void> {
     if (!cliStatusExpanded && !force) return;
 
@@ -145,13 +158,14 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     const el = document.getElementById('cliStatusList');
 
     const AUTH_HINTS: Record<string, { install: string; auth: string }> = {
+        agy: { install: 'curl -fsSL https://antigravity.google/cli/install.sh | bash', auth: 'agy auth is checked by the CLI at run time' },
         'ai-e': { install: 'Install AI-E helper', auth: 'delegates to selected AI-E provider' },
         claude: { install: 'npm i -g @anthropic-ai/claude-code', auth: 'claude auth' },
         'claude-e': { install: 'Install claude-e helper', auth: 'claude auth' },
         codex: { install: 'npm i -g @openai/codex', auth: 'codex login' },
         'codex-app': { install: 'npm i -g @openai/codex', auth: 'codex login' },
         gemini: { install: 'npm i -g @google/gemini-cli', auth: `gemini  (${t('cli.gemini.auth')})` },
-        grok: { install: 'Install Grok CLI', auth: 'grok login --oauth' },
+        grok: { install: 'curl -fsSL https://x.ai/cli/install.sh | bash', auth: 'grok login --oauth' },
         opencode: { install: 'npm i -g opencode-ai', auth: 'opencode auth' },
         copilot: { install: 'npm i -g copilot', auth: t('cli.copilot.authHint') },
     };
@@ -204,7 +218,16 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         }
 
         let windowsHtml = '';
-        if (name === 'grok' && q?.quotaCapable === false && q.authenticated !== false && info.available) {
+        const customQuotaMsg = QUOTA_CUSTOM_MSG[name];
+        if (QUOTA_HIDDEN_CLIS.has(name)) {
+            // no quota display for this CLI
+        } else if (customQuotaMsg && info.available) {
+            windowsHtml = `
+                <div style="font-size:10px;color:var(--text-dim);margin:4px 0 0 16px;padding:5px 7px;background:var(--bg-dim, #1e1e2e);border:1px solid var(--border);border-radius:5px">
+                    ${escapeHtml(customQuotaMsg)}
+                </div>
+            `;
+        } else if (q?.quotaCapable === false && q.authenticated !== false && info.available) {
             const usage = q.sessionUsage;
             const contextLine = usage?.contextTokensUsed && usage?.contextWindowTokens
                 ? `Session context: ${Math.round(usage.contextTokensUsed).toLocaleString()} / ${Math.round(usage.contextWindowTokens).toLocaleString()} tokens`
@@ -212,12 +235,12 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
                     ? `Session turns: ${Math.round(usage.turnCount).toLocaleString()}`
                     : '';
             const modelLine = usage?.primaryModelId ? `Model: ${usage.primaryModelId}` : '';
-            const detail = [modelLine, contextLine, q.quotaSource ? 'Quota not exposed by Grok CLI' : 'Auth/status only']
+            const detail = [modelLine, contextLine, describeStatusOnlyQuota(name, q)]
                 .filter(Boolean)
                 .join(' · ');
             windowsHtml = `
                 <div style="font-size:10px;color:var(--text-dim);margin:4px 0 0 16px;padding:5px 7px;background:var(--bg-dim, #1e1e2e);border:1px solid var(--border);border-radius:5px">
-                    <div style="color:var(--text);font-weight:600">${escapeHtml(q.displayTier || 'Grok Heavy')}</div>
+                    <div style="color:var(--text);font-weight:600">${escapeHtml(q.displayTier || providerLabel(name))}</div>
                     <div style="margin-top:2px">${escapeHtml(detail || 'Auth/status only')}</div>
                 </div>
             `;

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

@@ -137,15 +137,22 @@ function syncPerCliModelAndEffortControls(settings: SettingsData | null = null):
         const aiEProvider = cli === 'ai-e' ? getSelectedAiEProvider() : '';
         const modelSel = getModelSelect(cli);
         if (modelSel) {
-            const raw = settings?.perCli?.[cli]?.model || modelSel.value || '';
-            const selected = normalizeModelForDisplay(cli, raw);
-            const models = cli === 'ai-e'
-                ? (meta?.modelsByProvider?.[aiEProvider] || MODEL_MAP[cli] || [])
-                : (MODEL_MAP[cli] || []);
-            setSelectOptions(modelSel, models, { includeCustom: true, selected });
-            if (selected && !Array.from(modelSel.options).some(o => o.value === selected)) {
-                appendCustomOption(modelSel, selected);
-                modelSel.value = selected;
+            if (meta?.modelNote) {
+                modelSel.innerHTML = `<option value="">${escapeHtml(meta.modelNote)}</option>`;
+                modelSel.title = meta.modelNote;
+                modelSel.disabled = true;
+            } else {
+                const raw = settings?.perCli?.[cli]?.model || modelSel.value || '';
+                const selected = normalizeModelForDisplay(cli, raw);
+                const models = cli === 'ai-e'
+                    ? (meta?.modelsByProvider?.[aiEProvider] || MODEL_MAP[cli] || [])
+                    : (MODEL_MAP[cli] || []);
+                setSelectOptions(modelSel, models, { includeCustom: true, selected });
+                if (selected && !Array.from(modelSel.options).some(o => o.value === selected)) {
+                    appendCustomOption(modelSel, selected);
+                    modelSel.value = selected;
+                }
+                modelSel.disabled = false;
             }
         }
 
@@ -313,16 +320,16 @@ export async function loadSettings(): Promise<void> {
 }
 
 export async function updateSettings(): Promise<void> {
-    const s = {
-        cli: (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude',
-    };
+    const cli = (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
+    const s: Record<string, unknown> = { cli };
+    if (cli === 'ai-e') s['perCli'] = { 'ai-e': { provider: getSelectedAiEProvider() } };
     return trackSettingsSave((async () => {
         const result = await apiJson<SettingsData>('/api/settings', 'PUT', s);
         if (!result) {
             await loadSettings();
             return;
         }
-        const confirmedCli = result.cli || s.cli;
+        const confirmedCli = result.cli || cli;
         const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
         if (selCli && Array.from(selCli.options).some(o => o.value === confirmedCli)) {
             selCli.value = confirmedCli;
@@ -435,7 +442,14 @@ export function onCliChange(save = true): void {
         ? (meta?.modelsByProvider?.[aiEProvider] || MODEL_MAP[cli] || [])
         : (MODEL_MAP[cli] || []);
     const modelSel = document.getElementById('selModel') as HTMLSelectElement | null;
-    setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
+    if (meta?.modelNote && modelSel) {
+        modelSel.innerHTML = `<option value="">${escapeHtml(meta.modelNote)}</option>`;
+        modelSel.title = meta.modelNote;
+        modelSel.disabled = true;
+    } else {
+        setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
+        if (modelSel) { modelSel.disabled = false; modelSel.title = ''; }
+    }
     setHeaderCli(cli);
     syncActiveEffortOptions(cli);
 
@@ -470,7 +484,6 @@ export function onCliChange(save = true): void {
         if (!s) return;
         const ao = s.activeOverrides?.[cli] || {};
         const pc = s.perCli?.[cli] || {};
-        if (cli === 'ai-e') syncAiEProviderControl(s, cli);
         const model = ao.model || pc.model;
         const effort = ao.effort || pc.effort || '';
         if (model && modelSel) {

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

@@ -14,6 +14,7 @@ export interface QuotaEntry {
     quotaSource?: string;
     sessionUsageCapable?: boolean;
     displayTier?: string;
+    delegatedProvider?: string;
     sessionUsage?: {
         contextTokensUsed?: number | null;
         contextWindowTokens?: number | null;

package/public/js/features/ui-status.ts

@@ -8,15 +8,18 @@ import type { MessageItem } from './process-log-adapter.js';
 export function setStatus(s: string): void {
     const badge = document.getElementById('statusBadge');
     const btn = document.getElementById('btnSend');
+    const label = document.getElementById('typingIndicator')?.querySelector('.label') as HTMLElement | null;
     state.agentBusy = s === 'running';
     document.getElementById('typingIndicator')?.classList.toggle('active', state.agentBusy);
     if (s === 'running') {
         if (badge) { badge.className = 'status-badge status-running'; badge.textContent = 'running'; }
         if (btn) { btn.innerHTML = ICONS.stop; btn.title = t('btn.stop'); btn.classList.add('stop-mode'); }
+        if (label) label.textContent = t('status.responding');
         showSkeleton();
     } else {
         if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = 'idle'; }
         if (btn) { btn.innerHTML = ICONS.send; btn.title = 'Send'; btn.classList.remove('stop-mode'); }
+        if (label) label.textContent = t('status.responding');
         removeSkeleton();
     }
 }

package/public/js/ws.ts

@@ -1,7 +1,7 @@
 // ── WebSocket Connection ──
 import { state } from './state.js';
 import { API_BASE } from './api.js';
-import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore, showChatRestoreIndicator } from './ui.js';
+import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, showLiveToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore, showChatRestoreIndicator } from './ui.js';
 import { renderPendingQueue } from './features/pending-queue.js';
 import { t, getLang } from './features/i18n.js';
 import { getVirtualScroll } from './virtual-scroll.js';
@@ -10,6 +10,7 @@ import { escapeHtml, cancelPostRender } from './render.js';
 import type { HeartbeatRuntimeState, OrcStateName, ResolvedSelectionState } from './state.js';
 import { notifyUnreadResponse } from './features/attention-badge.js';
 import { shouldApplyOrcStateEvent } from './features/orchestrate-scope.js';
+import { providerLabel } from './provider-icons.js';
 
 const ROADMAP_PHASES = ['P', 'A', 'B', 'C'] as const;
 
@@ -112,6 +113,7 @@ async function refreshRuntimeSnapshot(options: { hydrateRun?: boolean } = {}): P
     renderPendingQueue(snap.queued || []);
     if (options.hydrateRun) hydrateActiveRun(snap.activeRun);
     setStatus(snap.runtime.busy ? 'running' : 'idle');
+    if (snap.runtime.busy && snap.activeRun?.cli === 'agy') showLiveToolActivity(`${providerLabel(snap.activeRun.cli)} working...`);
     import('./features/employees.js').then(m => {
         if (typeof m.renderEmployees === 'function') m.renderEmployees();
     });
@@ -356,8 +358,10 @@ export function connect(): void {
         if (msg.type === 'agent_status') {
             if (msg.running !== undefined) {
                 setStatus(msg.running ? 'running' : 'idle');
+                if (msg.running && msg.cli === 'agy') showLiveToolActivity(`${providerLabel(msg.cli)} working...`);
             } else {
                 setStatus(msg.status || 'idle');
+                if (msg.status === 'running' && msg.cli === 'agy') showLiveToolActivity(`${providerLabel(msg.cli)} working...`);
             }
             // Track per-agent phase for badge rendering
             if (msg.agentId && msg.phase) {

package/public/manager/src/SidebarRailRouter.tsx

@@ -20,6 +20,8 @@ import { DashboardRemindersSidebar, type RemindersView } from './dashboard-remin
 import { DashboardRemindersWorkspace } from './dashboard-reminders/DashboardRemindersWorkspace';
 import { useRemindersFeed } from './dashboard-reminders/useRemindersFeed';
 import type { HelpTopicId } from './help/helpContent';
+import { NotesCommandPalette } from './notes/NotesCommandPalette';
+import { NotesCommandProvider } from './notes/notes-command-registry';
 import type { NotesModelState } from './notes/useNotesModel';
 import type {
     DashboardDetailTab,
@@ -126,7 +128,7 @@ export function SidebarRailRouter(props: Props) {
     );
 
     return (
-        <>
+        <NotesCommandProvider>
         {props.jawCeoVoiceOverlay}
         <WorkspaceLayout
             sidebarCollapsed={props.sidebarCollapsed}
@@ -168,6 +170,7 @@ export function SidebarRailRouter(props: Props) {
             )}
             workbench={(
                 <div className="workspace-surface-stack">
+                    <NotesCommandPalette active={props.sidebarMode === 'notes'} />
                     {props.lifecycleMessage && (
                         <section className="state lifecycle-state" role="status">
                             <span>{props.lifecycleMessage}</span>
@@ -224,6 +227,6 @@ export function SidebarRailRouter(props: Props) {
                 </InstanceDrawer>
             )}
         />
-        </>
+        </NotesCommandProvider>
     );
 }

package/public/manager/src/api.ts

@@ -163,6 +163,19 @@ export async function fetchNotesTree(): Promise<DashboardNoteTreeEntry[]> {
     return await parseNotesResponse<DashboardNoteTreeEntry[]>(response, `notes tree fetch failed: ${response.status}`);
 }
 
+export type NoteTemplate = { name: string; path: string };
+export type NoteTemplateContent = { name: string; path: string; content: string };
+
+export async function fetchNoteTemplates(): Promise<NoteTemplate[]> {
+    const response = await fetch('/api/dashboard/notes/templates');
+    return await parseNotesResponse<NoteTemplate[]>(response, `note templates fetch failed: ${response.status}`);
+}
+
+export async function fetchNoteTemplate(name: string): Promise<NoteTemplateContent> {
+    const response = await fetch(`/api/dashboard/notes/template?name=${encodeURIComponent(name)}`);
+    return await parseNotesResponse<NoteTemplateContent>(response, `note template 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}`);

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

@@ -23,6 +23,16 @@ export function WorkbenchHeader(props: WorkbenchHeaderProps) {
                 <p className="eyebrow">Selected instance</p>
                 <h2>{instance ? instanceLabel(instance) : 'No instance selected'}</h2>
                 <span>{instance?.workingDir || instance?.url || 'Select an online instance to inspect it.'}</span>
+                {instance?.projectDirs && instance.projectDirs.length > 0 && (
+                    <div className="project-dirs">
+                        <span className="label">Projects:</span>
+                        {instance.projectDirs.map((dir, i) => (
+                            <span key={i} className="project-dir" title={dir}>
+                                {dir.split(/[/\\]/).slice(-2).join('/')}
+                            </span>
+                        ))}
+                    </div>
+                )}
             </div>
             {hasActions && (
                 <div className="detail-header-actions">

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

@@ -238,6 +238,89 @@
     color: var(--text-secondary);
 }
 
+.notes-template-picker {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--canvas-deep);
+}
+
+.notes-template-picker-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.notes-template-picker-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 4px;
+}
+
+.notes-template-picker-option {
+    padding: 4px 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: var(--accent-soft);
+    color: var(--text-primary);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.notes-template-picker-option:hover {
+    background: var(--accent);
+    color: var(--bg-panel);
+}
+
+.notes-template-picker-cancel {
+    padding: 2px 8px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-tertiary);
+    font: inherit;
+    font-size: 11px;
+    cursor: pointer;
+}
+
+.notes-template-picker-cancel:hover {
+    color: var(--text-secondary);
+}
+
+.notes-today-bar {
+    display: flex;
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.notes-today-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 32px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--accent-soft);
+    color: var(--text-primary);
+    font: inherit;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+}
+
+.notes-today-button:hover {
+    background: var(--accent);
+    color: var(--bg-panel);
+}
+
 .notes-main {
     min-width: 0;
     min-height: 0;
@@ -1213,3 +1296,148 @@
         border-bottom: 1px solid var(--border-subtle);
     }
 }
+
+/* --- Backlinks Panel --- */
+
+.notes-backlinks-panel {
+    border-top: 1px solid var(--border-secondary, #333);
+    background: var(--canvas-deep, #1a1a1a);
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+.notes-backlinks-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    padding: 8px 14px;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.notes-backlinks-header:hover {
+    color: var(--text-primary);
+}
+
+.notes-backlinks-chevron {
+    font-size: 9px;
+    width: 12px;
+}
+
+.notes-backlinks-count {
+    margin-left: auto;
+    background: var(--surface-secondary, #2a2a2a);
+    padding: 1px 6px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.notes-backlinks-list {
+    padding: 0 8px 8px;
+}
+
+.notes-backlinks-empty {
+    padding: 8px 14px;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    font-style: italic;
+}
+
+.notes-backlink-entry {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    width: 100%;
+    padding: 6px 10px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    text-align: left;
+    cursor: pointer;
+    color: var(--text-primary);
+}
+
+.notes-backlink-entry:hover {
+    background: var(--surface-hover, #2a2a2a);
+}
+
+.notes-backlink-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--accent-primary, #8ab4ff);
+}
+
+.notes-backlink-line {
+    font-size: 11px;
+    color: var(--text-tertiary);
+}
+
+.notes-backlink-context {
+    width: 100%;
+    font-size: 12px;
+    color: var(--text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+mark.backlink-highlight {
+    background: none;
+    color: var(--accent-primary, #8ab4ff);
+    font-weight: 600;
+}
+
+/* --- Graph View --- */
+
+.notes-graph-view {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    background: var(--canvas-deep, #111);
+    overflow: hidden;
+    grid-row: 3;
+}
+
+.notes-graph-svg {
+    display: block;
+}
+
+.notes-graph-info {
+    position: absolute;
+    bottom: 12px;
+    right: 16px;
+    font-size: 11px;
+    color: var(--text-tertiary, #666);
+    pointer-events: none;
+    user-select: none;
+}
+
+.notes-graph-loading,
+.notes-graph-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 400px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    grid-row: 3;
+}
+
+.graph-node circle:hover {
+    filter: brightness(1.3);
+}
+
+.graph-node text {
+    text-shadow: 0 0 4px var(--canvas-deep, #111);
+}