@bigstrider/transcodes-cli 0.4.1 → 0.5.0

package/dist/index.js

@@ -6028,6 +6028,17 @@ function dashboardHtml() {
       object-fit: contain;
       background: #f4f4f6;
       padding: 8px;
+      display: block;
+    }
+    .header-logo-link {
+      flex-shrink: 0;
+      border-radius: 14px;
+      line-height: 0;
+      transition: opacity 0.15s ease, box-shadow 0.15s ease;
+    }
+    .header-logo-link:hover {
+      opacity: 0.88;
+      box-shadow: 0 0 0 3px var(--accent-soft);
     }
     .header h1 {
       margin: 0;
@@ -6035,11 +6046,41 @@ function dashboardHtml() {
       font-weight: 700;
       letter-spacing: -0.02em;
     }
-    .header p {
-      margin: 5px 0 0;
+    .header-title-link {
+      color: inherit;
+      text-decoration: none;
+      transition: color 0.15s ease;
+    }
+    .header-title-link:hover {
+      color: var(--accent);
+    }
+    .header-title-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+    }
+    .header-tagline {
+      margin: 6px 0 0;
       font-size: var(--text-sm);
       color: var(--muted);
     }
+    .header-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: var(--text-2xs);
+      font-weight: 600;
+      color: var(--muted);
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #22c55e;
+      flex-shrink: 0;
+      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
+    }
     .tabs {
       display: flex;
       gap: 4px;
@@ -6077,7 +6118,52 @@ function dashboardHtml() {
     .section-sub {
       font-size: var(--text-base);
       color: var(--muted);
-      margin: 0 0 20px;
+      margin: 0 0 16px;
+    }
+    .cli-map-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 0 0 16px;
+      font-size: var(--text-2xs);
+      font-weight: 400;
+      color: var(--muted);
+    }
+    .cli-map-row .cli-map-label {
+      font-size: var(--text-sm);
+      font-weight: 600;
+      letter-spacing: 0.01em;
+    }
+    .cli-map-row .cli-map-label--title {
+      font-size: var(--text-lg);
+      font-weight: 700;
+      color: var(--ink);
+      letter-spacing: -0.01em;
+    }
+    .cli-map-row .cli-map-label--danger {
+      font-size: var(--text-sm);
+      font-weight: 700;
+      color: #c0392f;
+    }
+    .cli-map-row .cli-map-label--ink { color: var(--ink); }
+    .cli-map-row code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      background: var(--accent-soft);
+      color: var(--accent);
+      padding: 2px 8px;
+      border-radius: 6px;
+      font-size: var(--text-2xs);
+      font-weight: 600;
+    }
+    .cli-map-row--list {
+      margin: 26px 0 10px;
+    }
+    .cli-map-row--section {
+      margin: 0 0 4px;
+    }
+    .cli-map-row--danger {
+      margin: 0;
     }
     textarea {
       width: 100%;
@@ -6142,6 +6228,67 @@ function dashboardHtml() {
       color: #5a5a64;
     }
     .btn-secondary:hover:not(:disabled) { background: #ececf0; }
+    .btn-inline-action {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 7px 14px;
+      font-size: var(--text-2xs);
+      font-weight: 600;
+      color: var(--accent);
+      background: var(--accent-soft);
+      border: none;
+      border-radius: 9px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+    .btn-inline-action:hover:not(:disabled) { background: #e3e1f7; }
+    .btn-inline-action:disabled { opacity: 0.55; cursor: default; }
+    .danger-zone {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      flex-wrap: wrap;
+      margin-top: 28px;
+      padding: 18px 20px;
+      border: 1px solid #f0d9d6;
+      border-radius: 16px;
+      background: #fdf6f5;
+    }
+    .danger-zone-desc {
+      margin: 4px 0 0;
+      font-size: var(--text-2xs);
+      color: #8a8a94;
+      line-height: 1.5;
+    }
+    .btn-danger {
+      padding: 11px 22px;
+      font-size: var(--text-sm);
+      font-weight: 700;
+      color: #fff;
+      background: #c0392f;
+      border: none;
+      border-radius: 11px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+      white-space: nowrap;
+    }
+    .btn-danger:hover:not(:disabled) { background: #a52f26; }
+    .btn-danger:disabled { opacity: 0.55; cursor: default; }
+    .policy-refresh-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-bottom: 18px;
+      padding: 14px 16px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: #fbfbfc;
+    }
+    .policy-refresh-bar .cli-map-row { margin: 0; flex: 1; min-width: 0; }
     .list-label {
       margin: 26px 0 10px;
       font-size: var(--text-sm);
@@ -6277,6 +6424,39 @@ function dashboardHtml() {
     .perm-chip-1 { color: #166534; border-color: #86efac; background: #f0fdf4; }
     .perm-chip-2 { color: #7c3aed; border-color: #d8b4fe; background: #faf5ff; }
     .field-k-rbac { color: #8a3ffc; font-weight: 600; }
+    .field-status {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px 10px;
+    }
+    .status-chip {
+      display: inline-block;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: var(--text-xs);
+      font-weight: 600;
+      padding: 1px 7px;
+      border-radius: 6px;
+      border: 1px solid;
+      text-transform: lowercase;
+      line-height: inherit;
+      vertical-align: baseline;
+    }
+    .status-chip-active {
+      color: #166534;
+      border-color: #86efac;
+      background: #f0fdf4;
+    }
+    .status-chip-inactive {
+      color: #9f1239;
+      border-color: #fda4af;
+      background: #fff1f2;
+    }
+    .status-hint {
+      font-size: var(--text-2xs);
+      color: var(--muted);
+      line-height: 1.45;
+    }
     .admin-tools-count {
       font-size: var(--text-sm);
       color: var(--muted);
@@ -6465,6 +6645,40 @@ function dashboardHtml() {
       flex-direction: column;
       gap: 10px;
     }
+    .guide-groups {
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+    }
+    .guide-group-label {
+      margin: 0 0 10px;
+      font-size: var(--text-sm);
+      font-weight: 700;
+      color: var(--ink);
+      letter-spacing: 0.01em;
+    }
+    a.guide-group-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      text-decoration: none;
+      color: var(--ink);
+    }
+    a.guide-group-label:hover {
+      color: var(--accent);
+    }
+    a.guide-group-label:hover .guide-group-link-icon {
+      color: var(--accent);
+    }
+    .guide-group-link-icon {
+      display: inline-flex;
+      align-items: center;
+      color: var(--muted);
+      line-height: 0;
+      transition: color 0.15s ease;
+    }
+    .guide-group--panel .guide-group-label { color: var(--accent); }
+    .guide-group--agent .guide-group-label { color: #5a5a64; }
     .guide-step {
       display: flex;
       gap: 14px;
@@ -6508,6 +6722,15 @@ function dashboardHtml() {
       padding: 1px 6px;
       border-radius: 6px;
     }
+    .guide-step-desc-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+    }
+    .guide-step .toast {
+      margin-top: 10px;
+    }
     .guide-help {
       margin: 0 0 18px;
       padding: 16px 18px;
@@ -6559,10 +6782,18 @@ function dashboardHtml() {
 <body>
   <div class="card">
     <div class="header">
-      <img class="avatar" src="${LOGO_DATA_URI}" alt="Transcodes" />
+      <a class="header-logo-link" href="https://app.transcodes.io/" target="_blank" rel="noopener noreferrer" aria-label="Open Transcodes console">
+        <img class="avatar" src="${LOGO_DATA_URI}" alt="Transcodes" />
+      </a>
       <div>
-        <h1>Transcodes</h1>
-        <p>CLI Dashboard</p>
+        <div class="header-title-row">
+          <h1><a class="header-title-link" href="https://app.transcodes.io/" target="_blank" rel="noopener noreferrer">Transcodes</a> CLI Panel</h1>
+          <span class="header-status">
+            <span class="status-dot" aria-hidden="true"></span>
+            Connected
+          </span>
+        </div>
+        <p class="header-tagline">Manage credentials and rules from one panel \u2014 no CLI typing required</p>
       </div>
     </div>
     <div class="tabs">
@@ -6589,68 +6820,104 @@ function dashboardHtml() {
         ></mux-player>
       </div>
       <p class="list-label">Quick setup</p>
-      <ol class="guide-steps">
-        <li class="guide-step">
-          <span class="guide-step-num">1</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Create a project</p>
-            <p class="guide-step-desc">In the Transcodes web console, create a new project for your app</p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">2</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Create an authentication cluster</p>
-            <p class="guide-step-desc">Add an authentication cluster to the project to define how members sign in and authenticate</p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">3</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Add a member</p>
-            <p class="guide-step-desc">Invite or add a member to the project so they can be issued an access token</p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">4</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Issue an access token</p>
-            <p class="guide-step-desc">Open the member detail page and issue a Member Access Token (MAT) for the agent</p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">5</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Add it here in the CLI dashboard</p>
-            <p class="guide-step-desc">Paste the token in the Tokens tab with a label (e.g. <code>transcodes-myapp-dev</code>) \u2014 the plugin reads it from <code>~/.transcodes/config.json</code></p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">6</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Ask your local agent to add a custom rule</p>
-            <p class="guide-step-desc">From your agent, request a guard rule (e.g. <code>add_tool_rule</code> / <code>add_user_pattern</code>) \u2014 it is registered as <code>inactive</code></p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">7</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Approve it in the console</p>
-            <p class="guide-step-desc">Switch the rule to <code>active</code> in the Transcodes web console \u2014 only then is it enforced</p>
-          </div>
-        </li>
-        <li class="guide-step">
-          <span class="guide-step-num">8</span>
-          <div class="guide-step-body">
-            <p class="guide-step-title">Refresh active rules locally</p>
-            <p class="guide-step-desc">Run <code>transcodes policy refresh</code> in your terminal, or tell your agent <code>/transcodes</code> (Codex: <code>$transcodes</code>) \u2014 e.g. \u201CUpdate the active transcodes rules\u201D \u2014 so newly activated console rules apply without restarting the host</p>
-          </div>
-        </li>
-      </ol>
+      <div class="guide-groups">
+        <section class="guide-group guide-group--console">
+          <a class="guide-group-label" href="https://app.transcodes.io/" target="_blank" rel="noopener noreferrer">Transcodes Console<span class="guide-group-link-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span></a>
+          <ol class="guide-steps">
+            <li class="guide-step">
+              <span class="guide-step-num">1</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Create a project</p>
+                <p class="guide-step-desc">Create a new project for your app</p>
+              </div>
+            </li>
+            <li class="guide-step">
+              <span class="guide-step-num">2</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Create an authentication cluster</p>
+                <p class="guide-step-desc">Add an authentication cluster to define how members sign in and authenticate</p>
+              </div>
+            </li>
+            <li class="guide-step">
+              <span class="guide-step-num">3</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Add a member</p>
+                <p class="guide-step-desc">Invite or add a member so they can be issued an access token</p>
+              </div>
+            </li>
+            <li class="guide-step">
+              <span class="guide-step-num">4</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Issue an access token</p>
+                <p class="guide-step-desc">Open the member detail page and issue a Member Access Token (MAT) for the agent</p>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <section class="guide-group guide-group--panel">
+          <p class="guide-group-label">This CLI panel</p>
+          <ol class="guide-steps">
+            <li class="guide-step">
+              <span class="guide-step-num">5</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Save the token</p>
+                <p class="guide-step-desc">Paste the token in the Tokens tab with a label (e.g. <code>transcodes-myapp-dev</code>) \u2014 the plugin reads it from <code>{{HOME_DIR}}/.transcodes/config.json</code></p>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <section class="guide-group guide-group--agent">
+          <p class="guide-group-label">LLM agent (Claude, Cursor, Codex, Antigravity)</p>
+          <ol class="guide-steps">
+            <li class="guide-step">
+              <span class="guide-step-num">6</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Ask your local agent to add a custom rule</p>
+                <p class="guide-step-desc">Use <code>add_tool_rule</code> or <code>add_user_pattern</code> \u2014 on first registration, rules are <code>inactive</code> and not applied to MCP</p>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <section class="guide-group guide-group--console">
+          <a class="guide-group-label" href="https://app.transcodes.io/" target="_blank" rel="noopener noreferrer">Transcodes Console<span class="guide-group-link-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span></a>
+          <ol class="guide-steps">
+            <li class="guide-step">
+              <span class="guide-step-num">7</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Approve the rule</p>
+                <p class="guide-step-desc">Switch the rule to <code>active</code> \u2014 only then is it enforced on MCP</p>
+              </div>
+            </li>
+          </ol>
+        </section>
+
+        <section class="guide-group guide-group--panel">
+          <p class="guide-group-label">This CLI panel</p>
+          <ol class="guide-steps">
+            <li class="guide-step">
+              <span class="guide-step-num">8</span>
+              <div class="guide-step-body">
+                <p class="guide-step-title">Refresh active rules locally</p>
+                <p class="guide-step-desc guide-step-desc-row">
+                  Run terminal <code>transcodes policy refresh</code> or
+                  <button type="button" class="btn-inline-action" id="guide-policy-refresh">Refresh</button>
+                </p>
+                <div id="guide-toast" class="toast"></div>
+              </div>
+            </li>
+          </ol>
+        </section>
+      </div>
     </div>
 
     <div class="panel" id="panel-tokens">
-      <p class="section-title">MCP Agent Token</p>
+      <p class="cli-map-row cli-map-row--section">
+        <span class="cli-map-label cli-map-label--title">MCP Access Token</span>
+        <code>transcodes set &lt;token&gt; -l &lt;label&gt;</code>
+      </p>
       <p class="section-sub">Paste the token from your Transcodes console member detail page</p>
       <textarea id="token" placeholder="eyJhbGciOi\u2026" spellcheck="false" autocomplete="off"></textarea>
       <input type="text" id="label" class="label-input" placeholder="Label (required) \u2014 e.g. transcodes-{project_name}-{env}" autocomplete="off" required />
@@ -6659,8 +6926,21 @@ function dashboardHtml() {
         <button type="button" class="btn-secondary" id="clear">Clear</button>
       </div>
       <div id="toast" class="toast"></div>
-      <p class="list-label">Saved tokens</p>
+      <p class="cli-map-row cli-map-row--list">
+        <span class="cli-map-label">Saved tokens</span>
+        <code>transcodes tokens</code>
+      </p>
       <div class="token-list" id="token-list"></div>
+      <div class="danger-zone">
+        <div class="danger-zone-text">
+          <p class="cli-map-row cli-map-row--danger">
+            <span class="cli-map-label cli-map-label--danger">Reset all tokens</span>
+            <code>transcodes reset</code>
+          </p>
+          <p class="danger-zone-desc">Remove every saved token from this machine</p>
+        </div>
+        <button type="button" class="btn-danger" id="reset-all">Reset all</button>
+      </div>
       <p class="hint">Saved to <code>{{HOME_DIR}}/.transcodes/config.json</code><br />Press Ctrl+C in the terminal to stop</p>
     </div>
 
@@ -6675,11 +6955,11 @@ function dashboardHtml() {
     <div class="panel" id="panel-rules">
       <p id="policy-token-warning" class="policy-token-warning" hidden>transcodes\uB97C \uB85C\uCEEC \uC5D0\uC774\uC804\uD2B8\uC5D0\uC11C \uC774\uC6A9\uD558\uAE30 \uC704\uD574\uC120 \uD1A0\uD070\uC774 \uD558\uB098 \uC774\uC0C1 \uB4F1\uB85D\uC774 \uB418\uC5B4\uC57C \uD569\uB2C8\uB2E4</p>
       <div class="tabs sub-tabs" role="tablist" aria-label="Rule type">
-        <button type="button" class="tab active" data-policy="project" role="tab">Project Rules</button>
-        <button type="button" class="tab" data-policy="admin" role="tab">Admin MCP</button>
+        <button type="button" class="tab active" data-policy="project" role="tab">Project</button>
+        <button type="button" class="tab" data-policy="admin" role="tab">Transcodes</button>
       </div>
       <div class="policy-pane active" id="policy-pane-project">
-        <p class="section-title">Step-up Guard Rules</p>
+        <p class="section-title">Custom Project Step-up Rules</p>
         <p class="section-sub">When an active rule matches an agent action, Transcodes step-up authentication is triggered. Rules are registered only from your local agent; activating and deleting them is done in the Transcodes web console</p>
         <div class="usage">
           <p class="usage-title">How rules work</p>
@@ -6695,15 +6975,22 @@ function dashboardHtml() {
             <span class="q">\u2192 the agent registers it as <code>inactive</code>; activate it in the Transcodes web console to start enforcing</span>
           </div>
         </div>
+        <div class="policy-refresh-bar">
+          <p class="cli-map-row">
+            <span class="cli-map-label cli-map-label--ink">Refresh Custom Project Rules</span>
+            <code>transcodes policy refresh</code>
+          </p>
+          <button type="button" class="btn-inline-action" id="policy-refresh">Refresh</button>
+        </div>
         <div id="rules-toast" class="toast"></div>
-        <p class="list-label">Your project rules</p>
+        <p class="list-label">Your Project MCP Rules</p>
         <div class="token-list" id="project-rules-list"></div>
         <p class="list-label">System bash patterns (read-only)</p>
         <div class="token-list" id="system-patterns-list"></div>
       </div>
 
       <div class="policy-pane" id="policy-pane-admin">
-        <p class="section-title">Transcodes Admin MCP</p>
+        <p class="section-title">Transcodes MCP Rules</p>
         <p class="section-sub">Backend API tools exposed via MCP \u2014 agents call these through the transcodes-guard plugin. Read-only reference for system tool-rules.</p>
         <div class="rbac-legend">
           <p class="rbac-legend-title">Role permission check</p>
@@ -6942,6 +7229,28 @@ function dashboardHtml() {
       tokenEl.focus();
     });
 
+    const resetAllBtn = document.getElementById("reset-all");
+    resetAllBtn.addEventListener("click", async () => {
+      const count = (lastStatus.tokens || []).length;
+      if (count === 0) {
+        showToast("No tokens to reset", "error");
+        return;
+      }
+      if (!confirm("Remove ALL " + count + " saved token(s)? This cannot be undone.")) return;
+      resetAllBtn.disabled = true;
+      try {
+        const res = await fetch("/api/tokens", { method: "DELETE" });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Reset failed");
+        showToast("All tokens removed", "success");
+        refresh();
+      } catch (e) {
+        showToast(e.message || "Reset failed", "error");
+      } finally {
+        resetAllBtn.disabled = false;
+      }
+    });
+
     const rulesToastEl = document.getElementById("rules-toast");
     const projectRulesListEl = document.getElementById("project-rules-list");
     const systemPatternsListEl = document.getElementById("system-patterns-list");
@@ -6971,6 +7280,41 @@ function dashboardHtml() {
       );
     }
 
+    function ruleStatusField(status) {
+      if (!status) return "";
+      const chipClass =
+        status === "active"
+          ? "status-chip-active"
+          : status === "inactive"
+            ? "status-chip-inactive"
+            : "";
+      const chip = chipClass
+        ? '<span class="status-chip ' + chipClass + '">' + esc(status) + "</span>"
+        : "<code>" + esc(status) + "</code>";
+      const hint =
+        status === "inactive"
+          ? '<span class="status-hint">Activate in the console to take effect on MCP</span>'
+          : "";
+      return (
+        '<div class="field field-status">' +
+          '<span class="k">status</span> ' +
+          chip +
+          hint +
+        "</div>"
+      );
+    }
+
+    function ruleResourceActionField(r) {
+      const resource = r.resource || "\u2014";
+      const action = r.action || "\u2014";
+      return (
+        '<div class="field">' +
+          '<span class="k">resource / action</span> ' +
+          "<code>" + esc(resource) + "</code> / <code>" + esc(action) + "</code>" +
+        "</div>"
+      );
+    }
+
     function projectRuleRow(r) {
       const editing = r.id === ruleEditingId;
       const idField = '<div class="field"><span class="k">id</span> <code>' + esc(r.id) + '</code></div>';
@@ -7002,19 +7346,14 @@ function dashboardHtml() {
       const description = r.description
         ? '<div class="label">' + esc(r.description) + '</div>'
         : '';
+      const status = ruleStatusField(r.status);
+      const resourceAction = ruleResourceActionField(r);
       const matcher =
         '<div class="field"><span class="k">matcher</span> <code>' + esc(r.matcher || (r.type === 'bash' ? 'regex' : 'exact')) + '</code></div>';
-      const action =
-        '<div class="field"><span class="k">action</span> <code>' + esc(r.action || '\u2014') + '</code></div>';
-      const resource =
-        '<div class="field"><span class="k">resource</span> <code>' + esc(r.resource || '\u2014') + '</code></div>';
-      const status = r.status
-        ? '<div class="field"><span class="k">status</span> <code>' + esc(r.status) + '</code></div>'
-        : '';
       return (
         '<div class="token-row">' +
           '<div class="token-top">' +
-            '<div class="token-info">' + description + typeField + idField + labelField + matcher + action + resource + status + '</div>' +
+            '<div class="token-info">' + description + status + resourceAction + typeField + idField + labelField + matcher + '</div>' +
           '</div>' +
           '<div class="token-actions">' +
             '<button type="button" class="btn-edit" data-edit-rule="' + esc(r.id) + '">EDIT</button>' +
@@ -7049,6 +7388,42 @@ function dashboardHtml() {
       renderProjectRules(await res.json());
     }
 
+    const guideToastEl = document.getElementById("guide-toast");
+    function showGuideToast(msg, kind) {
+      guideToastEl.textContent = msg;
+      guideToastEl.className = "toast show " + (kind || "success");
+      setTimeout(() => guideToastEl.classList.remove("show"), 4000);
+    }
+
+    async function runPolicyRefresh(btn, showToastFn) {
+      btn.disabled = true;
+      const original = btn.textContent;
+      btn.textContent = "Refreshing\u2026";
+      try {
+        const res = await fetch("/api/policy/refresh", { method: "POST" });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Refresh failed");
+        const detail = data.revision != null
+          ? " (revision " + data.revision + ", " + data.rules + " rules)"
+          : "";
+        showToastFn(
+          (data.outcome === "not-modified" ? "Policy already current" : "Policy bundle refreshed") + detail,
+          "success");
+        loadProjectRules();
+      } catch (e) {
+        showToastFn(e.message || "Refresh failed", "error");
+      } finally {
+        btn.disabled = false;
+        btn.textContent = original;
+      }
+    }
+
+    const policyRefreshBtn = document.getElementById("policy-refresh");
+    policyRefreshBtn.addEventListener("click", () => runPolicyRefresh(policyRefreshBtn, showRulesToast));
+    document.getElementById("guide-policy-refresh").addEventListener(
+      "click",
+      () => runPolicyRefresh(document.getElementById("guide-policy-refresh"), showGuideToast));
+
     function findEditingRule(id) {
       return (lastProjectRules.project || []).find((r) => r.id === id);
     }
@@ -7102,10 +7477,9 @@ function dashboardHtml() {
         ? '<div class="tool-badges"><span class="tool-badge rbac-gated" title="Outcome follows your role matrix: 0 block, 1 allow, 2 step-up MFA">Role permission check</span></div>'
         : '';
       const rbacFields = t.rbacGated
-        ? '<div class="field"><span class="k field-k-rbac">permission action</span> <code>' +
-          esc(t.rbacAction || 'update') + '</code></div>' +
-          '<div class="field"><span class="k field-k-rbac">RBAC resource</span> <code>' +
-          esc(t.rbacResource || 'system') + '</code></div>'
+        ? '<div class="field"><span class="k field-k-rbac">Resource / Action</span> : ' +
+          '<code>' + esc(t.rbacResource || 'system') + '</code> / <code>' +
+          esc(t.rbacAction || 'update') + '</code></div>'
         : '';
       return (
         '<div class="token-row">' +
@@ -7240,6 +7614,37 @@ function listen(port) {
           sendJson(res, 200, { ok: true, ...buildStatus() });
           return;
         }
+        if (method === "DELETE" && url === "/api/tokens") {
+          clearTokenFile();
+          sendJson(res, 200, { ok: true, ...buildStatus() });
+          return;
+        }
+        if (method === "POST" && url === "/api/policy/refresh") {
+          let config;
+          try {
+            config = loadStepupConfig();
+          } catch (err) {
+            sendJson(res, 400, {
+              error: err instanceof Error ? err.message : String(err)
+            });
+            return;
+          }
+          const outcome = await refreshPolicyBundle(config, { force: true });
+          if (outcome === "failed") {
+            sendJson(res, 502, {
+              error: "policy bundle refresh failed \u2014 previous cache (if any) kept"
+            });
+            return;
+          }
+          const cached = readCachedPolicyBundle(config.projectId);
+          sendJson(res, 200, {
+            ok: true,
+            outcome,
+            revision: cached?.bundle.revision,
+            rules: cached?.bundle.rules.length
+          });
+          return;
+        }
         if (method === "GET" && url === "/api/project-rules") {
           sendJson(res, 200, await fetchProjectRulesFromBackend());
           return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigstrider/transcodes-cli",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Transcodes CLI — manage transcodes-guard member tokens and the step-up gate (set/reset/status/tokens, enable/disable, dashboard).",
   "type": "module",
   "bin": {