@hncode/hncode 0.3.5 → 0.4.0

package/src/web-public/fonts.css

@@ -0,0 +1,31 @@
+/* Self-hosted faces: JetBrains Mono for everything, Noto Sans SC for CJK.
+
+   This product is Chinese-first. The UI body, the side rail, the settings, the
+   status line and the transcript are all Chinese — and JetBrains Mono has NO CJK
+   glyphs, so without Noto every Chinese character falls through to the OS font
+   and the page stops looking like one designed thing. Order matters: the mono
+   face comes first so Latin text (paths, code, numbers) gets the designed face,
+   then Noto's unicode-range shards take over for CJK.
+
+   There is deliberately no separate sans stack. kimi-code's UI is English, so it
+   can pair a Latin UI face (Geist) with a mono code face; a Chinese UI would be
+   all-Noto for the CJK anyway, so a second Latin face only ever covers the few
+   latin glyphs, at the cost of a second font and a mismatched metric. One mono
+   face that falls back to Noto reads as one thing. */
+@import './fonts/noto-sans-sc.css';
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
+}

package/src/web-public/home.css

@@ -0,0 +1,222 @@
+/* hncode web UI — the session directory.
+   Same tokens as app.css and the same palette as the terminal (src/colors.js). */
+
+:root {
+  color-scheme: dark;
+
+  --s0: #08090b;
+  --s1: #0d0f13;
+  --s2: #12151b;
+  --s3: #1a1e26;
+
+--fg:  #e6eaf2;
+  --fg1: #b6bfcf;
+  --fg2: #8f97a6;
+  --fg3: #6b7280;
+
+  --line:  #1b202a;
+  --line2: #272d3a;
+
+  --teal:   #00b8db;
+  --cyan:   #00d7ff;
+  --red:    #ff6b6b;
+  --green:  #5cff8f;
+
+  --mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, SFMono-Regular,
+          "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
+--sans: var(--mono);
+
+  --radius: 3px;
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; }
+
+body {
+  background: var(--s0);
+  color: var(--fg);
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100%;
+}
+
+* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background: var(--line2);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: 5px;
+}
+::selection { background: rgba(0, 184, 219, .28); }
+:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }
+
+.page {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 40px 32px 80px;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 28px;
+}
+h1 {
+  font-family: var(--mono);
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: -.01em;
+  margin: 0 0 8px;
+  color: var(--fg);
+}
+h1 .dim { color: var(--fg3); }
+.lede { color: var(--fg2); margin: 0; max-width: 56ch; font-size: 12.5px; }
+.head-right { display: flex; gap: 8px; flex-shrink: 0; }
+
+.btn {
+  appearance: none;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 4px 11px;
+  border: 1px solid var(--line2);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--fg1);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color .12s ease, color .12s ease;
+}
+.btn:hover { border-color: var(--teal); color: var(--fg); }
+
+.err {
+  color: var(--red);
+  border: 1px solid rgba(255, 107, 107, .4);
+  border-radius: var(--radius);
+  padding: 9px 12px;
+  margin: 0 0 24px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+}
+
+.groups { display: flex; flex-direction: column; gap: 32px; }
+
+.group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding-bottom: 7px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 4px;
+}
+.ws {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--fg1);
+  word-break: break-all;
+}
+.count {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--fg3);
+  white-space: nowrap;
+}
+
+.rows { display: flex; flex-direction: column; }
+
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 110px 54px;
+  gap: 16px;
+  align-items: baseline;
+  padding: 9px 10px 9px 3px;
+  border-bottom: 1px solid var(--line);
+  border-left: 2px solid transparent;
+  text-decoration: none;
+  color: inherit;
+  transition: background-color .1s ease, border-color .1s ease;
+}
+.row:hover { background: var(--s1); border-left-color: var(--teal); }
+.row:focus-visible { outline: 1px solid var(--teal); outline-offset: -2px; }
+
+.row-title {
+  font-size: 13px;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row-id {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--fg3);
+  margin-left: 8px;
+}
+.row-when {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--fg3);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.row-rounds {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--fg3);
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 10px;
+  line-height: 15px;
+  padding: 0 5px;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  margin-left: 8px;
+  vertical-align: 1px;
+}
+.tag-live { color: var(--green); }
+.tag-ro { color: var(--fg3); }
+
+.empty {
+  color: var(--fg3);
+  padding: 32px 0;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+@media (max-width: 720px) {
+  .page { padding: 28px 16px 60px; }
+  .head { flex-direction: column; align-items: flex-start; gap: 16px; }
+  .row { grid-template-columns: minmax(0, 1fr) auto; }
+  .row-rounds { display: none; }
+}
+/* Language switcher in the home header, mirroring the app's nav-lang. */
+.nav-lang { display: flex; gap: 2px; flex: none; align-items: center; }
+.nav-lang button {
+  appearance: none;
+  border: 0;
+  background: none;
+  color: var(--fg3);
+  font-family: var(--mono);
+  font-size: 11px;
+  padding: 1px 4px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: color .12s ease, background-color .12s ease;
+}
+.nav-lang button:hover { color: var(--fg1); }
+.nav-lang button.is-on { color: var(--teal); }

package/src/web-public/home.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>hncode</title>
+<link rel="stylesheet" href="fonts.css">
+<link rel="stylesheet" href="/home.css">
+</head>
+<body>
+<div class="page">
+
+  <header class="head">
+    <div class="head-left">
+      <h1>hncode <span class="dim" data-i18n="home.brandSuffix">sessions</span></h1>
+      <p class="lede" data-i18n="home.lede"></p>
+    </div>
+    <div class="head-right">
+      <div class="nav-lang" id="lang-switch"></div>
+      <button id="refresh" class="btn btn-quiet" data-i18n="home.refresh"></button>
+      <button id="logout" class="btn btn-quiet" data-i18n="home.logout"></button>
+    </div>
+  </header>
+
+  <p id="err" class="err" role="alert" hidden></p>
+
+  <main id="groups" class="groups"></main>
+
+</div>
+<script type="module" src="/home.js"></script>
+</body>
+</html>

package/src/web-public/home.js

@@ -0,0 +1,160 @@
+
+
+import { t, catalog, LANGUAGES, DEFAULT_LANG } from './i18n.js';
+
+let LANG = DEFAULT_LANG;
+try {
+  const saved = localStorage.getItem('hncode.lang');
+  if (saved && LANGUAGES.some((l) => l.id === saved)) LANG = saved;
+} catch {}
+let T = catalog(LANG);
+const tr = (key, vars) => {
+  let s = T[key] || key;
+  if (vars) for (const k of Object.keys(vars)) s = s.split('{' + k + '}').join(String(vars[k]));
+  return s;
+};
+
+function applyStatic() {
+  document.documentElement.lang = LANG === 'zh' ? 'zh-CN' : 'en';
+  for (const el of document.querySelectorAll('[data-i18n]')) {
+    el.textContent = tr(el.getAttribute('data-i18n'));
+  }
+}
+
+// Language switcher in the header, mirroring the app's buildLangSwitch: one
+// button per installed language; clicks update the module LANG, the localStorage
+// preference (shared with the app so a choice here carries over) and re-render
+// the static strings.
+function buildLangSwitch() {
+  const box = document.getElementById('lang-switch');
+  if (!box) return;
+  box.replaceChildren();
+  box.title = tr('nav.language');
+  for (const l of LANGUAGES) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.textContent = l.label;
+    b.className = l.id === LANG ? 'is-on' : '';
+    b.addEventListener('click', () => {
+      if (l.id === LANG) return;
+      LANG = l.id;
+      T = catalog(LANG);
+      try { localStorage.setItem('hncode.lang', LANG); } catch {}
+      buildLangSwitch();
+      applyStatic();
+    });
+    box.appendChild(b);
+  }
+}
+
+const groupsEl = document.getElementById('groups');
+const errEl = document.getElementById('err');
+
+function el(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+function relTime(ms) {
+  if (!ms) return '';
+  const diff = Date.now() - ms;
+  if (diff < 0) return new Date(ms).toLocaleString();
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return tr('home.justNow');
+  if (min < 60) return tr('home.minutesAgo', { n: min });
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return tr('home.hoursAgo', { n: hr });
+  const day = Math.floor(hr / 24);
+  if (day < 7) return tr('home.daysAgo', { n: day });
+  return new Date(ms).toLocaleDateString();
+}
+
+function sessionRow(s, live) {
+  const a = el('a', 'row');
+  a.href = `/s/${encodeURIComponent(s.id)}/`;
+
+  const titleCell = el('div');
+  titleCell.appendChild(el('span', 'row-title', s.title || tr('home.untitled')));
+  titleCell.appendChild(el('span', 'row-id', s.id));
+  titleCell.appendChild(el('span', 'tag ' + (live ? 'tag-live' : 'tag-ro'),
+    live ? tr('home.live') : tr('home.readonly')));
+  a.appendChild(titleCell);
+
+  a.appendChild(el('div', 'row-when', relTime(s.at || s.updatedAt)));
+  a.appendChild(el('div', 'row-rounds', s.rounds ? String(s.rounds) : ''));
+  return a;
+}
+
+function render(live, saved) {
+  groupsEl.textContent = '';
+  const liveIds = new Set(live.map((s) => s.id));
+
+  const byWs = new Map();
+  const push = (ws, item) => {
+    const key = ws || tr('home.noWorkspace');
+    if (!byWs.has(key)) byWs.set(key, []);
+    byWs.get(key).push(item);
+  };
+  for (const s of live) push(s.workspace, { s, live: true });
+  for (const s of saved) {
+    if (liveIds.has(s.id)) continue;
+    push(s.workspace, { s, live: false });
+  }
+
+  if (!byWs.size) {
+    groupsEl.appendChild(el('p', 'empty', tr('home.empty')));
+    return;
+  }
+
+  const entries = [...byWs.entries()].map(([ws, items]) => ({
+    ws,
+    items,
+    anyLive: items.some((i) => i.live),
+    newest: Math.max(0, ...items.map((i) => i.s.at || i.s.updatedAt || 0)),
+  }));
+  entries.sort((a, b) => (b.anyLive - a.anyLive) || (b.newest - a.newest));
+
+  for (const g of entries) {
+    const sec = el('section', 'group');
+    const head = el('div', 'group-head');
+    head.appendChild(el('span', 'ws', g.ws));
+    head.appendChild(el('span', 'count', tr('home.sessionCount', { n: g.items.length })));
+    sec.appendChild(head);
+    const rows = el('div', 'rows');
+    for (const it of g.items) rows.appendChild(sessionRow(it.s, it.live));
+    sec.appendChild(rows);
+    groupsEl.appendChild(sec);
+  }
+}
+
+let timer = null;
+
+async function load() {
+  try {
+    const res = await fetch('api/sessions');
+    if (res.status === 401) { location.replace('/login'); return; }
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const data = await res.json();
+    errEl.hidden = true;
+    render(data.live || [], data.saved || []);
+  } catch (e) {
+    errEl.textContent = tr('home.loadFailed') + e.message;
+    errEl.hidden = false;
+  }
+}
+
+document.getElementById('refresh').addEventListener('click', () => { void load(); });
+
+document.getElementById('logout').addEventListener('click', () => {
+  document.cookie = 'hncode_web=; Max-Age=0; Path=/';
+  location.replace('/login');
+});
+
+  buildLangSwitch();
+  applyStatic();
+void load();
+
+timer = setInterval(() => { void load(); }, 5000);
+window.addEventListener('beforeunload', () => { if (timer) clearInterval(timer); });