@lokvis/ui-react 0.1.0

package/src/components/Inspector.tsx

@@ -0,0 +1,158 @@
+/**
+ * Inspector - 右侧面板
+ *
+ * 上半部分：当前选中节点的参数配置（Configure）
+ * 下半部分：可用 Capabilities 列表（点击添加到工作流）
+ */
+
+import * as React from 'react';
+import { useWorkspaceStore } from '../store/index.js';
+import { ParamForm } from './ParamForm.js';
+
+export interface InspectorProps {
+  className?: string;
+}
+
+export function Inspector({ className = '' }: InspectorProps) {
+  const capabilities = useWorkspaceStore((s) => s.capabilities);
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+  const capabilityMap = useWorkspaceStore((s) => s.capabilityMap);
+  const addNode = useWorkspaceStore((s) => s.addNode);
+  const updateNodeParams = useWorkspaceStore((s) => s.updateNodeParams);
+
+  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+  const [filter, setFilter] = React.useState('');
+  const [configureOpen, setConfigureOpen] = React.useState(true);
+
+  const filtered = capabilities.filter(
+    (c) =>
+      c.name.toLowerCase().includes(filter.toLowerCase()) ||
+      c.description.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  // 按域分组
+  const grouped = React.useMemo(() => {
+    const map = new Map<string, typeof filtered>();
+    for (const cap of filtered) {
+      const domain = cap.name.split('.')[0] ?? 'other';
+      if (!map.has(domain)) map.set(domain, []);
+      map.get(domain)!.push(cap);
+    }
+    return map;
+  }, [filtered]);
+
+  const showConfigure = selectedNode && capabilityMap[selectedNode.capability];
+
+  return (
+    <aside
+      className={`flex w-72 shrink-0 flex-col border-l border-zinc-200 dark:border-zinc-800 ${className}`}
+    >
+      {/* Configure section (when a node is selected) */}
+      {showConfigure && (
+        <div className="shrink-0 border-b border-zinc-200 dark:border-zinc-800">
+          <button
+            type="button"
+            onClick={() => setConfigureOpen(!configureOpen)}
+            className="flex w-full items-center justify-between px-3 h-10 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+          >
+            <div className="flex items-center gap-2">
+              <svg className={`h-3 w-3 text-zinc-400 transition-transform ${configureOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7"/></svg>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Configure</span>
+            </div>
+            <span className="font-mono text-[10px] text-indigo-500 bg-indigo-50 dark:bg-indigo-950/30 px-1.5 py-0.5 rounded">
+              {selectedNode.capability}
+            </span>
+          </button>
+          {configureOpen && (
+            <div className="px-3 pb-3 max-h-60 overflow-y-auto">
+              <ParamForm
+                capability={capabilityMap[selectedNode.capability]!}
+                values={selectedNode.params}
+                onChange={(params) => updateNodeParams(selectedNode.id, params)}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Capabilities section */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex items-center justify-between px-3 h-10 shrink-0 border-b border-zinc-200 dark:border-zinc-800">
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+            Capabilities
+          </span>
+          <span className="text-[11px] tabular-nums text-zinc-400">{filtered.length}</span>
+        </div>
+
+        {/* Search */}
+        <div className="px-2 py-2 border-b border-zinc-100 dark:border-zinc-800/50">
+          <div className="relative">
+            <svg className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            <input
+              type="text"
+              placeholder="Search capabilities..."
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              className="w-full rounded-md border border-zinc-200 bg-white py-1 pl-7 pr-2 text-[11px] placeholder-zinc-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400 dark:border-zinc-700 dark:bg-zinc-900"
+            />
+          </div>
+        </div>
+
+        {/* Capability list */}
+        <div className="flex-1 overflow-y-auto p-2">
+          {capabilities.length === 0 ? (
+            <div className="px-2 py-8 text-center">
+              <p className="text-[11px] text-zinc-400">No capabilities loaded</p>
+              <p className="mt-1 text-[10px] text-zinc-500">Load a plugin to get started</p>
+            </div>
+          ) : filtered.length === 0 ? (
+            <p className="px-2 py-4 text-[11px] text-zinc-400">No matching capabilities</p>
+          ) : (
+            <div className="space-y-3">
+              {Array.from(grouped.entries()).map(([domain, caps]) => (
+                <div key={domain}>
+                  <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
+                    {domain}
+                  </div>
+                  <ul className="space-y-0.5">
+                    {caps.map((cap) => {
+                      const isInPipeline = nodes.some((n) => n.capability === cap.name);
+                      return (
+                        <li key={cap.name}>
+                          <button
+                            type="button"
+                            onClick={() => addNode(cap.name)}
+                            className={`group w-full rounded-md px-2 py-1.5 text-left transition-all ${
+                              isInPipeline
+                                ? 'bg-indigo-50/50 ring-1 ring-indigo-200 dark:bg-indigo-950/20 dark:ring-indigo-800'
+                                : 'hover:bg-zinc-50 dark:hover:bg-zinc-800'
+                            }`}
+                          >
+                            <div className="flex items-center justify-between gap-2">
+                              <span className="truncate font-mono text-[11px] font-medium">{cap.name}</span>
+                              <span className={`shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase ${
+                                cap.performance === 'fast'
+                                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                                  : cap.performance === 'medium'
+                                  ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                                  : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
+                              }`}>
+                                {cap.performance}
+                              </span>
+                            </div>
+                            <p className="mt-0.5 truncate text-[10px] text-zinc-500 dark:text-zinc-400">{cap.description}</p>
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/components/ParamForm.tsx

@@ -0,0 +1,163 @@
+/**
+ * ParamForm - 能力参数表单
+ *
+ * 根据 Capability 的 params Schema 自动生成表单。
+ * 紧凑行内布局，适配 Inspector 面板。
+ */
+
+import type { Capability, CapabilityParam } from '@lokvis/schema';
+
+export interface ParamFormProps {
+  capability: Capability;
+  values: Record<string, unknown>;
+  onChange: (values: Record<string, unknown>) => void;
+}
+
+export function ParamForm({ capability, values, onChange }: ParamFormProps) {
+  const set = (name: string, value: unknown) => {
+    onChange({ ...values, [name]: value });
+  };
+
+  if (capability.params.length === 0) {
+    return (
+      <p className="py-3 text-center text-[11px] text-zinc-400 italic">
+        This capability has no configurable parameters.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2.5">
+      {capability.params.map((p) => (
+        <ParamField
+          key={p.name}
+          param={p}
+          value={values[p.name]}
+          onChange={(v) => set(p.name, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+const inputBase =
+  'w-full rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 text-[11px] transition-colors focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400 dark:border-zinc-700 dark:bg-zinc-900';
+
+function ParamField({
+  param,
+  value,
+  onChange,
+}: {
+  param: CapabilityParam;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  if (param.type === 'boolean') {
+    return (
+      <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
+        <input
+          type="checkbox"
+          checked={Boolean(value ?? param.default)}
+          onChange={(e) => onChange(e.target.checked)}
+          className="h-3.5 w-3.5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
+        />
+        <span className="flex-1 text-[11px] text-zinc-700 dark:text-zinc-300">{param.name}</span>
+        {param.description && (
+          <span className="shrink-0 text-[10px] text-zinc-400">{param.description}</span>
+        )}
+      </label>
+    );
+  }
+
+  if (param.type === 'enum' && param.values) {
+    return (
+      <div>
+        <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
+          {param.name}
+          {param.required && <span className="ml-0.5 text-red-500">*</span>}
+        </label>
+        <select
+          value={(value as string) ?? (param.default as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          className={inputBase}
+        >
+          {param.values.map((v) => (
+            <option key={v} value={v}>{v}</option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (param.type === 'color') {
+    return (
+      <div>
+        <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
+          {param.name}
+        </label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={(value as string) ?? (param.default as string) ?? '#ffffff'}
+            onChange={(e) => onChange(e.target.value)}
+            className="h-7 w-7 shrink-0 cursor-pointer rounded border border-zinc-200 dark:border-zinc-700"
+          />
+          <input
+            type="text"
+            value={(value as string) ?? (param.default as string) ?? '#ffffff'}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputBase}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (param.type === 'number') {
+    return (
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className="text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
+            {param.name}
+            {param.required && <span className="ml-0.5 text-red-500">*</span>}
+          </label>
+          {(param.min !== undefined || param.max !== undefined) && (
+            <span className="text-[10px] text-zinc-400">
+              {param.min !== undefined ? param.min : '-'}
+              {' — '}
+              {param.max !== undefined ? param.max : '∞'}
+            </span>
+          )}
+        </div>
+        <input
+          type="number"
+          value={value === undefined ? (param.default as number | undefined) ?? '' : (value as number)}
+          min={param.min}
+          max={param.max}
+          onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+          className={inputBase}
+        />
+      </div>
+    );
+  }
+
+  // string / file / array / object → text input
+  return (
+    <div>
+      <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
+        {param.name}
+        {param.required && <span className="ml-0.5 text-red-500">*</span>}
+        {param.description && (
+          <span className="ml-1 font-normal text-zinc-400">{param.description}</span>
+        )}
+      </label>
+      <input
+        type="text"
+        value={(value as string) ?? (param.default as string) ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={param.type === 'file' ? 'data URL or path' : ''}
+        className={inputBase}
+      />
+    </div>
+  );
+}

package/src/components/PipelineBar.tsx

@@ -0,0 +1,125 @@
+/**
+ * PipelineBar - 工作流管道条
+ *
+ * 显示当前工作流的节点序列，支持选中、删除节点。
+ * 位于 Canvas 下方、StatusBar 上方。
+ */
+
+import * as React from 'react';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface PipelineBarProps {
+  className?: string;
+}
+
+export function PipelineBar({ className = '' }: PipelineBarProps) {
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+  const selectNode = useWorkspaceStore((s) => s.selectNode);
+  const removeNode = useWorkspaceStore((s) => s.removeNode);
+
+  return (
+    <div className={`flex h-10 shrink-0 items-center gap-2 border-t border-zinc-200 bg-white px-3 dark:border-zinc-800 dark:bg-zinc-900 ${className}`}>
+      <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-400 shrink-0">
+        Pipeline
+      </span>
+
+      {nodes.length === 0 ? (
+        <span className="text-[11px] text-zinc-400">
+          Empty &mdash; add capabilities from the right panel
+        </span>
+      ) : (
+        <div className="flex flex-1 items-center gap-1 overflow-x-auto min-w-0">
+          {/* Source indicator */}
+          <div className="flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 shrink-0">
+            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+            Source
+          </div>
+
+          {/* Arrow */}
+          <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
+          </svg>
+
+          {/* Nodes */}
+          {nodes.map((node, i) => {
+            const selected = node.id === selectedNodeId;
+            return (
+              <React.Fragment key={node.id}>
+                <button
+                  type="button"
+                  onClick={() => selectNode(node.id)}
+                  className={`group flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all ${
+                    selected
+                      ? 'bg-indigo-100 text-indigo-700 ring-1 ring-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:ring-indigo-700'
+                      : node.status === 'running'
+                      ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400'
+                      : node.status === 'success'
+                      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
+                      : node.status === 'failed'
+                      ? 'bg-red-100 text-red-700 dark:bg-red-950/30 dark:text-red-400'
+                      : 'bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700'
+                  }`}
+                >
+                  <span className="font-mono">{node.capability}</span>
+                  <StatusDot status={node.status} />
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeNode(node.id);
+                    }}
+                    className="ml-0.5 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/40"
+                    role="button"
+                    aria-label="Remove step"
+                  >
+                    <svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+                  </span>
+                </button>
+
+                {/* Arrow between nodes */}
+                {i < nodes.length - 1 && (
+                  <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
+                  </svg>
+                )}
+              </React.Fragment>
+            );
+          })}
+
+          {/* Output indicator */}
+          <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
+          </svg>
+          <div className="flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 shrink-0">
+            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
+            Output
+          </div>
+        </div>
+      )}
+
+      {/* Step count */}
+      {nodes.length > 0 && (
+        <span className="shrink-0 text-[10px] tabular-nums text-zinc-400">
+          {nodes.length} step{nodes.length !== 1 ? 's' : ''}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function StatusDot({ status }: { status: string }) {
+  const color =
+    status === 'running'
+      ? 'bg-amber-500'
+      : status === 'success'
+      ? 'bg-emerald-500'
+      : status === 'failed'
+      ? 'bg-red-500'
+      : status === 'pending'
+      ? 'bg-zinc-400 dark:bg-zinc-500'
+      : 'bg-zinc-300 dark:bg-zinc-600';
+
+  const animate = status === 'running' ? 'animate-pulse' : '';
+
+  return <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${color} ${animate}`} />;
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,63 @@
+/**
+ * StatusBar - 底部状态栏
+ *
+ * 紧凑单行：左侧状态指示，右侧资源统计。
+ */
+
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface StatusBarProps {
+  className?: string;
+}
+
+export function StatusBar({ className = '' }: StatusBarProps) {
+  const statusMessage = useWorkspaceStore((s) => s.statusMessage);
+  const error = useWorkspaceStore((s) => s.error);
+  const running = useWorkspaceStore((s) => s.running);
+  const assets = useWorkspaceStore((s) => s.assets);
+  const capabilities = useWorkspaceStore((s) => s.capabilities);
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const setError = useWorkspaceStore((s) => s.setError);
+
+  return (
+    <footer
+      className={`flex h-7 shrink-0 items-center justify-between border-t border-zinc-200 bg-zinc-50 px-3 dark:border-zinc-800 dark:bg-zinc-950 ${className}`}
+    >
+      {/* Left: Status */}
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`h-1.5 w-1.5 rounded-full shrink-0 ${
+              error
+                ? 'bg-red-500'
+                : running
+                ? 'bg-amber-500 animate-pulse'
+                : 'bg-emerald-500'
+            }`}
+          />
+          <span className={`truncate text-[10px] ${error ? 'text-red-500' : 'text-zinc-500'}`}>
+            {statusMessage}
+          </span>
+        </span>
+        {error && (
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className="shrink-0 text-[10px] text-red-500 underline decoration-red-300 hover:text-red-600 dark:decoration-red-800"
+          >
+            dismiss
+          </button>
+        )}
+      </div>
+
+      {/* Right: Stats */}
+      <div className="flex items-center gap-3 shrink-0 text-[10px] text-zinc-400 tabular-nums">
+        <span>{assets.length} asset{assets.length !== 1 ? 's' : ''}</span>
+        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span>{capabilities.length} cap{capabilities.length !== 1 ? 's' : ''}</span>
+        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span>{nodes.length} step{nodes.length !== 1 ? 's' : ''}</span>
+      </div>
+    </footer>
+  );
+}

package/src/components/Toolbar.tsx

@@ -0,0 +1,87 @@
+/**
+ * Toolbar - 工作台顶部工具栏
+ *
+ * 左：Logo + 标题
+ * 中：状态消息
+ * 右：操作按钮组
+ */
+
+import * as React from 'react';
+import { Button } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface ToolbarProps {
+  title?: string;
+  rightExtra?: React.ReactNode;
+}
+
+export function Toolbar({ title = 'Lokvis Workspace', rightExtra }: ToolbarProps) {
+  const running = useWorkspaceStore((s) => s.running);
+  const statusMessage = useWorkspaceStore((s) => s.statusMessage);
+  const error = useWorkspaceStore((s) => s.error);
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
+  const run = useWorkspaceStore((s) => s.run);
+  const clearWorkflow = useWorkspaceStore((s) => s.clearWorkflow);
+  const setError = useWorkspaceStore((s) => s.setError);
+
+  const canRun = !running && nodes.length > 0 && !!selectedAssetId;
+
+  async function handleRun() {
+    try {
+      await run();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <header className="flex h-12 shrink-0 items-center justify-between border-b border-zinc-200 bg-white px-4 dark:border-zinc-800 dark:bg-zinc-900">
+      {/* Left: Brand */}
+      <div className="flex items-center gap-2.5 min-w-0">
+        <span
+          className="shrink-0 text-base font-bold leading-none"
+          style={{
+            background: 'linear-gradient(135deg, #6366f1, #a855f7)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          ◆
+        </span>
+        <span className="truncate text-sm font-semibold tracking-tight">{title}</span>
+      </div>
+
+      {/* Center: Status */}
+      <div className="flex flex-1 items-center justify-center px-4 min-w-0">
+        <span className={`truncate text-xs ${error ? 'text-red-500' : 'text-zinc-400'}`}>
+          {statusMessage}
+        </span>
+      </div>
+
+      {/* Right: Actions */}
+      <div className="flex items-center gap-1.5 shrink-0">
+        {rightExtra}
+        {nodes.length > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearWorkflow}
+            disabled={running}
+          >
+            Clear
+          </Button>
+        )}
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={handleRun}
+          loading={running}
+          disabled={!canRun}
+        >
+          Run
+        </Button>
+      </div>
+    </header>
+  );
+}