@canonical/pragma-cli 0.20.0 → 0.21.0

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@canonical/pragma-cli",
   "description": "CLI and MCP server for Canonical's design system.",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "bin": {
-    "pragma": "src/bin.ts"
+    "pragma": "dist/pragma"
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "author": {
     "email": "webteam@canonical.com",
@@ -19,6 +20,12 @@
     "type": "git",
     "url": "https://github.com/canonical/pragma"
   },
+  "os": [
+    "linux"
+  ],
+  "cpu": [
+    "x64"
+  ],
   "license": "GPL-3.0",
   "bugs": {
     "url": "https://github.com/canonical/pragma/issues"
@@ -30,11 +37,13 @@
     "#error": "./src/error/index.ts",
     "#package-manager": "./src/package-manager/index.ts",
     "#pipeline": "./src/pipeline/index.ts",
-    "#testing": "./src/testing/index.ts"
+    "#testing": "./src/testing/index.ts",
+    "#tui": "./src/tui/index.ts"
   },
   "scripts": {
-    "build": "echo 'No build needed - runs directly from TypeScript'",
-    "build:compile": "bun build --compile --minify src/bin.ts --outfile dist/pragma",
+    "build": "bun build --compile --minify --target=bun-linux-x64 src/bin.ts --outfile dist/pragma",
+    "build:compile": "bun build --compile --minify --target=bun-linux-x64 src/bin.ts --outfile dist/pragma",
+    "prepublishOnly": "bun run build",
     "check": "bun run check:biome && bun run check:ts && bun run check:webarchitect",
     "check:webarchitect": "webarchitect tool-ts",
     "check:fix": "bun run check:biome:fix && bun run check:ts",
@@ -47,12 +56,13 @@
     "test:compile": "bun run src/compile-validation.runner.ts"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.6",
-    "@canonical/biome-config": "^0.20.0",
-    "@canonical/typescript-config": "^0.20.0",
-    "@canonical/webarchitect": "^0.20.0",
+    "@biomejs/biome": "2.4.9",
+    "@canonical/biome-config": "^0.21.0",
+    "@canonical/typescript-config": "^0.21.0",
+    "@canonical/webarchitect": "^0.21.0",
     "@types/bun": "^1.3.10",
     "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
     "expect-type": "^1.3.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
@@ -63,17 +73,19 @@
     "@canonical/design-system": "^0.1.2"
   },
   "dependencies": {
-    "@canonical/cli-core": "^0.20.0",
-    "@canonical/harnesses": "^0.20.0",
-    "@canonical/ke": "^0.20.0",
-    "@canonical/summon-component": "^0.20.0",
-    "@canonical/summon-core": "^0.20.0",
-    "@canonical/summon-package": "^0.20.0",
-    "@canonical/task": "^0.20.0",
+    "@canonical/cli-core": "^0.21.0",
+    "@canonical/harnesses": "^0.21.0",
+    "@canonical/ke": "^0.21.0",
+    "@canonical/summon-component": "^0.21.0",
+    "@canonical/summon-core": "^0.21.0",
+    "@canonical/summon-package": "^0.21.0",
+    "@canonical/task": "^0.21.0",
     "@modelcontextprotocol/sdk": "^1.12.0",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
+    "ink": "^6.8.0",
+    "react": "^19.2.4",
     "zod": "^3.25.0"
   },
-  "gitHead": "1aee634b278922f2aa1cfe2a11d3b14e64280905"
+  "gitHead": "4a39c954e7bbad4903397f8371f801982034a26d"
 }

package/src/constants.ts

@@ -68,6 +68,7 @@ const PROPERTY_MAP: Record<string, OntologyPropertyMap> = {
   },
 };
 
+export type { Channel, OntologyPropertyMap };
 export {
   PROGRAM_DESCRIPTION,
   PROGRAM_NAME,
@@ -75,4 +76,3 @@ export {
   VALID_CHANNELS,
   VERSION,
 };
-export type { Channel, OntologyPropertyMap };

package/src/domains/block/blockConfig.ts

@@ -5,8 +5,9 @@ import type {
   BlockDigest,
   BlockSummary,
   FilterConfig,
-} from "../shared/types.js";
+} from "../shared/types/index.js";
 
+/** Display-contract configuration for block entities (components, patterns, layouts). */
 export const blockConfig: EntityDisplayConfig<
   BlockSummary,
   BlockDigest,
