@surething/cockpit 1.0.244 → 1.0.246

package/apps/file-viewer/app.jsx

@@ -0,0 +1,411 @@
+/**
+ * file-viewer — preview a local file (markdown / json / image / pdf).
+ *
+ * Built-in, but written against the PUBLIC contract only, so it doubles as the
+ * reference app (see ~/.cockpit/skills/html/SKILL.md):
+ *   - all data goes through cockpit.bash — no privileged endpoints
+ *   - libs come from /html-lib (same-origin, offline)
+ *   - theming is the `cockpit-theme` meta, handled by the SDK
+ * Opened as /apps/builtin/file-viewer/index.html?file=<absolute path>.
+ */
+// React/ReactDOM come from the /html-lib script tags in index.html; `cockpit`
+// is the SDK injected by the server.
+/* global React, ReactDOM, cockpit */
+const { useState, useEffect, useRef, useCallback } = React;
+
+/** Inline an image up to this size as a data URL; refuse beyond it. */
+const MAX_INLINE_BYTES = 8 * 1024 * 1024;
+
+// ---------------------------------------------------------------- bash layer
+
+/**
+ * Single-quote a value for safe interpolation into a bash command string.
+ * Everything is literal inside '...', so only the quote itself needs escaping:
+ * close, insert an escaped quote, reopen.
+ */
+const sh = (v) => "'" + String(v).replace(/'/g, "'\\''") + "'";
+
+/**
+ * Run one foreground command and return stdout, collapsing BOTH failure classes
+ * into a thrown Error:
+ *   - cockpit.bash() throws        -> spawn / infrastructure failure
+ *   - resolves with exitCode !== 0 -> the command ran and failed; surface its
+ *                                     stderr rather than a generic message
+ */
+async function bash(command) {
+  let res;
+  try {
+    res = await cockpit.bash(command);
+  } catch (e) {
+    throw new Error('cannot run command: ' + ((e && e.message) || e));
+  }
+  if (res.exitCode !== 0) {
+    const detail = (res.stderr || res.stdout || '').trim();
+    throw new Error(detail || ('command exited with ' + res.exitCode));
+  }
+  return res.stdout;
+}
+
+const readText = (absPath) => bash('cat -- ' + sh(absPath));
+
+const fileSize = async (absPath) => {
+  const n = parseInt((await bash('wc -c < ' + sh(absPath))).trim(), 10);
+  return Number.isFinite(n) ? n : 0;
+};
+
+const IMAGE_MIME = {
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg',
+  gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml',
+};
+
+/** Read a binary file as a data URL, guarding against oversized payloads. */
+async function toDataUrl(absPath) {
+  const size = await fileSize(absPath);
+  if (size > MAX_INLINE_BYTES) {
+    throw new Error(
+      'file is ' + (size / 1048576).toFixed(1) + ' MB, over the ' +
+      (MAX_INLINE_BYTES / 1048576) + ' MB inline limit'
+    );
+  }
+  const mime = IMAGE_MIME[extOf(absPath)] || 'application/octet-stream';
+  // base64 reads stdin on both macOS and GNU coreutils; the output is wrapped,
+  // so strip whitespace before building the URL.
+  const b64 = (await bash('base64 < ' + sh(absPath))).replace(/\s+/g, '');
+  return 'data:' + mime + ';base64,' + b64;
+}
+
+// ------------------------------------------------------------------- helpers
+
+const extOf = (p) => {
+  const m = /\.([a-z0-9]+)$/i.exec(p || '');
+  return m ? m[1].toLowerCase() : '';
+};
+const dirOf = (p) => p.replace(/\\/g, '/').replace(/\/[^/]*$/, '') || '/';
+const baseOf = (p) => p.split(/[/\\]/).pop();
+
+/**
+ * Lazily load a script (+ optional css) once; resolves when ready.
+ * A rejected promise is evicted from the cache so a later attempt can retry —
+ * caching the rejection would make one transient failure permanent for the page.
+ */
+const loadedLibs = {};
+function loadLib(src, cssHref) {
+  if (loadedLibs[src]) return loadedLibs[src];
+  loadedLibs[src] = new Promise((resolve, reject) => {
+    if (cssHref) {
+      const css = document.createElement('link');
+      css.rel = 'stylesheet';
+      css.href = cssHref;
+      document.head.appendChild(css);
+    }
+    const s = document.createElement('script');
+    s.src = src;
+    s.onload = resolve;
+    s.onerror = () => reject(new Error('failed to load ' + src));
+    document.head.appendChild(s);
+  }).catch((err) => {
+    delete loadedLibs[src];
+    throw err;
+  });
+  return loadedLibs[src];
+}
+
+/** Run an async task on mount; expose {data, error, loading}. */
+function useAsync(task, deps) {
+  const [state, setState] = useState({ loading: true, data: null, error: null });
+  useEffect(() => {
+    let alive = true;
+    setState({ loading: true, data: null, error: null });
+    task()
+      .then((data) => { if (alive) setState({ loading: false, data, error: null }); })
+      .catch((err) => { if (alive) setState({ loading: false, data: null, error: err.message }); });
+    return () => { alive = false; };
+  }, deps);
+  return state;
+}
+
+// ------------------------------------------------------------------- widgets
+
+/**
+ * Mount one of the /html-lib widgets into a plain DOM node. They ship their own
+ * React copy, so they must own the node outright — hence the ref + imperative
+ * render/unmount instead of rendering them as children.
+ *
+ * mount() is guarded symmetrically with unmount(): a throw from inside a passive
+ * effect has no error boundary above it, so it would tear down the whole React
+ * root and blank the page. On mount failure no cleanup is registered — there is
+ * nothing mounted to tear down.
+ */
+function useWidget(ref, ready, mount, unmount, deps, onError) {
+  useEffect(() => {
+    if (!ready || !ref.current) return;
+    const el = ref.current;
+    try {
+      mount(el);
+    } catch (e) {
+      if (onError) onError(e.message || String(e));
+      return;
+    }
+    return () => { try { unmount(el); } catch { /* already gone */ } };
+  }, deps);
+}
+
+// --------------------------------------------------------------------- views
+
+function Status({ kind, children }) {
+  return <div className={'viewer-status ' + kind}>{children}</div>;
+}
+
+/**
+ * Markdown. Relative image references are rewritten to their /apps/local/ URL
+ * BEFORE render: rewriting the source (rather than patching <img> afterwards)
+ * survives the widget's re-render on theme flips.
+ *
+ * URLs, not data: URLs. The markdown renderer runs every src through
+ * react-markdown's defaultUrlTransform, which drops any protocol outside
+ * http/https/mailto/xmpp — a `data:` image is silently stripped to no src at
+ * all, in BOTH the `![](…)` and raw-HTML `<img>` forms. Referencing the file's
+ * own address in the local namespace also avoids base64-ing every image through
+ * the WS bridge, so there is no size cap and no per-image shell spawn.
+ */
+const MD_IMAGE_RE = /!\[[^\]]*\]\(([^)\s]+)/g;
+const HTML_IMAGE_RE = /<img\b[^>]*\bsrc=["']([^"']+)["']/gi;
+
+/** Absolute local path → its /apps/local URL (per-segment encoded). */
+const toLocalUrl = (absPath) =>
+  '/apps/local/' +
+  absPath
+    .replace(/\\/g, '/')
+    .split('/')
+    .map(encodeURIComponent)
+    .join('/')
+    .replace(/^\//, '');
+
+function resolveRelativeImages(text, dir) {
+  const isRemote = (s) => /^(https?:|data:|\/)/i.test(s);
+  const found = [];
+  const collect = (re) => {
+    let m;
+    re.lastIndex = 0;
+    while ((m = re.exec(text)) !== null) {
+      const src = m[1];
+      if (src && !isRemote(src) && found.indexOf(src) < 0) found.push(src);
+    }
+  };
+  collect(MD_IMAGE_RE);
+  collect(HTML_IMAGE_RE);
+  if (!found.length) return text;
+
+  const urls = new Map(found.map((src) => {
+    let rel = src;
+    try { rel = decodeURIComponent(src); } catch { /* keep as written */ }
+    return [src, toLocalUrl(dir + '/' + rel.replace(/^\.\//, ''))];
+  }));
+
+  // Substitute INSIDE each image match only. A document-wide substring replace
+  // would corrupt any path that contains another as a substring (`img.png` is
+  // inside `sub/img.png`) and would also rewrite prose or code blocks that
+  // merely mention the filename.
+  const substitute = (match, src) =>
+    urls.has(src) ? match.replace(src, urls.get(src)) : match;
+  return text
+    .replace(MD_IMAGE_RE, substitute)
+    .replace(HTML_IMAGE_RE, substitute);
+}
+
+function MarkdownView({ file }) {
+  const ref = useRef(null);
+  const [mountError, setMountError] = useState(null);
+  const { loading, data, error } = useAsync(async () => {
+    await loadLib('/html-lib/markdown.js', '/html-lib/markdown.css');
+    return resolveRelativeImages(await readText(file), dirOf(file));
+  }, [file]);
+
+  useWidget(
+    ref, !loading && data != null,
+    (el) => window.CockpitMarkdown.render(el, data),
+    (el) => window.CockpitMarkdown.unmount(el),
+    [loading, data],
+    setMountError
+  );
+
+  if (loading) return <Status kind="loading">loading…</Status>;
+  const failure = error || mountError;
+  if (failure) return <Status kind="error">{'file-viewer: ' + file + '\n\n' + failure}</Status>;
+  return <div className="md-view" ref={ref} />;
+}
+
+/**
+ * JSON. Default is the readable widget; the top-right button swaps to the raw
+ * pretty-printed source rendered as a markdown fence. The two widgets are
+ * separate React copies, so the inactive one is unmounted before the other
+ * takes the node.
+ */
+function JsonView({ file }) {
+  const ref = useRef(null);
+  const t = useLang();
+  const [mode, setMode] = useState('readable');
+  // WHICH mode's lib is loaded — deliberately not a bare `libReady` boolean.
+  // `setLibReady(false)` would only be *scheduled* by this effect, so the
+  // useWidget effect running later in the SAME commit would still observe the
+  // previous mode's `true` and mount a widget whose bundle is not loaded yet.
+  // Comparing `loadedMode === mode` cannot go stale that way: on a mode switch
+  // the two differ until the new bundle actually resolves.
+  const [loadedMode, setLoadedMode] = useState(null);
+  const [libError, setLibError] = useState(null);
+  const { loading, data, error } = useAsync(() => readText(file), [file]);
+
+  useEffect(() => {
+    const lib = mode === 'readable'
+      ? loadLib('/html-lib/json-viewer.js')
+      : loadLib('/html-lib/markdown.js', '/html-lib/markdown.css');
+    let alive = true;
+    setLibError(null);
+    lib
+      .then(() => { if (alive) setLoadedMode(mode); })
+      .catch((e) => { if (alive) setLibError(e.message); });
+    return () => { alive = false; };
+  }, [mode]);
+
+  useWidget(
+    ref, loadedMode === mode && !loading && data != null,
+    (el) => {
+      if (mode === 'readable') window.CockpitJson.render(el, data);
+      else window.CockpitMarkdown.render(el, jsonToMarkdown(data), { toc: false });
+    },
+    (el) => {
+      if (mode === 'readable') window.CockpitJson.unmount(el);
+      else window.CockpitMarkdown.unmount(el);
+    },
+    [loadedMode, mode, loading, data],
+    setLibError
+  );
+
+  const toggle = useCallback(
+    () => setMode((m) => (m === 'readable' ? 'raw' : 'readable')),
+    []
+  );
+
+  if (loading) return <Status kind="loading">loading…</Status>;
+  if (error) return <Status kind="error">{'file-viewer: ' + file + '\n\n' + error}</Status>;
+  if (libError) return <Status kind="error">{'file-viewer: ' + libError}</Status>;
+  return (
+    <>
+      <button type="button" className="json-toggle" onClick={toggle}>
+        {mode === 'readable' ? t('raw') : t('readable')}
+      </button>
+      <div className={mode === 'readable' ? 'json-view' : 'md-view'} ref={ref} />
+    </>
+  );
+}
+
+function jsonToMarkdown(text) {
+  let body = text;
+  try { body = JSON.stringify(JSON.parse(text), null, 2); } catch { /* show raw */ }
+  // The fence must be longer than any backtick run inside the content.
+  let fence = '```';
+  const runs = body.match(/`+/g);
+  if (runs) {
+    const longest = Math.max.apply(null, runs.map((s) => s.length));
+    while (fence.length <= longest) fence += '`';
+  }
+  return fence + 'json\n' + body + '\n' + fence;
+}
+
+function ImageView({ file }) {
+  const [natural, setNatural] = useState(false);
+  const { loading, data, error } = useAsync(() => toDataUrl(file), [file]);
+
+  if (loading) return <Status kind="loading">loading…</Status>;
+  if (error) return <Status kind="error">{'file-viewer: ' + file + '\n\n' + error}</Status>;
+  return (
+    <div
+      className={'img-view' + (natural ? ' natural' : '')}
+      onClick={() => setNatural((n) => !n)}
+    >
+      <img src={data} alt={baseOf(file)} />
+    </div>
+  );
+}
+
+function PdfView({ file }) {
+  const ref = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let alive = true;
+    loadLib('/html-lib/pdf-viewer.js', '/html-lib/pdf-viewer.css')
+      .then(() => { if (alive) setReady(true); })
+      .catch((e) => { if (alive) setError(e.message); });
+    return () => { alive = false; };
+  }, []);
+
+  useWidget(
+    ref, ready,
+    (el) => window.CockpitPdf.render(el, { cwd: dirOf(file), path: baseOf(file) }),
+    (el) => window.CockpitPdf.unmount(el),
+    [ready, file],
+    setError
+  );
+
+  if (error) return <Status kind="error">{'file-viewer: ' + error}</Status>;
+  return <div className="pdf-view" ref={ref} />;
+}
+
+// ------------------------------------------------------------------ language
+
+// App-local dictionary. The app only PERCEIVES the language, it does not import
+// the host's i18n — same as any user app would.
+const DICT = {
+  zh: { readable: '可读', raw: '原文' },
+  en: { readable: 'Readable', raw: 'Raw' },
+};
+
+/**
+ * `cockpit.lang` is the host's language, recorded on <html lang> by the SDK.
+ * Reading it (rather than listening for the one-shot broadcast) is what makes
+ * this correct regardless of when the app happens to start. Falls back to the
+ * browser's language outside Cockpit.
+ */
+const pickLang = () => {
+  const host = (typeof cockpit !== 'undefined' && cockpit.lang) || '';
+  const lang = host || navigator.language;
+  return lang.indexOf('zh') === 0 ? 'zh' : 'en';
+};
+
+/** Re-render on host language change; the broadcast still arrives live. */
+function useLang() {
+  const [lang, setLang] = useState(pickLang);
+  useEffect(() => {
+    const onMessage = (e) => {
+      if (e.data?.type === 'cockpit:language-change') setLang(pickLang());
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+  return (key) => DICT[lang][key];
+}
+
+// ----------------------------------------------------------------------- app
+
+const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'];
+
+function App() {
+  const file = new URLSearchParams(location.search).get('file');
+  useEffect(() => {
+    if (file) document.title = baseOf(file) || 'File Viewer';
+  }, [file]);
+
+  if (!file) {
+    return <Status kind="error">file-viewer: missing ?file=&lt;absolute path&gt;</Status>;
+  }
+  const ext = extOf(file);
+  if (ext === 'md') return <MarkdownView file={file} />;
+  if (ext === 'json') return <JsonView file={file} />;
+  if (ext === 'pdf') return <PdfView file={file} />;
+  if (IMAGE_EXTS.indexOf(ext) >= 0) return <ImageView file={file} />;
+  return <Status kind="error">{'file-viewer: unsupported file type .' + ext + '\n' + file}</Status>;
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);

package/apps/file-viewer/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>File Viewer</title>
+<meta name="cockpit-name" content="file-viewer">
+<meta name="description" content="Preview local files: markdown (with TOC), json, images, pdf">
+<meta name="cockpit-icon" content="📄">
+<!-- Opt into the SDK's theme handling: follows the Cockpit host, falls back to
+     the OS outside it, and mounts the top-right light/dark toggle. -->
+<meta name="cockpit-theme" content="auto">
+<link rel="stylesheet" href="/html-lib/theme.css">
+<style>
+  /* ---- Markdown view: CockpitMarkdown widget (TocSidebar + scroll pane) owns
+     its own scroll container ---- */
+  .md-view { position: fixed; inset: 0; }
+  .md-view .cockpit-md { padding: 1.5rem; }
+  /* ---- JSON readable view (CockpitJson): pre-like themed container ---- */
+  .json-view {
+    position: fixed; inset: 0; overflow: auto;
+    padding: 1rem 1.5rem;
+    font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5;
+    white-space: pre-wrap; word-break: break-word;
+  }
+  /* right: 48px clears the SDK's own theme toggle, which sits at right: 10px. */
+  .json-toggle {
+    position: fixed; top: 10px; right: 48px; z-index: 10;
+    padding: 3px 10px;
+    border: 1px solid var(--border); border-radius: 8px;
+    background: var(--card); color: var(--muted-foreground);
+    cursor: pointer; font-size: 12px; line-height: 1.5;
+    font-family: var(--font-sans);
+  }
+  .json-toggle:hover { color: var(--foreground); }
+  .viewer-status {
+    margin: 2rem auto; max-width: 640px; padding: 1rem 1.25rem;
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--card); font-family: var(--font-mono);
+    white-space: pre-wrap; word-break: break-all;
+  }
+  .viewer-status.error { color: var(--destructive); }
+  .viewer-status.loading { color: var(--muted-foreground); }
+  /* ---- Image view: centered on the themed background, fit <-> 100% toggle ---- */
+  .img-view {
+    min-height: 100vh; display: flex; align-items: center; justify-content: center;
+    padding: 12px;
+  }
+  .img-view img {
+    max-width: 100%; max-height: calc(100vh - 24px);
+    cursor: zoom-in; border-radius: 2px;
+    box-shadow: 0 2px 12px hsl(var(--slate-12) / 0.15);
+  }
+  .img-view.natural { display: block; overflow: auto; }
+  .img-view.natural img { max-width: none; max-height: none; cursor: zoom-out; }
+  /* ---- PDF view: CockpitPdf widget, full viewport ---- */
+  .pdf-view { position: fixed; inset: 0; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script src="/html-lib/react.production.min.js"></script>
+<script src="/html-lib/react-dom.production.min.js"></script>
+<script src="/html-lib/babel.min.js"></script>
+<script>
+  (async () => {
+    const src = await (await fetch('./app.jsx')).text();
+    // Must be the classic runtime: the default (automatic) injects an
+    // `import react/jsx-runtime`, which throws "Cannot use import statement
+    // outside a module" once this is appended as a plain script.
+    const { code } = Babel.transform(src, { presets: [['react', { runtime: 'classic' }]] });
+    const s = document.createElement('script'); s.textContent = code; document.body.appendChild(s);
+  })();
+</script>
+</body>
+</html>

package/dist/{chunk-FMJUH423.mjs → chunk-7WPYQYA6.mjs}

@@ -13,7 +13,7 @@ import {
   getTerminalOutputPath,
   readJsonFile,
   writeJsonFile
-} from "./chunk-BFESJMNO.mjs";
+} from "./chunk-BRW4ZEIC.mjs";
 
 // packages/feature/console/src/server/plugins/browser/BrowserBridge.ts
 import { WebSocket } from "ws";
@@ -1313,6 +1313,47 @@ function mergeTitles(base, patch) {
   return out;
 }
 
+// packages/feature/console/src/server/api/services-config.ts
+var deriveCommandName = (command) => {
+  const firstWord = command.trim().split(/\s+/)[0] ?? "";
+  const url = firstWord.match(/^[a-z][a-z0-9+.-]*:\/\/([^/?#]+)/i);
+  return sanitizeName(url ? url[1] : firstWord) || "command";
+};
+var sanitizeName = (name) => name.replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 32);
+var normalizeCustomCommands = (raw) => {
+  if (!Array.isArray(raw)) return [];
+  const taken = /* @__PURE__ */ new Set();
+  const uniqueName = (name) => {
+    if (!taken.has(name)) {
+      taken.add(name);
+      return name;
+    }
+    let n = 2;
+    while (taken.has(`${name}-${n}`)) n++;
+    taken.add(`${name}-${n}`);
+    return `${name}-${n}`;
+  };
+  const out = [];
+  for (const entry of raw) {
+    if (typeof entry === "string") {
+      const command = entry.trim();
+      if (!command) continue;
+      out.push({ name: uniqueName(deriveCommandName(command)), command });
+      continue;
+    }
+    if (entry && typeof entry === "object") {
+      const { name, command } = entry;
+      if (typeof command !== "string" || !command.trim()) continue;
+      const cleaned = typeof name === "string" ? sanitizeName(name.trim()) : "";
+      out.push({
+        name: uniqueName(cleaned || deriveCommandName(command)),
+        command
+      });
+    }
+  }
+  return out;
+};
+
 export {
   registerBrowser,
   unregisterBrowser,
@@ -1359,5 +1400,6 @@ export {
   readHead,
   readAround,
   grepOutput,
-  readBubbleTitles
+  readBubbleTitles,
+  normalizeCustomCommands
 };

package/dist/{chunk-BFESJMNO.mjs → chunk-BRW4ZEIC.mjs}

@@ -28636,6 +28636,7 @@ var NOTE_FILE = join4(COCKPIT_DIR, "note.md");
 var SCHEDULED_TASKS_FILE = join4(COCKPIT_DIR, "scheduled-tasks.json");
 var SETTINGS_FILE = join4(COCKPIT_DIR, "settings.json");
 var SKILLS_FILE = join4(COCKPIT_DIR, "skills.json");
+var HTML_APPS_FILE = join4(COCKPIT_DIR, "html.json");
 var REVIEW_DIR = join4(COCKPIT_DIR, "review");
 var REVIEW_SIGNAL_FILE = join4(REVIEW_DIR, "_signal");
 var CLAUDE_DIR = join4(HOME_DIR, ".claude");

package/dist/{chunk-3X4GQZL4.mjs → chunk-RUNUGDPP.mjs}

@@ -10,7 +10,7 @@ import {
   readJsonFile,
   withFileLock,
   writeJsonFile
-} from "./chunk-BFESJMNO.mjs";
+} from "./chunk-BRW4ZEIC.mjs";
 
 // packages/feature/agent/src/server/state/globalState.ts
 import { createReadStream, existsSync, statSync } from "fs";

package/dist/httpApi.mjs

@@ -22,10 +22,10 @@ import {
   unregisterBrowser,
   unregisterTerminal,
   writeStdinToCommand
-} from "./chunk-FMJUH423.mjs";
+} from "./chunk-7WPYQYA6.mjs";
 import {
   getTerminalHistoryPath
-} from "./chunk-BFESJMNO.mjs";
+} from "./chunk-BRW4ZEIC.mjs";
 import "./chunk-7P6ASYW6.mjs";
 
 // src/lib/httpApi.ts