@lokvis/ui-react 0.1.1-beta.0 → 0.2.0

package/src/components/HistoryPanel.tsx

@@ -1,127 +1,254 @@
 /**
- * HistoryPanel - 处理历史面板
+ * HistoryPanel - 历史栈面板(W7.1 / W9.1)
  *
- * 监听 Runtime 事件，记录最近处理过的资产与工作流执行。
- * MVP 仅做只读展示，撤销/重做通过 Runtime API（已留接口）。
+ * 展示当前工作流的执行历史,支持:
+ * - Undo / Redo 按钮(根据 cursor 禁用)
+ * - 点击条目直接跳转(jumpTo)
+ * - cursor 当前位置高亮,cursor 之后的条目标灰(redo 分支)
+ *
+ * W9.1: 支持 `variant` 切换布局方向
+ *   - `vertical`(默认):侧栏垂直布局,适合嵌入左/右栏
+ *   - `horizontal`:底部横条布局,作为底部 history bar 使用
+ *
+ * 数据来自 history-slice(store 单一来源),由 runtime-slice 的
+ * history:changed 订阅自动更新,组件无需自行订阅事件。
+ *
+ * 历史条目渲染:把 HistoryEntry 的 capability + params 摘要为可读标签。
  */
 
-import * as React from 'react';
-import type { LokvisEvent } from '@lokvis/schema';
+import type { HistoryEntry } from '@lokvis/schema';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
-interface HistoryItem {
-  id: string;
-  type: string;
-  message: string;
-  timestamp: number;
-}
-
 export interface HistoryPanelProps {
   className?: string;
-  /** 最大记录数 */
-  maxItems?: number;
+  /** 布局方向(W9.1):vertical 侧栏,horizontal 底部横条 */
+  variant?: 'vertical' | 'horizontal';
 }
 
-export function HistoryPanel({ className = '', maxItems = 50 }: HistoryPanelProps) {
-  const runtime = useWorkspaceStore((s) => s.runtime);
-  const [items, setItems] = React.useState<HistoryItem[]>([]);
+export function HistoryPanel({ className = '', variant = 'vertical' }: HistoryPanelProps) {
+  const entries = useWorkspaceStore((s) => s.historyEntries);
+  const cursor = useWorkspaceStore((s) => s.historyCursor);
+  const workflowId = useWorkspaceStore((s) => s.historyWorkflowId);
+  const undo = useWorkspaceStore((s) => s.undo);
+  const redo = useWorkspaceStore((s) => s.redo);
+  const jumpTo = useWorkspaceStore((s) => s.jumpToHistory);
+
+  const canUndo = cursor >= 0;
+  const canRedo = cursor < entries.length - 1;
+  const horizontal = variant === 'horizontal';
 
-  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]);
+  const undoBtn = (
+    <button
+      type="button"
+      onClick={() => void undo()}
+      disabled={!canUndo}
+      aria-label="Undo"
+      className="rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    >
+      <Icon size={13}>
+        <path d="M9 14L4 9l5-5" />
+        <path d="M4 9h11a4 4 0 0 1 0 8h-3" />
+      </Icon>
+    </button>
+  );
+  const redoBtn = (
+    <button
+      type="button"
+      onClick={() => void redo()}
+      disabled={!canRedo}
+      aria-label="Redo"
+      className="rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    >
+      <Icon size={13}>
+        <path d="M15 14l5-5-5-5" />
+        <path d="M20 9H9a4 4 0 0 0 0 8h3" />
+      </Icon>
+    </button>
+  );
 
