@hesed/webui 0.1.0 → 0.2.2

package/web/.next/types/app/page.ts

@@ -1,84 +0,0 @@
-// File: /Users/allentuh/projects/MCP/webui/web/app/page.tsx
-import * as entry from '../../../app/page.js'
-import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
-
-type TEntry = typeof import('../../../app/page.js')
-
-type SegmentParams<T extends Object = any> = T extends Record<string, any>
-  ? { [K in keyof T]: T[K] extends string ? string | string[] | undefined : never }
-  : T
-
-// Check that the entry is a valid entry
-checkFields<Diff<{
-  default: Function
-  config?: {}
-  generateStaticParams?: Function
-  revalidate?: RevalidateRange<TEntry> | false
-  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
-  dynamicParams?: boolean
-  fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
-  preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
-  runtime?: 'nodejs' | 'experimental-edge' | 'edge'
-  maxDuration?: number
-  
-  metadata?: any
-  generateMetadata?: Function
-  viewport?: any
-  generateViewport?: Function
-  experimental_ppr?: boolean
-  
-}, TEntry, ''>>()
-
-
-// Check the prop type of the entry function
-checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
-
-// Check the arguments and return type of the generateMetadata function
-if ('generateMetadata' in entry) {
-  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
-  checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
-}
-
-// Check the arguments and return type of the generateViewport function
-if ('generateViewport' in entry) {
-  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
-  checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
-}
-
-// Check the arguments and return type of the generateStaticParams function
-if ('generateStaticParams' in entry) {
-  checkFields<Diff<{ params: SegmentParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
-  checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
-}
-
-export interface PageProps {
-  params?: Promise<SegmentParams>
-  searchParams?: Promise<any>
-}
-export interface LayoutProps {
-  children?: React.ReactNode
-
-  params?: Promise<SegmentParams>
-}
-
-// =============
-// Utility types
-type RevalidateRange<T> = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never
-
-// If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>.
-type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K>
-type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message>
-
-type FirstArg<T extends Function> = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never
-type SecondArg<T extends Function> = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never
-type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never
-
-
-
-function checkFields<_ extends { [k in keyof any]: never }>() {}
-
-// https://github.com/sindresorhus/type-fest
-type Numeric = number | bigint
-type Zero = 0 | 0n
-type Negative<T extends Numeric> = T extends Zero ? never : `${T}` extends `-${string}` ? T : never
-type NonNegative<T extends Numeric> = T extends Zero ? T : Negative<T> extends never ? T : '__invalid_negative_number__'

package/web/.next/types/package.json

@@ -1 +0,0 @@
-{"type": "module"}

package/web/app/globals.css

@@ -1,339 +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);
-}
-
-.command-list {
-  overflow-y: auto;
-  flex: 1;
-  padding: 8px;
-}
-
-.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} />
-        ) : (
-          <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,160 +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)
-
-  // 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>
-  )
-}