From 35dd0e4aaaea8e01ac915f87342394c7471da25d Mon Sep 17 00:00:00 2001
From: rob163 <111229443+rob163@users.noreply.github.com>
Date: Mon, 8 Jun 2026 18:34:20 +0800
Subject: [PATCH] Support plugin and clone install paths

---
 .agents/plugins/marketplace.json       |   20 +
 .claude-plugin/marketplace.json        |   19 +
 .claude-plugin/plugin.json             |   12 +
 README.md                              |   89 +-
 codex/.codex-plugin/plugin.json        |   18 +
 codex/skills                           |    1 +
 scripts/validate-skill.mjs             |   61 +-
 skills/cli-panel/SKILL.md              |  201 ++++
 skills/cli-panel/assets/cli-panel.html | 1159 ++++++++++++++++++++++++
 9 files changed, 1563 insertions(+), 17 deletions(-)
 create mode 100644 .agents/plugins/marketplace.json
 create mode 100644 .claude-plugin/marketplace.json
 create mode 100644 .claude-plugin/plugin.json
 create mode 100644 codex/.codex-plugin/plugin.json
 create mode 120000 codex/skills
 create mode 100644 skills/cli-panel/SKILL.md
 create mode 100644 skills/cli-panel/assets/cli-panel.html

diff --git a/.agents/plugins/marketplace.json b/.agents/plugins/marketplace.json
new file mode 100644
index 0000000..8cff488
--- /dev/null
+++ b/.agents/plugins/marketplace.json
@@ -0,0 +1,20 @@
+{
+  "name": "html-as-cli-panel-skill",
+  "interface": {
+    "displayName": "HTML as CLI Panel Skill"
+  },
+  "plugins": [
+    {
+      "name": "html-as-cli-panel-skill",
+      "source": {
+        "source": "local",
+        "path": "./codex"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Productivity"
+    }
+  ]
+}
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
new file mode 100644
index 0000000..e466b76
--- /dev/null
+++ b/.claude-plugin/marketplace.json
@@ -0,0 +1,19 @@
+{
+  "name": "html-as-cli-panel-skill",
+  "owner": {
+    "name": "rob163"
+  },
+  "metadata": {
+    "description": "Agent skill for creating static, copy-only HTML command panels from repeat-use CLI workflows."
+  },
+  "plugins": [
+    {
+      "name": "html-as-cli-panel-skill",
+      "source": {
+        "source": "github",
+        "repo": "rob163/html-as-cli-panel-skill"
+      },
+      "description": "Create localStorage-backed HTML command panels for project CLI workflows."
+    }
+  ]
+}
diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
new file mode 100644
index 0000000..78595ed
--- /dev/null
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "html-as-cli-panel-skill",
+  "description": "Agent skill for creating static, copy-only HTML command panels from repeat-use CLI workflows.",
+  "version": "0.1.0",
+  "author": {
+    "name": "rob163",
+    "url": "https://github.com/rob163"
+  },
+  "homepage": "https://github.com/rob163/html-as-cli-panel-skill",
+  "repository": "https://github.com/rob163/html-as-cli-panel-skill",
+  "license": "MIT"
+}
diff --git a/README.md b/README.md
index 0d99cf1..fe784d0 100644
--- a/README.md
+++ b/README.md
@@ -32,39 +32,96 @@ do not need to install it separately — `npx skills` runs it on demand.
 Use the installer so the target agent receives the correct layout. This avoids
 fragile file-placement mistakes.
 
-Install into the current project (shared with the repo via git):
+### skills CLI
+
+Install into the current project:
 
 ```bash
-npx skills add rob163/html-as-cli-panel-skill --agent cursor
+npx skills add rob163/html-as-cli-panel-skill
 ```
 
-Install globally for one agent (available in every project on your machine):
+Install for a specific agent:
 
 ```bash
-npx skills add rob163/html-as-cli-panel-skill --global --agent cursor
+npx skills add rob163/html-as-cli-panel-skill --agent codex
+npx skills add rob163/html-as-cli-panel-skill --agent claude-code
 ```
 
-Replace `cursor` with your agent: `codex`, `claude-code`, and others are
-supported. Omit `--agent` only if you want the CLI to auto-detect installed
-agents or prompt you to choose.
-
-Other examples:
+Install globally instead of project-local:
 
 ```bash
-# Codex, project-local
-npx skills add rob163/html-as-cli-panel-skill --agent codex
-
-# Claude Code, global
+npx skills add rob163/html-as-cli-panel-skill --global --agent codex
 npx skills add rob163/html-as-cli-panel-skill --global --agent claude-code
+```
+
+Skip confirmation prompts when installing in scripts:
 
-# Skip confirmation prompts (useful in scripts)
-npx skills add rob163/html-as-cli-panel-skill --global --agent cursor --yes
+```bash
+npx skills add rob163/html-as-cli-panel-skill --global --agent codex --yes
 ```
 
 Verify installation:
 
 ```bash
-npx skills ls -g -a cursor
+npx skills ls -g -a codex
+```
+
+### Codex plugin
+
+Codex can install this repository as a plugin marketplace. This path uses the
+checked-in `.agents/plugins/marketplace.json` and `codex/.codex-plugin/plugin.json`
+files, which expose the same `cli-panel` skill through Codex's plugin system.
+
+```bash
+codex plugin marketplace add rob163/html-as-cli-panel-skill
+codex plugin add html-as-cli-panel-skill@html-as-cli-panel-skill
+```
+
+For a local clone:
+
+```bash
+git clone https://github.com/rob163/html-as-cli-panel-skill
+codex plugin marketplace add ./html-as-cli-panel-skill
+codex plugin add html-as-cli-panel-skill@html-as-cli-panel-skill
+```
+
+Restart Codex or start a new thread if the installed skill does not appear
+immediately.
+
+### Claude Code plugin
+
+Install as a versioned Claude Code plugin from inside Claude Code:
+
+```text
+/plugin marketplace add rob163/html-as-cli-panel-skill
+/plugin install html-as-cli-panel-skill@html-as-cli-panel-skill
+```
+
+The plugin uses the `skills/cli-panel` package in this repository, so the
+Claude Code plugin and direct skill installs stay aligned.
+
+### git clone
+
+Clone directly into the agent's skills directory when you prefer a simple
+manual install.
+
+Codex:
+
+```bash
+git clone https://github.com/rob163/html-as-cli-panel-skill "${CODEX_HOME:-$HOME/.codex}/skills/cli-panel"
+```
+
+Claude Code:
+
+```bash
+git clone https://github.com/rob163/html-as-cli-panel-skill ~/.claude/skills/cli-panel
+```
+
+Restart the agent after cloning. To update later:
+
+```bash
+git -C "${CODEX_HOME:-$HOME/.codex}/skills/cli-panel" pull
+git -C ~/.claude/skills/cli-panel pull
 ```
 
 ## Development