+  const headerEl = (
+    <div
+      className={`flex shrink-0 items-center justify-between px-3 ${
+        horizontal ? 'h-full border-r border-zinc-200 dark:border-zinc-800' : 'h-10 border-b border-zinc-200 dark:border-zinc-800'
+      }`}
+    >
+      <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+        History
+      </span>
+      <div className="flex items-center gap-0.5">
+        {undoBtn}
+        {redoBtn}
+      </div>
+    </div>
+  );
+
+  // 空状态
+  if (!workflowId || entries.length === 0) {
+    return (
+      <aside
+        className={`flex shrink-0 ${
+          horizontal
+            ? 'h-12 flex-row items-center border-t border-zinc-200 dark:border-zinc-800'
+            : 'w-48 flex-col border-r border-zinc-200 dark:border-zinc-800'
+        } ${className}`}
+        aria-label="History panel"
+      >
+        {headerEl}
+        <p className="px-3 text-[10px] text-zinc-400">No history yet</p>
+      </aside>
+    );
+  }
+
+  if (horizontal) {
+    // 横向布局:header | entries(横向滚动)
+    return (
+      <aside
+        className={`flex h-12 shrink-0 items-stretch border-t border-zinc-200 dark:border-zinc-800 ${className}`}
+        aria-label="History panel"
+      >
+        {headerEl}
+        <ol className="flex flex-1 items-center gap-1 overflow-x-auto px-2">
+          {/* 初始状态项 */}
+          <li className="shrink-0">
+            <button
+              type="button"
+              onClick={() => void jumpTo(-1)}
+              className={`flex items-center gap-1.5 rounded px-2 py-1 text-[10px] transition-colors ${
+                cursor === -1
+                  ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                  : 'text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800'
+              }`}
+            >
+              <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-300 dark:bg-zinc-600" aria-hidden="true" />
+              <span className="truncate">Initial</span>
+            </button>
+          </li>
+          {entries.map((entry, i) => {
+            const isCurrent = i === cursor;
+            const isRedoBranch = i > cursor;
+            return (
+              <li key={entry.id} className="shrink-0">
+                <button
+                  type="button"
+                  onClick={() => void jumpTo(i)}
+                  aria-current={isCurrent ? 'step' : undefined}
+                  className={`flex items-center gap-1.5 rounded px-2 py-1 text-[10px] transition-colors ${
+                    isCurrent
+                      ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                      : isRedoBranch
+                      ? 'text-zinc-300 hover:bg-zinc-50 dark:text-zinc-600 dark:hover:bg-zinc-800/50'
+                      : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                  }`}
+                >
+                  <span
+                    className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                      isCurrent
+                        ? 'bg-indigo-500'
+                        : isRedoBranch
+                        ? 'bg-zinc-200 dark:bg-zinc-700'
+                        : 'bg-zinc-400 dark:bg-zinc-500'
+                    }`}
+                    aria-hidden="true"
+                  />
+                  <span className="truncate font-medium">{describeHistoryEntry(entry)}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </aside>
+    );
+  }
+
+  // 垂直布局(原实现)
   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}`}
+      className={`flex w-48 shrink-0 flex-col border-r border-zinc-200 dark:border-zinc-800 ${className}`}
+      aria-label="History panel"
     >
-      <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>
+      {headerEl}
+      <div className="flex-1 overflow-y-auto px-2 py-2">
+        <ol className="space-y-0.5">
+          {/* 初始状态项(index=-1) */}
+          <li>
+            <button
+              type="button"
+              onClick={() => void jumpTo(-1)}
+              className={`flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-[10px] transition-colors ${
+                cursor === -1
+                  ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                  : 'text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800'
+              }`}
+            >
+              <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-300 dark:bg-zinc-600" aria-hidden="true" />
+              <span className="truncate">Initial</span>
+            </button>
+          </li>
+          {entries.map((entry, i) => {
+            const isCurrent = i === cursor;
+            const isRedoBranch = i > cursor;
+            return (
+              <li key={entry.id}>
+                <button
+                  type="button"
+                  onClick={() => void jumpTo(i)}
+                  aria-current={isCurrent ? 'step' : undefined}
+                  className={`flex w-full items-start gap-1.5 rounded px-2 py-1 text-left text-[10px] transition-colors ${
+                    isCurrent
+                      ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                      : isRedoBranch
+                      ? 'text-zinc-300 hover:bg-zinc-50 dark:text-zinc-600 dark:hover:bg-zinc-800/50'
+                      : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                  }`}
+                >
+                  <span
+                    className={`mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full ${
+                      isCurrent
+                        ? 'bg-indigo-500'
+                        : isRedoBranch
+                        ? 'bg-zinc-200 dark:bg-zinc-700'
+                        : 'bg-zinc-400 dark:bg-zinc-500'
+                    }`}
+                    aria-hidden="true"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate font-medium">
+                      {describeHistoryEntry(entry)}
+                    </div>
+                    <div className="text-[9px] text-zinc-400">
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </div>
+                  </div>
+                </button>
               </li>
-            ))}
-          </ul>
-        )}
+            );
+          })}
+        </ol>
       </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;
