feat!: rebuild EveFlow as a JARVIS-style voice HUD for Hermes Agent (v2.0.0)

Complete rewrite of the application:

- Toolchain: Electron 44, Vite 8, React 19, TypeScript 5.9, Zustand, Vitest;
  main process rewritten in TypeScript (electron/), typed IPC contract (shared/),
  sandboxed renderer with webSecurity on and an HTTP/SSE proxy in the main process.
- Voice: AudioWorklet microphone capture at 16 kHz with adaptive energy VAD and
  auto-stop, WAV encoder, OpenAI-compatible STT, TTS queue with sentence-level
  streaming, prefetch and Web Audio playback feeding an analyser; hands-free mode,
  global push-to-talk hotkey, system-voice fallback.
- Hermes: full API client (capabilities, health, models, skills, toolsets,
  sessions, jobs) with automatic transport selection: runs API (SSE lifecycle,
  approvals, steer, stop) > sessions stream > chat completions with local tools;
  tolerant event normalisation; webhook receiver hardened (secret, size limit).
- UI: JARVIS arc-reactor core on Canvas 2D reacting to the real audio signal,
  holographic HUD layout (transcript, core, Hermes ops panel with tools/crons/
  skills/sessions/link tabs, telemetry), settings drawer, approval modals,
  compact floating widget, four themes, tray icon and global shortcuts.
- Removed the 3D Eve robot, three.js and legacy assets; migrated 1.x settings.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Wn5VX9HNbJ7N54hR24u9Y

src/components/chat/MessageBubble.tsx

@@ -0,0 +1,101 @@
+import { memo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Copy, Volume2, Check } from 'lucide-react';
+import { bridge } from '../../lib/bridge';
+import { formatTime, preprocessMedia } from '../../lib/text';
+import { speech } from '../../services/voice/speech';
+import type { ChatMessage } from '../../state/chat';
+import { ResilientImage } from './ResilientImage';
+
+interface Props {
+  message: ChatMessage;
+  assistantName: string;
+  userName: string;
+  showReasoning: boolean;
+  compact?: boolean;
+  onOpenImage?: (src: string) => void;
+}
+
+function openLink(href: string): void {
+  const api = bridge();
+  if (/^(file:\/\/|[a-zA-Z]:[\\/])/.test(href) && api) {
+    api.files.openPath(href).catch(() => undefined);
+    return;
+  }
+  window.open(href, '_blank', 'noopener');
+}
+
+export const MessageBubble = memo(function MessageBubble({ message, assistantName, userName, showReasoning, compact, onOpenImage }: Props) {
+  const [copied, setCopied] = useState(false);
+  const isUser = message.role === 'user';
+  const who = isUser ? userName || 'VOUS' : message.role === 'system' ? 'SYSTÈME' : assistantName;
+  const status = message.status ?? 'done';
+
+  const copy = () => {
+    navigator.clipboard.writeText(message.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    }).catch(() => undefined);
+  };
+
+  return (
+    <div className={`msg ${message.role}`}>
+      {!compact && (
+        <div className="msg-meta">
+          <span className="who">{who}</span>
+          <span>{formatTime(message.timestamp)}</span>
+          {message.source && message.source !== 'eveflow' && <span className={`src ${message.source}`}>{message.jobName ? `cron · ${message.jobName}` : message.source}</span>}
+          {message.transport && message.role === 'assistant' && <span className="src">{message.transport}</span>}
+          {message.usage?.total_tokens ? <span>{message.usage.total_tokens} tok</span> : null}
+          {message.role === 'assistant' && status === 'done' && (
+            <span className="msg-actions">
+              <button className="icon-btn" title="Copier" onClick={copy}>{copied ? <Check size={13} /> : <Copy size={13} />}</button>
+              <button className="icon-btn" title="Lire à voix haute" onClick={() => speech.say(message.content)}><Volume2 size={13} /></button>
+            </span>
+          )}
+        </div>
+      )}
+      <div className={`bubble ${status}`}>
+        {message.images && message.images.length > 0 && (
+          <div className="msg-images">
+            {message.images.map((img, i) => (
+              <ResilientImage key={i} src={img} alt={`image ${i + 1}`} onOpen={onOpenImage} />
+            ))}
+          </div>
+        )}
+        {showReasoning && message.reasoning && (
+          <details className="reasoning">
+            <summary>raisonnement</summary>
+            {message.reasoning}
+          </details>
+        )}
+        {message.role === 'user' ? (
+          <span style={{ whiteSpace: 'pre-wrap' }}>{message.content}</span>
+        ) : (
+          <div className="md">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                img: ({ src, alt }) => <ResilientImage src={typeof src === 'string' ? src : ''} alt={alt} onOpen={onOpenImage} />,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      if (href) openLink(href);
+                    }}
+                  >
+                    {children}
+                  </a>
+                )
+              }}
+            >
+              {preprocessMedia(message.content) || (status === 'streaming' ? '' : '…')}
+            </ReactMarkdown>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});