diff --git a/codex/.codex-plugin/plugin.json b/codex/.codex-plugin/plugin.json
new file mode 100644
index 0000000..a0466d9
--- /dev/null
+++ b/codex/.codex-plugin/plugin.json
@@ -0,0 +1,18 @@
+{
+  "name": "html-as-cli-panel-skill",
+  "version": "0.1.0",
+  "description": "Agent skill for creating static, copy-only HTML command panels from repeat-use CLI workflows.",
+  "author": {
+    "name": "rob163",
+    "url": "https://github.com/rob163"
+  },
+  "homepage": "https://github.com/rob163/html-as-cli-panel-skill",
+  "repository": "https://github.com/rob163/html-as-cli-panel-skill",
+  "license": "MIT",
+  "skills": "./skills/",
+  "interface": {
+    "displayName": "HTML as CLI Panel Skill",
+    "shortDescription": "Create static HTML command panels for project CLI workflows.",
+    "category": "Productivity"
+  }
+}
diff --git a/codex/skills b/codex/skills
new file mode 120000
index 0000000..42c5394
--- /dev/null
+++ b/codex/skills
@@ -0,0 +1 @@
+../skills
\ No newline at end of file
diff --git a/scripts/validate-skill.mjs b/scripts/validate-skill.mjs
index a3c1725..89bb054 100644
--- a/scripts/validate-skill.mjs
+++ b/scripts/validate-skill.mjs
@@ -3,7 +3,14 @@ import { readFile, access } from "node:fs/promises";
 const requiredFiles = [
   "SKILL.md",
   "assets/cli-panel.html",
-  "LICENSE"
+  "LICENSE",
+  ".agents/plugins/marketplace.json",
+  ".claude-plugin/marketplace.json",
+  ".claude-plugin/plugin.json",
+  "codex/.codex-plugin/plugin.json",
+  "codex/skills",
+  "skills/cli-panel/SKILL.md",
+  "skills/cli-panel/assets/cli-panel.html"
 ];
 
 async function assertFile(path) {
@@ -66,6 +73,56 @@ async function assertTemplate() {
   }
 }
 
+async function assertJson(path) {
+  const raw = await readFile(path, "utf8");
+  try {
+    return JSON.parse(raw);
+  } catch (error) {
+    throw new Error(`${path} must contain valid JSON: ${error.message}`);
+  }
+}
+
+async function assertMirroredSkillPackage() {
+  const rootSkill = await readFile("SKILL.md", "utf8");
+  const pluginSkill = await readFile("skills/cli-panel/SKILL.md", "utf8");
+  if (rootSkill !== pluginSkill) {
+    throw new Error("skills/cli-panel/SKILL.md must match root SKILL.md");
+  }
+
+  const rootTemplate = await readFile("assets/cli-panel.html", "utf8");
+  const pluginTemplate = await readFile("skills/cli-panel/assets/cli-panel.html", "utf8");
+  if (rootTemplate !== pluginTemplate) {
+    throw new Error("skills/cli-panel/assets/cli-panel.html must match assets/cli-panel.html");
+  }
+}
+
+async function assertPluginMetadata() {
+  const codexPlugin = await assertJson("codex/.codex-plugin/plugin.json");
+  if (codexPlugin.name !== "html-as-cli-panel-skill") {
+    throw new Error("Codex plugin name must be html-as-cli-panel-skill");
+  }
+  if (codexPlugin.skills !== "./skills/") {
+    throw new Error("Codex plugin skills path must point to ./skills/");
+  }
+
+  const codexMarketplace = await assertJson(".agents/plugins/marketplace.json");
+  const codexEntry = codexMarketplace.plugins?.[0];
+  if (codexEntry?.source?.path !== "./codex") {
+    throw new Error("Codex marketplace source.path must be ./codex");
+  }
+
+  const claudePlugin = await assertJson(".claude-plugin/plugin.json");
+  if (claudePlugin.name !== "html-as-cli-panel-skill") {
+    throw new Error("Claude plugin name must be html-as-cli-panel-skill");
+  }
+
+  const claudeMarketplace = await assertJson(".claude-plugin/marketplace.json");
+  const claudeEntry = claudeMarketplace.plugins?.[0];
+  if (claudeEntry?.source?.repo !== "rob163/html-as-cli-panel-skill") {
+    throw new Error("Claude plugin marketplace repo must be rob163/html-as-cli-panel-skill");
+  }
+}
+
 for (const file of requiredFiles) {
   await assertFile(file);
 }
