@hesed/webui 0.1.0 → 0.2.0

package/README.md

@@ -26,7 +26,7 @@ $ npm install -g @hesed/webui
 $ webui COMMAND
 running command...
 $ webui (--version)
-@hesed/webui/0.1.0 darwin-arm64 node-v22.22.3
+@hesed/webui/0.2.0 linux-x64 node-v24.16.0
 $ webui --help [COMMAND]
 USAGE
   $ webui COMMAND
@@ -63,5 +63,5 @@ EXAMPLES
   $ webui webui --host 0.0.0.0
 ```
 
-_See code: [src/commands/webui.ts](https://github.com/hesedcasa/webui/blob/v0.1.0/src/commands/webui.ts)_
+_See code: [src/commands/webui.ts](https://github.com/hesedcasa/webui/blob/v0.2.0/src/commands/webui.ts)_
 <!-- commandsstop -->

package/dist/commands/webui.d.ts

@@ -1,3 +1,5 @@
+import type { Config } from '@oclif/core';
+import type { LoadOptions } from '@oclif/core/interfaces';
 import { Command } from '@oclif/core';
 export default class WebUI extends Command {
     static description: string;
@@ -7,6 +9,12 @@ export default class WebUI extends Command {
         open: import("@oclif/core/interfaces").BooleanFlag<boolean>;
         port: import("@oclif/core/interfaces").OptionFlag<number, import("@oclif/core/interfaces").CustomOptions>;
     };
+    /**
+     * oclif normally reloads a Config when a command comes from a different
+     * oclif core installation. Preserve the host CLI's initialized Config so
+     * commands registered dynamically by init hooks remain available to the UI.
+     */
+    static run<T extends Command>(this: new (argv: string[], config: Config) => T, argv?: string[], options?: LoadOptions): Promise<ReturnType<T['run']>>;
     run(): Promise<void>;
     private openBrowser;
 }

package/dist/commands/webui.js

@@ -23,6 +23,18 @@ export default class WebUI extends Command {
             description: 'Port to listen on.',
         }),
     };
+    /**
+     * oclif normally reloads a Config when a command comes from a different
+     * oclif core installation. Preserve the host CLI's initialized Config so
+     * commands registered dynamically by init hooks remain available to the UI.
+     */
+    static async run(argv = [], options) {
+        if (options && typeof options !== 'string' && 'runCommand' in options) {
+            const command = new this(argv, options);
+            return command._run();
+        }
+        return super.run(argv, options);
+    }
     async run() {
         const { flags } = await this.parse(WebUI);
         this.log(`Starting web UI…`);

package/dist/lib/introspect.js

@@ -1,9 +1,20 @@
-function flagToMeta(name, flag) {
+function renderMetadataText(value, config, commandId) {
+    if (!value)
+        return value;
+    const replacements = {
+        'command.id': commandId,
+        'config.bin': config.bin,
+        'config.name': config.name,
+        'config.version': config.version,
+    };
+    return value.replaceAll(/<%=\s*(command\.id|config\.(?:bin|name|version))\s*%>/g, (template, key) => replacements[key] ?? template);
+}
+function flagToMeta(name, flag, config, commandId) {
     const isBoolean = flag.type === 'boolean';
     return {
         char: flag.char,
         default: isBoolean ? undefined : flag.default,
-        description: flag.summary ?? flag.description,
+        description: renderMetadataText(flag.summary ?? flag.description, config, commandId),
         multiple: !isBoolean && Boolean(flag.multiple),
         name,
         options: isBoolean ? undefined : flag.options,
@@ -11,10 +22,10 @@ function flagToMeta(name, flag) {
         type: isBoolean ? 'boolean' : 'option',
     };
 }
-function argToMeta(name, arg) {
+function argToMeta(name, arg, config, commandId) {
     return {
         default: arg.default,
-        description: arg.description,
+        description: renderMetadataText(arg.description, config, commandId),
         name,
         options: arg.options,
         required: Boolean(arg.required),
@@ -26,19 +37,21 @@ function argToMeta(name, arg) {
  */
 export function describeCommands(config) {
     return config.commands
-        .filter((cmd) => !cmd.hidden)
+        .filter((cmd) => !cmd.hidden && !(cmd.id === 'webui' && cmd.pluginName === '@hesed/webui'))
         .map((cmd) => ({
         aliases: cmd.aliases ?? [],
-        args: Object.entries(cmd.args ?? {}).map(([name, arg]) => argToMeta(name, arg)),
-        description: cmd.description,
+        args: Object.entries(cmd.args ?? {}).map(([name, arg]) => argToMeta(name, arg, config, cmd.id)),
+        description: renderMetadataText(cmd.description, config, cmd.id),
         flags: Object.entries(cmd.flags ?? {})
             .filter(([, flag]) => !flag.hidden)
-            .map(([name, flag]) => flagToMeta(name, flag)),
+            .map(([name, flag]) => flagToMeta(name, flag, config, cmd.id)),
         id: cmd.id,
         pluginName: cmd.pluginName,
         pluginType: cmd.pluginType,
-        summary: cmd.summary,
-        usage: cmd.usage,
+        summary: renderMetadataText(cmd.summary, config, cmd.id),
+        usage: Array.isArray(cmd.usage)
+            ? cmd.usage.map((usage) => renderMetadataText(usage, config, cmd.id) ?? usage)
+            : renderMetadataText(cmd.usage, config, cmd.id),
     }))
         .sort((a, b) => a.id.localeCompare(b.id));
 }

package/dist/lib/server.d.ts

@@ -1,5 +1,5 @@
 import type { Config } from '@oclif/core';
-import type { Server } from 'node:http';
+import type { IncomingMessage, Server, ServerResponse } from 'node:http';
 interface ServerOptions {
     config: Config;
     host: string;
@@ -9,6 +9,12 @@ interface RunningServer {
     server: Server;
     url: string;
 }
+/**
+ * Handle the small JSON API the browser app talks to. Returns `true` if the
+ * request was an API request (and has been answered), `false` otherwise so the
+ * caller can hand it to Next.js.
+ */
+export declare function handleApi(config: Config, req: IncomingMessage, res: ServerResponse): Promise<boolean>;
 /**
  * Start the web UI server: a Next.js app for the front-end plus a JSON API
  * (served from the same origin) that introspects and runs oclif commands.

package/dist/lib/server.js

@@ -25,7 +25,7 @@ async function readJsonBody(req) {
  * request was an API request (and has been answered), `false` otherwise so the
  * caller can hand it to Next.js.
  */
-async function handleApi(config, req, res) {
+export async function handleApi(config, req, res) {
     const { pathname } = new URL(req.url ?? '/', 'http://localhost');
     if (!pathname?.startsWith('/api/'))
         return false;

package/oclif.manifest.json

@@ -50,5 +50,5 @@
       ]
     }
   },
-  "version": "0.1.0"
+  "version": "0.2.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hesed/webui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Web UI to browse and execute commands",
   "author": "Hesed",
   "bin": {

package/web/app/globals.css

@@ -128,12 +128,54 @@ body {
   border-color: var(--accent);
 }
 
+.topic-filter {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.topic-filter label,
+.topic-heading {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.topic-filter select {
+  min-width: 0;
+  padding: 7px 9px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.topic-filter select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
 .command-list {
   overflow-y: auto;
   flex: 1;
   padding: 8px;
 }
 
+.command-group + .command-group {
+  margin-top: 10px;
+}
+
+.topic-heading {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 10px 4px;
+}
+
 .command-item {
   width: 100%;
   text-align: left;

package/web/app/page.tsx

@@ -43,7 +43,7 @@ export default function Page() {
       />
       <main className="main">
         {selected ? (
-          <CommandDetail bin={data.bin} command={selected} />
+          <CommandDetail bin={data.bin} command={selected} key={selected.id} />
         ) : (
           <div className="empty">
             Select a command from the left to view its options and run it.

package/web/components/command-detail.tsx

@@ -10,7 +10,6 @@ export function CommandDetail({bin, command}: {bin: string; command: CommandMeta
   const [result, setResult] = useState<null | RunResult>(null)
   const [running, setRunning] = useState(false)
 
-  // Reset form state whenever the selected command changes.
   const argv = useMemo(() => buildArgv(command, argValues, flagValues), [command, argValues, flagValues])
   const preview = `${bin || 'sdkck'} ${command.id}${argv.length > 0 ? ' ' + argv.join(' ') : ''}`
 
@@ -32,7 +31,7 @@ export function CommandDetail({bin, command}: {bin: string; command: CommandMeta
   }
 
   return (
-    <div className="detail" key={command.id}>
+    <div className="detail">
       <h1>
         {command.id}
         {command.pluginName && <span className="badge">{command.pluginName}</span>}

package/web/components/command-list.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import {useMemo, useState} from 'react'
+
 import type {CommandMeta} from '../lib/types'
 
 import {ThemeToggle} from './theme-toggle'
@@ -21,7 +23,19 @@ export function CommandList({
   setQuery: (q: string) => void
   version: string
 }) {
+  const [topic, setTopic] = useState('all')
+  const topics = useMemo(() => {
+    const counts = new Map<string, number>()
+    for (const command of commands) {
+      const commandTopic = command.id.split(':', 1)[0]
+      counts.set(commandTopic, (counts.get(commandTopic) ?? 0) + 1)
+    }
+
+    return [...counts].sort(([a], [b]) => a.localeCompare(b))
+  }, [commands])
+
   const filtered = commands.filter((cmd) => {
+    if (topic !== 'all' && cmd.id.split(':', 1)[0] !== topic) return false
     if (!query) return true
     const haystack = `${cmd.id} ${cmd.summary ?? ''} ${cmd.description ?? ''}`.toLowerCase()
     return query
@@ -47,20 +61,44 @@ export function CommandList({
           type="text"
           value={query}
         />
+        <div className="topic-filter">
+          <label htmlFor="topic">Topic</label>
+          <select id="topic" onChange={(event) => setTopic(event.target.value)} value={topic}>
+            <option value="all">All topics ({commands.length})</option>
+            {topics.map(([name, count]) => (
+              <option key={name} value={name}>
+                {name} ({count})
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
       <nav className="command-list">
         {filtered.length === 0 && <div className="empty">No commands match.</div>}
-        {filtered.map((cmd) => (
-          <button
-            className={`command-item${cmd.id === selectedId ? ' active' : ''}`}
-            key={cmd.id}
-            onClick={() => onSelect(cmd.id)}
-            type="button"
-          >
-            <span className="cmd-id">{cmd.id}</span>
-            <span className="cmd-summary">{cmd.summary ?? cmd.description ?? ''}</span>
-          </button>
-        ))}
+        {topics.map(([name]) => {
+          const topicCommands = filtered.filter((command) => command.id.split(':', 1)[0] === name)
+          if (topicCommands.length === 0) return null
+
+          return (
+            <section className="command-group" key={name}>
+              <div className="topic-heading">
+                <span>{name}</span>
+                <span>{topicCommands.length}</span>
+              </div>
+              {topicCommands.map((cmd) => (
+                <button
+                  className={`command-item${cmd.id === selectedId ? ' active' : ''}`}
+                  key={cmd.id}
+                  onClick={() => onSelect(cmd.id)}
+                  type="button"
+                >
+                  <span className="cmd-id">{cmd.id}</span>
+                  <span className="cmd-summary">{cmd.summary ?? cmd.description ?? ''}</span>
+                </button>
+              ))}
+            </section>
+          )
+        })}
       </nav>
     </aside>
   )

package/web/.next/BUILD_ID

@@ -1 +0,0 @@
-LEwu5WvMMaoVEbVj3-KGq

package/web/.next/app-build-manifest.json

@@ -1,26 +0,0 @@
-{
-  "pages": {
-    "/_not-found/page": [
-      "static/chunks/webpack-3046868c425865e4.js",
-      "static/chunks/c7879cf7-b5ab1053c1d9a2e7.js",
-      "static/chunks/131-a68a87dd22cef82b.js",
-      "static/chunks/main-app-a3b742ef05fa17a3.js",
-      "static/chunks/app/_not-found/page-784ddbf5f1a9343a.js"
-    ],
-    "/layout": [
-      "static/chunks/webpack-3046868c425865e4.js",
-      "static/chunks/c7879cf7-b5ab1053c1d9a2e7.js",
-      "static/chunks/131-a68a87dd22cef82b.js",
-      "static/chunks/main-app-a3b742ef05fa17a3.js",
-      "static/css/48007c73fe98a161.css",
-      "static/chunks/app/layout-4e0fe443358078fc.js"
-    ],
-    "/page": [
-      "static/chunks/webpack-3046868c425865e4.js",
-      "static/chunks/c7879cf7-b5ab1053c1d9a2e7.js",
-      "static/chunks/131-a68a87dd22cef82b.js",
-      "static/chunks/main-app-a3b742ef05fa17a3.js",
-      "static/chunks/app/page-d098bd39f1fcec43.js"
-    ]
-  }
-}

package/web/.next/app-path-routes-manifest.json

@@ -1,4 +0,0 @@
-{
-  "/_not-found/page": "/_not-found",
-  "/page": "/"
-}

package/web/.next/build-manifest.json

@@ -1,33 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-42372ed130431b0a.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/LEwu5WvMMaoVEbVj3-KGq/_buildManifest.js",
-    "static/LEwu5WvMMaoVEbVj3-KGq/_ssgManifest.js"
-  ],
-  "rootMainFiles": [
-    "static/chunks/webpack-3046868c425865e4.js",
-    "static/chunks/c7879cf7-b5ab1053c1d9a2e7.js",
-    "static/chunks/131-a68a87dd22cef82b.js",
-    "static/chunks/main-app-a3b742ef05fa17a3.js"
-  ],
-  "rootMainFilesTree": {},
-  "pages": {
-    "/_app": [
-      "static/chunks/webpack-3046868c425865e4.js",
-      "static/chunks/framework-1934959d81242241.js",
-      "static/chunks/main-a8814cf406d931cd.js",
-      "static/chunks/pages/_app-930c2e1cfe9b86bc.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-3046868c425865e4.js",
-      "static/chunks/framework-1934959d81242241.js",
-      "static/chunks/main-a8814cf406d931cd.js",
-      "static/chunks/pages/_error-2a950c2742f550d2.js"
-    ]
-  },
-  "ampFirstPages": []
-}

package/web/.next/cache/.previewinfo

@@ -1 +0,0 @@
-{"previewModeId":"63f2f8c7b13438f3b92669c1ecce7f00","previewModeSigningKey":"64015a693092958936de470ce931f1bd410de8a2f8c6aef1ce8af87de8375dcd","previewModeEncryptionKey":"72cf980c4c8d18be499583dc84861c68dbaeb46f8b8df13c3aef3591b5cc4151","expireAt":1783148711578}

package/web/.next/cache/.rscinfo

@@ -1 +0,0 @@
-{"encryption.key":"SUJ1L2Gp2SxF0qg4pIsnWs4EdpXdO3e+Eff5rWKj3xA=","encryption.expire_at":1783146077960}