@hesed/webui 0.1.0

package/web/app/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import {useEffect, useState} from 'react'
+
+import type {CommandsResponse} from '../lib/types'
+
+import {CommandDetail} from '../components/command-detail'
+import {CommandList} from '../components/command-list'
+
+export default function Page() {
+  const [data, setData] = useState<CommandsResponse | null>(null)
+  const [error, setError] = useState<null | string>(null)
+  const [query, setQuery] = useState('')
+  const [selectedId, setSelectedId] = useState<string>()
+
+  useEffect(() => {
+    fetch('/api/commands')
+      .then((res) => res.json())
+      .then((json: CommandsResponse) => setData(json))
+      .catch((error_) => setError(String(error_)))
+  }, [])
+
+  if (error) {
+    return <div className="empty">Failed to load commands: {error}</div>
+  }
+
+  if (!data) {
+    return <div className="empty">Loading commands…</div>
+  }
+
+  const selected = data.commands.find((c) => c.id === selectedId)
+
+  return (
+    <div className="app">
+      <CommandList
+        bin={data.bin}
+        commands={data.commands}
+        onSelect={setSelectedId}
+        query={query}
+        selectedId={selectedId}
+        setQuery={setQuery}
+        version={data.version}
+      />
+      <main className="main">
+        {selected ? (
+          <CommandDetail bin={data.bin} command={selected} />
+        ) : (
+          <div className="empty">
+            Select a command from the left to view its options and run it.
+            <br />
+            {data.commands.length} commands available.
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/web/components/command-detail.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import {useMemo, useState} from 'react'
+
+import {buildArgv, type CommandMeta, type RunResult} from '../lib/types'
+
+export function CommandDetail({bin, command}: {bin: string; command: CommandMeta}) {
+  const [argValues, setArgValues] = useState<Record<string, string>>({})
+  const [flagValues, setFlagValues] = useState<Record<string, boolean | string>>({})
+  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(' ') : ''}`
+
+  async function run() {
+    setRunning(true)
+    setResult(null)
+    try {
+      const res = await fetch('/api/run', {
+        body: JSON.stringify({argv, id: command.id}),
+        headers: {'content-type': 'application/json'},
+        method: 'POST',
+      })
+      setResult((await res.json()) as RunResult)
+    } catch (error) {
+      setResult({durationMs: 0, error: String(error), output: String(error), success: false})
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  return (
+    <div className="detail" key={command.id}>
+      <h1>
+        {command.id}
+        {command.pluginName && <span className="badge">{command.pluginName}</span>}
+      </h1>
+      {(command.description || command.summary) && <p className="desc">{command.description ?? command.summary}</p>}
+
+      {command.args.length > 0 && (
+        <>
+          <div className="section-title">Arguments</div>
+          {command.args.map((arg) => (
+            <div className="field" key={arg.name}>
+              <label htmlFor={`arg-${arg.name}`}>
+                {arg.name}
+                {arg.required && <span className="req">*</span>}
+              </label>
+              {arg.description && <div className="hint">{arg.description}</div>}
+              {arg.options ? (
+                <select
+                  id={`arg-${arg.name}`}
+                  onChange={(e) => setArgValues((v) => ({...v, [arg.name]: e.target.value}))}
+                  value={argValues[arg.name] ?? ''}
+                >
+                  <option value="">— choose —</option>
+                  {arg.options.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  id={`arg-${arg.name}`}
+                  onChange={(e) => setArgValues((v) => ({...v, [arg.name]: e.target.value}))}
+                  placeholder={arg.default ? String(arg.default) : ''}
+                  type="text"
+                  value={argValues[arg.name] ?? ''}
+                />
+              )}
+            </div>
+          ))}
+        </>
+      )}
+
+      {command.flags.length > 0 && (
+        <>
+          <div className="section-title">Flags</div>
+          {command.flags.map((flag) =>
+            flag.type === 'boolean' ? (
+              <div className="field checkbox-row" key={flag.name}>
+                <input
+                  checked={flagValues[flag.name] === true}
+                  id={`flag-${flag.name}`}
+                  onChange={(e) => setFlagValues((v) => ({...v, [flag.name]: e.target.checked}))}
+                  type="checkbox"
+                />
+                <label htmlFor={`flag-${flag.name}`}>
+                  --{flag.name}
+                  {flag.description ? (
+                    <span className="hint" style={{display: 'inline', marginLeft: 8}}>
+                      {flag.description}
+                    </span>
+                  ) : null}
+                </label>
+              </div>
+            ) : (
+              <div className="field" key={flag.name}>
+                <label htmlFor={`flag-${flag.name}`}>
+                  --{flag.name}
+                  {flag.char ? ` (-${flag.char})` : ''}
+                  {flag.required && <span className="req">*</span>}
+                  {flag.multiple && <span className="badge">multiple</span>}
+                </label>
+                {flag.description && <div className="hint">{flag.description}</div>}
+                {flag.options ? (
+                  <select
+                    id={`flag-${flag.name}`}
+                    onChange={(e) => setFlagValues((v) => ({...v, [flag.name]: e.target.value}))}
+                    value={(flagValues[flag.name] as string) ?? ''}
+                  >
+                    <option value="">— choose —</option>
+                    {flag.options.map((opt) => (
+                      <option key={opt} value={opt}>
+                        {opt}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    id={`flag-${flag.name}`}
+                    onChange={(e) => setFlagValues((v) => ({...v, [flag.name]: e.target.value}))}
+                    placeholder={
+                      flag.default === undefined
+                        ? flag.multiple
+                          ? 'comma,separated,values'
+                          : ''
+                        : String(flag.default)
+                    }
+                    type="text"
+                    value={(flagValues[flag.name] as string) ?? ''}
+                  />
+                )}
+              </div>
+            ),
+          )}
+        </>
+      )}
+
+      <div className="section-title">Command</div>
+      <div className="preview">$ {preview}</div>
+
+      <button className="run-btn" disabled={running} onClick={run} type="button">
+        {running ? 'Running…' : 'Run command'}
+      </button>
+
+      {result && (
+        <div className="output">
+          <div className={`status ${result.success ? 'ok' : 'err'}`}>
+            {result.success ? '✓ Success' : '✗ Failed'} · {result.durationMs}ms
+          </div>
+          <pre>{result.output || '(no output)'}</pre>
+        </div>
+      )}
+    </div>
+  )
+}

package/web/components/command-list.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import type {CommandMeta} from '../lib/types'
+
+import {ThemeToggle} from './theme-toggle'
+
+export function CommandList({
+  bin,
+  commands,
+  onSelect,
+  query,
+  selectedId,
+  setQuery,
+  version,
+}: {
+  bin: string
+  commands: CommandMeta[]
+  onSelect: (id: string) => void
+  query: string
+  selectedId?: string
+  setQuery: (q: string) => void
+  version: string
+}) {
+  const filtered = commands.filter((cmd) => {
+    if (!query) return true
+    const haystack = `${cmd.id} ${cmd.summary ?? ''} ${cmd.description ?? ''}`.toLowerCase()
+    return query
+      .toLowerCase()
+      .split(/\s+/)
+      .every((term) => haystack.includes(term))
+  })
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-header">
+        <div className="brand-row">
+          <div className="brand">
+            {bin || 'sdkck'} <small>web UI · v{version}</small>
+          </div>
+          <ThemeToggle />
+        </div>
+        <input
+          aria-label="Filter commands"
+          className="search"
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Filter commands…"
+          type="text"
+          value={query}
+        />
+      </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>
+        ))}
+      </nav>
+    </aside>
+  )
+}

package/web/components/theme-provider.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import {ThemeProvider as NextThemesProvider} from 'next-themes'
+import {type ReactNode} from 'react'
+
+export function ThemeProvider({children}: {children: ReactNode}) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="dark" disableTransitionOnChange enableSystem>
+      {children}
+    </NextThemesProvider>
+  )
+}

package/web/components/theme-toggle.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import {useTheme} from 'next-themes'
+import {useEffect, useState} from 'react'
+
+export function ThemeToggle() {
+  const {setTheme, theme} = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="theme-toggle-placeholder" />
+  }
+
+  return (
+    <button
+      aria-label="Toggle theme"
+      className="theme-toggle"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      type="button"
+    >
+      {theme === 'dark' ? (
+        <svg
+          fill="none"
+          height="15"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="15"
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2" />
+          <path d="M12 20v2" />
+          <path d="m4.93 4.93 1.41 1.41" />
+          <path d="m17.66 17.66 1.41 1.41" />
+          <path d="M2 12h2" />
+          <path d="M20 12h2" />
+          <path d="m6.34 17.66-1.41 1.41" />
+          <path d="m19.07 4.93-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg
+          fill="none"
+          height="15"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="15"
+        >
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      )}
+    </button>
+  )
+}

package/web/lib/types.ts

@@ -0,0 +1,77 @@
+export interface FlagMeta {
+  char?: string
+  default?: unknown
+  description?: string
+  multiple: boolean
+  name: string
+  options?: string[]
+  required: boolean
+  type: 'boolean' | 'option'
+}
+
+export interface ArgMeta {
+  default?: unknown
+  description?: string
+  name: string
+  options?: string[]
+  required: boolean
+}
+
+export interface CommandMeta {
+  aliases: string[]
+  args: ArgMeta[]
+  description?: string
+  flags: FlagMeta[]
+  id: string
+  pluginName?: string
+  pluginType?: string
+  summary?: string
+  usage?: string | string[]
+}
+
+export interface CommandsResponse {
+  bin: string
+  commands: CommandMeta[]
+  version: string
+}
+
+export interface RunResult {
+  durationMs: number
+  error?: string
+  output: string
+  success: boolean
+}
+
+/** Build an oclif-style argv array from form values for a command. */
+export function buildArgv(
+  command: CommandMeta,
+  argValues: Record<string, string>,
+  flagValues: Record<string, boolean | string>,
+): string[] {
+  const argv: string[] = []
+
+  for (const arg of command.args) {
+    const value = argValues[arg.name]
+    if (value !== undefined && value !== '') argv.push(value)
+  }
+
+  for (const flag of command.flags) {
+    const value = flagValues[flag.name]
+    if (flag.type === 'boolean') {
+      if (value === true) argv.push(`--${flag.name}`)
+    } else if (typeof value === 'string' && value !== '') {
+      if (flag.multiple) {
+        for (const part of value
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)) {
+          argv.push(`--${flag.name}`, part)
+        }
+      } else {
+        argv.push(`--${flag.name}`, value)
+      }
+    }
+  }
+
+  return argv
+}

package/web/next.config.mjs

@@ -0,0 +1,14 @@
+import {dirname} from 'node:path'
+import {fileURLToPath} from 'node:url'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // The plugin ships its own lockfile alongside the host repo's; pin the trace
+  // root to this directory so Next doesn't guess the wrong workspace root.
+  outputFileTracingRoot: dirname(fileURLToPath(import.meta.url)),
+  // The app is always served behind the plugin's custom Node server, which owns
+  // the /api/* routes; Next only renders the UI.
+  reactStrictMode: true,
+}
+
+export default nextConfig

package/web/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{"name": "next"}],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}