memorix 1.0.6 → 1.0.7

package/dist/dashboard/static/app.js

@@ -43,6 +43,8 @@ const i18n = {
     noObsTitle: 'No Observations',
     noObsDesc: 'Use memorix_store to create observations',
     untitled: 'Untitled',
+    unknown: 'unknown',
+    lowQuality: 'cleanup candidate',
     exportData: 'Export',
     deleteObs: 'Delete',
     deleteConfirm: 'Delete observation #%id%?',
@@ -50,6 +52,7 @@ const i18n = {
     selected: 'selected',
     cancel: 'Cancel',
     deleteSelected: 'Delete Selected',
+    deleteFailed: 'Delete failed',
     batchDeleteConfirm: 'Delete %count% observations?',
     deleted: 'Deleted',
     narrative: 'Narrative',
@@ -93,11 +96,11 @@ const i18n = {
     noRetentionData: 'No Retention Data',
     noRetentionDesc: 'Store observations to see memory retention scores',
 
-    // Team
-    teamTitle: 'Team',
-    teamSubtitle: 'Multi-agent collaboration overview',
-    teamNoData: 'Team features require HTTP transport',
-    teamNoDataHint: 'Team collaboration (agents, file locks, tasks) requires the HTTP transport. Start it with:',
+    // Team → Collaboration Space
+    teamTitle: 'Collaboration',
+    teamSubtitle: 'Project collaboration status — who\'s working, what\'s pending',
+    teamNoData: 'Collaboration requires HTTP transport',
+    teamNoDataHint: 'Project collaboration (agents, file locks, tasks) requires the HTTP transport. Start it with:',
     teamActiveAgents: 'Active Agents',
     teamLockedFiles: 'Locked Files',
     teamTasks: 'Tasks',
@@ -105,6 +108,17 @@ const i18n = {
     teamAgents: 'Agents',
     teamLocks: 'File Locks',
     teamTaskBoard: 'Task Board',
+    // Resume area
+    resumeTitle: 'Continue This Project',
+    resumeDesc: 'What needs attention right now',
+    resumeOpenTasks: 'Open tasks',
+    resumeAvailableTasks: 'Available to claim',
+    resumeOpenHandoffs: 'Pending handoffs',
+    resumeUnreadMessages: 'Unread messages',
+    resumeActiveLocks: 'Active locks',
+    resumeActiveAgents: 'Active agents',
+    resumeAllClear: 'All clear — nothing pending',
+    resumeAllClearDesc: 'No open tasks, handoffs, or unread messages',
 
     // Overview (new)
     memoryControlPlane: 'Memory Control Plane',
@@ -115,7 +129,7 @@ const i18n = {
     thisWeek: 'this week',
     hooksAndMcp: 'hooks + MCP',
     memorySources: 'Memory Sources',
-    retentionHealth: 'Retention Health',
+    retentionHealth: 'Retention Summary',
     sourceGit: 'Git',
     sourceAgent: 'Agent',
     sourceManual: 'Manual',
@@ -154,8 +168,8 @@ const i18n = {
     identityTitle: 'Project Identity Health',
     identitySubtitle: 'Project ID stability, aliases, and cross-agent consistency',
     healthStatus: 'Health Status',
-    healthy: '✓ Healthy',
-    unhealthy: '⚠ Issues',
+    healthy: 'Healthy',
+    unhealthy: 'Issues',
     knownProjectIds: 'Known Project IDs',
     aliasGroups: 'Alias Groups',
     dirtyIds: 'Dirty IDs',
@@ -173,8 +187,8 @@ const i18n = {
     identityUnavailable: 'Identity Unavailable',
     identityUnavailableDesc: 'Could not load project identity data',
 
-    // System Health
-    systemHealth: 'System Health',
+    // System Status
+    systemStatus: 'System Status',
     searchMode: 'Search Mode',
     embeddingProvider: 'Embedding Provider',
     backfillPending: 'Backfill Pending',
@@ -185,7 +199,138 @@ const i18n = {
     providerDisabled: 'Disabled (BM25 only)',
     degradedHint: 'Search is degraded — no vector similarity',
 
-    // Nav tooltips
+    // Project states
+    noProjects: 'No projects',
+    error: 'Error',
+    projectUnresolved: 'Unresolved',
+    projectUnresolvedDesc: 'No project bound — select a project from the switcher',
+    projectResolved: 'Resolved',
+    projectScopeProject: 'Project Collaboration',
+    projectScopeGlobal: 'All Projects',
+    projectScopeProjectDesc: 'Current project\'s collaboration space',
+    projectScopeGlobalDesc: 'All agents across projects',
+
+    // Team (additional)
+    teamMessages: 'Messages',
+    teamAllRead: 'All read',
+    teamUnread: 'unread',
+    teamNoAgentsProject: 'No agents in this session',
+    teamNoAgentsGlobal: 'No agents in any scope',
+    teamNoFilesLocked: 'No files locked',
+    teamNoTasksCreated: 'No tasks created',
+    teamPending: 'pending',
+    teamActive: 'active',
+    teamDone: 'done',
+    teamRefresh: 'Refresh',
+    teamProjectBtn: 'Project',
+    teamGlobalBtn: 'Global',
+    teamOffline: 'offline',
+    teamLive: 'live',
+    teamFile: 'file',
+    // H1/H2: Activity layering
+    teamTierActive: 'Active',
+    teamTierRecent: 'Recent',
+    teamTierHistorical: 'Historical',
+    teamTierAll: 'All',
+    teamRecentCount: 'recent',
+    teamHistoricalCount: 'historical',
+    teamHistoricalTotal: 'Historical total',
+    teamHistoricalHint: 'Inactive for more than 7 days. Not current collaborators.',
+    teamRecentHint: 'Inactive, last seen within 7 days.',
+    teamShowHistorical: 'Show historical',
+    teamHideHistorical: 'Hide historical',
+    teamNoActiveNow: 'No active agents right now',
+    teamNoRecent: 'No agents seen in the last 7 days',
+    teamSummaryHint: 'Headline shows currently active. Historical rows are collapsed by default.',
+    // Resume area
+    resumeTitle: 'Continue This Project',
+    resumeDesc: 'Pick up where you left off',
+    resumeOpenTasks: 'Open tasks',
+    resumeAvailableTasks: 'available to claim',
+    resumeOpenHandoffs: 'Open handoffs',
+    resumeUnreadMessages: 'Unread messages',
+    resumeActiveLocks: 'Active locks',
+    resumeActiveAgents: 'Active agents',
+    resumeAllClear: 'All clear',
+    resumeAllClearDesc: 'No pending tasks, handoffs, or locks',
+    // H3: Identity layering
+    identityHealthPrimary: 'Current project health',
+    identityRealProjects: 'Real projects',
+    identityTemporary: 'Temporary / smoke / demo',
+    identityPlaceholder: 'Placeholder / broken',
+    identityUnmergedFragments: 'Unmerged real fragments',
+    identityAliasGroupsReal: 'Alias groups (real projects only)',
+    identityAliasGroupsAll: 'Alias groups (all, including historical)',
+    identityHistoricalFold: 'Historical / temporary project IDs',
+    identityHistoricalNote: 'These include smoke/demo/test scratch projects and placeholder IDs. Not counted toward current health.',
+    identityShowHistorical: 'Show historical project IDs',
+    identityHideHistorical: 'Hide historical',
+    // H4/H5: Project switcher groups
+    switcherGroupCurrent: 'Current',
+    switcherGroupReal: 'Real projects',
+    switcherGroupTemporary: 'Temporary / smoke / demo',
+    switcherGroupPlaceholder: 'Placeholder',
+    switcherShowTemp: 'Show temporary',
+    switcherHideTemp: 'Hide temporary',
+    switcherTempCount: 'temp',
+    teamNoRole: 'no role',
+    teamAvailableToClaim: 'available to claim',
+    teamActiveCount: 'active',
+    teamRoles: 'Roles',
+    teamDefined: 'Defined',
+    teamHandoffs: 'Handoffs',
+    teamOpen: 'Open',
+    taskPending: 'Pending',
+    taskInProgress: 'In Progress',
+    taskCompleted: 'Done',
+    taskFailed: 'Failed',
+
+    // Graph (additional)
+    graphIsolatedEntities: 'Isolated Entities',
+    graphIsolatedDesc: 'entities with no relations — shown separately for readability',
+    graphConnected: 'Connected',
+    graphNeighborhood: 'Neighborhood',
+    graphFullGraph: 'Full Graph',
+    graphTopology: 'Topology',
+    graphTable: 'Table',
+    graphSearch: 'Search',
+    graphScope: 'Scope',
+    graphView: 'View',
+    graphLayout: 'Layout',
+    graphEntityType: 'Entity Type',
+    graphDepth: 'Depth',
+    graphConnections: 'Connections',
+    graphEvidence: 'Evidence',
+    graphObservations: 'Observations',
+    graphRelations: 'Relations',
+    graphSparseWarning: 'Sparse graph: %isolated% of %total% entities have no relations. Isolated entities shown in inventory below.',
+    graphNoRelations: 'No relations — isolated entities only',
+    graphNoRelationsDesc: 'This project has entities but no relations between them. All entities are shown in the inventory panel below.',
+    graphEmptyState: 'No Graph Data',
+    graphEmptyStateDesc: 'Create entities and relations to see your knowledge graph',
+    graphSelectNode: 'Select a node to inspect',
+    graphFindEntity: 'Find entity...',
+    graphLeftToRight: 'Left → Right',
+    graphTopToBottom: 'Top → Bottom',
+    graphMore: 'more',
+
+    // Identity (additional)
+    identityCurrentProject: 'Current Project',
+    identityHistoricalProjects: 'Historical Projects',
+    identityProjectBound: 'Project bound and healthy',
+    identityProjectUnbound: 'Project not bound — select a project',
+    identityDirtyCurrentWarning: 'Current project has dirty IDs that need resolution',
+    identityDirtyHistoricalNote: 'Dirty IDs from other projects (not affecting current project)',
+    identityTotalCount: 'total',
+
+    // Config (additional)
+    configProjectUnavailable: 'Project config unavailable',
+    configProjectUnavailableDesc: 'Project root path is unknown — project-scoped config files cannot be resolved',
+
+    // Git Memory (additional)
+    gitMemoryTotal: 'total',
+
+    // Nav tooltips + labels
     navDashboard: 'Dashboard',
     navGitMemory: 'Git Memory',
     navGraph: 'Knowledge Graph',
@@ -194,7 +339,44 @@ const i18n = {
     navConfig: 'Config',
     navIdentity: 'Identity',
     navSessions: 'Sessions',
-    navTeam: 'Team',
+    navTeam: 'Collaboration',
+    navLabelDashboard: 'Overview',
+    navLabelGitMemory: 'Git Memory',
+    navLabelGraph: 'Graph',
+    navLabelObservations: 'Observations',
+    navLabelRetention: 'Retention',
+    navLabelConfig: 'Config',
+    navLabelIdentity: 'Identity',
+    navLabelSessions: 'Sessions',
+    navLabelTeam: 'Collaboration',
+    sectionCore: 'CORE',
+    sectionHealth: 'HEALTH',
+    sectionCollaboration: 'COLLABORATION',
+    themeDark: 'Dark',
+    themeLight: 'Light',
+    loading: 'Loading...',
+    searchProjects: 'Search projects...',
+
+    // Mode banner
+    modeStandalone: 'Standalone',
+    modeControlPlane: 'Control Plane',
+    modeStandaloneHint: 'No live MCP — team features unavailable',
+    modeControlPlaneHint: 'Full MCP + team collaboration',
+    modeBannerProject: 'Project',
+    modeBannerMcp: 'MCP',
+
+    // Time ago
+    timeAgoS: 's ago',
+    timeAgoM: 'm ago',
+    timeAgoH: 'h ago',
+    timeAgoD: 'd ago',
+    timeExpired: 'expired',
+    timeLeft: 'm left',
+    teamJoined: 'joined',
+    teamSeen: 'seen',
+    teamLeft: 'left',
+    persistedAgentsAvailable: 'persisted agent(s) available in',
+    sessionsCount: 'session(s)',
   },
   zh: {
     // Dashboard
@@ -231,13 +413,16 @@ const i18n = {
     noObsTitle: '暂无观察记录',
     noObsDesc: '使用 memorix_store 创建观察记录',
     untitled: '无标题',
+    unknown: '未知',
+    lowQuality: '清理候选',
     exportData: '导出',
     deleteObs: '删除',
     deleteConfirm: '确认删除观察 #%id%？',
     batchCleanup: '清理',
     selected: '已选中',
     cancel: '取消',
-    deleteSelected: '删除选中',
+    deleteSelected: '删除所选',
+    deleteFailed: '删除失败',
     batchDeleteConfirm: '确认删除 %count% 条观察？',
     deleted: '已删除',
     narrative: '叙述',
@@ -281,11 +466,11 @@ const i18n = {
     noRetentionData: '暂无衰减数据',
     noRetentionDesc: '存储观察记录以查看记忆衰减分数',
 
-    // Team
-    teamTitle: '团队',
-    teamSubtitle: '多 Agent 协作概览',
-    teamNoData: '团队功能需要 HTTP 传输',
-    teamNoDataHint: '团队协作（Agent 注册、文件锁、任务看板）需要 HTTP 传输模式。使用以下命令启动：',
+    // Team → 协作空间
+    teamTitle: '协作',
+    teamSubtitle: '项目协作状态 — 谁在工作、什么待处理',
+    teamNoData: '协作功能需要 HTTP 传输',
+    teamNoDataHint: '项目协作（Agent 注册、文件锁、任务看板）需要 HTTP 传输模式。使用以下命令启动：',
     teamActiveAgents: '活跃 Agent',
     teamLockedFiles: '锁定文件',
     teamTasks: '任务',
@@ -293,6 +478,17 @@ const i18n = {
     teamAgents: 'Agent 列表',
     teamLocks: '文件锁',
     teamTaskBoard: '任务看板',
+    // Resume area
+    resumeTitle: '继续这个项目',
+    resumeDesc: '当前需要关注的事项',
+    resumeOpenTasks: '待处理任务',
+    resumeAvailableTasks: '可领取任务',
+    resumeOpenHandoffs: '待接交接',
+    resumeUnreadMessages: '未读消息',
+    resumeActiveLocks: '活跃锁',
+    resumeActiveAgents: '活跃 Agent',
+    resumeAllClear: '全部就绪 — 无待处理项',
+    resumeAllClearDesc: '无待处理任务、交接或未读消息',
 
     // Overview (new)
     memoryControlPlane: '记忆控制台',
@@ -303,7 +499,7 @@ const i18n = {
     thisWeek: '本周新增',
     hooksAndMcp: 'hooks + MCP',
     memorySources: '记忆来源',
-    retentionHealth: '衰减健康度',
+    retentionHealth: '保留摘要',
     sourceGit: 'Git',
     sourceAgent: 'Agent',
     sourceManual: '手动',
@@ -342,8 +538,8 @@ const i18n = {
     identityTitle: '项目身份健康度',
     identitySubtitle: '项目 ID 稳定性、别名和跨 Agent 一致性',
     healthStatus: '健康状态',
-    healthy: '✓ 健康',
-    unhealthy: '⚠ 存在问题',
+    healthy: '健康',
+    unhealthy: '存在问题',
     knownProjectIds: '已知项目 ID',
     aliasGroups: '别名组',
     dirtyIds: '脏 ID',
@@ -361,8 +557,8 @@ const i18n = {
     identityUnavailable: '身份信息不可用',
     identityUnavailableDesc: '无法加载项目身份数据',
 
-    // System Health
-    systemHealth: '系统健康',
+    // System Status
+    systemStatus: '系统状态',
     searchMode: '搜索模式',
     embeddingProvider: '向量提供者',
     backfillPending: '回填待处理',
@@ -373,6 +569,142 @@ const i18n = {
     providerDisabled: '已禁用 (仅 BM25)',
     degradedHint: '搜索已降级 — 无向量相似性',
 
+    // Project states
+    noProjects: '无项目',
+    error: '错误',
+    projectUnresolved: '未绑定',
+    projectUnresolvedDesc: '无项目绑定 — 请从切换器选择项目',
+    projectResolved: '已绑定',
+    projectScopeProject: '项目协作',
+    projectScopeGlobal: '所有项目',
+    projectScopeProjectDesc: '当前项目的协作空间',
+    projectScopeGlobalDesc: '所有项目中的 Agent',
+
+    // Team (additional)
+    teamMessages: '消息',
+    teamAllRead: '全部已读',
+    teamUnread: '未读',
+    teamNoAgentsProject: '当前会话无 Agent',
+    teamNoAgentsGlobal: '任何范围均无 Agent',
+    teamNoFilesLocked: '无文件锁定',
+    teamNoTasksCreated: '无已创建任务',
+    teamPending: '待处理',
+    teamActive: '进行中',
+    teamDone: '已完成',
+    teamRefresh: '刷新',
+    teamProjectBtn: '项目',
+    teamGlobalBtn: '全局',
+    teamOffline: '离线',
+    teamLive: '在线',
+    teamFile: '文件',
+    // H1/H2: 活跃度分层
+    teamTierActive: '活跃',
+    teamTierRecent: '近期',
+    teamTierHistorical: '历史',
+    teamTierAll: '全部',
+    teamRecentCount: '近期',
+    teamHistoricalCount: '历史',
+    teamHistoricalTotal: '历史累计',
+    teamHistoricalHint: '超过 7 天无活动，非当前协作成员',
+    teamRecentHint: '未活跃，最近 7 天内有过心跳',
+    teamShowHistorical: '显示历史',
+    teamHideHistorical: '隐藏历史',
+    teamNoActiveNow: '当前无活跃 Agent',
+    teamNoRecent: '最近 7 天无 Agent 活动',
+    teamSummaryHint: '标题显示当前活跃数。历史数据默认折叠。',
+    // Resume area
+    resumeTitle: '继续此项目',
+    resumeDesc: '从上次中断处继续',
+    resumeOpenTasks: '待办任务',
+    resumeAvailableTasks: '可认领',
+    resumeOpenHandoffs: '待接手',
+    resumeUnreadMessages: '未读消息',
+    resumeActiveLocks: '文件锁',
+    resumeActiveAgents: '活跃 Agent',
+    resumeAllClear: '一切就绪',
+    resumeAllClearDesc: '无待办任务、待接手或文件锁',
+    // H3: Identity 分层
+    identityHealthPrimary: '当前项目健康',
+    identityRealProjects: '真实项目',
+    identityTemporary: '临时 / smoke / 演示',
+    identityPlaceholder: 'Placeholder / 损坏',
+    identityUnmergedFragments: '未合并的真实项目碎片',
+    identityAliasGroupsReal: '别名组（仅真实项目）',
+    identityAliasGroupsAll: '别名组（全部，含历史）',
+    identityHistoricalFold: '历史 / 临时项目 ID',
+    identityHistoricalNote: '包含 smoke/demo/测试临时项目与 placeholder ID，不计入当前健康。',
+    identityShowHistorical: '显示历史项目 ID',
+    identityHideHistorical: '隐藏历史',
+    // H4/H5: 项目切换器分组
+    switcherGroupCurrent: '当前',
+    switcherGroupReal: '真实项目',
+    switcherGroupTemporary: '临时 / smoke / 演示',
+    switcherGroupPlaceholder: 'Placeholder',
+    switcherShowTemp: '显示临时项目',
+    switcherHideTemp: '隐藏临时项目',
+    switcherTempCount: '临时',
+    teamNoRole: '无角色',
+    teamAvailableToClaim: '可领取',
+    teamActiveCount: '活跃',
+    teamRoles: '角色',
+    teamDefined: '已定义',
+    teamHandoffs: '交接',
+    teamOpen: '待领取',
+    taskPending: '待处理',
+    taskInProgress: '进行中',
+    taskCompleted: '已完成',
+    taskFailed: '失败',
+
+    // Sessions (additional)
+    sessionsTimeline: '时间线',
+    sessionsTotal: '总计',
+    sessionsTotalLower: '总计',
+
+    // Graph (additional)
+    graphIsolatedEntities: '孤立实体',
+    graphIsolatedDesc: '无关系的实体 — 单独显示以提高可读性',
+    graphConnected: '已连接',
+    graphNeighborhood: '邻域',
+    graphFullGraph: '完整图谱',
+    graphTopology: '拓扑',
+    graphTable: '表格',
+    graphSearch: '搜索',
+    graphScope: '范围',
+    graphView: '视图',
+    graphLayout: '布局',
+    graphEntityType: '实体类型',
+    graphDepth: '深度',
+    graphConnections: '连接数',
+    graphEvidence: '证据',
+    graphObservations: '观察',
+    graphRelations: '关系',
+    graphSparseWarning: '稀疏图谱：%isolated% / %total% 个实体无关系。孤立实体显示在下方清单中。',
+    graphNoRelations: '无关系 — 仅有孤立实体',
+    graphNoRelationsDesc: '此项目有实体但无关系。所有实体显示在下方清单面板中。',
+    graphEmptyState: '暂无图谱数据',
+    graphEmptyStateDesc: '创建实体和关系来查看知识图谱',
+    graphSelectNode: '选择节点以查看详情',
+    graphFindEntity: '查找实体...',
+    graphLeftToRight: '从左到右',
+    graphTopToBottom: '从上到下',
+    graphMore: '更多',
+
+    // Identity (additional)
+    identityCurrentProject: '当前项目',
+    identityHistoricalProjects: '历史项目',
+    identityProjectBound: '项目已绑定且健康',
+    identityProjectUnbound: '项目未绑定 — 请选择项目',
+    identityDirtyCurrentWarning: '当前项目存在需要解决的脏 ID',
+    identityDirtyHistoricalNote: '来自其他项目的脏 ID（不影响当前项目）',
+    identityTotalCount: '总计',
+
+    // Config (additional)
+    configProjectUnavailable: '项目配置不可用',
+    configProjectUnavailableDesc: '项目根路径未知 — 无法解析项目级配置文件',
+
+    // Git Memory (additional)
+    gitMemoryTotal: '总计',
+
     // Nav tooltips
     navDashboard: '仪表盘',
     navGitMemory: 'Git 记忆',
@@ -382,11 +714,51 @@ const i18n = {
     navConfig: '配置溯源',
     navIdentity: '身份健康',
     navSessions: '会话',
-    navTeam: '团队',
+    navTeam: '协作',
+    navLabelDashboard: '概览',
+    navLabelGitMemory: 'Git 记忆',
+    navLabelGraph: '图谱',
+    navLabelObservations: '观察',
+    navLabelRetention: '衰减',
+    navLabelConfig: '配置',
+    navLabelIdentity: '身份',
+    navLabelSessions: '会话',
+    navLabelTeam: '协作',
+    sectionCore: '核心',
+    sectionHealth: '健康',
+    sectionCollaboration: '协作',
+    themeDark: '深色',
+    themeLight: '浅色',
+    loading: '加载中...',
+    searchProjects: '搜索项目...',
+
+    // Mode banner
+    modeStandalone: '独立模式',
+    modeControlPlane: '控制平面',
+    modeStandaloneHint: '无实时 MCP — 团队功能不可用',
+    modeControlPlaneHint: '完整 MCP + 团队协作',
+    modeBannerProject: '项目',
+    modeBannerMcp: 'MCP',
+
+    // Time ago
+    timeAgoS: '秒前',
+    timeAgoM: '分钟前',
+    timeAgoH: '小时前',
+    timeAgoD: '天前',
+    timeExpired: '已过期',
+    timeLeft: '分钟剩余',
+    teamJoined: '加入',
+    teamSeen: '活跃',
+    teamLeft: '离开',
+    persistedAgentsAvailable: '个持久化代理可用，在',
+    sessionsCount: '个会话',
   },
 };
 
 let currentLang = localStorage.getItem('memorix-lang') || 'en';
+let dashboardMode = 'standalone'; // 'standalone' | 'control-plane'
+let dashboardPort = 3210;
+let mcpEndpoint = null;
 
 function t(key) {
   return (i18n[currentLang] && i18n[currentLang][key]) || i18n.en[key] || key;
@@ -395,18 +767,43 @@ function t(key) {
 function setLang(lang) {
   currentLang = lang;
   localStorage.setItem('memorix-lang', lang);
+  document.documentElement.lang = lang;
 
-  // Update label text
+  // Update lang toggle label
   const label = document.getElementById('lang-label');
   if (label) label.textContent = lang === 'en' ? '中文' : 'EN';
 
-  // Update nav tooltips
-  const tooltipMap = { dashboard: 'navDashboard', graph: 'navGraph', observations: 'navObservations', retention: 'navRetention', sessions: 'navSessions', team: 'navTeam' };
+  // Update nav tooltips + labels
+  const tooltipMap = { dashboard: 'navDashboard', 'git-memory': 'navGitMemory', graph: 'navGraph', observations: 'navObservations', retention: 'navRetention', config: 'navConfig', identity: 'navIdentity', sessions: 'navSessions', team: 'navTeam' };
+  const labelMap = { dashboard: 'navLabelDashboard', 'git-memory': 'navLabelGitMemory', graph: 'navLabelGraph', observations: 'navLabelObservations', retention: 'navLabelRetention', config: 'navLabelConfig', identity: 'navLabelIdentity', sessions: 'navLabelSessions', team: 'navLabelTeam' };
   document.querySelectorAll('.nav-btn').forEach(b => {
     const page = b.dataset.page;
     if (page && tooltipMap[page]) b.title = t(tooltipMap[page]);
+    if (page && labelMap[page]) {
+      const span = b.querySelector('.nav-label');
+      if (span) span.textContent = t(labelMap[page]);
+    }
   });
 
+  // Update section labels
+  const sectionMap = { core: 'sectionCore', health: 'sectionHealth', collaboration: 'sectionCollaboration' };
+  document.querySelectorAll('.sidebar-section-label').forEach(el => {
+    const key = sectionMap[el.dataset.section];
+    if (key) el.textContent = t(key);
+  });
+
+  // Update theme label
+  const themeLabel = document.getElementById('theme-label');
+  if (themeLabel) themeLabel.textContent = currentTheme === 'dark' ? t('themeDark') : t('themeLight');
+
+  // Update project search placeholder
+  const projectSearch = document.getElementById('project-search');
+  if (projectSearch) projectSearch.placeholder = t('searchProjects');
+
+  // Update project name loading text
+  const projectName = document.getElementById('project-name');
+  if (projectName && projectName.textContent === 'Loading...') projectName.textContent = t('loading');
+
   // Force reload all pages
   Object.keys(loaded).forEach(k => delete loaded[k]);
   loadPage(currentPage);
@@ -442,7 +839,7 @@ function applyTheme(theme) {
     sunIcon.style.display = theme === 'dark' ? 'none' : 'block';
     moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
   }
-  if (themeLabel) themeLabel.textContent = theme === 'dark' ? 'Dark' : 'Light';
+  if (themeLabel) themeLabel.textContent = theme === 'dark' ? t('themeDark') : t('themeLight');
 
   // Force reload current page so Canvas graph redraws with new colors
   try {
@@ -501,6 +898,32 @@ document.querySelectorAll('.nav-btn').forEach(btn => {
 
 let selectedProject = ''; // empty = current project (default)
 
+// Update sidebar mode badge — shows standalone/control-plane, port, MCP endpoint
+function updateModeBadge() {
+  const badge = document.getElementById('mode-badge');
+  const label = document.getElementById('mode-badge-label');
+  const portEl = document.getElementById('mode-badge-port');
+  const mcpEl = document.getElementById('mode-badge-mcp');
+  if (!badge || !label || !portEl || !mcpEl) return;
+
+  const isCP = dashboardMode === 'control-plane';
+  label.textContent = isCP ? t('modeControlPlane') : t('modeStandalone');
+  label.className = 'mode-badge-label ' + (isCP ? 'control-plane' : 'standalone');
+  portEl.textContent = ':' + dashboardPort;
+
+  if (isCP && mcpEndpoint) {
+    mcpEl.style.display = '';
+    mcpEl.textContent = t('modeBannerMcp') + ' ' + mcpEndpoint.replace('http://127.0.0.1', '');
+    mcpEl.title = mcpEndpoint;
+    mcpEl.onclick = () => { navigator.clipboard.writeText(mcpEndpoint).catch(() => {}); };
+  } else {
+    mcpEl.style.display = 'none';
+  }
+
+  badge.style.display = 'flex';
+  badge.title = isCP ? t('modeControlPlaneHint') : t('modeStandaloneHint');
+}
+
 async function api(endpoint) {
   try {
     const sep = endpoint.includes('?') ? '&' : '?';
@@ -521,6 +944,7 @@ async function api(endpoint) {
 // ============================================================
 
 let allProjects = [];
+let projectShowTemp = false; // H4: collapse temp/placeholder by default
 
 async function initProjectSwitcher() {
   const switcher = document.getElementById('project-switcher');
@@ -541,7 +965,7 @@ async function initProjectSwitcher() {
     const res = await fetch('/api/projects');
     allProjects = await res.json();
     if (!Array.isArray(allProjects) || allProjects.length === 0) {
-      nameEl.textContent = 'No projects';
+      nameEl.textContent = t('noProjects');
       return;
     }
 
@@ -581,7 +1005,7 @@ async function initProjectSwitcher() {
     updateTrigger(active);
     renderProjectList(allProjects, active);
   } catch {
-    nameEl.textContent = 'Error';
+    nameEl.textContent = t('error');
   }
 
   // Toggle dropdown
@@ -617,25 +1041,87 @@ async function initProjectSwitcher() {
   });
 
   function updateTrigger(project) {
+    const isUnresolved = project.id === '__unresolved__';
     nameEl.textContent = project.name;
     nameEl.title = project.id;
     countEl.textContent = project.count || '';
+    // Visual indicator for unresolved project
+    const existingBadge = trigger.querySelector('.project-resolved-badge');
+    if (existingBadge) existingBadge.remove();
+    if (isUnresolved) {
+      const badge = document.createElement('span');
+      badge.className = 'project-resolved-badge';
+      badge.style.cssText = 'font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(245,158,11,0.12);color:var(--accent-amber);margin-left:6px;';
+      badge.textContent = t('projectUnresolved');
+      trigger.appendChild(badge);
+    }
   }
 
   function renderProjectList(projects, activeOverride) {
     const activeId = activeOverride ? activeOverride.id : (selectedProject || allProjects.find(p => p.isCurrent)?.id || '');
-    listEl.innerHTML = projects.map(p => `
-      <button class="project-item${p.id === activeId || (p.isCurrent && !activeId) ? ' active' : ''}"
-              data-id="${escapeHtml(p.id)}" title="${escapeHtml(p.id)}">
-        <span class="project-item-dot"></span>
-        <span class="project-item-name">${escapeHtml(p.name)}</span>
+
+    // H4: Group by kind — current / real / temporary / placeholder
+    const current = projects.find(p => p.id === activeId || (p.isCurrent && !activeId));
+    const real = projects.filter(p => p.kind === 'real' && p !== current);
+    const temporary = projects.filter(p => p.kind === 'temporary');
+    const placeholder = projects.filter(p => p.kind === 'placeholder' && p.id !== '__unresolved__');
+    // Legacy: items without a kind field (pre-1.0.7 API) → treat as real
+    const untagged = projects.filter(p => !p.kind && p !== current);
+    const realCombined = [...real, ...untagged];
+
+    const itemHtml = (p) => {
+      const isUnresolved = p.id === '__unresolved__';
+      const isDirty = p.dirty;
+      const isTemp = p.kind === 'temporary';
+      const isPlaceholder = p.kind === 'placeholder';
+      let badge = '';
+      if (isUnresolved) badge = `<span style="font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(245,158,11,0.12);color:var(--accent-amber);margin-left:4px;">${t('projectUnresolved')}</span>`;
+      else if (isPlaceholder) badge = `<span style="font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(239,68,68,0.12);color:var(--accent-red);margin-left:4px;">${t('switcherGroupPlaceholder')}</span>`;
+      else if (isTemp) badge = `<span style="font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(148,163,184,0.15);color:var(--text-muted);margin-left:4px;">${t('switcherTempCount')}</span>`;
+      else if (isDirty) badge = `<span style="font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(239,68,68,0.12);color:var(--accent-red);margin-left:4px;">${t('tagDirty')}</span>`;
+      const opacity = (isTemp || isPlaceholder) ? 'opacity:0.72;' : '';
+      return `<button class="project-item${p.id === activeId || (p.isCurrent && !activeId) ? ' active' : ''}${isUnresolved ? ' unresolved' : ''}"
+              data-id="${escapeHtml(p.id)}" title="${escapeHtml(p.id)}" style="${opacity}">
+        <span class="project-item-dot"${isUnresolved ? ' style="background:var(--accent-amber);"' : ''}></span>
+        <span class="project-item-name">${escapeHtml(p.name)}${badge}</span>
         <span class="project-item-count">${p.count}</span>
-      </button>
-    `).join('');
+      </button>`;
+    };
+
+    const groupHeader = (label, count) =>
+      `<div style="font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;padding:10px 12px 4px;">${label} <span style="color:var(--text-faint);">(${count})</span></div>`;
+
+    const hideCount = temporary.length + placeholder.length;
+    const tempSectionHtml = (temporary.length + placeholder.length) > 0
+      ? `<div style="border-top:1px dashed var(--border);margin-top:6px;padding-top:4px;">
+          <button class="project-item" style="width:100%;border:none;background:transparent;padding:8px 12px;cursor:pointer;color:var(--text-muted);font-size:11px;text-align:left;"
+                  data-toggle-temp="1">
+            <span class="iconify" data-icon="${projectShowTemp ? 'lucide:chevron-down' : 'lucide:chevron-right'}" style="font-size:12px;vertical-align:middle;margin-right:4px;"></span>
+            ${projectShowTemp ? t('switcherHideTemp') : t('switcherShowTemp')} <span style="color:var(--text-faint);">(${hideCount})</span>
+          </button>
+          ${projectShowTemp ? `
+            ${temporary.length > 0 ? groupHeader(t('switcherGroupTemporary'), temporary.length) + temporary.map(itemHtml).join('') : ''}
+            ${placeholder.length > 0 ? groupHeader(t('switcherGroupPlaceholder'), placeholder.length) + placeholder.map(itemHtml).join('') : ''}
+          ` : ''}
+        </div>`
+      : '';
+
+    listEl.innerHTML =
+      (current ? groupHeader(t('switcherGroupCurrent'), 1) + itemHtml(current) : '') +
+      (realCombined.length > 0 ? groupHeader(t('switcherGroupReal'), realCombined.length) + realCombined.map(itemHtml).join('') : '') +
+      tempSectionHtml;
 
     // Click handlers
-    listEl.querySelectorAll('.project-item').forEach(item => {
-      item.addEventListener('click', () => {
+    const tempToggle = listEl.querySelector('[data-toggle-temp]');
+    if (tempToggle) {
+      tempToggle.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        projectShowTemp = !projectShowTemp;
+        renderProjectList(projects, activeOverride);
+      });
+    }
+    listEl.querySelectorAll('.project-item[data-id]').forEach(item => {
+      item.addEventListener('click', async () => {
         const id = item.dataset.id;
         const project = allProjects.find(p => p.id === id);
         if (!project) return;
@@ -648,6 +1134,15 @@ async function initProjectSwitcher() {
         listEl.querySelectorAll('.project-item').forEach(el => el.classList.remove('active'));
         item.classList.add('active');
 
+        // Sync to backend so all API endpoints use the new project
+        try {
+          await fetch('/api/set-current-project', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ projectId: project.id, projectName: project.name }),
+          });
+        } catch { /* best effort */ }
+
         // Reload pages
         Object.keys(loaded).forEach(k => delete loaded[k]);
         loadPage(currentPage);
@@ -693,10 +1188,20 @@ async function loadDashboard() {
 
   const [stats, project] = await Promise.all([api('stats'), api('project')]);
   if (!stats) {
-    container.innerHTML = emptyState('📊', t('noData'), t('noDataDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:bar-chart-3" style="font-size:36px;"></span>', t('noData'), t('noDataDesc'));
     return;
   }
 
+  // Capture mode info from project API
+  if (project) {
+    dashboardMode = project.mode || 'standalone';
+    dashboardPort = project.port || 3210;
+    mcpEndpoint = project.mcpEndpoint || null;
+  }
+
+  // Update sidebar mode badge (4.2: mode/port/MCP must be visible)
+  updateModeBadge();
+
   const projectLabel = project ? project.name : '';
   const sc = stats.sourceCounts || { git: 0, agent: 0, manual: 0 };
   const totalObs = stats.observations || 0;
@@ -704,9 +1209,9 @@ async function loadDashboard() {
   const rs = stats.retentionSummary || { active: 0, stale: 0, archive: 0, immune: 0 };
 
   const typeIcons = {
-    'session-request': '🎯', gotcha: '🔴', 'problem-solution': '🟡',
-    'how-it-works': '🔵', 'what-changed': '🟢', discovery: '🟣',
-    'why-it-exists': '🟠', decision: '🟤', 'trade-off': '⚖️',
+    'session-request': '<span class="iconify" data-icon="lucide:target" style="color:#f87171;"></span>', gotcha: '<span class="iconify" data-icon="lucide:alert-octagon" style="color:#ef4444;"></span>', 'problem-solution': '<span class="iconify" data-icon="lucide:lightbulb" style="color:#fbbf24;"></span>',
+    'how-it-works': '<span class="iconify" data-icon="lucide:info" style="color:#38bdf8;"></span>', 'what-changed': '<span class="iconify" data-icon="lucide:git-branch" style="color:#4ade80;"></span>', discovery: '<span class="iconify" data-icon="lucide:sparkles" style="color:#a78bfa;"></span>',
+    'why-it-exists': '<span class="iconify" data-icon="lucide:help-circle" style="color:#fb923c;"></span>', decision: '<span class="iconify" data-icon="lucide:scale" style="color:#a1887f;"></span>', 'trade-off': '<span class="iconify" data-icon="lucide:scale" style="color:#94a3b8;"></span>',
   };
 
   const typeEntries = Object.entries(stats.typeCounts || {}).sort((a, b) => b[1] - a[1]);
@@ -718,10 +1223,11 @@ async function loadDashboard() {
   const agentPct = Math.round(sc.agent / srcTotal * 100);
   const manualPct = 100 - gitPct - agentPct;
 
+  const modeTitle = dashboardMode === 'control-plane' ? t('memoryControlPlane') : t('modeStandalone');
   container.innerHTML = `
     <div class="page-header">
-      <h1 class="page-title">${t('memoryControlPlane')} ${projectLabel ? `<span class="overview-project-badge">${escapeHtml(projectLabel)}</span>` : ''}</h1>
-      <p class="page-subtitle">${totalObs} ${t('memoriesAcross')} ${stats.entities} ${t('entitiesUnit')}</p>
+      <h1 class="page-title">${modeTitle} ${projectLabel ? `<span class="overview-project-badge">${escapeHtml(projectLabel)}</span>` : ''}</h1>
+      <p class="page-subtitle">${totalObs} ${t('memoriesAcross')} ${stats.entities} ${t('entitiesUnit')}${mcpEndpoint ? ` · ${t('modeBannerMcp')}: <span style="color:var(--accent-blue);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;" onclick="navigator.clipboard.writeText('${mcpEndpoint}').catch(()=>{})" title="${mcpEndpoint}">${mcpEndpoint.replace('http://127.0.0.1','')}</span>` : ''}</p>
     </div>
 
     <div class="stats-grid">
@@ -742,15 +1248,15 @@ async function loadDashboard() {
       </div>
       <div class="stat-card" data-accent="${stats.embedding?.enabled ? 'blue' : 'amber'}">
         <div class="stat-label">${t('vectorSearch')}</div>
-        <div class="stat-value" style="font-size: 18px;">${stats.embedding?.enabled ? '✓ ' + t('enabled') : t('fulltextOnly')}</div>
+        <div class="stat-value" style="font-size: 18px;">${stats.embedding?.enabled ? '<span class="iconify" data-icon="lucide:circle-check" style="font-size:16px;vertical-align:middle;margin-right:3px;color:var(--accent-green);"></span> ' + t('enabled') : t('fulltextOnly')}</div>
         ${stats.embedding?.provider ? `<div class="stat-sub">${stats.embedding.provider} (${stats.embedding.dimensions}d)</div>` : ''}
       </div>
     </div>
 
-    <!-- System Health -->
+    <!-- System Status -->
     <div class="overview-row">
       <div class="panel" style="flex:1;">
-        <div class="panel-header"><span class="panel-title">${t('systemHealth')}</span></div>
+        <div class="panel-header"><span class="panel-title">${t('systemStatus')}</span></div>
         <div class="panel-body">
           <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;">
             <div>
@@ -789,9 +1295,9 @@ async function loadDashboard() {
         <div class="panel-body">
           <div class="source-bar-container">
             <div class="source-bar">
-              ${gitPct > 0 ? `<div class="source-bar-seg" style="width:${gitPct}%;background:var(--accent-green);" title="Git ${gitPct}%"></div>` : ''}
-              ${agentPct > 0 ? `<div class="source-bar-seg" style="width:${agentPct}%;background:var(--accent-purple);" title="Agent ${agentPct}%"></div>` : ''}
-              ${manualPct > 0 ? `<div class="source-bar-seg" style="width:${manualPct}%;background:var(--accent-amber);" title="Manual ${manualPct}%"></div>` : ''}
+              ${gitPct > 0 ? `<div class="source-bar-seg" style="width:${gitPct}%;background:var(--accent-green);" title="${t('sourceGit')} ${gitPct}%"></div>` : ''}
+              ${agentPct > 0 ? `<div class="source-bar-seg" style="width:${agentPct}%;background:var(--accent-purple);" title="${t('sourceAgent')} ${agentPct}%"></div>` : ''}
+              ${manualPct > 0 ? `<div class="source-bar-seg" style="width:${manualPct}%;background:var(--accent-amber);" title="${t('sourceManual')} ${manualPct}%"></div>` : ''}
             </div>
             <div class="source-legend">
               <span class="source-legend-item"><span class="source-dot" style="background:var(--accent-green)"></span> ${t('sourceGit')} <strong>${sc.git}</strong></span>
@@ -924,15 +1430,30 @@ async function loadGraph() {
 
   const graph = await api('graph');
   if (!graph || (graph.entities.length === 0 && graph.relations.length === 0)) {
-    container.innerHTML = emptyState('🕸️', t('noGraphData'), t('noGraphDataDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:network" style="font-size:36px;"></span>', t('noGraphData'), t('noGraphDataDesc'));
     return;
   }
 
+  // Check for no-relations state (only isolated entities)
+  const hasRelations = graph.relations.length > 0;
+
   container.innerHTML = `
     <div class="page-header">
-      <h1 class="page-title">Memory Topology</h1>
-      <p class="page-subtitle">${graph.entities.length} entities · ${graph.relations.length} relations</p>
+      <h1 class="page-title">${t('knowledgeGraph')}</h1>
+      <p class="page-subtitle">${graph.entities.length} ${t('entities').toLowerCase()} · ${graph.relations.length} ${t('relations').toLowerCase()}</p>
     </div>
+    ${!hasRelations && graph.entities.length > 0 ? `
+      <div class="panel" style="margin-bottom:16px;border-color:var(--accent-amber);">
+        <div class="panel-body" style="display:flex;align-items:center;gap:12px;padding:12px 16px;">
+          <span class="iconify" data-icon="lucide:network" style="font-size:20px;color:var(--accent-amber);"></span>
+          <div>
+            <div style="font-weight:600;color:var(--accent-amber);">${t('graphNoRelations')}</div>
+            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">${t('graphNoRelationsDesc')}</div>
+          </div>
+        </div>
+      </div>
+    ` : ''}
+    ${hasRelations ? `
     <div class="graph-layout">
       <div class="graph-filter-panel" id="graph-filter-panel"></div>
       <div id="graph-container">
@@ -951,9 +1472,10 @@ async function loadGraph() {
       </div>
       <div class="graph-table-container" id="graph-table-container" style="display:none;"></div>
       <div class="graph-inspector" id="graph-inspector">
-        <div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>Select a node to inspect</div>
+        <div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>${t('graphSelectNode')}</div>
       </div>
     </div>
+    ` : ''}
     <div id="graph-isolated-panel" style="display:none;"></div>
   `;
 
@@ -1333,8 +1855,8 @@ function renderGraph(graph) {
     panel.innerHTML = `
       <div class="panel" style="margin-top:16px;">
         <div class="panel-header">
-          <span class="panel-title">Isolated Entities</span>
-          <span style="font-size:11px;color:var(--text-muted);">${isolated.length} entities with no relations \u2014 shown separately for readability</span>
+          <span class="panel-title">${t('graphIsolatedEntities')}</span>
+          <span style="font-size:11px;color:var(--text-muted);">${isolated.length} ${t('graphIsolatedDesc')}</span>
         </div>
         <div class="panel-body" style="padding:12px 16px;">
           ${groupEntries.map(([type, entities]) => {
@@ -1355,7 +1877,7 @@ function renderGraph(graph) {
                       ${e.observations.length > 0 ? '<span style="font-size:9px;color:var(--text-muted);">' + e.observations.length + '</span>' : ''}
                     </span>
                   `).join('')}
-                  ${collapsed ? '<span style="font-size:11px;color:var(--text-muted);padding:3px 8px;">+' + (entities.length - 8) + ' more</span>' : ''}
+                  ${collapsed ? '<span style="font-size:11px;color:var(--text-muted);padding:3px 8px;">+' + (entities.length - 8) + ' ' + t('graphMore') + '</span>' : ''}
                 </div>
               </div>
             `;
@@ -1381,7 +1903,7 @@ function renderGraph(graph) {
     const inspector = document.getElementById('graph-inspector');
     if (!inspector) return;
     if (!nodeId || !entityMap[nodeId]) {
-      inspector.innerHTML = '<div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>Select a node to inspect</div>';
+      inspector.innerHTML = '<div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>' + t('graphSelectNode') + '</div>';
       return;
     }
     const entity = entityMap[nodeId];
@@ -1391,7 +1913,7 @@ function renderGraph(graph) {
 
     const obsHtml = entity.observations.length > 0
       ? entity.observations.map(o => `<div class="gi-obs-item">${escapeHtml(o)}</div>`).join('')
-      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">No observations</div>';
+      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">' + t('noObservations') + '</div>';
     const relHtml = related.length > 0
       ? related.map(r => {
         const dir = r.from === nodeId;
@@ -1402,7 +1924,7 @@ function renderGraph(graph) {
           <span class="gi-rel-target" data-inspector-nav="${escapeHtml(other)}">${escapeHtml(other)}</span>
         </div>`;
       }).join('')
-      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">No relations</div>';
+      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">' + t('noRelations') + '</div>';
 
     inspector.innerHTML = `
       <div class="gi-header">
@@ -1413,15 +1935,15 @@ function renderGraph(graph) {
         <div class="gi-type">${escapeHtml(entity.entityType)}</div>
       </div>
       <div class="gi-stats">
-        <div class="gi-stat"><div class="gi-stat-value">${deg}</div><div class="gi-stat-label">Connections</div></div>
-        <div class="gi-stat"><div class="gi-stat-value">${entity.observations.length}</div><div class="gi-stat-label">Evidence</div></div>
+        <div class="gi-stat"><div class="gi-stat-value">${deg}</div><div class="gi-stat-label">${t('graphConnections')}</div></div>
+        <div class="gi-stat"><div class="gi-stat-value">${entity.observations.length}</div><div class="gi-stat-label">${t('graphEvidence')}</div></div>
       </div>
       <div class="gi-section">
-        <div class="gi-section-title">Observations <span class="gi-section-count">${entity.observations.length}</span></div>
+        <div class="gi-section-title">${t('graphObservations')} <span class="gi-section-count">${entity.observations.length}</span></div>
         ${obsHtml}
       </div>
       <div class="gi-section">
-        <div class="gi-section-title">Relations <span class="gi-section-count">${related.length}</span></div>
+        <div class="gi-section-title">${t('graphRelations')} <span class="gi-section-count">${related.length}</span></div>
         ${relHtml}
       </div>
     `;
@@ -1456,32 +1978,32 @@ function renderGraph(graph) {
 
     const searchHtml = `
       <div class="gfp-section">
-        <div class="gfp-label">Search</div>
-        <input type="text" class="gfp-search" id="gfp-search" placeholder="Find entity..." autocomplete="off" />
+        <div class="gfp-label">${t('graphSearch')}</div>
+        <input type="text" class="gfp-search" id="gfp-search" placeholder="${t('graphFindEntity')}" autocomplete="off" />
       </div>
     `;
 
     const scopeHtml = `
       <div class="gfp-section">
-        <div class="gfp-label">Scope</div>
+        <div class="gfp-label">${t('graphScope')}</div>
         <div class="gfp-radio-group">
           <button class="gfp-radio${scope === 'connected' ? ' active' : ''}" data-scope="connected">
-            <span class="gfp-radio-dot"></span> Connected
+            <span class="gfp-radio-dot"></span> ${t('graphConnected')}
           </button>
           <button class="gfp-radio${scope === 'neighborhood' ? ' active' : ''}" data-scope="neighborhood">
-            <span class="gfp-radio-dot"></span> Neighborhood
+            <span class="gfp-radio-dot"></span> ${t('graphNeighborhood')}
           </button>
           <button class="gfp-radio${scope === 'full' ? ' active' : ''}" data-scope="full">
-            <span class="gfp-radio-dot"></span> Full Graph
+            <span class="gfp-radio-dot"></span> ${t('graphFullGraph')}
           </button>
         </div>
-        ${isSparse ? `<div style="font-size:10px;color:var(--accent-amber);margin-top:6px;line-height:1.4;">\u26A0 Sparse graph: ${isolatedCount} of ${graph.entities.length} entities have no relations. Isolated entities shown in inventory below.</div>` : ''}
+        ${isSparse ? `<div style="font-size:10px;color:var(--accent-amber);margin-top:6px;line-height:1.4;">\u26A0 ${t('graphSparseWarning').replace('%isolated%', isolatedCount).replace('%total%', graph.entities.length)}</div>` : ''}
       </div>
     `;
 
     const depthHtml = `
       <div class="gfp-section" id="gfp-depth-section"${scope !== 'neighborhood' ? ' style="display:none"' : ''}>
-        <div class="gfp-label">Depth</div>
+        <div class="gfp-label">${t('graphDepth')}</div>
         <div class="gfp-depth-row">
           <button class="gfp-depth-btn${depth === 1 ? ' active' : ''}" data-depth="1">1</button>
           <button class="gfp-depth-btn${depth === 2 ? ' active' : ''}" data-depth="2">2</button>
@@ -1492,13 +2014,13 @@ function renderGraph(graph) {
 
     const viewHtml = `
       <div class="gfp-section">
-        <div class="gfp-label">View</div>
+        <div class="gfp-label">${t('graphView')}</div>
         <div class="gfp-radio-group">
           <button class="gfp-radio${currentView === 'topology' ? ' active' : ''}" data-view="topology">
-            <span class="gfp-radio-dot"></span> Topology
+            <span class="gfp-radio-dot"></span> ${t('graphTopology')}
           </button>
           <button class="gfp-radio${currentView === 'table' ? ' active' : ''}" data-view="table">
-            <span class="gfp-radio-dot"></span> Table
+            <span class="gfp-radio-dot"></span> ${t('graphTable')}
           </button>
         </div>
       </div>
@@ -1506,13 +2028,13 @@ function renderGraph(graph) {
 
     const layoutHtml = `
       <div class="gfp-section" id="gfp-layout-section"${currentView === 'table' ? ' style="display:none"' : ''}>
-        <div class="gfp-label">Layout</div>
+        <div class="gfp-label">${t('graphLayout')}</div>
         <div class="gfp-radio-group">
           <button class="gfp-radio${currentLayout === 'dagre-lr' ? ' active' : ''}" data-layout="dagre-lr">
-            <span class="gfp-radio-dot"></span> Left \u2192 Right
+            <span class="gfp-radio-dot"></span> ${t('graphLeftToRight')}
           </button>
           <button class="gfp-radio${currentLayout === 'dagre-tb' ? ' active' : ''}" data-layout="dagre-tb">
-            <span class="gfp-radio-dot"></span> Top \u2192 Bottom
+            <span class="gfp-radio-dot"></span> ${t('graphTopToBottom')}
           </button>
         </div>
       </div>
@@ -1521,7 +2043,7 @@ function renderGraph(graph) {
     const typeEntries = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]);
     const filterHtml = `
       <div class="gfp-section">
-        <div class="gfp-label">Entity Type</div>
+        <div class="gfp-label">${t('graphEntityType')}</div>
         <div class="gfp-radio-group">
           ${typeEntries.map(([type, count]) => `
             <button class="gfp-check${activeTypes.has(type) ? ' active' : ''}" data-type-filter="${escapeHtml(type)}">
@@ -1680,12 +2202,12 @@ function renderGraph(graph) {
     const gsEdges = document.getElementById('gs-edges');
     const gsLayout = document.getElementById('gs-layout');
     const gsScope = document.getElementById('gs-scope');
-    if (gsNodes) gsNodes.textContent = `${nodeCount || 0} nodes`;
-    if (gsEdges) gsEdges.textContent = `${edgeCount || 0} edges`;
+    if (gsNodes) gsNodes.textContent = `${nodeCount || 0} ${t('nodes')}`;
+    if (gsEdges) gsEdges.textContent = `${edgeCount || 0} ${t('edges')}`;
     if (gsLayout) gsLayout.textContent = currentLayout === 'dagre-tb' ? 'TB' : 'LR';
-    if (gsScope) gsScope.textContent = scope === 'full' ? 'full' : scope === 'neighborhood' ? `${depth}-hop` : 'connected';
+    if (gsScope) gsScope.textContent = scope === 'full' ? t('graphFullGraph').toLowerCase() : scope === 'neighborhood' ? `${depth}-${t('graphDepth').toLowerCase().slice(0, 3)}` : t('graphConnected').toLowerCase();
     if (isolatedCount > 0 && scope !== 'neighborhood') {
-      if (gsScope) gsScope.textContent += ` · ${isolatedCount} isolated below`;
+      if (gsScope) gsScope.textContent += ` · ${isolatedCount} ${t('graphIsolatedEntities').toLowerCase()}`;
     }
   }
 
@@ -1699,8 +2221,11 @@ function renderGraph(graph) {
 
   // --- Initialize ---
   _graphState = { graph, entityMap, degreeMap, typeColors, showInspector };
-  initCytoscape();
-  renderFilterPanel();
+  const hasGraphCanvas = !!document.getElementById('cytoscape-mount');
+  if (hasGraphCanvas) {
+    initCytoscape();
+    renderFilterPanel();
+  }
   renderIsolatedPanel();
 }
 
@@ -1737,16 +2262,16 @@ function renderBatchToolbar() {
   }
   slot.innerHTML = `
     <div class="batch-toolbar">
-      <span class="batch-count">${selectedIds.size} ${t('selected') || 'selected'}</span>
-      <button class="batch-cancel-btn" onclick="exitBatchMode()">${t('cancel') || 'Cancel'}</button>
-      <button class="batch-delete-btn" onclick="batchDeleteSelected()">🗑️ ${t('deleteSelected') || 'Delete Selected'}</button>
+      <span class="batch-count">${selectedIds.size} ${t('selected')}</span>
+      <button class="batch-cancel-btn" onclick="exitBatchMode()">${t('cancel')}</button>
+      <button class="batch-delete-btn" onclick="batchDeleteSelected()"><span class="iconify" data-icon="lucide:trash-2" style="font-size:13px;vertical-align:middle;margin-right:3px;"></span> ${t('deleteSelected')}</button>
     </div>
   `;
 }
 
 async function batchDeleteSelected() {
   if (selectedIds.size === 0) return;
-  const msg = (t('batchDeleteConfirm') || 'Delete %count% observations?').replace('%count%', selectedIds.size);
+  const msg = t('batchDeleteConfirm').replace('%count%', selectedIds.size);
   if (!confirm(msg)) return;
 
   const sep = selectedProject ? `?project=${encodeURIComponent(selectedProject)}` : '';
@@ -1799,7 +2324,7 @@ async function loadObservations() {
   allObservations = await api('observations') || [];
 
   if (allObservations.length === 0) {
-    container.innerHTML = emptyState('🔍', t('noObsTitle'), t('noObsDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:search" style="font-size:36px;"></span>', t('noObsTitle'), t('noObsDesc'));
     return;
   }
 
@@ -1814,8 +2339,8 @@ async function loadObservations() {
         <p class="page-subtitle">${allObservations.length} ${t('observationsStored')}</p>
       </div>
       <div style="display:flex;gap:8px;">
-        <button class="export-btn" id="btn-batch-cleanup" title="${t('batchCleanup') || 'Batch Cleanup'}">
-          🧹 ${t('batchCleanup') || 'Cleanup'}
+        <button class="export-btn" id="btn-batch-cleanup" title="${t('batchCleanup')}">
+          🧹 ${t('batchCleanup')}
         </button>
         <button class="export-btn" id="btn-export" title="${t('exportData')}">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v8M4 7l4 4 4-4M2 12v2h12v-2"/></svg>
@@ -1879,9 +2404,9 @@ function renderObsList() {
   if (!list) return;
 
   const typeIcons = {
-    'session-request': '🎯', gotcha: '🔴', 'problem-solution': '🟡',
-    'how-it-works': '🔵', 'what-changed': '🟢', discovery: '🟣',
-    'why-it-exists': '🟠', decision: '🟤', 'trade-off': '⚖️',
+    'session-request': '<span class="iconify" data-icon="lucide:target" style="color:#f87171;"></span>', gotcha: '<span class="iconify" data-icon="lucide:alert-octagon" style="color:#ef4444;"></span>', 'problem-solution': '<span class="iconify" data-icon="lucide:lightbulb" style="color:#fbbf24;"></span>',
+    'how-it-works': '<span class="iconify" data-icon="lucide:info" style="color:#38bdf8;"></span>', 'what-changed': '<span class="iconify" data-icon="lucide:git-branch" style="color:#4ade80;"></span>', discovery: '<span class="iconify" data-icon="lucide:sparkles" style="color:#a78bfa;"></span>',
+    'why-it-exists': '<span class="iconify" data-icon="lucide:help-circle" style="color:#fb923c;"></span>', decision: '<span class="iconify" data-icon="lucide:scale" style="color:#a1887f;"></span>', 'trade-off': '<span class="iconify" data-icon="lucide:scale" style="color:#94a3b8;"></span>',
   };
 
   let filtered = allObservations;
@@ -1914,14 +2439,14 @@ function renderObsList() {
         ${batchMode ? `<input type="checkbox" class="obs-checkbox" ${isSelected ? 'checked' : ''} onclick="event.stopPropagation(); toggleObsSelect(${obs.id});" />` : ''}
         <span class="obs-card-id">#${obs.id}</span>
         <span class="type-badge" data-type="${obs.type || 'unknown'}">
-          ${typeIcons[obs.type] || '❓'} ${obs.type || 'unknown'}
+          ${typeIcons[obs.type] || '❓'} ${obs.type || t('unknown')}
         </span>
-        ${isLow ? '<span class="low-quality-badge">low quality</span>' : ''}
+        ${isLow ? '<span class="low-quality-badge">' + t('lowQuality') + '</span>' : ''}
         <span class="obs-card-title">${hl(obs.title || t('untitled'))}</span>
         <span class="obs-expand-icon">▼</span>
       </div>
       <div class="obs-card-meta">
-        <span>📁 ${hl(obs.entityName || 'unknown')}</span>
+        <span>📁 ${hl(obs.entityName || t('unknown'))}</span>
         ${obs.createdAt ? `<span>🕐 ${formatTime(obs.createdAt)}</span>` : ''}
         ${obs.accessCount ? `<span>👁 ${obs.accessCount}</span>` : ''}
       </div>
@@ -2019,7 +2544,7 @@ async function loadRetention() {
                   </td>
                   <td style="font-family: var(--font-mono); color: var(--text-muted); font-size: 12px;">${item.ageHours}h</td>
                   <td style="font-family: var(--font-mono); color: var(--text-muted); font-size: 12px;">${item.accessCount}</td>
-                  <td>${item.isImmune ? `<span class="immune-badge">🛡️ ${t('immune')}</span>` : ''}</td>
+                  <td>${item.isImmune ? `<span class="immune-badge"><span class="iconify" data-icon="lucide:shield" style="font-size:12px;vertical-align:middle;margin-right:3px;"></span>${t('immune')}</span>` : ''}</td>
                 </tr>
               `;
   }).join('')}
@@ -2101,10 +2626,10 @@ async function deleteObs(id, event) {
       const subtitle = document.querySelector('#page-observations .page-subtitle');
       if (subtitle) subtitle.textContent = `${allObservations.length} ${t('observationsStored')}`;
     } else {
-      alert(data.error || 'Delete failed');
+      alert(data.error || t('deleteFailed'));
     }
   } catch (err) {
-    alert('Delete failed: ' + err.message);
+    alert(t('deleteFailed') + ': ' + err.message);
   }
 }
 
@@ -2176,7 +2701,7 @@ async function loadGitMemory() {
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">${t('recentGitMemories')}</span>
-          <span style="font-size:11px;color:var(--text-muted);">${gitObs.length} total</span>
+          <span style="font-size:11px;color:var(--text-muted);">${gitObs.length} ${t('gitMemoryTotal')}</span>
         </div>
         <div class="panel-body" style="padding:0;">
           <table class="retention-table">
@@ -2196,8 +2721,8 @@ async function loadGitMemory() {
                 <tr>
                   <td style="font-family:var(--font-mono);color:var(--text-muted);">#${obs.id}</td>
                   <td><code class="git-hash">${obs.commitHash ? escapeHtml(obs.commitHash.slice(0, 7)) : '—'}</code></td>
-                  <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(obs.title || 'Untitled')}</td>
-                  <td><span class="type-badge" data-type="${obs.type || 'unknown'}">${obs.type || 'unknown'}</span></td>
+                  <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(obs.title || t('untitled'))}</td>
+                  <td><span class="type-badge" data-type="${obs.type || 'unknown'}">${obs.type || t('unknown')}</span></td>
                   <td style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted);">${escapeHtml(obs.entityName || '')}</td>
                   <td style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);">${(obs.filesModified || []).length || '—'}</td>
                   <td style="font-size:11px;color:var(--text-muted);">${obs.createdAt ? formatTime(obs.createdAt) : '—'}</td>
@@ -2221,7 +2746,7 @@ async function loadConfig() {
 
   const data = await api('config');
   if (!data) {
-    container.innerHTML = emptyState('⚙️', t('configUnavailable'), t('configUnavailableDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:settings" style="font-size:36px;"></span>', t('configUnavailable'), t('configUnavailableDesc'));
     return;
   }
 
@@ -2241,9 +2766,9 @@ async function loadConfig() {
           <div class="config-matrix">
             ${fileEntries.map(([name, info]) => `
               <div class="config-file-row">
-                <span class="config-file-status ${info.exists ? 'exists' : 'missing'}">${info.exists ? '✓' : '✗'}</span>
+                <span class="config-file-status ${info.unavailable ? 'unavailable' : info.exists ? 'exists' : 'missing'}">${info.unavailable ? '—' : info.exists ? '<span class="iconify" data-icon="lucide:check" style="font-size:13px;"></span>' : '<span class="iconify" data-icon="lucide:x" style="font-size:13px;"></span>'}</span>
                 <span class="config-file-name">${escapeHtml(name)}</span>
-                <span class="config-file-path">${info.path ? escapeHtml(info.path) : ''}</span>
+                <span class="config-file-path">${info.unavailable ? '<span style="color:var(--accent-amber);font-style:italic;">' + t('configProjectUnavailable') + '</span>' : info.path ? escapeHtml(info.path) : ''}</span>
               </div>
             `).join('')}
           </div>
@@ -2278,7 +2803,7 @@ async function loadConfig() {
                   <td><code class="config-key">${escapeHtml(v.key)}</code></td>
                   <td style="font-family:var(--font-mono);font-size:12px;">${isSensitive ? '<span class="config-masked">' + escapeHtml(v.value) + '</span>' : escapeHtml(v.value)}</td>
                   <td><span class="config-source-badge ${isWarn ? 'warn' : ''}">${escapeHtml(v.source)}</span></td>
-                  <td>${isWarn ? '<span class="config-warn-badge">⚠ ' + t('moveToEnv') + '</span>' : ''}</td>
+                  <td>${isWarn ? '<span class="config-warn-badge"><span class="iconify" data-icon="lucide:alert-triangle" style="font-size:11px;vertical-align:middle;margin-right:3px;"></span> ' + t('moveToEnv') + '</span>' : ''}</td>
                 </tr>
               `;
             }).join('')}
@@ -2293,51 +2818,88 @@ async function loadConfig() {
 // Identity Health Page
 // ============================================================
 
+let identityShowHistorical = false; // H3: historical IDs collapsed by default
+
 async function loadIdentity() {
   const container = document.getElementById('page-identity');
   container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
 
   const data = await api('identity');
   if (!data) {
-    container.innerHTML = emptyState('🛡️', t('identityUnavailable'), t('identityUnavailableDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:shield" style="font-size:36px;"></span>', t('identityUnavailable'), t('identityUnavailableDesc'));
     return;
   }
 
+  // Get project resolved state
+  const projectInfo = await api('project');
+  const isResolved = projectInfo?.resolved !== false;
+
   const healthColor = data.isHealthy ? 'var(--accent-green)' : 'var(--accent-red)';
   const healthIcon = data.isHealthy ? t('healthy') : t('unhealthy');
 
+  // Layered identity data (H3)
+  const realIds = data.realKnownIds || [];
+  const temporaryIds = data.temporaryKnownIds || [];
+  const placeholderIds = data.placeholderKnownIds || [];
+  const historicalIds = [...temporaryIds, ...placeholderIds];
+  const aliasGroupsReal = typeof data.aliasGroupsReal === 'number' ? data.aliasGroupsReal : (data.aliasGroups || 0);
+  const aliasGroupsAll = data.aliasGroups || 0;
+
+  // Separate dirty IDs into current-project vs historical
+  const currentDirtyIds = (data.dirtyIds || []).filter(id => id === data.currentProjectId || (data.aliases || []).includes(id));
+  const historicalDirtyIds = (data.dirtyIds || []).filter(id => !currentDirtyIds.includes(id));
+
   container.innerHTML = `
     <div class="page-header">
       <h1 class="page-title">${t('identityTitle')}</h1>
       <p class="page-subtitle">${t('identitySubtitle')}</p>
     </div>
 
+    ${!isResolved ? `
+      <div class="panel" style="margin-bottom:16px;border-color:var(--accent-amber);">
+        <div class="panel-body" style="display:flex;align-items:center;gap:12px;padding:12px 16px;">
+          <span class="iconify" data-icon="lucide:alert-triangle" style="font-size:20px;color:var(--accent-amber);"></span>
+          <div>
+            <div style="font-weight:600;color:var(--accent-amber);">${t('projectUnresolved')}</div>
+            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">${t('projectUnresolvedDesc')}</div>
+          </div>
+        </div>
+      </div>
+    ` : ''}
+
     <div class="stats-grid">
       <div class="stat-card" data-accent="${data.isHealthy ? 'green' : 'red'}">
-        <div class="stat-label">${t('healthStatus')}</div>
+        <div class="stat-label">${t('identityHealthPrimary')}</div>
         <div class="stat-value" style="font-size:20px;color:${healthColor}">${healthIcon}</div>
       </div>
       <div class="stat-card" data-accent="cyan">
-        <div class="stat-label">${t('knownProjectIds')}</div>
-        <div class="stat-value">${data.allProjectIds?.length || 0}</div>
+        <div class="stat-label">${t('identityRealProjects')}</div>
+        <div class="stat-value">${realIds.length}</div>
+        <div class="team-stat-sub">${historicalIds.length} ${t('teamHistoricalCount')}</div>
       </div>
       <div class="stat-card" data-accent="purple">
-        <div class="stat-label">${t('aliasGroups')}</div>
-        <div class="stat-value">${data.aliasGroups || 0}</div>
+        <div class="stat-label">${t('identityAliasGroupsReal')}</div>
+        <div class="stat-value">${aliasGroupsReal}</div>
+        <div class="team-stat-sub">${aliasGroupsAll} ${t('aliasGroups').toLowerCase()} ${t('identityTotalCount')}</div>
       </div>
-      <div class="stat-card" data-accent="amber">
+      <div class="stat-card" data-accent="${currentDirtyIds.length > 0 ? 'red' : 'amber'}">
         <div class="stat-label">${t('dirtyIds')}</div>
-        <div class="stat-value">${data.dirtyIds?.length || 0}</div>
+        <div class="stat-value">${currentDirtyIds.length}</div>
+        <div class="team-stat-sub">${historicalDirtyIds.length} ${t('teamHistoricalCount')}</div>
       </div>
     </div>
 
     <div class="overview-row">
       <div class="panel" style="flex:1;">
-        <div class="panel-header"><span class="panel-title">${t('currentIdentity')}</span></div>
+        <div class="panel-header"><span class="panel-title">${t('identityCurrentProject')}</span></div>
         <div class="panel-body">
           <div class="identity-row">
             <span class="identity-label">${t('currentProjectId')}</span>
             <code class="identity-value">${escapeHtml(data.currentProjectId || '—')}</code>
+            ${isResolved
+              ? '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(34,197,94,0.12);color:var(--accent-green);margin-left:6px;">' + t('projectResolved') + '</span>'
+              : '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(245,158,11,0.12);color:var(--accent-amber);margin-left:6px;">' + t('projectUnresolved') + '</span>'
+            }
           </div>
           <div class="identity-row">
             <span class="identity-label">${t('canonicalId')}</span>
@@ -2347,6 +2909,12 @@ async function loadIdentity() {
             <span class="identity-label">${t('aliases')}</span>
             <div>${(data.aliases || []).map(a => `<code class="identity-alias">${escapeHtml(a)}</code>`).join(' ')}</div>
           </div>
+          ${currentDirtyIds.length > 0 ? `
+            <div style="margin-top:8px;padding:8px 12px;border-radius:6px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.15);">
+              <div style="font-size:12px;font-weight:600;color:var(--accent-red);margin-bottom:4px;"><span class="iconify" data-icon="lucide:alert-triangle" style="font-size:12px;vertical-align:middle;margin-right:3px;"></span> ${t('identityDirtyCurrentWarning')}</div>
+              ${currentDirtyIds.map(id => `<code class="identity-dirty">${escapeHtml(id)}</code>`).join(' ')}
+            </div>
+          ` : ''}
         </div>
       </div>
 
@@ -2354,10 +2922,10 @@ async function loadIdentity() {
         <div class="panel-header"><span class="panel-title">${t('healthIssues')}</span></div>
         <div class="panel-body">
           ${(data.healthIssues || []).length === 0
-            ? '<div style="color:var(--accent-green);font-size:13px;">' + t('noIssues') + '</div>'
+            ? '<div style="color:var(--accent-green);font-size:13px;">' + (isResolved ? t('identityProjectBound') : t('identityProjectUnbound')) + '</div>'
             : (data.healthIssues || []).map(issue => `
                 <div class="identity-issue">
-                  <span style="color:var(--accent-red);">⚠</span>
+                  <span class="iconify" data-icon="lucide:alert-triangle" style="font-size:13px;color:var(--accent-red);vertical-align:middle;"></span>
                   <span>${escapeHtml(issue)}</span>
                 </div>
               `).join('')
@@ -2370,34 +2938,85 @@ async function loadIdentity() {
       <div class="panel">
         <div class="panel-header"><span class="panel-title">${t('dirtyProjectIds')}</span></div>
         <div class="panel-body">
-          <div style="display:flex;flex-wrap:wrap;gap:8px;">
-            ${data.dirtyIds.map(id => `<code class="identity-dirty">${escapeHtml(id)}</code>`).join('')}
-          </div>
+          ${currentDirtyIds.length > 0 ? `
+            <div style="margin-bottom:12px;">
+              <div style="font-size:12px;font-weight:600;color:var(--accent-red);margin-bottom:6px;"><span class="iconify" data-icon="lucide:alert-triangle" style="font-size:12px;vertical-align:middle;margin-right:3px;"></span> ${t('identityDirtyCurrentWarning')}</div>
+              <div style="display:flex;flex-wrap:wrap;gap:8px;">
+                ${currentDirtyIds.map(id => `<code class="identity-dirty">${escapeHtml(id)}</code>`).join('')}
+              </div>
+            </div>
+          ` : ''}
+          ${historicalDirtyIds.length > 0 ? `
+            <div>
+              <div style="font-size:12px;font-weight:500;color:var(--text-muted);margin-bottom:6px;">${t('identityDirtyHistoricalNote')}</div>
+              <div style="display:flex;flex-wrap:wrap;gap:8px;">
+                ${historicalDirtyIds.map(id => `<code class="identity-dirty" style="opacity:0.6;">${escapeHtml(id)}</code>`).join('')}
+              </div>
+            </div>
+          ` : ''}
         </div>
       </div>
     ` : ''}
 
     <div class="panel">
       <div class="panel-header">
-        <span class="panel-title">${t('allKnownProjectIds')}</span>
-        <span style="font-size:11px;color:var(--text-muted);">${data.allProjectIds?.length || 0} total</span>
+        <span class="panel-title">${t('identityRealProjects')}</span>
+        <span style="font-size:11px;color:var(--text-muted);">${realIds.length}</span>
       </div>
       <div class="panel-body">
-        <div style="display:flex;flex-direction:column;gap:6px;">
-          ${(data.allProjectIds || []).map(id => {
-            const isDirty = (data.dirtyIds || []).includes(id);
-            const isCurrent = id === data.currentProjectId;
-            const isCanonical = id === data.canonicalId;
-            return `<div class="identity-id-row">
-              <code class="identity-id ${isDirty ? 'dirty' : ''}">${escapeHtml(id)}</code>
-              ${isCurrent ? '<span class="identity-tag current">' + t('tagCurrent') + '</span>' : ''}
-              ${isCanonical ? '<span class="identity-tag canonical">' + t('tagCanonical') + '</span>' : ''}
-              ${isDirty ? '<span class="identity-tag dirty">' + t('tagDirty') + '</span>' : ''}
-            </div>`;
-          }).join('')}
-        </div>
+        ${realIds.length === 0
+          ? '<div style="color:var(--text-muted);font-size:12px;">—</div>'
+          : `<div style="display:flex;flex-direction:column;gap:6px;">
+              ${realIds.map(id => {
+                const isDirty = (data.dirtyIds || []).includes(id);
+                const isCurrent = id === data.currentProjectId;
+                const isCanonical = id === data.canonicalId;
+                return `<div class="identity-id-row">
+                  <code class="identity-id ${isDirty ? 'dirty' : ''}">${escapeHtml(id)}</code>
+                  ${isCurrent ? '<span class="identity-tag current">' + t('tagCurrent') + '</span>' : ''}
+                  ${isCanonical ? '<span class="identity-tag canonical">' + t('tagCanonical') + '</span>' : ''}
+                  ${isDirty ? '<span class="identity-tag dirty">' + t('tagDirty') + '</span>' : ''}
+                </div>`;
+              }).join('')}
+            </div>`
+        }
       </div>
     </div>
+
+    ${historicalIds.length > 0 ? `
+      <div class="panel">
+        <div class="panel-header" style="cursor:pointer;" onclick="identityShowHistorical = !identityShowHistorical; delete loaded['identity']; loadIdentity();">
+          <span class="panel-title">
+            <span class="iconify" data-icon="${identityShowHistorical ? 'lucide:chevron-down' : 'lucide:chevron-right'}" style="font-size:14px;vertical-align:middle;"></span>
+            ${t('identityHistoricalFold')}
+          </span>
+          <span style="font-size:11px;color:var(--text-muted);">
+            ${temporaryIds.length} ${t('identityTemporary').toLowerCase()} · ${placeholderIds.length} ${t('identityPlaceholder').toLowerCase()}
+          </span>
+        </div>
+        ${identityShowHistorical ? `
+          <div class="panel-body">
+            <div style="font-size:11px;color:var(--text-muted);margin-bottom:10px;font-style:italic;">${t('identityHistoricalNote')}</div>
+            ${temporaryIds.length > 0 ? `
+              <div style="margin-bottom:12px;">
+                <div style="font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;">${t('identityTemporary')} (${temporaryIds.length})</div>
+                <div style="display:flex;flex-direction:column;gap:4px;">
+                  ${temporaryIds.map(id => `<div class="identity-id-row" style="opacity:0.65;"><code class="identity-id">${escapeHtml(id)}</code><span class="identity-tag" style="background:rgba(148,163,184,0.15);color:var(--text-muted);">temp</span></div>`).join('')}
+                </div>
+              </div>
+            ` : ''}
+            ${placeholderIds.length > 0 ? `
+              <div>
+                <div style="font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;">${t('identityPlaceholder')} (${placeholderIds.length})</div>
+                <div style="display:flex;flex-direction:column;gap:4px;">
+                  ${placeholderIds.map(id => `<div class="identity-id-row" style="opacity:0.5;"><code class="identity-id dirty">${escapeHtml(id)}</code><span class="identity-tag dirty">placeholder</span></div>`).join('')}
+                </div>
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+      </div>
+    ` : ''}
   `;
 }
 
@@ -2441,7 +3060,7 @@ async function loadSessions() {
 
   const sessions = await api('sessions');
   if (!sessions || sessions.length === 0) {
-    container.innerHTML = emptyState('📋', t('noSessions'), t('noSessionsDesc'));
+    container.innerHTML = emptyState('<span class="iconify" data-icon="lucide:clipboard-list" style="font-size:36px;"></span>', t('noSessions'), t('noSessionsDesc'));
     return;
   }
 
@@ -2467,13 +3086,13 @@ async function loadSessions() {
         <div class="stat-value">${completedCount}</div>
       </div>
       <div class="stat-card" data-accent="purple">
-        <div class="stat-label">Total</div>
+        <div class="stat-label">${t('sessionsTotal')}</div>
         <div class="stat-value">${sessions.length}</div>
       </div>
     </div>
 
     <div class="panel">
-      <div class="panel-header"><span class="panel-title">Timeline</span></div>
+      <div class="panel-header"><span class="panel-title">${t('sessionsTimeline')}</span></div>
       <div class="panel-body" style="padding: 0;">
         <table class="retention-table">
           <thead>
@@ -2491,8 +3110,8 @@ async function loadSessions() {
 
   for (const s of sessions) {
     const statusBadge = s.status === 'active'
-      ? '<span class="badge" style="background:var(--color-green);color:#fff">🟢 ' + t('sessionActive') + '</span>'
-      : '<span class="badge" style="background:var(--color-blue);color:#fff">✅ ' + t('sessionCompleted') + '</span>';
+      ? '<span class="badge" style="background:var(--color-green);color:#fff"><span class="iconify" data-icon="lucide:circle-dot" style="font-size:11px;vertical-align:middle;margin-right:3px;"></span> ' + t('sessionActive') + '</span>'
+      : '<span class="badge" style="background:var(--color-blue);color:#fff"><span class="iconify" data-icon="lucide:circle-check" style="font-size:11px;vertical-align:middle;margin-right:3px;"></span> ' + t('sessionCompleted') + '</span>';
     const agent = s.agent ? escapeHtml(s.agent) : '—';
     const started = formatTime(s.startedAt);
     const ended = s.endedAt ? formatTime(s.endedAt) : '—';
@@ -2526,23 +3145,25 @@ function teamTimeAgo(dateStr) {
   if (!dateStr) return '';
   const diff = Date.now() - new Date(dateStr).getTime();
   const sec = Math.floor(diff / 1000);
-  if (sec < 60) return sec + 's ago';
+  if (sec < 60) return sec + t('timeAgoS');
   const min = Math.floor(sec / 60);
-  if (min < 60) return min + 'm ago';
+  if (min < 60) return min + t('timeAgoM');
   const hr = Math.floor(min / 60);
-  if (hr < 24) return hr + 'h ago';
-  return Math.floor(hr / 24) + 'd ago';
+  if (hr < 24) return hr + t('timeAgoH');
+  return Math.floor(hr / 24) + t('timeAgoD');
 }
 
 function teamLockTTL(expiresAt) {
   if (!expiresAt) return '';
   const remaining = new Date(expiresAt).getTime() - Date.now();
-  if (remaining <= 0) return 'expired';
+  if (remaining <= 0) return t('timeExpired');
   const min = Math.floor(remaining / 60000);
-  return min + 'm left';
+  return min + t('timeLeft');
 }
 
 let teamScope = 'project'; // 'project' | 'global'
+let teamTierFilter = 'active'; // 'active' | 'recent' | 'historical' | 'all'
+let teamShowHistorical = false; // collapsed by default
 
 async function loadTeam() {
   const container = document.getElementById('page-team');
@@ -2559,7 +3180,7 @@ async function loadTeam() {
       </div>
       <div class="panel">
         <div class="panel-body" style="text-align:center;padding:48px;">
-          <div style="font-size:36px;margin-bottom:12px;">👥</div>
+          <div style="font-size:36px;margin-bottom:12px;"><span class="iconify" data-icon="lucide:users" style="font-size:36px;"></span></div>
           <div style="font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px;">${t('teamNoData')}</div>
           <div style="font-size:13px;color:var(--text-muted);max-width:480px;margin:0 auto;line-height:1.6;">
             ${t('teamNoDataHint')}<br>
@@ -2577,18 +3198,48 @@ async function loadTeam() {
     completed: 'lucide:circle-check',
     failed: 'lucide:circle-x',
   };
-  const statusLabels = { pending: 'Pending', in_progress: 'In Progress', completed: 'Done', failed: 'Failed' };
-
-  const totalAgents = data.agents.length;
-  const inactiveAgents = data.agents.filter(a => a.status !== 'active').length;
-  const totalUnread = data.agents.reduce((sum, a) => sum + (a.unread || 0), 0);
+  const statusLabels = { pending: t('taskPending'), in_progress: t('taskInProgress'), completed: t('taskCompleted'), failed: t('taskFailed') };
+
+  // Ensure arrays exist and fields are safe
+  const safeAgents = (data.agents || []).map(a => ({ ...a, id: a.id || a.agent_id || '', name: a.name || t('unknown'), status: a.status || 'inactive', unread: a.unread || 0, activityTier: a.activityTier || (a.status === 'active' ? 'active' : 'historical') }));
+  const safeLocks = (data.locks || []).map(l => ({ ...l, file: l.file || '', lockedBy: l.lockedBy || l.locked_by || '', lockedAt: l.lockedAt || l.locked_at, expiresAt: l.expiresAt || l.expires_at }));
+  const safeTasks = (data.tasks || []).map(tk => ({ ...tk, id: tk.id || tk.task_id || '', status: tk.status || 'pending', assignee: tk.assignee || tk.assignee_agent_id, deps: tk.deps || [], required_role: tk.required_role || tk.requiredRole || null, preferred_role: tk.preferred_role || tk.preferredRole || null }));
+  const safeRoles = (data.roles || []).map(r => ({ ...r, roleId: r.role_id || r.roleId || '', label: r.label || '', description: r.description || '', preferredAgentTypes: r.preferred_agent_types || r.preferredAgentTypes || '[]', maxConcurrent: r.max_concurrent || r.maxConcurrent || 1 }));
+  const safeOccupancy = (data.roleOccupancy || []).map(o => ({ ...o, role: { ...o.role, roleId: o.role.role_id || o.role.roleId || '', label: o.role.label || '', maxConcurrent: o.role.max_concurrent || o.role.maxConcurrent || 1, preferredAgentTypes: o.role.preferred_agent_types || o.role.preferredAgentTypes || '[]' }, activeAgents: (o.activeAgents || []).map(a => ({ ...a, name: a.name || 'unknown', role: a.role || '' })), vacant: o.vacant || 0 }));
+  const safeHandoffs = (data.handoffs || []).map(h => ({ ...h, id: h.id || '', sender_agent_id: h.sender_agent_id || '', to_role: h.to_role || '', handoff_status: h.handoff_status || h.handoffStatus || 'open', content: h.content || '', created_at: h.created_at || h.createdAt || 0 }));
+
+  // H1/H2: headline semantics — active is primary, historical is secondary
+  const totalAgents = typeof data.totalAgents === 'number' ? data.totalAgents : safeAgents.length;
+  const activeCount = typeof data.activeCount === 'number' ? data.activeCount : safeAgents.filter(a => a.status === 'active').length;
+  const recentCount = typeof data.recentCount === 'number' ? data.recentCount : safeAgents.filter(a => a.activityTier === 'recent').length;
+  const historicalCount = typeof data.historicalCount === 'number' ? data.historicalCount : safeAgents.filter(a => a.activityTier === 'historical').length;
+  const totalUnread = data.totalUnread || safeAgents.reduce((sum, a) => sum + (a.unread || 0), 0);
   const tasksByStatus = { pending: 0, in_progress: 0, completed: 0, failed: 0 };
-  data.tasks.forEach(tk => { tasksByStatus[tk.status] = (tasksByStatus[tk.status] || 0) + 1; });
+  safeTasks.forEach(tk => { tasksByStatus[tk.status] = (tasksByStatus[tk.status] || 0) + 1; });
+
+  // Apply tier filter for the Agents panel
+  const tierMatches = (tier) => {
+    if (teamTierFilter === 'all') return true;
+    if (teamTierFilter === 'active') return tier === 'active';
+    if (teamTierFilter === 'recent') return tier === 'recent';
+    if (teamTierFilter === 'historical') return tier === 'historical';
+    return true;
+  };
+  const filteredAgents = safeAgents.filter(a => {
+    if (!tierMatches(a.activityTier)) return false;
+    if (!teamShowHistorical && a.activityTier === 'historical' && teamTierFilter !== 'historical') return false;
+    return true;
+  });
+
+  const scopeLabel = teamScope === 'global' ? t('projectScopeGlobal') : t('projectScopeProject');
+  const scopeDesc = teamScope === 'global' ? t('projectScopeGlobalDesc') : t('projectScopeProjectDesc');
 
-  const scopeLabel = teamScope === 'global' ? 'Global Team' : 'Project Team';
-  const scopeDesc = teamScope === 'global'
-    ? 'All agents across projects (runtime + persisted)'
-    : 'Agents active in current control-plane session';
+  // Resume data from API
+  const openTasks = data.openTasks || 0;
+  const availableTasks = data.availableTasks || 0;
+  const openHandoffs = data.openHandoffs || 0;
+  const activeSessions = data.activeSessions || 0;
+  const hasPending = openTasks > 0 || openHandoffs > 0 || totalUnread > 0 || safeLocks.length > 0;
 
   let html = `
     <div class="team-header">
@@ -2598,92 +3249,187 @@ async function loadTeam() {
         </div>
         <div>
           <h1 class="page-title">${scopeLabel}</h1>
-          <p class="page-subtitle">${scopeDesc}${data.sessions != null ? ' &middot; ' + data.sessions + ' session(s)' : ''}</p>
+          <p class="page-subtitle">${scopeDesc}</p>
         </div>
       </div>
       <div class="team-header-right">
         <div style="display:flex;gap:2px;margin-right:12px;">
-          <button class="filter-btn${teamScope === 'project' ? ' active' : ''}" onclick="teamScope='project';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">Project</button>
-          <button class="filter-btn${teamScope === 'global' ? ' active' : ''}" onclick="teamScope='global';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">Global</button>
+          <button class="filter-btn${teamScope === 'project' ? ' active' : ''}" onclick="teamScope='project';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">${t('teamProjectBtn')}</button>
+          <button class="filter-btn${teamScope === 'global' ? ' active' : ''}" onclick="teamScope='global';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">${t('teamGlobalBtn')}</button>
         </div>
         <span class="team-refresh-time" id="team-refresh-indicator"></span>
         <button class="team-refresh-btn" onclick="loadTeam()">
           <span class="iconify" data-icon="lucide:refresh-cw" style="font-size:14px;"></span>
-          Refresh
+          ${t('teamRefresh')}
         </button>
       </div>
     </div>
 
+    <!-- Resume: Continue This Project -->
+    <div class="panel" style="margin-bottom:16px;border-left:3px solid ${hasPending ? 'var(--accent-amber)' : 'var(--accent-green)'};">
+      <div class="panel-header">
+        <span class="panel-title"><span class="iconify" data-icon="lucide:play-circle" style="font-size:15px;vertical-align:middle;margin-right:6px;"></span>${t('resumeTitle')}</span>
+        <span class="team-panel-count" style="color:var(--text-muted);font-size:11px;">${t('resumeDesc')}</span>
+      </div>
+      <div class="panel-body" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px;">
+        ${hasPending ? `
+          ${openTasks > 0 ? `<div style="text-align:center;padding:12px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border);">
+            <div style="font-size:24px;font-weight:700;color:var(--accent-amber);">${openTasks}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t('resumeOpenTasks')}</div>
+            ${availableTasks > 0 ? `<div style="font-size:10px;color:var(--accent-green);margin-top:2px;">${availableTasks} ${t('resumeAvailableTasks')}</div>` : ''}
+          </div>` : ''}
+          ${openHandoffs > 0 ? `<div style="text-align:center;padding:12px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border);">
+            <div style="font-size:24px;font-weight:700;color:var(--accent-cyan);">${openHandoffs}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t('resumeOpenHandoffs')}</div>
+          </div>` : ''}
+          ${totalUnread > 0 ? `<div style="text-align:center;padding:12px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border);">
+            <div style="font-size:24px;font-weight:700;color:var(--accent-green);">${totalUnread}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t('resumeUnreadMessages')}</div>
+          </div>` : ''}
+          ${safeLocks.length > 0 ? `<div style="text-align:center;padding:12px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border);">
+            <div style="font-size:24px;font-weight:700;color:var(--accent-red);">${safeLocks.length}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t('resumeActiveLocks')}</div>
+          </div>` : ''}
+          ${activeSessions > 0 ? `<div style="text-align:center;padding:12px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border);">
+            <div style="font-size:24px;font-weight:700;color:var(--accent-cyan);">${activeSessions}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">${t('resumeActiveAgents')}</div>
+          </div>` : ''}
+        ` : `
+          <div style="grid-column:1/-1;text-align:center;padding:24px;">
+            <div style="font-size:28px;margin-bottom:8px;"><span class="iconify" data-icon="lucide:check-circle-2" style="font-size:28px;color:var(--accent-green);"></span></div>
+            <div style="font-size:14px;font-weight:600;color:var(--accent-green);">${t('resumeAllClear')}</div>
+            <div style="font-size:12px;color:var(--text-muted);margin-top:4px;">${t('resumeAllClearDesc')}</div>
+          </div>
+        `}
+      </div>
+    </div>
+
+    <!-- Stats: clearly labeled counts -->
     <div class="stats-grid">
       <div class="stat-card" data-accent="cyan">
         <div class="team-stat-icon"><span class="iconify" data-icon="lucide:bot"></span></div>
         <div class="stat-label">${t('teamActiveAgents')}</div>
-        <div class="stat-value">${data.activeCount}<span style="font-size:14px;color:var(--text-muted);font-weight:400;"> / ${totalAgents}</span></div>
+        <div class="stat-value">${activeCount}</div>
+        <div class="team-stat-sub">${activeSessions} ${t('sessionsCount')} · ${historicalCount} ${t('teamHistoricalTotal')}</div>
       </div>
       <div class="stat-card" data-accent="amber">
         <div class="team-stat-icon"><span class="iconify" data-icon="lucide:lock"></span></div>
         <div class="stat-label">${t('teamLockedFiles')}</div>
-        <div class="stat-value">${data.locks.length}</div>
+        <div class="stat-value">${safeLocks.length}</div>
       </div>
       <div class="stat-card" data-accent="purple">
         <div class="team-stat-icon"><span class="iconify" data-icon="lucide:list-checks"></span></div>
         <div class="stat-label">${t('teamTasks')}</div>
-        <div class="stat-value">${data.tasks.length}</div>
-        <div class="team-stat-sub">${tasksByStatus.pending} pending · ${tasksByStatus.in_progress} active · ${tasksByStatus.completed} done</div>
+        <div class="stat-value">${safeTasks.length}</div>
+        <div class="team-stat-sub">${tasksByStatus.pending} ${t('teamPending')} · ${tasksByStatus.in_progress} ${t('teamActive')} · ${tasksByStatus.completed} ${t('teamDone')}</div>
       </div>
       <div class="stat-card" data-accent="green">
         <div class="team-stat-icon"><span class="iconify" data-icon="lucide:mail"></span></div>
-        <div class="stat-label">Messages</div>
+        <div class="stat-label">${t('teamMessages')}</div>
         <div class="stat-value">${totalUnread}</div>
-        <div class="team-stat-sub">${totalUnread > 0 ? totalUnread + ' unread' : 'All read'}</div>
+        <div class="team-stat-sub">${totalUnread > 0 ? totalUnread + ' ' + t('teamUnread') : t('teamAllRead')}</div>
       </div>
     </div>
 
+    ${safeRoles.length > 0 ? `
+    <div class="panel" style="margin-bottom:16px;">
+      <div class="panel-header">
+        <span class="panel-title"><span class="iconify" data-icon="lucide:shield" style="font-size:15px;vertical-align:middle;margin-right:6px;"></span>${t('teamRoles') || 'Roles'}</span>
+        <span class="team-panel-count">${safeRoles.length} ${t('teamDefined') || 'defined'}</span>
+      </div>
+      <div class="panel-body" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:16px;">
+        ${safeOccupancy.map(({ role, activeAgents, vacant }) => {
+          const agentTypes = JSON.parse(role.preferredAgentTypes || '[]');
+          const fillPct = role.maxConcurrent > 0 ? Math.min(100, Math.round(activeAgents.length / role.maxConcurrent * 100)) : 0;
+          const barColor = fillPct >= 100 ? 'var(--accent-red)' : fillPct > 50 ? 'var(--accent-amber)' : 'var(--accent-green)';
+          return `
+          <div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:14px;">
+            <div style="font-weight:600;font-size:13px;margin-bottom:4px;">${escapeHtml(role.label)}</div>
+            <div style="font-size:11px;color:var(--text-muted);margin-bottom:8px;">${role.description ? escapeHtml(role.description) : ''}</div>
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+              <div style="flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
+                <div style="width:${fillPct}%;height:100%;background:${barColor};border-radius:3px;"></div>
+              </div>
+              <span style="font-size:11px;color:var(--text-muted);">${activeAgents.length}/${role.maxConcurrent}</span>
+            </div>
+            <div style="font-size:11px;color:var(--text-secondary);">
+              ${activeAgents.length > 0 ? activeAgents.map(a => escapeHtml(a.name)).join(', ') : '<span style="color:var(--text-muted);">vacant</span>'}
+            </div>
+            ${vacant > 0 ? '<div style="font-size:10px;color:var(--accent-green);margin-top:4px;">' + vacant + ' slot' + (vacant > 1 ? 's' : '') + ' open</div>' : ''}
+          </div>`;
+        }).join('')}
+      </div>
+    </div>` : ''}
+
     <div class="team-grid">
       <div class="panel">
-        <div class="panel-header">
+        <div class="panel-header" style="flex-wrap:wrap;gap:8px;">
           <span class="panel-title">${t('teamAgents')}</span>
-          <span class="team-panel-count">${data.activeCount} active${inactiveAgents > 0 ? ', ' + inactiveAgents + ' offline' : ''}</span>
+          <div style="display:flex;gap:2px;margin-left:auto;">
+            <button class="filter-btn${teamTierFilter === 'active' ? ' active' : ''}" onclick="teamTierFilter='active';delete loaded['team'];loadTeam();" style="padding:4px 10px;font-size:11px;">${t('teamTierActive')} (${activeCount})</button>
+            <button class="filter-btn${teamTierFilter === 'recent' ? ' active' : ''}" onclick="teamTierFilter='recent';delete loaded['team'];loadTeam();" style="padding:4px 10px;font-size:11px;">${t('teamTierRecent')} (${recentCount})</button>
+            <button class="filter-btn${teamTierFilter === 'historical' ? ' active' : ''}" onclick="teamTierFilter='historical';delete loaded['team'];loadTeam();" style="padding:4px 10px;font-size:11px;">${t('teamTierHistorical')} (${historicalCount})</button>
+            <button class="filter-btn${teamTierFilter === 'all' ? ' active' : ''}" onclick="teamTierFilter='all';delete loaded['team'];loadTeam();" style="padding:4px 10px;font-size:11px;">${t('teamTierAll')} (${totalAgents})</button>
+          </div>
         </div>
         <div class="panel-body team-scrollable">
-          ${data.agents.length === 0
-            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:user-x"></span></span><span class="team-empty-text">No agents in ' + (teamScope === 'project' ? 'this session' : 'any scope') + '</span>' + (teamScope === 'project' && data._meta && data._meta.persistedAgents > 0 ? '<div style="font-size:11px;color:var(--accent-amber);margin-top:6px;">' + data._meta.persistedAgents + ' persisted agent(s) available in <a href="#" onclick="teamScope=\'global\';delete loaded[\'team\'];loadTeam();return false;" style="color:var(--accent-purple);text-decoration:underline;">Global view</a></div>' : '') + '</div>'
-            : data.agents.map(a => `
-              <div class="team-agent-row${a.status !== 'active' ? ' inactive' : ''}">
-                <div class="team-agent-status ${a.status === 'active' ? 'active' : 'offline'}"></div>
+          ${filteredAgents.length === 0
+            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:user-x"></span></span><span class="team-empty-text">' +
+              (teamTierFilter === 'active' ? t('teamNoActiveNow') :
+               teamTierFilter === 'recent' ? t('teamNoRecent') :
+               teamScope === 'project' ? t('teamNoAgentsProject') : t('teamNoAgentsGlobal')) + '</span>' +
+              (teamTierFilter === 'active' && historicalCount > 0 ? '<div style="font-size:11px;color:var(--text-muted);margin-top:6px;">' + historicalCount + ' ' + t('teamHistoricalHint') + '</div>' : '') +
+              '</div>'
+            : filteredAgents.map(a => {
+                const tier = a.activityTier;
+                const isHistorical = tier === 'historical';
+                const tierColor = tier === 'active' ? 'var(--accent-green)' : tier === 'recent' ? 'var(--accent-amber)' : 'var(--text-muted)';
+                const tierBg = tier === 'active' ? 'rgba(105,240,174,0.12)' : tier === 'recent' ? 'rgba(255,171,64,0.12)' : 'rgba(148,163,184,0.08)';
+                const tierLabel = tier === 'active' ? t('teamTierActive') : tier === 'recent' ? t('teamTierRecent') : t('teamTierHistorical');
+                return `
+              <div class="team-agent-row${tier !== 'active' ? ' inactive' : ''}"${isHistorical ? ' style="opacity:0.55;"' : ''}>
+                <div class="team-agent-status ${tier === 'active' ? 'active' : 'offline'}"></div>
                 <div class="team-agent-info">
-                  <div class="team-agent-name">${escapeHtml(a.name)} <span style="font-size:9px;padding:1px 5px;border-radius:4px;font-weight:500;margin-left:4px;${a.source === 'persisted' ? 'background:rgba(255,171,64,0.12);color:var(--accent-amber);' : 'background:rgba(105,240,174,0.12);color:var(--accent-green);'}">${a.source === 'persisted' ? 'file' : 'live'}</span></div>
+                  <div class="team-agent-name">${escapeHtml(a.name)} <span style="font-size:9px;padding:1px 5px;border-radius:4px;font-weight:500;margin-left:4px;background:${tierBg};color:${tierColor};">${tierLabel}</span></div>
                   <div class="team-agent-meta">
-                    <span>${a.role ? escapeHtml(a.role) : 'no role'}</span>
+                    <span>${a.role ? escapeHtml(a.role) : t('teamNoRole')}</span>
                     ${a.capabilities && a.capabilities.length ? a.capabilities.map(c => '<span class="team-cap-tag">' + escapeHtml(c) + '</span>').join('') : ''}
                   </div>
-                  <div class="team-agent-time">joined ${teamTimeAgo(a.joinedAt)} · seen ${teamTimeAgo(a.lastSeenAt)}${a.leftAt ? ' · left ' + teamTimeAgo(a.leftAt) : ''}</div>
+                  <div class="team-agent-time">${t('teamJoined')} ${teamTimeAgo(a.joinedAt)} · ${t('teamSeen')} ${teamTimeAgo(a.lastSeenAt)}${a.leftAt ? ' · ' + t('teamLeft') + ' ' + teamTimeAgo(a.leftAt) : ''}</div>
                 </div>
                 ${a.unread > 0 ? '<span class="team-unread-badge">' + a.unread + '</span>' : ''}
-                <span class="team-agent-id">${a.id.slice(0, 8)}</span>
-              </div>
-            `).join('')
+                <span class="team-agent-id">${(a.id || '').slice(0, 8)}</span>
+              </div>`;
+              }).join('')
           }
+          ${teamTierFilter === 'active' && !teamShowHistorical && historicalCount > 0 ? `
+            <div style="padding:12px;text-align:center;border-top:1px dashed var(--border);margin-top:8px;opacity:0.6;">
+              <button class="filter-btn" onclick="teamShowHistorical=true;delete loaded['team'];loadTeam();" style="font-size:11px;color:var(--text-muted);">
+                <span class="iconify" data-icon="lucide:chevron-down" style="font-size:12px;vertical-align:middle;"></span>
+                ${t('teamShowHistorical')} (${historicalCount})
+              </button>
+            </div>
+          ` : ''}
         </div>
       </div>
 
       <div class="panel">
         <div class="panel-header">
           <span class="panel-title">${t('teamLocks')}</span>
-          <span class="team-panel-count">${data.locks.length} active</span>
+          <span class="team-panel-count">${safeLocks.length} ${t('teamActiveCount')}</span>
         </div>
         <div class="panel-body team-scrollable">
-          ${data.locks.length === 0
-            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:lock-open"></span></span><span class="team-empty-text">No files locked</span></div>'
-            : data.locks.map(l => {
-                const owner = data.agents.find(a => a.id === l.lockedBy);
+          ${safeLocks.length === 0
+            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:lock-open"></span></span><span class="team-empty-text">' + t('teamNoFilesLocked') + '</span></div>'
+            : safeLocks.map(l => {
+                const owner = safeAgents.find(a => a.id === l.lockedBy);
                 const ttl = teamLockTTL(l.expiresAt);
                 return '<div class="team-lock-row">' +
                   '<div class="team-lock-icon"><span class="iconify" data-icon="lucide:file-lock-2"></span></div>' +
                   '<div class="team-lock-info">' +
                     '<div class="team-lock-file">' + escapeHtml(l.file) + '</div>' +
                     '<div class="team-lock-meta">' +
-                      '<span>' + (owner ? escapeHtml(owner.name) : l.lockedBy.slice(0, 8)) + '</span>' +
+                      '<span>' + (owner ? escapeHtml(owner.name) : (l.lockedBy || '').slice(0, 8)) + '</span>' +
                       '<span>' + teamTimeAgo(l.lockedAt) + '</span>' +
                       (ttl ? '<span class="team-lock-ttl">' + ttl + '</span>' : '') +
                     '</div>' +
@@ -2698,20 +3444,22 @@ async function loadTeam() {
     <div class="panel">
       <div class="panel-header">
         <span class="panel-title">${t('teamTaskBoard')}</span>
-        <span class="team-panel-count">${data.availableTasks} available to claim</span>
+        <span class="team-panel-count">${data.availableTasks || 0} ${t('teamAvailableToClaim')}</span>
       </div>
       <div class="panel-body">
-        ${data.tasks.length === 0
-          ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:clipboard-list"></span></span><span class="team-empty-text">No tasks created</span></div>'
-          : '<table class="team-task-table"><thead><tr><th>Status</th><th>ID</th><th>Description</th><th>Assignee</th><th>Deps</th><th>Updated</th></tr></thead><tbody>' +
-            data.tasks.map(tk => {
-              const assignee = tk.assignee ? (data.agents.find(a => a.id === tk.assignee)?.name || tk.assignee.slice(0, 8)) : '<span style="color:var(--text-muted);">—</span>';
+        ${safeTasks.length === 0
+          ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:clipboard-list"></span></span><span class="team-empty-text">' + t('teamNoTasksCreated') + '</span></div>'
+          : '<table class="team-task-table"><thead><tr><th>Status</th><th>ID</th><th>Description</th><th>Assignee</th><th>Role</th><th>Deps</th><th>Updated</th></tr></thead><tbody>' +
+            safeTasks.map(tk => {
+              const assignee = tk.assignee ? (safeAgents.find(a => a.id === tk.assignee)?.name || (tk.assignee || '').slice(0, 8)) : '<span style="color:var(--text-muted);">—</span>';
+              const roleTag = tk.required_role ? '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(139,92,246,0.15);color:#a78bfa;font-weight:500;">' + escapeHtml(tk.required_role) + '</span>' : (tk.preferred_role ? '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(56,189,248,0.12);color:#38bdf8;font-weight:500;">' + escapeHtml(tk.preferred_role) + '</span>' : '—');
               return '<tr>' +
                 '<td><span class="team-task-status" data-status="' + tk.status + '"><span class="iconify" data-icon="' + (statusIcons[tk.status] || 'lucide:circle') + '" style="font-size:13px;"></span> ' + (statusLabels[tk.status] || tk.status) + '</span></td>' +
-                '<td><span class="team-task-id">' + tk.id.slice(0, 8) + '</span></td>' +
+                '<td><span class="team-task-id">' + (tk.id || '').slice(0, 8) + '</span></td>' +
                 '<td>' + escapeHtml(tk.description) + (tk.result ? '<div class="team-task-result"><span class="iconify" data-icon="lucide:corner-down-right" style="font-size:11px;"></span> ' + escapeHtml(tk.result.slice(0, 80)) + '</div>' : '') + '</td>' +
                 '<td style="font-size:12px;">' + assignee + '</td>' +
-                '<td style="text-align:center;color:var(--text-muted);">' + (tk.deps.length > 0 ? tk.deps.length : '—') + '</td>' +
+                '<td>' + roleTag + '</td>' +
+                '<td style="text-align:center;color:var(--text-muted);">' + ((tk.deps || []).length > 0 ? (tk.deps || []).length : '—') + '</td>' +
                 '<td style="font-size:11px;color:var(--text-muted);">' + teamTimeAgo(tk.updatedAt) + '</td>' +
               '</tr>';
             }).join('') +
@@ -2719,6 +3467,30 @@ async function loadTeam() {
         }
       </div>
     </div>
+
+    ${safeHandoffs.length > 0 ? `
+    <div class="panel" style="margin-top:16px;">
+      <div class="panel-header">
+        <span class="panel-title"><span class="iconify" data-icon="lucide:arrow-right-left" style="font-size:15px;vertical-align:middle;margin-right:6px;"></span>${t('teamHandoffs') || 'Handoffs'}</span>
+        <span class="team-panel-count">${safeHandoffs.filter(h => h.handoff_status === 'open').length} ${t('teamOpen') || 'open'}</span>
+      </div>
+      <div class="panel-body team-scrollable">
+        ${safeHandoffs.map(h => {
+          const sender = safeAgents.find(a => a.id === h.sender_agent_id);
+          const statusColor = h.handoff_status === 'open' ? 'var(--accent-amber)' : h.handoff_status === 'claimed' ? 'var(--accent-cyan)' : h.handoff_status === 'completed' ? 'var(--accent-green)' : 'var(--text-muted)';
+          return '<div class="team-lock-row">' +
+            '<div style="display:flex;align-items:center;gap:6px;">' +
+              '<span style="font-size:10px;padding:2px 8px;border-radius:4px;background:' + statusColor + '22;color:' + statusColor + ';font-weight:500;text-transform:uppercase;">' + escapeHtml(h.handoff_status) + '</span>' +
+              '<span style="font-size:12px;font-weight:500;">' + (sender ? escapeHtml(sender.name) : (h.sender_agent_id || '').slice(0, 8)) + '</span>' +
+              '<span style="font-size:11px;color:var(--text-muted);">→</span>' +
+              '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(139,92,246,0.15);color:#a78bfa;font-weight:500;">' + escapeHtml(h.to_role) + '</span>' +
+            '</div>' +
+            '<div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">' + escapeHtml((h.content || '').slice(0, 120)) + '</div>' +
+            '<div style="font-size:10px;color:var(--text-muted);margin-top:2px;">' + teamTimeAgo(h.created_at) + '</div>' +
+          '</div>';
+        }).join('')}
+      </div>
+    </div>` : ''}
   `;
 
   container.innerHTML = html;