total-recall-brain 3.44.0 → 3.46.0

package/frontend/src/components/plugins/card/runner.tsx

@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { runPluginCommand } from '../../../api/plugins'
-import type { PluginExecution } from '../../../api/plugins'
-import { buildArgs, type ArgValues } from './args'
-import type { Card, Loose } from './contract'
-import { RunnerContext, type ActivityEntry, type RunResult } from './runner-context'
-
-/**
- * The schema-backed path from a card to a plugin or selected CLI agent. The activity
- * entries record command, outcome and duration, never arguments or output.
- */
-export function CardRunner({ card, children }: { card: Card; children: ReactNode }) {
-  const [activity, setActivity] = useState<ActivityEntry[]>([])
-  const [busy, setBusy] = useState<Set<string>>(new Set())
-  const [execution, setExecution] = useState<PluginExecution | null>(null)
-  const cardRef = useRef(card)
-  useEffect(() => { cardRef.current = card }, [card])
-  const run = useCallback(async (name: string, values: ArgValues = {}, extra: string[] = [], stdin?: string): Promise<RunResult> => {
-    const command = cardRef.current.commands.get(name)
-    if (!command) return { ok: false, text: '', error: `${name} is not a declared command`, ms: 0 }
-    if (execution && !execution.permissions[command.effect]) return { ok: false, text: '', error: `The ${command.effect} command permission is off`, ms: 0 }
-    if (stdin !== undefined && execution && (execution.agent !== 'direct' || execution.node !== 'local')) return { ok: false, text: '', error: 'Credential operations run directly on this node', ms: 0 }
-    const started = performance.now()
-    setBusy(previous => new Set(previous).add(name))
-    let result: RunResult
-    try {
-      const argv = buildArgs(command, values, extra)
-      const options = stdin !== undefined ? { stdin } : execution ? { execution } : undefined
-      const response = options ? await runPluginCommand(cardRef.current.id, name, argv, options) : await runPluginCommand(cardRef.current.id, name, argv)
-      const text = response.output || ''
-      let data: Loose
-      if (command.output === 'json' && text.trim()) { try { data = JSON.parse(text) } catch { /* shown as text */ } }
-      result = { ok: !!response.success, data, text, error: response.success ? undefined : response.timedOut ? 'The command timed out' : response.error || 'The command failed', ms: Math.round(performance.now() - started) }
-    } catch (err: unknown) {
-      result = { ok: false, text: '', error: err instanceof Error ? err.message : 'The command failed', ms: Math.round(performance.now() - started) }
-    }
-    setBusy(previous => { const next = new Set(previous); next.delete(name); return next })
-    setActivity(previous => [{ at: new Date().toISOString(), command: name, effect: command.effect, ok: result.ok, ms: result.ms }, ...previous].slice(0, 100))
-    return result
-  }, [execution])
-  const value = useMemo(() => ({ card, run, activity, busy, execution, setExecution }), [card, run, activity, busy, execution])
-  return <RunnerContext.Provider value={value}>{children}</RunnerContext.Provider>
-}

package/frontend/src/components/plugins/card/theme.ts

@@ -1,35 +0,0 @@
-import type { CSSProperties } from 'react'
-import type { CardBranding } from './contract'
-
-const FONT_STACKS: Record<string, string> = {
-  system: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  inter: 'Inter, system-ui, sans-serif',
-  'ibm-plex': '"IBM Plex Sans", system-ui, sans-serif',
-  'space-grotesk': '"Space Grotesk", system-ui, sans-serif',
-  'jetbrains-mono': '"JetBrains Mono", ui-monospace, monospace',
-  'dm-sans': '"DM Sans", system-ui, sans-serif',
-  outfit: 'Outfit, system-ui, sans-serif',
-  fraunces: 'Fraunces, Georgia, serif',
-  newsreader: 'Newsreader, Georgia, serif',
-  'chivo-mono': '"Chivo Mono", ui-monospace, monospace',
-}
-const RADIUS = { none: '0px', sm: '3px', md: '8px', lg: '14px', pill: '22px' }
-const GAP = { compact: '8px', comfortable: '14px', spacious: '22px' }
-
-/** WCAG relative luminance; text on a brand fill uses whichever ink reads better. */
-function luminance(hex: string) {
-  const [r, g, b] = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255).map(c => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b
-}
-export const contrast = (a: string, b: string) => { const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05) }
-export const inkOn = (fill: string) => contrast(fill, '#ffffff') >= contrast(fill, '#111111') ? '#ffffff' : '#111111'
-
-export function brandStyle(branding: CardBranding): CSSProperties {
-  return {
-    '--card-color': branding.color, '--card-accent': branding.accent,
-    '--card-on-color': inkOn(branding.color), '--card-on-accent': inkOn(branding.accent),
-    '--card-font': FONT_STACKS[branding.font] || FONT_STACKS.system,
-    '--card-radius': RADIUS[branding.radius], '--card-gap': GAP[branding.density],
-    fontFamily: 'var(--card-font)',
-  } as CSSProperties
-}

