fix: lock left sidebar row height on hover

Switch tree and heap rows from py-0.5 to a fixed h-[24px] + leading-none
so the hover-only kebab buttons can't stretch the row vertically as the
pointer crosses them.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -7,7 +7,6 @@ import { TopBar } from './components/layout/TopBar'
 import { ScanProgress } from './components/ScanProgress'
 import { ToastContainer } from './components/ToastContainer'
 import { KeyboardHints } from './components/KeyboardHints'
-import { AppFooter } from './components/AppFooter'
 import { PreviewView } from './components/preview/PreviewView'
 import { FilterBar } from './components/filter/FilterBar'
 import { DiscardActionBar } from './components/discard/DiscardActionBar'
@@ -57,7 +56,7 @@ function App() {
         {/* Left Sidebar */}
         <div
           className={`transition-all duration-200 ${
-            leftSidebarOpen ? 'w-64' : 'w-0'
+            leftSidebarOpen ? 'w-60' : 'w-0'
           } overflow-hidden border-r border-border bg-surface`}
         >
           <LeftSidebar
@@ -84,13 +83,12 @@ function App() {
            *  glassy. Mounted here so it's centered against the timeline,
            *  not the viewport (which would be offset by the sidebars). */}
           <KeyboardHints />
-          <AppFooter />
         </div>
 
         {/* Right Sidebar */}
         <div
           className={`transition-all duration-200 ${
-            showRightSidebar ? 'w-80' : 'w-0'
+            showRightSidebar ? 'w-72' : 'w-0'
           } overflow-hidden border-l border-border bg-surface`}
         >
           <RightSidebar onCollapse={() => setRightSidebarOpen(false)} />

frontend/src/components/AppFooter.tsx

@@ -1,43 +0,0 @@
-/**
- * Tiny corner footer pinned to the bottom-right of the main column.
- * Renders "Built with hubris • <year in roman numerals>", refreshed
- * once per page load.
- */
-
-const ROMAN_PAIRS: [number, string][] = [
-  [1000, 'M'],
-  [900, 'CM'],
-  [500, 'D'],
-  [400, 'CD'],
-  [100, 'C'],
-  [90, 'XC'],
-  [50, 'L'],
-  [40, 'XL'],
-  [10, 'X'],
-  [9, 'IX'],
-  [5, 'V'],
-  [4, 'IV'],
-  [1, 'I'],
-]
-
-function toRoman(n: number): string {
-  let result = ''
-  for (const [value, symbol] of ROMAN_PAIRS) {
-    while (n >= value) {
-      result += symbol
-      n -= value
-    }
-  }
-  return result
-}
-
-export function AppFooter() {
-  const year = new Date().getFullYear()
-  return (
-    <div className="pointer-events-none absolute bottom-2 right-3 z-10 text-[10px] text-text-faint">
-      <span className="pointer-events-auto">
-        Built with hubris • {toRoman(year)}
-      </span>
-    </div>
-  )
-}

frontend/src/components/filter/FilterBar.tsx

@@ -388,7 +388,7 @@ export function FilterBar() {
             }
           }}
           placeholder="Search photos…"
