fix(#197): document view UX — nav, lock toggle, diff buttons, tooltip

docs/UI_DESIGN_SYSTEM.md

@@ -15,10 +15,11 @@ when-to-read: prima di creare o modificare qualsiasi componente visivo
 | `editorial-accent` | #C8705E | Accenti, bottoni attivi, selezioni |
 | `editorial-muted` | #666666 | Testo disabilitato / secondario |
 | `editorial-success` | #3A7A65 | Stato positivo |
+| `editorial-running` | #C49B2A | Step pipeline in esecuzione (dot + label gialli con `animate-pulse`) |
 | `editorial-border` | #C2BCB4 | Bordi e separatori |
 | `editorial-textbox` | #EAE5DE | Background input |
 
-> Warning rimosso — usa `editorial-muted` (#666666) al suo posto.
+> `editorial-warning` (#666666) = grigio, per avvisi generici. Per lo stato *in esecuzione* usa `editorial-running` (giallo).
 
 **Font:**
 - `font-display` (Elstob variable) — heading corsivi, label attive nelle barre filtro

package.json

@@ -27,6 +27,7 @@
     "@tauri-apps/plugin-log": "^2.8.0",
     "@tauri-apps/plugin-sql": "^2.4.0",
     "@vitejs/plugin-react": "^5.0.4",
+    "diff": "^9.0.0",
     "i18next": "^25.1.0",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.24",
@@ -43,6 +44,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/diff": "^7.0.2",
     "@types/node": "^22.14.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.0.0",

src/App.tsx

@@ -1,6 +1,6 @@
 import { lazy, Suspense, useCallback, useEffect, useRef } from 'react';
 import { initLogger } from './utils/logger';
-import { Header, PipelineStrip } from './components/layout';
+import { Header, PipelineSidebar } from './components/layout';
 import { ErrorBoundary, ConfirmDialog, PreflightDialog, RunResumeBanner } from './components/common';
 import { usePipeline } from './hooks/usePipeline';
 import { useProjectAutosave } from './hooks/useProjectAutosave';
@@ -100,17 +100,19 @@ export default function App() {
         {viewMode === 'document' ? (
           <Suspense fallback={null}>
             <main className="relative flex flex-1 min-h-0 overflow-hidden">
-              <PipelineStrip />
+              <PipelineSidebar
+                onRunPipeline={runPipeline}
+                onCancelPipeline={cancelPipeline}
+                onDryRun={runDryRun}
+                onRetranslateChunk={handleRetranslateChunk}
+              />
               <ConfigDrawer
                 onRunPipeline={runPipeline}
                 onRunAuditOnly={runAuditOnly}
                 onCancelPipeline={cancelPipeline}
               />
               <DocumentView
                 onRetranslateChunk={handleRetranslateChunk}
-                onRunPipeline={runPipeline}
-                onCancelPipeline={cancelPipeline}
-                onDryRun={runDryRun}
               />
               <InsightsDrawer onReauditChunk={auditSingleChunk} onRunCoherenceAudit={runCoherenceAudit} />
             </main>

src/components/common/ConfirmDialog.tsx

@@ -12,27 +12,24 @@ export function ConfirmDialog() {
   return (
     <AnimatePresence>
       {open && request && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-6"
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[200] flex items-center justify-center p-6 bg-editorial-ink/35 backdrop-blur-sm"
           role="dialog"
           aria-modal="true"
           aria-labelledby="confirm-title"
           aria-describedby={request.message ? 'confirm-message' : undefined}
           ref={trapRef}
+          onClick={() => resolve(false)}
         >
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="absolute inset-0 bg-editorial-ink/35 backdrop-blur-sm"
-            onClick={() => resolve(false)}
-          />
-
           <motion.div
             initial={{ scale: 0.95, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.95, opacity: 0 }}
             className="relative w-full max-w-md rounded-[28px] border border-editorial-border bg-editorial-bg shadow-[0_24px_80px_rgba(26,26,26,0.2)]"
+            onClick={(e) => e.stopPropagation()}
           >
             {/* Header */}
             <div className="border-b border-editorial-border px-6 py-5">
@@ -92,7 +89,7 @@ export function ConfirmDialog() {
               </button>
             </div>
           </motion.div>
-        </div>
+        </motion.div>
       )}
     </AnimatePresence>
   );

src/components/common/CopyButton.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Copy, Check } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
+import { Tooltip } from '../ui';
 
 interface CopyButtonProps {
   text: string;
@@ -28,15 +29,16 @@ export function CopyButton({ text }: CopyButtonProps) {
   const label = copied ? t('pipeline.copied') : t('pipeline.copy');
 
   return (
-    <button
-      onClick={handleCopy}
-      disabled={isDisabled}
-      title={label}
-      aria-label={label}
-      aria-live="polite"
-      className="rounded-full border border-editorial-border p-2 text-editorial-muted transition-colors hover:bg-editorial-textbox/50 hover:text-editorial-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-editorial-accent disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {copied ? <Check size={14} /> : <Copy size={14} />}
-    </button>
+    <Tooltip label={label}>
+      <button
+        onClick={handleCopy}
+        disabled={isDisabled}
+        aria-label={label}
+        aria-live="polite"
+        className="rounded-full border border-editorial-border p-2 text-editorial-muted transition-colors hover:bg-editorial-textbox/50 hover:text-editorial-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-editorial-accent disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {copied ? <Check size={14} /> : <Copy size={14} />}
+      </button>
+    </Tooltip>
   );
 }

src/components/common/StatusIndicator.tsx

@@ -12,16 +12,16 @@ const STATUS_TONE = {
     label: 'text-editorial-success',
   },
   processing: {
-    dot: 'bg-editorial-warning ring-editorial-warning/30 animate-pulse',
-    label: 'text-editorial-warning',
+    dot: 'bg-editorial-running ring-editorial-running/30 animate-pulse',
+    label: 'text-editorial-running',
   },
   error: {
     dot: 'bg-editorial-accent ring-editorial-accent/30',
     label: 'text-editorial-accent',
   },
   retrying: {
-    dot: 'bg-editorial-warning ring-editorial-warning/30 animate-pulse',
-    label: 'text-editorial-warning',
+    dot: 'bg-editorial-running ring-editorial-running/30 animate-pulse',
+    label: 'text-editorial-running',
   },
   idle: {
     dot: 'bg-editorial-border ring-editorial-border/0',