@@ -25,6 +26,48 @@ export const blockConfig: EntityDisplayConfig<
     { key: "name", label: "Name" },
     { key: "type", label: "Type" },
     { key: "tier", label: "Tier" },
+    {
+      key: "modifiers",
+      label: "Modifiers",
+      showWhenEmpty: false,
+      format: (value) =>
+        Array.isArray(value)
+          ? value.filter((entry) => typeof entry === "string").join(", ")
+          : "",
+    },
+    {
+      key: "implementations",
+      label: "Implementations",
+      showWhenEmpty: false,
+      format: (value) =>
+        Array.isArray(value)
+          ? value
+              .filter(
+                (entry): entry is { framework: string; available: boolean } =>
+                  typeof entry === "object" &&
+                  entry !== null &&
+                  "framework" in entry &&
+                  "available" in entry,
+              )
+              .filter((entry) => entry.available)
+              .map((entry) => entry.framework)
+              .join(", ")
+          : "",
+    },
+    {
+      key: "nodeCount",
+      label: "Nodes",
+      showWhenEmpty: false,
+      format: (value) =>
+        typeof value === "number" && value > 0 ? String(value) : "",
+    },
+    {
+      key: "tokenCount",
+      label: "Tokens",
+      showWhenEmpty: false,
+      format: (value) =>
+        typeof value === "number" && value > 0 ? String(value) : "",
+    },
   ],
   digestColumns: [{ key: "summary", label: "Summary", showWhenEmpty: false }],
   lookupSections: [
@@ -32,11 +75,12 @@ export const blockConfig: EntityDisplayConfig<
     { key: "whenToUse", heading: "When to use", kind: "field" },
     { key: "whenNotToUse", heading: "When not to use", kind: "field" },
     { key: "guidelines", heading: "Guidelines", kind: "field" },
+    { key: "anatomy", heading: "Anatomy", kind: "tree" },
     { key: "anatomyDsl", heading: "Anatomy (DSL)", kind: "code" },
     { key: "anatomyClassic", heading: "Anatomy (classic)", kind: "field" },
-    { key: "modifierFamilies", heading: "Modifier Families", kind: "table" },
+    { key: "modifierFamilies", heading: "Modifiers", kind: "table" },
     { key: "properties", heading: "Properties", kind: "nested-table" },
-    { key: "subcomponents", heading: "Subcomponents", kind: "list" },
+    { key: "subcomponents", heading: "Subcomponents", kind: "tree" },
     { key: "implementationPaths", heading: "Implementations", kind: "list" },
     { key: "tokens", heading: "Tokens", kind: "list" },
   ],

package/src/domains/block/commands/list.test.ts

@@ -3,7 +3,7 @@ import type { Store } from "@canonical/ke";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { createTestStore, DS_ALL_TTL } from "#testing";
 import type { PragmaContext } from "../../shared/context.js";
-import type { BlockSummary } from "../../shared/types.js";
+import type { BlockSummary } from "../../shared/types/index.js";
 import buildListCommand from "./list.js";
 
 let store: Store;

package/src/domains/block/commands/list.ts

@@ -11,8 +11,11 @@ import {
   type CommandResult,
   createOutputResult,
 } from "@canonical/cli-core";
+import { createListView } from "#tui";
 import type { PragmaContext } from "../../shared/context.js";
+import type { ColumnDef } from "../../shared/contracts.js";
 import { selectFormatter } from "../../shared/formatters.js";
+import { blockConfig } from "../blockConfig.js";
 import { listFormatters } from "../formatters/index.js";
 import { resolveBlockList } from "../orchestration/index.js";
 
@@ -63,7 +66,31 @@ export default function buildListCommand(
 
       return createOutputResult(contract.result.items, {
         plain: selectFormatter(ctx, listFormatters),
+        ink: (data) =>
+          createListView({
+            heading: "Blocks",
+            domain: "block",
+            items: data,
+            columns: reorderColumns(blockConfig.listColumns, [
+              "name",
+              "type",
+              "tier",
+              "modifiers",
+              "uri",
+            ]),
+          }),
       });
     },
   };
 }
+
+function reorderColumns<T>(
+  columns: readonly ColumnDef<T>[],
+  order: readonly string[],
+): readonly ColumnDef<T>[] {
+  const byKey = new Map(columns.map((col) => [col.key, col]));
+  return order.flatMap((key) => {
+    const col = byKey.get(key as keyof T & string);
+    return col ? [col] : [];
+  });
+}