-          className="w-full rounded-full border border-border bg-surface-2 py-1 pl-8 pr-7 text-xs text-text placeholder-text-muted focus:border-primary focus:outline-none"
+          className="h-7 w-full rounded-full border border-border bg-surface-2 pl-8 pr-7 text-xs text-text placeholder-text-muted focus:border-primary focus:outline-none"
         />
         {searchQuery && (
           <button

frontend/src/components/heaps/ActiveHeapCard.tsx

@@ -4,6 +4,7 @@ import { ShoppingBasket } from 'lucide-react'
 import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
 import { useFilterStore } from '../../store/filterStore'
 import { photos as photosApi, heaps as heapsApi } from '../../services/api'
+import cardBg from '../../assets/card.png'
 
 /** How many thumbnails fan out across the stack at once. The newest is
  *  drawn last (top), older ones fan back-left and back-right. */
@@ -55,30 +56,40 @@ export function ActiveHeapCard() {
   }))
 
   return (
-    <div className="m-2 rounded-lg border border-border bg-surface-2 shadow-sm">
+    <div className="m-1.5 rounded-md border border-border bg-surface-2 shadow-sm">
       {/* Header — clickable, navigates to the heap section. */}
       <button
         onClick={() =>
           navigateToSection(`heap-${activeHeap.id}`, { heapId: activeHeap.id })
         }
-        className="flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left hover:bg-surface-offset"
+        className="flex w-full items-center gap-1.5 rounded-t-md px-2 py-1.5 text-left hover:bg-surface-offset"
         title={`Open "${activeHeap.name}"`}
       >
-        <ShoppingBasket className="h-4 w-4 flex-shrink-0 text-pick" />
+        <ShoppingBasket className="h-3.5 w-3.5 flex-shrink-0 text-pick" />
-        <span className="min-w-0 flex-1 truncate text-sm font-semibold text-text">
+        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-text">
           {activeHeap.name}
         </span>
-        <span className="flex h-5 min-w-[24px] items-center justify-center rounded bg-surface px-1.5 text-[11px] font-medium text-text-muted">
+        <span className="flex h-4 min-w-[20px] items-center justify-center rounded bg-surface px-1 text-[10px] font-medium text-text-muted">
           {orderedIds.length}
         </span>
       </button>
 
       {/* Stack row. Re-keyed on activeHeap.id so switching heaps tears
        *  the animation context down cleanly instead of trying to
-       *  crossfade unrelated photos. */}
+       *  crossfade unrelated photos. The desert scene sits behind the
+       *  fanned thumbnails — `cover` + `bottom` keeps the dunes anchored
+       *  so the cacti frame the photos rather than the (transparent) sky. */}
       <div
         key={activeHeap.id}
