@evanbobo/colco4dsh 0.0.0-stage → 0.1.4

package/client.js

@@ -0,0 +1,1320 @@
+// 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, 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.dsh": "Let workflow steps use DSH",
+      "setup.dshHint": "Adds a DSH agent to the rules. A step uses it only when its rules name it; the plugin alone never claims or reassigns tasks.",
+      "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)",
+      "panel.openDecision": "{count} open decision waiting for you",
+      "panel.openDecisions": "{count} open decisions waiting for you",
+      "runner.editRulesFile": "Edit rules.json",
+      "file.title": "Edit rules.json",
+      "file.loading": "Loading rules.json",
+      "file.loadFailed": "Could not load rules.json: {message}",
+      "file.path": "File: {path}",
+      "file.missing": "There is no rules.json yet; saving creates it.",
+      "file.diskInvalid": "The file on disk has these problems:",
+      "file.label": "rules.json contents",
+      "file.hint": "Saving checks the rules, keeps a backup of the old file and refuses if the file changed after it was loaded.",
+      "file.save": "Save",
+      "file.saving": "Saving",
+      "file.close": "Close",
+      "file.saved": "Saved {path}",
+      "file.savedBackup": "Saved {path}; the previous file is at {backup}",
+      "file.saveFailed": "The rules were not saved: {message}",
+      "file.conflict": "rules.json changed outside this dialog. Review the file on disk, then choose which version to keep.",
+      "file.diskLabel": "Current file on disk",
+      "file.useDisk": "Use the file on disk",
+      "file.overwrite": "Overwrite with my version",
+      "tasks.title": "My tasks",
+      "tasks.loading": "Loading your tasks",
+      "tasks.error": "Could not load your tasks: {message}",
+      "tasks.refresh": "Refresh",
+      "tasks.empty": "No tasks are assigned to you.",
+      "tasks.emptyFiltered": "No tasks match these filters.",
+      "tasks.pageEmpty": "There are no tasks on this page.",
+      "tasks.filterProject": "Project",
+      "tasks.filterStatus": "Status",
+      "tasks.allProjects": "All projects",
+      "tasks.allStatuses": "All statuses",
+      "tasks.optionCount": "{name} ({count})",
+      "tasks.projectGone": "Project #{id}",
+      "tasks.status.in_progress": "In progress",
+      "tasks.status.blocked": "Blocked",
+      "tasks.status.review": "In review",
+      "tasks.status.todo": "To do",
+      "tasks.status.backlog": "Backlog",
+      "tasks.status.done": "Done",
+      "tasks.priority.high": "High",
+      "tasks.priority.medium": "Medium",
+      "tasks.priority.low": "Low",
+      "tasks.priorityTag": "{priority} priority",
+      "tasks.due": "Due {date}",
+      "tasks.noDue": "No due date",
+      "tasks.groupCount": "{shown} of {total}",
+      "tasks.range": "{from}–{to} of {total}",
+      "tasks.pageOf": "Page {page} of {pages}",
+      "tasks.previous": "Previous",
+      "tasks.next": "Next",
+      "tasks.pager": "Task pages",
+      "tasks.untitled": "Task #{id}",
+      "tasks.refreshLabel": "Refresh my tasks",
+    };
+    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.dsh": "\u8ba9\u5de5\u4f5c\u6d41\u6b65\u9aa4\u53ef\u4ee5\u4f7f\u7528 DSH",
+      "setup.dshHint": "\u5728\u89c4\u5219\u91cc\u52a0\u5165\u4e00\u4e2a DSH agent\u3002\u53ea\u6709\u89c4\u5219\u91cc\u660e\u786e\u6307\u5b9a\u5b83\u7684\u6b65\u9aa4\u624d\u4f1a\u7528\u5230\uff1b\u4ec5\u5b89\u88c5\u63d2\u4ef6\u4e0d\u4f1a\u9886\u53d6\u6216\u6539\u6d3e\u4efb\u52a1\u3002",
+      "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",
+      "panel.openDecision": "{count} \u4e2a\u5f85\u4f60\u51b3\u7b56",
+      "panel.openDecisions": "{count} \u4e2a\u5f85\u4f60\u51b3\u7b56",
+      "runner.editRulesFile": "\u7f16\u8f91 rules.json",
+      "file.title": "\u7f16\u8f91 rules.json",
+      "file.loading": "\u6b63\u5728\u52a0\u8f7d rules.json",
+      "file.loadFailed": "\u65e0\u6cd5\u52a0\u8f7d rules.json\uff1a{message}",
+      "file.path": "\u6587\u4ef6\uff1a{path}",
+      "file.missing": "\u8fd8\u6ca1\u6709 rules.json\uff1b\u4fdd\u5b58\u65f6\u4f1a\u521b\u5efa\u5b83\u3002",
+      "file.diskInvalid": "\u78c1\u76d8\u4e0a\u7684\u6587\u4ef6\u6709\u4ee5\u4e0b\u95ee\u9898\uff1a",
+      "file.label": "rules.json \u5185\u5bb9",
+      "file.hint": "\u4fdd\u5b58\u524d\u4f1a\u68c0\u67e5\u89c4\u5219\u5e76\u5907\u4efd\u539f\u6587\u4ef6\uff1b\u5982\u679c\u6587\u4ef6\u5728\u52a0\u8f7d\u540e\u88ab\u6539\u8fc7\uff0c\u4fdd\u5b58\u4f1a\u88ab\u62d2\u7edd\u3002",
+      "file.save": "\u4fdd\u5b58",
+      "file.saving": "\u6b63\u5728\u4fdd\u5b58",
+      "file.close": "\u5173\u95ed",
+      "file.saved": "\u5df2\u4fdd\u5b58 {path}",
+      "file.savedBackup": "\u5df2\u4fdd\u5b58 {path}\uff1b\u539f\u6587\u4ef6\u5728 {backup}",
+      "file.saveFailed": "\u89c4\u5219\u672a\u4fdd\u5b58\uff1a{message}",
+      "file.conflict": "rules.json \u5728\u6b64\u5bf9\u8bdd\u6846\u4e4b\u5916\u88ab\u6539\u8fc7\u3002\u8bf7\u5148\u67e5\u770b\u78c1\u76d8\u4e0a\u7684\u6587\u4ef6\uff0c\u518d\u9009\u62e9\u4fdd\u7559\u54ea\u4e2a\u7248\u672c\u3002",
+      "file.diskLabel": "\u78c1\u76d8\u4e0a\u7684\u5f53\u524d\u6587\u4ef6",
+      "file.useDisk": "\u4f7f\u7528\u78c1\u76d8\u4e0a\u7684\u6587\u4ef6",
+      "file.overwrite": "\u7528\u6211\u7684\u7248\u672c\u8986\u76d6",
+      "tasks.title": "\u6211\u7684\u4efb\u52a1",
+      "tasks.loading": "\u6b63\u5728\u52a0\u8f7d\u4f60\u7684\u4efb\u52a1",
+      "tasks.error": "\u65e0\u6cd5\u52a0\u8f7d\u4f60\u7684\u4efb\u52a1\uff1a{message}",
+      "tasks.refresh": "\u5237\u65b0",
+      "tasks.empty": "\u6ca1\u6709\u5206\u914d\u7ed9\u4f60\u7684\u4efb\u52a1\u3002",
+      "tasks.emptyFiltered": "\u6ca1\u6709\u7b26\u5408\u7b5b\u9009\u6761\u4ef6\u7684\u4efb\u52a1\u3002",
+      "tasks.pageEmpty": "\u8fd9\u4e00\u9875\u6ca1\u6709\u4efb\u52a1\u3002",
+      "tasks.filterProject": "\u9879\u76ee",
+      "tasks.filterStatus": "\u72b6\u6001",
+      "tasks.allProjects": "\u5168\u90e8\u9879\u76ee",
+      "tasks.allStatuses": "\u5168\u90e8\u72b6\u6001",
+      "tasks.optionCount": "{name}\uff08{count} \u4e2a\uff09",
+      "tasks.projectGone": "\u9879\u76ee #{id}",
+      "tasks.status.in_progress": "\u8fdb\u884c\u4e2d",
+      "tasks.status.blocked": "\u963b\u585e",
+      "tasks.status.review": "\u5f85\u9a8c\u6536",
+      "tasks.status.todo": "\u5f85\u529e",
+      "tasks.status.backlog": "\u5f85\u6574\u7406",
+      "tasks.status.done": "\u5df2\u5b8c\u6210",
+      "tasks.priority.high": "\u9ad8",
+      "tasks.priority.medium": "\u4e2d",
+      "tasks.priority.low": "\u4f4e",
+      "tasks.priorityTag": "{priority}\u4f18\u5148\u7ea7",
+      "tasks.due": "\u622a\u6b62 {date}",
+      "tasks.noDue": "\u65e0\u622a\u6b62\u65e5\u671f",
+      "tasks.groupCount": "\u672c\u9875 {shown} \u4e2a\uff0c\u5171 {total} \u4e2a",
+      "tasks.range": "\u7b2c {from}\u2013{to} \u4e2a\uff0c\u5171 {total} \u4e2a",
+      "tasks.pageOf": "\u7b2c {page} / {pages} \u9875",
+      "tasks.previous": "\u4e0a\u4e00\u9875",
+      "tasks.next": "\u4e0b\u4e00\u9875",
+      "tasks.pager": "\u4efb\u52a1\u5206\u9875",
+      "tasks.untitled": "\u4efb\u52a1 #{id}",
+      "tasks.refreshLabel": "\u5237\u65b0\u6211\u7684\u4efb\u52a1",
+    };
+
+    /**
+     * 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 } };
+    }
+
+    /**
+     * Whether the rules define a DSH agent (an agent whose `use` is `dsh`).
+     * @param {Record<string, unknown> | null} rules - the rules object on disk.
+     */
+    function hasDshAgent(rules) {
+      const agents = rules && rules.agents && typeof rules.agents === "object" && !Array.isArray(rules.agents) ? Object.values(rules.agents) : [];
+      return agents.some((agent) => agent && typeof agent === "object" && agent.use === "dsh");
+    }
+
+    /**
+     * The rules with a DSH agent added (`on`) or every DSH agent removed. Nothing else changes: other agents, workflows
+     * and labels stay, a DSH agent that already exists keeps its settings, and a name already taken by another agent
+     * is never overwritten. A step that still names a removed agent is refused by the CLI's rules check on save.
+     * @param {Record<string, unknown> | null} rules - the rules object on disk, or null when there is none.
+     * @param {boolean} on - whether workflow steps may use DSH.
+     */
+    function withDshAgent(rules, on) {
+      const agents = rules && rules.agents && typeof rules.agents === "object" && !Array.isArray(rules.agents) ? rules.agents : {};
+      if (on === hasDshAgent(rules)) return rules ?? { agents: on ? { dsh: { use: "dsh", permissionMode: "workspace-write" } } : {} };
+      if (!on) return { ...rules, agents: Object.fromEntries(Object.entries(agents).filter(([, agent]) => !(agent && typeof agent === "object" && agent.use === "dsh"))) };
+      let name = "dsh";
+      for (let n = 2; Object.prototype.hasOwnProperty.call(agents, name); n += 1) name = `dsh-${n}`;
+      return { ...(rules ?? {}), agents: { ...agents, [name]: { use: "dsh", permissionMode: "workspace-write" } } };
+    }
+
+    /** 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, onEditRulesFile?: () => void, updatedAt: number | undefined }} props
+     */
+    function RunnerHeader({ t, runner, loading, busy, actionError, setupOpen, onAction, onRefresh, onEditRules, onEditRulesFile, 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")),
+          onEditRulesFile ? h("button", { type: "button", "aria-haspopup": "dialog", onClick: onEditRulesFile }, t("runner.editRulesFile")) : null),
+        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 [dsh, setDsh] = useState(() => hasDshAgent(data.rules));
+      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(withDshAgent(built.rules, dsh));
+        } 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("label", { className: "c4d-row" },
+          h("input", { type: "checkbox", "data-colco4dsh-dsh": true, checked: dsh, onChange: (event) => setDsh(event.target.checked) }),
+          h("span", null, t("setup.dsh"))),
+        h("p", { className: "c4d-muted" }, t("setup.dshHint")),
+        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 });
+    }
+
+    // ---- Edit rules.json dialog -------------------------------------------------------------------------------
+    // A native <dialog> over the raw ~/.colco/rules.json. It loads the text with its content hash, saves through the
+    // CLI's validation and backup, and sends the hash back: if the file changed in the meantime the save is refused and
+    // the dialog shows the file as it is now, so an outside edit is reviewed and never overwritten silently.
+    const { useRef } = React;
+
+    /** Dialog styles: capped by the viewport so the dialog fits narrow screens; the controls wrap. */
+    const DIALOG_CSS = `
+.c4d-dialog{box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:hidden;border:1px solid var(--dsw-alias-border-l2,#d0d7de);border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#1f2328)}
+.c4d-dialog::backdrop{background:rgba(0,0,0,.4)}
+.c4d-dialog-body{display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 26px);overflow:auto;padding:16px}
+.c4d-dialog textarea.c4d-file{min-height:min(320px,40dvh);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:18px;white-space:pre;overflow:auto}
+.c4d-dialog-actions{display:flex;flex-wrap:wrap;gap:8px}
+@media (max-width:767px){.c4d-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px)}.c4d-dialog-body{padding:12px}.c4d-dialog-actions button{flex:1 1 140px}}
+`;
+
+    /** Read the raw rules.json text, its hash and its check result. */
+    function loadRulesFile() {
+      return call("rules/file");
+    }
+
+    /**
+     * Save the text. `baseHash` is the hash of the file as loaded (null when there was no file). A file that changed
+     * since then is not written: the result is `{ status: "conflict", current }` with the file as it is now. Invalid
+     * text and denied access throw an ApiError.
+     * @param {string} text
+     * @param {string | null} baseHash
+     */
+    async function saveRulesFile(text, baseHash) {
+      try {
+        const reply = await call("rules/file", { method: "POST", body: { text, baseHash } });
+        return { status: "saved", path: reply.path, backup: reply.backup ?? null, hash: reply.hash ?? null };
+      } catch (failure) {
+        if (failure instanceof ApiError && failure.status === 409) return { status: "conflict", current: await loadRulesFile() };
+        throw failure;
+      }
+    }
+
+    /**
+     * The Edit rules.json dialog. `initial` seeds the state for tests; otherwise it loads the file when it opens.
+     * @param {{ t: Function, initial?: { file?: object, loadError?: string, draft?: string, error?: string, errors?: string[], conflict?: object, notice?: string }, onSaved: () => void, onClose: () => void }} props
+     */
+    function RulesFileDialog({ t, initial = {}, onSaved, onClose }) {
+      const ref = useRef(null);
+      const [file, setFile] = useState(initial.file);
+      const [loadError, setLoadError] = useState(initial.loadError);
+      const [draft, setDraft] = useState(initial.draft ?? initial.file?.text ?? "");
+      const [saving, setSaving] = useState(false);
+      const [error, setError] = useState(initial.error);
+      const [errors, setErrors] = useState(initial.errors ?? []);
+      const [conflict, setConflict] = useState(initial.conflict);
+      const [notice, setNotice] = useState(initial.notice);
+      const message = (failure) => (failure instanceof Error ? failure.message : String(failure));
+      // Open as a modal dialog: the browser traps focus, closes on Escape and restores focus to the button.
+      useEffect(() => {
+        const element = ref.current;
+        if (element && typeof element.showModal === "function" && !element.open) element.showModal();
+        return () => { if (element && element.open) element.close(); };
+      }, []);
+      useEffect(() => {
+        if (file || loadError) return undefined;
+        let live = true;
+        loadRulesFile().then((loaded) => {
+          if (!live) return;
+          setFile(loaded);
+          setDraft(loaded.text);
+        }, (failure) => { if (live) setLoadError(t("file.loadFailed", { message: message(failure) })); });
+        return () => { live = false; };
+      }, [file, loadError, t]);
+      /** Save the draft against the hash `base`; a conflict opens the review, an error stays in the dialog. */
+      const submit = async (base) => {
+        setSaving(true);
+        setError(undefined);
+        setErrors([]);
+        setNotice(undefined);
+        try {
+          const result = await saveRulesFile(draft, base);
+          if (result.status === "conflict") {
+            setConflict(result.current);
+            return;
+          }
+          setConflict(undefined);
+          let reloaded;
+          try {
+            reloaded = await loadRulesFile();
+          } catch {
+            reloaded = undefined;
+          }
+          setFile(reloaded ?? { ...file, exists: true, text: draft, hash: result.hash, valid: true, errors: [] });
+          if (reloaded) setDraft(reloaded.text);
+          setNotice(result.backup ? t("file.savedBackup", { path: result.path, backup: result.backup }) : t("file.saved", { path: result.path ?? "rules.json" }));
+          onSaved();
+        } catch (failure) {
+          setError(t("file.saveFailed", { message: message(failure) }));
+          setErrors(failure instanceof ApiError ? failure.errors : []);
+        } finally {
+          setSaving(false);
+        }
+      };
+      /** Drop the draft and take the file as it is now. */
+      const useDisk = () => {
+        setFile(conflict);
+        setDraft(conflict.text);
+        setConflict(undefined);
+      };
+      /** Save the draft over the file as it is now (its new hash), after the user has reviewed it. */
+      const overwrite = () => {
+        const current = conflict;
+        setFile(current);
+        setConflict(undefined);
+        void submit(current.hash ?? null);
+      };
+      const failed = Boolean(error) || errors.length > 0;
+      return h("dialog", { ref, className: "c4d-dialog", "aria-labelledby": "c4d-file-title", "data-colco4dsh-rules-file": true, onClose },
+        h("style", null, DIALOG_CSS),
+        h("div", { className: "c4d-dialog-body" },
+          h("h2", { id: "c4d-file-title" }, t("file.title")),
+          loadError ? h(ErrorLine, { message: loadError }) : null,
+          !file && !loadError ? h("p", { className: "c4d-muted", role: "status" }, t("file.loading")) : null,
+          file ? h(Fragment, null,
+            h("p", { className: "c4d-muted" }, t("file.path", { path: file.path ?? "rules.json" })),
+            !file.exists ? h("p", null, t("file.missing")) : null,
+            file.exists && !file.valid && file.errors.length ? h(Fragment, null, h("p", null, t("file.diskInvalid")), h("ul", { className: "c4d-error" }, file.errors.map((line, index) => h("li", { key: index }, line)))) : null,
+            notice ? h("p", { role: "status", className: "c4d-ok" }, notice) : null,
+            conflict ? h("div", { className: "c4d-section" },
+              h("p", { role: "alert", className: "c4d-error" }, t("file.conflict")),
+              h("label", { htmlFor: "c4d-file-disk", className: "c4d-muted" }, t("file.diskLabel")),
+              h("textarea", { id: "c4d-file-disk", className: "c4d-file", rows: 10, readOnly: true, spellCheck: false, value: conflict.text }),
+              conflict.exists && !conflict.valid && conflict.errors.length ? h("ul", { className: "c4d-error" }, conflict.errors.map((line, index) => h("li", { key: index }, line))) : null) : null,
+            h("label", { htmlFor: "c4d-file-text", className: "c4d-muted" }, t("file.label")),
+            h("textarea", {
+              id: "c4d-file-text", className: "c4d-file", rows: 14, spellCheck: false, value: draft, readOnly: Boolean(conflict) || saving,
+              "aria-invalid": failed ? "true" : undefined, "aria-describedby": failed ? "c4d-file-errors" : undefined,
+              onChange: (event) => setDraft(event.target.value),
+            }),
+            failed ? h("div", { id: "c4d-file-errors", role: "alert", className: "c4d-error" },
+              error ? h("p", null, error) : null,
+              errors.length ? h("ul", null, errors.map((line, index) => h("li", { key: index }, line))) : null) : null,
+            conflict ? null : h("p", { className: "c4d-muted" }, t("file.hint"))) : null,
+          h("div", { className: "c4d-dialog-actions" },
+            file && !conflict ? h("button", { type: "button", className: "c4d-primary", disabled: saving, "aria-busy": saving, onClick: () => void submit(file.hash ?? null) }, saving ? t("file.saving") : t("file.save")) : null,
+            conflict ? h("button", { type: "button", onClick: useDisk }, t("file.useDisk")) : null,
+            conflict ? h("button", { type: "button", className: "c4d-primary", disabled: saving, onClick: overwrite }, t("file.overwrite")) : null,
+            h("button", { type: "button", onClick: onClose }, t("file.close")))));
+    }
+
+    // ---- Shared status store (open-decision dot) -------------------------------------------------------------
+    // One store holds the last `GET status` read and one poller refreshes it, for the sidebar icon and the Colco page
+    // alike. It polls while at least one of them is mounted and DSH is visible, so the icon's dot follows the
+    // runner's decisions even when the page is closed.
+    const { useSyncExternalStore } = React;
+
+    /**
+     * Count the open decisions of a status reply. A reply whose decisions section failed counts as none.
+     * @param {object | undefined} status
+     */
+    function countOpen(status) {
+      if (!status || (status.errors && status.errors.decisions) || !Array.isArray(status.decisions)) return 0;
+      return status.decisions.filter((decision) => decision.state === undefined || decision.state === "open").length;
+    }
+
+    /**
+     * Build one status store.
+     * `snapshot.openCount` is the number behind the dot; it is 0 after a failed read, so a failure never shows a dot.
+     * @param {{ fetchStatus?: (signal: AbortSignal) => Promise<object>, initialStatus?: object, doc?: { visibilityState?: string, addEventListener: Function, removeEventListener: Function } | undefined, timers?: { setInterval: Function, clearInterval: Function }, pollMs?: number }} [options]
+     */
+    function createStatusStore({ fetchStatus = (signal) => call("status", { signal }), initialStatus, doc = globalThis.document, timers = globalThis, pollMs = POLL_MS } = {}) {
+      const listeners = new Set();
+      /** Ids answered here; a read that started earlier may still list them, so they are filtered out of every reply. */
+      const answeredIds = new Set();
+      let inFlight;
+      let timer;
+      let stopWatching;
+
+      /** The snapshot for one status, its last error and update time. */
+      const derive = (status, error, updatedAt) => ({ status, error, updatedAt, openCount: error ? 0 : countOpen(status) });
+      /** The status without the decisions answered here. */
+      const withoutAnswered = (status) => (status && Array.isArray(status.decisions) && answeredIds.size
+        ? { ...status, decisions: status.decisions.filter((decision) => !answeredIds.has(decision.id)) }
+        : status);
+      let snapshot = derive(initialStatus, undefined, undefined);
+      /** Replace the snapshot and tell every listener. */
+      const publish = (next) => {
+        snapshot = next;
+        for (const listener of [...listeners]) listener();
+      };
+
+      /** Read the status once; a read already in flight is shared. A failure keeps the old status and sets the error. */
+      const refresh = () => {
+        if (inFlight) return inFlight.promise;
+        const controller = new AbortController();
+        let request;
+        try {
+          request = Promise.resolve(fetchStatus(controller.signal));
+        } catch (failure) {
+          request = Promise.reject(failure);
+        }
+        const promise = request.then((reply) => {
+          if (!controller.signal.aborted) publish(derive(withoutAnswered(reply), undefined, Date.now()));
+        }, (failure) => {
+          if (!controller.signal.aborted) publish(derive(snapshot.status, failure instanceof Error ? failure.message : String(failure), snapshot.updatedAt));
+        }).finally(() => {
+          if (inFlight && inFlight.controller === controller) inFlight = undefined;
+        });
+        inFlight = { controller, promise };
+        return promise;
+      };
+
+      /** Start polling: one read now, then one per interval while the document is not hidden, and one on becoming visible. */
+      const start = () => {
+        const tick = () => { if (!doc || doc.visibilityState !== "hidden") void refresh(); };
+        tick();
+        timer = timers.setInterval(tick, pollMs);
+        if (doc) doc.addEventListener("visibilitychange", tick);
+        stopWatching = () => { if (doc) doc.removeEventListener("visibilitychange", tick); };
+      };
+      /** Stop polling and abort a read in flight. */
+      const stop = () => {
+        timers.clearInterval(timer);
+        stopWatching?.();
+        if (inFlight) {
+          inFlight.controller.abort();
+          inFlight = undefined;
+        }
+      };
+
+      return {
+        /** @returns the current snapshot; the same object until something changes. */
+        getSnapshot: () => snapshot,
+        /** Listen for changes; the first listener starts the poller and the last one stops it. */
+        subscribe(listener) {
+          listeners.add(listener);
+          if (listeners.size === 1) start();
+          return () => {
+            listeners.delete(listener);
+            if (listeners.size === 0) stop();
+          };
+        },
+        refresh,
+        /** Take an answered decision out of the list at once, so its dot clears before the next read. */
+        answered(id) {
+          answeredIds.add(id);
+          if (snapshot.status) publish(derive(withoutAnswered(snapshot.status), snapshot.error, snapshot.updatedAt));
+        },
+      };
+    }
+
+    /** The store the sidebar icon and the page share; created on first use, idle until something subscribes. */
+    let sharedStore;
+    /** The shared store. */
+    function sharedStatusStore() {
+      sharedStore ??= createStatusStore();
+      return sharedStore;
+    }
+
+    /**
+     * Follow a store from a component.
+     * @param {ReturnType<typeof createStatusStore>} store
+     */
+    function useStatusSnapshot(store) {
+      return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    }
+
+    /**
+     * Send an answer, clear the decision's dot at once, then refresh. A failed answer throws and leaves the dot.
+     * @param {ReturnType<typeof createStatusStore>} store
+     * @param {number} id - decision id.
+     * @param {number} index - chosen option.
+     * @param {string | undefined} text - optional note.
+     */
+    async function submitAnswer(store, id, index, text) {
+      await call("answer", { method: "POST", body: text === undefined ? { id, index } : { id, index, text } });
+      store.answered(id);
+      await store.refresh();
+    }
+
+    /**
+     * The whole tab: runner header, active runs, open decisions and Setup. It reads the shared status store,
+     * which refreshes every POLL_MS while DSH is visible. `initialStatus` seeds a private store and `initialSetup` seeds
+     * Setup (server rendering in tests performs no request); `store` passes a store in.
+     * @param {{ t: Function, initialStatus?: object, initialSetup?: { data: object, options: object }, store?: object }} props
+     */
+    function ColcoPanel({ t, initialStatus, initialSetup, store: given }) {
+      const [store] = useState(() => given ?? (initialStatus ? createStatusStore({ initialStatus }) : sharedStatusStore()));
+      const { status, error: loadError, updatedAt } = useStatusSnapshot(store);
+      const [busy, setBusy] = useState(undefined);
+      const [actionError, setActionError] = useState(undefined);
+      const [setupRequested, setSetupRequested] = useState(false);
+      const [fileOpen, setFileOpen] = useState(false);
+      const [rulesVersion, setRulesVersion] = useState(0);
+      const refresh = store.refresh;
+      // Subscribing (above) starts the shared poller; this read makes a page opened later show fresh data at once.
+      useEffect(() => { void refresh(); }, [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 = (id, index, text) => submitAnswer(store, id, index, text);
+      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), onEditRulesFile: () => setFileOpen(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, { key: rulesVersion, t, initial: initialSetup, canClose: !needsSetup, onSaved: () => void refresh(), onClose: () => setSetupRequested(false) }) : null,
+        fileOpen ? h(RulesFileDialog, { t, onSaved: () => { setRulesVersion((value) => value + 1); void refresh(); }, onClose: () => setFileOpen(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"))),
+        h(MyTasksBoard, { t }));
+    }
+
+    // ---- My tasks board -------------------------------------------------------------------------------------
+    // The tasks assigned to the signed-in user, read only, grouped by status and paged by the server (GET tasks).
+    // Task changes continue in Colco: every title links there and nothing on the board writes.
+
+    /** How often the board reloads while the page is open. Slower than the status poll, because tasks change in Colco. */
+    const BOARD_POLL_MS = 60000;
+    /** The statuses of a task in the order the server lists them: work in flight first, done last. */
+    const BOARD_STATUSES = ["in_progress", "blocked", "review", "todo", "backlog", "done"];
+
+    /** Board styles: wrapping and clamping so long titles and narrow windows cannot push the page sideways. No angle brackets or quotes, because React escapes them inside style text. */
+    const BOARD_CSS = `
+.c4d-board{min-width:0}
+.c4d-board-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
+.c4d-board-bar select{flex:1 1 180px;max-width:100%;min-width:0;text-overflow:ellipsis}
+.c4d-board-group{display:flex;flex-direction:column;gap:8px;min-width:0}
+.c4d-board-head{flex-wrap:nowrap}
+.c4d-task{min-width:0;gap:4px}
+.c4d-task-title{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.c4d-task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
+.c4d-task-meta .c4d-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.c4d-board-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
+@media (max-width:480px){.c4d-board-bar select{flex-basis:100%}.c4d-board-pager{justify-content:center}}
+`;
+
+    /**
+     * The route path for a board query: only the filters that are set and a page after the first.
+     * @param {{ page: number, project?: number, status?: string }} query
+     */
+    function boardPath(query) {
+      const params = [];
+      if (query.project !== undefined) params.push(`project=${query.project}`);
+      if (query.status !== undefined) params.push(`status=${encodeURIComponent(query.status)}`);
+      if (query.page > 1) params.push(`page=${query.page}`);
+      return params.length ? `tasks?${params.join("&")}` : "tasks";
+    }
+
+    /**
+     * The query after one change from the board. A new project or status goes back to page 1, because the old page
+     * number means nothing for another set of tasks; an empty value clears that filter; a bad page becomes 1.
+     * @param {{ page: number, project?: number, status?: string }} query - the current query.
+     * @param {{ project?: string, status?: string, page?: number | string }} change - one change from a select or the pager.
+     */
+    function changeBoardQuery(query, change) {
+      const next = { ...query };
+      if ("project" in change) {
+        const id = Number(change.project);
+        next.project = change.project !== "" && Number.isSafeInteger(id) && id >= 1 ? id : undefined;
+        next.page = 1;
+      }
+      if ("status" in change) {
+        next.status = BOARD_STATUSES.includes(change.status) ? change.status : undefined;
+        next.page = 1;
+      }
+      if ("page" in change) {
+        const page = Number(change.page);
+        next.page = Number.isSafeInteger(page) && page >= 1 ? page : 1;
+      }
+      return next;
+    }
+
+    /**
+     * One task: its title (a link into Colco when the link is http or https), then project, priority and due date.
+     * The title is clamped to two lines by CSS and kept whole in the title attribute.
+     * @param {{ t: Function, task: object }} props
+     */
+    function TaskRow({ t, task }) {
+      const title = task.title || t("tasks.untitled", { id: task.id });
+      const linked = typeof task.link === "string" && /^https?:\/\//i.test(task.link);
+      return h("li", { className: "c4d-card c4d-task", "data-colco4dsh-task": task.id, "data-status": task.status },
+        h("p", { className: "c4d-task-title", title }, linked ? h("a", { href: task.link, target: "_blank", rel: "noopener noreferrer" }, title) : title),
+        h("div", { className: "c4d-task-meta" },
+          task.projectName ? h("span", { className: "c4d-tag", title: task.projectName }, task.projectName) : null,
+          task.priority ? h("span", { className: "c4d-tag", "data-priority": task.priority, "data-tone": task.priority === "high" ? "warn" : undefined }, t("tasks.priorityTag", { priority: t(`tasks.priority.${task.priority}`) })) : null,
+          h("span", { className: "c4d-muted" }, task.dueDate ? t("tasks.due", { date: task.dueDate }) : t("tasks.noDue"))));
+    }
+
+    /**
+     * The tasks of one status on this page. The heading count is the status's total across pages; a group that
+     * continues on another page says how many of its tasks are shown here.
+     * @param {{ t: Function, status: string, tasks: object[], total: number }} props
+     */
+    function TaskGroup({ t, status, tasks, total }) {
+      const count = Math.max(total, tasks.length);
+      return h("section", { className: "c4d-board-group", "aria-label": t(`tasks.status.${status}`), "data-colco4dsh-group": status },
+        h("div", { className: "c4d-row c4d-board-head" },
+          h("h3", null, t(`tasks.status.${status}`)),
+          h("span", { className: "c4d-tag" }, tasks.length < count ? t("tasks.groupCount", { shown: tasks.length, total: count }) : String(count))),
+        h("ul", null, tasks.map((task) => h(TaskRow, { key: task.id, t, task }))));
+    }
+
+    /**
+     * The board for one reply of GET tasks: Refresh, the project and status filters, the status groups and the pager.
+     * `reply` is undefined until the first load; a failed refresh keeps the last reply under the alert.
+     * @param {{ t: Function, query: { page: number, project?: number, status?: string }, reply: object | undefined, loading: boolean, error: string | undefined, onQuery: (change: object) => void, onRefresh: () => void }} props
+     */
+    function TaskBoard({ t, query, reply, loading, error, onQuery, onRefresh }) {
+      const filtered = query.project !== undefined || query.status !== undefined;
+      const byStatus = new Map();
+      if (reply) for (const task of reply.tasks) byStatus.set(task.status, [...byStatus.get(task.status) ?? [], task]);
+      const projectKnown = !reply || query.project === undefined || reply.projects.some((project) => project.id === query.project);
+      const showFilters = reply && (reply.total > 0 || filtered);
+      const first = reply ? (reply.page - 1) * reply.pageSize + 1 : 1;
+      return h("section", { className: "c4d-section c4d-board", "aria-label": t("tasks.title"), "aria-busy": loading, "data-colco4dsh-board": reply ? "ready" : error ? "error" : "loading" },
+        h("style", null, BOARD_CSS),
+        h("div", { className: "c4d-row" },
+          h("h2", null, t("tasks.title")),
+          h("button", { type: "button", "aria-label": t("tasks.refreshLabel"), disabled: loading, onClick: onRefresh }, t("tasks.refresh"))),
+        error ? h(ErrorLine, { message: t("tasks.error", { message: error }) }) : null,
+        !reply && !error ? h("p", { className: "c4d-muted" }, t("tasks.loading")) : null,
+        showFilters ? h("div", { className: "c4d-board-bar" },
+          h("select", { "aria-label": t("tasks.filterProject"), value: query.project === undefined ? "" : String(query.project), onChange: (event) => onQuery({ project: event.target.value }) },
+            h("option", { value: "" }, t("tasks.allProjects")),
+            reply.projects.map((project) => h("option", { key: project.id, value: String(project.id) }, t("tasks.optionCount", { name: project.name, count: project.count }))),
+            projectKnown ? null : h("option", { value: String(query.project) }, t("tasks.projectGone", { id: query.project }))),
+          h("select", { "aria-label": t("tasks.filterStatus"), value: query.status ?? "", onChange: (event) => onQuery({ status: event.target.value }) },
+            h("option", { value: "" }, t("tasks.allStatuses")),
+            reply.counts.map((entry) => h("option", { key: entry.status, value: entry.status }, t("tasks.optionCount", { name: t(`tasks.status.${entry.status}`), count: entry.count }))))) : null,
+        reply && reply.total === 0 ? h("p", { className: "c4d-muted" }, filtered ? t("tasks.emptyFiltered") : t("tasks.empty")) : null,
+        reply && reply.total > 0 && reply.tasks.length === 0 ? h("p", { className: "c4d-muted" }, t("tasks.pageEmpty")) : null,
+        reply ? reply.counts.map((entry) => (byStatus.has(entry.status) ? h(TaskGroup, { key: entry.status, t, status: entry.status, tasks: byStatus.get(entry.status), total: entry.count }) : null)) : null,
+        reply && (reply.pages > 1 || reply.page > 1) ? h("nav", { className: "c4d-board-pager", "aria-label": t("tasks.pager") },
+          h("button", { type: "button", disabled: reply.page <= 1, onClick: () => onQuery({ page: Math.min(reply.page - 1, reply.pages) }) }, t("tasks.previous")),
+          h("span", null, t("tasks.pageOf", { page: reply.page, pages: reply.pages })),
+          reply.tasks.length ? h("span", { className: "c4d-muted" }, t("tasks.range", { from: first, to: first + reply.tasks.length - 1, total: reply.total })) : null,
+          h("button", { type: "button", disabled: reply.page >= reply.pages, onClick: () => onQuery({ page: reply.page + 1 }) }, t("tasks.next"))) : null);
+    }
+
+    /**
+     * The board with its data: loads GET tasks for the current filters and page, reloads every BOARD_POLL_MS while
+     * the page is visible, and steps back to the last page when the current one has emptied (tasks finished meanwhile).
+     * `initial` seeds the first render (server rendering in tests performs no request).
+     * @param {{ t: Function, initial?: { reply: object } }} props
+     */
+    function MyTasksBoard({ t, initial }) {
+      const [query, setQuery] = useState({ page: 1 });
+      const [reply, setReply] = useState(initial ? initial.reply : undefined);
+      const [error, setError] = useState(undefined);
+      const [loading, setLoading] = useState(!initial);
+      const [revision, setRevision] = useState(0);
+      useEffect(() => {
+        const controller = new AbortController();
+        setLoading(true);
+        call(boardPath(query), { signal: controller.signal }).then((next) => {
+          if (controller.signal.aborted) return;
+          setReply(next);
+          setError(undefined);
+          setLoading(false);
+          if (next.tasks.length === 0 && next.total > 0 && query.page > next.pages) setQuery((current) => changeBoardQuery(current, { page: next.pages }));
+        }, (failure) => {
+          if (controller.signal.aborted) return;
+          setError(failure instanceof Error ? failure.message : String(failure));
+          setLoading(false);
+        });
+        return () => controller.abort();
+      }, [query, revision]);
+      useEffect(() => {
+        const timer = setInterval(() => { if (document.visibilityState !== "hidden") setRevision((value) => value + 1); }, BOARD_POLL_MS);
+        return () => clearInterval(timer);
+      }, []);
+      return h(TaskBoard, { t, query, reply, loading, error, onQuery: (change) => setQuery((current) => changeBoardQuery(current, change)), onRefresh: () => setRevision((value) => value + 1) });
+    }
+
+    /** What the board adds to the factory's exports, for the tests. */
+    const BOARD_EXPORTS = { TaskBoard, MyTasksBoard, changeBoardQuery, boardPath };
+
+    /** English copy for hosts without DSH's locale service (tests, other hosts). */
+    const fallbackT = translator(en);
+
+    /**
+     * Glyph of the left-sidebar row. The sidebar owns the button, its label and the selected state. The glyph is
+     * decorative, except that a red dot inside its 24 by 24 box, with an accessible count, marks open decisions.
+     * It follows the shared status store, so it updates while the Colco page is closed.
+     * @param {{ size: number, active?: boolean, t?: Function, store?: object }} props - the edge the sidebar asks for; `t` and `store` are for tests and hosts.
+     */
+    function ColcoPanelIcon({ size, t, store }) {
+      const { openCount } = useStatusSnapshot(store ?? sharedStatusStore());
+      const label = openCount > 0 ? (t ?? fallbackT)(openCount === 1 ? "panel.openDecision" : "panel.openDecisions", { count: openCount }) : undefined;
+      return h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", ...label ? { role: "img", "aria-label": label } : { "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" }),
+        openCount > 0 ? h("circle", { cx: 19.5, cy: 4.5, r: 3, stroke: "none", "data-colco4dsh-dot": "true", style: { fill: "var(--dsw-alias-state-error-primary,#cf222e)" } }) : null);
+    }
+
+    /**
+     * 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, createStatusStore, submitAnswer, loadRulesFile, saveRulesFile, RulesFileDialog, ColcoPage, ColcoPanel, ColcoPanelIcon, SetupForm, translator, call, ApiError, dictionaries: { en, zh }, shellQuote, fixCommand, rulesToForm, formToRules, hasDshAgent, withDshAgent, formatDuration, API, ACTION_HEADER, PANEL_ID, NS, ...BOARD_EXPORTS };
+  },
+});