/* global document, window, history, location, matchMedia, innerWidth, Event, setTimeout, clearTimeout */
const paths = {
  note: '<rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>',
  book: '<path d="M12 5v16M12 5C8 2 4 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-2-1-6-2-10 1Z"/>',
  chat: '<path d="M21 11a9 9 0 0 1-9 9H3l1-5A9 9 0 1 1 21 11Z"/>',
  history: '<path d="M3 4v5h5M3 9a9 9 0 1 1 0 6m9-8v5l3 2"/>',
  settings: '<circle cx="12" cy="12" r="4"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10 2 2M5 19l2-2M17 7l2-2"/>',
  activity: '<path d="M2 12h5l3-8 4 16 3-8h5"/>',
  layers: '<path d="m12 3 10 5-10 5L2 8Zm-10 9 10 5 10-5M2 17l10 5 10-5"/>',
  search: '<circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/>'
};
const icon = name => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths[name] || paths.layers}</svg>`;
const items = [
  { id: 'notes', name: '魔法笔记', icon: 'note', detail: '记录想法、整理待办', summary: '把刚才的灵感留在这里', builtin: true },
  { id: 'knowledge', name: '知识库', icon: 'book', detail: '整理资料、检索知识', summary: '下一次提问，从已有知识开始', builtin: true },
  { id: 'heartbeat', name: '智能心跳', icon: 'activity', detail: '管理定时任务与主动提醒', summary: '让例行任务按计划发生', builtin: true },
  { id: 'models', name: '本机推理监控', icon: 'layers', detail: '语音、OCR、向量任务统一管理 · 计划预览', summary: '查看本机推理任务、使用方和资源占用', builtin: true },
  { id: 'projects', name: '项目管理', icon: 'layers', detail: '跟踪项目、任务与进度', summary: '把一个想法变成可跟进的项目', builtin: false },
  { id: 'reading', name: '阅读空间', icon: 'book', detail: '集中阅读、批注与摘录', summary: '给长文和深度阅读留一个空间', builtin: false }
];
const variants = {
  dock: ['A / 紧凑入口', '最底部保留一个应用中心入口，向上展开紧凑列表。', '适合希望把侧栏空间留给对话的用户。'],
  grid: ['B / 应用宫格', '底部入口展示应用数量，展开后用宫格浏览已安装应用。', '图标与名称同时可见，常驻位置由用户选择。'],
  cards: ['C / 应用预览', '入口展示内置应用图标，展开后用卡片说明每个应用的用途。', '适合通过内容理解应用，卡片不代表后台持续运行。'],
  launcher: ['D / 搜索启动台', '最底部就是搜索入口，也可以按 Ctrl / ⌘ K 打开。', '输入名称，用方向键与 Enter 打开已安装应用。'],
  favorites: ['E / 常驻管理', '从底部管理哪些应用常驻菜单，未常驻应用也可直接打开。', '常驻应用优先排列；入口显隐不影响安装和运行状态。'],
  scenes: ['F / 私有市场预览', '未来实验：私有市场 URL、模拟目录获取与 YAML 交换。', '不联网、不写入文件；mock schema 不代表正式协议。']
};
const $ = selector => document.querySelector(selector);
const demoProjects = [
  { id: 'goodbuddy', name: 'GoodBuddy', group: '本地', conversations: ['优化项目导航', '检查构建问题'] },
  { id: 'website', name: '官网改版', group: '本地', conversations: ['发布首页'] },
  { id: 'remote', name: '客户方案与交付文档工作空间', group: 'SSH', conversations: ['整理报价'] },
  { id: 'channel', name: '团队助手', group: '通道', conversations: ['本周工作计划'] }
];
let currentProject = 'goodbuddy';
let projectActivity = [];
let expandedActivityProject = '';
function renderProjects() {
  const scenario = $('#project-scenario').value;
  const activity = demoProjects.flatMap(project => project.conversations.map((name, index) => ({ project, name, index,
    state: scenario === 'idle' || project.id === 'channel' || (scenario === 'current' && project.id !== currentProject) ? '' : scenario === 'waiting' && project.id === 'website' ? '等待审批' : '运行中'
  }))).filter(row => row.state);
  projectActivity = activity;
  const waiting = activity.filter(row => row.state !== '运行中').length;
  const running = activity.length - waiting;
  const project = demoProjects.find(entry => entry.id === currentProject);
  $('#project-name').textContent = project.name;
  $('#project-trigger').setAttribute('aria-label', `切换项目，当前项目：${project.name}`);
  $('#activity-trigger').hidden = !activity.length;
  if (!activity.length && $('#project-activity').matches(':popover-open')) $('#project-activity').hidePopover();
  $('#activity-summary').innerHTML = `${running ? `运行中 ${running}` : ''}${waiting && running ? ' · ' : ''}${waiting ? `<span class="project-waiting">待处理 ${waiting}</span>` : ''}`;
  $('#activity-trigger').setAttribute('aria-label', `所有项目活动：${$('#activity-summary').textContent}`);
  $('#project-list').innerHTML = ['本地', 'SSH', '通道'].map(group => `<section><h3>${group}</h3>${demoProjects.filter(entry => entry.group === group).map(entry => {
    const rows = activity.filter(row => row.project.id === entry.id);
    const pending = rows.filter(row => row.state !== '运行中').length;
    const active = rows.length - pending;
    return `<button data-project="${entry.id}" ${entry.id === currentProject ? 'aria-current="true"' : ''}><span class="project-row-name">${entry.name}</span>${entry.id === currentProject ? '<span aria-hidden="true">✓</span>' : ''}${rows.length ? `<small>${pending ? `<span class="project-waiting">待处理 ${pending}</span>` : ''}${active ? `<span>运行中 ${active}</span>` : ''}</small>` : ''}</button>`;
  }).join('')}</section>`).join('');
  $('#activity-project-list').innerHTML = demoProjects.map(entry => {
    const rows = activity.filter(row => row.project.id === entry.id);
    if (!rows.length) return '';
    const pending = rows.filter(row => row.state !== '运行中').length;
    return `<button data-activity-project="${entry.id}" aria-expanded="false" aria-controls="activity-sessions"><span>${entry.name}</span><small>${pending ? `<span class="project-waiting">待处理 ${pending}</span>` : `运行中 ${rows.length}`}</small><span aria-hidden="true">›</span></button>`;
  }).join('') || '<p class="muted">暂无运行中或待处理会话。</p>';
  expandActivityProject('');
  $('.history').innerHTML = `<span class="eyebrow">当前项目对话</span>${project.conversations.map((name, index) => {
    const row = activity.find(entry => entry.project.id === currentProject && entry.index === index);
    return `<button data-conversation="${currentProject}" data-conversation-index="${index}">${name}${row ? `<small>${row.state}</small>` : ''}</button>`;
  }).join('')}`;
}
$('#project-scenario').onchange = renderProjects;
const projectMenu = $('#project-menu');
function positionProjectMenu() {
  const rect = $('#project-trigger').getBoundingClientRect();
  projectMenu.style.left = `${Math.max(16, Math.min(rect.left, innerWidth - projectMenu.offsetWidth - 16))}px`;
  projectMenu.style.top = `${Math.max(16, Math.min(rect.bottom + 8, window.innerHeight - projectMenu.offsetHeight - 16))}px`;
}
projectMenu.addEventListener('toggle', event => {
  $('#project-trigger').setAttribute('aria-expanded', String(event.newState === 'open'));
  if (event.newState === 'open') positionProjectMenu();
});
window.addEventListener('resize', () => { if (projectMenu.matches(':popover-open')) positionProjectMenu(); });
window.addEventListener('scroll', () => { if (projectMenu.matches(':popover-open')) positionProjectMenu(); }, true);
function positionActivityMenu() {
  const panel = $('#project-activity');
  const rect = $('#activity-trigger').getBoundingClientRect();
  panel.classList.toggle('activity-compact', innerWidth < 620);
  panel.classList.toggle('activity-left', innerWidth >= 620 && rect.left + panel.offsetWidth > innerWidth - 16 && rect.right >= panel.offsetWidth + 16);
  const left = panel.classList.contains('activity-left') ? rect.right - panel.offsetWidth : rect.left;
  panel.style.left = `${Math.max(16, Math.min(left, innerWidth - panel.offsetWidth - 16))}px`;
  panel.style.top = `${Math.max(16, Math.min(rect.bottom + 4, window.innerHeight - panel.offsetHeight - 16))}px`;
}
function expandActivityProject(id, focus = false) {
  expandedActivityProject = id;
  $('#activity-sessions').hidden = !id;
  $('#project-activity').classList.toggle('has-submenu', Boolean(id));
  document.querySelectorAll('[data-activity-project]').forEach(button => button.setAttribute('aria-expanded', String(button.dataset.activityProject === id)));
  if (id) {
    $('#activity-project-title').textContent = demoProjects.find(project => project.id === id).name;
    $('#activity-list').innerHTML = projectActivity.filter(row => row.project.id === id).sort((a, b) => Number(a.state === '运行中') - Number(b.state === '运行中')).map(row => `<button data-conversation="${id}" data-conversation-index="${row.index}"><strong>${row.name}</strong><small>${row.state}</small></button>`).join('');
  }
  if ($('#project-activity').matches(':popover-open')) positionActivityMenu();
  if (focus) $('#activity-list button')?.focus();
}
$('#project-activity').addEventListener('toggle', event => {
  $('#activity-trigger').setAttribute('aria-expanded', String(event.newState === 'open'));
  if (event.newState === 'open') { expandActivityProject(''); positionActivityMenu(); }
});
$('#activity-project-list').addEventListener('pointerover', event => {
  const button = event.target.closest('[data-activity-project]');
  if (event.pointerType === 'mouse' && innerWidth >= 620 && button && button.dataset.activityProject !== expandedActivityProject) expandActivityProject(button.dataset.activityProject);
});
$('#activity-project-list').addEventListener('click', event => {
  const button = event.target.closest('[data-activity-project]');
  if (button) expandActivityProject(button.dataset.activityProject, true);
});
$('#activity-back').onclick = () => {
  const id = expandedActivityProject;
  expandActivityProject('');
  $(`[data-activity-project="${id}"]`)?.focus();
};
$('#project-activity').addEventListener('keydown', event => {
  const button = event.target.closest('[data-activity-project]');
  if (event.key === 'ArrowRight' && button) { event.preventDefault(); expandActivityProject(button.dataset.activityProject, true); }
  if ((event.key === 'ArrowLeft' || event.key === 'Escape') && expandedActivityProject) { event.preventDefault(); event.stopPropagation(); $('#activity-back').click(); }
  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
    const buttons = [...document.querySelectorAll(button ? '[data-activity-project]' : '#activity-list button')];
    const index = buttons.indexOf(document.activeElement);
    if (index >= 0) { event.preventDefault(); buttons[(index + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) % buttons.length].focus(); }
  }
});
window.addEventListener('resize', () => { if ($('#project-activity').matches(':popover-open')) positionActivityMenu(); });
window.addEventListener('scroll', () => { if ($('#project-activity').matches(':popover-open')) positionActivityMenu(); }, true);
renderProjects();
let variant = 'dock';
let catalogMode = 'apps';
let residentApps = items.filter(item => item.builtin && item.id !== 'models').map(item => item.id);
let enabledApps = new Set(items.filter(item => item.builtin).map(item => item.id));
let currentPage = '当前对话';
let settingsApp = 'notes';
let marketReady = false;
let importDraft = null;
const definitions = new Map();
const modelServices = [
  { id: 'ocr', name: 'OCR 文字识别', purpose: '文档入库 #12 · 正在识别第 8 / 24 页', engine: 'PaddleOCR worker', management: '受管进程', running: true, usage: '420 MB', users: '知识库 / 文档入库任务 #12' },
  { id: 'speech', name: '语音识别', purpose: '语音输入 #18 · 正在转写', engine: '本机语音识别引擎', management: '受管进程', running: true, usage: '310 MB', users: '当前会话 / 语音输入 #18' },
  { id: 'tts', name: '语音合成', purpose: '回复朗读 #19 · 正在合成', engine: '本机语音合成引擎', management: '进程内', running: true, usage: '180 MB', users: '当前会话 / 回复朗读 #19' },
  { id: 'embedding', name: '向量生成', purpose: '文档向量化 #7 · 已处理 32 / 80 个片段', engine: 'BGE-small / ONNX Runtime', management: '进程内', running: true, usage: '128 MB', users: '知识库 / 文档向量化任务 #7' }
];
let modelConfirmation = null;
let editingApps = false;
let draggedApp = '';
let installed = new Set(items.filter(item => item.builtin).map(item => item.id));
let toastTimer;
let settingsOpen = false;
const noteSettings = { showCount: true, mode: 'immediate', format: 'combined' };
const noteModes = { immediate: '即时', 'after-save-auto': '保存后自动', 'after-save-manual': '保存后手动' };
const noteFormats = { combined: '长评 + 要点', narrative: '长评', structured: '要点' };
function renderAppSettings() {
  const item = items.find(entry => entry.id === settingsApp);
  $('#app-settings').innerHTML = `<div class="note-setting-row"><div><strong>启用应用</strong><p>关闭后隐藏业务入口，保留常驻偏好、数据和后台状态。可在此重新开启。</p></div><button class="demo-switch" role="switch" aria-label="启用${item.name}" aria-checked="${enabledApps.has(item.id)}" data-app-toggle="enabled"></button></div>
    <div class="note-setting-row"><div><strong>常驻左侧菜单</strong><p>仅控制主导航捷径；应用关闭时记住此偏好。</p></div><button class="demo-switch" role="switch" aria-label="常驻左侧菜单" aria-checked="${residentApps.includes(item.id)}" data-app-toggle="pinned"></button></div>`;
  if (settingsApp === 'notes') $('#app-settings').innerHTML += `
    <div class="note-setting-row"><div><strong>显示未完成待办数量</strong><p>在左侧入口显示数量，超过 99 项显示 99+。本 Demo 使用 3 项示例。</p></div><button class="demo-switch" role="switch" aria-label="显示未完成待办数量" aria-checked="${noteSettings.showCount}" data-note-toggle="showCount"></button></div>
    <fieldset class="note-setting-options"><legend>AI 评论方式</legend><div class="note-segments" role="group" aria-label="AI 评论方式">${Object.entries(noteModes).map(([value, label]) => `<button data-note-mode="${value}" aria-pressed="${noteSettings.mode === value}">${label}</button>`).join('')}</div><p>即时：按回车并停止输入 5 秒后评论未保存草稿。保存后自动：保存后评论。保存后手动：点击 AI 分析后评论。</p></fieldset>
    <fieldset class="note-setting-options"><legend>AI 评论形式</legend><div class="note-segments" role="group" aria-label="AI 评论形式">${Object.entries(noteFormats).map(([value, label]) => `<button data-note-format="${value}" aria-pressed="${noteSettings.format === value}">${label}</button>`).join('')}</div><p>默认同时生成流式长评和结构化要点，也可只保留其中一种。</p></fieldset>
    <div class="note-settings-preview"><span class="eyebrow">当前配置预览</span><p>${noteModes[noteSettings.mode]} · ${noteFormats[noteSettings.format]}</p><small>选择后即时保留于本次 Demo 会话，不调用 AI、不修改真实设置。</small></div>`;
  if ($('#note-settings-summary')) $('#note-settings-summary').textContent = `当前设置：${noteModes[noteSettings.mode]} · ${noteFormats[noteSettings.format]}。待办数量${noteSettings.showCount ? '显示' : '隐藏'}。`;
}
function showAppSettings(id = 'notes') {
  settingsApp = id;
  const item = items.find(entry => entry.id === id);
  if (!$('#catalog').open) { catalogMode = 'apps'; $('#search').value = ''; }
  settingsOpen = true;
  $('#catalog').dataset.variant = variant;
  $('#catalog-title').textContent = `${item.name}设置`;
  $('#catalog-description').textContent = '应用中心、应用页面和全局设置共用本次演示配置。';
  $('#back-to-apps').hidden = false; $('#app-settings').hidden = false;
  for (const selector of ['.center-switch', '#search', '#catalog-items', '#market-preview']) $(selector).hidden = true;
  renderAppSettings();
  if (!$('#catalog').open) $('#catalog').showModal();
  $('#back-to-apps').focus();
}
function notify(text) {
  $('#toast').textContent = text; $('#toast').classList.add('visible');
  clearTimeout(toastTimer); toastTimer = setTimeout(() => $('#toast').classList.remove('visible'), 2200);
}
function renderApps() {
  $('#edit-apps').textContent = editingApps ? '完成' : '编辑';
  $('#resident-list').innerHTML = residentApps.filter(id => enabledApps.has(id) && (variant === 'scenes' || items.find(item => item.id === id).builtin)).map(id => {
    const index = residentApps.indexOf(id);
    const item = items.find(entry => entry.id === id);
    return `<div class="resident-row" data-resident="${id}" draggable="${editingApps}"><button data-open="${id}" ${$('#page-label').textContent === item.name ? 'aria-current="page"' : ''}>${icon(item.icon)}<span>${item.name}</span>${id === 'notes' && noteSettings.showCount ? '<small class="note-count" aria-label="3 项未完成待办（示例）">3</small>' : ''}</button>${editingApps ? `<div class="edit-actions"><button data-move="${id}" data-direction="-1" aria-label="上移${item.name}" ${index === 0 ? 'disabled' : ''}>↑</button><button data-pin="${id}" aria-label="移除${item.name}">×</button><button data-move="${id}" data-direction="1" aria-label="下移${item.name}" ${index === residentApps.length - 1 ? 'disabled' : ''}>↓</button></div>` : ''}</div>`;
  }).join('') || '<p class="empty-apps">点击 ＋，选择常驻应用。</p>';
  const subtitles = { dock: '', grid: '内置应用', cards: '笔记 · 知识 · 自动化 · 模型', launcher: 'Ctrl / ⌘ K', favorites: '管理常驻偏好', scenes: '未来私有市场 · 模拟' };
  $('#center-entry').innerHTML = `<button id="open-center" aria-haspopup="dialog"><span class="brand-mark">${variant === 'launcher' ? icon('search') : 'GB'}</span><span><strong>${variant === 'launcher' ? '搜索应用…' : '应用中心'}</strong>${subtitles[variant] ? `<small>${subtitles[variant]}</small>` : ''}</span><span class="entry-arrow">${variant === 'scenes' ? '↗' : '⌃'}</span></button>`;
}
function renderCatalog() {
  const query = $('#search').value.trim().toLowerCase();
  const matches = items.filter(item => (catalogMode === 'store' ? marketReady && !item.builtin : installed.has(item.id) && (variant === 'scenes' || item.builtin)) && `${item.name}${item.detail}`.toLowerCase().includes(query));
  if (variant === 'favorites') matches.sort((a, b) => Number(residentApps.includes(b.id)) - Number(residentApps.includes(a.id)));
  $('#catalog-items').innerHTML = matches.map(item => {
    const ready = installed.has(item.id); const pinned = residentApps.includes(item.id);
    return `<article class="center-app">${icon(item.icon)}<div class="center-app-info"><strong>${item.name}</strong><p>${item.builtin ? '内置应用' : '私有市场 · 示例'}${item.id === 'models' ? ' · 计划预览' : ''}${ready ? enabledApps.has(item.id) ? ' · 已启用' : ' · 已关闭' : ''}</p><p class="app-detail">${variant === 'cards' ? item.summary : item.detail}</p></div><div class="center-actions">${ready ? `${enabledApps.has(item.id) ? `<button data-open="${item.id}">打开</button>` : ''}<button data-app-settings="${item.id}">${enabledApps.has(item.id) ? '设置' : '设置 / 重新开启'}</button><button data-pin="${item.id}" aria-pressed="${pinned}">${pinned ? '取消常驻' : '常驻左侧'}</button>` : `<button data-install="${item.id}">模拟安装</button><button data-install-pin="${item.id}">模拟安装并常驻</button>`}</div></article>`;
  }).join('') || `<p class="empty-apps">${catalogMode === 'store' && !marketReady ? '请先模拟获取私有市场目录。' : '没有匹配的应用，请换个关键词。'}</p>`;
  $('#yaml-app').innerHTML = items.filter(item => installed.has(item.id)).map(item => `<option value="${item.id}">${item.name}</option>`).join('');
  document.querySelectorAll('.center-switch button').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.catalog === catalogMode)));
}
function openCatalog(mode = 'apps') {
  importDraft = null; $('#import-preview').hidden = true;
  if (variant !== 'scenes') mode = 'apps';
  settingsOpen = false; $('#back-to-apps').hidden = true; $('#app-settings').hidden = true;
  for (const selector of ['.center-switch', '#search', '#catalog-items']) $(selector).hidden = false;
  $('.center-switch').hidden = variant !== 'scenes';
  $('#market-preview').hidden = mode !== 'store';
  catalogMode = mode; $('#catalog').dataset.variant = variant;
  $('#catalog-title').textContent = mode === 'store' ? '私有市场 · 未来预览' : '应用中心';
  $('#catalog-description').textContent = mode === 'store' ? '目录和安装均为模拟，未接入 ShareServer。导入不会启动模型或任务。' : '内置应用无需安装；启用与常驻分别设置。系统工具请使用右侧工作栏。';
  $('#search').value = ''; renderCatalog();
  if (!$('#catalog').open) $('#catalog').showModal();
  $('#search').focus();
}
function openPage(name, keepSettings = false) {
  currentPage = name;
  modelConfirmation = null;
  if ($('#catalog').open && !keepSettings) $('#catalog').close();
  $('#page-label').textContent = name;
  $('#page-content').replaceChildren();
  const title = document.createElement('h1'); title.textContent = name;
  const description = document.createElement('p'); description.className = 'muted'; description.textContent = '主内容区页面预览。右侧工作栏保持当前工具状态。';
  $('#page-content').append(title, description);
  const app = items.find(item => item.name === name);
  $('.composer-area').hidden = Boolean(app) || name === '设置' || name === '运行记录';
  $('#page-content').classList.toggle('app-page', $('.composer-area').hidden);
  for (const panel of ['#composer-options', '#context-details']) if ($(panel).matches(':popover-open')) $(panel).hidePopover();
  $('#page-actions').replaceChildren();
  if (app && !enabledApps.has(app.id)) {
    description.textContent = '此应用已关闭，当前页面不可用。已有数据和选择保留；此操作不停止后台任务或模型服务。';
    renderApps(); return;
  }
  if (app?.id === 'models') renderModels();
  if (name === '魔法笔记' || name === '设置') {
    const summary = document.createElement('p'); summary.id = 'note-settings-summary'; summary.className = 'muted'; $('#page-content').append(summary);
    renderAppSettings();
  }
  document.querySelectorAll('.navigation button').forEach(button => button.classList.toggle('selected', button.dataset.page === name));
  renderApps(); if (!keepSettings) notify(`已打开${name}`);
}
function selectVariant(name) {
  variant = name; $('.app').dataset.variant = name;
  document.querySelectorAll('button[data-variant]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.variant === name)));
  [$('#variant-label').textContent, $('#variant-description').textContent, $('#design-tradeoff').textContent] = variants[name];
  history.replaceState(null, '', `#${name}`); renderApps();
  if ($('#catalog').open) openCatalog();
  const pageApp = items.find(item => item.name === currentPage);
  if (name !== 'scenes' && pageApp && !pageApp.builtin) openPage('当前对话');
}
function selectTool(id) {
  const content = {
    files: '<span class="eyebrow">本机 / goodbuddy · 示例</span><div class="file-row">src /</div><div class="file-row">docs /</div><div class="file-row">resources /</div><div class="file-row">README.md</div>',
    terminal: '<span class="eyebrow">当前项目 · 演示终端</span><pre>PS &gt; git status\nOn branch main\nworking tree clean\n\nPS &gt;</pre>',
    browser: '<span class="eyebrow">浏览器 · 静态示例</span><div class="file-row">https://example.com</div><h2>Example Domain</h2>',
    resources: '<span class="eyebrow">本机 · 静态演示数据</span><div class="metric">CPU <strong>18%</strong><progress value="18" max="100"></progress></div><div class="metric">内存 <strong>9.6 / 32 GB</strong><progress value="30" max="100"></progress></div><p>磁盘 IO：读 12 MB/s · 写 3 MB/s</p>'
  };
  $('#tool-content').innerHTML = content[id]; $('#tool-content').setAttribute('aria-labelledby', `tab-${id}`);
  document.querySelectorAll('[data-tool]').forEach(button => { button.setAttribute('aria-selected', String(button.dataset.tool === id)); button.tabIndex = button.dataset.tool === id ? 0 : -1; });
}
function renderModels() {
  $('#page-content').innerHTML = `<h1>本机推理监控</h1><p class="muted">统一查看语音、OCR、向量等本机推理任务与执行服务。任务进度、引擎及占用均为模拟数据。</p><h2>推理任务与服务</h2><p class="muted">下方操作作用于执行服务；启动或加载服务不会自动恢复已中断的任务。</p><div class="model-list">${modelServices.map(service => {
    const external = service.management === '外部管理';
    const active = service.management === '进程内' ? '已加载' : '运行中';
    const actions = external ? ['config'] : service.management === '进程内' ? [service.running ? 'release' : 'load'] : service.running ? ['stop', 'restart'] : ['start'];
    return `<article class="model-service"><strong>${service.name}</strong><p>${service.interrupted ? '任务已中断，需由原应用重新发起' : service.purpose}</p><p>执行服务：${service.running ? active : '未运行'} · 内存：${service.running ? service.usage : '已释放（模拟）'}</p><p>使用方：${service.interrupted ? '暂无活动使用方' : service.users}</p><div class="model-actions">${actions.map(action => `<button data-model="${service.id}" data-model-action="${action}">${modelActionLabels[action]}</button>`).join('')}</div>${modelConfirmation?.id === service.id ? `<div class="inline-confirm" role="group" aria-label="推理服务操作确认"><p>${modelActionLabels[modelConfirmation.action]} ${service.name} 将影响 ${service.interrupted ? '该执行服务，当前没有活动任务' : service.users}。仅模拟状态变化。</p><button data-model-cancel>取消</button><button data-model-confirm>确认${modelActionLabels[modelConfirmation.action]}</button></div>` : ''}<details><summary>引擎与错误详情</summary><p>${service.engine} · ${service.management}</p><p>最近错误：无（示例）。操作仅更新本页内存状态。</p></details></article>`;
  }).join('')}</div>`;
}
const modelActionLabels = { start: '启动', stop: '停止', restart: '重启', load: '加载', release: '释放', config: '连接配置' };
function applyModelAction(id, action) {
  const service = modelServices.find(entry => entry.id === id);
  service.running = !['stop', 'release'].includes(action);
  if (['stop', 'release', 'restart'].includes(action)) service.interrupted = true;
  modelConfirmation = null;
  renderModels();
  $(`[data-model="${id}"]`)?.focus();
  notify(`已模拟${modelActionLabels[action]} ${service.name}`);
}
function previewImport() {
  importDraft = null;
  const preview = $('#import-preview'); preview.hidden = false; preview.replaceChildren();
  const values = {};
  const fields = ['schema', 'id', 'name', 'version', 'entry', 'dependencies', 'resources'];
  for (const line of $('#yaml-input').value.split(/\r?\n/).filter(line => line.trim() && !line.trim().startsWith('#'))) {
    const match = line.match(/^([a-z]+):\s*(.+)$/);
    if (!match || !fields.includes(match[1]) || Object.hasOwn(values, match[1])) { preview.textContent = '仅支持示例中的七个扁平字段，不接受重复或未知字段；请修正后重新预览。'; return; }
    values[match[1]] = match[2].trim();
  }
  if (fields.some(field => !values[field]) || values.schema !== 'mock-v1' || !/^[a-z][a-z0-9-]*$/.test(values.id) || values.entry !== 'main') { preview.textContent = '请填写完整 mock-v1 示例，id 使用小写字母、数字或连字符，entry 为 main。'; return; }
  const existing = items.find(item => item.id === values.id);
  const dependencies = values.dependencies === 'none' ? [] : values.dependencies.split(',').map(value => value.trim());
  const missing = dependencies.filter(value => !value.startsWith('builtin:') || !installed.has(value.slice(8)) || !enabledApps.has(value.slice(8)));
  const blocked = existing?.builtin || missing.length || values.resources !== 'bundled';
  const conflict = installed.has(values.id);
  const text = document.createElement('p');
  text.textContent = `${values.name} · ${values.id} · v${values.version} · 主内容区入口。依赖：${values.dependencies}。${missing.length ? `缺失或关闭：${missing.join('、')}。` : '依赖已具备（模拟）。'}资源：${values.resources}。${values.resources !== 'bundled' ? '需补充外部资源，不能安装为可用。' : ''}${existing?.builtin ? '与内置应用冲突，不允许覆盖。' : conflict ? '同标识冲突：需显式更新定义，保留启用与常驻偏好。' : '没有同标识冲突。'}`;
  preview.append(text);
  const cancel = document.createElement('button'); cancel.textContent = '取消'; cancel.onclick = () => { importDraft = null; preview.hidden = true; $('#yaml-preview').focus(); }; preview.append(cancel);
  if (!blocked) {
    importDraft = values;
    const confirm = document.createElement('button'); confirm.id = 'import-confirm'; confirm.textContent = conflict ? '确认模拟更新定义' : '确认模拟安装';
    confirm.onclick = () => {
      if (!importDraft) return;
      const draft = importDraft;
      const item = items.find(entry => entry.id === draft.id);
      if (!item) items.push({ id: draft.id, name: draft.id, icon: 'layers', detail: 'YAML 导入 · 未来示例', summary: '导入的应用定义预览', builtin: false });
      // Imported text stays in textContent/textarea; catalog markup uses the validated identifier.
      definitions.set(draft.id, { ...draft });
      if (!installed.has(draft.id)) { installed.add(draft.id); enabledApps.add(draft.id); }
      importDraft = null; preview.hidden = true; renderCatalog(); renderApps(); $('#yaml-preview').focus(); notify('已模拟安装 / 更新定义，未启动模型或任务');
    };
    preview.append(confirm);
  }
}
$('#market-fetch').onclick = () => {
  const valid = /^https?:\/\/[^\s/]+(?:\/[^\s]*)?$/.test($('#market-url').value.trim());
  marketReady = valid;
  $('#market-status').textContent = valid ? `已模拟获取目录：${$('#market-url').value.trim()}，无网络请求。` : '请输入 http(s) 市场 URL 后重试。';
  renderCatalog();
};
$('#market-fail').onclick = () => { marketReady = false; $('#market-status').textContent = '模拟来源不可达，请点击模拟获取目录重试。未切换公共市场，已安装应用仍可使用。'; renderCatalog(); };
$('#market-url').oninput = () => { marketReady = false; $('#market-status').textContent = '来源已修改，请重新模拟获取目录。'; renderCatalog(); };
$('#yaml-preview').onclick = previewImport;
$('#yaml-input').oninput = () => { importDraft = null; $('#import-preview').hidden = true; };
$('#yaml-export').onclick = () => {
  const item = items.find(entry => entry.id === $('#yaml-app').value);
  const definition = definitions.get(item.id) || { schema: 'mock-v1', id: item.id, name: item.name, version: '1.0', entry: 'main', dependencies: 'none', resources: 'bundled' };
  $('#yaml-output').hidden = false;
  $('#yaml-output').textContent = '# Mock schema only; no credentials or business data\n' + Object.entries(definition).map(([key, value]) => `${key}: ${value}`).join('\n');
};
document.addEventListener('click', event => {
  const button = event.target.closest('button'); if (!button) return;
  const data = button.dataset;
  if (data.project || data.conversation) {
    currentProject = data.project || data.conversation;
    if (projectMenu.matches(':popover-open')) projectMenu.hidePopover();
    if ($('#project-activity').matches(':popover-open')) $('#project-activity').hidePopover();
    renderProjects();
    const project = demoProjects.find(entry => entry.id === currentProject);
    openPage(data.conversation ? project.conversations[Number(data.conversationIndex)] : '当前对话');
    $('#page-label').textContent = `${project.name} / ${data.conversation ? project.conversations[Number(data.conversationIndex)] : '当前对话'}`;
    $('#project-trigger').focus();
  }
  if (data.variant) selectVariant(data.variant);
  if (data.catalog) openCatalog(data.catalog);
  if (data.page) openPage(data.page);
  if (data.open) openPage(items.find(item => item.id === data.open).name);
  if (data.tool) selectTool(data.tool);
  if (data.appSettings) showAppSettings(data.appSettings);
  if (data.appToggle) {
    const id = settingsApp;
    if (data.appToggle === 'enabled') enabledApps.has(id) ? enabledApps.delete(id) : enabledApps.add(id);
    else residentApps = residentApps.includes(id) ? residentApps.filter(entry => entry !== id) : [...residentApps, id];
    renderApps(); renderComposer();
    if (currentPage === items.find(item => item.id === id).name) {
      openPage(currentPage, true);
    }
    renderAppSettings(); $(`[data-app-toggle="${data.appToggle}"]`).focus();
  }
  if (data.modelAction) {
    if (data.modelAction === 'config') {
      const row = button.closest('.model-service');
      let config = row.querySelector('.model-config');
      if (!config) { config = document.createElement('p'); config.className = 'model-config'; config.textContent = '连接配置预览：Ollama · http://localhost:11434 · 外部管理。仅展示示例，不连接或保存配置。'; row.append(config); }
    } else {
      const service = modelServices.find(entry => entry.id === data.model);
      if (service.running && service.users) { modelConfirmation = { id: data.model, action: data.modelAction }; renderModels(); $('[data-model-cancel]').focus(); }
      else applyModelAction(data.model, data.modelAction);
    }
  }
  if (button.hasAttribute('data-model-cancel')) { const id = modelConfirmation.id; modelConfirmation = null; renderModels(); $(`[data-model="${id}"]`).focus(); }
  if (button.hasAttribute('data-model-confirm') && modelConfirmation) applyModelAction(modelConfirmation.id, modelConfirmation.action);
  if (data.noteToggle || data.noteMode || data.noteFormat) {
    if (data.noteToggle === 'showCount') noteSettings.showCount = !noteSettings.showCount;
    if (data.noteMode) noteSettings.mode = data.noteMode;
    if (data.noteFormat) noteSettings.format = data.noteFormat;
    renderApps(); renderAppSettings();
    const selector = data.noteToggle ? `[data-note-toggle="${data.noteToggle}"]` : data.noteMode ? `[data-note-mode="${data.noteMode}"]` : `[data-note-format="${data.noteFormat}"]`;
    $(selector).focus();
  }
  if (button.id === 'open-center') openCatalog(variant === 'scenes' ? 'store' : 'apps');
  if (button.id === 'edit-apps') { editingApps = !editingApps; renderApps(); $('#edit-apps').focus(); }
  if (data.pin || data.install || data.installPin) {
    const id = data.pin || data.install || data.installPin;
    if (data.install || data.installPin) { importDraft = null; $('#import-preview').hidden = true; installed.add(id); enabledApps.add(id); notify('已模拟安装，未启动任务或模型'); }
    if (data.pin || data.installPin) residentApps = residentApps.includes(id) ? residentApps.filter(entry => entry !== id) : [...residentApps, id];
    renderApps();
    if ($('#catalog').open) { renderCatalog(); ($(`#catalog [data-pin="${id}"]`) || $('#search')).focus(); }
    else $('#edit-apps').focus();
  }
  if (data.move) {
    const from = residentApps.indexOf(data.move); const to = from + Number(data.direction);
    if (to >= 0 && to < residentApps.length) [residentApps[from], residentApps[to]] = [residentApps[to], residentApps[from]];
    renderApps(); $(`#resident-list [data-pin="${data.move}"]`).focus();
  }
});
$('#resident-list').addEventListener('dragstart', event => { draggedApp = event.target.closest('[data-resident]')?.dataset.resident || ''; if (!editingApps || !draggedApp) { event.preventDefault(); return; } event.dataTransfer.setData('text/plain', draggedApp); });
$('#resident-list').addEventListener('dragover', event => { if (editingApps && draggedApp) event.preventDefault(); });
$('#resident-list').addEventListener('drop', event => {
  event.preventDefault(); const target = event.target.closest('[data-resident]')?.dataset.resident;
  if (!editingApps || !residentApps.includes(draggedApp) || !target || target === draggedApp) return;
  const to = residentApps.indexOf(target); residentApps.splice(residentApps.indexOf(draggedApp), 1); residentApps.splice(to, 0, draggedApp); draggedApp = ''; renderApps(); $('#edit-apps').focus();
});
$('#resident-list').addEventListener('dragend', () => { draggedApp = ''; });
$('#search').addEventListener('input', renderCatalog);
$('#close-catalog').onclick = () => $('#catalog').close();
$('#back-to-apps').onclick = () => { const query = $('#search').value; openCatalog(catalogMode); $('#search').value = query; renderCatalog(); ($(`#catalog [data-app-settings="${settingsApp}"]`) || $('#search')).focus(); };
$('#app-settings').addEventListener('keydown', event => {
  const group = event.target.closest('.note-segments');
  if (!group || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
  event.preventDefault();
  const buttons = [...group.querySelectorAll('button')];
  const index = buttons.indexOf(event.target);
  buttons[event.key === 'Home' ? 0 : event.key === 'End' ? buttons.length - 1 : (index + (event.key === 'ArrowRight' ? 1 : -1) + buttons.length) % buttons.length].click();
});
function toggleWorkbar(visible) { $('.workbar').hidden = !visible; $('#toggle-workbar').setAttribute('aria-expanded', String(visible)); }
$('#toggle-workbar').onclick = () => toggleWorkbar($('.workbar').hidden);
$('#close-tool').onclick = () => { toggleWorkbar(false); $('#toggle-workbar').focus(); };
$('.tool-tabs').addEventListener('keydown', event => {
  const tabs = [...document.querySelectorAll('[data-tool]')]; const index = tabs.indexOf(event.target);
  if (index < 0 || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
  event.preventDefault(); const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : (index + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length;
  selectTool(tabs[next].dataset.tool); tabs[next].focus();
});
document.addEventListener('keydown', event => {
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); openCatalog(); }
  if (!$('#catalog').open || settingsOpen || variant !== 'launcher') return;
  const actions = [...document.querySelectorAll('#catalog [data-open]')]; if (!actions.length) return;
  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); const index = actions.indexOf(document.activeElement); const next = index < 0 ? (event.key === 'ArrowDown' ? 0 : actions.length - 1) : (index + (event.key === 'ArrowDown' ? 1 : -1) + actions.length) % actions.length; actions[next].focus(); }
  if (event.key === 'Enter' && document.activeElement === $('#search')) { event.preventDefault(); actions[0].click(); }
});
$('#theme').onclick = () => { const dark = document.documentElement.dataset.theme !== 'dark'; document.documentElement.dataset.theme = dark ? 'dark' : 'light'; $('#theme').textContent = dark ? '切换浅色' : '切换深色'; };
$('#reset').onclick = () => { installed = new Set(items.filter(item => item.builtin).map(item => item.id)); residentApps = [...installed].filter(id => id !== 'models'); enabledApps = new Set(installed); Object.assign(noteSettings, { showCount: true, mode: 'immediate', format: 'combined' }); editingApps = false; definitions.clear(); importDraft = null; $('#import-preview').hidden = true; renderApps(); renderComposer(); openPage('当前对话'); notify('应用启用、常驻和笔记设置已恢复默认'); };
let demoRunning = false;
let demoRecording = false;
let demoAttachments = [];
let demoQueue = [];
let demoReplyTimer;
function renderComposer() {
  const tags = $('#composer-tags'); tags.replaceChildren();
  const addTag = (text, clear) => {
    const button = document.createElement('button'); button.textContent = `${text} ×`; button.setAttribute('aria-label', `移除${text}`);
    button.onclick = () => { clear(); renderComposer(); $('#message').focus(); }; tags.append(button);
  };
  demoAttachments.forEach((name, index) => addTag(name, () => demoAttachments.splice(index, 1)));
  for (const id of ['composer-expert', 'composer-agent', 'composer-command']) {
    const select = $(`#${id}`);
    if (select.value) addTag(select.selectedOptions[0].textContent, () => { select.value = ''; });
  }
  document.querySelectorAll('[data-knowledge-control]').forEach(element => { element.hidden = !enabledApps.has('knowledge'); });
  if (enabledApps.has('knowledge')) {
    document.querySelectorAll('[data-knowledge]:checked').forEach(input => addTag(input.dataset.knowledge, () => { input.checked = false; }));
    if ($('#composer-retrieval').value === 'always') addTag('每次检索', () => { $('#composer-retrieval').value = 'auto'; });
  }
  tags.hidden = !tags.childElementCount;
  $('#stop').hidden = !demoRunning;
  $('#send').disabled = !$('#message').value.trim() && $('#composer-command').value !== 'command';
  $('#send').title = demoRunning ? '加入队列' : '发送';
  $('#send').setAttribute('aria-label', demoRunning ? '加入演示队列' : '发送演示消息');
  $('#composer-status').textContent = demoRecording ? '模拟录音中 · 再次点击结束' : demoRunning ? '模拟回复中 · 可继续发送加入队列' : '交互演示 · 不调用 AI';
  for (const id of ['composer-runtime', 'composer-mode', 'composer-expert', 'composer-agent', 'composer-command']) $(`#${id}`).disabled = demoRunning;
  $('#compact').disabled = demoRunning;
  $('#runtime-options').hidden = $('#composer-runtime').value === '直连模型';
  $('#compact').hidden = $('#composer-runtime').value === '直连模型';
  $('#demo-queue').replaceChildren();
  demoQueue.forEach((text, index) => {
    const row = document.createElement('div'); row.className = 'queue-row';
    const label = document.createElement('span'); label.textContent = text; label.title = text;
    const insert = document.createElement('button'); insert.textContent = '立即插入'; insert.setAttribute('aria-label', `立即中断并插入：${text}`);
    insert.onclick = () => { demoQueue.splice(index, 1); startDemoReply(text); };
    const remove = document.createElement('button'); remove.textContent = '×'; remove.setAttribute('aria-label', `删除待发送消息：${text}`);
    remove.onclick = () => { demoQueue.splice(index, 1); renderComposer(); };
    row.append(label, insert, remove); $('#demo-queue').append(row);
  });
  $('#demo-queue').hidden = !demoQueue.length;
}
function startDemoReply(text) {
  clearTimeout(demoReplyTimer); demoRunning = true;
  if ($('#composer-options').matches(':popover-open')) $('#composer-options').hidePopover();
  notify(`模拟处理：${text}`); renderComposer();
  demoReplyTimer = setTimeout(() => {
    demoRunning = false;
    if (demoQueue.length) startDemoReply(demoQueue.shift());
    else { renderComposer(); notify('演示回复已完成，未调用 AI'); }
  }, 8000);
}
$('#send').onclick = () => {
  if ($('#send').disabled) return;
  const text = $('#composer-command').value === 'command' ? `/init ${$('#message').value.trim()}` : $('#message').value.trim();
  $('#message').value = ''; $('#message').style.height = ''; demoAttachments = [];
  if (demoRunning) { demoQueue.push(text); renderComposer(); }
  else startDemoReply(text);
};
$('#stop').onclick = () => {
  clearTimeout(demoReplyTimer); demoRunning = false;
  if (demoQueue.length) startDemoReply(demoQueue.shift());
  else { renderComposer(); notify('已停止演示回复'); }
};
$('#message').addEventListener('input', () => { $('#message').style.height = 'auto'; $('#message').style.height = `${Math.min(180, $('#message').scrollHeight)}px`; renderComposer(); });
$('#message').addEventListener('keydown', event => { if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) { event.preventDefault(); $('#send').click(); } });
$('#attach').onclick = () => $('#attachment-input').click();
$('#attachment-input').onchange = () => { demoAttachments.push(...Array.from($('#attachment-input').files, file => file.name)); $('#attachment-input').value = ''; renderComposer(); };
$('#voice').onclick = () => {
  demoRecording = !demoRecording; $('#voice').setAttribute('aria-pressed', String(demoRecording));
  if (!demoRecording) { $('#message').value += '请帮我整理一下今天的工作计划。'; $('#message').dispatchEvent(new Event('input')); }
  renderComposer();
};
$('#composer-options').addEventListener('change', event => {
  if (event.target.id === 'composer-command' && event.target.value === 'prompt') {
    $('#message').value = '请总结当前讨论，列出关键结论和下一步行动。'; event.target.value = ''; $('#message').dispatchEvent(new Event('input'));
  }
  renderComposer();
});
$('#composer-runtime').onchange = () => {
  $('#composer-agent').value = ''; $('#composer-command').value = '';
  $('#agent-label').textContent = $('#composer-runtime').value === 'Continue' ? '预设' : 'Agent';
  $('#composer-command').querySelector('[value="command"]').hidden = $('#composer-runtime').value !== 'OpenCode';
  renderComposer();
};
$('#compact').onclick = () => {
  $('#context-value').textContent = '18%'; $('#context-progress').value = 18;
  $('#context-description').textContent = '压缩后对话估算：36k / 200k tokens';
  $('#context-details').hidePopover(); notify('已模拟压缩上下文');
};
for (const [panelId, triggerId] of [['composer-options', 'composer-options-trigger'], ['context-details', 'context-trigger']]) {
  const panel = $(`#${panelId}`); const trigger = $(`#${triggerId}`);
  const position = () => {
    const rect = trigger.getBoundingClientRect();
    panel.style.left = `${Math.max(16, Math.min(rect.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 16))}px`;
    panel.style.top = `${Math.max(16, rect.top - panel.offsetHeight - 8)}px`;
  };
  panel.addEventListener('toggle', event => { trigger.setAttribute('aria-expanded', String(event.newState === 'open')); if (event.newState === 'open') position(); });
  window.addEventListener('resize', () => { if (panel.matches(':popover-open')) position(); });
  window.addEventListener('scroll', () => { if (panel.matches(':popover-open')) position(); }, true);
}
renderComposer();
document.querySelectorAll('[data-icon]').forEach(element => { element.innerHTML = icon(element.dataset.icon); });
window.addEventListener('hashchange', () => { if (Object.hasOwn(variants, location.hash.slice(1))) selectVariant(location.hash.slice(1)); });
selectVariant(Object.hasOwn(variants, location.hash.slice(1)) ? location.hash.slice(1) : 'dock'); selectTool('files');
if (matchMedia('(max-width: 1080px)').matches) toggleWorkbar(false);