feat(ui): polished wordmark animation + touchbar shadow fix

- New Wordmark component renders TermBeam as 8 pre-baked Montserrat
  ExtraBold SVG paths with per-letter stroke-draw → fill animation and
  jittered timing for an organic reveal. Avoids the multi-subpath
  artifacts that <text> + stroke-dasharray produces on B/e/a/m glyphs.
- Splash component with useMinDuration(1500) gate so the wordmark
  animation always plays through even when auth resolves in <100ms.
- Cleaner SessionsHub header: dropped the >_ icon, version inline next
  to the wordmark.
- App-wide animation primitives (lift-in, pop-in, accent-flash) +
  reduced-motion safety net + universal button micro-press.
- TouchBar: removed overflow:hidden from .row and bumped bottom padding
  4px → 8px so per-key box-shadows render properly instead of being
  clipped against the iOS keyboard.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

src/frontend/package-lock.json

@@ -16,6 +16,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource-variable/montserrat": "^5.2.8",
     "@radix-ui/react-dialog": "^1.1.6",
     "@use-gesture/react": "^10.3.1",
     "@xterm/addon-canvas": "^0.7.0",

src/frontend/package.json

@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react';
 import { useAuth } from '@/hooks/useAuth';
+import { useMinDuration } from '@/hooks/useMinDuration';
 import LoginPage from '@/components/LoginPage/LoginPage';
 import SessionsHub from '@/components/SessionsHub/SessionsHub';
 import { TerminalApp } from '@/components/TerminalApp/TerminalApp';
 import CodeViewer from '@/components/CodeViewer/CodeViewer';
+import { Splash } from '@/components/common/Splash';
+import splashStyles from '@/components/common/Splash.module.css';
 import { useThemeStore } from '@/stores/themeStore';
 import { usePreferencesStore } from '@/stores/preferencesStore';
 import { THEMES } from '@/themes/terminalThemes';
@@ -51,6 +54,15 @@ export default function App() {
   const { authenticated, passwordRequired, login, loading } = useAuth();
   const [path, setPath] = useState(getPath);
 
+  /*
+   * Hold the splash screen for at least 1500ms on cold load so the
+   * per-letter Keynote-bloom animation (last letter starts at 0.55s,
+   * 0.85s duration = 1.40s end) plays through with a 100ms beat to read
+   * the settled wordmark. Without this gate, auth on localhost resolves
+   * in ~50ms and the user never sees the animation.
+   */
+  const splashElapsed = useMinDuration(1500);
+
   // Hydrate user preferences from the server once we're authenticated. The
   // store seeds itself synchronously from localStorage on import so the first
   // paint already uses cached prefs; this fetch reconciles with the server.
@@ -81,60 +93,27 @@ export default function App() {
   const isTerminalScreen = path === '/terminal' && !codeSessionId;
   useChromeColor(isTerminalScreen ? 'terminal' : 'main');
 
-  // Still checking auth
-  if (authenticated === null) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
-          background: 'var(--bg)',
-          color: 'var(--text)',
-        }}
-      >
-        <div className="spinner" />
-      </div>
-    );
+  // Still checking auth, OR auth done but we haven't yet hit the minimum
+  // splash duration. The status text changes once auth resolves so the
+  // splash feels like a real loading sequence instead of a fixed timer.
+  if (authenticated === null || (authenticated && !splashElapsed)) {
+    const status = authenticated ? 'Connected' : 'Establishing link';
+    return <Splash status={status} />;
   }
 
   if (!authenticated) {
     // No-password mode: server is unreachable — show reconnecting UI instead of login
     if (!passwordRequired) {
       return (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100vh',
-            gap: '16px',
-            background: 'var(--bg)',
-            color: 'var(--text)',
-          }}
-        >
-          <div className="spinner" />
-          <p style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>
-            Reconnecting to server…
-          </p>
-          <button
-            onClick={() => window.location.reload()}
-            style={{
-              marginTop: '8px',
-              padding: '8px 20px',
-              background: 'var(--accent)',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '6px',
-              cursor: 'pointer',
-              fontSize: '13px',
-            }}
-          >
-            Retry
-          </button>
-        </div>
+        <Splash
+          size="md"
+          status="Reconnecting to server"
+          action={
+            <button onClick={() => window.location.reload()} className={splashStyles.action}>
+              Retry
+            </button>
+          }
+        />
       );
     }
     return <LoginPage onLogin={login} loading={loading} />;