package/frontend/src/components/plugins/card/use-source.ts

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { useRunner, type RunResult } from './runner-context'
-
-/** Runs a read command now and on an interval. Cards observe; they never mutate. */
-export function useSource(command: string | undefined, args: string[] = [], refreshSeconds = 0) {
-  const { run, busy } = useRunner()
-  const [result, setResult] = useState<RunResult | null>(null)
-  const key = JSON.stringify(args)
-  const load = useCallback(async () => {
-    if (!command) return
-    setResult(await run(command, {}, JSON.parse(key)))
-  }, [command, key, run])
-  useEffect(() => {
-    if (!command) return
-    let live = true
-    const poll = () => { run(command, {}, JSON.parse(key)).then(next => { if (live) setResult(next) }) }
-    poll()
-    const timer = refreshSeconds ? setInterval(poll, refreshSeconds * 1000) : undefined
-    return () => { live = false; if (timer) clearInterval(timer) }
-  }, [command, key, refreshSeconds, run])
-  return { result, loading: !!command && busy.has(command), reload: load }
-}

package/frontend/src/components/plugins/card/widgets.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react'
-import type { PluginInfo } from '../../../api/plugins'
-import { PluginSettings } from '../PluginSettings'
-import { defaultValue, missingRequired, visibleArgs, type ArgValues } from './args'
-import { cliLine } from './cli-line'
-import type { CardCommand } from './contract'
-import { scalarsOf, toneOf } from './format'
-import { useRunner, type RunResult } from './runner-context'
-import { useSource } from './use-source'
-
-const Pill = ({ tone, children }: { tone: string; children: React.ReactNode }) => <span className={`card-pill card-pill-${tone}`}>{children}</span>
-
-function Failure({ result }: { result: RunResult }) {
-  return <p role="alert" className="card-error">{result.error || 'No data'}</p>
-}
-
-export function StatusWidget() {
-  const { card } = useRunner()
-  const { result, loading, reload } = useSource(card.status?.command, [], card.status?.refreshSeconds)
-  if (!card.status) return <p className="card-muted">This plugin declares no status command.</p>
-  const data = result?.data
-  const scalars = scalarsOf(data)
-  const state = data?.state ?? (data?.ok === false ? 'error' : data?.ok === true ? 'ok' : undefined)
-  return <div>
-    <div className="card-row">
-      {!result ? <Pill tone="neutral">Checking…</Pill> : !result.ok ? <Pill tone="error">Unreachable</Pill> : <Pill tone={toneOf(state ?? 'ok')}>{String(state ?? 'Responding')}</Pill>}
-      <button type="button" className="card-link" onClick={() => void reload()} disabled={loading}>{loading ? 'Refreshing…' : 'Refresh'}</button>
-    </div>
-    {result && !result.ok && <Failure result={result} />}
-    {scalars.length > 0 && <dl className="card-kv">{scalars.filter(([k]) => k !== 'state').map(([k, v]) => <div key={k}><dt>{k.replace(/_/g, ' ')}</dt><dd>{v}</dd></div>)}</dl>}
-    {result?.ok && !data && result.text && <pre className="card-pre">{result.text}</pre>}
-  </div>
-}
-
-function ReadForm({ command }: { command: CardCommand }) {
-  const { run, busy } = useRunner()
-  const args = visibleArgs(command)
-  const [values, setValues] = useState<ArgValues>(() => Object.fromEntries(args.map(a => [a.name, defaultValue(a)])))
-  const [result, setResult] = useState<RunResult | null>(null)
-  const [confirmed, setConfirmed] = useState(false)
-  const [credential, setCredential] = useState('')
-  const secretArgs = command.args.filter(arg => arg.secret)
-  const stdinSupported = secretArgs.length === 1 && secretArgs[0].type === 'string' && !secretArgs[0].flag
-  const requiresConfirmation = command.effect !== 'read'
-  const missing = missingRequired(command, values)
-  return <form className="card-form" onSubmit={async event => { event.preventDefault(); if (requiresConfirmation && !confirmed) return; const input = stdinSupported ? credential : undefined; setCredential(''); setResult(await run(command.name, values, [], input)); setConfirmed(false) }}>
-    {args.map(arg => <label key={arg.name}>{arg.label}{arg.required ? ' *' : ''}
-      {arg.type === 'choice' ? <select value={String(values[arg.name] ?? '')} onChange={e => setValues({ ...values, [arg.name]: e.target.value })}>{!arg.required && <option value="">Any</option>}{arg.options?.map(o => <option key={String(o)} value={String(o)}>{String(o)}</option>)}</select>
-        : arg.type === 'boolean' ? <input type="checkbox" checked={!!values[arg.name]} onChange={e => setValues({ ...values, [arg.name]: e.target.checked })} />
-        : <input type={arg.type === 'number' ? 'number' : 'text'} value={String(values[arg.name] ?? '')} onChange={e => setValues({ ...values, [arg.name]: arg.type === 'number' && e.target.value !== '' ? Number(e.target.value) : e.target.value })} />}
-    </label>)}
-    {stdinSupported && <label>{secretArgs[0].label}<input type="password" autoComplete="new-password" value={credential} maxLength={65536} onChange={event => setCredential(event.target.value)} /></label>}
-    {secretArgs.length > 0 && !stdinSupported && <p className="card-muted">Use connection settings for this credential operation.</p>}
-    {requiresConfirmation && <label><input type="checkbox" checked={confirmed} onChange={event => setConfirmed(event.target.checked)} />Confirm {command.name}</label>}
-    <button className="card-button" disabled={missing.length > 0 || busy.has(command.name) || (requiresConfirmation && !confirmed) || (secretArgs.length > 0 && (!stdinSupported || !credential))}>{busy.has(command.name) ? 'Running…' : command.effect === 'read' ? 'Look up' : 'Run command'}</button>
-    {result && (result.ok ? <pre className="card-pre">{result.data ? JSON.stringify(result.data, null, 2) : result.text}</pre> : <Failure result={result} />)}
-  </form>
-}
-
-/** Every declared operation, with arguments, explicit mutation confirmation and secure stdin. */
-export function CommandsWidget() {
-  const { card } = useRunner()
-  const cliName = card.id
-  const names = [...card.commands.keys()]
-  const [open, setOpen] = useState('')
-  const [copied, setCopied] = useState('')
-  return <ul className="card-commands">
-    {names.map(name => card.commands.get(name)).filter((c): c is CardCommand => !!c).map(command => {
-      const line = cliLine(card, command, cliName)
-      return <li key={command.name}>
-        <div className="card-row">
-          <strong>{command.name}</strong>
-          <Pill tone={command.effect === 'read' ? 'ok' : command.effect === 'write' ? 'neutral' : 'warn'}>{command.effect}</Pill>
-          <button type="button" className="card-link" onClick={() => setOpen(open === command.name ? '' : command.name)}>{open === command.name ? 'Close' : 'Try'}</button>
-        </div>
-        {command.description && <p className="card-muted">{command.description}</p>}
-        <div className="card-row"><code className="card-code">{line}</code>
-          <button type="button" className="card-link" onClick={async () => { try { await navigator.clipboard.writeText(line); setCopied(command.name) } catch { setCopied('') } }}>{copied === command.name ? 'Copied' : 'Copy'}</button></div>
-        {open === command.name && <ReadForm command={command} />}
-      </li>
-    })}
-    {names.length === 0 && <li className="card-muted">No commands declared.</li>}
-  </ul>
-}
-
-export function SettingsWidget({ plugin }: { plugin: PluginInfo }) {
-  return <PluginSettings plugin={plugin} />
-}
-
-export function ActivityWidget() {
-  const { activity } = useRunner()
-  if (activity.length === 0) return <p className="card-muted">No commands have run from this card in this session.</p>
-  return <ul className="card-list">{activity.slice(0, 20).map((a, i) => <li key={i}><Pill tone={a.ok ? 'ok' : 'error'}>{a.ok ? 'ok' : 'failed'}</Pill> {a.command} · {a.ms} ms · {new Date(a.at).toLocaleTimeString()}</li>)}</ul>
-}

package/frontend/src/components/plugins/workspace/WorkspaceHost.tsx

@@ -1,23 +0,0 @@
-import type { PluginInfo } from "../../../api/plugins";
-import type { Card } from "../card/contract";
-import { PluginPanel, pluginElements } from "../PluginPanel";
-
-export interface WorkspaceHostProps {
-  plugin: PluginInfo;
-  card: Card;
-}
-
-/**
- * Workspaces are owner-supplied interfaces, never product implementations in core.
- */
-export function WorkspaceHost({ plugin, card }: WorkspaceHostProps) {
-  const component = card.workspace?.component;
-  const element = pluginElements(plugin).find(item => item.id === component || item.tag === component);
-  if (!element) return <p role="status">This plugin has not supplied its workspace interface yet.</p>;
-  if (card.workspace?.permissions?.length) {
-    // An opaque frame cannot safely gain microphone access by adding allow-same-origin.
-    // Keep isolation intact until a dedicated device-capability bridge is available.
-    return <p role="status">This workspace requires device access that the host does not support yet.</p>;
-  }
-  return <PluginPanel plugin={plugin} elementId={element.id} />;
-}