ltcai 1.6.0 → 2.0.0

package/static/scripts/admin.js

@@ -49,6 +49,7 @@ const A18N = {
         nav_users: '사용자 관리',
         nav_permissions: '권한 관리',
         nav_sso: 'SSO 관리',
+        nav_enterprise: 'Enterprise',
         nav_security: '보안 모니터링',
         nav_audit: '감사 로그',
         nav_chat: '채팅으로',
@@ -170,6 +171,16 @@ const A18N = {
         section_sensitivity: '보안 모니터링',
         section_audit: '감사 로그',
         section_sso: 'SSO 관리',
+        enterprise_title: 'Enterprise 관리자',
+        enterprise_desc: '관리자 정책, 감사 추출, SIEM 추출, 조직 설정, 기능 상태를 확인합니다.',
+        enterprise_policies: '관리자 정책',
+        enterprise_policies_desc: 'Community 유효 정책과 Enterprise 정책 팩 상태입니다.',
+        enterprise_org: '조직 설정',
+        enterprise_org_desc: '워크스페이스 거버넌스와 조직 기능 상태입니다.',
+        enterprise_audit_export: '감사 추출',
+        enterprise_audit_export_desc: 'Community에서는 로컬 추출이 가능하며 보존 정책은 Enterprise 확장 지점입니다.',
+        enterprise_siem: 'SIEM 추출',
+        enterprise_siem_desc: 'Community에서 외부 이벤트를 전송하지 않고 SIEM envelope를 미리 봅니다.',
     },
     en: {
         admin_sub: 'Admin Dashboard',
@@ -180,6 +191,7 @@ const A18N = {
         nav_users: 'User Management',
         nav_permissions: 'Permission Management',
         nav_sso: 'SSO Management',
+        nav_enterprise: 'Enterprise',
         nav_security: 'Security Monitoring',
         nav_audit: 'Audit Logs',
         nav_chat: 'Back to Chat',
@@ -301,6 +313,16 @@ const A18N = {
         section_sensitivity: 'Security monitoring',
         section_audit: 'Audit logs',
         section_sso: 'SSO management',
+        enterprise_title: 'Enterprise Admin',
+        enterprise_desc: 'Review admin policies, audit export, SIEM export, organization settings, and capability status.',
+        enterprise_policies: 'Admin Policies',
+        enterprise_policies_desc: 'Effective Community policy and Enterprise policy-pack status.',
+        enterprise_org: 'Organization Settings',
+        enterprise_org_desc: 'Workspace governance and organization capability status.',
+        enterprise_audit_export: 'Audit Export',
+        enterprise_audit_export_desc: 'Community local export is available; retention is an Enterprise extension point.',
+        enterprise_siem: 'SIEM Export',
+        enterprise_siem_desc: 'Preview the SIEM envelope without streaming external events in Community.',
     }
 };
 
@@ -310,6 +332,7 @@ let latestUsers = [];
 let latestSso = null;
 let latestSensitivity = null;
 let latestAudit = null;
+let latestEnterprise = null;
 
 function t(key) {
     return (A18N[currentLang] || A18N.ko)[key] || key;
@@ -352,6 +375,7 @@ function setLang(lang) {
     renderSso(latestSso);
     renderSensitivity(latestSensitivity);
     renderAudit(latestAudit);
+    renderEnterpriseAdmin(latestEnterprise);
     loadDashboard();
 }
 
@@ -788,6 +812,97 @@ function renderAudit(audit) {
     ` : `<div class="preview" style="padding:14px">${t('audit_no_events')}</div>`;
 }
 
+function enterpriseStatusTag(label, enabled) {
+    return `<span class="tag ${enabled ? 'low' : 'medium'}">${esc(label)}: ${enabled ? 'enabled' : 'disabled'}</span>`;
+}
+
+function renderKeyValues(targetId, rows) {
+    const target = document.getElementById(targetId);
+    if (!target) return;
+    target.innerHTML = `
+        <div class="enterprise-kv">
+            ${rows.map(([label, value]) => `
+                <div>
+                    <span>${esc(label)}</span>
+                    <strong>${esc(value)}</strong>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function renderEnterpriseAdmin(payload) {
+    latestEnterprise = payload || null;
+    const enterprise = payload || {};
+    const edition = enterprise.edition || {};
+    const caps = edition.capabilities || {};
+    const tags = document.getElementById('enterprise-status-tags');
+    if (tags) {
+        tags.innerHTML = [
+            enterpriseStatusTag('edition', Boolean(edition.is_enterprise)),
+            enterpriseStatusTag('policy packs', Boolean(enterprise.admin_policies?.enabled)),
+            enterpriseStatusTag('siem', Boolean(enterprise.siem_export?.enabled)),
+        ].join('');
+    }
+
+    const grid = document.getElementById('enterprise-capability-status');
+    if (grid) {
+        const entries = Object.keys(caps).length ? Object.entries(caps) : [];
+        grid.innerHTML = entries.length ? entries.map(([name, enabled]) => `
+            <div class="enterprise-cap-card ${enabled ? 'on' : 'off'}">
+                <i class="ti ${enabled ? 'ti-circle-check' : 'ti-lock'}"></i>
+                <span>${esc(name.replaceAll('_', ' '))}</span>
+                <strong>${enabled ? 'enabled' : 'disabled'}</strong>
+            </div>
+        `).join('') : `<div class="preview" style="padding:14px">Capability status unavailable.</div>`;
+    }
+
+    const policies = enterprise.admin_policies || {};
+    renderKeyValues('enterprise-admin-policies', [
+        ['Capability', policies.capability || 'admin_policy_packs'],
+        ['Enabled', Boolean(policies.enabled)],
+        ['Enforced', Boolean(policies.enforced)],
+        ['Base roles', (policies.effective_policy?.base_roles || []).join(', ')],
+        ['Local file access', policies.effective_policy?.local_file_access || 'approval-token gated'],
+        ['Package install', policies.effective_policy?.package_install || 'admin-only'],
+        ['Note', policies.note || 'Community features remain available.'],
+    ]);
+
+    const org = enterprise.organization_settings || {};
+    renderKeyValues('enterprise-org-settings', [
+        ['Workspaces', (org.community_baseline?.workspaces || []).join(', ')],
+        ['Roles', (org.community_baseline?.roles || []).join(', ')],
+        ['Data isolation', org.community_baseline?.data_isolation || 'single-tenant local storage'],
+        ['Governance enabled', Object.values(org.governance_capabilities || {}).filter(Boolean).length],
+        ['Note', org.note || 'Enterprise governance is an extension point.'],
+    ]);
+
+    const audit = enterprise.audit_export || {};
+    renderKeyValues('enterprise-audit-export', [
+        ['Local export', audit.local_export?.available ? 'available' : 'unavailable'],
+        ['Endpoint', audit.local_export?.endpoint || '/admin/security/export'],
+        ['Formats', (audit.local_export?.formats || []).join(', ')],
+        ['SIEM streaming', audit.siem_streaming?.enabled ? 'enabled' : 'disabled'],
+        ['Retention', audit.compliance_retention?.enabled ? 'enabled' : 'disabled'],
+    ]);
+
+    const siem = enterprise.siem_export || {};
+    renderKeyValues('enterprise-siem-export', [
+        ['Capability', siem.capability || 'siem_export'],
+        ['Enabled', Boolean(siem.enabled)],
+        ['Streamed', Boolean(siem.streamed)],
+        ['Destination', siem.destination || 'not configured'],
+    ]);
+    const preview = document.getElementById('enterprise-siem-preview');
+    if (preview) preview.textContent = JSON.stringify(siem.preview_envelope || {}, null, 2);
+}
+
+async function refreshSiemPreview() {
+    const res = await apiFetch('/admin/enterprise/siem-export', { headers: adminHeaders() });
+    const data = res.ok ? await res.json() : {};
+    renderEnterpriseAdmin({ ...(latestEnterprise || {}), siem_export: data });
+}
+
 function cellValue(value) {
     if (value === null || value === undefined) return '';
     if (Array.isArray(value)) return value.map(cellValue).filter(Boolean).join('; ');
@@ -1074,7 +1189,7 @@ async function loadDashboard() {
     access.style.display = 'none';
 
     try {
-        const [healthRes, vpcRes, summaryRes, usersRes, sensitivityRes, inviteRes, statsRes, auditRes, ssoRes] = await Promise.all([
+        const [healthRes, vpcRes, summaryRes, usersRes, sensitivityRes, inviteRes, statsRes, auditRes, ssoRes, enterpriseRes] = await Promise.all([
             apiFetch('/health'),
             apiFetch('/vpc/status'),
             apiFetch('/admin/summary', { headers: adminHeaders() }),
@@ -1084,6 +1199,7 @@ async function loadDashboard() {
             apiFetch('/admin/stats', { headers: adminHeaders() }),
             apiFetch('/admin/audit', { headers: adminHeaders() }),
             apiFetch('/admin/sso', { headers: adminHeaders() }),
+            apiFetch('/admin/enterprise', { headers: adminHeaders() }),
         ]);
 
         const health = healthRes.ok ? await healthRes.json() : null;
@@ -1095,6 +1211,7 @@ async function loadDashboard() {
         const stats = statsRes.ok ? await statsRes.json() : null;
         const audit = auditRes.ok ? await auditRes.json() : null;
         const sso = ssoRes.ok ? await ssoRes.json() : null;
+        const enterprise = enterpriseRes.ok ? await enterpriseRes.json() : null;
 
         renderSummary(health, summary, vpc);
         fillVpcForm(vpc);
@@ -1103,6 +1220,7 @@ async function loadDashboard() {
         renderSensitivity(sensitivity);
         renderAudit(audit);
         renderSso(sso);
+        renderEnterpriseAdmin(enterprise);
 
         if (invite) {
             document.getElementById('invite-link-input').value = invite.invite_url;
@@ -1118,6 +1236,7 @@ async function loadDashboard() {
         if (!sensitivityRes.ok) failedSections.push(t('section_sensitivity'));
         if (!auditRes.ok) failedSections.push(t('section_audit'));
         if (!ssoRes.ok) failedSections.push(t('section_sso'));
+        if (!enterpriseRes.ok) failedSections.push('Enterprise');
 
         if (failedSections.length) {
             access.style.display = 'block';
@@ -1189,6 +1308,7 @@ document.getElementById('save-sso-btn').addEventListener('click', saveSso);
 document.getElementById('test-sso-btn').addEventListener('click', () => {
     window.location.href = `${API_BASE}/auth/sso/login`;
 });
+document.getElementById('refresh-siem-btn')?.addEventListener('click', () => refreshSiemPreview().catch(e => alert(String(e))));
 document.getElementById('security-export-toggle')?.addEventListener('click', () => toggleExportOptions('security'));
 document.getElementById('audit-export-toggle')?.addEventListener('click', () => toggleExportOptions('audit'));
 document.querySelectorAll('[data-export-scope][data-export-format]').forEach(btn => {

package/static/scripts/graph.js

@@ -21,7 +21,10 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
         local_indexed: '지식 그래프 생성 완료', local_watch_unavailable: '자동 감지는 watchdog 설치 후 작동합니다.',
         detail_empty: '노드를 클릭하면 요약, 중요도, 연결 강도, 메타데이터를 볼 수 있습니다. 검색 패널에서는 서버 검색 결과를 기준으로 더 정확하게 이동할 수 있습니다.',
         detail_empty_short: '노드를 클릭하면 요약, 중요도, 메타데이터를 볼 수 있습니다.',
-        refresh: '새로고침', error: '오류', graph_load_fail: '그래프를 불러오지 못했습니다.', graph_refresh_fail: '그래프를 새로고침하지 못했습니다.',
+        refresh: '새로고침', fit: '맞춤', expand: '확장', collapse: '접기', focus: '포커스', path: '경로',
+        clear_focus: '포커스 해제', path_start: '경로 시작 지정', path_ready: '경로 시작: {title}', path_pick_target: '도착 노드를 선택한 뒤 경로를 누르세요.',
+        path_not_found: '두 노드 사이의 경로를 찾지 못했습니다.', source_open: '소스 열기',
+        error: '오류', graph_load_fail: '그래프를 불러오지 못했습니다.', graph_refresh_fail: '그래프를 새로고침하지 못했습니다.',
         no_node_types: '아직 노드 유형이 없습니다.', no_relationships: '아직 관계가 없습니다.',
         open_in_chat: '채팅에서 열기', today: '오늘', day_ago: '1일 전', days_ago: '{n}일 전', months_ago: '{n}개월 전', years_ago: '{n}년 전',
       },
@@ -43,7 +46,10 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
         local_indexed: 'Knowledge graph built', local_watch_unavailable: 'Auto watch works after watchdog is installed.',
         detail_empty: 'Click a node to see its summary, importance, connection strength, and metadata. Search results can jump to more precise nodes.',
         detail_empty_short: 'Click a node to see its summary, importance, and metadata.',
-        refresh: 'Refresh', error: 'Error', graph_load_fail: 'Could not load the graph.', graph_refresh_fail: 'Could not refresh the graph.',
+        refresh: 'Refresh', fit: 'Fit', expand: 'Expand', collapse: 'Collapse', focus: 'Focus', path: 'Path',
+        clear_focus: 'Clear focus', path_start: 'Set path start', path_ready: 'Path start: {title}', path_pick_target: 'Select a destination node, then press Path.',
+        path_not_found: 'No path found between those nodes.', source_open: 'Open source',
+        error: 'Error', graph_load_fail: 'Could not load the graph.', graph_refresh_fail: 'Could not refresh the graph.',
         no_node_types: 'No node types yet.', no_relationships: 'No relationships yet.',
         open_in_chat: 'Open in chat', today: 'today', day_ago: '1 day ago', days_ago: '{n} days ago', months_ago: '{n} mo ago', years_ago: '{n} yr ago',
       }
@@ -73,7 +79,18 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       document.getElementById('local-source-label').textContent = t('local_sources');
       document.getElementById('edge-label').textContent = t('relationship_legend');
       document.getElementById('type-label').textContent = t('node_types');
-      document.getElementById('refresh-btn').textContent = `↺ ${t('refresh')}`;
+      const toolbarLabels = {
+        'refresh-btn': ['ti-refresh', t('refresh')],
+        'fit-btn': ['ti-arrows-maximize', t('fit')],
+        'expand-btn': ['ti-circle-plus', t('expand')],
+        'collapse-btn': ['ti-circle-minus', t('collapse')],
+        'focus-btn': ['ti-focus-2', focusNodeId ? t('clear_focus') : t('focus')],
+        'path-btn': ['ti-route', t('path')],
+      };
+      Object.entries(toolbarLabels).forEach(([id, [icon, label]]) => {
+        const btn = document.getElementById(id);
+        if (btn) btn.innerHTML = `<i class="ti ${icon}"></i> ${label}`;
+      });
       const langBtn = document.getElementById('graph-lang-btn');
       if (langBtn) langBtn.textContent = `Language: ${currentLang === 'ko' ? '한국어' : 'English'}`;
       ['ko', 'en'].forEach(lang => {
@@ -174,6 +191,13 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     let height = 0;
     let searchResults = [];
     let searchResultIds = new Set();
+    let expandedNodeIds = new Set();
+    let hiddenNodeIds = new Set();
+    let focusNodeId = null;
+    let focusDepth = 2;
+    let pathStartId = null;
+    let pathNodeIds = new Set();
+    let pathEdgeKeys = new Set();
     let searchAbortController = null;
     let searchDebounceId = null;
     let localState = {
@@ -570,13 +594,55 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       return counts;
     }
 
+    function edgeKey(edgeOrFrom, to) {
+      if (typeof edgeOrFrom === 'object') {
+        return `${edgeOrFrom.from}|${edgeOrFrom.to}`;
+      }
+      return `${edgeOrFrom}|${to}`;
+    }
+
+    function computeSubgraphIds(rootId, depth = 2) {
+      if (!rootId) return null;
+      const adjacency = new Map();
+      rawGraph.edges.forEach(edge => {
+        if (!edge.from || !edge.to) return;
+        if (!adjacency.has(edge.from)) adjacency.set(edge.from, new Set());
+        if (!adjacency.has(edge.to)) adjacency.set(edge.to, new Set());
+        adjacency.get(edge.from).add(edge.to);
+        adjacency.get(edge.to).add(edge.from);
+      });
+      const visible = new Set([rootId]);
+      let frontier = new Set([rootId]);
+      for (let i = 0; i < depth; i++) {
+        const next = new Set();
+        frontier.forEach(id => {
+          (adjacency.get(id) || []).forEach(neighbor => {
+            if (!visible.has(neighbor)) {
+              visible.add(neighbor);
+              next.add(neighbor);
+            }
+          });
+        });
+        frontier = next;
+      }
+      pathNodeIds.forEach(id => visible.add(id));
+      return visible;
+    }
+
     function applyFilter() {
-      graph.nodes = rawGraph.nodes.filter(node => !hiddenTypes.has(node.type));
+      const focusIds = computeSubgraphIds(focusNodeId, focusDepth);
+      graph.nodes = rawGraph.nodes.filter(node => {
+        if (hiddenTypes.has(node.type)) return false;
+        if (focusIds && !focusIds.has(node.id)) return false;
+        if (hiddenNodeIds.has(node.id) && node.id !== selected?.id && node.id !== focusNodeId && !pathNodeIds.has(node.id)) return false;
+        return true;
+      });
       const nodeSet = new Set(graph.nodes.map(node => node.id));
       const byId = Object.fromEntries(rawGraph.nodes.map(node => [node.id, node]));
       graph.edges = rawGraph.edges
         .filter(edge => nodeSet.has(edge.from) && nodeSet.has(edge.to))
         .map(edge => ({ ...edge, source: byId[edge.from], target: byId[edge.to] }));
+      renderFocusChip();
     }
 
     function seedLayout() {
@@ -698,8 +764,14 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       updateStats();
       renderTypeFilters(stats.nodes || buildTypeCounts());
       renderEdgeLegend(stats.edges || {});
-      showDetail(selected && rawGraph.nodes.find(node => node.id === selected.id) || graph.nodes[0] || null);
+      const urlNode = new URLSearchParams(window.location.search).get('node');
+      const initialNode = (urlNode && rawGraph.nodes.find(node => node.id === urlNode))
+        || (selected && rawGraph.nodes.find(node => node.id === selected.id))
+        || graph.nodes[0]
+        || null;
       cam = { scale: 1, tx: 0, ty: 0 };
+      showDetail(initialNode);
+      if (initialNode && urlNode) centerOnNode(initialNode, Math.max(cam.scale, 1));
       wakeUp();
     }
 
@@ -755,6 +827,29 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     }
     window.toggleType = toggleType;
 
+    function renderFocusChip() {
+      const chip = document.getElementById('graph-focus-chip');
+      if (!chip) return;
+      const focusNode = rawGraph.nodes.find(node => node.id === focusNodeId);
+      const pathStart = rawGraph.nodes.find(node => node.id === pathStartId);
+      const parts = [];
+      if (focusNode) parts.push(`<span><i class="ti ti-focus-2"></i>${escapeHtml(focusNode.title || focusNode.id)}</span>`);
+      if (pathStart) parts.push(`<span><i class="ti ti-route"></i>${escapeHtml(t('path_ready').replace('{title}', pathStart.title || pathStart.id))}</span>`);
+      if (pathNodeIds.size) parts.push(`<span>${pathNodeIds.size} nodes</span>`);
+      chip.hidden = parts.length === 0;
+      chip.innerHTML = parts.join('');
+      applyI18n();
+    }
+
+    function relatedNodeIds(nodeId) {
+      const ids = new Set();
+      rawGraph.edges.forEach(edge => {
+        if (edge.from === nodeId) ids.add(edge.to);
+        if (edge.to === nodeId) ids.add(edge.from);
+      });
+      return ids;
+    }
+
     function step() {
       const nodes = graph.nodes;
       const edges = graph.edges;
@@ -841,13 +936,14 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
         if (!edge.source || !edge.target) return;
         const style = edgeStyle(edge.type);
         const isNeighborEdge = neighborSet && neighborSet.has(edge.from) && neighborSet.has(edge.to);
-        const baseAlpha = neighborSet ? (isNeighborEdge ? 0.88 : 0.07) : 0.34;
-        const widthBoost = isNeighborEdge ? 0.5 : 0;
+        const isPathEdge = pathEdgeKeys.has(edgeKey(edge)) || pathEdgeKeys.has(edgeKey(edge.to, edge.from));
+        const baseAlpha = isPathEdge ? 0.98 : (neighborSet ? (isNeighborEdge ? 0.88 : 0.07) : 0.34);
+        const widthBoost = isPathEdge ? 2.2 : (isNeighborEdge ? 0.5 : 0);
         ctx.save();
         ctx.globalAlpha = baseAlpha;
-        ctx.strokeStyle = style.color;
+        ctx.strokeStyle = isPathEdge ? '#f59e0b' : style.color;
         ctx.lineWidth = (style.width + Math.min(3.4, (edge.weight || 1) * 1.1) + widthBoost) / cam.scale;
-        ctx.setLineDash(style.dash || []);
+        ctx.setLineDash(isPathEdge ? [] : (style.dash || []));
         ctx.beginPath();
         ctx.moveTo(edge.source.x, edge.source.y);
         ctx.lineTo(edge.target.x, edge.target.y);
@@ -858,10 +954,11 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       graph.nodes.forEach(node => {
         const isNeighbor = neighborSet ? neighborSet.has(node.id) : true;
         const isSearchHit = searchResultIds.has(node.id);
+        const isPathNode = pathNodeIds.has(node.id);
         const isSelected = node === selected;
         const isHovered = node === hovered;
         const alpha = neighborSet ? (isNeighbor ? 1 : 0.12) : 1;
-        const radius = node.r + (isSelected ? 4 : isHovered ? 2 : isSearchHit ? 2.6 : 0);
+        const radius = node.r + (isSelected ? 4 : isHovered ? 2 : isPathNode ? 3.5 : isSearchHit ? 2.6 : 0);
 
         ctx.globalAlpha = alpha;
 
@@ -890,9 +987,9 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
         ctx.stroke();
 
         // 선택/호버 외곽 링
-        if (isSelected || isHovered || isSearchHit) {
-          ctx.strokeStyle = isSelected ? '#6f42e8' : nodeColor(node.type);
-          ctx.lineWidth = (isSelected ? 2.8 : 1.8) / cam.scale;
+        if (isSelected || isHovered || isSearchHit || isPathNode) {
+          ctx.strokeStyle = isPathNode ? '#f59e0b' : (isSelected ? '#6f42e8' : nodeColor(node.type));
+          ctx.lineWidth = (isSelected || isPathNode ? 2.8 : 1.8) / cam.scale;
           ctx.globalAlpha = alpha * 0.55;
           ctx.beginPath();
           ctx.arc(node.x, node.y, radius + 5 / cam.scale, 0, Math.PI * 2);
@@ -979,6 +1076,123 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       wakeUp();
     }
 
+    async function expandNode(node = selected) {
+      if (!node) return;
+      const res = await apiFetch(`/knowledge-graph/neighbors/${encodeURIComponent(node.id)}`);
+      if (!res.ok) throw new Error(`Expand failed (${res.status})`);
+      const payload = await res.json();
+      const nodes = [
+        payload.node || node,
+        ...((payload.neighbors || []).map(item => ({ ...item, updated_at: item.updated_at }))),
+      ];
+      expandedNodeIds.add(node.id);
+      nodes.forEach(item => hiddenNodeIds.delete(item.id));
+      mergeGraphData(nodes, payload.edges || []);
+      showDetail(rawGraph.nodes.find(item => item.id === node.id) || node);
+      centerOnNode(node, Math.max(cam.scale, 1));
+    }
+
+    function collapseNode(node = selected) {
+      if (!node) return;
+      relatedNodeIds(node.id).forEach(id => {
+        if (id !== node.id && id !== focusNodeId && !pathNodeIds.has(id)) hiddenNodeIds.add(id);
+      });
+      expandedNodeIds.delete(node.id);
+      applyFilter();
+      showDetail(node);
+      wakeUp();
+    }
+
+    function toggleFocus(node = selected) {
+      if (!node) return;
+      if (focusNodeId === node.id) {
+        focusNodeId = null;
+      } else {
+        focusNodeId = node.id;
+        hiddenNodeIds.delete(node.id);
+      }
+      applyFilter();
+      centerOnNode(node, Math.max(cam.scale, 0.9));
+    }
+
+    function localShortestPath(startId, targetId) {
+      if (!startId || !targetId || startId === targetId) return startId ? [startId] : [];
+      const adjacency = new Map();
+      rawGraph.edges.forEach(edge => {
+        if (!edge.from || !edge.to) return;
+        if (!adjacency.has(edge.from)) adjacency.set(edge.from, []);
+        if (!adjacency.has(edge.to)) adjacency.set(edge.to, []);
+        adjacency.get(edge.from).push(edge.to);
+        adjacency.get(edge.to).push(edge.from);
+      });
+      const queue = [[startId]];
+      const seen = new Set([startId]);
+      while (queue.length) {
+        const path = queue.shift();
+        const last = path[path.length - 1];
+        if (last === targetId) return path;
+        (adjacency.get(last) || []).forEach(next => {
+          if (!seen.has(next)) {
+            seen.add(next);
+            queue.push([...path, next]);
+          }
+        });
+      }
+      return [];
+    }
+
+    async function showShortestPath(target = selected) {
+      if (!target) return;
+      if (!pathStartId) {
+        pathStartId = target.id;
+        renderFocusChip();
+        showDetail(target);
+        return;
+      }
+      let path = localShortestPath(pathStartId, target.id);
+      if (!path.length || path[path.length - 1] !== target.id) {
+        const res = await apiFetch(`/workspace/relationships/${encodeURIComponent(pathStartId)}?target_id=${encodeURIComponent(target.id)}`);
+        if (res.ok) {
+          const payload = await res.json();
+          path = Array.isArray(payload.shortest_path) ? payload.shortest_path : path;
+        }
+      }
+      if (!path.length || path[path.length - 1] !== target.id) {
+        searchCountEl.textContent = t('path_not_found');
+        return;
+      }
+      pathNodeIds = new Set(path);
+      pathEdgeKeys = new Set();
+      for (let i = 0; i < path.length - 1; i++) {
+        pathEdgeKeys.add(edgeKey(path[i], path[i + 1]));
+        pathEdgeKeys.add(edgeKey(path[i + 1], path[i]));
+      }
+      path.forEach(id => hiddenNodeIds.delete(id));
+      applyFilter();
+      const first = rawGraph.nodes.find(node => node.id === path[0]);
+      const last = rawGraph.nodes.find(node => node.id === path[path.length - 1]);
+      if (first && last) {
+        const x0 = Math.min(...path.map(id => rawGraph.nodes.find(node => node.id === id)?.x ?? first.x));
+        const x1 = Math.max(...path.map(id => rawGraph.nodes.find(node => node.id === id)?.x ?? first.x));
+        const y0 = Math.min(...path.map(id => rawGraph.nodes.find(node => node.id === id)?.y ?? first.y));
+        const y1 = Math.max(...path.map(id => rawGraph.nodes.find(node => node.id === id)?.y ?? first.y));
+        cam.scale = clamp(Math.min(width / Math.max(260, x1 - x0 + 180), height / Math.max(220, y1 - y0 + 160)), 0.4, 2.4);
+        cam.tx = width / 2 - ((x0 + x1) / 2) * cam.scale;
+        cam.ty = height / 2 - ((y0 + y1) / 2) * cam.scale;
+      }
+      showDetail(target);
+      wakeUp();
+    }
+
+    function clearPath() {
+      pathStartId = selected?.id || null;
+      pathNodeIds = new Set();
+      pathEdgeKeys = new Set();
+      renderFocusChip();
+      applyFilter();
+      wakeUp();
+    }
+
     function metricCards(node) {
       const metrics = ((node.metadata || {}).graph_metrics) || {};
       const cards = [
@@ -1010,25 +1224,74 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       selected = node;
       const meta = node.metadata || {};
       const convId = meta.conversation_id;
+      const sourcePath = meta.path || meta.absolute_path || meta.root_path || meta.source_path || '';
       const jumpHtml = convId
         ? `<a class="jump-btn" href="${API_BASE}/chat?open_conversation=${encodeURIComponent(convId)}">${t('open_in_chat')}</a>`
         : '';
+      const sourceHtml = sourcePath
+        ? `<a class="jump-btn secondary" href="${API_BASE}/local/serve?path=${encodeURIComponent(sourcePath)}">${t('source_open')}</a>`
+        : '';
       const metrics = metricCards(node);
       const updatedAt = formatUpdatedAt(node.updated_at);
       const source = meta.relative_path || meta.filename || meta.conversation_id || meta.source || '';
       const metadataStr = Object.keys(meta).length ? JSON.stringify(meta, null, 2) : '';
+      const relatedRows = rawGraph.edges
+        .filter(edge => edge.from === node.id || edge.to === node.id)
+        .slice(0, 10)
+        .map(edge => {
+          const otherId = edge.from === node.id ? edge.to : edge.from;
+          const other = rawGraph.nodes.find(item => item.id === otherId) || { id: otherId, title: otherId, type: 'Event' };
+          const direction = edge.from === node.id ? '→' : '←';
+          return `
+            <button class="related-node-btn" data-detail-node="${escapeHtml(otherId)}">
+              <span>${direction}</span>
+              <strong>${escapeHtml(other.title || other.id)}</strong>
+              <em>${escapeHtml(edge.type || 'related')}</em>
+            </button>
+          `;
+        }).join('');
       detail.innerHTML = `
         <div class="type-badge" style="background:${nodeColor(node.type)}">${escapeHtml(typeLabel(node.type))}</div>
         <div class="detail-title">${escapeHtml(node.title || node.id)}</div>
         ${node.summary ? `<div class="detail-summary">${escapeHtml(node.summary)}</div>` : ''}
-        ${jumpHtml}
+        <div class="detail-actions">
+          ${jumpHtml}
+          ${sourceHtml}
+          <button class="jump-btn secondary" data-graph-action="expand">${t('expand')}</button>
+          <button class="jump-btn secondary" data-graph-action="focus">${focusNodeId === node.id ? t('clear_focus') : t('focus')}</button>
+          <button class="jump-btn secondary" data-graph-action="path-start">${t('path_start')}</button>
+        </div>
         ${metrics}
         <div class="detail-summary">
           ${source ? `<strong>source:</strong> ${escapeHtml(source)}<br>` : ''}
           ${updatedAt ? `<strong>updated:</strong> ${escapeHtml(updatedAt)}` : ''}
         </div>
+        ${relatedRows ? `<div class="related-node-list">${relatedRows}</div>` : ''}
         ${metadataStr ? `<div class="meta-block">${escapeHtml(metadataStr)}</div>` : ''}
       `;
+      detail.querySelectorAll('[data-graph-action]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const action = btn.dataset.graphAction;
+          if (action === 'expand') expandNode(node).catch(error => { searchCountEl.textContent = error.message; });
+          if (action === 'focus') toggleFocus(node);
+          if (action === 'path-start') {
+            pathStartId = node.id;
+            pathNodeIds = new Set();
+            pathEdgeKeys = new Set();
+            renderFocusChip();
+            wakeUp();
+          }
+        });
+      });
+      detail.querySelectorAll('[data-detail-node]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const next = rawGraph.nodes.find(item => item.id === btn.dataset.detailNode);
+          if (next) {
+            showDetail(next);
+            centerOnNode(next, Math.max(cam.scale, 0.95));
+          }
+        });
+      });
       wakeUp();
     }
 
@@ -1047,6 +1310,7 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     }
 
     function renderSearchResults() {
+      document.querySelector('.search-shell')?.classList.toggle('search-open', Boolean(searchInput.value.trim()));
       if (!searchInput.value.trim()) {
         searchResultsEl.innerHTML = `<p class="search-empty">${t('search_empty')}</p>`;
         return;
@@ -1240,6 +1504,14 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       wakeUp();
     }, { passive: false });
 
+    canvas.addEventListener('dblclick', event => {
+      const rect = canvas.getBoundingClientRect();
+      const node = nodeAt(event.clientX - rect.left, event.clientY - rect.top);
+      if (node) expandNode(node).catch(error => {
+        searchCountEl.textContent = error.message;
+      });
+    });
+
     let lastTouchDistance = null;
     canvas.addEventListener('touchstart', event => {
       event.preventDefault();
@@ -1320,6 +1592,11 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     });
 
     document.getElementById('clear-search-btn').addEventListener('click', clearSearch);
+    document.getElementById('fit-btn').addEventListener('click', fitToScreen);
+    document.getElementById('expand-btn').addEventListener('click', () => expandNode().catch(error => { searchCountEl.textContent = error.message; }));
+    document.getElementById('collapse-btn').addEventListener('click', () => collapseNode());
+    document.getElementById('focus-btn').addEventListener('click', () => toggleFocus());
+    document.getElementById('path-btn').addEventListener('click', () => showShortestPath().catch(error => { searchCountEl.textContent = error.message; }));
     document.addEventListener('click', event => {
       if (!event.target.closest('.lang-picker')) {
         document.querySelectorAll('.lang-picker-menu').forEach(menu => menu.classList.remove('open'));
@@ -1329,6 +1606,11 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       rawGraph = { nodes: [], edges: [] };
       graph = { nodes: [], edges: [] };
       selected = null;
+      focusNodeId = null;
+      pathStartId = null;
+      pathNodeIds = new Set();
+      pathEdgeKeys = new Set();
+      hiddenNodeIds = new Set();
       loadGraph().catch(error => {
         detail.innerHTML = `<div class="type-badge" style="background:${nodeColor('ClearEvent')}; color:#091019">${t('error')}</div><div class="detail-title">${t('graph_refresh_fail')}</div><div class="detail-summary">${escapeHtml(error.message)}</div>`;
       });