package/src/domains/block/commands/lookup.ts

@@ -12,11 +12,14 @@ import {
   createOutputResult,
 } from "@canonical/cli-core";
 import { PragmaError } from "#error";
+import { createLookupView } from "#tui";
 import type { PragmaContext } from "../../shared/context.js";
 import type { LookupResult } from "../../shared/contracts.js";
-import { lookupFormatters } from "../formatters/index.js";
+import { renderLookupResults } from "../../shared/formatters.js";
+import type { BlockDetailed } from "../../shared/types/index.js";
+import { createLookupOptions, lookupFormatters } from "../formatters/index.js";
 import { resolveAspects } from "../helpers/index.js";
-import { listBlocks, type lookupBlock } from "../operations/index.js";
+import { listBlocks } from "../operations/index.js";
 import {
   buildBlockFilters,
   resolveBlockLookup,
@@ -24,7 +27,7 @@ import {
 import type { AspectFlags } from "../types.js";
 
 interface BlockLookupOutput {
-  readonly result: LookupResult<Awaited<ReturnType<typeof lookupBlock>>>;
+  readonly result: LookupResult<BlockDetailed>;
   readonly detailed: boolean;
   readonly aspects: AspectFlags;
 }
@@ -132,7 +135,26 @@ export default function buildLookupCommand(
 
       return createOutputResult<BlockLookupOutput>(
         { result: contract.result, detailed: showDetailed, aspects },
-        { plain: renderBlockLookupOutput(ctx) },
+        {
+          plain: ({ result, detailed: isDetailed, aspects: selectedAspects }) =>
+            renderLookupResults({
+              ctx,
+              result,
+              formatters: lookupFormatters,
+              mapResult: (block) => ({
+                block,
+                detailed: isDetailed,
+                aspects: selectedAspects,
+              }),
+            }),
+          ink: ({ result, detailed: isDetailed, aspects: selectedAspects }) =>
+            createLookupView({
+              results: result.results,
+              errors: result.errors,
+              domain: "block",
+              options: createLookupOptions(isDetailed, selectedAspects),
+            }),
+        },
       );
     },
   };
@@ -149,51 +171,3 @@ function normalizeNames(names: unknown, legacyName?: unknown): string[] {
   }
   return [];
 }
-
-function renderBlockLookupOutput(
-  ctx: PragmaContext,
-): (data: BlockLookupOutput) => string {
-  return ({ result, detailed, aspects }) => {
-    const formatOne =
-      ctx.globalFlags.format === "json"
-        ? lookupFormatters.json
-        : ctx.globalFlags.llm
-          ? lookupFormatters.llm
-          : lookupFormatters.plain;
-
-    if (ctx.globalFlags.format === "json") {
-      if (result.results.length === 1 && result.errors.length === 0) {
-        const only = result.results[0];
-        return only
-          ? lookupFormatters.json({ block: only, detailed, aspects })
-          : JSON.stringify({ results: [], errors: result.errors }, null, 2);
-      }
-
-      return JSON.stringify(
-        {
-          results: result.results.map((block) =>
-            JSON.parse(lookupFormatters.json({ block, detailed, aspects })),
-          ),
-          errors: result.errors,
-        },
-        null,
-        2,
-      );
-    }
-
-    const parts = result.results.map((block) =>
-      formatOne({ block, detailed, aspects }),
-    );
-
-    if (result.errors.length > 0) {
-      parts.push(
-        [
-          "Errors:",
-          ...result.errors.map((error) => `- ${error.query}: ${error.message}`),
-        ].join("\n"),
-      );
-    }
-
-    return parts.join("\n\n");
-  };
-}

package/src/domains/block/formatters/index.ts

@@ -1,4 +1,4 @@
 /** @module Re-exports block formatters (`lookupFormatters`, `listFormatters`). */
 
 export { default as listFormatters } from "./list.js";
-export { default as lookupFormatters } from "./lookup.js";
+export { createLookupOptions, default as lookupFormatters } from "./lookup.js";

package/src/domains/block/formatters/list.test.ts

@@ -1,7 +1,7 @@
 import type { URI } from "@canonical/ke";
 import { describe, expect, it } from "vitest";
 import { PREFIX_MAP } from "../../shared/prefixes.js";
