claude-simple 0.1.0

package/public/shell/hub.js

@@ -0,0 +1,192 @@
+// shell/hub.js — multi-machine picker, menu, polling
+import { batch, esc, $ } from '../lib.js';
+import {
+  machinesList, hubMode, hubMachineReady, selectedMachineId, setSelectedMachine,
+  currentProject, sessionFilter, viewingFile, ctx,
+} from '../state.js';
+import { api, probeHub } from '../api.js';
+import { loadAllSessions, loadWorkspaces } from './session-list.js';
+import { loadSessionMetaMap } from './notes.js';
+// goHome imported dynamically in enterMachine to avoid circular deps
+
+export async function refreshMachinesList() {
+  try {
+    const list = await api('GET', '/api/machines');
+    machinesList.value = Array.isArray(list) ? list : [];
+  } catch {
+    try {
+      const hub = await probeHub();
+      if (hub?.machines) machinesList.value = hub.machines;
+    } catch { /* ignore */ }
+  }
+  return machinesList.peek() || [];
+}
+
+export function renderMachinePickerList() {
+  const listEl = $('machine-picker-list');
+  const emptyEl = $('machine-picker-empty');
+  if (!listEl) return;
+  const ms = machinesList.peek() || [];
+  if (!ms.length) {
+    listEl.innerHTML = '';
+    emptyEl?.classList.remove('hidden');
+    return;
+  }
+  emptyEl?.classList.add('hidden');
+  listEl.innerHTML = ms.map(m => {
+    const online = m.online !== false;
+    const meta = [m.hostname, m.platform].filter(Boolean).join(' · ');
+    return `
+      <button type="button" class="machine-pick-card w-full text-left px-4 py-3 rounded-xl border border-base-300
+              hover:border-primary hover:bg-primary/5 transition-colors ${online ? '' : 'opacity-50'}"
+              data-pick-machine="${esc(m.id)}" ${online ? '' : 'disabled'}>
+        <div class="flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full flex-shrink-0 ${online ? 'bg-success' : 'bg-error'}"></span>
+          <span class="font-semibold text-sm font-mono">${esc(m.id)}</span>
+        </div>
+        ${meta ? `<div class="text-xs text-base-content/45 mt-1 pl-4">${esc(meta)}</div>` : ''}
+      </button>`;
+  }).join('');
+}
+
+export function showMachinePicker() {
+  const el = $('machine-picker');
+  if (!el) return;
+  el.classList.remove('hidden');
+  hubMachineReady.value = false;
+  renderMachinePickerList();
+  const status = $('machine-picker-status');
+  if (status) {
+    const n = (machinesList.peek() || []).filter(m => m.online !== false).length;
+    status.textContent = `${n} online`;
+  }
+}
+
+export function hideMachinePicker() {
+  $('machine-picker')?.classList.add('hidden');
+  hubMachineReady.value = true;
+}
+
+export function closeMachineMenu() {
+  $('machine-menu')?.classList.add('hidden');
+}
+
+export function renderMachineMenuList() {
+  const listEl = $('machine-menu-list');
+  const emptyEl = $('machine-menu-empty');
+  if (!listEl) return;
+  const ms = machinesList.peek() || [];
+  const cur = selectedMachineId.peek() || '';
+  if (!ms.length) {
+    listEl.innerHTML = '';
+    emptyEl?.classList.remove('hidden');
+    return;
+  }
+  emptyEl?.classList.add('hidden');
+  listEl.innerHTML = ms.map(m => {
+    const online = m.online !== false;
+    const active = m.id === cur;
+    const meta = [m.hostname, m.platform].filter(Boolean).join(' · ');
+    const since = m.connectedAt
+      ? new Date(m.connectedAt).toLocaleTimeString()
+      : '';
+    return `
+      <button type="button"
+        class="machine-menu-item w-full text-left px-2 py-1.5 rounded-md text-xs
+               ${active ? 'bg-primary/15 text-primary' : 'hover:bg-base-200'}
+               ${online ? '' : 'opacity-50'}"
+        data-pick-machine="${esc(m.id)}"
+        ${online ? '' : 'disabled'}>
+        <div class="flex items-center gap-1.5">
+          <span class="w-1.5 h-1.5 rounded-full flex-shrink-0 ${online ? 'bg-success' : 'bg-error'}"></span>
+          <span class="font-mono font-semibold truncate flex-1">${esc(m.id)}</span>
+          ${active ? '<span class="text-[9px] opacity-70">当前</span>' : ''}
+          <span class="text-[9px] ${online ? 'text-success' : 'text-error'}">${online ? 'online' : 'offline'}</span>
+        </div>
+        ${meta || since ? `<div class="text-[10px] text-base-content/40 pl-3.5 mt-0.5 truncate">${esc(meta)}${since ? ' · ' + esc(since) : ''}</div>` : ''}
+      </button>`;
+  }).join('');
+}
+
+export function syncTopbarMachine() {
+  const wrap = $('machine-menu-wrap');
+  const label = $('topbar-machine-label');
+  const dot = $('topbar-machine-dot');
+  if (!hubMode.peek()) {
+    wrap?.classList.add('hidden');
+    return;
+  }
+  wrap?.classList.remove('hidden');
+  const cur = selectedMachineId.peek() || '';
+  const ms = machinesList.peek() || [];
+  const info = ms.find(m => m.id === cur);
+  const online = info ? info.online !== false : false;
+  if (label) label.textContent = cur || '选择机器';
+  if (dot) {
+    dot.classList.toggle('bg-success', !!cur && online);
+    dot.classList.toggle('bg-warning', !!cur && !online);
+    dot.classList.toggle('bg-base-content/30', !cur);
+  }
+  renderMachineMenuList();
+}
+
+let _machinePollTimer = null;
+export function startMachinePolling() {
+  if (_machinePollTimer) return;
+  _machinePollTimer = setInterval(async () => {
+    if (!hubMode.peek() || !ctx.token) return;
+    await refreshMachinesList();
+    syncTopbarMachine();
+    // If current machine went offline, warn in topbar label only (don't force picker)
+    const cur = selectedMachineId.peek();
+    if (cur) {
+      const m = (machinesList.peek() || []).find(x => x.id === cur);
+      if (m && m.online === false) {
+        const label = $('topbar-machine-label');
+        if (label) label.textContent = `${cur} (offline)`;
+      }
+    }
+  }, 15000);
+}
+
+/** Enter / switch hub machine. */
+export async function enterMachine(machineId, { forceReload = false } = {}) {
+  if (!machineId) return;
+  const prev = selectedMachineId.peek();
+  const switching = prev && prev !== machineId;
+  setSelectedMachine(machineId);
+  hideMachinePicker();
+  closeMachineMenu();
+  syncTopbarMachine();
+
+  if (switching || forceReload) {
+    try { ctx.ws?.close(); } catch {}
+    ctx.ws = null;
+    ctx.sessionId = null;
+    batch(() => {
+      currentProject.value = null;
+      sessionFilter.value = null;
+      viewingFile.value = null;
+    });
+    // Drop previous machine paths so Files/Git don't browse the wrong host
+    try {
+      const { filesRoot, gitRoot, filesPath } = await import('../state.js');
+      filesRoot.value = '';
+      gitRoot.value = '';
+      filesPath.value = '';
+    } catch { /* ignore */ }
+    if (switching) {
+      const { goHome } = await import('./session-nav.js');
+      goHome();
+    }
+  }
+
+  const bar = $('topbar-project');
+  if (bar && (!currentProject.peek())) {
+    bar.textContent = `Machine · ${machineId}`;
+  }
+
+  await Promise.all([loadAllSessions(), loadWorkspaces(), loadSessionMetaMap()]);
+  hubMachineReady.value = true;
+}
+