src/frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, type FormEvent } from 'react';
+import { Wordmark } from '@/components/common/Wordmark';
 import styles from './LoginPage.module.css';
 
 interface LoginPageProps {
@@ -32,10 +33,7 @@ export default function LoginPage({ onLogin, loading }: LoginPageProps) {
   return (
     <div className={styles.backdrop}>
       <div className={styles.card}>
-        <div className={styles.logo}>
-          <span className={styles.logoIcon}>📡</span>
-          TermBeam
-        </div>
+        <Wordmark size="md" />
 
         <form className={styles.form} onSubmit={handleSubmit}>
           <input

src/frontend/src/components/LoginPage/LoginPage.tsx

@@ -2,6 +2,14 @@
   position: relative;
   overflow: hidden;
   border-radius: 12px;
+  /*
+   * Staggered mount entrance. SessionsHub passes `--stagger-i` (capped at 8)
+   * so cards cascade in over a max of ~360ms. The animation only runs once
+   * per card lifecycle — polled list updates don't re-trigger because the
+   * key (session.id) is stable.
+   */
+  animation: lift-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--stagger-i, 0) * 45ms);
 }
 
 .deleteBackground {
@@ -44,11 +52,23 @@
   user-select: none;
   cursor: pointer;
   z-index: 1;
-  transition: border-color 0.15s;
-}
-
-.card:hover {
-  border-color: var(--accent);
+  transition:
+    border-color 0.15s,
+    transform 0.15s ease-out,
+    box-shadow 0.15s ease-out;
+}
+
+/*
+ * Hover lift only on devices with a real pointer. On touch devices the
+ * inline `style.transform` set by the swipe handler must own this property,
+ * and a pseudo-hover from a tap would visually fight the swipe.
+ */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    border-color: var(--accent);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  }
 }
 
 /* Top row: dot + name + PID */

src/frontend/src/components/SessionsHub/SessionCard.module.css