+/** 把 HistoryEntry 摘要为可读标签(capability 简称 + 关键参数) */
+function describeHistoryEntry(entry: HistoryEntry): string {
+  // image.resize → Resize;image.watermark → Watermark
+  const short = entry.capability.replace(/^image\./, '');
+  const cap = short.charAt(0).toUpperCase() + short.slice(1);
+  const params = entry.params ?? {};
+  // 摘取 1-2 个关键参数作为提示
+  const hints: string[] = [];
+  if (typeof params.width === 'number' || typeof params.width === 'string') {
+    hints.push(`${params.width}w`);
+  }
+  if (typeof params.quality === 'number') {
+    hints.push(`q${params.quality}`);
+  }
+  if (typeof params.format === 'string') {
+    hints.push(String(params.format));
+  }
+  if (typeof params.text === 'string' && params.text) {
+    hints.push(`"${String(params.text).slice(0, 8)}"`);
   }
+  return hints.length > 0 ? `${cap} (${hints.join(' ')})` : cap;
 }

package/src/components/Inspector.tsx

@@ -9,6 +9,7 @@ import * as React from 'react';
 import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 import { ParamForm } from './ParamForm.js';
+import { ExifPanel } from './ExifPanel.js';
 
 export interface InspectorProps {
   className?: string;
@@ -49,6 +50,9 @@ export function Inspector({ className = '' }: InspectorProps) {
     <aside
       className={`flex w-72 shrink-0 flex-col border-l border-zinc-200 dark:border-zinc-800 ${className}`}
     >
+      {/* EXIF panel (selected image asset only, hides automatically for non-image) */}
+      <ExifPanel />
+
       {/* Configure section (when a node is selected) */}
       {showConfigure && (
         <div className="shrink-0 border-b border-zinc-200 dark:border-zinc-800">

package/src/components/ProgressBar.tsx

@@ -0,0 +1,104 @@
+/**
+ * ProgressBar - 工作流执行进度条 + 取消按钮(W11.6)
+ *
+ * 展示:
+ *   - 节点完成进度(成功数 / 总数)
+ *   - 横向进度条(running 时动画)
+ *   - Cancel 按钮(调用 cancelRun)
+ *   - 状态消息(statusMessage)
+ *
+ * 仅在 running 或最近一次执行有结果时显示。
+ *
+ * @module ProgressBar
+ */
+
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
+
+export interface ProgressBarProps {
+  className?: string;
+}
+
+export function ProgressBar({ className = '' }: ProgressBarProps) {
+  const running = useWorkspaceStore((s) => s.running);
+  const statusMessage = useWorkspaceStore((s) => s.statusMessage);
+  const cancelRun = useWorkspaceStore((s) => s.cancelRun);
+
+  // 进度计算抽取到共享 hook(与 StatusBar 共用,避免重复逻辑)
+  const { total, done, failedCount, pct, hasFailure } = useWorkflowProgress();
+
+  // 没有节点或未运行且无最近结果时不渲染
+  if (total === 0) return null;
+  if (!running && done === 0) return null;
+
+  return (
+    <div
+      className={`flex items-center gap-2 border-b border-zinc-200 bg-white px-3 py-1.5 dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
+      role="status"
+      aria-live="polite"
+      aria-label={`工作流进度:${done} / ${total}`}
+    >
+      {/* 进度条 */}
+      <div className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
+        <div
+          className={`absolute inset-y-0 left-0 transition-all duration-300 ${
+            hasFailure
+              ? 'bg-red-500'
+              : running
+              ? 'bg-indigo-500'
+              : 'bg-emerald-500'
+          } ${running ? 'animate-pulse' : ''}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* 计数 */}
+      <span className="shrink-0 text-[10px] font-medium tabular-nums text-zinc-500 dark:text-zinc-400">
+        {done}/{total}
+        {failedCount > 0 && (
+          <span className="ml-1 text-red-500">({failedCount} failed)</span>
+        )}
+      </span>
+
+      {/* 状态消息(running 时显示) */}
+      {running && statusMessage && (
+        <span className="hidden shrink-0 truncate text-[10px] text-zinc-400 sm:inline">
+          {statusMessage}
+        </span>
+      )}
+
+      {/* Cancel 按钮(仅 running 时) */}
+      {running && (
+        <button
+          type="button"
+          onClick={() => void cancelRun()}
+          aria-label="取消运行"
+          title="取消运行"
+          className="flex shrink-0 items-center gap-1 rounded-md bg-red-50 px-2 py-0.5 text-[10px] font-medium text-red-600 transition-colors hover:bg-red-100 dark:bg-red-950/30 dark:text-red-400 dark:hover:bg-red-900/40"
+        >
+          <Icon size={10} strokeWidth={3}><path d="M6 6l12 12M6 18L18 6" /></Icon>
+          Cancel
+        </button>
+      )}
+
+      {/* 完成图标(非 running 且有结果) */}
+      {!running && done === total && (
+        <span
+          className={`flex shrink-0 items-center gap-1 text-[10px] font-medium ${
+            hasFailure ? 'text-red-500' : 'text-emerald-500'
+          }`}
+        >
+          <Icon size={10} strokeWidth={3}>
+            {hasFailure ? (
+              <path d="M12 2L2 22h20L12 2zM12 9v5M12 17v.01" />
+            ) : (
+              <path d="M20 6L9 17l-5-5" />
+            )}
+          </Icon>
+          {hasFailure ? 'Failed' : 'Done'}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/StatusBar.tsx

@@ -1,15 +1,48 @@
 /**
  * StatusBar - 底部状态栏
  *
- * 紧凑单行：左侧状态指示，右侧资源统计。
+ * 紧凑单行:左侧状态指示 + 当前工具 + 进度,右侧在线状态 + 资源统计 + 存储配额。
+ *
+ * W9.6 新增:
+ *   - 当前选中工具名(从 selectedNode 取)
+ *   - 执行进度(已完成节点数 / 总节点数)
+ *   - 在线状态(navigator.onLine + 事件监听)
  */
 
+import * as React from 'react';
 import { useWorkspaceStore } from '../store/index.js';
+import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
 
 export interface StatusBarProps {
   className?: string;
 }
 
+/** 格式化字节数为人类可读(KB/MB/GB) */
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+/** useOnlineStatus - 监听 navigator.onLine + online/offline 事件(W9.6) */
+function useOnlineStatus(): boolean {
+  const [online, setOnline] = React.useState<boolean>(() =>
+    typeof navigator !== 'undefined' ? navigator.onLine : true
+  );
+  React.useEffect(() => {
+    const onOnline = () => setOnline(true);
+    const onOffline = () => setOnline(false);
+    window.addEventListener('online', onOnline);
+    window.addEventListener('offline', onOffline);
+    return () => {
+      window.removeEventListener('online', onOnline);
+      window.removeEventListener('offline', onOffline);
+    };
+  }, []);
+  return online;
+}
+
 export function StatusBar({ className = '' }: StatusBarProps) {
   const statusMessage = useWorkspaceStore((s) => s.statusMessage);
   const error = useWorkspaceStore((s) => s.error);
@@ -17,14 +50,32 @@ export function StatusBar({ className = '' }: StatusBarProps) {
   const assets = useWorkspaceStore((s) => s.assets);
   const capabilities = useWorkspaceStore((s) => s.capabilities);
   const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+  const storageUsage = useWorkspaceStore((s) => s.storageUsage);
   const setError = useWorkspaceStore((s) => s.setError);
+  const online = useOnlineStatus();
+
+  // W9.6 当前选中工具名
+  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+
+  // W9.6 执行进度(抽取到共享 hook,与 ProgressBar 共用,避免重复逻辑)
+  const { total: totalNodes, done: doneNodes, pct: progressPct } = useWorkflowProgress();
+
+  // W6.7 存储配额压力:>=95% 红(临界),>=80% 琥珀(警告),其余正常
+  const ratio = storageUsage ? storageUsage.usage / storageUsage.quota : 0;
+  const storageCritical = ratio >= 0.95;
+  const storageWarning = ratio >= 0.8 && !storageCritical;
 
   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">
+      {/* Left: Status — m5 加 aria-live,屏幕阅读器播报状态变化 */}
+      <div
+        className="flex items-center gap-2 min-w-0"
+        role="status"
+        aria-live="polite"
+      >
         <span className="flex items-center gap-1.5">
           <span
             className={`h-1.5 w-1.5 rounded-full shrink-0 ${
@@ -34,11 +85,33 @@ export function StatusBar({ className = '' }: StatusBarProps) {
                 ? 'bg-amber-500 animate-pulse'
                 : 'bg-emerald-500'
             }`}
+            aria-hidden="true"
           />
           <span className={`truncate text-[10px] ${error ? 'text-red-500' : 'text-zinc-500'}`}>
             {statusMessage}
           </span>
         </span>
+
+        {/* W9.6 当前工具名 */}
+        {selectedNode && (
+          <>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
+            <span className="shrink-0 font-mono text-[10px] text-indigo-500 dark:text-indigo-400 truncate max-w-[120px]">
+              {selectedNode.capability}
+            </span>
+          </>
+        )}
+
+        {/* W9.6 执行进度 */}
+        {running && totalNodes > 0 && (
+          <>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
+            <span className="shrink-0 tabular-nums text-[10px] text-amber-600 dark:text-amber-400">
+              {doneNodes}/{totalNodes} ({progressPct}%)
+            </span>
+          </>
+        )}
+
         {error && (
           <button
             type="button"
@@ -52,10 +125,56 @@ export function StatusBar({ className = '' }: StatusBarProps) {
 
       {/* Right: Stats */}
       <div className="flex items-center gap-3 shrink-0 text-[10px] text-zinc-400 tabular-nums">
+        {/* W9.6 在线状态 */}
+        <span
+          className={`flex items-center gap-1 ${online ? 'text-emerald-500' : 'text-amber-500'}`}
+          title={online ? 'Online' : 'Offline — running locally, no upload needed'}
+          aria-label={online ? 'Online' : 'Offline — files still processed locally'}
+        >
+          <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-emerald-500' : 'bg-amber-500'}`} aria-hidden="true" />
+          {online ? 'Online' : 'Offline'}
+        </span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
+
+        {/* W6.7 存储配额:接近上限时变色警告;m5 加 aria-label 让屏幕阅读器播报告警 */}
+        {storageUsage && (
+          <>
+            <span
+              className={`flex items-center gap-1 ${
+                storageCritical
+                  ? 'text-red-500 font-semibold'
+                  : storageWarning
+                  ? 'text-amber-500'
+                  : 'text-zinc-400'
+              }`}
+              title={
+                storageCritical
+                  ? `Storage almost full (${Math.round(ratio * 100)}%) — clean up to free space`
+                  : storageWarning
+                  ? `Storage nearing limit (${Math.round(ratio * 100)}%)`
+                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)}`
+              }
+              aria-label={
+                storageCritical
+                  ? `Storage critical: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent. Clean up to free space.`
+                  : storageWarning
+                  ? `Storage warning: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent.`
+                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used.`
+              }
+              aria-live={storageCritical ? 'assertive' : 'polite'}
+            >
+              {(storageCritical || storageWarning) && (
+                <span className="text-[9px]" aria-hidden="true">⚠</span>
+              )}
+              {formatBytes(storageUsage.usage)} / {formatBytes(storageUsage.quota)}
+            </span>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
+          </>
+        )}
         <span>{assets.length} asset{assets.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
         <span>{capabilities.length} cap{capabilities.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
         <span>{nodes.length} step{nodes.length !== 1 ? 's' : ''}</span>
       </div>
     </footer>