-        className="relative h-24 overflow-hidden px-3 pb-3"
+        className="relative h-20 overflow-hidden rounded-b-md px-2 pb-2"
+        style={{
+          backgroundImage: `url(${cardBg})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center bottom',
+          backgroundRepeat: 'no-repeat',
+          imageRendering: 'pixelated',
+          opacity: 0.7,
+        }}
       >
         {visible.length === 0 ? (
           <div className="flex h-full items-center justify-center px-2 text-center text-[11px] text-text-faint">
@@ -107,10 +118,10 @@ export function ActiveHeapCard() {
                     position: 'absolute',
                     left: '50%',
                     top: '50%',
-                    marginLeft: -32, // half of w-16
+                    marginLeft: -26, // half of w-13
-                    marginTop: -32,  // half of h-16
+                    marginTop: -26,  // half of h-13
                   }}
-                  className="h-16 w-16 rounded object-cover shadow-md ring-1 ring-black/40"
+                  className="h-[52px] w-[52px] rounded object-cover shadow-[0_4px_10px_rgba(0,0,0,0.65),0_2px_4px_rgba(0,0,0,0.5)] ring-1 ring-black/60"
                 />
               ))}
             </AnimatePresence>

frontend/src/components/heaps/HeapsPanel.tsx

@@ -176,9 +176,10 @@ export function HeapsPanel() {
 
   return (
     <div>
-      {/* Section header */}
+      {/* Section header — eyebrow style to match the LeftSidebar
+       *  library/folders headers. */}
       <div
-        className="group flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm text-text hover:bg-surface-2"
+        className="group mt-2 flex cursor-pointer items-center gap-1 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text"
         onClick={() => setExpanded((v) => !v)}
       >
         <button className="rounded p-0.5 hover:bg-surface-offset">
@@ -188,7 +189,6 @@ export function HeapsPanel() {
             <ChevronRight className="h-3 w-3" />
           )}
         </button>
-        <ShoppingBasket className="h-4 w-4 text-text-muted" />
         <span className="flex-1 truncate">Heaps</span>
         <button
           onClick={(e) => {
@@ -196,7 +196,7 @@ export function HeapsPanel() {
             setCreating(true)
             setExpanded(true)
           }}
-          className="invisible rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text group-hover:visible"
+          className="invisible rounded p-0.5 hover:bg-surface-offset hover:text-text group-hover:visible"
           title="New heap"
         >
           <Plus className="h-3 w-3" />
@@ -208,8 +208,8 @@ export function HeapsPanel() {
           {/* Inline create form */}
           {creating && (
             <div
-              className="flex items-center gap-1 px-2 py-1"
+              className="flex items-center gap-1 px-2 py-0.5"
-              style={{ paddingLeft: '32px' }}
+              style={{ paddingLeft: '20px' }}
             >
               <input
                 autoFocus
@@ -224,12 +224,12 @@ export function HeapsPanel() {
                   }
                 }}
                 placeholder="Heap name"
-                className="flex-1 rounded border border-border bg-bg px-2 py-0.5 text-xs text-text focus:border-primary focus:outline-none"
+                className="flex-1 rounded border border-border bg-bg px-2 py-0.5 text-[11px] text-text focus:border-primary focus:outline-none"
               />
               <button
                 onClick={handleCreate}
                 disabled={!newName.trim() || createMutation.isPending}
-                className="rounded bg-primary px-2 py-0.5 text-xs text-white hover:bg-primary/80 disabled:opacity-50"
+                className="rounded bg-primary px-2 py-0.5 text-[11px] text-white hover:bg-primary/80 disabled:opacity-50"
               >
                 Add
               </button>
@@ -238,8 +238,8 @@ export function HeapsPanel() {
 
           {heaps.length === 0 && !creating && (
             <div
-              className="px-2 py-1 text-xs text-text-faint"
+              className="px-2 py-0.5 text-[11px] text-text-faint"
-              style={{ paddingLeft: '32px' }}
+              style={{ paddingLeft: '20px' }}
             >
               No heaps yet
             </div>
@@ -264,7 +264,7 @@ export function HeapsPanel() {
               <div
                 key={heap.id}
                 className={clsx(
-                  'group relative flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-[13px]',
+                  'group relative flex h-[24px] cursor-pointer items-center gap-1 rounded px-2 text-[12px] leading-none',
                   isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
                   // Active-heap row gets a soft primary wash so the
                   // user always knows where Pick / T will land, even
@@ -272,7 +272,7 @@ export function HeapsPanel() {
                   isActive && !isFiltered && 'bg-primary/8 text-text',
                   isDropTarget && 'ring-2 ring-primary bg-primary/10'
                 )}
-                style={{ paddingLeft: '32px' }}
+                style={{ paddingLeft: '20px' }}
                 onClick={() => {
                   if (isRenaming) return
                   navigateToSection(`heap-${heap.id}`, { heapId: heap.id })
@@ -311,7 +311,7 @@ export function HeapsPanel() {
               >
                 <ShoppingBasket
                   className={clsx(
-                    'h-4 w-4 flex-shrink-0',
+                    'h-3.5 w-3.5 flex-shrink-0',
                     isActive || isFiltered ? 'text-primary' : 'text-text-muted'
                   )}
                 />
@@ -361,11 +361,11 @@ export function HeapsPanel() {
                  *  on the name above; the standalone Target indicator
                  *  was making heap counts sit left of the others. */}
                 {heap.photo_count > 0 ? (
-                  <span className="flex h-5 min-w-[24px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1.5 text-xs tabular-nums text-text-muted">
+                  <span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
                     {heap.photo_count}
                   </span>
                 ) : (
-                  <span className="h-5 min-w-[24px] flex-shrink-0" aria-hidden="true" />
+                  <span className="h-4 min-w-[20px] flex-shrink-0" aria-hidden="true" />
                 )}
                 {!isActive && (
                   <button

frontend/src/components/layout/LeftSidebar.tsx

@@ -395,19 +395,33 @@ export function LeftSidebar({ onCollapse, onOpenSettings }: LeftSidebarProps) {
     const isSelected = isItemActive(item.id)
     const acceptsDrop = isDropTarget(item.id)
     const isDropHover = dropTargetId === item.id
+    // Top-level entries (Views, Folders) render as small uppercase
+    // section eyebrows rather than another tree row, so the panel reads
+    // as distinct sections with the actual items beneath them.
+    const isSectionHeader = depth === 0
 
     return (
       <div key={item.id}>
         <div
           className={clsx(
-            'group flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm',
+            'group flex cursor-pointer items-center gap-1',
-            isSelected ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
+            isSectionHeader
+              ? 'mt-2 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text'
+              : clsx(
+                  // Fixed h-[24px] (not min-h) locks the row height so the
+                  // hover-only kebab button can't grow the row vertically.
+                  'h-[24px] rounded px-2 text-[12px] leading-none',
+                  isSelected ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2'
+                ),
             isDropHover && (item.id === 'discarded'
               ? 'ring-2 ring-reject bg-reject/10'
-              : 'ring-2 ring-primary bg-primary/10'),
+              : 'ring-2 ring-primary bg-primary/10')
-            depth > 0 && 'text-[13px]'
           )}
-          style={{ paddingLeft: `${8 + depth * 16}px` }}
+          style={
+            isSectionHeader
+              ? undefined
+              : { paddingLeft: `${8 + (depth - 1) * 12}px` }
+          }
           onClick={() => {
             if (renamingId === item.id) return
             // Folder rows are always filterable, parent or leaf — clicking
@@ -470,13 +484,19 @@ export function LeftSidebar({ onCollapse, onOpenSettings }: LeftSidebarProps) {
               )}
             </button>
           ) : (
-            <div className="w-4" />
+            !isSectionHeader && <div className="w-3" />
           )}
 
-          {/* Item Icon */}
+          {/* Item Icon — section headers drop their icon in favor of the
-          {item.icon && (
+           *  uppercase eyebrow label. */}
-            <span className={clsx('flex-shrink-0', isSelected ? 'text-primary' : 'text-text-muted')}>
+          {item.icon && !isSectionHeader && (
-              {item.icon}
+            <span
+              className={clsx(
+                'flex-shrink-0',
+                isSelected ? 'text-primary' : 'text-text-muted'
+              )}
+            >
+              <span className="[&>svg]:h-3.5 [&>svg]:w-3.5">{item.icon}</span>
             </span>
           )}
 
@@ -510,13 +530,16 @@ export function LeftSidebar({ onCollapse, onOpenSettings }: LeftSidebarProps) {
           )}
 
           {/* Count Badge — fixed-width slot so counts line up in a column
-           *  across rows regardless of digit count. */}
+           *  across rows regardless of digit count. Section headers skip
-          {item.count !== undefined && item.count > 0 ? (
+           *  the badge entirely (they're labels, not navigable rows). */}
-            <span className="flex h-5 min-w-[24px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1.5 text-xs tabular-nums text-text-muted">
+          {!isSectionHeader && (
+            item.count !== undefined && item.count > 0 ? (
+              <span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
                 {item.count}
               </span>
             ) : (
-            <span className="h-5 min-w-[24px] flex-shrink-0" aria-hidden="true" />
+              <span className="h-4 min-w-[20px] flex-shrink-0" aria-hidden="true" />
+            )
           )}
 
           {/* Folder kebab menu — only on folder rows. Hidden (display:none)
@@ -658,15 +681,17 @@ export function LeftSidebar({ onCollapse, onOpenSettings }: LeftSidebarProps) {
     <div className="flex h-full flex-col bg-surface">
       {/* Header with collapse button. Matches the right sidebar header
        *  so both panels have symmetric affordances. */}
-      <div className="flex h-11 flex-shrink-0 items-center justify-between border-b border-border px-4">
+      <div className="flex h-9 flex-shrink-0 items-center justify-between border-b border-border px-3">
-        <h2 className="text-sm font-semibold text-text">Library</h2>
+        <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted">
+          Library
+        </h2>
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
+          className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
           title="Collapse panel (Tab)"
           aria-label="Collapse panel"
         >
-          <PanelLeftClose className="h-4 w-4" />
+          <PanelLeftClose className="h-3.5 w-3.5" />
         </button>
       </div>
       {/* Active heap card — pinned just below the Library header so
@@ -675,20 +700,20 @@ export function LeftSidebar({ onCollapse, onOpenSettings }: LeftSidebarProps) {
       <ActiveHeapCard />
 
       {/* Tree View */}
-      <div className="flex-1 overflow-y-auto py-2">
+      <div className="flex-1 overflow-y-auto pb-2">
         {libraryTree.map((item) => renderTreeItem(item))}
         <HeapsPanel />
       </div>
 
       {/* Settings entry point — pinned to the bottom of the panel so it
        *  sits out of the way of the library tree but is always reachable. */}
-      <div className="border-t border-border p-2">
+      <div className="border-t border-border p-1.5">
         <button
           onClick={onOpenSettings}
-          className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-text-muted hover:bg-surface-2 hover:text-text"
+          className="flex w-full items-center gap-2 rounded px-2 py-1 text-[12px] text-text-muted hover:bg-surface-2 hover:text-text"
           title="Settings"
         >
-          <Settings className="h-4 w-4" />
+          <Settings className="h-3.5 w-3.5" />
           Settings
         </button>
       </div>

frontend/src/components/layout/RightSidebar.tsx

@@ -149,26 +149,28 @@ export function RightSidebar({ onCollapse }: RightSidebarProps) {
         : `${selectedPhotos.length} Photos Selected`
 
   const Header = () => (
-    <div className="flex h-11 flex-shrink-0 items-center justify-between border-b border-border px-4">
+    <div className="flex h-9 flex-shrink-0 items-center justify-between border-b border-border px-3">
-      <h2 className="text-sm font-semibold text-text">{headerTitle}</h2>
+      <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted">
-      <div className="flex items-center gap-1">
+        {headerTitle}
+      </h2>
+      <div className="flex items-center gap-0.5">
         {selectedPhotos.length > 0 && (
           <button
             onClick={clearSelection}
-            className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
+            className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
             title="Clear selection (Esc)"
             aria-label="Clear selection"
           >
-            <X className="h-4 w-4" />
+            <X className="h-3.5 w-3.5" />
           </button>
         )}
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
+          className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
           title="Collapse panel (I)"
           aria-label="Collapse panel"
         >
-          <PanelRightClose className="h-4 w-4" />
+          <PanelRightClose className="h-3.5 w-3.5" />
         </button>
       </div>
     </div>
@@ -206,8 +208,8 @@ export function RightSidebar({ onCollapse }: RightSidebarProps) {
     <div className="flex h-full flex-col bg-surface">
       <Header />
 
-      <div className="space-y-3 border-b border-border p-4">
+      <div className="space-y-2.5 border-b border-border p-3">
-        <p className="text-xs text-text-muted">
+        <p className="text-[11px] text-text-muted">
           Rating, color, and flag apply to all {selectedPhotos.length} selected.
         </p>
 

frontend/src/components/layout/TopBar.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
-import muliLogo from '../../assets/muli-logo.png'
+import desertBg from '../../assets/desert.png'
+import muleSprites from '../../assets/mule-sprites.png'
 
 interface TopBarProps {
   leftSidebarOpen: boolean
@@ -8,10 +9,34 @@ interface TopBarProps {
   onExpandRight: () => void
 }
 
+// Block-character ASCII rendering of "Mulimago" — sits on a black plate
+// in place of the old text title.
+const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
+▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
+▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
+
+const ROMAN_PAIRS: [number, string][] = [
+  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+]
+
+function toRoman(n: number): string {
+  let result = ''
+  for (const [value, symbol] of ROMAN_PAIRS) {
+    while (n >= value) {
+      result += symbol
+      n -= value
+    }
+  }
+  return result
+}
+
 /**
- * Slim top bar — logo on the left, settings gear on the right. The
+ * Slim top bar — animated walking mule on the left over a tiled desert
- * active heap badge moved into the Heaps panel in the left sidebar
+ * backdrop, settings gear on the right. The active heap badge moved into
- * (where it actually relates to the heap rows the user navigates to).
+ * the Heaps panel in the left sidebar (where it actually relates to the
+ * heap rows the user navigates to).
  *
  * Also hosts the "expand sidebar" affordances: when a side panel is
  * collapsed, a small panel-open icon appears on the corresponding edge
@@ -26,32 +51,68 @@ export function TopBar({
   onExpandRight,
 }: TopBarProps) {
   return (
-    <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
+    <header
-      <div className="flex items-center gap-2">
+      className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
+      style={{
+        // Two layers: desert tile on top (scrolls right→left), dusk-sky
+        // gradient underneath (static). Tile width is fixed at 200px so
+        // the `desert-scroll` keyframe can move by exactly one tile and
+        // loop seamlessly.
+        backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
+        backgroundRepeat: 'repeat-x, no-repeat',
+        backgroundSize: '200px 100%, 100% 100%',
+        backgroundPosition: '0 bottom, 0 0',
+        imageRendering: 'pixelated',
+        animation: 'desert-scroll 24s linear infinite',
+      }}
+    >
+      <div className="relative flex items-center gap-3">
         {!leftSidebarOpen && (
           <button
             onClick={onExpandLeft}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (Tab)"
             aria-label="Expand left panel"
           >
             <PanelLeftOpen className="h-4 w-4" />
           </button>
         )}
-        <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
+        <div
-        <h1 className="text-lg font-semibold text-text">Mulimago</h1>
+          aria-label="Mulimago"
+          className="h-12 w-14"
+          style={{
+            backgroundImage: `url(${muleSprites})`,
+            backgroundSize: '300% 200%',
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            animation: 'mule-walk 0.6s steps(1) infinite',
+          }}
+        />
+        <pre
+          aria-label="Mulimago"
+          className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
+          style={{ letterSpacing: 0 }}
+        >
+          {MULIMAGO_ASCII}
+        </pre>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex h-full items-end gap-2 self-stretch pb-1">
         {!rightSidebarOpen && (
           <button
             onClick={onExpandRight}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (I)"
             aria-label="Expand right panel"
           >
             <PanelRightOpen className="h-4 w-4" />
           </button>
         )}
+        <span
+          className="text-[10px] text-black/50"
+          style={{ textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}
+        >
+          Built with hubris • {toRoman(new Date().getFullYear())}
+        </span>
       </div>
     </header>
   )

frontend/src/components/sidebar/PhotoInfoPanel.tsx

@@ -301,7 +301,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
   return (
     <div className="flex h-full flex-col">
       {/* Edit fields */}
-      <div className="space-y-3 border-b border-border p-4">
+      <div className="space-y-2.5 border-b border-border p-3">
         <div>
           <label className="mb-1 block text-xs text-text-muted">Filename</label>
           <input
@@ -594,16 +594,16 @@ function Section({
     <div className="border-b border-border">
       <button
         onClick={onToggle}
-        className="flex w-full items-center justify-between px-4 py-2 text-sm hover:bg-surface-2"
+        className="flex w-full items-center justify-between px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:bg-surface-2 hover:text-text"
       >
-        <span className="font-medium text-text">{title}</span>
+        <span>{title}</span>
         {expanded ? (
-          <ChevronDown className="h-4 w-4 text-text-muted" />
+          <ChevronDown className="h-3 w-3" />
         ) : (
-          <ChevronRight className="h-4 w-4 text-text-muted" />
+          <ChevronRight className="h-3 w-3" />
         )}
       </button>
-      {expanded && <div className="px-4 pb-3">{children}</div>}
+      {expanded && <div className="px-3 pb-2.5">{children}</div>}
     </div>
   )
 }

frontend/src/components/timeline/PhotoThumbnail.tsx

@@ -11,20 +11,29 @@ export const PHOTO_DRAG_MIME = 'application/x-mulita-photos'
 // ── Thumbnail badge family ───────────────────────────────────────────────
 // Every ornament that overlays a thumbnail — here and in other views that
 // wrap PhotoThumbnail (e.g. DuplicatesView) — must compose these classes so
-// the set reads as one coherent system. Shape, height, ring, typography are
+// the set reads as one coherent system. Shape, height, typography are
-// fixed; only the colour variant varies by semantics:
+// fixed; variants set the fill + chiseled-pixel frame:
 //   PRIMARY  → user-affirmed state (selection, rating, active-heap)
 //   NEUTRAL  → informational metadata (duplicate flag, discard, file type, dims)
 //   PICK     → auto-suggested "best" in duplicate groups
+//
+// Frame is a single box-shadow stack rather than a Tailwind `ring` so the
+// 1px outline, the subtle inset top highlight, and the drop shadow all
+// live in one paint, and variants can tint the inset highlight to suit
+// their fill. Corners are `rounded-sm` (2px) to echo the pixel-art theme
+// used in the TopBar and ActiveHeapCard.
 export const THUMB_BADGE_BASE =
-  'inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[10px] font-medium leading-none text-white shadow-md ring-1 ring-white/90'
+  'inline-flex h-5 items-center gap-1 rounded-sm px-1.5 text-[10px] font-semibold leading-none text-white'
 /** Square icon-only variant — compose alongside THUMB_BADGE_BASE. */
 export const THUMB_BADGE_SQUARE = 'w-5 justify-center !px-0'
 /** Standard icon size for any lucide glyph inside a badge. */
 export const THUMB_BADGE_ICON = 'h-3 w-3'
-export const THUMB_BADGE_PRIMARY = 'bg-primary'
+export const THUMB_BADGE_PRIMARY =
-export const THUMB_BADGE_NEUTRAL = 'bg-black/70 backdrop-blur-sm'
+  'bg-primary shadow-[0_0_0_1px_rgba(0,0,0,0.55),inset_0_1px_0_rgba(255,255,255,0.28),0_1px_2px_rgba(0,0,0,0.5)]'
-export const THUMB_BADGE_PICK = 'bg-pick'
+export const THUMB_BADGE_NEUTRAL =
+  'bg-black/75 backdrop-blur-sm shadow-[0_0_0_1px_rgba(255,255,255,0.12),inset_0_1px_0_rgba(255,255,255,0.08),0_1px_2px_rgba(0,0,0,0.55)]'
+export const THUMB_BADGE_PICK =
+  'bg-pick shadow-[0_0_0_1px_rgba(0,0,0,0.55),inset_0_1px_0_rgba(255,255,255,0.28),0_1px_2px_rgba(0,0,0,0.5)]'
 
 // Auto-retry schedule (ms). Backend generates thumbs on-demand via Celery, so
 // the first hit on a freshly-scanned library returns 404 "not ready" until

frontend/src/index.css

@@ -4,18 +4,18 @@
 
 @layer base {
   :root {
-    --color-bg: #111110;
+    --color-bg: #1a1424;
-    --color-surface: #161615;
+    --color-surface: #221c2f;
-    --color-surface-2: #1c1c1a;
+    --color-surface-2: #2a2339;
-    --color-surface-offset: #222220;
+    --color-surface-offset: #352c46;
-    --color-border: rgba(255, 255, 255, 0.08);
+    --color-border: rgba(240, 193, 136, 0.10);
-    --color-text: #e8e6e0;
+    --color-text: #f0e6d2;
-    --color-text-muted: #878580;
+    --color-text-muted: #a8997d;
-    --color-text-faint: #4a4845;
+    --color-text-faint: #5e5448;
-    --color-primary: #3b82f6;
+    --color-primary: #e8965a;
-    --color-pick: #4f9e5c;
+    --color-pick: #8aaa5a;
-    --color-reject: #c25a5a;
+    --color-reject: #d06464;
-    --color-star: #d4a340;
+    --color-star: #f0c188;
   }
 
   body {
@@ -24,20 +24,60 @@
   }
 }
 
-/* Custom scrollbar styles */
+/* Compact themed scrollbars. Track is fully transparent so the bar
-::-webkit-scrollbar {
+   floats over the panel surface, and the thumb is a slim translucent
-  width: 8px;
+   pill that tints toward the primary on hover. Firefox uses the
-  height: 8px;
+   `scrollbar-*` properties below; Chromium / WebKit uses the
+   `::-webkit-scrollbar*` rules. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(240, 230, 210, 0.18) transparent;
 }
 
-::-webkit-scrollbar-track {
+::-webkit-scrollbar {
-  @apply bg-surface;
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-surface-offset rounded;
+  background-color: rgba(240, 230, 210, 0.18);
+  border-radius: 9999px;
+  /* Inset border keeps the thumb visually slimmer than the track gutter
+     so it reads as a pill rather than a bar. */
+  border: 1px solid transparent;
+  background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-text-faint;
+  background-color: rgba(232, 150, 90, 0.55); /* primary, soft */
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(232, 150, 90, 0.85);
+}
+
+/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
+   for one step thanks to `steps(1)` so the background snaps frame-to-frame
+   instead of interpolating. */
+@keyframes mule-walk {
+  0%     { background-position: 0% 0%; }
+  16.66% { background-position: 50% 0%; }
+  33.33% { background-position: 100% 0%; }
+  50%    { background-position: 0% 100%; }
+  66.66% { background-position: 50% 100%; }
+  83.33% { background-position: 100% 100%; }
+  100%   { background-position: 0% 0%; }
+}
+
+/* Parallax desert scroll — moves the desert layer right→left by exactly
+   one tile width so the loop is seamless. The tile width is fixed in
+   CSS (see TopBar.tsx) so the keyframe end value matches. */
+@keyframes desert-scroll {
+  from { background-position-x: 0px, 0px; }
+  to   { background-position-x: -200px, 0px; }
 }

frontend/tailwind.config.js

@@ -8,19 +8,22 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Dark-first color scheme for photo apps
+        // Desert dusk palette — warm, slightly indigo darks pulled from
-        bg: '#111110',
+        // the TopBar sunset gradient. Dark enough that photo content
-        surface: '#161615',
+        // stays the visual focus, but no longer the cool neutral greys
-        'surface-2': '#1c1c1a',
+        // we started with.
-        'surface-offset': '#222220',
+        bg: '#1a1424',           // deep dusk indigo (was near-black)
-        border: 'rgba(255,255,255,0.08)',
+        surface: '#221c2f',       // panel base
-        text: '#e8e6e0',
+        'surface-2': '#2a2339',   // raised panels / hover
-        'text-muted': '#878580',
+        'surface-offset': '#352c46', // chips, inputs
-        'text-faint': '#4a4845',
+        border: 'rgba(240, 193, 136, 0.10)', // warm sand tint, low alpha
-        primary: '#3b82f6', // saturated blue (Tailwind blue-500) — high contrast on dark bg AND on photo content
+        text: '#f0e6d2',          // warm cream
-        pick: '#4f9e5c',    // green for picked
+        'text-muted': '#a8997d',  // sandy beige
-        reject: '#c25a5a',  // red for rejected
+        'text-faint': '#5e5448',  // dark sand
-        star: '#d4a340',    // amber for stars
+        primary: '#e8965a',       // sunset orange — pulled from horizon
+        pick: '#8aaa5a',          // sage / cactus green
+        reject: '#d06464',        // warmer red
+        star: '#f0c188',          // pale amber matching horizon
       },
       fontFamily: {
         sans: ['Geist', 'system-ui', 'sans-serif'],