@@ -9,6 +9,11 @@ interface SessionCardProps {
   onDelete: (id: string) => void;
   revealedId: string | null;
   onRevealChange: (id: string | null) => void;
+  /**
+   * Position of the card within the list. Drives the staggered mount
+   * entrance so cards cascade in instead of appearing all at once.
+   */
+  index?: number;
 }
 
 function formatActivity(lastActivity: string | number): string {
@@ -90,6 +95,7 @@ export default function SessionCard({
   onDelete,
   revealedId,
   onRevealChange,
+  index = 0,
 }: SessionCardProps) {
   const cardRef = useRef<HTMLDivElement>(null);
   const touchStartX = useRef(0);
@@ -206,7 +212,10 @@ export default function SessionCard({
   const isClean = git?.status?.clean === true;
 
   return (
-    <div className={styles.wrapper}>
+    <div
+      className={styles.wrapper}
+      style={{ ['--stagger-i' as string]: Math.min(index, 8) }}
+    >
       <button
         className={styles.deleteBackground}
         onClick={handleDeleteClick}

src/frontend/src/components/SessionsHub/SessionCard.tsx

@@ -24,16 +24,15 @@
 
 .brand {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  align-items: baseline;
   min-width: 0;
   flex: 1;
 }
 
 .title {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  align-items: baseline;
+  gap: 10px;
   font-size: 20px;
   font-weight: 700;
   color: var(--text);
@@ -45,34 +44,8 @@
   max-width: 100%;
 }
 
-.brandIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  padding: 0 6px;
-  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-  border-radius: 6px;
-  line-height: 1;
-}
-
-.accent {
-  color: var(--accent);
-}
-
-.brandName {
-  white-space: nowrap;
-}
-
 .version {
   display: inline-block;
-  margin-top: 2px;
   font-size: 11px;
   font-weight: 500;
   color: var(--text-dim);

src/frontend/src/components/SessionsHub/SessionsHub.module.css

@@ -7,6 +7,7 @@ import type { Session } from '@/types';
 import UpdateBanner from '@/components/common/UpdateBanner';
 import TunnelBanner from '@/components/common/TunnelBanner';
 import SessionCard from './SessionCard';
+import { Wordmark } from '@/components/common/Wordmark';
 import NewSessionModal from './NewSessionModal';
 import ResumeBrowser from '@/components/ResumeBrowser/ResumeBrowser';
 import WorkspaceLauncher from '@/components/WorkspaceLauncher/WorkspaceLauncher';
@@ -173,18 +174,13 @@ export default function SessionsHub() {
       <header className={styles.header}>
         <div className={styles.brand}>
           <h1 className={styles.title}>
-            <span className={styles.brandIcon} aria-hidden="true">
-              {'>_'}
-            </span>
-            <span className={styles.brandName}>
-              Term<span className={styles.accent}>Beam</span>
-            </span>
+            <Wordmark size="sm" animated={false} />
+            {version ? (
+              <span className={styles.version} data-testid="hub-version">
+                v{version}
+              </span>
+            ) : null}
           </h1>
-          {version ? (
-            <span className={styles.version} data-testid="hub-version">
-              v{version}
-            </span>
-          ) : null}
         </div>
 
         <div className={styles.headerActions}>
@@ -234,7 +230,7 @@ export default function SessionsHub() {
           </div>
         ) : sessions.length === 0 ? (
           <div className={styles.emptyState} data-testid="empty-state">
-            <span className={styles.emptyIcon}>📡</span>
+            <Wordmark size="md" />
             <span className={styles.emptyText}>No active sessions</span>
             <span className={styles.emptyHint}>
               Tap &quot;+ New Session&quot; to create a new terminal session
@@ -261,14 +257,15 @@ export default function SessionsHub() {
                 data-testid="sessions-list"
                 data-filter-active={filterActive || undefined}
               >
-                {visibleSessions.map((session) => (
+                {visibleSessions.map((session, i) => (
                   <SessionCard
                     key={session.id}
                     session={session}
                     onSelect={navigateToSession}
                     onDelete={handleDelete}
                     revealedId={revealedId}
                     onRevealChange={setRevealedId}
+                    index={i}
                   />
                 ))}
               </div>

src/frontend/src/components/SessionsHub/SessionsHub.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import type { ManagedSession } from '@/stores/sessionStore';
@@ -42,6 +42,25 @@ export function SortableTab({
   });
   const pointerStart = useRef<{ x: number; y: number } | null>(null);
 
+  /*
+   * Signature "connected" beat: when the session transitions from
+   * disconnected → connected we briefly add `tabFlash` so the tab pulses
+   * with an accent halo. Skipped on the very first render (initial mount
+   * already has `pop-in` from the wrapper) and on disconnect transitions.
+   */
+  const prevConnected = useRef(session.connected);
+  const [flash, setFlash] = useState(false);
+
+  useEffect(() => {
+    if (!prevConnected.current && session.connected) {
+      setFlash(true);
+      const t = window.setTimeout(() => setFlash(false), 340);
+      return () => window.clearTimeout(t);
+    }
+    prevConnected.current = session.connected;
+    return undefined;
+  }, [session.connected]);
+
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -54,7 +73,7 @@ export function SortableTab({
     <div
       ref={setNodeRef}
       style={style}
-      className={`${styles.tab} ${isActive ? styles.tabActive : ''} ${isSplit ? styles.tabSplit : ''}`}
+      className={`${styles.tab} ${isActive ? styles.tabActive : ''} ${isSplit ? styles.tabSplit : ''} ${flash ? styles.tabFlash : ''}`}
       data-testid="session-tab"
       {...(isActive ? { 'data-active': 'true' } : {})}
       {...attributes}