@evanbobo/colco4dsh 0.0.0-stage → 0.1.3

package/client.js

@@ -0,0 +1,755 @@
+// colco4dsh browser half: the "Colco" row in DSH's left sidebar, above More, and the page it opens in the main
+// column. DSH loads this file as a classic script from exports["./client"]; it only registers a lazy factory, and
+// React comes from DSH's shared module table. The page talks to the Host routes in lib/routes.mjs and nothing
+// else; it never runs git or reaches the Colco server.
+window.__ModuleLoader__.load({
+  id: "@evanbobo/colco4dsh",
+  factory(require) {
+    const React = require("react");
+    const { createElement: h, Fragment, useCallback, useEffect, useRef, useState } = React;
+
+    /** Base path of the Host routes. DSH serves plugin bundles under /plugins; this longer prefix belongs to us. */
+    const API = "/plugins/colco4dsh/api";
+    /** Header every POST carries so a cross-site form cannot trigger an action. */
+    const ACTION_HEADER = "x-colco4dsh";
+    /** Id of the left-sidebar row and key of the main panel it opens. */
+    const PANEL_ID = "colco";
+    /** Row position in the left sidebar: after Plugins (0) and Automation tasks (10), so directly above More. */
+    const PANEL_ORDER = 20;
+    /** Locale namespace of this plugin's copy. */
+    const NS = "colco4dsh";
+    /** How often status, runs and decisions refresh while the tab is visible. */
+    const POLL_MS = 10000;
+    /** How long one request may take before the tab gives up on it. */
+    const REQUEST_TIMEOUT_MS = 65000;
+
+    /** English copy. Chinese has the same keys; it is written with \u escapes so the repository's English-only check, which scans this file, stays green. */
+    const en = {
+      "panel.title": "Colco",
+      "panel.description": "Runner, active runs and open decisions",
+      "runner.title": "Runner",
+      "state.running": "Running",
+      "state.stopped": "Stopped",
+      "state.not_configured": "Not configured",
+      "state.rules_error": "Rules error",
+      "state.unknown": "Unknown",
+      "state.loading": "Loading",
+      "runner.steps": "{busy} of {concurrency} steps running",
+      "runner.stepsNow": "{busy} steps running",
+      "runner.name": "Runner {name}, version {version}",
+      "runner.start": "Start",
+      "runner.stop": "Stop",
+      "runner.refresh": "Refresh",
+      "runner.editRules": "Edit rules",
+      "runner.startHint": "Start installs the runner as a login service; Stop stops it.",
+      "runner.notConfigured": "No runner is set up on this computer. Log in with colco add, run colco runner init in a terminal, then finish the setup below.",
+      "runner.updated": "Updated {time}",
+      "error.section": "Could not load {section}: {message}",
+      "section.runner": "the runner",
+      "section.runs": "runs",
+      "section.decisions": "decisions",
+      "runs.title": "Active runs",
+      "runs.empty": "No active runs.",
+      "phase.queued": "Queued",
+      "phase.running": "Running",
+      "phase.waiting": "Waiting for you",
+      "phase.uncertain": "Uncertain",
+      "run.meta": "{workflow} / {step}",
+      "run.agent": "Agent {agent}",
+      "run.for": "Running for {duration}",
+      "run.openTask": "Open task",
+      "run.openResult": "Open merge request",
+      "run.task": "Task #{id}",
+      "duration.s": "{n}s",
+      "duration.m": "{n}m",
+      "duration.h": "{h}h {m}m",
+      "duration.d": "{d}d {h}h",
+      "decisions.title": "Decisions",
+      "decisions.empty": "Nothing is waiting for your decision.",
+      "decisions.recommended": "Recommended",
+      "decisions.note": "Note (optional)",
+      "decisions.answer": "Answer",
+      "decisions.answering": "Answering",
+      "decisions.pick": "Choose an option first.",
+      "decisions.open": "Open in Colco",
+      "setup.title": "Runner setup",
+      "setup.loading": "Loading the rules",
+      "setup.missing": "There is no rules file yet. Run colco runner init in a terminal to create it from the template, then open this setup again.",
+      "setup.unreadable": "The rules file at {path} is not a JSON object. Fix or remove it in an editor; saving here would lose its agents and workflows.",
+      "setup.invalid": "The rules on disk have these errors:",
+      "setup.optionsFailed": "Could not load labels and repositories: {message}",
+      "setup.labels": "Labels",
+      "setup.labelsHint": "Tasks with a label run its workflow.",
+      "setup.label": "Label",
+      "setup.workflow": "Workflow",
+      "setup.chooseLabel": "Choose a label",
+      "setup.chooseWorkflow": "Choose a workflow",
+      "setup.addLabel": "Add label",
+      "setup.remove": "Remove",
+      "setup.folders": "Folders",
+      "setup.foldersHint": "The git repositories the runner may work in.",
+      "setup.path": "Folder path",
+      "setup.addFolder": "Add folder",
+      "setup.ok": "Git repository, origin {origin}",
+      "setup.unchecked": "Not checked yet; saving checks it.",
+      "setup.missingFolder": "The folder does not exist.",
+      "setup.notGit": "The folder is not a git repository.",
+      "setup.noOrigin": "The repository has no origin remote.",
+      "setup.repository": "Colco repository",
+      "setup.chooseRepository": "Choose the repository for the fix",
+      "setup.fix": "Run in a terminal:",
+      "setup.copy": "Copy",
+      "setup.copied": "Copied",
+      "setup.save": "Save rules",
+      "setup.saving": "Saving",
+      "setup.cancel": "Close",
+      "setup.saved": "Saved {path}",
+      "setup.savedBackup": "Saved {path}; the previous file is at {backup}",
+      "setup.saveFailed": "The rules were not saved: {message}",
+      "setup.duplicateLabel": "The label {label} appears twice.",
+      "setup.incomplete": "Every label row needs both a label and a workflow.",
+      "setup.notOnServer": "{label} (not on the server)",
+    };
+    const zh = {
+      "panel.title": "Colco",
+      "panel.description": "Runner\u3001\u8fdb\u884c\u4e2d\u7684\u8fd0\u884c\u548c\u5f85\u51b3\u7b56",
+      "runner.title": "Runner",
+      "state.running": "\u8fd0\u884c\u4e2d",
+      "state.stopped": "\u5df2\u505c\u6b62",
+      "state.not_configured": "\u672a\u914d\u7f6e",
+      "state.rules_error": "\u89c4\u5219\u6709\u8bef",
+      "state.unknown": "\u672a\u77e5",
+      "state.loading": "\u52a0\u8f7d\u4e2d",
+      "runner.steps": "{busy}/{concurrency} \u4e2a\u6b65\u9aa4\u6b63\u5728\u8fd0\u884c",
+      "runner.stepsNow": "{busy} \u4e2a\u6b65\u9aa4\u6b63\u5728\u8fd0\u884c",
+      "runner.name": "Runner {name}\uff0c\u7248\u672c {version}",
+      "runner.start": "\u542f\u52a8",
+      "runner.stop": "\u505c\u6b62",
+      "runner.refresh": "\u5237\u65b0",
+      "runner.editRules": "\u7f16\u8f91\u89c4\u5219",
+      "runner.startHint": "\u542f\u52a8\u4f1a\u628a Runner \u5b89\u88c5\u4e3a\u767b\u5f55\u670d\u52a1\uff1b\u505c\u6b62\u4f1a\u505c\u6389\u5b83\u3002",
+      "runner.notConfigured": "\u8fd9\u53f0\u7535\u8111\u8fd8\u6ca1\u6709\u8bbe\u7f6e Runner\u3002\u8bf7\u5148\u7528 colco add \u767b\u5f55\uff0c\u518d\u5728\u7ec8\u7aef\u8fd0\u884c colco runner init\uff0c\u7136\u540e\u5b8c\u6210\u4e0b\u9762\u7684\u8bbe\u7f6e\u3002",
+      "runner.updated": "\u66f4\u65b0\u4e8e {time}",
+      "error.section": "\u65e0\u6cd5\u52a0\u8f7d{section}\uff1a{message}",
+      "section.runner": "Runner",
+      "section.runs": "\u8fd0\u884c",
+      "section.decisions": "\u51b3\u7b56",
+      "runs.title": "\u8fdb\u884c\u4e2d\u7684\u8fd0\u884c",
+      "runs.empty": "\u6ca1\u6709\u8fdb\u884c\u4e2d\u7684\u8fd0\u884c\u3002",
+      "phase.queued": "\u6392\u961f\u4e2d",
+      "phase.running": "\u8fd0\u884c\u4e2d",
+      "phase.waiting": "\u7b49\u4f60\u51b3\u5b9a",
+      "phase.uncertain": "\u72b6\u6001\u4e0d\u660e",
+      "run.meta": "{workflow} / {step}",
+      "run.agent": "Agent {agent}",
+      "run.for": "\u5df2\u8fd0\u884c {duration}",
+      "run.openTask": "\u6253\u5f00\u4efb\u52a1",
+      "run.openResult": "\u6253\u5f00\u5408\u5e76\u8bf7\u6c42",
+      "run.task": "\u4efb\u52a1 #{id}",
+      "duration.s": "{n} \u79d2",
+      "duration.m": "{n} \u5206\u949f",
+      "duration.h": "{h} \u5c0f\u65f6 {m} \u5206\u949f",
+      "duration.d": "{d} \u5929 {h} \u5c0f\u65f6",
+      "decisions.title": "\u51b3\u7b56",
+      "decisions.empty": "\u6ca1\u6709\u7b49\u4f60\u51b3\u5b9a\u7684\u4e8b\u3002",
+      "decisions.recommended": "\u63a8\u8350",
+      "decisions.note": "\u5907\u6ce8\uff08\u53ef\u9009\uff09",
+      "decisions.answer": "\u56de\u7b54",
+      "decisions.answering": "\u6b63\u5728\u56de\u7b54",
+      "decisions.pick": "\u8bf7\u5148\u9009\u62e9\u4e00\u4e2a\u9009\u9879\u3002",
+      "decisions.open": "\u5728 Colco \u4e2d\u6253\u5f00",
+      "setup.title": "Runner \u8bbe\u7f6e",
+      "setup.loading": "\u6b63\u5728\u52a0\u8f7d\u89c4\u5219",
+      "setup.missing": "\u8fd8\u6ca1\u6709\u89c4\u5219\u6587\u4ef6\u3002\u8bf7\u5728\u7ec8\u7aef\u8fd0\u884c colco runner init \u4ece\u6a21\u677f\u521b\u5efa\uff0c\u7136\u540e\u91cd\u65b0\u6253\u5f00\u6b64\u8bbe\u7f6e\u3002",
+      "setup.unreadable": "{path} \u5904\u7684\u89c4\u5219\u6587\u4ef6\u4e0d\u662f JSON \u5bf9\u8c61\u3002\u8bf7\u5728\u7f16\u8f91\u5668\u4e2d\u4fee\u590d\u6216\u5220\u9664\u5b83\uff1b\u5728\u8fd9\u91cc\u4fdd\u5b58\u4f1a\u4e22\u5931\u5176\u4e2d\u7684 agents \u548c workflows\u3002",
+      "setup.invalid": "\u78c1\u76d8\u4e0a\u7684\u89c4\u5219\u6709\u4ee5\u4e0b\u9519\u8bef\uff1a",
+      "setup.optionsFailed": "\u65e0\u6cd5\u52a0\u8f7d\u6807\u7b7e\u548c\u4ed3\u5e93\uff1a{message}",
+      "setup.labels": "\u6807\u7b7e",
+      "setup.labelsHint": "\u5e26\u6709\u8be5\u6807\u7b7e\u7684\u4efb\u52a1\u4f1a\u8fd0\u884c\u5bf9\u5e94\u7684\u5de5\u4f5c\u6d41\u3002",
+      "setup.label": "\u6807\u7b7e",
+      "setup.workflow": "\u5de5\u4f5c\u6d41",
+      "setup.chooseLabel": "\u9009\u62e9\u6807\u7b7e",
+      "setup.chooseWorkflow": "\u9009\u62e9\u5de5\u4f5c\u6d41",
+      "setup.addLabel": "\u6dfb\u52a0\u6807\u7b7e",
+      "setup.remove": "\u79fb\u9664",
+      "setup.folders": "\u6587\u4ef6\u5939",
+      "setup.foldersHint": "Runner \u53ef\u4ee5\u5de5\u4f5c\u7684 git \u4ed3\u5e93\u76ee\u5f55\u3002",
+      "setup.path": "\u6587\u4ef6\u5939\u8def\u5f84",
+      "setup.addFolder": "\u6dfb\u52a0\u6587\u4ef6\u5939",
+      "setup.ok": "git \u4ed3\u5e93\uff0corigin \u4e3a {origin}",
+      "setup.unchecked": "\u5c1a\u672a\u68c0\u67e5\uff1b\u4fdd\u5b58\u540e\u4f1a\u68c0\u67e5\u3002",
+      "setup.missingFolder": "\u6587\u4ef6\u5939\u4e0d\u5b58\u5728\u3002",
+      "setup.notGit": "\u8be5\u6587\u4ef6\u5939\u4e0d\u662f git \u4ed3\u5e93\u3002",
+      "setup.noOrigin": "\u8be5\u4ed3\u5e93\u6ca1\u6709 origin remote\u3002",
+      "setup.repository": "Colco \u4ed3\u5e93",
+      "setup.chooseRepository": "\u9009\u62e9\u7528\u4e8e\u4fee\u590d\u7684\u4ed3\u5e93",
+      "setup.fix": "\u5728\u7ec8\u7aef\u8fd0\u884c\uff1a",
+      "setup.copy": "\u590d\u5236",
+      "setup.copied": "\u5df2\u590d\u5236",
+      "setup.save": "\u4fdd\u5b58\u89c4\u5219",
+      "setup.saving": "\u6b63\u5728\u4fdd\u5b58",
+      "setup.cancel": "\u5173\u95ed",
+      "setup.saved": "\u5df2\u4fdd\u5b58 {path}",
+      "setup.savedBackup": "\u5df2\u4fdd\u5b58 {path}\uff1b\u539f\u6587\u4ef6\u5728 {backup}",
+      "setup.saveFailed": "\u89c4\u5219\u672a\u4fdd\u5b58\uff1a{message}",
+      "setup.duplicateLabel": "\u6807\u7b7e {label} \u51fa\u73b0\u4e86\u4e24\u6b21\u3002",
+      "setup.incomplete": "\u6bcf\u4e00\u884c\u6807\u7b7e\u90fd\u9700\u8981\u540c\u65f6\u9009\u62e9\u6807\u7b7e\u548c\u5de5\u4f5c\u6d41\u3002",
+      "setup.notOnServer": "{label}\uff08\u670d\u52a1\u5668\u4e0a\u6ca1\u6709\uff09",
+    };
+
+    /**
+     * Fill `{name}` placeholders the way DSH's locale service does.
+     * @param {string} template
+     * @param {Record<string, unknown> | undefined} params
+     */
+    function fill(template, params) {
+      return params ? template.replace(/\{(\w+)\}/g, (match, name) => (name in params ? String(params[name]) : match)) : template;
+    }
+
+    /**
+     * A translate function over one dictionary, for when DSH's locale service is absent (tests, other hosts).
+     * @param {Record<string, string>} dict
+     * @returns {(key: string, params?: Record<string, unknown>) => string}
+     */
+    function translator(dict) {
+      return (key, params) => fill(dict[key] ?? en[key] ?? key, params);
+    }
+
+    /** A failed route call: its HTTP status, its message and any validation errors the route returned. */
+    class ApiError extends Error {
+      constructor(message, status, errors) {
+        super(message);
+        this.status = status;
+        this.errors = errors;
+      }
+    }
+
+    /**
+     * Call one Host route and return its JSON reply.
+     * @param {string} name - route name, e.g. "status".
+     * @param {{ method?: "GET" | "POST", body?: unknown, signal?: AbortSignal }} [options]
+     */
+    async function call(name, { method = "GET", body, signal } = {}) {
+      const timeout = AbortSignal.timeout(REQUEST_TIMEOUT_MS);
+      const headers = { accept: "application/json" };
+      if (method === "POST") Object.assign(headers, { "content-type": "application/json", [ACTION_HEADER]: "1" });
+      const response = await fetch(`${API}/${name}`, {
+        method, headers, credentials: "same-origin", cache: "no-store",
+        body: method === "POST" ? JSON.stringify(body ?? {}) : undefined,
+        signal: signal ? AbortSignal.any([signal, timeout]) : timeout,
+      });
+      let reply;
+      try {
+        reply = await response.json();
+      } catch {
+        reply = undefined;
+      }
+      if (!response.ok) {
+        const message = typeof reply?.error?.message === "string" ? reply.error.message : `HTTP ${response.status}`;
+        throw new ApiError(message, response.status, Array.isArray(reply?.errors) ? reply.errors.filter((item) => typeof item === "string") : []);
+      }
+      return reply ?? {};
+    }
+
+    /**
+     * Quote one shell word so a path or URL from Colco is copied as itself and runs nothing.
+     * @param {string} value
+     */
+    function shellQuote(value) {
+      return /^[\w@%+=:,./-]+$/.test(value) && !value.startsWith("-") ? value : `'${value.replace(/'/g, "'\\''")}'`;
+    }
+
+    /**
+     * The command that fixes a folder the runner cannot use, or undefined when there is nothing to fix.
+     * Built from the repository the user picked; the plugin only shows it and never runs it.
+     * @param {{ exists: boolean, git: boolean, origin: string | null, path: string, resolvedPath?: string }} check
+     * @param {string | undefined} url - clone URL of the chosen Colco repository.
+     */
+    function fixCommand(check, url) {
+      if (!url || (check.exists && check.git && check.origin)) return undefined;
+      const path = shellQuote(check.resolvedPath || check.path);
+      const remote = shellQuote(url);
+      if (!check.exists) return `git clone -- ${remote} ${path}`;
+      if (!check.git) return `git -C ${path} init && git -C ${path} remote add origin ${remote}`;
+      return `git -C ${path} remote add origin ${remote}`;
+    }
+
+    /**
+     * A compact duration from milliseconds.
+     * @param {number} ms
+     * @param {(key: string, params?: Record<string, unknown>) => string} t
+     */
+    function formatDuration(ms, t) {
+      const seconds = Math.max(0, Math.floor(ms / 1000));
+      if (seconds < 60) return t("duration.s", { n: seconds });
+      const minutes = Math.floor(seconds / 60);
+      if (minutes < 60) return t("duration.m", { n: minutes });
+      const hours = Math.floor(minutes / 60);
+      if (hours < 24) return t("duration.h", { h: hours, m: minutes % 60 });
+      return t("duration.d", { d: Math.floor(hours / 24), h: hours % 24 });
+    }
+
+    /**
+     * The editable rows of a rules object: label → workflow pairs and folders (with their on-disk index).
+     * @param {Record<string, unknown> | null} rules - the rules object on disk.
+     */
+    function rulesToForm(rules) {
+      const labels = rules && rules.labels && typeof rules.labels === "object" && !Array.isArray(rules.labels)
+        ? Object.entries(rules.labels).map(([label, workflow]) => ({ label, workflow: typeof workflow === "string" ? workflow : "" }))
+        : [];
+      const folders = rules && Array.isArray(rules.folders)
+        ? rules.folders.map((folder, index) => ({ index, path: folder && typeof folder.path === "string" ? folder.path : "" }))
+        : [];
+      return { labels, folders };
+    }
+
+    /**
+     * The whole rules object to save: the one on disk with its labels and folders replaced by the form's rows.
+     * Agents, workflows, concurrency and each kept folder's other fields (such as `setup`) stay as they are.
+     * @param {Record<string, unknown> | null} rules - the rules object on disk, or null when there is none.
+     * @param {{ labels: { label: string, workflow: string }[], folders: { index?: number, path: string }[] }} form
+     * @returns {{ rules?: Record<string, unknown>, error?: { key: string, params?: Record<string, unknown> } }}
+     */
+    function formToRules(rules, form) {
+      const labels = {};
+      for (const row of form.labels) {
+        const label = row.label.trim();
+        if (!label && !row.workflow) continue;
+        if (!label || !row.workflow) return { error: { key: "setup.incomplete" } };
+        if (Object.prototype.hasOwnProperty.call(labels, label)) return { error: { key: "setup.duplicateLabel", params: { label } } };
+        Object.defineProperty(labels, label, { value: row.workflow, enumerable: true, writable: true, configurable: true });
+      }
+      const onDisk = rules && Array.isArray(rules.folders) ? rules.folders : [];
+      const folders = form.folders.filter((row) => row.path.trim()).map((row) => {
+        const original = row.index !== undefined && onDisk[row.index] && typeof onDisk[row.index] === "object" ? onDisk[row.index] : {};
+        return { ...original, path: row.path.trim() };
+      });
+      return { rules: { ...(rules ?? {}), labels, folders } };
+    }
+
+    /** Page styles: DSH theme tokens with plain fallbacks, scoped to .c4d-page and .c4d and removed with the page. */
+    const CSS = `
+.c4d-page{display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;color:var(--dsw-alias-label-primary,#1f2328);background:var(--dsw-alias-bg-base,transparent)}
+.c4d-page-scroll{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}
+.c4d-page-content{max-width:960px;margin:0 auto;padding:0 clamp(24px,4vw,48px) 48px}
+.c4d-page-heading{display:flex;flex-direction:column;gap:4px;padding-top:28px;margin-bottom:8px}
+.c4d-page-heading h1{margin:0;font-size:20px;line-height:28px;font-weight:500}
+.c4d-page-heading p{margin:0;font-size:13px;color:var(--dsw-alias-label-secondary,#57606a)}
+@media (max-width:767px){.c4d-page-content{padding-inline:20px}}
+.c4d{display:flex;flex-direction:column;gap:16px;padding:12px 0 24px;font:var(--dsw-font-xs-13,13px/20px system-ui);color:var(--dsw-alias-label-primary,#1f2328)}
+.c4d h2{margin:0;font-size:13px;font-weight:600}
+.c4d h3{margin:0;font-size:13px;font-weight:600}
+.c4d p{margin:0}
+.c4d ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
+.c4d-section{display:flex;flex-direction:column;gap:8px}
+.c4d-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.c4d-card{border:1px solid var(--dsw-alias-border-l2,#d0d7de);border-radius:var(--dsw-radius-md,12px);padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--dsw-alias-bg-layer-1,transparent)}
+.c4d-muted{color:var(--dsw-alias-label-secondary,#57606a)}
+.c4d-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--dsw-alias-label-tertiary,#8c959f)}
+.c4d-dot[data-tone=ok]{background:var(--dsw-alias-state-success-primary,#1a7f37)}
+.c4d-dot[data-tone=warn]{background:var(--dsw-alias-state-warn-primary,#9a6700)}
+.c4d-dot[data-tone=error]{background:var(--dsw-alias-state-error-primary,#cf222e)}
+.c4d-tag{display:inline-block;border:1px solid var(--dsw-alias-border-l2,#d0d7de);border-radius:6px;padding:0 6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#57606a)}
+.c4d-tag[data-tone=warn]{color:var(--dsw-alias-state-warn-primary,#9a6700);border-color:currentColor}
+.c4d-error{color:var(--dsw-alias-state-error-primary,#cf222e)}
+.c4d-ok{color:var(--dsw-alias-state-success-primary,#1a7f37)}
+.c4d button,.c4d select,.c4d input,.c4d textarea{font:inherit;color:inherit}
+.c4d button{border:1px solid var(--dsw-alias-border-l2,#d0d7de);background:transparent;border-radius:8px;padding:3px 10px;cursor:pointer}
+.c4d button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}
+.c4d button:disabled{opacity:.5;cursor:default}
+.c4d button[aria-pressed=true]{border-color:var(--dsw-alias-state-business-primary,#0969da);background:var(--dsw-alias-interactive-bg-hover,rgba(9,105,218,.08))}
+.c4d button.c4d-primary{background:var(--dsw-alias-label-primary,#1f2328);color:var(--dsw-alias-label-primary-inverted,#fff);border-color:transparent}
+.c4d select,.c4d input,.c4d textarea{border:1px solid var(--dsw-alias-border-l2,#d0d7de);border-radius:8px;padding:3px 8px;background:transparent;min-width:0}
+.c4d textarea{width:100%;box-sizing:border-box;resize:vertical}
+.c4d input.c4d-path{flex:1 1 160px}
+.c4d :focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,#0969da);outline-offset:1px}
+.c4d a{color:var(--dsw-alias-link,#0969da)}
+.c4d code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;user-select:all;word-break:break-all;background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05));border-radius:6px;padding:2px 6px}
+.c4d-options{display:flex;flex-direction:column;align-items:stretch;gap:6px}
+.c4d-options button{text-align:left}
+`;
+
+    /** Tone of the runner's state dot. */
+    const STATE_TONE = { running: "ok", stopped: "idle", not_configured: "warn", rules_error: "error", unknown: "idle" };
+
+    /** One error message, announced to screen readers. */
+    function ErrorLine({ message }) {
+      return message ? h("p", { role: "alert", className: "c4d-error" }, message) : null;
+    }
+
+    /** A link to Colco or a merge request; only http(s) URLs become links. */
+    function ExternalLink({ href, children }) {
+      return typeof href === "string" && /^https?:\/\//i.test(href) ? h("a", { href, target: "_blank", rel: "noopener noreferrer" }, children) : null;
+    }
+
+    /**
+     * The header: runner state, steps running now, and Start, Stop, Refresh and Edit rules.
+     * @param {{ t: Function, runner: object | null | undefined, loading: boolean, busy: string | undefined, actionError: string | undefined, setupOpen: boolean, onAction: (name: "start" | "stop") => void, onRefresh: () => void, onEditRules: () => void, updatedAt: number | undefined }} props
+     */
+    function RunnerHeader({ t, runner, loading, busy, actionError, setupOpen, onAction, onRefresh, onEditRules, updatedAt }) {
+      const display = runner ? runner.display : loading ? "loading" : "unknown";
+      const running = display === "running";
+      const steps = running && typeof runner.busy === "number"
+        ? typeof runner.concurrency === "number" ? t("runner.steps", { busy: runner.busy, concurrency: runner.concurrency }) : t("runner.stepsNow", { busy: runner.busy })
+        : undefined;
+      return h("section", { className: "c4d-section", "aria-label": t("runner.title") },
+        h("div", { className: "c4d-row" },
+          h("span", { className: "c4d-dot", "data-tone": STATE_TONE[display] ?? "idle", "aria-hidden": true }),
+          h("h2", null, t("runner.title")),
+          h("span", { "data-colco4dsh-state": display }, t(`state.${display}`)),
+          steps ? h("span", { className: "c4d-muted" }, steps) : null),
+        runner && runner.name ? h("p", { className: "c4d-muted" }, t("runner.name", { name: runner.name, version: runner.version ?? "?" })) : null,
+        display === "not_configured" ? h("p", null, t("runner.notConfigured")) : null,
+        display === "rules_error" && runner.rulesError ? h("p", { className: "c4d-error" }, runner.rulesError) : null,
+        runner && Array.isArray(runner.warnings) ? runner.warnings.map((warning, index) => h("p", { key: index, className: "c4d-muted" }, warning)) : null,
+        h("div", { className: "c4d-row" },
+          h("button", { type: "button", className: "c4d-primary", disabled: busy !== undefined || running || display === "not_configured", "aria-busy": busy === "start", onClick: () => onAction("start"), title: t("runner.startHint") }, t("runner.start")),
+          h("button", { type: "button", disabled: busy !== undefined || display === "not_configured", "aria-busy": busy === "stop", onClick: () => onAction("stop") }, t("runner.stop")),
+          h("button", { type: "button", onClick: onRefresh }, t("runner.refresh")),
+          setupOpen ? null : h("button", { type: "button", onClick: onEditRules }, t("runner.editRules"))),
+        h(ErrorLine, { message: actionError }),
+        updatedAt ? h("p", { className: "c4d-muted" }, t("runner.updated", { time: new Date(updatedAt).toLocaleTimeString() })) : null);
+    }
+
+    /**
+     * One active run.
+     * @param {{ t: Function, run: object, now: number }} props
+     */
+    function RunCard({ t, run, now }) {
+      const started = run.createdAt ? Date.parse(run.createdAt) : NaN;
+      const meta = [run.workflow || run.step ? t("run.meta", { workflow: run.workflow ?? "?", step: run.step ?? "?" }) : "", run.agent ? t("run.agent", { agent: run.agent }) : "", Number.isFinite(started) ? t("run.for", { duration: formatDuration(now - started, t) }) : ""].filter(Boolean);
+      return h("li", { className: "c4d-card", "data-colco4dsh-run": run.id, "data-phase": run.phase },
+        h("div", { className: "c4d-row" },
+          h("h3", null, run.taskTitle || (run.taskId !== undefined ? t("run.task", { id: run.taskId }) : "")),
+          h("span", { className: "c4d-tag", "data-tone": run.phase === "waiting" || run.phase === "uncertain" ? "warn" : undefined }, t(`phase.${run.phase}`))),
+        meta.length ? h("p", { className: "c4d-muted" }, meta.join(" · ")) : null,
+        h("div", { className: "c4d-row" },
+          h(ExternalLink, { href: run.taskLink }, t("run.openTask")),
+          h(ExternalLink, { href: run.resultLink }, t("run.openResult"))));
+    }
+
+    /**
+     * One open decision: its options in Colco's order with the recommended one marked (never moved), a note and Answer.
+     * @param {{ t: Function, decision: object, onAnswer: (id: number, index: number, text: string | undefined) => Promise<void> }} props
+     */
+    function DecisionCard({ t, decision, onAnswer }) {
+      const [choice, setChoice] = useState(undefined);
+      const [note, setNote] = useState("");
+      const [pending, setPending] = useState(false);
+      const [error, setError] = useState(undefined);
+      const submit = async () => {
+        if (choice === undefined) {
+          setError(t("decisions.pick"));
+          return;
+        }
+        setPending(true);
+        setError(undefined);
+        try {
+          await onAnswer(decision.id, choice, note.trim() || undefined);
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : String(failure));
+        } finally {
+          setPending(false);
+        }
+      };
+      const task = decision.taskId !== undefined ? `${t("run.task", { id: decision.taskId })}${decision.taskTitle ? ` ${decision.taskTitle}` : ""}` : "";
+      return h("li", { className: "c4d-card", "data-colco4dsh-decision": decision.id },
+        h("h3", null, decision.title || `#${decision.id}`),
+        task ? h("p", { className: "c4d-muted" }, task) : null,
+        decision.text ? h("p", { style: { whiteSpace: "pre-wrap" } }, decision.text) : null,
+        h("div", { className: "c4d-options", role: "group", "aria-label": decision.title || `#${decision.id}` },
+          decision.options.map((option, index) => h("button", {
+            key: index, type: "button", "aria-pressed": choice === index, disabled: pending,
+            "data-colco4dsh-option": index, onClick: () => setChoice(choice === index ? undefined : index),
+          }, option || `#${index + 1}`, index === decision.recommend ? h(Fragment, null, " ", h("span", { className: "c4d-tag" }, t("decisions.recommended"))) : null))),
+        h("label", { className: "c4d-section" },
+          h("span", { className: "c4d-muted" }, t("decisions.note")),
+          h("textarea", { rows: 2, maxLength: 2000, value: note, disabled: pending, onChange: (event) => setNote(event.target.value) })),
+        h("div", { className: "c4d-row" },
+          h("button", { type: "button", className: "c4d-primary", disabled: pending, "aria-busy": pending, onClick: submit }, pending ? t("decisions.answering") : t("decisions.answer")),
+          h(ExternalLink, { href: decision.link }, t("decisions.open"))),
+        h(ErrorLine, { message: error }));
+    }
+
+    /**
+     * One folder row: path, its check result and, when the runner cannot use it, a copyable fix built from the
+     * Colco repository picked in the row.
+     * @param {{ t: Function, row: { index?: number, path: string }, check: object | undefined, repositories: object[], repo: string, onRepo: (url: string) => void, onPath: (path: string) => void, onRemove: () => void }} props
+     */
+    function FolderRow({ t, row, check, repositories, repo, onRepo, onPath, onRemove }) {
+      const [copied, setCopied] = useState(false);
+      const current = check && check.path === row.path ? check : undefined;
+      const broken = current && !(current.exists && current.git && current.origin);
+      const problem = !current ? t("setup.unchecked") : !current.exists ? t("setup.missingFolder") : !current.git ? t("setup.notGit") : !current.origin ? t("setup.noOrigin") : undefined;
+      const command = broken ? fixCommand(current, repo || undefined) : undefined;
+      const copy = async () => {
+        try {
+          await navigator.clipboard.writeText(command);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        } catch {
+          setCopied(false);
+        }
+      };
+      return h("li", { className: "c4d-card", "data-colco4dsh-folder": row.index ?? "new" },
+        h("div", { className: "c4d-row" },
+          h("input", { className: "c4d-path", "aria-label": t("setup.path"), value: row.path, spellCheck: false, onChange: (event) => onPath(event.target.value) }),
+          h("button", { type: "button", onClick: onRemove }, t("setup.remove"))),
+        problem
+          ? h("p", { className: current ? "c4d-error" : "c4d-muted" }, problem, current && current.error ? ` (${current.error})` : "")
+          : h("p", { className: "c4d-ok" }, t("setup.ok", { origin: current.origin })),
+        broken ? h("label", { className: "c4d-row" },
+          h("span", { className: "c4d-muted" }, t("setup.repository")),
+          h("select", { value: repo, onChange: (event) => onRepo(event.target.value) },
+            h("option", { value: "" }, t("setup.chooseRepository")),
+            repositories.map((repository) => h("option", { key: repository.url, value: repository.url }, repository.name)))) : null,
+        command ? h("div", { className: "c4d-section" },
+          h("span", { className: "c4d-muted" }, t("setup.fix")),
+          h("code", { "data-colco4dsh-fix": true }, command),
+          h("div", { className: "c4d-row" }, h("button", { type: "button", onClick: copy }, copied ? t("setup.copied") : t("setup.copy")))) : null);
+    }
+
+    /**
+     * The setup form over one loaded `GET rules` reply: label → workflow rows and folder rows. Save writes the whole
+     * rules object (agents, workflows and the rest as they are on disk) and shows the CLI's validation errors.
+     * @param {{ t: Function, data: object, options: object, optionsError: string | undefined, notice: string | undefined, canClose: boolean, onSave: (rules: object) => Promise<void>, onClose: () => void }} props
+     */
+    function SetupForm({ t, data, options, optionsError, notice, canClose, onSave, onClose }) {
+      const [form, setForm] = useState(() => rulesToForm(data.rules));
+      const [repos, setRepos] = useState({});
+      const [saving, setSaving] = useState(false);
+      const [error, setError] = useState(undefined);
+      const [errors, setErrors] = useState([]);
+      const unreadable = data.exists && !data.rules;
+      const workflows = data.rules && data.rules.workflows && typeof data.rules.workflows === "object" ? Object.keys(data.rules.workflows) : [];
+      const serverLabels = options.labels.map((label) => label.name);
+      const checks = new Map(data.folders.map((folder) => [folder.index, folder]));
+      const setLabel = (index, patch) => setForm((prev) => ({ ...prev, labels: prev.labels.map((row, at) => (at === index ? { ...row, ...patch } : row)) }));
+      const setFolder = (index, path) => setForm((prev) => ({ ...prev, folders: prev.folders.map((row, at) => (at === index ? { ...row, path } : row)) }));
+      const save = async () => {
+        const built = formToRules(data.rules, form);
+        if (built.error) {
+          setError(t(built.error.key, built.error.params));
+          setErrors([]);
+          return;
+        }
+        setSaving(true);
+        setError(undefined);
+        setErrors([]);
+        try {
+          await onSave(built.rules);
+        } catch (failure) {
+          setError(t("setup.saveFailed", { message: failure instanceof Error ? failure.message : String(failure) }));
+          setErrors(failure instanceof ApiError ? failure.errors : []);
+        } finally {
+          setSaving(false);
+        }
+      };
+      return h("section", { className: "c4d-section", "aria-label": t("setup.title"), "data-colco4dsh-setup": true },
+        h("h2", null, t("setup.title")),
+        notice ? h("p", { role: "status", className: "c4d-ok" }, notice) : null,
+        !data.exists ? h("p", null, t("setup.missing")) : null,
+        unreadable ? h("p", { className: "c4d-error" }, t("setup.unreadable", { path: data.path ?? "rules.json" })) : null,
+        data.exists && !data.valid && data.errors.length ? h(Fragment, null, h("p", null, t("setup.invalid")), h("ul", { className: "c4d-error" }, data.errors.map((line, index) => h("li", { key: index }, line)))) : null,
+        h(ErrorLine, { message: optionsError ? t("setup.optionsFailed", { message: optionsError }) : undefined }),
+        h("h3", null, t("setup.labels")),
+        h("p", { className: "c4d-muted" }, t("setup.labelsHint")),
+        h("ul", null, form.labels.map((row, index) => {
+          const labelChoices = row.label && !serverLabels.includes(row.label) ? [...serverLabels, row.label] : serverLabels;
+          const workflowChoices = row.workflow && !workflows.includes(row.workflow) ? [...workflows, row.workflow] : workflows;
+          return h("li", { key: index, className: "c4d-row", "data-colco4dsh-label-row": index },
+            h("select", { "aria-label": t("setup.label"), value: row.label, onChange: (event) => setLabel(index, { label: event.target.value }) },
+              h("option", { value: "" }, t("setup.chooseLabel")),
+              labelChoices.map((name) => h("option", { key: name, value: name }, serverLabels.includes(name) ? name : t("setup.notOnServer", { label: name })))),
+            h("span", { "aria-hidden": true }, "→"),
+            h("select", { "aria-label": t("setup.workflow"), value: row.workflow, onChange: (event) => setLabel(index, { workflow: event.target.value }) },
+              h("option", { value: "" }, t("setup.chooseWorkflow")),
+              workflowChoices.map((name) => h("option", { key: name, value: name }, name))),
+            h("button", { type: "button", onClick: () => setForm((prev) => ({ ...prev, labels: prev.labels.filter((_, at) => at !== index) })) }, t("setup.remove")));
+        })),
+        h("div", { className: "c4d-row" }, h("button", { type: "button", onClick: () => setForm((prev) => ({ ...prev, labels: [...prev.labels, { label: "", workflow: "" }] })) }, t("setup.addLabel"))),
+        h("h3", null, t("setup.folders")),
+        h("p", { className: "c4d-muted" }, t("setup.foldersHint")),
+        h("ul", null, form.folders.map((row, index) => h(FolderRow, {
+          key: row.index ?? `new-${index}`, t, row, check: row.index !== undefined ? checks.get(row.index) : undefined,
+          repositories: options.repositories, repo: repos[index] ?? "",
+          onRepo: (url) => setRepos((prev) => ({ ...prev, [index]: url })),
+          onPath: (path) => setFolder(index, path),
+          onRemove: () => setForm((prev) => ({ ...prev, folders: prev.folders.filter((_, at) => at !== index) })),
+        }))),
+        h("div", { className: "c4d-row" }, h("button", { type: "button", onClick: () => setForm((prev) => ({ ...prev, folders: [...prev.folders, { path: "" }] })) }, t("setup.addFolder"))),
+        h(ErrorLine, { message: error }),
+        errors.length ? h("ul", { className: "c4d-error" }, errors.map((line, index) => h("li", { key: index }, line))) : null,
+        h("div", { className: "c4d-row" },
+          h("button", { type: "button", className: "c4d-primary", disabled: saving || unreadable, "aria-busy": saving, onClick: save }, saving ? t("setup.saving") : t("setup.save")),
+          canClose ? h("button", { type: "button", onClick: onClose }, t("setup.cancel")) : null));
+    }
+
+    /**
+     * Loads `GET rules` and `GET options` when Setup opens, and again after a save; then shows SetupForm.
+     * `initial` skips the first load (tests render the form without a network).
+     * @param {{ t: Function, initial?: { data: object, options: object }, canClose: boolean, onSaved: () => void, onClose: () => void }} props
+     */
+    function SetupPanel({ t, initial, canClose, onSaved, onClose }) {
+      const [loaded, setLoaded] = useState(initial ? { ...initial, optionsError: undefined } : undefined);
+      const [loadError, setLoadError] = useState(undefined);
+      const [notice, setNotice] = useState(undefined);
+      const [revision, setRevision] = useState(initial ? -1 : 0);
+      useEffect(() => {
+        if (revision < 0) return undefined;
+        const controller = new AbortController();
+        Promise.allSettled([call("rules", { signal: controller.signal }), call("options", { signal: controller.signal })]).then(([rules, options]) => {
+          if (controller.signal.aborted) return;
+          if (rules.status === "rejected") {
+            setLoadError(rules.reason instanceof Error ? rules.reason.message : String(rules.reason));
+            return;
+          }
+          setLoadError(undefined);
+          const opts = options.status === "fulfilled" ? options.value : {};
+          setLoaded({
+            data: { path: rules.value.path, exists: rules.value.exists === true, valid: rules.value.valid === true, errors: rules.value.errors ?? [], rules: rules.value.rules ?? null, folders: rules.value.folders ?? [] },
+            options: { labels: opts.labels ?? [], repositories: opts.repositories ?? [], workflows: opts.workflows ?? [] },
+            optionsError: options.status === "rejected" ? (options.reason instanceof Error ? options.reason.message : String(options.reason)) : undefined,
+          });
+        });
+        return () => controller.abort();
+      }, [revision]);
+      const save = useCallback(async (rules) => {
+        const reply = await call("rules", { method: "POST", body: rules });
+        setNotice(reply.backup ? t("setup.savedBackup", { path: reply.path, backup: reply.backup }) : t("setup.saved", { path: reply.path ?? "rules.json" }));
+        setRevision((value) => Math.max(value, 0) + 1);
+        onSaved();
+      }, [t, onSaved]);
+      if (loadError) return h("section", { className: "c4d-section", "aria-label": t("setup.title") }, h("h2", null, t("setup.title")), h(ErrorLine, { message: loadError }));
+      if (!loaded) return h("section", { className: "c4d-section", "aria-label": t("setup.title") }, h("h2", null, t("setup.title")), h("p", { className: "c4d-muted" }, t("setup.loading")));
+      return h(SetupForm, { key: revision, t, data: loaded.data, options: loaded.options, optionsError: loaded.optionsError, notice, canClose, onSave: save, onClose });
+    }
+
+    /**
+     * The whole tab: runner header, active runs, open decisions and Setup. Refreshes every POLL_MS while `visible`.
+     * `initialStatus` and `initialSetup` seed the first render (server rendering in tests performs no request).
+     * @param {{ t: Function, visible: boolean, initialStatus?: object, initialSetup?: { data: object, options: object } }} props
+     */
+    function ColcoPanel({ t, visible, initialStatus, initialSetup }) {
+      const [status, setStatus] = useState(initialStatus);
+      const [loadError, setLoadError] = useState(undefined);
+      const [updatedAt, setUpdatedAt] = useState(undefined);
+      const [busy, setBusy] = useState(undefined);
+      const [actionError, setActionError] = useState(undefined);
+      const [setupRequested, setSetupRequested] = useState(false);
+      const inFlight = useRef(undefined);
+      const refresh = useCallback(async () => {
+        if (inFlight.current) return inFlight.current.promise;
+        const controller = new AbortController();
+        const promise = call("status", { signal: controller.signal }).then((reply) => {
+          setStatus(reply);
+          setLoadError(undefined);
+          setUpdatedAt(Date.now());
+        }, (failure) => {
+          if (!controller.signal.aborted) setLoadError(failure instanceof Error ? failure.message : String(failure));
+        }).finally(() => {
+          if (inFlight.current?.controller === controller) inFlight.current = undefined;
+        });
+        inFlight.current = { controller, promise };
+        return promise;
+      }, []);
+      useEffect(() => () => inFlight.current?.controller.abort(), []);
+      useEffect(() => {
+        if (!visible) return undefined;
+        const tick = () => { if (document.visibilityState !== "hidden") void refresh(); };
+        tick();
+        const timer = setInterval(tick, POLL_MS);
+        document.addEventListener("visibilitychange", tick);
+        return () => {
+          clearInterval(timer);
+          document.removeEventListener("visibilitychange", tick);
+        };
+      }, [visible, refresh]);
+      /** Run Start or Stop, then refresh; a failure shows under the buttons. */
+      const act = async (name) => {
+        setBusy(name);
+        setActionError(undefined);
+        try {
+          await call(name, { method: "POST" });
+        } catch (failure) {
+          setActionError(failure instanceof Error ? failure.message : String(failure));
+        } finally {
+          setBusy(undefined);
+        }
+        await refresh();
+      };
+      /** Answer a decision, then refresh; the card shows a failure itself. */
+      const answer = async (id, index, text) => {
+        await call("answer", { method: "POST", body: text === undefined ? { id, index } : { id, index, text } });
+        await refresh();
+      };
+      const runner = status?.runner ?? null;
+      const needsSetup = runner !== null && (runner.display === "not_configured" || runner.display === "rules_error");
+      const setupOpen = needsSetup || setupRequested;
+      const errors = status?.errors ?? {};
+      const now = Date.now();
+      return h("div", { className: "c4d", "data-colco4dsh-panel": runner?.display ?? "loading" },
+        h("style", null, CSS),
+        h(RunnerHeader, { t, runner, loading: status === undefined && !loadError, busy, actionError, setupOpen, onAction: act, onRefresh: () => void refresh(), onEditRules: () => setSetupRequested(true), updatedAt }),
+        h(ErrorLine, { message: loadError }),
+        ["runner", "runs", "decisions"].map((section) => (errors[section] ? h(ErrorLine, { key: section, message: t("error.section", { section: t(`section.${section}`), message: errors[section] }) }) : null)),
+        setupOpen ? h(SetupPanel, { t, initial: initialSetup, canClose: !needsSetup, onSaved: () => void refresh(), onClose: () => setSetupRequested(false) }) : null,
+        h("section", { className: "c4d-section", "aria-label": t("runs.title") },
+          h("h2", null, t("runs.title")),
+          status && status.runs.length ? h("ul", null, status.runs.map((run) => h(RunCard, { key: run.id, t, run, now }))) : h("p", { className: "c4d-muted" }, status ? t("runs.empty") : t("state.loading"))),
+        h("section", { className: "c4d-section", "aria-label": t("decisions.title") },
+          h("h2", null, t("decisions.title")),
+          status && status.decisions.length ? h("ul", null, status.decisions.map((decision) => h(DecisionCard, { key: decision.id, t, decision, onAnswer: answer }))) : h("p", { className: "c4d-muted" }, status ? t("decisions.empty") : t("state.loading"))));
+    }
+
+    /** English copy for hosts without DSH's locale service (tests, other hosts). */
+    const fallbackT = translator(en);
+
+    /**
+     * Glyph of the left-sidebar row. Decorative: the sidebar owns the button, its label and the selected state.
+     * @param {{ size: number, active?: boolean }} props - the edge the sidebar asks for.
+     */
+    function ColcoPanelIcon({ size }) {
+      return h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": "true", focusable: "false" },
+        h("path", { d: "M16.6 7.4a6.5 6.5 0 1 0 0 9.2" }),
+        h("circle", { cx: 18.4, cy: 12, r: 1.7, fill: "currentColor", stroke: "none" }));
+    }
+
+    /**
+     * The Colco page in DSH's main column. DSH mounts a main panel only while it is the open one, so the panel
+     * polls for as long as this page is mounted. `t` is this namespace's translate, passed by the slot.
+     * @param {{ t?: Function, initialStatus?: object, initialSetup?: { data: object, options: object } }} props
+     */
+    function ColcoPage({ t, initialStatus, initialSetup }) {
+      const tr = t ?? fallbackT;
+      return h("div", { className: "c4d-page" },
+        h("div", { className: "c4d-page-scroll" },
+          h("div", { className: "c4d-page-content" },
+            h("header", { className: "c4d-page-heading" },
+              h("h1", null, tr("panel.title")),
+              h("p", { className: "c4d-muted" }, tr("panel.description"))),
+            h(ColcoPanel, { t: tr, visible: true, initialStatus, initialSetup }))));
+    }
+
+    /**
+     * Register the copy, the Colco page in the main column and its row in the left sidebar. Plugins (order 0) and
+     * Automation tasks (order 10) come first and More always follows the rows, so order 20 sits directly above More.
+     * Every registration is removed when the plugin unloads.
+     * @param {{ effect: Function, locale: { register: Function, bind: Function }, slots: { inject: Function, register: Function } }} ctx
+     */
+    function apply(ctx) {
+      ctx.effect(() => ctx.locale.register(NS, { en, zh }), "colco4dsh: dictionaries");
+      const t = ctx.locale.bind(NS);
+      ctx.effect(() => ctx.slots.inject("main", () => ctx.slots.register(
+        { name: "main", key: PANEL_ID, locale: NS },
+        ColcoPage,
+      )), "colco4dsh: main panel");
+      ctx.effect(() => ctx.slots.inject("sidebar.panellist", () => ctx.slots.register(
+        { name: "sidebar.panellist", id: PANEL_ID, order: PANEL_ORDER, locale: NS, label: () => t("panel.title") },
+        ColcoPanelIcon,
+      )), "colco4dsh: sidebar row");
+    }
+
+    return { inject: ["slots", "locale"], apply, ColcoPage, ColcoPanel, ColcoPanelIcon, SetupForm, translator, call, ApiError, dictionaries: { en, zh }, shellQuote, fixCommand, rulesToForm, formToRules, formatDuration, API, ACTION_HEADER, PANEL_ID, NS };
+  },
+});