@@ -73,5 +130,7 @@ for (const file of requiredFiles) {
 const skill = await readFile("SKILL.md", "utf8");
 assertFrontmatter(parseFrontmatter(skill));
 await assertTemplate();
+await assertMirroredSkillPackage();
+await assertPluginMetadata();
 
 console.log("Skill package validation passed.");
diff --git a/skills/cli-panel/SKILL.md b/skills/cli-panel/SKILL.md
new file mode 100644
index 0000000..0eab68a
--- /dev/null
+++ b/skills/cli-panel/SKILL.md
@@ -0,0 +1,201 @@
+---
+name: cli-panel
+description: >
+  Create or update a static localStorage-backed HTML page that turns a project's
+  repeat-use CLI commands into editable, copyable command panels.
+version: 0.1.0
+author: rob163
+license: MIT
+homepage: https://github.com/rob163/html-as-cli-panel-skill
+when_to_use: >
+  Use when a project would benefit from a static HTML command panel for
+  repeat-use CLI workflows, editable parameters, or copyable command recipes.
+tags:
+  - cli
+  - developer-tools
+  - html
+  - workflow
+---
+
+# CLI Panel
+
+## Overview
+
+Create a static `cli-panel.html` in a target project root from
+`assets/cli-panel.html`.
+
+The page is a copy-only command builder. It stores command definitions in browser
+`localStorage`, lets users edit command names, groups, effects, fixed prefixes,
+and parameters, then builds copyable command strings.
+
+## Workflow
+
+1. Copy `assets/cli-panel.html` to the target project root unless the user
+   requests another path.
+2. Inspect the target project's code and files for repeat-use commands before
+   filling the panel. Do not mirror every README command.
+3. Replace `defaultState.commands` with a curated set. Omit one-time setup and
+   trivial fixed one-liners with no meaningful parameters. Merge related setup
+   steps into one card when needed.
+4. Keep the eyebrow text `HTML as CLI Panel` unchanged. Replace the visible page
+   title `CLI Panel` with a title that matches the target project.
+5. Replace `storageKey` and `defaultsKey` with names derived from the target
+   project, such as a lowercase slug, so different projects do not collide in
+   browser `localStorage`.
+6. Keep the template UI English unless the user asks for another language.
+7. Validate the panel using the checks below.
+
+## Command Model
+
+Each default command must use this shape inside `defaultState.commands`:
+
+```js
+{
+  type: "Workflow",
+  label: "Run scenario",
+  description: "What this command does and when to use it.",
+  fixedText: "mytool run",
+  segments: [
+    { name: "--mode", value: "dry-run", widget: "text" },
+    { name: "--repeat", value: "3", widget: "number" },
+    { name: "", value: "./input.json", widget: "text" }
+  ]
+}
+```
+
+Fields:
+
+- `type`: tab or group label, such as a workflow category.
+- `label`: short command name shown as the card title.
+- `description`: what the command does and when to use it.
+- `fixedText`: the non-editable command prefix or complete base command.
+- `segments`: editable parameters.
+- `segments[].name`: option or argument label. Leave empty only for positional
+  values.
+- `segments[].value`: option value. Leave empty for flags that do not take a
+  value.
+- `segments[].widget`: use `"text"` by default, or `"number"` for numeric
+  fields.
+
+## Splitting `fixedText` and `segments`
+
+Think in three layers:
+
+| Layer | Goes in | Meaning |
+| ----- | ------- | ------- |
+| Tool family | start of `fixedText` | The main executable or entrypoint |
+| Card identity | rest of `fixedText` | The shortest stable prefix that tells sibling cards apart |
+| Runtime config | `segments` | Per-run values such as paths, ports, credentials, counts, and filters |
+
+Rules:
+
+- `fixedText` stops at the last token that is the same for every sibling card
+  sharing that prefix and is not an option flag.
+- Everything after the card identity belongs in `segments`, unless the whole
+  command is a fixed recipe with no useful editable surface.
+- Option flags are never part of card identity unless the entire flag, including
+  its value when present, is non-editable.
+- Keep each option together as paired segment `name` and `value`; do not split
+  one flag across `fixedText` and `segments`.
+- Positional arguments use an empty `name` and put the value in `value`.
+- Fixed recipes can put the full command in `fixedText` and leave `segments`
+  empty, but do not add a card solely because it is fixed.
+
+Examples:
+
+```text
+# Good: card identity in fixedText; options in segments.
+fixedText: python -m myapp.cli deploy
+segments:  [--env, staging] [--region, us-east-1]
+
+# Bad: split flag.
+fixedText: python -m myapp.cli deploy --env
+segments:  [staging]
+
+# Good: fixed recipe.
+fixedText: npm ci
+segments:  []
+
+# Good: positional argument.
+fixedText: mytool import
+segments:  [, ./data/input.csv]
+```
+
+When filling a real project, derive names and parameters from that project's
+command definitions. Do not copy these examples into a target panel.
+
+## Segment Order
+
+Preview output follows `fixedText`, then `segments` in array order.
+
+1. Put semantic segments first, such as `--mode`, `--target`, marker names, or
+   sub-operation flags.
+2. Put runtime configuration after semantic segments, such as paths, ports,
+   credentials, and repeat counts.
+3. Preserve CLI-required positional order.
+4. Treat README order as reference, not law, when the target CLI accepts flexible
+   flag order.
+
+## Validation
+
+Validation has two layers. Both matter.
+
+### Structural Compliance
+
+Every card must pass all checks:
+
+- Each option is either fully in `fixedText` or fully in `segments`.
+- No flag name in `fixedText` has its value in `segments`.
+- Positional values use empty `name` and non-empty `value`, unless intentionally
+  omitted.
+- `fixedText` contains only tool family plus card identity tokens, not partial
+  options.
+
+### Semantic Equivalence
+
+Each preview must represent the same operation as the project's documented
+command, using default segment values.
+
+Semantic equivalence does not require byte-for-byte string equality, identical
+flag order when the CLI accepts reordering, or identical quoting style when both
+forms are valid.
+
+Semantic equivalence does require the same executable, module path, subcommand
+entrypoint, flags, positional arguments, and default values.
+
+### Recommended Validation Pass
+
+1. Pick representative cards, including reordered segments and empty
+   `segments`.
+2. Open the HTML or run the panel preview builder; confirm each preview is
+   non-empty and shell-valid.
+3. Apply structural compliance to every default command.
+4. Apply semantic equivalence against project docs, not literal string equality.
+5. Confirm high-impact editable fields appear early in `segments`.
+
+## Updating Existing Panels
+
+When modifying an existing `cli-panel.html`:
+
+- Preserve user-added command groups, labels, descriptions, and parameter values
+  when they still map to the current CLI.
+- Update `fixedText` and parameter names to match the latest project command
+  format.
+- Remove stale parameters only when they no longer exist or are actively
+  misleading.
+- Add new required parameters with safe placeholder values.
+- Keep existing project-specific `localStorage` keys stable unless the user asks
+  for a clean reset.
+- If the panel still uses template keys, replace them with project-specific
+  keys.
+
+## Defaults
+
+The page has two persistent states:
+
+- Current state: saved automatically under the page's `storageKey`.
+- Saved default: set by the page's `Set as default` button under `defaultsKey`.
+
+When preparing a project-specific panel, edit `defaultState` in the HTML so a
+fresh browser starts with useful commands. Users can later make browser-local
+edits and set a new default from the UI.
diff --git a/skills/cli-panel/assets/cli-panel.html b/skills/cli-panel/assets/cli-panel.html
new file mode 100644
index 0000000..bb826c4
--- /dev/null
+++ b/skills/cli-panel/assets/cli-panel.html
@@ -0,0 +1,1159 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HTML as CLI Panel</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f7f8fb;
+      --panel: #ffffff;
+      --panel-soft: #f2f5f9;
+      --text: #18202f;
+      --muted: #667085;
+      --line: #dde3ec;
+      --line-strong: #c8d1de;
+      --primary: #2563eb;
+      --primary-dark: #1d4ed8;
+      --primary-soft: #eaf1ff;
+      --ok: #0f766e;
+      --danger: #b42318;
+      --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
+      --radius: 8px;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem),
+        linear-gradient(180deg, #fbfcff, var(--bg));
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      letter-spacing: 0;
+    }
+
+    button, input, textarea { font: inherit; }
+
+    button {
+      border: 0;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+    }
+
+    button:active { transform: translateY(1px); }
+
+    .app {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .hero { padding: 22px 0; }
+
+    .eyebrow {
+      margin: 0 0 8px;
+      color: var(--primary);
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+    h1, h2, h3, p { margin-top: 0; }
+
+    h1 {
+      margin-bottom: 8px;
+      font-size: 34px;
+      line-height: 1.08;
+    }
+
+    .subtitle {
+      max-width: 760px;
+      margin-bottom: 0;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-height: 38px;
+      padding: 8px 12px;
+      background: var(--primary);
+      color: #fff;
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    .btn:hover { background: var(--primary-dark); }
+    .btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--line); }
+    .btn.secondary:hover { border-color: var(--line-strong); background: #f8fafc; }
+    .btn.danger { background: #fff; color: var(--danger); border: 1px solid #f0c7c2; }
+    .btn.danger:hover { background: #fff5f3; }
+    .btn.favorite-btn.is-active {
+      background: #fffbeb;
+      color: #b45309;
+      border: 1px solid #fcd34d;
+    }
+    .btn.favorite-btn.is-active:hover { background: #fef3c7; }
+
+    .command-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+    }
+
+    .command-title h2 {
+      margin-bottom: 0;
+    }
+    .origin-pill {
+      display: inline-flex;
+      align-items: center;
+      min-height: 24px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: var(--panel-soft);
+      border: 1px solid var(--line);
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 650;
+    }
+
+    .shell {
+      display: grid;
+      grid-template-columns: 280px minmax(0, 1fr);
+      gap: 16px;
+      align-items: start;
+    }
+
+    .panel {
+      background: rgba(255, 255, 255, 0.92);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+    }
+
+    .sidebar {
+      position: sticky;
+      top: 18px;
+      overflow: hidden;
+    }
+
+    .sidebar-head {
+      padding: 16px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .sidebar-head h2 {
+      margin-bottom: 6px;
+      font-size: 16px;
+    }
+
+    .sidebar-head p {
+      margin-bottom: 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+
+    .tabs {
+      display: grid;
+      gap: 6px;
+      padding: 10px;
+    }
+
+    .tab {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px;
+      align-items: center;
+      width: 100%;
+      padding: 10px;
+      background: transparent;
+      color: var(--text);
+      text-align: left;
+      border: 1px solid transparent;
+    }
+
+    .tab.active {
+      background: var(--primary-soft);
+      border-color: #c9dcff;
+      color: #163f9f;
+    }
+
+    .tab.tab-favorites.active {
+      background: #fffbeb;
+      border-color: #fcd34d;
+      color: #92400e;
+    }
+
+    .tabs-divider {
+      height: 1px;
+      margin: 2px 10px 8px;
+      background: var(--line);
+    }
+
+    .tab small {
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .tab-count {
+      min-width: 26px;
+      padding: 2px 7px;
+      border-radius: 999px;
+      background: #fff;
+      border: 1px solid var(--line);
+      text-align: center;
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .content {
+      display: grid;
+      gap: 14px;
+    }
+
+    .toolbar {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: center;
+      padding: 14px;
+    }
+
+    .stats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 28px;
+      padding: 4px 9px;
+      border-radius: 999px;
+      background: var(--panel-soft);
+      border: 1px solid var(--line);
+    }
+
+    .status-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--ok);
+    }
+
+    .toolbar-actions,
+    .command-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: flex-end;
+      align-items: flex-start;
+    }
+
+    .order-controls {
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+    }
+
+    .order-btn {
+      min-width: 42px;
+      padding: 8px 10px;
+      font-size: 16px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .order-btn:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    .order-btn:disabled:hover {
+      background: var(--primary);
+    }
+
+    .commands {
+      display: grid;
+      gap: 14px;
+    }
+
+    .command-card {
+      overflow: hidden;
+    }
+
+    .command-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: start;
+      padding: 16px;
+      border-bottom: 1px solid var(--line);
+      background: linear-gradient(180deg, #ffffff, #fbfcff);
+    }
+
+    .fields {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .field {
+      display: grid;
+      gap: 5px;
+    }
+
+    .field.wide { grid-column: 1 / -1; }
+
+    label, .field span {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 650;
+    }
+
+    input, textarea {
+      width: 100%;
+      min-height: 36px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: #fff;
+      color: var(--text);
+      padding: 8px 10px;
+      outline: none;
+    }
+
+    textarea {
+      min-height: 74px;
+      resize: vertical;
+      line-height: 1.45;
+    }
+
+    input:focus, textarea:focus {
+      border-color: #8ab4ff;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+    }
+
+    .section {
+      padding: 16px;
+    }
+
+    .section-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .section-head h3 {
+      margin-bottom: 0;
+      font-size: 15px;
+    }
+
+    .param-list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .param-row {
+      display: grid;
+      grid-template-columns: minmax(140px, 1fr) minmax(130px, 1fr) 44px;
+      gap: 8px;
+      align-items: end;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: #fbfcff;
+    }
+
+    .icon-btn {
+      width: 36px;
+      min-height: 36px;
+      padding: 0;
+      background: #fff;
+      color: var(--danger);
+      border: 1px solid #f0c7c2;
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .preview {
+      margin: 0;
+      padding: 13px;
+      min-height: 74px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      border: 1px solid #cfd8e6;
+      border-radius: 8px;
+      background: #101827;
+      color: #e5eefc;
+      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+      font-size: 12px;
+      line-height: 1.55;
+    }
+
+    .empty {
+      padding: 28px;
+      text-align: center;
+      color: var(--muted);
+    }
+
+    .toast {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 10;
+      max-width: min(420px, calc(100vw - 36px));
+      padding: 11px 13px;
+      border-radius: 8px;
+      background: #111827;
+      color: #fff;
+      box-shadow: var(--shadow);
+      transform: translateY(16px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 160ms ease, transform 160ms ease;
+      font-size: 13px;
+    }
+
+    .toast.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .command-actions-col {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 8px;
+    }
+
+    .confirm-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 12px 14px;
+      background: #fff5f3;
+      border: 1px solid #f0c7c2;
+      border-radius: var(--radius);
+    }
+
+    .confirm-bar.is-hidden {
+      display: none;
+    }
+
+    .confirm-bar-inline {
+      width: max-content;
+      max-width: min(100%, 340px);
+    }
+
+    .content > .confirm-bar {
+      margin-bottom: 0;
+    }
+
+    .confirm-message {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.45;
+      color: var(--text);
+    }
+
+    .confirm-actions {
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    @media (max-width: 920px) {
+      .shell, .toolbar, .command-head {
+        grid-template-columns: 1fr;
+      }
+
+      .toolbar-actions, .command-actions {
+        justify-content: flex-start;
+      }
+
+      .command-actions-col {
+        align-items: flex-start;
+        width: 100%;
+      }
+
+      .confirm-bar-inline {
+        width: 100%;
+        max-width: none;
+      }
+
+      .sidebar {
+        position: static;
+      }
+
+      .tabs {
+        display: flex;
+        overflow-x: auto;
+      }
+
+      .tab {
+        min-width: 160px;
+      }
+    }
+
+    @media (max-width: 720px) {
+      .app { padding: 16px; }
+      h1 { font-size: 28px; }
+      .fields, .param-row {
+        grid-template-columns: 1fr;
+      }
+      .icon-btn {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header class="hero">
+      <div>
+        <p class="eyebrow">HTML as CLI Panel</p>
+        <h1>CLI Panel</h1>
+        <p class="subtitle">A static browser panel for project commands. It stores commands in this browser's localStorage, builds copyable CLI strings.</p>
+      </div>
+    </header>
+
+    <main class="shell">
+      <aside class="panel sidebar">
+        <div class="sidebar-head">
+          <h2>Command groups</h2>
+          <p>Star commands to pin them in Favorites. The Type / Tab field sets the regular left-side grouping.</p>
+        </div>
+        <nav class="tabs" id="tabs"></nav>
+      </aside>
+
+      <section class="content">
+        <div class="panel toolbar">
+          <div class="stats" id="stats"></div>
+          <div class="toolbar-actions">
+            <button class="btn secondary" id="saveAsDefault">Set as default</button>
+            <button class="btn danger" id="resetDefaults">Reset default</button>
+          </div>
+        </div>
+        <div class="panel confirm-bar is-hidden" id="resetConfirmBar">
+          <p class="confirm-message">Reset to your saved default? Current edits in this browser will be replaced.</p>
+          <div class="confirm-actions">
+            <button class="btn secondary" data-action="cancel-reset">Cancel</button>
+            <button class="btn danger" data-action="confirm-reset">Reset</button>
+          </div>
+        </div>
+        <div class="commands" id="commands"></div>
+      </section>
+    </main>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+  <script>
+    const storageKey = "REPLACE_WITH_PROJECT_SLUG.cli-panel.v1";
+    const defaultsKey = "REPLACE_WITH_PROJECT_SLUG.cli-panel.default.v1";
+    const FAVORITES_TAB = "__favorites__";
+    const FAVORITES_LABEL = "Favorites";
+    const defaultState = {
+      activeType: "group",
+      commands: [
+        {
+          id: crypto.randomUUID(),
+          type: "group",
+          label: "Template command",
+          description: "Replace this text with what the command does and when to use it.",
+          fixedText: "replace-with-command-prefix",
+          segments: [
+            { id: crypto.randomUUID(), name: "--option", value: "value", widget: "text" },
+            { id: crypto.randomUUID(), name: "--flag-without-value", value: "", widget: "text" }
+          ]
+        }
+      ]
+    };
+
+    let state = loadState();
+    let toastTimer = null;
+    let saveTimer = null;
+    const SAVE_DEBOUNCE_MS = 400;
+
+    const $ = (id) => document.getElementById(id);
+
+    function loadState() {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        if (saved) return normalizeState(JSON.parse(saved));
+      } catch (_) {}
+      return cloneDefaultState();
+    }
+
+    function cloneDefaultState() {
+      return normalizeState(JSON.parse(JSON.stringify(defaultState)));
+    }
+
+    function loadSavedDefaultState() {
+      try {
+        const saved = localStorage.getItem(defaultsKey);
+        if (saved) return normalizeState(JSON.parse(saved));
+      } catch (_) {}
+      return cloneDefaultState();
+    }
+
+    function saveCurrentAsDefault() {
+      localStorage.setItem(defaultsKey, JSON.stringify(normalizeState(state)));
+    }
+
+    function normalizeState(input) {
+      const normalized = {
+        activeType: typeof input.activeType === "string" ? input.activeType : "",
+        favoriteOrder: Array.isArray(input.favoriteOrder)
+          ? input.favoriteOrder.filter((id) => typeof id === "string")
+          : [],
+        commands: Array.isArray(input.commands) ? input.commands : []
+      };
+      normalized.commands = normalized.commands.map((command) => ({
+        id: command.id || crypto.randomUUID(),
+        type: String(command.type || "group"),
+        label: String(command.label || "Untitled command"),
+        description: String(command.description || ""),
+        fixedText: String(command.fixedText || ""),
+        favorite: Boolean(command.favorite),
+        segments: Array.isArray(command.segments) ? command.segments.map((segment) => ({
+          id: segment.id || crypto.randomUUID(),
+          name: String(segment.name || ""),
+          value: String(segment.value ?? ""),
+          widget: ["text", "number"].includes(segment.widget) ? segment.widget : "text"
+        })) : []
+      }));
+      syncFavoriteOrder(normalized);
+      if (!normalized.activeType && normalized.commands[0]) {
+        normalized.activeType = normalized.commands[0].type;
+      }
+      if (normalized.activeType === FAVORITES_LABEL) normalized.activeType = FAVORITES_TAB;
+      return normalized;
+    }
+
+    function syncFavoriteOrder(target = state) {
+      const favoriteIds = new Set(
+        target.commands.filter((command) => command.favorite).map((command) => command.id)
+      );
+      target.favoriteOrder = target.favoriteOrder.filter((id) => favoriteIds.has(id));
+      for (const command of target.commands) {
+        if (command.favorite && !target.favoriteOrder.includes(command.id)) {
+          target.favoriteOrder.push(command.id);
+        }
+      }
+    }
+
+    function saveState() {
+      localStorage.setItem(storageKey, JSON.stringify(state));
+    }
+
+    function scheduleSave() {
+      clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => saveState(), SAVE_DEBOUNCE_MS);
+    }
+
+    function flushSave() {
+      clearTimeout(saveTimer);
+      saveState();
+    }
+
+    function updateCardPreview(card, command) {
+      const preview = card.querySelector(".preview");
+      if (preview) preview.textContent = buildCommand(command);
+    }
+
+    function updateFavoriteButton(card, command) {
+      const button = card.querySelector('[data-action="toggle-favorite"]');
+      if (!button) return;
+      button.classList.toggle("is-active", command.favorite);
+      button.textContent = command.favorite ? "★ Favorited" : "☆ Favorite";
+    }
+
+    function handleTypeBlur(command, card) {
+      flushSave();
+      renderTabs();
+      renderStats();
+      if (state.activeType === FAVORITES_TAB) {
+        const badge = card.querySelector(".origin-pill");
+        if (badge) badge.textContent = command.type || "group";
+        return;
+      }
+      const type = command.type || "group";
+      if (type !== state.activeType) {
+        state.activeType = type;
+        saveState();
+        renderTabs();
+        renderCommands();
+      }
+    }
+
+    function showToast(message) {
+      const toast = $("toast");
+      toast.textContent = message;
+      toast.classList.add("show");
+      clearTimeout(toastTimer);
+      toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);
+    }
+
+    function closeResetConfirm() {
+      $("resetConfirmBar").classList.add("is-hidden");
+    }
+
+    function closeAllDeleteConfirms() {
+      for (const bar of document.querySelectorAll('[data-confirm="delete"]')) {
+        bar.classList.add("is-hidden");
+      }
+    }
+
+    function showDeleteConfirm(card) {
+      closeResetConfirm();
+      closeAllDeleteConfirms();
+      card.querySelector('[data-confirm="delete"]').classList.remove("is-hidden");
+    }
+
+    function splitFixedText(text) {
+      return String(text || "").match(/"[^"]*"|'[^']*'|\S+/g)?.map((token) => stripOuterQuote(token)) || [];
+    }
+
+    function stripOuterQuote(token) {
+      if ((token.startsWith('"') && token.endsWith('"')) || (token.startsWith("'") && token.endsWith("'"))) {
+        return token.slice(1, -1);
+      }
+      return token;
+    }
+
+    function quoteToken(token) {
+      const text = String(token ?? "");
+      if (text === "") return '""';
+      return /[\s"]/.test(text) ? `"${text.replaceAll('"', '\\"')}"` : text;
+    }
+
+    function buildCommand(command) {
+      const tokens = splitFixedText(command.fixedText);
+      for (const segment of command.segments) {
+        const name = segment.name.trim();
+        const value = String(segment.value ?? "");
+        if (name) tokens.push(name);
+        if (value !== "") tokens.push(value);
+      }
+      return tokens.map(quoteToken).join(" ");
+    }
+
+    function getRegularTypes() {
+      return [...new Set(state.commands.map((command) => command.type || "group"))];
+    }
+
+    function getTypes() {
+      return [FAVORITES_TAB, ...getRegularTypes()];
+    }
+
+    function favoriteCommands() {
+      const orderIndex = new Map(state.favoriteOrder.map((id, index) => [id, index]));
+      return state.commands
+        .filter((command) => command.favorite)
+        .sort((left, right) => {
+          const leftIndex = orderIndex.has(left.id) ? orderIndex.get(left.id) : Number.MAX_SAFE_INTEGER;
+          const rightIndex = orderIndex.has(right.id) ? orderIndex.get(right.id) : Number.MAX_SAFE_INTEGER;
+          return leftIndex - rightIndex;
+        });
+    }
+
+    function visibleCommands() {
+      if (state.activeType === FAVORITES_TAB) return favoriteCommands();
+      return state.commands.filter((command) => (command.type || "group") === state.activeType);
+    }
+
+    function moveCommandInView(command, delta) {
+      if (state.activeType === FAVORITES_TAB) {
+        moveInFavoriteOrder(command.id, delta);
+      } else {
+        moveInTypeGroup(command, delta);
+      }
+      flushSave();
+      renderCommands();
+    }
+
+    function moveInFavoriteOrder(commandId, delta) {
+      const index = state.favoriteOrder.indexOf(commandId);
+      if (index === -1) return;
+      const targetIndex = index + delta;
+      if (targetIndex < 0 || targetIndex >= state.favoriteOrder.length) return;
+      const order = state.favoriteOrder;
+      [order[index], order[targetIndex]] = [order[targetIndex], order[index]];
+    }
+
+    function moveInTypeGroup(command, delta) {
+      const type = command.type || "group";
+      const indices = state.commands
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => (item.type || "group") === type)
+        .map(({ index }) => index);
+      const currentIndex = state.commands.indexOf(command);
+      const position = indices.indexOf(currentIndex);
+      if (position === -1) return;
+      const targetPosition = position + delta;
+      if (targetPosition < 0 || targetPosition >= indices.length) return;
+      const fromIndex = indices[position];
+      const toIndex = indices[targetPosition];
+      [state.commands[fromIndex], state.commands[toIndex]] = [state.commands[toIndex], state.commands[fromIndex]];
+    }
+
+    function toggleFavorite(command) {
+      command.favorite = !command.favorite;
+      if (command.favorite) {
+        if (!state.favoriteOrder.includes(command.id)) state.favoriteOrder.push(command.id);
+      } else {
+        state.favoriteOrder = state.favoriteOrder.filter((id) => id !== command.id);
+      }
+      flushSave();
+      renderTabs();
+      renderStats();
+      const card = document.querySelector(`[data-command-id="${command.id}"]`);
+      if (state.activeType === FAVORITES_TAB) {
+        if (!command.favorite) {
+          renderCommands();
+        } else if (card) {
+          updateFavoriteButton(card, command);
+        }
+      } else if (card) {
+        updateFavoriteButton(card, command);
+      }
+      showToast(command.favorite ? "Added to Favorites" : "Removed from Favorites");
+    }
+
+    async function copyText(text, message) {
+      if (!text.trim()) {
+        showToast("Nothing to copy");
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch (_) {
+        const box = document.createElement("textarea");
+        box.value = text;
+        box.style.position = "fixed";
+        box.style.left = "-9999px";
+        document.body.appendChild(box);
+        box.focus();
+        box.select();
+        document.execCommand("copy");
+        box.remove();
+      }
+      showToast(message || "Copied");
+    }
+
+    function render() {
+      ensureActiveType();
+      renderTabs();
+      renderStats();
+      renderCommands();
+    }
+
+    function ensureActiveType() {
+      const types = getTypes();
+      if (!types.includes(state.activeType)) state.activeType = types[0] || "";
+    }
+
+    function renderTabs() {
+      const tabs = $("tabs");
+      tabs.innerHTML = "";
+
+      const favoritesCount = favoriteCommands().length;
+      const favoritesButton = document.createElement("button");
+      favoritesButton.className = "tab tab-favorites" + (state.activeType === FAVORITES_TAB ? " active" : "");
+      favoritesButton.innerHTML = `<span><strong>${escapeHtml(FAVORITES_LABEL)}</strong><br><small>Pinned commands</small></span><span class="tab-count">${favoritesCount}</span>`;
+      favoritesButton.onclick = () => {
+        state.activeType = FAVORITES_TAB;
+        saveState();
+        render();
+      };
+      tabs.append(favoritesButton);
+
+      const divider = document.createElement("div");
+      divider.className = "tabs-divider";
+      divider.setAttribute("aria-hidden", "true");
+      tabs.append(divider);
+
+      for (const type of getRegularTypes()) {
+        const commands = state.commands.filter((command) => command.type === type);
+        const button = document.createElement("button");
+        button.className = "tab" + (type === state.activeType ? " active" : "");
+        button.innerHTML = `<span><strong>${escapeHtml(type)}</strong><br><small>${commands.length} command${commands.length === 1 ? "" : "s"}</small></span><span class="tab-count">${commands.length}</span>`;
+        button.onclick = () => {
+          state.activeType = type;
+          saveState();
+          render();
+        };
+        tabs.append(button);
+      }
+    }
+
+    function renderStats() {
+      const commandCount = state.commands.length;
+      const favoriteCount = favoriteCommands().length;
+      const paramCount = state.commands.reduce((sum, command) => sum + command.segments.length, 0);
+      $("stats").innerHTML = `
+        <span class="pill"><span class="status-dot"></span> Autosaved</span>
+        <span class="pill">${commandCount} command${commandCount === 1 ? "" : "s"}</span>
+        <span class="pill">${favoriteCount} favorite${favoriteCount === 1 ? "" : "s"}</span>
+        <span class="pill">${paramCount} parameter${paramCount === 1 ? "" : "s"}</span>
+        <span class="pill">Storage: localStorage</span>
+      `;
+    }
+
+    function renderCommands() {
+      closeResetConfirm();
+      closeAllDeleteConfirms();
+      const root = $("commands");
+      root.innerHTML = "";
+      const commands = visibleCommands();
+      if (!commands.length) {
+        const empty = document.createElement("div");
+        empty.className = "panel empty";
+        if (state.activeType === FAVORITES_TAB) {
+          empty.innerHTML = "<h2>No favorites yet</h2><p>Click the star on any command to pin it here for quick access.</p>";
+        } else {
+          empty.innerHTML = "<h2>No commands in this group</h2><p>Edit a command type or duplicate an existing command to populate this group.</p>";
+        }
+        root.append(empty);
+        return;
+      }
+      for (let index = 0; index < commands.length; index++) {
+        root.append(renderCommand(commands[index], index, commands.length));
+      }
+    }
+
+    function renderCommand(command, index, total) {
+      const card = document.createElement("article");
+      card.className = "panel command-card";
+      card.dataset.commandId = command.id;
+      const inFavoritesView = state.activeType === FAVORITES_TAB;
+      const originBadge = inFavoritesView
+        ? `<span class="origin-pill">${escapeHtml(command.type || "group")}</span>`
+        : "";
+      const favoriteLabel = command.favorite ? "★ Favorited" : "☆ Favorite";
+      const canMoveUp = index > 0;
+      const canMoveDown = index < total - 1;
+
+      card.innerHTML = `
+        <div class="command-head">
+          <div>
+            <div class="command-title">
+              <h2>${escapeHtml(command.label)}</h2>
+              ${originBadge}
+            </div>
+            <div class="fields">
+              <label class="field">
+                <span>Command name</span>
+                <input data-field="label" type="text" value="${escapeAttr(command.label)}">
+              </label>
+              <label class="field">
+                <span>Type / Tab</span>
+                <input data-field="type" type="text" value="${escapeAttr(command.type)}">
+              </label>
+              <label class="field wide">
+                <span>Effect</span>
+                <textarea data-field="description" spellcheck="false">${escapeHtml(command.description)}</textarea>
+              </label>
+              <label class="field wide">
+                <span>Fixed prefix</span>
+                <textarea data-field="fixedText" spellcheck="false">${escapeHtml(command.fixedText)}</textarea>
+              </label>
+            </div>
+          </div>
+          <div class="command-actions-col">
+            <div class="command-actions">
+              <div class="order-controls">
+                <button class="btn order-btn" data-action="move-up" title="Move up" ${canMoveUp ? "" : "disabled"}>↑</button>
+                <button class="btn order-btn" data-action="move-down" title="Move down" ${canMoveDown ? "" : "disabled"}>↓</button>
+              </div>
+              <button class="btn secondary favorite-btn${command.favorite ? " is-active" : ""}" data-action="toggle-favorite">${favoriteLabel}</button>
+              <button class="btn secondary" data-action="duplicate-command">Duplicate</button>
+              <button class="btn" data-action="copy-command">Copy command</button>
+              <button class="btn danger" data-action="delete-command">Delete</button>
+            </div>
+            <div class="confirm-bar confirm-bar-inline is-hidden" data-confirm="delete">
+              <p class="confirm-message">Delete <strong>${escapeHtml(command.label)}</strong>?</p>
+              <div class="confirm-actions">
+                <button class="btn secondary" data-action="cancel-delete">Cancel</button>
+                <button class="btn danger" data-action="confirm-delete">Delete</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="section-head">
+            <h3>Parameters</h3>
+            <button class="btn secondary" data-action="add-param">Add parameter</button>
+          </div>
+          <div class="param-list"></div>
+        </div>
+        <div class="section">
+          <div class="section-head">
+            <h3>Command preview</h3>
+          </div>
+          <pre class="preview"></pre>
+        </div>
+      `;
+
+      for (const input of card.querySelectorAll("[data-field]")) {
+        const field = input.dataset.field;
+        input.oninput = (event) => {
+          command[field] = event.target.value;
+          if (field === "label") {
+            card.querySelector(".command-title h2").textContent = command.label;
+          } else if (field === "fixedText") {
+            updateCardPreview(card, command);
+          } else if (field === "type" && inFavoritesView) {
+            const badge = card.querySelector(".origin-pill");
+            if (badge) badge.textContent = command.type || "group";
+          }
+          scheduleSave();
+        };
+        input.onblur = () => {
+          if (field === "type") handleTypeBlur(command, card);
+          else flushSave();
+        };
+      }
+      card.querySelector('[data-action="move-up"]').onclick = () => moveCommandInView(command, -1);
+      card.querySelector('[data-action="move-down"]').onclick = () => moveCommandInView(command, 1);
+      card.querySelector('[data-action="toggle-favorite"]').onclick = () => toggleFavorite(command);
+      card.querySelector('[data-action="copy-command"]').onclick = () => copyText(buildCommand(command), "Command copied");
+      card.querySelector('[data-action="duplicate-command"]').onclick = () => {
+        const copy = JSON.parse(JSON.stringify(command));
+        copy.id = crypto.randomUUID();
+        copy.label = `${copy.label} copy`;
+        copy.favorite = false;
+        copy.segments = copy.segments.map((segment) => ({ ...segment, id: crypto.randomUUID() }));
+        state.commands.splice(state.commands.indexOf(command) + 1, 0, copy);
+        commit("Command duplicated");
+      };
+      card.querySelector('[data-action="delete-command"]').onclick = () => showDeleteConfirm(card);
+      card.querySelector('[data-action="cancel-delete"]').onclick = () => {
+        card.querySelector('[data-confirm="delete"]').classList.add("is-hidden");
+      };
+      card.querySelector('[data-action="confirm-delete"]').onclick = () => {
+        state.commands = state.commands.filter((item) => item.id !== command.id);
+        state.favoriteOrder = state.favoriteOrder.filter((id) => id !== command.id);
+        commit("Command deleted");
+      };
+      card.querySelector('[data-action="add-param"]').onclick = () => {
+        const segment = {
+          id: crypto.randomUUID(),
+          name: "--new-option",
+          value: "",
+          widget: "text"
+        };
+        command.segments.push(segment);
+        card.querySelector(".param-list").append(renderParamRow(command, segment, card));
+        updateCardPreview(card, command);
+        renderStats();
+        flushSave();
+        showToast("Parameter added");
+      };
+
+      const list = card.querySelector(".param-list");
+      for (const segment of command.segments) {
+        list.append(renderParamRow(command, segment, card));
+      }
+      updateCardPreview(card, command);
+      return card;
+    }
+
+    function renderParamRow(command, segment, card) {
+      const row = document.createElement("div");
+      row.className = "param-row";
+      row.innerHTML = `
+        <label class="field">
+          <span>Parameter name</span>
+          <input data-field="name" type="text" value="${escapeAttr(segment.name)}">
+        </label>
+        <label class="field">
+          <span>Parameter value</span>
+          <input data-field="value" type="${segment.widget === "number" ? "number" : "text"}" value="${escapeAttr(segment.value)}">
+        </label>
+        <button class="icon-btn" data-action="delete-param" title="Delete parameter">x</button>
+      `;
+      for (const input of row.querySelectorAll("[data-field]")) {
+        const field = input.dataset.field;
+        input.oninput = input.onchange = (event) => {
+          segment[field] = event.target.value;
+          updateCardPreview(card, command);
+          scheduleSave();
+        };
+        input.onblur = () => flushSave();
+      }
+      row.querySelector('[data-action="delete-param"]').onclick = () => {
+        command.segments = command.segments.filter((item) => item.id !== segment.id);
+        row.remove();
+        updateCardPreview(card, command);
+        renderStats();
+        flushSave();
+        showToast("Parameter deleted");
+      };
+      return row;
+    }
+
+    function commit(message) {
+      flushSave();
+      render();
+      if (message) showToast(message);
+    }
+
+    function escapeHtml(value) {
+      return String(value ?? "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+    }
+
+    function escapeAttr(value) {
+      return escapeHtml(value).replaceAll("'", "&#39;");
+    }
+
+    $("saveAsDefault").onclick = () => {
+      saveCurrentAsDefault();
+      showToast("Current state saved as default");
+    };
+
+    $("resetDefaults").onclick = () => {
+      closeAllDeleteConfirms();
+      $("resetConfirmBar").classList.remove("is-hidden");
+    };
+
+    $("resetConfirmBar").querySelector('[data-action="cancel-reset"]').onclick = () => closeResetConfirm();
+
+    $("resetConfirmBar").querySelector('[data-action="confirm-reset"]').onclick = () => {
+      state = loadSavedDefaultState();
+      saveState();
+      closeResetConfirm();
+      render();
+      showToast("Reset to default");
+    };
+
+    saveState();
+    render();
+  </script>
+</body>
+</html>