@lokvis/ui-react 0.1.0

package/dist/store/workflow-slice.js

@@ -0,0 +1,133 @@
+import { genNodeId } from './types.js';
+export const createWorkflowSlice = (set, get) => ({
+    nodes: [],
+    selectedNodeId: null,
+    addNode(capability) {
+        const node = {
+            id: genNodeId(),
+            capability,
+            params: {},
+            status: 'idle',
+        };
+        set((state) => ({
+            nodes: [...state.nodes, node],
+            selectedNodeId: node.id,
+        }));
+    },
+    updateNodeParams(id, params) {
+        set((state) => ({
+            nodes: state.nodes.map((n) => (n.id === id ? { ...n, params } : n)),
+        }));
+    },
+    removeNode(id) {
+        set((state) => ({
+            nodes: state.nodes.filter((n) => n.id !== id),
+            selectedNodeId: state.selectedNodeId === id ? null : state.selectedNodeId,
+        }));
+    },
+    selectNode(id) {
+        set({ selectedNodeId: id });
+    },
+    setNodeStatus(id, status, error, duration) {
+        set((state) => ({
+            nodes: state.nodes.map((n) => n.id === id ? { ...n, status, error, duration } : n),
+        }));
+    },
+    async run() {
+        const { runtime, nodes, selectedAssetId } = get();
+        if (!runtime)
+            throw new Error('Runtime not initialized');
+        if (nodes.length === 0)
+            throw new Error('Workflow is empty');
+        if (!selectedAssetId)
+            throw new Error('No asset selected');
+        set({ running: true, error: null, statusMessage: 'Running...' });
+        // 重置所有节点状态
+        set((state) => ({
+            nodes: state.nodes.map((n) => ({ ...n, status: 'pending', error: undefined })),
+        }));
+        try {
+            // 构建 Workflow
+            const workflow = buildLinearWorkflow(nodes);
+            const input = await runtime.getAsset(selectedAssetId);
+            set({ statusMessage: 'Running workflow...' });
+            const result = await runtime.run(workflow, [input]);
+            // 更新节点状态
+            if (result.status === 'completed') {
+                for (const node of nodes) {
+                    get().setNodeStatus(node.id, 'success', undefined, undefined);
+                }
+            }
+            else if (result.status === 'failed') {
+                for (const node of nodes) {
+                    if (get().nodes.find((n) => n.id === node.id)?.status === 'pending') {
+                        get().setNodeStatus(node.id, 'failed', result.error);
+                    }
+                }
+            }
+            // 加载输出资产
+            const outputs = [];
+            for (const id of result.outputs) {
+                try {
+                    outputs.push(await runtime.getAsset(id));
+                }
+                catch {
+                    // skip
+                }
+            }
+            set({
+                running: false,
+                statusMessage: `Workflow ${result.status} in ${result.duration}ms`,
+            });
+            if (result.status === 'failed') {
+                set({ error: result.error ?? 'Workflow failed' });
+            }
+            await get().refreshAssets();
+            return outputs;
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            set({
+                running: false,
+                error: message,
+                statusMessage: 'Failed',
+            });
+            throw err;
+        }
+    },
+    clearWorkflow() {
+        set({ nodes: [], selectedNodeId: null });
+    },
+});
+/** 把工作台节点序列构建为线性 Workflow */
+function buildLinearWorkflow(nodes) {
+    if (nodes.length === 0) {
+        throw new Error('Workflow is empty');
+    }
+    const workflowNodes = nodes.map((n) => ({
+        id: n.id,
+        type: 'transform',
+        capability: n.capability,
+        params: n.params,
+    }));
+    const edges = [];
+    for (let i = 0; i < workflowNodes.length - 1; i++) {
+        edges.push({ from: workflowNodes[i].id, to: workflowNodes[i + 1].id });
+    }
+    return {
+        id: `wf_${Date.now().toString(36)}`,
+        name: 'Workspace Workflow',
+        version: '1',
+        description: 'Workspace linear workflow',
+        author: { id: 'local', name: 'Local User' },
+        category: 'image',
+        tags: [],
+        nodes: workflowNodes,
+        edges,
+        inputs: { type: 'image', multiple: true },
+        outputs: { type: 'image' },
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+    };
+}
+//# sourceMappingURL=workflow-slice.js.map