-import type { BlockSummary } from "../../shared/types.js";
+import type { BlockSummary } from "../../shared/types/index.js";
 import formatters from "./list.js";
 
 const BUTTON: BlockSummary = {

package/src/domains/block/formatters/list.ts

@@ -1,55 +1,41 @@
-/**
- * Three-mode formatter for `pragma block list` output.
- *
- * - **plain** — styled terminal output with chalk; one line per block
- *   showing name, tier, modifiers, and available implementations.
- * - **llm** — condensed Markdown consumed by LLM agents and reused
- *   by the MCP adapter when `condensed: true`.
- * - **json** — structured JSON array for programmatic consumption.
- */
-
-import chalk from "chalk";
 import type { Formatters } from "../../shared/formatters.js";
-import type { BlockSummary } from "../../shared/types.js";
+import { renderListPlain } from "../../shared/renderers.js";
+import type { BlockSummary } from "../../shared/types/index.js";
+import { blockConfig } from "../blockConfig.js";
 
+/** Three-mode formatter for `pragma block list` output. */
 const formatters: Formatters<readonly BlockSummary[]> = {
-  plain(components) {
-    const lines: string[] = [];
-
-    for (const c of components) {
-      const tier = chalk.dim(`[${c.tier}]`);
-      const mods =
-        c.modifiers.length > 0 ? chalk.dim(` (${c.modifiers.join(", ")})`) : "";
-      const impl = c.implementations
-        .filter((i) => i.available)
-        .map((i) => i.framework);
-      const implStr = impl.length > 0 ? chalk.dim(` → ${impl.join(", ")}`) : "";
+  plain: (blocks) =>
+    renderListPlain(blocks, {
+      heading: "Blocks",
+      columns: blockConfig.listColumns,
+    }),
 
-      lines.push(`${chalk.bold(c.name)} ${tier}${mods}${implStr}`);
-    }
+  llm(blocks) {
+    const lines = ["## Blocks", ""];
 
-    return lines.join("\n");
-  },
+    for (const block of blocks) {
+      const parts = [`**${block.name}**`, `tier: ${block.tier}`];
 
-  llm(components) {
-    const lines: string[] = [];
+      if (block.modifiers.length > 0) {
+        parts.push(`modifiers: ${block.modifiers.join(", ")}`);
+      }
 
-    lines.push("## Blocks");
-    lines.push("");
+      const implementations = block.implementations
+        .filter((implementation) => implementation.available)
+        .map((implementation) => implementation.framework);
+      if (implementations.length > 0) {
+        parts.push(`implementations: ${implementations.join(", ")}`);
+      }
 
-    for (const c of components) {
-      const parts = [`**${c.name}**`, `tier: ${c.tier}`];
-      if (c.modifiers.length > 0) {
-        parts.push(`modifiers: ${c.modifiers.join(", ")}`);
+      if (block.nodeCount > 0) {
+        parts.push(`nodes: ${block.nodeCount}`);
       }
-      const impl = c.implementations
-        .filter((i) => i.available)
-        .map((i) => i.framework);
-      if (impl.length > 0) {
-        parts.push(`implementations: ${impl.join(", ")}`);
+
+      if (block.tokenCount > 0) {
+        parts.push(`tokens: ${block.tokenCount}`);
       }
-      if (c.nodeCount > 0) parts.push(`nodes: ${c.nodeCount}`);
-      if (c.tokenCount > 0) parts.push(`tokens: ${c.tokenCount}`);
+
       lines.push(`- ${parts.join(" | ")}`);
     }
 

package/src/domains/block/formatters/lookup.test.ts

@@ -1,7 +1,7 @@
 import type { URI } from "@canonical/ke";
 import { describe, expect, it } from "vitest";
 import { PREFIX_MAP } from "../../shared/prefixes.js";
-import type { BlockDetailed } from "../../shared/types.js";
+import type { BlockDetailed } from "../../shared/types/index.js";
 import type { AspectFlags } from "../types.js";
 import formatters from "./lookup.js";
 
@@ -263,7 +263,8 @@ describe("formatters.llm", () => {
     });
     expect(text).toContain("### Modifiers");
     expect(text).toContain("### Tokens");
-    expect(text).not.toContain("### Anatomy");
+    expect(text).toContain("### Anatomy (DSL)");
+    expect(text).not.toContain("### Anatomy\n");
   });
 });