@hesed/webui 0.2.0 → 0.2.2

package/web/app/globals.css

@@ -1,381 +0,0 @@
-/* Light mode (default) */
-:root {
-  --bg: #ffffff;
-  --panel: #f6f8fa;
-  --panel-2: #eaeef2;
-  --border: #d0d7de;
-  --text: #1f2328;
-  --muted: #57606a;
-  --accent: #0969da;
-  --accent-hover: #0550ae;
-  --green: #1a7f37;
-  --red: #d1242f;
-  --output-bg: #f6f8fa;
-  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-}
-
-/* Dark mode */
-.dark {
-  --bg: #0d1117;
-  --panel: #161b22;
-  --panel-2: #1c2128;
-  --border: #30363d;
-  --text: #e6edf3;
-  --muted: #8b949e;
-  --accent: #2f81f7;
-  --accent-hover: #4a90ff;
-  --green: #3fb950;
-  --red: #f85149;
-  --output-bg: #010409;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background: var(--bg);
-  color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  font-size: 14px;
-}
-
-.app {
-  display: grid;
-  grid-template-columns: 320px 1fr;
-  height: 100vh;
-}
-
-.sidebar {
-  border-right: 1px solid var(--border);
-  background: var(--panel);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.sidebar-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.brand-row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.brand {
-  font-weight: 700;
-  font-size: 16px;
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.brand small {
-  color: var(--muted);
-  font-weight: 400;
-  font-size: 12px;
-}
-
-.theme-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  transition:
-    color 0.15s,
-    background 0.15s,
-    border-color 0.15s;
-  flex-shrink: 0;
-}
-
-.theme-toggle:hover {
-  color: var(--text);
-  background: var(--panel-2);
-  border-color: var(--text);
-}
-
-.theme-toggle-placeholder {
-  width: 28px;
-  height: 28px;
-}
-
-.search {
-  width: 100%;
-  padding: 8px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-size: 13px;
-}
-
-.search:focus {
-  outline: none;
-  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;
-  background: transparent;
-  border: none;
-  color: var(--text);
-  padding: 8px 10px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: block;
-  font-size: 13px;
-}
-
-.command-item:hover {
-  background: var(--panel-2);
-}
-
-.command-item.active {
-  background: var(--accent);
-  color: #fff;
-}
-
-.command-item .cmd-id {
-  font-family: var(--mono);
-  font-weight: 600;
-}
-
-.command-item .cmd-summary {
-  display: block;
-  color: var(--muted);
-  font-size: 11px;
-  margin-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.command-item.active .cmd-summary {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.main {
-  overflow-y: auto;
-  padding: 28px 32px;
-  min-height: 0;
-}
-
-.empty {
-  color: var(--muted);
-  margin-top: 80px;
-  text-align: center;
-}
-
-.detail h1 {
-  font-family: var(--mono);
-  font-size: 22px;
-  margin: 0 0 6px;
-}
-
-.detail .desc {
-  color: var(--muted);
-  white-space: pre-wrap;
-  margin-bottom: 20px;
-  line-height: 1.5;
-}
-
-.section-title {
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-size: 11px;
-  color: var(--muted);
-  margin: 22px 0 10px;
-}
-
-.field {
-  margin-bottom: 14px;
-}
-
-.field label {
-  display: block;
-  font-family: var(--mono);
-  font-size: 13px;
-  margin-bottom: 4px;
-}
-
-.field label .req {
-  color: var(--red);
-  margin-left: 4px;
-}
-
-.field .hint {
-  color: var(--muted);
-  font-size: 12px;
-  margin: 2px 0 6px;
-}
-
-.field input[type='text'],
-.field select {
-  width: 100%;
-  padding: 7px 9px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-family: var(--mono);
-  font-size: 13px;
-}
-
-.field input:focus,
-.field select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.checkbox-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.checkbox-row input {
-  width: 16px;
-  height: 16px;
-}
-
-.preview {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 10px 12px;
-  font-family: var(--mono);
-  font-size: 13px;
-  color: var(--green);
-  margin-bottom: 16px;
-  word-break: break-all;
-}
-
-.run-btn {
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.run-btn:hover {
-  background: var(--accent-hover);
-}
-
-.run-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.output {
-  margin-top: 20px;
-}
-
-.output pre {
-  background: var(--output-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 14px;
-  font-family: var(--mono);
-  font-size: 12.5px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.status.ok {
-  color: var(--green);
-}
-
-.status.err {
-  color: var(--red);
-}
-
-.badge {
-  font-size: 10px;
-  font-family: var(--mono);
-  background: var(--panel-2);
-  border: 1px solid var(--border);
-  color: var(--muted);
-  padding: 1px 6px;
-  border-radius: 999px;
-  margin-left: 8px;
-  vertical-align: middle;
-}

package/web/app/layout.tsx

@@ -1,20 +0,0 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
-
-import './globals.css'
-import {ThemeProvider} from '../components/theme-provider'
-
-export const metadata: Metadata = {
-  description: 'Browse and run sdkck commands from your browser',
-  title: 'sdkck web UI',
-}
-
-export default function RootLayout({children}: {children: ReactNode}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body>
-        <ThemeProvider>{children}</ThemeProvider>
-      </body>
-    </html>
-  )
-}

package/web/app/page.tsx

@@ -1,57 +0,0 @@
-'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} key={selected.id} />
-        ) : (
-          <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

@@ -1,159 +0,0 @@
-'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)
-
-  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">
-      <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

@@ -1,105 +0,0 @@
-'use client'
-
-import {useMemo, useState} from 'react'
-
-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 [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
-      .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 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>}
-        {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>
-  )
-}