package/dist/store/workflow-slice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-slice.js","sourceRoot":"","sources":["../../src/store/workflow-slice.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Workspace UI 类型定义
+ */
+import type { Asset, Capability, WorkflowResult } from '@lokvis/schema';
+/** 工作台事件（用于事件回调） */
+export interface WorkspaceEvent {
+    type: 'asset:imported' | 'asset:selected' | 'asset:removed' | 'capability:added' | 'workflow:started' | 'workflow:completed' | 'workflow:failed';
+    payload?: unknown;
+}
+/** 节点状态 */
+export type NodeStatus = 'idle' | 'pending' | 'running' | 'success' | 'failed' | 'cancelled';
+/** 已添加到工作台的工作流节点 */
+export interface WorkspaceNode {
+    id: string;
+    capability: string;
+    params: Record<string, unknown>;
+    status: NodeStatus;
+    /** 上次执行的耗时（毫秒） */
+    duration?: number;
+    /** 错误信息 */
+    error?: string;
+}
+/** 工作台运行结果摘要 */
+export interface RunSummary {
+    result?: WorkflowResult;
+    outputs: Asset[];
+    duration: number;
+}
+/** 资产缩略图缓存 */
+export type ThumbnailMap = Record<string, string>;
+/** 能力映射表（按能力名索引） */
+export type CapabilityMap = Record<string, Capability>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAExE,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC7B,IAAI,EACA,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,iBAAiB,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,WAAW;AACX,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE7F,oBAAoB;AACpB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,MAAM,EAAE,UAAU,CAAC;IACnB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gBAAgB;AAChB,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,cAAc;AACd,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,oBAAoB;AACpB,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC"}

package/dist/types.js

@@ -0,0 +1,5 @@
+/**
+ * Workspace UI 类型定义
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@lokvis/ui-react",
+  "version": "0.1.0",
+  "description": "Lokvis Workspace UI - React components for Image/Video/PDF Workspace",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/*.spec.ts",
+    "!**/*.spec.tsx"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "zustand": "^5.0.0",
+    "@lokvis/schema": "0.1.0",
+    "@lokvis/runtime": "0.1.0",
+    "@lokvis/sdk": "0.1.0",
+    "@lokvis/ui-core": "0.1.0",
+    "@lokvis/capability": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lokvis/lokvis.git",
+    "directory": "packages/ui-react"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/components/AssetPanel.tsx

