fix: align with fledge 1.0 CLI and JSON shapes (#3)

Fledge 1.0 changed list-style JSON envelopes (`{plugins:[]}`,
`{lanes:[]}`, `{results:[]}`), removed the top-level `fledge search`
command (now `templates search`), dropped `--json` from `config list`,
renamed `lanes` step count to `step_count`, and now requires `--yes`
for plugin install in non-interactive mode.

- Unwrap envelopes server-side so /plugins, /lanes, /templates, and
  /plugins/search keep returning plain arrays.
- /templates → `templates search --json`.
- /config → parse the human-readable `config list` table into
  `{path, sections:[{name, entries:[{key, value, help, unset}]}]}`.
- /introspect and /info → return `subcommands` as a flat array.
- /plugins/install → pass `--yes`.
- /lanes → run in projectCwd(), return [] when fledge.toml or lanes
  are absent instead of erroring.
- project.ts → unwrap lanes and map step_count → steps.
- Lanes page renders the new schema (description, step count,
  fail-fast, trust tier).
- Config page renders sections with help text and unset state.
- Sidebar HUB version is now dynamic via /api/info `hubVersion`.

Bump to 0.5.0.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 0xLeif

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fledge-plugin-hub",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Local web dashboard for browsing and managing fledge templates, plugins, lanes, and config",
   "type": "module",
   "scripts": {

plugin.toml

@@ -1,6 +1,6 @@
 [plugin]
 name = "fledge-plugin-hub"
-version = "0.4.0"
+version = "0.5.0"
 description = "Local web dashboard for browsing and managing fledge templates, plugins, lanes, and config"
 author = "CorvidLabs"
 

public/app.js

@@ -559,25 +559,25 @@ const loaders = {
       return;
     }
 
-    const lanes = Array.isArray(data)
-      ? data
-      : typeof data === "object"
-        ? Object.entries(data).map(([name, steps]) => ({ name, steps }))
-        : [];
+    const lanes = Array.isArray(data) ? data : [];
 
     if (lanes.length === 0) {
       html(list, renderEmpty('No lanes defined. Add lanes to your <code>fledge.toml</code>'));
     } else {
-      html(list, lanes.map((l) => `
-        <div class="lane-card">
-          <div class="lane-name">${escape(l.name)}</div>
-          <div class="lane-steps">
-            ${(Array.isArray(l.steps) ? l.steps : [])
-              .map((s, i) => `${i > 0 ? '<span class="lane-step-arrow">&rarr;</span>' : ""}<span class="lane-step">${escape(typeof s === "string" ? s : s.name || JSON.stringify(s))}</span>`)
-              .join("")}
+      html(list, lanes.map((l) => {
+        const stepCount = typeof l.step_count === "number" ? l.step_count : (typeof l.steps === "number" ? l.steps : null);
+        return `
+          <div class="lane-card">
+            <div class="lane-name">${escape(l.name)}</div>
+            ${l.description ? `<div class="lane-desc">${escape(l.description)}</div>` : ""}
+            <div class="lane-meta">
+              ${stepCount != null ? `<span class="badge badge-version">${stepCount} step${stepCount === 1 ? "" : "s"}</span>` : ""}
+              ${l.fail_fast ? `<span class="badge badge-team">fail-fast</span>` : ""}
+              ${l.trust_tier ? `<span class="badge badge-command">${escape(l.trust_tier)}</span>` : ""}
+            </div>
           </div>
-        </div>
-      `).join(""));
+        `;
+      }).join(""));
     }
 
     loaded.lanes = true;
@@ -593,17 +593,30 @@ const loaders = {
       return;
     }
 
-    const entries = typeof data === "object" && !Array.isArray(data) ? Object.entries(data) : [];
+    const sections = Array.isArray(data?.sections) ? data.sections : [];
+    const total = sections.reduce((n, s) => n + (s.entries?.length || 0), 0);
 
-    if (entries.length === 0) {
+    if (total === 0) {
       html(list, renderEmpty("No config entries found"));
     } else {
-      html(list, entries.map(([k, v]) => `
-        <div class="config-entry">
-          <span class="config-key">${escape(k)}</span>
-          <span class="config-value">${escape(typeof v === "string" ? v : JSON.stringify(v))}</span>
+      const path = data?.path
+        ? `<div class="config-path">${escape(data.path)}</div>`
+        : "";
+      const sectionsHtml = sections.map((s) => `
+        <div class="config-section">
+          <h3 class="config-section-name">${escape(s.name)}</h3>
+          <div class="config-entries">
+            ${(s.entries || []).map((e) => `
+              <div class="config-entry${e.unset ? " config-entry-unset" : ""}">
+                <span class="config-key">${escape(e.key)}</span>
+                <span class="config-value">${escape(e.value)}</span>
+                ${e.help ? `<span class="config-help">${escape(e.help)}</span>` : ""}
+              </div>
+            `).join("")}
+          </div>
         </div>
-      `).join(""));
+      `).join("");
+      html(list, `${path}${sectionsHtml}`);
     }
 
     loaded.config = true;
@@ -755,5 +768,8 @@ $(".modal-close")?.addEventListener("click", () => {
   if (info?.version) {
     $("#fledge-version").textContent = info.version;
   }
+  if (info?.hubVersion) {
+    $("#hub-version").textContent = `v${info.hubVersion}`;
+  }
   navigate("project");
 })();

public/index.html

@@ -58,7 +58,7 @@
       </div>
       <div class="sidebar-meta">
         <span class="meta-key">HUB</span>
-        <span class="meta-val">v0.4.0</span>
+        <span class="meta-val" id="hub-version">…</span>
       </div>
     </div>
   </nav>

public/style.css

@@ -845,6 +845,13 @@ h3 {
 }
 
 .lane-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
+.lane-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.55rem; }
+.lane-desc {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  margin-bottom: 0.55rem;
+  line-height: 1.5;
+}
 
 .lane-step {
   font-family: var(--font-mono);
@@ -866,23 +873,59 @@ h3 {
 
 /* ============== CONFIG ============== */
 
+.config-path {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-faint);
+  letter-spacing: 0.04em;
+  margin-bottom: 0.4rem;
+}
+
+.config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding-top: 0.4rem;
+}
+
+.config-section-name {
+  font-family: var(--font-display);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.config-entries { display: flex; flex-direction: column; gap: 0.4rem; }
+
 .config-entry {
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 0.7rem 1rem;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto;
   align-items: baseline;
-  gap: 1rem;
+  gap: 0.4rem 1rem;
   font-family: var(--font-mono);
   font-size: 0.78rem;
   transition: border-color var(--transition-base);
 }
 .config-entry:hover { border-color: var(--border-bright); }
+.config-entry-unset { opacity: 0.6; }
 
 .config-key { font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; }
 .config-value { color: var(--text-secondary); text-align: right; word-break: break-all; }
+.config-help {
+  grid-column: 1 / -1;
+  font-family: var(--font-sans);
+  font-size: 0.72rem;
+  color: var(--text-faint);
+  line-height: 1.4;
+}
 
 /* ============== TERMINAL OUTPUT ============== */
 

src/api.ts

@@ -1,10 +1,43 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { Hono } from "hono";
 import { fledge, fledgeJson, projectCwd } from "./fledge";
 import { browseAll, browsePlugins, browseTemplates, getRepoReadme } from "./github";
 import { gatherProjectInfo, openInBrowser } from "./project";
+import { parseConfigList } from "./config";
+
+const HUB_VERSION: string = (() => {
+  try {
+    const pkg = JSON.parse(readFileSync(join(import.meta.dir, "..", "package.json"), "utf8"));
+    return typeof pkg.version === "string" ? pkg.version : "";
+  } catch {
+    return "";
+  }
+})();
 
 export const api = new Hono();
 
+// Fledge 1.0 wraps list-style JSON responses in an envelope:
+//   plugins list  -> { plugins: [...] }
+//   lanes list    -> { lanes: [...] }
+//   plugins search / templates search -> { results: [...] }
+// Unwrap the envelope so the frontend sees a plain array.
+function unwrap<T>(value: unknown, key: string): T[] | unknown {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const obj = value as Record<string, unknown>;
+    if (Array.isArray(obj[key])) return obj[key] as T[];
+    if ("error" in obj) return value;
+  }
+  return value;
+}
+
+function isEmptyLaneError(value: unknown): boolean {
+  if (!value || typeof value !== "object") return false;
+  const err = (value as { error?: unknown }).error;
+  if (typeof err !== "string") return false;
+  return err.includes("No fledge.toml") || err.includes("No lanes defined");
+}
+
 api.get("/project", async (c) => {
   const info = await gatherProjectInfo();
   return c.json(info);
@@ -51,24 +84,30 @@ api.post("/project/open-repo", async (c) => {
 
 api.get("/introspect", async (c) => {
   const result = await fledgeJson(["introspect", "--json"]);
+  // Frontend expects an array of top-level commands.
+  if (result && typeof result === "object" && Array.isArray((result as { subcommands?: unknown }).subcommands)) {
+    return c.json((result as { subcommands: unknown[] }).subcommands);
+  }
   return c.json(result);
 });
 
 api.get("/plugins", async (c) => {
   const result = await fledgeJson(["plugins", "list", "--json"]);
-  return c.json(result);
+  return c.json(unwrap(result, "plugins"));
 });
 
 api.get("/plugins/search", async (c) => {
   const query = c.req.query("q") || "";
   const result = await fledgeJson(["plugins", "search", query, "--json"]);
-  return c.json(result);
+  return c.json(unwrap(result, "results"));
 });
 
 api.post("/plugins/install", async (c) => {
   const body = await c.req.json<{ source?: string; force?: boolean }>().catch(() => ({}));
   if (!body.source) return c.json({ error: "source required" }, 400);
-  const args = ["plugins", "install", body.source, "--json"];
+  // --yes is required because FLEDGE_NON_INTERACTIVE is set in the env and
+  // install would otherwise bail on the trust-prompt.
+  const args = ["plugins", "install", body.source, "--yes", "--json"];
   if (body.force) args.push("--force");
   const result = await fledge(args);
   return c.json({
@@ -106,18 +145,28 @@ api.post("/plugins/update", async (c) => {
 });
 
 api.get("/templates", async (c) => {
-  const result = await fledgeJson(["search", "--json"]);
-  return c.json(result);
+  // Fledge 1.0 moved this under `templates search` and there is no longer a
+  // top-level `fledge search` command. See `fledge templates --help`.
+  const result = await fledgeJson(["templates", "search", "--json"]);
+  return c.json(unwrap(result, "results"));
 });
 
 api.get("/lanes", async (c) => {
-  const result = await fledgeJson(["lanes", "list", "--json"]);
-  return c.json(result);
+  // Lanes are project-scoped (declared in fledge.toml). Run in the project
+  // cwd so a user launching `fledge hub` from a project sees their lanes.
+  const cwd = projectCwd();
+  const result = await fledgeJson(["lanes", "list", "--json"], { cwd });
+  if (isEmptyLaneError(result)) return c.json([]);
+  return c.json(unwrap(result, "lanes"));
 });
 
 api.get("/config", async (c) => {
-  const result = await fledgeJson(["config", "list", "--json"]);
-  return c.json(result);
+  // `fledge config list` does not accept --json in 1.0 — parse the table form.
+  const result = await fledge(["config", "list"]);
+  if (result.exitCode !== 0) {
+    return c.json({ error: result.stderr || result.stdout, exitCode: result.exitCode });
+  }
+  return c.json(parseConfigList(result.stdout));
 });
 
 api.get("/doctor", async (c) => {
@@ -133,9 +182,13 @@ api.get("/doctor", async (c) => {
 api.get("/info", async (c) => {
   const result = await fledgeJson(["introspect", "--json"]);
   const version = await fledge(["--version"]);
+  const commands = result && typeof result === "object" && Array.isArray((result as { subcommands?: unknown }).subcommands)
+    ? (result as { subcommands: unknown[] }).subcommands
+    : [];
   return c.json({
     version: version.stdout.trim(),
-    commands: result,
+    hubVersion: HUB_VERSION,
+    commands,
   });
 });
 

src/config.ts

@@ -0,0 +1,69 @@
+export interface ConfigEntry {
+  section: string;
+  key: string;
+  value: string;
+  help: string;
+  unset: boolean;
+}
+
+export interface ConfigList {
+  path: string | null;
+  sections: Array<{ name: string; entries: ConfigEntry[] }>;
+}
+
+// Parses the human-readable output of `fledge config list`.
+//
+// Sample input:
+//   * Config: /path/to/config.toml
+//
+//     Defaults
+//     defaults.author              0xLeif         Author name for new projects
+//     defaults.github_org          (not set)      GitHub org for new projects
+//
+//     GitHub
+//     github.token                 (not set)      API token for GitHub operations
+export function parseConfigList(text: string): ConfigList {
+  const lines = text.split("\n");
+  let path: string | null = null;
+  const sections: Array<{ name: string; entries: ConfigEntry[] }> = [];
+  let current: { name: string; entries: ConfigEntry[] } | null = null;
+
+  for (const raw of lines) {
+    if (!raw.trim()) continue;
+
+    const pathMatch = raw.match(/^\*\s*Config:\s*(.+)$/);
+    if (pathMatch) {
+      path = pathMatch[1].trim();
+      continue;
+    }
+
+    // Entry rows are dotted keys: `defaults.author    value    help`.
+    const entryMatch = raw.match(/^\s+([a-z][a-z0-9_]*(?:\.[a-z0-9_]+)+)\s{2,}(.+)$/i);
+    if (entryMatch && current) {
+      const key = entryMatch[1];
+      const rest = entryMatch[2];
+      // Split rest into value and help on 2+ spaces. Some values like
+      // "(not set)" or "(none)" are still treated normally.
+      const split = rest.match(/^(.+?)\s{2,}(.+)$/);
+      const value = (split ? split[1] : rest).trim();
+      const help = split ? split[2].trim() : "";
+      current.entries.push({
+        section: current.name,
+        key,
+        value,
+        help,
+        unset: value === "(not set)" || value === "(none)",
+      });
+      continue;
+    }
+
+    // Section header: indented bare word, no dot, no separator value.
+    const sectionMatch = raw.match(/^\s+([A-Z][A-Za-z0-9 /]*)\s*$/);
+    if (sectionMatch) {
+      current = { name: sectionMatch[1].trim(), entries: [] };
+      sections.push(current);
+    }
+  }
+
+  return { path, sections };
+}