opencode-goal-mode 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## v0.3.7
+
+- **FIX: the sidebar now actually loads.** OpenCode loads a TUI plugin via the
+  package's `exports["./tui"]` subpath (verified against the OpenCode binary), and
+  ours had no `exports`, so it silently never loaded. The package now maps
+  `"./tui"` (and `main`) to `plugins/goal-sidebar.tsx`, and the entry is shipped as
+  `.tsx` so OpenCode transpiles it. Confirmed working in a real OpenCode 1.17.6 TUI.
+- **Sidebar layout, as requested:** three stacked lines — `GOAL  <title>`, then the
+  gate count (`n/m gates`), then the status (`in progress` / `… · changes pending`
+  / `completed · k review cycles`). The leading orb (◆) is removed.
+- **AI-generated goal title:** `goal_contract` takes a short `title` the Goal agent
+  writes (the objective, like a session title); the sidebar shows it, falling back
+  to the raw goal text until titled.
+- **One-command install:** `npx opencode-goal-mode --global` (new `opencode-goal-mode`
+  bin alias). The installer registers the sidebar in `tui.json` (merge-safe) and
+  `--uninstall` removes that entry too. Install instructions moved to the top of the
+  README.
+- Colours configurable: `sidebarColor` (running), `sidebarDoneColor` (done),
+  `sidebarMutedColor` (no goal).
+
+## v0.3.6
+
+- **FIX: the sidebar never loaded.** TUI plugins are loaded from
+  `~/.config/opencode/tui.json` — NOT the `plugins/` dir (that is server plugins
+  only). The installer never created tui.json, so OpenCode never loaded the
+  sidebar (it only showed the session title + context). The installer now
+  registers the sidebar in `tui.json` (`plugin: ["opencode-goal-mode"]`,
+  merge-safe), and the package `main` points at the TUI plugin so OpenCode loads
+  it with its `@opentui/solid` runtime. Confirmed OpenCode reads tui.json.
+- **Sidebar behaviour, as requested:** under the sidebar's content/"context"
+  area it now shows the goal with generated status text, colour-coded by
+  lifecycle: **yellow** while the goal is running, **red** when it is done (all
+  required gates pass, tree clean), and **grey "No goal available"** when a task
+  is running with no goal set. New `sidebarDoneColor` option
+  (`GOAL_GUARD_SIDEBAR_DONE_COLOR`, default `#FF5555`).
+- `summary.sidebarView` now returns `{ state: "none"|"running"|"done", goal,
+  detail }`; the headless visual test renders and asserts all three states (text
+  + exact colours), 18/18.
+
 ## v0.3.5
 
 - Verified the package against the **current** OpenCode plugin API

package/README.md