@@ -0,0 +1,151 @@
+/**
+ * AssetPanel - 左侧资产面板
+ *
+ * 紧凑布局：section header + 上传按钮 + 资产列表。
+ * 支持拖拽导入、点击选择、缩略图预览。
+ */
+
+import * as React from 'react';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface AssetPanelProps {
+  className?: string;
+}
+
+export function AssetPanel({ className = '' }: AssetPanelProps) {
+  const assets = useWorkspaceStore((s) => s.assets);
+  const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
+  const thumbnails = useWorkspaceStore((s) => s.thumbnails);
+  const importFiles = useWorkspaceStore((s) => s.importFiles);
+  const selectAsset = useWorkspaceStore((s) => s.selectAsset);
+  const removeAsset = useWorkspaceStore((s) => s.removeAsset);
+  const setThumbnail = useWorkspaceStore((s) => s.setThumbnail);
+  const runtime = useWorkspaceStore((s) => s.runtime);
+
+  const [dragging, setDragging] = React.useState(false);
+
+  async function handleFiles(files: FileList | File[] | null) {
+    if (!files) return;
+    const arr = Array.from(files);
+    if (arr.length > 0) await importFiles(arr);
+  }
+
+  // 自动生成缩略图
+  React.useEffect(() => {
+    if (!runtime) return;
+    for (const asset of assets) {
+      if (thumbnails[asset.id]) continue;
+      if (asset.type !== 'image') continue;
+      (async () => {
+        try {
+          const blob = await runtime.exportAsset(asset.id);
+          const url = URL.createObjectURL(blob);
+          setThumbnail(asset.id, url);
+        } catch {
+          // ignore
+        }
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assets, runtime]);
+
+  return (
+    <aside
+      className={`flex w-56 shrink-0 flex-col border-r border-zinc-200 dark:border-zinc-800 ${className}`}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragging(false);
+        void handleFiles(e.dataTransfer.files);
+      }}
+    >
+      {/* Header */}
+      <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">
+          Assets
+        </span>
+        <span className="text-[11px] tabular-nums text-zinc-400">{assets.length}</span>
+      </div>
+
+      {/* Upload zone */}
+      <label
+        className={`m-2 block cursor-pointer rounded-lg border border-dashed px-2 py-3 text-center transition-all ${
+          dragging
+            ? 'border-indigo-400 bg-indigo-50 text-indigo-600 dark:bg-indigo-950/30'
+            : 'border-zinc-200 text-zinc-400 hover:border-indigo-300 hover:bg-indigo-50/50 hover:text-indigo-500 dark:border-zinc-700 dark:hover:border-indigo-800 dark:hover:bg-indigo-950/20'
+        }`}
+      >
+        <input
+          type="file"
+          multiple
+          className="hidden"
+          onChange={(e) => handleFiles(e.target.files)}
+        />
+        <svg className="mx-auto h-4 w-4" 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>
+        <span className="mt-1 block text-[10px] font-medium">
+          {dragging ? 'Drop here' : 'Add files'}
+        </span>
+      </label>
+
+      {/* Asset list */}
+      <div className="flex-1 overflow-y-auto px-2 pb-2">
+        {assets.length === 0 ? (
+          <p className="px-1 py-4 text-center text-[10px] text-zinc-400">
+            No assets imported
+          </p>
+        ) : (
+          <ul className="space-y-1">
+            {assets.map((asset) => {
+              const selected = asset.id === selectedAssetId;
+              const thumb = thumbnails[asset.id];
+              return (
+                <li
+                  key={asset.id}
+                  onClick={() => selectAsset(asset.id)}
+                  className={`group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-all ${
+                    selected
+                      ? 'bg-indigo-50 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:ring-indigo-800'
+                      : 'hover:bg-zinc-50 dark:hover:bg-zinc-800'
+                  }`}
+                >
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded bg-zinc-100 dark:bg-zinc-800">
+                    {thumb ? (
+                      <img src={thumb} alt="" className="h-full w-full object-cover" />
+                    ) : (
+                      <span className="text-[10px] font-medium text-zinc-400">{asset.metadata.format.slice(0, 3).toUpperCase()}</span>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-[11px] font-medium">
+                      {asset.metadata.format}
+                    </div>
+                    <div className="text-[10px] text-zinc-400">
+                      {(asset.metadata.size / 1024).toFixed(1)} KB
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      void removeAsset(asset.id);
+                    }}
+                    className="shrink-0 rounded p-0.5 text-zinc-300 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:text-zinc-600 dark:hover:bg-red-950/30"
+                    aria-label="Remove asset"
+                  >
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </aside>
+  );
+}

package/src/components/Canvas.tsx

@@ -0,0 +1,123 @@
+/**
+ * Canvas - 中央画布（纯预览）
+ *
+ * 只负责展示当前选中资产的预览，以及空状态引导。
+ * 工作流节点链已移至独立的 PipelineBar 组件。
+ */
+
+import * as React from 'react';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface CanvasProps {
+  className?: string;
+}
+
+export function Canvas({ className = '' }: CanvasProps) {
+  const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
+  const assets = useWorkspaceStore((s) => s.assets);
+  const thumbnails = useWorkspaceStore((s) => s.thumbnails);
+  const importFiles = useWorkspaceStore((s) => s.importFiles);
+
+  const selected = assets.find((a) => a.id === selectedAssetId);
+  const preview = selected ? thumbnails[selected.id] : undefined;
+
+  // 全局拖拽支持（直接拖到画布区）
+  const [dragOver, setDragOver] = React.useState(false);
+
+  return (
+    <main
+      className={`relative flex flex-1 flex-col overflow-hidden ${className}`}
+      onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragOver(false);
+        if (e.dataTransfer.files.length > 0) {
+          void importFiles(Array.from(e.dataTransfer.files));
+        }
+      }}
+    >
+      {/* Preview area */}
+      <div className="relative flex flex-1 items-center justify-center bg-zinc-50 dark:bg-zinc-950">
+        {/* Subtle grid pattern */}
+        <div
+          className="absolute inset-0 opacity-[0.35]"
+          style={{
+            backgroundImage: 'radial-gradient(circle, #d4d4d8 1px, transparent 1px)',
+            backgroundSize: '20px 20px',
+          }}
+        />
+
+        {dragOver && (
+          <div className="absolute inset-4 z-10 rounded-xl border-2 border-dashed border-indigo-400 bg-indigo-50/80 flex items-center justify-center dark:border-indigo-600 dark:bg-indigo-950/60">
+            <div className="text-center">
+              <svg className="mx-auto h-8 w-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><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.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
+              <p className="mt-2 text-sm font-medium text-indigo-600 dark:text-indigo-400">Drop files to import</p>
+            </div>
+          </div>
+        )}
+
+        {selected ? (
+          preview ? (
+            <div className="relative">
+              <img
+                src={preview}
+                alt={selected.metadata.format}
+                className="max-h-[calc(100%-4rem)] max-w-[calc(100%-4rem)] rounded-lg object-contain shadow-2xl shadow-black/10 ring-1 ring-black/5 dark:shadow-black/30"
+              />
+              {/* Metadata overlay */}
+              <div className="absolute bottom-2 left-2 rounded-lg bg-white/90 px-2.5 py-1 text-[11px] text-zinc-600 shadow-sm backdrop-blur-sm dark:bg-zinc-900/90 dark:text-zinc-300">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{selected.metadata.format.toUpperCase()}</span>
+                  {selected.metadata.dimensions && (
+                    <>
+                      <span className="text-zinc-300">·</span>
+                      <span>{selected.metadata.dimensions.width} x {selected.metadata.dimensions.height}</span>
+                    </>
+                  )}
+                  <span className="text-zinc-300">·</span>
+                  <span>{(selected.metadata.size / 1024).toFixed(1)} KB</span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-28 w-28 animate-pulse rounded-xl bg-zinc-200 dark:bg-zinc-800" />
+              <span className="text-xs text-zinc-400">Loading preview...</span>
+            </div>
+          )
+        ) : (
+          <div className="relative flex flex-col items-center gap-5 px-6 text-center">
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-zinc-200/80 dark:bg-zinc-800 dark:ring-zinc-700">
+              <svg className="h-9 w-9 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+              </svg>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">No asset selected</p>
+              <p className="mt-1.5 text-xs text-zinc-400 dark:text-zinc-500">
+                {assets.length === 0
+                  ? 'Import files to get started, or drag them here'
+                  : 'Select an asset from the left panel'}
+              </p>
+            </div>
+            {assets.length === 0 && (
+              <label className="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white shadow-sm cursor-pointer transition-colors hover:bg-indigo-500">
+                <svg className="h-3.5 w-3.5" 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>
+                Import Files
+                <input
+                  type="file"
+                  multiple
+                  className="hidden"
+                  onChange={(e) => {
+                    if (e.target.files) void importFiles(Array.from(e.target.files));
+                  }}
+                />
+              </label>
+            )}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

package/src/components/HistoryPanel.tsx

@@ -0,0 +1,127 @@
+/**
+ * HistoryPanel - 处理历史面板
+ *
+ * 监听 Runtime 事件，记录最近处理过的资产与工作流执行。
+ * MVP 仅做只读展示，撤销/重做通过 Runtime API（已留接口）。
+ */
+
+import * as React from 'react';
+import type { LokvisEvent } from '@lokvis/schema';
+import { useWorkspaceStore } from '../store/index.js';
+
+interface HistoryItem {
+  id: string;
+  type: string;
+  message: string;
+  timestamp: number;
+}
+
+export interface HistoryPanelProps {
+  className?: string;
+  /** 最大记录数 */
+  maxItems?: number;
+}
+
+export function HistoryPanel({ className = '', maxItems = 50 }: HistoryPanelProps) {
+  const runtime = useWorkspaceStore((s) => s.runtime);
+  const [items, setItems] = React.useState<HistoryItem[]>([]);
+
+  React.useEffect(() => {
+    if (!runtime) return;
+    const push = (e: LokvisEvent) => {
+      const item: HistoryItem = {
+        id: `${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+        type: e.type,
+        message: formatEvent(e),
+        timestamp: Date.now(),
+      };
+      setItems((prev) => [item, ...prev].slice(0, maxItems));
+    };
+    // 使用 onAny 订阅所有事件，避免枚举所有类型
+    const off = runtime.eventBus.onAny(push);
+    return () => {
+      off();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runtime]);
+
+  return (
+    <aside
+      className={`flex h-32 flex-col border-t border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-950/50 ${className}`}
+    >
+      <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-1.5 dark:border-zinc-800">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+          History
+        </h3>
+        {items.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setItems([])}
+            className="text-xs text-zinc-400 hover:text-zinc-600"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      <div className="flex-1 overflow-x-auto overflow-y-hidden px-2 py-1.5">
+        {items.length === 0 ? (
+          <p className="px-2 text-xs text-zinc-400">No history yet</p>
+        ) : (
+          <ul className="flex h-full items-stretch gap-1.5">
+            {items.map((item) => (
+              <li
+                key={item.id}
+                className="flex w-56 flex-none flex-col justify-between rounded border border-zinc-200 bg-white px-2 py-1 text-xs dark:border-zinc-800 dark:bg-zinc-900"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="font-mono text-[10px] text-zinc-400">
+                    {new Date(item.timestamp).toLocaleTimeString()}
+                  </span>
+                  <span className="font-mono text-[10px] text-zinc-400">{item.type}</span>
+                </div>
+                <div className="truncate text-zinc-600 dark:text-zinc-300" title={item.message}>
+                  {item.message}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function formatEvent(e: LokvisEvent): string {
+  switch (e.type) {
+    case 'asset:imported':
+      return `Imported ${e.metadata.mimeType}`;
+    case 'asset:removed':
+      return `Removed asset ${e.assetId.slice(0, 8)}`;
+    case 'workflow:started':
+      return `Workflow started: ${e.workflowId.slice(0, 8)}`;
+    case 'workflow:completed':
+      return `Workflow ${e.result.status} in ${e.result.duration}ms`;
+    case 'workflow:cancelled':
+      return 'Workflow cancelled';
+    case 'workflow:paused':
+      return 'Workflow paused';
+    case 'workflow:resumed':
+      return 'Workflow resumed';
+    case 'node:started':
+      return `Node started: ${e.nodeId.slice(0, 8)}`;
+    case 'node:finished':
+      return `Node finished: ${e.nodeId.slice(0, 8)} (${e.duration}ms)`;
+    case 'node:failed':
+      return `Node failed: ${e.error.message}`;
+    case 'plugin:loaded':
+      return `Plugin loaded: ${e.name}@${e.version}`;
+    case 'export:completed':
+      return `Exported ${e.format} (${(e.size / 1024).toFixed(1)} KB)`;
+    case 'capability:registered':
+      return `Capability registered: ${e.capability} (${e.engine})`;
+    case 'history:changed':
+      return `History changed (${e.entries.length} entries)`;
+    default:
+      return (e as { type: string }).type;
+  }
+}