synabun 2.0.7 → 2.0.10

package/neural-interface/public/shared/schedules-view.js

@@ -0,0 +1,318 @@
+// SynaBun Neural Interface — what the Schedules window shows, without the page.
+// Which schedules a view lists and in which order, how a schedule's state reads, and the cron
+// in plain words. ui-schedules-studio.js draws it; tests import this file under Node, so it
+// has no imports and never touches the DOM.
+
+export const MINUTE = 60_000;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+// A run this late is overdue, not merely due: the scheduler missed it.
+export const OVERDUE_AFTER = 5 * MINUTE;
+// "Up next" looks this far ahead.
+export const UP_NEXT_WINDOW = DAY;
+
+const DAY_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export const VIEW_SCOPES = ['upcoming', 'all', 'attention', 'paused', 'timers', 'activity'];
+export const LIST_SCOPES = ['upcoming', 'all', 'attention', 'paused'];
+export const SORTS = ['next', 'name', 'last'];
+
+const pad = (n) => String(n).padStart(2, '0');
+const time = (t) => (Number.isFinite(t) ? t : NaN);
+const parse = (iso) => (iso ? time(Date.parse(iso)) : NaN);
+
+/** "a", "a and b", "a, b and c". */
+export function listJoin(items) {
+  const list = items.filter(Boolean);
+  if (list.length <= 1) return list.join('');
+  return `${list.slice(0, -1).join(', ')} and ${list.at(-1)}`;
+}
+
+function dayList(field) {
+  if (field === '*' || field === '?') return 'Every day';
+  if (field === '1-5') return 'Weekdays';
+  if (field === '0,6' || field === '6,0' || field === '6,7') return 'Weekends';
+  const parts = field.split(',');
+  const names = [];
+  for (const part of parts) {
+    const range = part.match(/^(\d)-(\d)$/);
+    if (range) {
+      const from = DAY_SHORT[+range[1] % 7], to = DAY_SHORT[+range[2] % 7];
+      if (!from || !to) return null;
+      names.push(`${from}–${to}`);
+    } else if (/^\d$/.test(part)) {
+      names.push(DAY_SHORT[+part % 7]);
+    } else {
+      return null;
+    }
+  }
+  return listJoin(names);
+}
+
+function timesOf(minute, hour) {
+  const m = /^\d{1,2}$/.test(minute) ? +minute : null;
+  if (minute === '*' && hour === '*') return { every: 'every minute' };
+  const minStep = minute.match(/^\*\/(\d+)$/);
+  if (minStep && hour === '*') return { every: `every ${minStep[1]} minutes` };
+  if (m == null) {
+    // Several minutes in one hour: "at 09:00 and 09:30".
+    if (/^\d{1,2}(,\d{1,2})+$/.test(minute) && /^\d{1,2}$/.test(hour)) {
+      return { at: listJoin(minute.split(',').map(x => `${pad(+hour)}:${pad(+x)}`)) };
+    }
+    return null;
+  }
+  if (hour === '*') return { every: `every hour at :${pad(m)}` };
+  const hourStep = hour.match(/^\*\/(\d+)$/);
+  if (hourStep) return { every: `every ${hourStep[1]} hours at :${pad(m)}` };
+  const hourRange = hour.match(/^(\d{1,2})-(\d{1,2})$/);
+  if (hourRange) return { every: `every hour from ${pad(+hourRange[1])}:${pad(m)} to ${pad(+hourRange[2])}:${pad(m)}` };
+  if (/^\d{1,2}(,\d{1,2})*$/.test(hour)) return { at: listJoin(hour.split(',').map(h => `${pad(+h)}:${pad(m)}`)) };
+  return null;
+}
+
+/**
+ * A five-field cron in plain words: "Every day at 06:55, 14:55 and 20:55", "Weekdays at 09:00",
+ * "Every 15 minutes". Anything it cannot say plainly comes back as the expression itself.
+ */
+export function describeCron(cron) {
+  const expr = String(cron ?? '').trim();
+  const fields = expr.split(/\s+/);
+  if (fields.length !== 5) return expr;
+  const [minute, hour, dom, month, dow] = fields;
+  if (month !== '*') return expr;
+  let days;
+  if (dom === '*' || dom === '?') days = dayList(dow);
+  else if (dow === '*' && /^\d{1,2}(,\d{1,2})*$/.test(dom)) {
+    const dates = dom.split(',').map(Number);
+    days = `${dates.length > 1 ? 'Days' : 'Day'} ${listJoin(dates)} of every month`;
+  } else return expr;
+  const times = timesOf(minute, hour);
+  if (!days || !times) return expr;
+  if (times.at) return `${days} at ${times.at}`;
+  const every = times.every.charAt(0).toUpperCase() + times.every.slice(1);
+  return days === 'Every day' ? every : `${days}, ${times.every}`;
+}
+
+/** One line of text from a run result: no newlines, no runs of spaces. */
+export function oneLine(text) {
+  return String(text ?? '').replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * How the last run went, apart from whether the schedule is on: `kind` is ok, failed, started,
+ * stopped, interrupted, never or other; `label` is the word to show; `reason` the server's words.
+ */
+export function lastRunState(schedule) {
+  const raw = schedule?.lastRunResult;
+  if (raw == null || raw === '') return { kind: 'never', label: 'Not run yet', reason: '' };
+  const text = String(raw);
+  if (text === 'completed') return { kind: 'ok', label: 'Completed', reason: '' };
+  if (text === 'launched' || text === 'running' || text === 'started') return { kind: 'started', label: 'Started', reason: '' };
+  if (text === 'template_missing') return { kind: 'failed', label: 'Automation missing', reason: 'The automation this schedule launches no longer exists.' };
+  const colon = text.indexOf(':');
+  const head = (colon >= 0 ? text.slice(0, colon) : text).trim();
+  const reason = colon >= 0 ? text.slice(colon + 1).trim() : '';
+  if (head === 'error') return { kind: 'failed', label: 'Failed', reason: reason || 'The run failed.' };
+  if (head === 'stopped') return { kind: 'stopped', label: 'Stopped', reason: reason === 'user' ? 'Stopped by you' : reason };
+  if (head === 'interrupted') return { kind: 'interrupted', label: 'Interrupted', reason };
+  return { kind: 'other', label: head.charAt(0).toUpperCase() + head.slice(1), reason };
+}
+
+export const isFailing = (schedule) => lastRunState(schedule).kind === 'failed';
+
+export function isOverdue(schedule, now = Date.now()) {
+  const next = parse(schedule?.nextRun);
+  return !!schedule?.enabled && Number.isFinite(next) && next < now - OVERDUE_AFTER;
+}
+
+/** An active schedule whose last run failed, or that missed its time. A paused one waits for you. */
+export function needsAttention(schedule, now = Date.now()) {
+  return !!schedule?.enabled && (isFailing(schedule) || isOverdue(schedule, now));
+}
+
+export function isUpcoming(schedule, now = Date.now(), within = UP_NEXT_WINDOW) {
+  const next = parse(schedule?.nextRun);
+  return !!schedule?.enabled && Number.isFinite(next) && next >= now - OVERDUE_AFTER && next <= now + within;
+}
+
+const groupIdOf = (scope) => (typeof scope === 'string' && scope.startsWith('group:') ? scope.slice(6) : null);
+export { groupIdOf };
+
+/** Does a schedule belong to a list scope (a view, a group, or ungrouped)? */
+export function inScope(schedule, scope, { now = Date.now(), groupIds = null } = {}) {
+  const groupId = groupIdOf(scope);
+  if (groupId) return schedule.groupId === groupId;
+  switch (scope) {
+    case 'upcoming': return isUpcoming(schedule, now);
+    case 'attention': return needsAttention(schedule, now);
+    case 'paused': return !schedule.enabled;
+    case 'ungrouped': return !schedule.groupId || (groupIds ? !groupIds.has(schedule.groupId) : false);
+    default: return true;
+  }
+}
+
+/** The counts the rail shows next to each view. */
+export function scopeCounts(schedules, now = Date.now()) {
+  const counts = { upcoming: 0, all: schedules.length, attention: 0, paused: 0, active: 0, failing: 0 };
+  for (const s of schedules) {
+    if (isUpcoming(s, now)) counts.upcoming++;
+    if (needsAttention(s, now)) counts.attention++;
+    if (s.enabled) counts.active++; else counts.paused++;
+    if (isFailing(s)) counts.failing++;
+  }
+  return counts;
+}
+
+/** How many of a group's schedules are on, paused and need attention. */
+export function groupSummary(schedules, now = Date.now()) {
+  const summary = { total: schedules.length, active: 0, paused: 0, attention: 0 };
+  for (const s of schedules) {
+    if (s.enabled) summary.active++; else summary.paused++;
+    if (needsAttention(s, now)) summary.attention++;
+  }
+  return summary;
+}
+
+/** Lower case, accents gone: "Ação" finds "acao". */
+export function fold(text) {
+  return String(text ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+
+/**
+ * Every word of the query must appear in the schedule's name, its automation, its group, its
+ * cadence or its model. `extra` adds the words the caller knows (automation and group names).
+ */
+export function matchesQuery(schedule, query, extra = []) {
+  const terms = fold(query).split(/\s+/).filter(Boolean);
+  if (!terms.length) return true;
+  const haystack = fold([
+    schedule.name, schedule.cron, describeCron(schedule.cron), schedule.model, schedule.profile, ...extra,
+  ].filter(Boolean).join(' \u0000 '));
+  return terms.every(term => haystack.includes(term));
+}
+
+const byName = (a, b) => String(a.name || '').localeCompare(String(b.name || ''), undefined, { numeric: true, sensitivity: 'base' });
+
+/** next: active first, soonest first. name: A to Z. last: most recent run first. */
+export function sortSchedules(list, sort = 'next') {
+  const copy = [...list];
+  if (sort === 'name') return copy.sort(byName);
+  if (sort === 'last') {
+    return copy.sort((a, b) => {
+      const at = parse(a.lastRun), bt = parse(b.lastRun);
+      const av = Number.isFinite(at) ? at : -Infinity, bv = Number.isFinite(bt) ? bt : -Infinity;
+      return av !== bv ? bv - av : byName(a, b);
+    });
+  }
+  return copy.sort((a, b) => {
+    if (!!a.enabled !== !!b.enabled) return a.enabled ? -1 : 1;
+    const at = parse(a.nextRun), bt = parse(b.nextRun);
+    const av = Number.isFinite(at) ? at : Infinity, bv = Number.isFinite(bt) ? bt : Infinity;
+    return av !== bv ? av - bv : byName(a, b);
+  });
+}
+
+/** "in 45 s", "in 26 min", "in 3 h 5 min", "in 2 d 4 h"; "Due now"; "Overdue". */
+export function formatCountdown(iso, now = Date.now()) {
+  const next = parse(iso);
+  if (!Number.isFinite(next)) return { text: 'Not scheduled', state: 'none' };
+  const diff = next - now;
+  if (diff <= 0) return diff > -OVERDUE_AFTER ? { text: 'Due now', state: 'due' } : { text: 'Overdue', state: 'overdue' };
+  if (diff < MINUTE) return { text: `in ${Math.ceil(diff / 1000)} s`, state: 'soon' };
+  if (diff < HOUR) return { text: `in ${Math.floor(diff / MINUTE)} min`, state: diff < 15 * MINUTE ? 'soon' : 'future' };
+  if (diff < DAY) {
+    const h = Math.floor(diff / HOUR), m = Math.floor((diff % HOUR) / MINUTE);
+    return { text: m ? `in ${h} h ${m} min` : `in ${h} h`, state: 'future' };
+  }
+  const d = Math.floor(diff / DAY), h = Math.floor((diff % DAY) / HOUR);
+  return { text: h ? `in ${d} d ${h} h` : `in ${d} d`, state: 'future' };
+}
+
+/** "just now", "5 min ago", "2 h ago", "yesterday", "3 d ago". */
+export function formatAgo(iso, now = Date.now()) {
+  const then = parse(iso);
+  if (!Number.isFinite(then)) return '';
+  const diff = Math.max(0, now - then);
+  if (diff < MINUTE) return 'just now';
+  if (diff < HOUR) return `${Math.floor(diff / MINUTE)} min ago`;
+  if (diff < DAY) return `${Math.floor(diff / HOUR)} h ago`;
+  const days = Math.floor(diff / DAY);
+  return days === 1 ? 'yesterday' : `${days} d ago`;
+}
+
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+// The window's words are English, so are its dates: "Wed 22 Oct", never half in another language.
+const LOCALE = 'en-GB';
+
+/** "Today", "Tomorrow", "Yesterday" or the weekday and date, for a heading or a time. */
+export function dayLabel(iso, now = Date.now(), locale = LOCALE) {
+  const then = new Date(parse(iso));
+  if (Number.isNaN(then.getTime())) return '';
+  const today = new Date(now);
+  if (sameDay(then, today)) return 'Today';
+  if (sameDay(then, new Date(now + DAY))) return 'Tomorrow';
+  if (sameDay(then, new Date(now - DAY))) return 'Yesterday';
+  return then.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' });
+}
+
+/** 24-hour clock, as the cron descriptions are: "14:55". */
+export function clockTime(iso, locale = LOCALE) {
+  const then = new Date(parse(iso));
+  if (Number.isNaN(then.getTime())) return '';
+  return then.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
+}
+
+/** "Today 14:55", "Tomorrow 09:00", "Wed 22 Oct 09:00". */
+export function whenLabel(iso, now = Date.now(), locale = LOCALE) {
+  const day = dayLabel(iso, now, locale);
+  const clock = clockTime(iso, locale);
+  return day && clock ? `${day} ${clock}` : '';
+}
+
+/** A run time in the fewest words: "14:55" today, "Tomorrow 09:00", "Wed 09:00" this week, then "22 Oct". */
+export function shortWhen(iso, now = Date.now(), locale = LOCALE) {
+  const at = parse(iso);
+  if (!Number.isFinite(at)) return '';
+  const then = new Date(at);
+  const clock = clockTime(iso, locale);
+  if (sameDay(then, new Date(now))) return clock;
+  if (sameDay(then, new Date(now + DAY))) return `Tomorrow ${clock}`;
+  if (at > now && at - now < 6 * DAY) return `${then.toLocaleDateString(locale, { weekday: 'short' })} ${clock}`;
+  return then.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+}
+
+/**
+ * The launch settings a run will use and where each comes from: the schedule's own value wins,
+ * then its group's, then the automation's. `labels` names CLIs (`profiles`) and MCP presets.
+ */
+export function launchFacts(schedule, { group = null, template = null, profiles = [], mcpLabels = {} } = {}) {
+  const pick = (field) => {
+    for (const [source, owner] of [['schedule', schedule], ['group', group], ['automation', template]]) {
+      const value = owner?.[field];
+      if (value !== undefined && value !== null && value !== '') return { value, source };
+    }
+    return { value: null, source: 'default' };
+  };
+  const facts = [];
+  const profile = pick('profile');
+  const profileId = profile.value || 'claude-code';
+  facts.push({ key: 'profile', label: 'CLI', value: profiles.find(p => p.id === profileId)?.label || profileId, source: profile.value ? profile.source : 'default' });
+  const model = pick('model');
+  facts.push({ key: 'model', label: 'Model', value: model.value || 'Default', source: model.source, mono: !!model.value });
+  const context = pick('contextMode');
+  if (context.value && context.value !== 'default') facts.push({ key: 'contextMode', label: 'Context', value: context.value === '1m' ? '1M tokens' : context.value.charAt(0).toUpperCase() + context.value.slice(1), source: context.source });
+  const effort = pick('effort');
+  if (effort.value && effort.value !== 'off') facts.push({ key: 'effort', label: 'Thinking', value: effort.value.charAt(0).toUpperCase() + effort.value.slice(1), source: effort.source });
+  const mcp = pick('mcpProfile');
+  if (mcp.value) {
+    const value = mcpLabels[mcp.value] || String(mcp.value).split(',').map(x => x.trim()).filter(Boolean).join(', ');
+    facts.push({ key: 'mcpProfile', label: 'MCP tools', value, source: mcp.source });
+  }
+  if (profileId === 'codex') {
+    const account = pick('codexAccountId');
+    if (account.value) facts.push({ key: 'codexAccountId', label: 'OpenAI account', value: account.value, source: account.source });
+  }
+  const browser = pick('usesBrowser');
+  facts.push({ key: 'usesBrowser', label: 'Browser', value: browser.value === true ? 'On' : 'Off', source: browser.source });
+  return facts;
+}

package/neural-interface/public/shared/settings/settings-app-pane.js

@@ -0,0 +1,335 @@
+// ═══════════════════════════════════════════
+// SETTINGS — App (the pane)
+// ═══════════════════════════════════════════
+//
+// The software's own controls, in four sections: Updates (the version, the last
+// check, Check for updates, Install update, automatic updates), Startup (start at
+// login, start in the background), Window (what the close button does, hardware
+// acceleration) and Maintenance (the data and logs folders, Restart SynaBun).
+//
+// Inside the desktop app the settings are the app's (window.synabunDesktop.app,
+// desktop-bridge.js desktopApp); in an npm or Git install they are the server's
+// (GET /api/system/app). Updates go through ui-update.js, the same check and the
+// same dialog as the update badge. Restart SynaBun is the Apps menu's own item
+// (#menu-restart-server). settings-app.js decides what each row shows; this draws.
+
+import * as kit from './settings-kit.js';
+import { desktopApp } from '../desktop-bridge.js';
+import { on } from '../state.js';
+import { forceCheckSynabunUpdate, getSynabunUpdateData, noteSynabunAutoCheck, openSynabunUpdateModal, refreshSynabunUpdateData } from '../ui-update.js';
+import {
+  APP_URL, autoUpdateRow, canInstallUpdate, checkedLine, guessPlatform, hiddenRow, loginRow, maintenanceRow, readDesktopAppState,
+  readServerAppState, serverRefusal, updateStatus, windowRows,
+} from './settings-app.js';
+
+const RESTART_MENU_ITEM = 'menu-restart-server';
+const WRITE = Object.freeze({ 'Content-Type': 'application/json', 'X-SynaBun-UI': '1', Accept: 'application/json' });
+
+const row = (id) => `<div class="stg-help stg-app-note" id="${id}" role="status" hidden></div>`;
+
+export function buildAppTab() {
+  return `
+      <div class="stg-pane stg-app" data-stg-pane="app">
+        ${kit.card({
+          id: 'stg-sec-app-updates', section: 'app.updates',
+          status: kit.pill('', { id: 'stg-app-update-pill' }),
+          body: `
+          ${kit.toggleField('SYS001', `
+            <button type="button" class="stg-action-btn" id="stg-app-install" ${kit.inv('SYS003')} title="${kit.H('SYS003')}" hidden>${kit.L('SYS003')}</button>
+            <button type="button" class="stg-action-btn" id="stg-app-check" title="${kit.H('SYS001')}">${kit.L('SYS001')}</button>`, {
+            label: `<span id="stg-app-version">${kit.te('settings.redesign.about.loading')}</span>`,
+            helpHtml: '<span id="stg-app-update-line" aria-live="polite"></span>',
+          })}
+          ${kit.toggleField('SYS002', kit.switchInput('stg-app-auto-update'), { forId: 'stg-app-auto-update', helpHtml: '<span id="stg-app-auto-help"></span>' })}`,
+        })}
+        ${kit.card({
+          id: 'stg-sec-app-startup', section: 'app.startup',
+          body: `
+          ${kit.toggleField('SYS004', `
+            <button type="button" class="stg-action-btn compact" id="stg-app-login-settings" hidden></button>
+            ${kit.switchInput('stg-app-login')}`, { forId: 'stg-app-login', helpHtml: '<span id="stg-app-login-help"></span>' })}
+          ${row('stg-app-login-note')}
+          ${kit.toggleField('SYS005', kit.switchInput('stg-app-hidden'), { forId: 'stg-app-hidden', attrs: 'id="stg-app-hidden-row" hidden' })}
+          ${row('stg-app-hidden-note')}`,
+        })}
+        ${kit.card({
+          id: 'stg-sec-app-window', section: 'app.window',
+          body: `
+          ${row('stg-app-window-note')}
+          ${kit.toggleField('SYS006', kit.switchInput('stg-app-close-tray'), { forId: 'stg-app-close-tray' })}
+          ${row('stg-app-close-note')}
+          ${kit.toggleField('SYS007', `
+            <button type="button" class="stg-action-btn compact" id="stg-app-relaunch" ${kit.inv('SYS008')} title="${kit.H('SYS008')}" hidden>${kit.L('SYS008')}</button>
+            ${kit.switchInput('stg-app-gpu')}`, { forId: 'stg-app-gpu' })}
+          ${row('stg-app-gpu-note')}`,
+        })}
+        ${kit.card({
+          id: 'stg-sec-app-maintenance', section: 'app.maintenance',
+          body: `
+          <div class="stg-action-row">
+            <button type="button" class="stg-action-btn" id="stg-app-open-data" ${kit.inv('SYS009')} title="${kit.H('SYS009')}">${kit.L('SYS009')}</button>
+            <button type="button" class="stg-action-btn" id="stg-app-open-logs" ${kit.inv('SYS010')} title="${kit.H('SYS010')}">${kit.L('SYS010')}</button>
+            <button type="button" class="stg-action-btn" id="stg-app-restart" ${kit.inv('SYS011')} title="${kit.H('SYS011')}">${kit.L('SYS011')}</button>
+          </div>
+          ${row('stg-app-maint-note')}`,
+        })}
+      </div>`;
+}
+
+/**
+ * Load and draw the page the first time it is shown (and on every return to it), and wire it.
+ * @param {HTMLElement} overlay  the Settings panel
+ * @param {Object} [o]
+ * @param {Function} [o.fetchImpl]  fetch (tests)
+ * @param {(msg: string) => void} [o.toast]
+ * @param {Window} [o.win]  where the desktop app's bridge and the user agent are read
+ */
+export function wireAppTab(overlay, { fetchImpl = (...args) => fetch(...args), toast = () => {}, win = window } = {}) {
+  const pane = kit.paneOf(overlay, 'app');
+  if (!pane) return;
+  const $ = (id) => pane.querySelector(`#${id}`);
+  const bridge = desktopApp(win);
+  const platformGuess = guessPlatform(win.navigator?.userAgent);
+  let desktop = null;      // readDesktopAppState()
+  let server = null;       // readServerAppState()
+  let remote = false;      // the server refused: this page is not on the computer that runs SynaBun
+  let update = getSynabunUpdateData();
+  let busy = false;
+  // Nothing is said before the first answer: a row that waits for it is off, without a note.
+  let loaded = false;
+
+  const time = (iso) => {
+    try { return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); } catch { return String(iso).slice(11, 16); }
+  };
+  const say = (node, key, params) => {
+    if (!node) return;
+    const textValue = key ? kit.tx(key, params) : '';
+    node.textContent = textValue;
+    node.hidden = !textValue;
+  };
+  const setSwitch = (id, { checked, disabled }) => {
+    const input = $(id);
+    if (!input) return;
+    input.checked = !!checked;
+    input.disabled = !!disabled || busy;
+  };
+  const tone = (node, value) => { if (node) node.dataset.state = value || ''; };
+
+  // ── Drawing ──
+
+  function drawUpdates() {
+    const version = update?.current || desktop?.version || '';
+    say($('stg-app-version'), version ? 'settings.redesign.app.version' : 'settings.redesign.about.loading', { version });
+    const status = updateStatus(update);
+    const line = [kit.tx(status.key, status.params), checkedLine(update, { tx: kit.tx, time })].filter(Boolean).join(' · ');
+    const lineNode = $('stg-app-update-line');
+    if (lineNode) lineNode.textContent = line;
+    const pill = $('stg-app-update-pill');
+    if (pill) { pill.textContent = kit.tx(status.key, status.params); pill.dataset.state = status.tone; }
+    const install = $('stg-app-install');
+    if (install) install.hidden = !canInstallUpdate(update);
+    const auto = autoUpdateRow({ desktop, server, update });
+    setSwitch('stg-app-auto-update', auto);
+    say($('stg-app-auto-help'), auto.helpKey);
+  }
+
+  function drawStartup() {
+    const login = loginRow({ desktop, server, remote, platform: desktop?.platform || platformGuess });
+    setSwitch('stg-app-login', login);
+    say($('stg-app-login-help'), login.helpKey);
+    const note = $('stg-app-login-note');
+    say(note, login.note?.key, login.note?.params);
+    tone(note, login.note?.tone);
+    const open = $('stg-app-login-settings');
+    if (open) {
+      open.hidden = !(bridge && login.settingsButton);
+      if (login.settingsButton) open.textContent = kit.tx(`settings.redesign.app.startup.openSettings.${login.settingsButton}`);
+    }
+    const hidden = hiddenRow({ desktop });
+    const hiddenField = $('stg-app-hidden-row');
+    if (hiddenField) hiddenField.hidden = !hidden.shown;
+    setSwitch('stg-app-hidden', hidden);
+    say($('stg-app-hidden-note'), hidden.shown ? hidden.noteKey : '');
+  }
+
+  function drawWindow() {
+    const rows = windowRows({ desktop });
+    say($('stg-app-window-note'), rows.reasonKey);
+    setSwitch('stg-app-close-tray', rows.closeToTray);
+    say($('stg-app-close-note'), rows.closeToTray.noteKey);
+    setSwitch('stg-app-gpu', rows.gpu);
+    const relaunch = $('stg-app-relaunch');
+    if (relaunch) relaunch.hidden = !rows.gpu.restartNeeded;
+    say($('stg-app-gpu-note'), rows.gpu.restartNeeded ? 'settings.redesign.app.window.restartNeeded' : '');
+  }
+
+  function drawMaintenance() {
+    const maint = maintenanceRow({ desktop, server, remote, restartAvailable: !!document.getElementById(RESTART_MENU_ITEM) });
+    for (const id of ['stg-app-open-data', 'stg-app-open-logs']) { const btn = $(id); if (btn) btn.disabled = !maint.folders || busy; }
+    const restart = $('stg-app-restart');
+    if (restart) restart.hidden = !maint.restart;
+    const note = $('stg-app-maint-note');
+    if (note && !note.dataset.error) say(note, maint.noteKey);
+  }
+
+  function draw() {
+    if (!loaded) {
+      pane.querySelectorAll('input[type="checkbox"]').forEach((input) => { input.disabled = true; });
+      return;
+    }
+    drawUpdates();
+    drawStartup();
+    drawWindow();
+    drawMaintenance();
+  }
+
+  // ── Loading ──
+
+  async function readServer() {
+    try {
+      const res = await fetchImpl(APP_URL, { headers: { Accept: 'application/json' } });
+      const body = await res.json().catch(() => null);
+      if (res.ok) { server = readServerAppState(body); remote = false; return; }
+      remote = serverRefusal(res.status, body) === 'remote';
+      server = null;
+    } catch {
+      server = null;
+    }
+  }
+
+  /**
+   * The update state as it is, without a check of its own: the desktop app's last report, or the server's last
+   * look (GET /api/system/version without ?force: with automatic updates off, opening this page asks nothing).
+   * Through ui-update.js, so the badge and Install update see the same offer this page shows.
+   */
+  async function readUpdate() {
+    try { return (await refreshSynabunUpdateData()) || getSynabunUpdateData(); } catch { return getSynabunUpdateData(); }
+  }
+
+  async function load() {
+    if (bridge) {
+      try { desktop = readDesktopAppState(await bridge.state()); } catch { desktop = null; }
+    } else {
+      await readServer();
+    }
+    update = (await readUpdate()) || update;
+    loaded = true;
+    if (!document.body.contains(overlay)) return;
+    draw();
+  }
+
+  let loading = null;
+  const ensure = () => { if (!loading) loading = load().finally(() => { loading = null; }); return loading; };
+  draw();
+  if (kit.paneActive(overlay, 'app')) ensure();
+  overlay.addEventListener('stg-page-change', (e) => { if (e.detail?.page === 'app') ensure(); });
+
+  // The app's updater and its settings speak when they change (a check on its schedule, the login item put back).
+  const offUpdate = on('synabun-update:changed', (data) => { update = data || update; if (loaded && document.body.contains(overlay)) drawUpdates(); });
+  let offApp = null;
+  try {
+    offApp = bridge?.onChange?.((state) => {
+      const next = readDesktopAppState(state);
+      if (next && document.body.contains(overlay)) { desktop = next; draw(); }
+    });
+  } catch {}
+  const observer = new MutationObserver(() => {
+    if (document.body.contains(overlay)) return;
+    observer.disconnect();
+    try { offUpdate?.(); } catch {}
+    try { offApp?.(); } catch {}
+  });
+  observer.observe(document.body, { childList: true });
+
+  // ── Changes ──
+
+  /** One switch of the desktop app: the app answers with its whole state (and what the system said). */
+  async function setDesktop(key, value) {
+    try {
+      desktop = readDesktopAppState(await bridge.set(key, value)) || desktop;
+    } catch {
+      desktop = desktop ? { ...desktop, error: 'save-failed' } : desktop;
+      toast(kit.tx('settings.redesign.app.saveFailed'));
+    }
+  }
+
+  /** One switch of an npm or Git install. */
+  async function setServer(path, payload) {
+    try {
+      const res = await fetchImpl(`${APP_URL}/${path}`, { method: 'PUT', headers: WRITE, body: JSON.stringify(payload) });
+      const body = await res.json().catch(() => null);
+      const next = readServerAppState(body);
+      if (next) server = next;
+      else {
+        if (serverRefusal(res.status, body) === 'remote') remote = true;
+        toast(kit.tx('settings.redesign.app.saveFailed'));
+      }
+      return res.ok;
+    } catch {
+      if (server) server = { ...server, error: 'network' };
+      toast(kit.tx('settings.redesign.app.saveFailed'));
+      return false;
+    }
+  }
+
+  async function change(work) {
+    if (busy) return;
+    busy = true;
+    try { await work(); } finally { busy = false; draw(); }
+  }
+
+  $('stg-app-auto-update')?.addEventListener('change', (e) => change(async () => {
+    const on = e.target.checked;
+    if (desktop) {
+      await setDesktop('autoUpdate', on);
+      update = (await readUpdate()) || update;
+    } else if (await setServer('updates', { auto: on })) {
+      noteSynabunAutoCheck(on);
+      // Turned on: look now, as a start of the server would.
+      if (on) { try { update = (await forceCheckSynabunUpdate({ alert: false })) || update; } catch {} }
+    }
+  }));
+
+  $('stg-app-login')?.addEventListener('change', (e) => change(async () => {
+    if (desktop) await setDesktop('openAtLogin', e.target.checked);
+    else await setServer('startup', { enabled: e.target.checked });
+  }));
+  $('stg-app-hidden')?.addEventListener('change', (e) => change(() => setDesktop('startHidden', e.target.checked)));
+  $('stg-app-close-tray')?.addEventListener('change', (e) => change(() => setDesktop('closeToTray', e.target.checked)));
+  $('stg-app-gpu')?.addEventListener('change', (e) => change(() => setDesktop('hardwareAcceleration', e.target.checked)));
+  $('stg-app-relaunch')?.addEventListener('click', () => { try { bridge?.relaunch?.(); } catch {} });
+  $('stg-app-login-settings')?.addEventListener('click', () => { try { bridge?.openLoginSettings?.(); } catch {} });
+
+  $('stg-app-check')?.addEventListener('click', () => change(async () => {
+    const btn = $('stg-app-check');
+    if (btn) btn.disabled = true;
+    say($('stg-app-update-line'), 'settings.redesign.app.update.checking');
+    let found = null;
+    try { found = await forceCheckSynabunUpdate({ alert: false }); } catch {}
+    // A failed check answers null: the desktop app's report says why; for the server, the check failed.
+    if (found) update = found;
+    else if (bridge) update = (await readUpdate()) || update;
+    else update = { ...(update || {}), updateAvailable: false, checkedAt: new Date().toISOString(), npmError: 'failed', gitError: 'failed' };
+    if (btn) btn.disabled = false;
+  }));
+  $('stg-app-install')?.addEventListener('click', () => openSynabunUpdateModal());
+
+  async function openFolder(which) {
+    const note = $('stg-app-maint-note');
+    let ok = false;
+    if (bridge) {
+      try { ok = !!(await bridge.openFolder(which))?.ok; } catch { ok = false; }
+    } else {
+      try {
+        const res = await fetchImpl(`${APP_URL}/open-folder`, { method: 'POST', headers: WRITE, body: JSON.stringify({ which }) });
+        ok = res.ok;
+      } catch { ok = false; }
+    }
+    if (note) {
+      if (ok) { delete note.dataset.error; drawMaintenance(); } else { note.dataset.error = '1'; say(note, 'settings.redesign.app.maintenance.openFailed'); tone(note, 'err'); }
+    }
+  }
+  $('stg-app-open-data')?.addEventListener('click', () => openFolder('data'));
+  $('stg-app-open-logs')?.addEventListener('click', () => openFolder('logs'));
+  $('stg-app-restart')?.addEventListener('click', () => document.getElementById(RESTART_MENU_ITEM)?.click());
+}