@@ -8,17 +8,49 @@
 [![node](https://img.shields.io/node/v/opencode-goal-mode?color=2da44e)](package.json)
 
 Strict Goal Mode for OpenCode: a primary `goal` agent, a matrix of specialized
-review subagents, slash commands, and a `goal-guard` plugin that enforces review
-discipline, blocks destructive shell commands, and preserves goal state across
-compaction **and** restarts.
+review subagents, slash commands, a `goal-guard` plugin that enforces review
+discipline and blocks destructive shell commands, and a live goal banner in the
+TUI sidebar.
+
+## Install
+
+**One command** (needs [Node](https://nodejs.org) 20.11+ and [OpenCode](https://opencode.ai)):
 
 ```bash
-npm install -g opencode-goal-mode && opencode-goal-mode-install --global
+npx opencode-goal-mode --global
 ```
 
+Then **restart OpenCode**. That's the whole install — it copies the Goal agent,
+review subagents, slash commands, and the guard plugin into `~/.config/opencode`,
+and registers the sidebar in `~/.config/opencode/tui.json`. In the agent picker
+you'll see only the **`goal`** agent (the reviewers are subagents it drives).
+
+<details>
+<summary>Other ways to install</summary>
+
+```bash
+# Global npm install, then run the installer
+npm install -g opencode-goal-mode
+opencode-goal-mode --global          # alias of opencode-goal-mode-install
+
+# Into a single project (writes ./.opencode + ./tui.json)
+npx opencode-goal-mode
+
+# From source
+git clone https://github.com/devinoldenburg/opencode-goal-mode
+cd opencode-goal-mode && npm ci && npm run install:global
+```
+
+`--dry-run` previews changes; `--uninstall` removes only what it installed (and its
+tui.json entry), leaving your edits untouched. See [Installer options](#installer-options).
+</details>
+
 ![OpenCode Goal Mode sidebar banner](docs/sidebar-demo.svg)
 
-**[Quick start](#quick-start) · [Install](#install) · [Why it's different](#why-its-different) · [Benchmarks](#benchmarks-honest-edition) · [TUI integration](#tui-integration) · [Configuration](#configuration) · [Releasing](#releasing) · [Architecture](ARCHITECTURE.md)**
+<sub>↑ The sidebar goal banner: yellow while a goal runs, red when done, grey "No
+goal available" otherwise — see [TUI integration](#tui-integration).</sub>
+
+**[Quick start](#quick-start) · [Why it's different](#why-its-different) · [Benchmarks](#benchmarks-honest-edition) · [TUI integration](#tui-integration) · [Configuration](#configuration) · [Releasing](#releasing) · [Architecture](ARCHITECTURE.md)**
 
 ## Quick start
 
@@ -172,62 +204,35 @@ Goal Mode is a **plugin pair**: the server-side `goal-guard` plugin owns
 enforcement and writes its state to disk, and an experimental TUI plugin
 (`plugins/goal-sidebar.js`) reads that same state to render a live banner.
 
-- **Sidebar goal banner (experimental).** The current goal renders in shining
-  yellow in the sidebar (`sidebar_content` slot), with a `passing/total gates ·
-  dirty/ready` status line, and updates as reviews land. When a task is running
-  but **no goal is set**, it shows a clean grey `No goal`. Set
-  `sidebarBanner: false` (or `GOAL_GUARD_SIDEBAR_BANNER=0`) to disable,
-  `sidebarColor` to recolour the goal, or `sidebarMutedColor` for the "No goal"
-  line.
-
-  **Verification status, honestly:** the component is rendered and asserted
-  (text + exact colours) by a real headless OpenTUI renderer in the
-  [visual test](tools/visual-test/README.md) (`npm run test:visual`, 17/17), and
-  OpenCode discovers and boots it as a plugin without error. It needs a recent
-  OpenCode that mounts file-based TUI plugins into the `sidebar_content` slot and
-  provides the `@opentui/solid` runtime; on a build without that, it simply does
-  not appear (it never errors or breaks the TUI — the enforcement core is a
-  separate server plugin and is unaffected). The banner appears in a **session**
-  view, not the home screen. If it doesn't show, that's the TUI-plugin runtime,
-  not Goal Mode's enforcement.
+- **Sidebar goal banner.** In the sidebar's content area, under the session
+  title/context, it shows the current goal with generated status text, colour-coded
+  by lifecycle:
+  - **yellow** — a goal is set and running (`◆ GOAL …` + `in progress · N/M gates`);
+  - **red** — the goal is done (all required gates pass, tree clean: `✓ GOAL …` +
+    `completed · N/M gates passed · K review cycles`);
+  - **grey** — a task is running with no goal set (`No goal available`).
+
+  Toggle/recolour with `sidebarBanner`, `sidebarColor` (running), `sidebarDoneColor`
+  (done), `sidebarMutedColor` (no goal), or the `GOAL_GUARD_SIDEBAR_*` env vars.
+
+  **How it loads — important.** TUI plugins are **not** loaded from the `plugins/`
+  dir; OpenCode loads them from `~/.config/opencode/tui.json`. The installer writes
+  that for you (merge-safe):
+
+  ```json
+  { "$schema": "https://opencode.ai/tui.json", "plugin": ["opencode-goal-mode"] }
+  ```
+
+  Restart OpenCode after install so it picks up the TUI plugin (it resolves the
+  package and provides the `@opentui/solid` runtime). The banner appears in a
+  **session** view (not the home screen). The three states are rendered and
+  asserted — text + exact colours — by a real headless OpenTUI renderer in the
+  [visual test](tools/visual-test/README.md) (`npm run test:visual`, 18/18). The
+  enforcement core is a separate server plugin and works regardless of the sidebar.
 - **Toasts.** Review verdicts and completion-unlock events surface as toasts
   (`toastOnReview`), and blocked destructive commands / premature completions
   toast as before (`toastOnBlock`).
 
-## Install
-
-### From npm (recommended)
-
-```bash
-npm install -g opencode-goal-mode
-opencode-goal-mode-install --global    # installs into ~/.config/opencode
-```
-
-Then restart OpenCode (it loads agents, commands, and plugins at startup). In the
-agent picker you will see **only the `goal` agent** — the specialist reviewers are
-subagents the Goal agent drives for you; they are never selectable by the user.
-
-Install into a single project instead of globally:
-
-```bash
-npm install -D opencode-goal-mode
-npx opencode-goal-mode-install         # writes to ./.opencode
-```
-
-Upgrade later by re-running the same install command after `npm install -g
-opencode-goal-mode@latest`; the installer replaces only the files it owns and
-leaves your local edits alone (see [Installer options](#installer-options)).
-
-### From source
-
-```bash
-git clone https://github.com/devinoldenburg/opencode-goal-mode
-cd opencode-goal-mode
-npm ci
-npm run validate
-npm run install:global                 # or: npm run install:local
-```
-
 ## Installer options
 
 ```bash
@@ -270,8 +275,9 @@ Or via environment variables (`GOAL_GUARD_*`):
 | `toastOnBlock` / `GOAL_GUARD_TOAST_ON_BLOCK` | `true` | Toast when something is blocked. |
 | `toastOnReview` / `GOAL_GUARD_TOAST_ON_REVIEW` | `true` | Toast on each review verdict and when completion unlocks. |
 | `sidebarBanner` / `GOAL_GUARD_SIDEBAR_BANNER` | `true` | Show the experimental yellow goal banner in the TUI sidebar. |
-| `sidebarColor` / `GOAL_GUARD_SIDEBAR_COLOR` | `#FFD700` | Foreground colour of the sidebar goal banner. |
-| `sidebarMutedColor` / `GOAL_GUARD_SIDEBAR_MUTED_COLOR` | `#808080` | Colour of the muted "No goal" line when no goal is set. |
+| `sidebarColor` / `GOAL_GUARD_SIDEBAR_COLOR` | `#FFD700` | Colour of a **running** goal in the sidebar (yellow). |
+| `sidebarDoneColor` / `GOAL_GUARD_SIDEBAR_DONE_COLOR` | `#FF5555` | Colour of a **done** goal in the sidebar (red). |
+| `sidebarMutedColor` / `GOAL_GUARD_SIDEBAR_MUTED_COLOR` | `#808080` | Colour of the "No goal available" line (grey). |
 
 ## Custom tools
 

package/agents/goal.md

@@ -85,7 +85,7 @@ Required internal artifacts:
 
 Guard tools (provided by the goal-guard plugin):
 
-- Call `goal_contract` once the Goal Contract is settled. This activates strict enforcement and tells the guard which specialist review gates your goal requires (security, data, api, perf, etc., inferred from the contract text).
+- Call `goal_contract` once the Goal Contract is settled. Always include a concise `title` (max ~8 words, no trailing punctuation) that captures what the user ultimately wants — phrased like a session title but about the objective (e.g. "Rate-limit the login endpoint", "Migrate auth to JWT"). This title is shown live in the TUI sidebar, so make it specific and readable. Recording the contract activates strict enforcement and tells the guard which specialist review gates your goal requires (security, data, api, perf, etc., inferred from the contract text).
 - Call `goal_evidence` after each meaningful verification run to record the command and result in the Verification Ledger.
 - Call `goal_status` whenever you are unsure what the guard currently requires; it returns the authoritative list of passing, missing, and stale gates and whether completion is allowed. Trust it over your own recollection.
 - The guard injects a live state block into your context each turn and will rewrite a premature `Goal Completed` into `Goal Not Completed` with the missing gates. Use `goal_status` to avoid that rather than guessing.

package/commands/goal.md

@@ -11,11 +11,12 @@ $ARGUMENTS
 
 Run this sequence:
 
-1. **Seed the contract first.** Call the `goal_contract` tool with the original
-   request, explicit/inferred requirements, non-goals, and concrete acceptance
-   criteria. This activates enforcement, fixes the required specialist review
-   gates, and lights up the goal banner in the sidebar. Ask only essential
-   clarifying questions before recording it.
+1. **Seed the contract first.** Call the `goal_contract` tool with a concise
+   `title` (≤8 words, what the user ultimately wants — like a session title for
+   the objective), the original request, explicit/inferred requirements,
+   non-goals, and concrete acceptance criteria. This activates enforcement, fixes
+   the required specialist review gates, and shows the `title` live in the sidebar
+   goal banner. Ask only essential clarifying questions before recording it.
 2. Delegate discovery and research to subagents; implement in the main agent.
 3. Verify, and record each verification with the `goal_evidence` tool so it maps
    to your acceptance criteria.

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "opencode-goal-mode",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Strict Goal Mode agents, commands, and guard plugin for OpenCode.",
   "type": "module",
+  "main": "plugins/goal-sidebar.tsx",
+  "exports": {
+    ".": "./plugins/goal-sidebar.tsx",
+    "./tui": "./plugins/goal-sidebar.tsx",
+    "./package.json": "./package.json"
+  },
   "engines": {
     "node": ">=20.11"
   },
   "packageManager": "npm@10",
   "bin": {
+    "opencode-goal-mode": "scripts/install.mjs",
     "opencode-goal-mode-install": "scripts/install.mjs"
   },
   "files": [

package/plugins/goal-guard/config.js

@@ -32,7 +32,9 @@ export const DEFAULT_CONFIG = Object.freeze({
   sidebarBanner: true,
   /** Foreground colour (hex) for the sidebar goal banner. */
   sidebarColor: "#FFD700",
-  /** Foreground colour (hex) for the muted "No goal" sidebar line. */
+  /** Foreground colour (hex) for a completed goal in the sidebar (running → done turns yellow → red). */
+  sidebarDoneColor: "#FF5555",
+  /** Foreground colour (hex) for the muted "No goal available" sidebar line. */
   sidebarMutedColor: "#808080",
   /** Phrase that, at the start of an assistant message, claims completion. */
   completionMarker: "Goal Completed",
@@ -70,6 +72,7 @@ function fromEnv(env) {
     GOAL_GUARD_TOAST_ON_REVIEW: ["toastOnReview", coerceBool],
     GOAL_GUARD_SIDEBAR_BANNER: ["sidebarBanner", coerceBool],
     GOAL_GUARD_SIDEBAR_COLOR: ["sidebarColor", (v) => (v == null ? undefined : String(v))],
+    GOAL_GUARD_SIDEBAR_DONE_COLOR: ["sidebarDoneColor", (v) => (v == null ? undefined : String(v))],
     GOAL_GUARD_SIDEBAR_MUTED_COLOR: ["sidebarMutedColor", (v) => (v == null ? undefined : String(v))],
   };
   for (const [key, [field, coerce]] of Object.entries(map)) {

package/plugins/goal-guard/summary.js

@@ -6,12 +6,18 @@
 import { requiredGates, missingGates, gatePassedFresh } from "./gates.js";
 
 /**
- * A short, single-line human label for the current goal — preferring the
- * recorded Goal Contract's original request, falling back to the captured goal
- * text. Collapses whitespace and truncates to `max` chars for compact display
- * (status reports, the TUI sidebar banner).
+ * A short, single-line label for the current goal.
+ *
+ * Prefers `contract.title` — a concise, AI-generated summary of the objective
+ * (what the user wants), written by the Goal agent when it records the contract
+ * via `goal_contract` (think "session title", but the goal/objective). Falls back
+ * to the contract's original request, then the captured goal text, so something
+ * sensible still shows before the agent has titled the goal. Collapses whitespace
+ * and truncates to `max` chars for the compact sidebar.
  */
 export function shortGoalLabel(state, max = 80) {
+  const title = String(state?.contract?.title || "").replace(/\s+/g, " ").trim();
+  if (title) return title.length <= max ? title : `${title.slice(0, max - 1).trimEnd()}…`;
   const raw = String(state?.contract?.original || state?.goalText || "").replace(/\s+/g, " ").trim();
   if (!raw) return "";
   // Prefer the first sentence/clause if it is reasonably short.
@@ -21,14 +27,18 @@ export function shortGoalLabel(state, max = 80) {
   return `${base.slice(0, max - 1).trimEnd()}…`;
 }
 
-/** Sentinel for "a task is running but no goal is set" — the sidebar shows a muted "No goal". */
-export const NO_GOAL = Object.freeze({ hasGoal: false });
+/** Sentinel for "a task is running but no goal is set" — the sidebar shows a muted "No goal available". */
+export const NO_GOAL = Object.freeze({ state: "none", goal: "", gates: "", status: "" });
 
 /**
- * Compact projection for the TUI sidebar banner. ALWAYS returns an object so the
- * sidebar can render unconditionally:
- *   - `{ hasGoal: false }` when no active goal is set (render a muted "No goal").
- *   - `{ hasGoal: true, goal, status, … }` when a goal is active (render in colour).
+ * Compact projection for the TUI sidebar banner. ALWAYS returns an object with a
+ * three-way `state`, plus three lines that stack vertically in the sidebar:
+ *   - `goal`   → line 1: the short AI goal title.
+ *   - `gates`  → line 2: the gate count, e.g. "0/7 gates".
+ *   - `status` → line 3: the lifecycle status, e.g. "in progress · changes pending"
+ *                or "completed · 2 review cycles".
+ * State drives colour: "running" = yellow, "done" = red, "none" = grey
+ * ("No goal available").
  */
 export function sidebarView(state, config) {
   if (!state || !state.active) return NO_GOAL;
@@ -37,9 +47,30 @@ export function sidebarView(state, config) {
   const required = requiredGates(state, config);
   const missing = missingGates(state, config);
   const passing = required.length - missing.length;
-  const allowed = required.length > 0 && missing.length === 0 && !state.dirty;
-  const status = `${passing}/${required.length} gates` + (state.dirty ? " · dirty" : "") + (allowed ? " · ready" : "");
-  return { hasGoal: true, goal, status, allowed, reviewCycles: state.reviewCycles, passing, required: required.length, dirty: Boolean(state.dirty) };
+  const cycles = Number(state.reviewCycles) || 0;
+  const gates = `${passing}/${required.length} gates`;
+  const done = required.length > 0 && missing.length === 0 && !state.dirty;
+  if (done) {
+    return {
+      state: "done",
+      goal,
+      gates,
+      status: `completed · ${cycles} review cycle${cycles === 1 ? "" : "s"}`,
+      passing,
+      required: required.length,
+      reviewCycles: cycles,
+    };
+  }
+  return {
+    state: "running",
+    goal,
+    gates,
+    status: `in progress${state.dirty ? " · changes pending" : ""}`,
+    passing,
+    required: required.length,
+    reviewCycles: cycles,
+    dirty: Boolean(state.dirty),
+  };
 }
 
 export function summarizeState(state, config) {

package/plugins/goal-guard/tools.js

@@ -92,6 +92,13 @@ export function createGoalTools({ store, config, persist }) {
         "inferred requirements, non-goals, and acceptance criteria). Establishing a contract " +
         "activates strict goal enforcement and drives which specialist review gates are required.",
       args: {
+        title: s
+          .string()
+          .describe(
+            "A short (max ~8 words) human-friendly title summarizing the GOAL/objective — what the user " +
+              "ultimately wants, phrased like a session title but about the outcome. Shown in the TUI sidebar. " +
+              "e.g. 'Rate-limit the login endpoint', 'Migrate auth to JWT'. No trailing punctuation.",
+          ),
         original: s.string().describe("The original user request, verbatim or faithfully summarized."),
         requirements: s.array(s.string()).optional().describe("Explicit requirements stated by the user."),
         inferred: s.array(s.string()).optional().describe("Reasonable inferred requirements."),
@@ -104,6 +111,7 @@ export function createGoalTools({ store, config, persist }) {
         const state = store.stateFor(ctx.sessionID);
         state.active = true;
         state.contract = {
+          title: String(args.title || "").replace(/\s+/g, " ").trim(),
           original: String(args.original || ""),
           requirements: args.requirements || [],
           inferred: args.inferred || [],

package/plugins/{goal-sidebar.js → goal-sidebar.tsx}

@@ -1,38 +1,33 @@
 /** @jsxImportSource @opentui/solid */
 /**
- * Goal Mode — experimental TUI sidebar banner.
+ * Goal Mode — TUI sidebar goal banner.
  *
- * EXPERIMENTAL. This is a TUI plugin module (the companion to the server-side
- * goal-guard plugin). It renders the current goal as a short, shining-yellow
- * banner in the OpenCode sidebar, with a compact `passing/total gates ·
- * dirty/ready` status line, and updates as reviews land.
+ * Renders, in the sidebar's content area, the current goal as three stacked lines:
+ *   1. `GOAL  <short AI title>`   (the objective, generated by the Goal agent)
+ *   2. `<n>/<m> gates`            (review-gate progress)
+ *   3. `<status>`                 (in progress / changes pending / completed …)
+ * Colour tracks lifecycle: yellow while running, red when done, grey
+ * "No goal available" when a task has no goal set.
  *
- * It only does anything inside a TUI-plugin-capable OpenCode (one exposing
- * `api.slots.register`). On any older runtime, missing API, or render error it
- * silently no-ops — it can never break your TUI.
+ * How OpenCode loads this: TUI plugins are listed in `~/.config/opencode/tui.json`
+ * (NOT the plugins/ dir) and resolved via the package's `exports["./tui"]`. The
+ * installer writes tui.json (`plugin: ["opencode-goal-mode"]`); package.json maps
+ * `./tui` → this file; OpenCode supplies the `@opentui/solid` + `solid-js` runtime
+ * (declared as peer deps). The pure projection (`summary.sidebarView`) is shared
+ * with the server plugin and unit-tested via goal-guard/sidebar-data.js.
  *
- * Pairing: it reads the SAME on-disk snapshot the goal-guard server plugin
- * writes (see goal-guard/persistence.js), so the two stay in sync with no extra
- * IPC. The pure projection (`summary.sidebarView`) is shared with the server
- * plugin and unit-tested via goal-guard/sidebar-data.js; only the file read and
- * state-path computation are reimplemented here.
- *
- * Runtime constraints (mirrored from working OpenCode TUI plugins):
- *  - TUI plugin modules export `export default { id, tui }`.
- *  - The Bun TUI plugin runtime does NOT support top-level ESM imports of Node
- *    built-ins, so `node:fs`/`node:path`/`node:os`/`node:crypto` are `require()`d
- *    lazily inside functions. Top-level imports of regular packages (solid-js)
- *    and of our Node-built-in-free local modules are fine.
- *  - This file uses Solid/opentui JSX and is loaded only by OpenCode's (Bun) TUI
- *    runtime, which transpiles it; it is never imported by the Node test suite.
+ * Runtime notes: single `export default { id, tui }`; node built-ins are require()d
+ * lazily (the Bun TUI runtime rejects top-level node: imports). Never imported by
+ * the Node test suite.
  */
 
 import { createSignal, onCleanup, Show } from "solid-js";
 import { sidebarView, NO_GOAL } from "./goal-guard/summary.js";
 import { DEFAULT_CONFIG } from "./goal-guard/config.js";
 
-const DEFAULT_COLOR = "#FFD700"; // shining yellow
-const DEFAULT_MUTED = "#808080"; // clean grey for "No goal"
+const DEFAULT_COLOR = "#FFD700"; // running — yellow
+const DEFAULT_DONE = "#FF5555"; // done — red
+const DEFAULT_MUTED = "#808080"; // no goal — grey
 const POLL_MS = 1500;
 
 function resolveOptions(options, env) {
@@ -41,16 +36,15 @@ function resolveOptions(options, env) {
   const enabledEnv = e.GOAL_GUARD_SIDEBAR_BANNER;
   const disabled =
     enabledOpt === false || enabledEnv === "0" || enabledEnv === "false" || enabledEnv === "off";
-  const color = options?.sidebarColor || e.GOAL_GUARD_SIDEBAR_COLOR || DEFAULT_COLOR;
-  const muted = options?.sidebarMutedColor || e.GOAL_GUARD_SIDEBAR_MUTED_COLOR || DEFAULT_MUTED;
-  return { enabled: !disabled, color, muted };
+  return {
+    enabled: !disabled,
+    color: options?.sidebarColor || e.GOAL_GUARD_SIDEBAR_COLOR || DEFAULT_COLOR,
+    doneColor: options?.sidebarDoneColor || e.GOAL_GUARD_SIDEBAR_DONE_COLOR || DEFAULT_DONE,
+    muted: options?.sidebarMutedColor || e.GOAL_GUARD_SIDEBAR_MUTED_COLOR || DEFAULT_MUTED,
+  };
 }
 
-/**
- * Read the guard's persisted snapshot for a worktree. The state-path logic is
- * kept identical to goal-guard/persistence.js (stateBaseDir + projectKey); node
- * built-ins are required lazily to satisfy the TUI runtime.
- */
+/** Read the guard's persisted snapshot for a worktree (path logic mirrors persistence.js). */
 function readSnapshot(worktree) {
   try {
     const fs = require("node:fs");
@@ -100,7 +94,7 @@ const id = "goal-mode-sidebar";
 /** @type {import("@opencode-ai/plugin/tui").TuiPlugin} */
 const tui = async (api, options) => {
   try {
-    const { enabled, color, muted } = resolveOptions(options, typeof process !== "undefined" ? process.env : {});
+    const { enabled, color, doneColor, muted } = resolveOptions(options, typeof process !== "undefined" ? process.env : {});
     if (!enabled) return;
     if (!api?.slots?.register) return; // runtime without the slot API → no-op.
 
@@ -120,16 +114,17 @@ const tui = async (api, options) => {
           const [model, setModel] = createSignal(read());
           const timer = setInterval(() => setModel(read()), POLL_MS);
           onCleanup(() => clearInterval(timer));
-          // Always render: a muted "No goal" when none is set, the goal in colour otherwise.
+          const fg = () => (model().state === "done" ? doneColor : color);
+          // Three stacked lines: GOAL+title, gates, status — or grey "No goal available".
           return (
-            <box flexDirection="column">
-              <Show when={model().hasGoal} fallback={<text fg={muted}>No goal</text>}>
-                <text fg={color}>
-                  {"◆ "}
+            <box flexDirection="column" paddingTop={1}>
+              <Show when={model().state !== "none"} fallback={<text fg={muted}>No goal available</text>}>
+                <text fg={fg()}>
                   <b>GOAL</b>
                   {`  ${model().goal}`}
                 </text>
-                <text fg={color}>{model().status}</text>
+                <text fg={fg()}>{model().gates}</text>
+                <text fg={fg()}>{model().status}</text>
               </Show>
             </box>
           );

package/scripts/install.mjs

@@ -125,6 +125,36 @@ function loadManifest() {
   }
 }
 
+/**
+ * Register (or remove) the TUI sidebar plugin in `<target>/tui.json`.
+ *
+ * TUI plugins are NOT loaded from the `plugins/` dir (that path is for server
+ * plugins); OpenCode loads them only from tui.json. We reference the published
+ * npm package by name so OpenCode resolves it with its `@opentui/solid` runtime.
+ * Merge-safe: preserves any existing entries and only touches our own.
+ */
+const TUI_PLUGIN_SPEC = pkg.name;
+function ensureTuiPlugin(remove = false) {
+  const tuiPath = join(target, "tui.json");
+  let data = { $schema: "https://opencode.ai/tui.json", plugin: [] };
+  try {
+    const existing = JSON.parse(readFileSync(tuiPath, "utf8"));
+    if (existing && typeof existing === "object") data = existing;
+  } catch {
+    /* missing or invalid → start fresh */
+  }
+  if (!Array.isArray(data.plugin)) data.plugin = [];
+  const has = data.plugin.includes(TUI_PLUGIN_SPEC);
+  if (remove ? !has : has) return false;
+  data.plugin = remove ? data.plugin.filter((p) => p !== TUI_PLUGIN_SPEC) : [...data.plugin, TUI_PLUGIN_SPEC];
+  if (!data.$schema) data.$schema = "https://opencode.ai/tui.json";
+  if (!values["dry-run"]) {
+    mkdirSync(target, { recursive: true });
+    writeFileSync(tuiPath, `${JSON.stringify(data, null, 2)}\n`, "utf8");
+  }
+  return true;
+}
+
 // ---------------------------------------------------------------------------
 // Uninstall
 // ---------------------------------------------------------------------------
@@ -144,7 +174,9 @@ if (values.uninstall) {
     }
   }
   if (!values["dry-run"] && existsSync(manifestPath)) rmSync(manifestPath, { force: true });
+  const tuiRemoved = ensureTuiPlugin(true);
   if (!values["dry-run"]) pruneEmptyDirs(target, Object.keys(manifest.files));
+  if (tuiRemoved) console.log(`${values["dry-run"] ? "Would remove" : "Removed"} the sidebar entry from ${join(target, "tui.json")}`);
   const verb = values["dry-run"] ? "Would remove" : "Removed";
   console.log(`${verb} ${removed.length} Goal Mode files from ${target}.`);
   if (kept.length) {
@@ -234,9 +266,12 @@ if (!values["dry-run"]) {
   writeFileSync(manifestPath, JSON.stringify({ version: pkg.version, files: newManifestFiles }, null, 2), "utf8");
 }
 
+const tuiAdded = ensureTuiPlugin(false);
+
 const verb = values["dry-run"] ? "Would install" : "Installed";
 console.log(`${verb} OpenCode Goal Mode ${pkg.version} into ${target}`);
 console.log(
   `Files copied: ${summary.copied.length}; unchanged: ${summary.unchanged.length}; pruned: ${summary.pruned.length}`,
 );
+if (tuiAdded) console.log(`Registered the experimental sidebar in ${join(target, "tui.json")}`);
 console.log("Restart OpenCode for agents, commands, and plugins to load.");