package/public/shell/layout.js

@@ -0,0 +1,195 @@
+// shell/layout.js — sidebar, theme, new-session modal
+import { batch, esc, $ } from '../lib.js';
+import {
+  workspacesData, sessionFilter, filesPath, viewingFile, currentProject,
+  filesRoot, gitRoot, currentModel, currentAgent, setAgent,
+  hubMode, machinesList, selectedMachineId, setSelectedMachine,
+  getDefaultModel, AGENT_LABELS, ctx,
+} from '../state.js';
+// filesRoot/gitRoot used when starting a new session (default paths)
+import { api } from '../api.js';
+import { connectWS, clearMessages, appendSystemMsg, applyChatDensity } from '../chat.js';
+import { refreshModelSelect } from './session-list.js';
+import { switchTab } from './session-nav.js';
+import { showMachinePicker } from './hub.js';
+
+// ── Sidebar ───────────────────────────────────────────────────────────────────
+export function openSidebar()  { $('sidebar').classList.add('open');    $('sidebar-overlay').classList.remove('hidden'); }
+export function closeSidebar() { $('sidebar').classList.remove('open'); $('sidebar-overlay').classList.add('hidden'); }
+export function closeSidebarOnMobile() { if (window.innerWidth <= 640) closeSidebar(); }
+
+export function initSidebarToggle() {
+  const btn     = $('sidebar-toggle');
+  const sidebar = $('sidebar');
+  let collapsed = false;
+  let savedWidth = sidebar.style.width || '260px';
+
+  btn.addEventListener('click', () => {
+    collapsed = !collapsed;
+    if (collapsed) {
+      savedWidth = sidebar.style.width || '260px';
+      sidebar.style.width = '0';
+      sidebar.style.minWidth = '0';
+      sidebar.style.overflow = 'hidden';
+    } else {
+      sidebar.style.width = savedWidth;
+      sidebar.style.minWidth = '';
+      sidebar.style.overflow = '';
+    }
+    btn.textContent = collapsed ? '▶' : '◀';
+  });
+}
+
+export function initSidebarResize() {
+  const handle  = $('sidebar-resize');
+  const sidebar = $('sidebar');
+  let dragging  = false;
+
+  handle.addEventListener('mousedown', e => {
+    dragging = true;
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+    e.preventDefault();
+  });
+  document.addEventListener('mousemove', e => {
+    if (!dragging) return;
+    const w = Math.min(Math.max(e.clientX, 160), 520);
+    sidebar.style.width = w + 'px';
+    sidebar.style.minWidth = '';
+  });
+  document.addEventListener('mouseup', () => {
+    if (!dragging) return;
+    dragging = false;
+    document.body.style.userSelect = '';
+    document.body.style.cursor = '';
+  });
+}
+
+// ── Theme ─────────────────────────────────────────────────────────────────────
+export function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
+  const btn = $('btn-theme');
+  if (btn) btn.textContent = theme === 'dark' || theme === 'night' || theme === 'black' ? '🌙' : '☀️';
+  // Swap highlight.js stylesheet for light/dark
+  let link = document.getElementById('hljs-theme');
+  if (!link) {
+    link = document.querySelector('link[href*="highlight"][href*="styles"]');
+    if (link) link.id = 'hljs-theme';
+  }
+  if (link) {
+    const dark = theme === 'dark' || theme === 'night' || theme === 'black';
+    link.href = dark
+      ? 'https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css'
+      : 'https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github.min.css';
+  }
+}
+
+export function toggleTheme() {
+  const cur = document.documentElement.getAttribute('data-theme') || 'dark';
+  applyTheme(cur === 'dark' ? 'light' : 'dark');
+}
+
+// ── New Session modal ─────────────────────────────────────────────────────────
+export function openNewSessionModal() {
+  const agentSel = $('new-session-agent');
+  if (agentSel) agentSel.value = currentAgent.peek() || 'claude';
+  const sel = $('new-session-workspace');
+  if (sel) {
+    const wss = workspacesData.peek();
+    sel.innerHTML = wss.map(w =>
+      `<option value="${esc(w.configDir)}">${esc(w.name)} — ${esc(w.configDir)}</option>`
+    ).join('');
+    // pre-select current session's workspace
+    if (ctx.configDir) sel.value = ctx.configDir;
+  }
+  const mwrap = $('new-session-machine-wrap');
+  const msel = $('new-session-machine');
+  if (mwrap && msel) {
+    // Machine already chosen at login; still show locked selection for clarity
+    if (hubMode.peek()) {
+      mwrap.style.display = '';
+      const ms = machinesList.peek() || [];
+      const cur = selectedMachineId.peek() || '';
+      msel.innerHTML = ms.length
+        ? ms.map(m => `<option value="${esc(m.id)}">${esc(m.id)}${m.hostname ? ' — ' + esc(m.hostname) : ''}</option>`).join('')
+        : '<option value="">(no machines online)</option>';
+      if (cur) msel.value = cur;
+      msel.disabled = true;
+    } else {
+      mwrap.style.display = 'none';
+      if (msel) msel.disabled = false;
+    }
+  }
+  updateNewSessionAgentUI();
+  $('new-session-path').value = currentProject.peek()?.path || '';
+  $('new-session-error').classList.add('hidden');
+  $('modal-new-session').showModal();
+  setTimeout(() => $('new-session-path').focus(), 50);
+}
+
+export function updateNewSessionAgentUI() {
+  const agent = $('new-session-agent')?.value || 'claude';
+  const wrap = $('new-session-ws-wrap');
+  if (wrap) wrap.style.display = agent === 'claude' ? '' : 'none';
+}
+
+export async function startNewSession() {
+  const rawPath  = $('new-session-path').value.trim();
+  const agent    = $('new-session-agent')?.value || 'claude';
+  const configDir = agent === 'claude' ? $('new-session-workspace').value : null;
+  const errEl    = $('new-session-error');
+  errEl.classList.add('hidden');
+
+  if (!rawPath) { errEl.textContent = 'Working directory is required'; errEl.classList.remove('hidden'); return; }
+
+  // Hub: new session uses currently selected machine
+  if (hubMode.peek()) {
+    const mid = selectedMachineId.peek() || $('new-session-machine')?.value || machinesList.peek()?.[0]?.id;
+    if (!mid) {
+      errEl.textContent = '请先选择一台机器';
+      errEl.classList.remove('hidden');
+      showMachinePicker();
+      return;
+    }
+    setSelectedMachine(mid);
+  }
+
+  try {
+    const result = await api('POST', '/api/resolve-path', { path: rawPath });
+    if (!result.isDir) throw new Error('Path is not a directory');
+
+    $('modal-new-session').close();
+
+    const name = result.path.split('/').filter(Boolean).pop() || result.path;
+    ctx.sessionId = null;
+    ctx.configDir = configDir || null;
+    ctx.agent = agent;
+    setAgent(agent);
+    currentModel.value = getDefaultModel(agent) || currentModel.peek();
+    localStorage.setItem('model', currentModel.peek());
+    refreshModelSelect();
+    batch(() => {
+      currentProject.value = { id: name, name, path: result.path, machineId: selectedMachineId.peek() || ctx.machineId };
+      sessionFilter.value  = result.path;
+      filesRoot.value = result.path;
+      gitRoot.value = result.path;
+      filesPath.value = '';
+      viewingFile.value = null;
+    });
+    $('topbar-project').textContent = result.path;
+    const fi = $('files-root-input'); if (fi) fi.value = result.path;
+    const gi = $('git-root-input');   if (gi) gi.value = result.path;
+    $('welcome').classList.add('hidden');
+    const pv = $('project-view');
+    pv.classList.remove('hidden');
+    pv.style.display = 'flex';
+    clearMessages();
+    connectWS();
+    switchTab('chat');
+    appendSystemMsg(`New ${AGENT_LABELS[agent] || agent} session · ${result.path}`);
+  } catch (e) {
+    errEl.textContent = e.message;
+    errEl.classList.remove('hidden');
+  }
+}