diff --git a/docs/USX_SURFACE_BASELINE_SPEC.md b/docs/USX_SURFACE_BASELINE_SPEC.md
index 8774b688..47eb39ee 100644
--- a/docs/USX_SURFACE_BASELINE_SPEC.md
+++ b/docs/USX_SURFACE_BASELINE_SPEC.md
@@ -140,7 +140,14 @@ Form and action controls should use:
 
 - Use only var(--usx-color-*) in component CSS.
 - Do not use --pico-* in new component-level styles.
-- Use UIcon with Material Symbols; do not use emoji as UI icons.
+- Use UIcon with Material Symbols; do not use emoji as UI icons or action buttons.
+- Amber CRT phosphor (`text-amber-*`, raw phosphor glow) is strictly forbidden. Semantic warnings must use `var(--usx-color-warning)`.
+
+## Surface Toolbar & Button Standards
+
+- **No Redundant Secondary Back Bars**: Surfaces hosted within `AppShell` must NOT render redundant `← Dashboard` or `← Back` top bars. The global shell (`GlobalToolbar`) already provides permanent one-click home and finder navigation. Surfaces begin with their canonical header (`[prefix]-header`) featuring title, status badges (`UBadge`), and action controls.
+- **Button Styling Consistency**: Action buttons must strictly use `.usx-btn` (with modifiers `.usx-btn--primary`, `.usx-btn--secondary`, `.usx-btn--danger`, `.usx-btn--sm`) or `UButton`. Do not invent ad-hoc button classes or use misspelt prefixes (e.g. `.uxs-btn`).
+- **Sovereign Sync Integration**: System surfaces expose calm, serene indicators for host sync status (Apple PIM JXA, BitChat LAN mesh, sovereign `~/Vault` storage) without visual clutter.
 
 ## Compliance Rubric
 
diff --git a/frontend-vue/src/api/client.ts b/frontend-vue/src/api/client.ts
index a9e3e58d..d52b8be4 100644
--- a/frontend-vue/src/api/client.ts
+++ b/frontend-vue/src/api/client.ts
@@ -177,6 +177,57 @@ export const ucoreApi = {
         body: JSON.stringify(source ? { source } : {}),
       }),
   },
+  host: {
+    syncStatus: () => request(`${UCORE_API}/api/host/sync/status`),
+    mailIntake: (body?: { limit?: number; unread_only?: boolean }) =>
+      request(`${UCORE_API}/api/host/mail/intake`, {
+        method: "POST",
+        body: JSON.stringify(body || {}),
+      }),
+    imessageIntake: (body?: { limit?: number }) =>
+      request(`${UCORE_API}/api/host/imessage/intake`, {
+        method: "POST",
+        body: JSON.stringify(body || {}),
+      }),
+    mailArchive: (messageId: string) =>
+      request(`${UCORE_API}/api/host/mail/archive`, {
+        method: "POST",
+        body: JSON.stringify({ message_id: messageId }),
+      }),
+    mailFlag: (messageId: string, flagIndex: number = 0) =>
+      request(`${UCORE_API}/api/host/mail/flag`, {
+        method: "POST",
+        body: JSON.stringify({ message_id: messageId, flag_index: flagIndex }),
+      }),
+  },
+  workflow: {
+    actionToTask: (body: {
+      text: string;
+      source?: string;
+      source_ref?: string;
+      priority?: string;
+      sender?: string;
+    }) =>
+      request(`${UCORE_API}/api/workflow/tasks/action-to-task`, {
+        method: "POST",
+        body: JSON.stringify(body),
+      }),
+    approveTask: (id: string) =>
+      request(
+        `${UCORE_API}/api/workflow/tasks/${encodeURIComponent(id)}/approve`,
+        {
+          method: "POST",
+        },
+      ),
+    rejectTask: (id: string, reason?: string) =>
+      request(
+        `${UCORE_API}/api/workflow/tasks/${encodeURIComponent(id)}/reject`,
+        {
+          method: "POST",
+          body: JSON.stringify({ reason }),
+        },
+      ),
+  },
 };
 
 /**
diff --git a/frontend-vue/src/skills/organisms/GlobalToolbar.vue b/frontend-vue/src/skills/organisms/GlobalToolbar.vue
index d6ce6caa..7e00161d 100644
--- a/frontend-vue/src/skills/organisms/GlobalToolbar.vue
+++ b/frontend-vue/src/skills/organisms/GlobalToolbar.vue
@@ -82,6 +82,14 @@
 
     <!-- Right: explicit global mode + display controls -->
     <div class="global-toolbar__right">
+      <button
+        class="global-toolbar__icon-only global-toolbar__sync-btn"
+        title="Host Ecosystem Sync Active (Dashboard)"
+        @click="navigate('/')"
+      >
+        <span class="global-toolbar__sync-dot" />
+        <UIcon name="sync" />
+      </button>
       <button
         class="global-toolbar__icon-only global-toolbar__theme-toggle"
         :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
@@ -145,3 +153,20 @@ function navigate(path: string) {
   router.push(path);
 }
 </script>
+
+<style scoped>
+.global-toolbar__sync-btn {
+  position: relative;
+}
+
+.global-toolbar__sync-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--usx-color-success);
+  pointer-events: none;
+}
+</style>
diff --git a/frontend-vue/src/surfaces/bitchat/BitChatSurface.vue b/frontend-vue/src/surfaces/bitchat/BitChatSurface.vue
index 471352da..9b2266ab 100644
--- a/frontend-vue/src/surfaces/bitchat/BitChatSurface.vue
+++ b/frontend-vue/src/surfaces/bitchat/BitChatSurface.vue
@@ -3,11 +3,8 @@
     <!-- Top Toolbar -->
     <header class="bitchat-toolbar">
       <div class="bitchat-toolbar__left">
-        <button class="bitchat-btn-back" @click="router.push('/')" title="Back to Dashboard">
-          ← Dashboard
-        </button>
-        <span class="bitchat-title">BitChat</span>
-        <span class="bitchat-badge font-mono">Decentralized LAN Mesh</span>
+        <h1 class="bitchat-title">BitChat</h1>
+        <UBadge type="success" size="sm">Decentralized LAN Mesh</UBadge>
       </div>
 
       <div class="bitchat-toolbar__center">
@@ -23,11 +20,13 @@
       </div>
 
       <div class="bitchat-toolbar__right">
-        <button class="bitchat-btn bitchat-btn--accent" @click="triggerBeacon" :disabled="isBroadcasting">
-          📡 {{ isBroadcasting ? 'Beaconing...' : 'Announce Beacon' }}
+        <button class="usx-btn usx-btn--sm usx-btn--primary bitchat-btn bitchat-btn--accent" @click="triggerBeacon" :disabled="isBroadcasting">
+          <UIcon name="cell_tower" />
+          <span>{{ isBroadcasting ? 'Beaconing...' : 'Announce Beacon' }}</span>
         </button>
-        <button class="bitchat-btn" @click="refreshAll" title="Refresh peers and messages">
-          🔄 Refresh
+        <button class="usx-btn usx-btn--sm usx-btn--secondary bitchat-btn" @click="refreshAll" title="Refresh peers and messages">
+          <UIcon name="refresh" />
+          <span>Refresh</span>
         </button>
       </div>
     </header>
@@ -114,14 +113,15 @@
             </span>
             <button
               v-if="selectedMsgIds.length > 0"
-              class="bitchat-btn bitchat-btn--primary font-mono text-xs"
+              class="usx-btn usx-btn--sm usx-btn--primary bitchat-btn bitchat-btn--primary font-mono text-xs"
               @click="openSaveToBinderModal"
             >
-              📁 Save to Binder
+              <UIcon name="folder" />
+              <span>Save to Binder</span>
             </button>
             <button
               v-if="selectedMsgIds.length > 0"
-              class="bitchat-btn bitchat-btn--ghost font-mono text-xs"
+              class="usx-btn usx-btn--sm usx-btn--secondary bitchat-btn bitchat-btn--ghost font-mono text-xs"
               @click="clearSelection"
             >
               Clear
@@ -132,7 +132,9 @@
         <!-- Message Feed -->
         <div class="bitchat-feed" ref="feedEl">
           <div v-if="messages.length === 0" class="bitchat-empty-feed">
-            <div class="bitchat-empty-icon">💬</div>
+            <div class="bitchat-empty-icon">
+              <UIcon name="forum" />
+            </div>
             <div class="bitchat-empty-title">No messages in {{ currentChannel }} yet</div>
             <div class="bitchat-empty-subtitle text-zinc-400 text-xs">
               Broadcast a message across your local mesh network or save notes into your binders.
@@ -162,10 +164,10 @@
                   {{ formatTimestamp(msg.timestamp) }}
                 </span>
                 <span v-if="msg.saved_to_binder" class="bitchat-tag bitchat-tag--saved font-mono" title="Saved to Binder Evidence">
-                  📁 EVIDENCE
+                  <UIcon name="folder" /> EVIDENCE
                 </span>
                 <span v-if="msg.task_id" class="bitchat-tag bitchat-tag--task font-mono" title="Promoted to Sovereign Task">
-                  ⚡ {{ msg.task_id }}
+                  <UIcon name="bolt" /> {{ msg.task_id }}
                 </span>
               </div>
 
@@ -174,18 +176,18 @@
               <!-- Message Quick Actions -->
               <div class="bitchat-msg-actions">
                 <button
-                  class="bitchat-msg-btn font-mono"
+                  class="usx-btn usx-btn--sm usx-btn--secondary bitchat-msg-btn font-mono"
                   @click="openConvertTaskModal(msg)"
                   title="Promote to .tasker markdown task"
                 >
-                  ⚡ Convert to Task
+                  <UIcon name="bolt" /> Convert to Task
                 </button>
                 <button
-                  class="bitchat-msg-btn font-mono"
+                  class="usx-btn usx-btn--sm usx-btn--secondary bitchat-msg-btn font-mono"
                   @click="quickSaveSingleToBinder(msg)"
                   title="Save single message to binder evidence"
                 >
-                  📁 Save to Binder
+                  <UIcon name="folder" /> Save to Binder
                 </button>
               </div>
             </div>
@@ -214,11 +216,12 @@
             ></textarea>
 
             <button
-              class="bitchat-btn bitchat-btn--send font-mono"
+              class="usx-btn usx-btn--primary bitchat-btn bitchat-btn--send font-mono"
               :disabled="!draftText.trim()"
               @click="handleSendMessage"
             >
-              Send ↵
+              <span>Send</span>
+              <UIcon name="keyboard_return" />
             </button>
           </div>
         </footer>
@@ -230,7 +233,9 @@
       <div class="bitchat-modal">
         <div class="bitchat-modal-header">
           <h3>Save Discussion Evidence to Binder</h3>
-          <button class="bitchat-modal-close" @click="showSaveBinderModal = false">×</button>
+          <button class="bitchat-modal-close" @click="showSaveBinderModal = false">
+            <UIcon name="close" />
+          </button>
         </div>
         <div class="bitchat-modal-body">
           <p class="text-xs text-zinc-400 mb-3">
@@ -268,7 +273,9 @@
       <div class="bitchat-modal">
         <div class="bitchat-modal-header">
           <h3>Convert Action Item to Task</h3>
-          <button class="bitchat-modal-close" @click="showConvertTaskModal = false">×</button>
+          <button class="bitchat-modal-close" @click="showConvertTaskModal = false">
+            <UIcon name="close" />
+          </button>
         </div>
         <div class="bitchat-modal-body" v-if="activeTaskMsg">
           <div class="bitchat-task-preview mb-3 p-3 bg-zinc-900 border border-zinc-800 rounded">
@@ -322,9 +329,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
+import UIcon from '../../skills/atoms/UIcon.vue'
+import UBadge from '../../skills/atoms/UBadge.vue'
 
 // Channels
 const channels = [
@@ -660,22 +666,6 @@ onUnmounted(() => {
   gap: 0.75rem;
 }
 
-.bitchat-btn-back {
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: var(--usx-color-text, #e2e4e9);
-  padding: 0.35rem 0.75rem;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.bitchat-btn-back:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
 .bitchat-title {
   font-size: 1.15rem;
   font-weight: 700;
diff --git a/frontend-vue/src/surfaces/browserui/ApiBridge.ts b/frontend-vue/src/surfaces/browserui/ApiBridge.ts
index 91e9f42e..7e8c9b33 100644
--- a/frontend-vue/src/surfaces/browserui/ApiBridge.ts
+++ b/frontend-vue/src/surfaces/browserui/ApiBridge.ts
@@ -179,6 +179,55 @@ export interface BananaAssetResult {
   markdown_embed?: string
   citation_token?: string
   offline?: boolean
+  lattice?: {
+    width: number
+    height: number
+    active_points: number
+    total_points: number
+    fill_ratio: number
+    rows: string[]
+  }
+  bob?: {
+    width: number
+    height: number
+    planes: number
+    bytes_per_row: number
+    plane_size_bytes: number
+    total_bytes: number
+    data_hex: string
+  }
+  error?: string
+}
+
+export interface QuantizeLatticeResult {
+  ok: boolean
+  width: number
+  height: number
+  active_points: number
+  total_points: number
+  fill_ratio: number
+  rows: string[]
+  error?: string
+}
+
+export interface QuantizeTeletextResult {
+  ok: boolean
+  columns: number
+  rows: number
+  mosaic_lines: string[]
+  teletext: string
+  error?: string
+}
+
+export interface QuantizeBobResult {
+  ok: boolean
+  width: number
+  height: number
+  planes: number
+  bytes_per_row: number
+  plane_size_bytes: number
+  total_bytes: number
+  data_hex: string
   error?: string
 }
 
@@ -377,6 +426,45 @@ export async function generateBananaAsset(
   }
 }
 
+export async function quantizeVectorToLattice(
+  options: { svg?: string; file_path?: string; target_width?: number; target_height?: number; threshold?: number }
+): Promise<QuantizeLatticeResult> {
+  const res = await fetch(`${BASE}/api/vector/quantize/lattice`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(options),
+    signal: AbortSignal.timeout(15000),
+  })
+  if (!res.ok) throw new Error(`Lattice quantization failed (HTTP ${res.status})`)
+  return res.json()
+}
+
+export async function quantizeVectorToTeletext(
+  options: { svg?: string; file_path?: string }
+): Promise<QuantizeTeletextResult> {
+  const res = await fetch(`${BASE}/api/vector/quantize/teletext-g1`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(options),
+    signal: AbortSignal.timeout(15000),
+  })
+  if (!res.ok) throw new Error(`Teletext quantization failed (HTTP ${res.status})`)
+  return res.json()
+}
+
+export async function quantizeVectorToBob(
+  options: { svg?: string; file_path?: string; target_width?: number; target_height?: number; planes?: number }
+): Promise<QuantizeBobResult> {
+  const res = await fetch(`${BASE}/api/vector/quantize/bob`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(options),
+    signal: AbortSignal.timeout(15000),
+  })
+  if (!res.ok) throw new Error(`BOB blitter export failed (HTTP ${res.status})`)
+  return res.json()
+}
+
 export async function syncGoogleDriveVault(vaultPath?: string): Promise<DriveVaultSyncResult> {
   const res = await fetch(`${BASE}/api/google/drive/scan`, {
     method: "POST",
diff --git a/frontend-vue/src/surfaces/browserui/BrowserUISurface.vue b/frontend-vue/src/surfaces/browserui/BrowserUISurface.vue
index 341f0971..2635a6e2 100644
--- a/frontend-vue/src/surfaces/browserui/BrowserUISurface.vue
+++ b/frontend-vue/src/surfaces/browserui/BrowserUISurface.vue
@@ -75,14 +75,14 @@
                 <div class="browserui-grounded-actions">
                   <button
                     type="button"
-                    class="uxs-btn uxs-btn--sm uxs-btn--secondary"
+                    class="usx-btn usx-btn--sm usx-btn--secondary"
                     :disabled="exportingNotes"
                     @click="exportSynthesisToNotes"
                   >
                     <UIcon :name="exportingNotes ? 'sync' : 'note_alt'" />
                     <span>{{ exportingNotes ? "Exporting…" : "Export to Notes" }}</span>
                   </button>
-                  <button type="button" class="uxs-btn uxs-btn--sm uxs-btn--primary" @click="saveGroundedToBinder">
+                  <button type="button" class="usx-btn usx-btn--sm usx-btn--primary" @click="saveGroundedToBinder">
                     <UIcon name="folder_special" /> Save Dossier to Binder
                   </button>
                 </div>
@@ -116,9 +116,9 @@
             </div>
             <div v-if="batchSelected.length" class="browserui-zen__selection">
               <span>{{ batchSelected.length }} selected</span>
-              <button class="uxs-btn" @click="batchResearch"><UIcon name="auto_awesome" /> Enrich</button>
-              <button class="uxs-btn uxs-btn--primary" @click="compileSelectionToBinder"><UIcon name="folder_special" /> Compile Binder</button>
-              <button class="uxs-btn" disabled title="Feed linking is scaffolded for the next workflow contract"><UIcon name="rss_feed" /> Link Feed</button>
+              <button class="usx-btn" @click="batchResearch"><UIcon name="auto_awesome" /> Enrich</button>
+              <button class="usx-btn usx-btn--primary" @click="compileSelectionToBinder"><UIcon name="folder_special" /> Compile Binder</button>
+              <button class="usx-btn" disabled title="Feed linking is scaffolded for the next workflow contract"><UIcon name="rss_feed" /> Link Feed</button>
             </div>
           </header>
 
@@ -126,7 +126,7 @@
             <UIcon name="filter_alt_off" />
             <h3>{{ stacks.length ? "No cards match the current filters" : "No research cards yet" }}</h3>
             <p>{{ stacks.length ? "Try clearing filters or adjusting search/group settings." : "Save research to your vault or add a bookmark to begin." }}</p>
-            <button class="uxs-btn" @click="resetControls">
+            <button class="usx-btn" @click="resetControls">
               <UIcon name="refresh" /> Reset filters
             </button>
           </div>
@@ -192,10 +192,10 @@
                   </div>
 
                   <div class="browserui-card__actions">
-                    <button class="uxs-btn uxs-btn--sm" @click.stop="handleResearchCard(card)">
+                    <button class="usx-btn usx-btn--sm" @click.stop="handleResearchCard(card)">
                       Research
                     </button>
-                    <button class="uxs-btn uxs-btn--sm" @click.stop="enhanceCard(card)">
+                    <button class="usx-btn usx-btn--sm" @click.stop="enhanceCard(card)">
                       Enhance
                     </button>
                   </div>
@@ -1902,40 +1902,46 @@ onMounted(async () => {
   }
 }
 
-.uxs-btn {
+.usx-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--usx-spacing-xs);
   border: var(--usx-border-width) solid var(--usx-color-border);
-  border-radius: var(--usx-radius-sm);
-  min-height: var(--usx-touch-target-compact);
+  border-radius: var(--usx-radius-md);
+  min-height: var(--usx-control-size-sm);
   padding: 0 var(--usx-spacing-sm);
   cursor: pointer;
-  background: color-mix(in srgb, var(--usx-color-surface) 94%, var(--usx-color-surface-variant));
+  background: var(--usx-color-surface-variant);
   font-size: var(--usx-font-size-xs);
   color: var(--usx-color-on-surface);
   white-space: nowrap;
+  transition: all var(--usx-transition-base);
 }
 
-.uxs-btn:hover {
-  background: var(--usx-color-surface-variant);
+.usx-btn:hover {
+  background: var(--usx-color-surface-hover);
+  border-color: var(--usx-color-primary);
 }
 
-.uxs-btn--primary {
+.usx-btn--primary {
   background: var(--usx-color-primary);
   color: var(--usx-color-on-primary);
   border-color: var(--usx-color-primary);
 }
 
-.uxs-btn--sm {
-  min-height: calc(var(--usx-touch-target-compact) - var(--usx-spacing-xs));
+.usx-btn--primary:hover {
+  background: var(--usx-color-primary-hover);
+}
+
+.usx-btn--sm {
+  min-height: 28px;
   padding: 0 var(--usx-spacing-xs);
 }
 
-.uxs-btn--icon {
-  width: var(--usx-touch-target-compact);
-  min-width: var(--usx-touch-target-compact);
+.usx-btn--icon {
+  width: var(--usx-control-size-sm);
+  min-width: var(--usx-control-size-sm);
   padding: 0;
 }
 
diff --git a/frontend-vue/src/surfaces/browserui/panels/BananaStudio.test.ts b/frontend-vue/src/surfaces/browserui/panels/BananaStudio.test.ts
index 8c611e64..e2df69a5 100644
--- a/frontend-vue/src/surfaces/browserui/panels/BananaStudio.test.ts
+++ b/frontend-vue/src/surfaces/browserui/panels/BananaStudio.test.ts
@@ -30,9 +30,10 @@ describe("BananaStudio / VectorStudio", () => {
   it("renders the studio mode tabs", () => {
     const wrapper = mount(BananaStudio)
     const modeTabs = wrapper.findAll(".banana-studio__mode-tab")
-    expect(modeTabs.length).toBe(3)
+    expect(modeTabs.length).toBe(4)
     expect(wrapper.text()).toContain("Text-to-Vector")
     expect(wrapper.text()).toContain("Bitmap Tracing")
     expect(wrapper.text()).toContain("GridCore Font & Icon Map")
+    expect(wrapper.text()).toContain("V2B & BOB Quantizer")
   })
 })
diff --git a/frontend-vue/src/surfaces/browserui/panels/BananaStudio.vue b/frontend-vue/src/surfaces/browserui/panels/BananaStudio.vue
index fff4dfec..33ac46e7 100644
--- a/frontend-vue/src/surfaces/browserui/panels/BananaStudio.vue
+++ b/frontend-vue/src/surfaces/browserui/panels/BananaStudio.vue
@@ -52,6 +52,14 @@
       >
         <UIcon name="grid_on" /> GridCore Font & Icon Map
       </button>
+      <button
+        type="button"
+        class="banana-studio__mode-tab"
+        :class="{ 'banana-studio__mode-tab--active': activeMode === 'quantize' }"
+        @click="activeMode = 'quantize'"
+      >
+        <UIcon name="grain" /> V2B & BOB Quantizer
+      </button>
     </div>
 
     <div class="banana-studio__workspace">
@@ -128,7 +136,7 @@
           <div class="banana-studio__actions">
             <button
               type="button"
-              class="uxs-btn uxs-btn--primary banana-studio__gen-btn"
+              class="usx-btn usx-btn--primary banana-studio__gen-btn"
               :disabled="generating || !promptText.trim()"
               @click="handleGenerate"
             >
@@ -173,7 +181,7 @@
           <div class="banana-studio__actions">
             <button
               type="button"
-              class="uxs-btn uxs-btn--primary banana-studio__gen-btn"
+              class="usx-btn usx-btn--primary banana-studio__gen-btn"
               :disabled="generating"
               @click="handleTrace"
             >
@@ -201,7 +209,7 @@
           <div class="banana-studio__actions">
             <button
               type="button"
-              class="uxs-btn uxs-btn--primary banana-studio__gen-btn"
+              class="usx-btn usx-btn--primary banana-studio__gen-btn"
               :disabled="generating"
               @click="handleMapFont"
             >
@@ -210,6 +218,97 @@
           </div>
         </div>
 
+        <!-- MODE 4: V2B & BOB Quantizer -->
+        <div v-else-if="activeMode === 'quantize'" class="banana-studio__mode-section">
+          <h3 class="banana-studio__section-title">Vector-to-Bitmap Quantizer (uvcore)</h3>
+          <p class="banana-studio__mode-desc">
+            Quantize scalable vectors to native dot matrices, PAL Teletext G1 character blocks, or planar Amiga BOB blitter objects.
+          </p>
+
+          <div class="banana-studio__prompt-wrap">
+            <label class="banana-studio__option-label">Source SVG (or leave blank to use active asset)</label>
+            <textarea
+              v-model="quantizeSourceSvg"
+              class="banana-studio__textarea font-mono"
+              rows="3"
+              placeholder="Paste SVG markup or leave blank to quantize current vector..."
+              :disabled="generating"
+            />
+          </div>
+
+          <div class="banana-studio__options-row">
+            <div>
+              <label class="banana-studio__option-label">Target Width</label>
+              <input
+                v-model.number="quantizeWidth"
+                type="number"
+                class="banana-studio__text-input"
+                min="16"
+                max="1024"
+                step="16"
+              />
+            </div>
+            <div>
+              <label class="banana-studio__option-label">Target Height</label>
+              <input
+                v-model.number="quantizeHeight"
+                type="number"
+                class="banana-studio__text-input"
+                min="16"
+                max="1024"
+                step="16"
+              />
+            </div>
+            <div>
+              <label class="banana-studio__option-label">Threshold (0–255)</label>
+              <input
+                v-model.number="quantizeThreshold"
+                type="number"
+                class="banana-studio__text-input"
+                min="1"
+                max="255"
+              />
+            </div>
+            <div>
+              <label class="banana-studio__option-label">Bitplanes (BOB)</label>
+              <input
+                v-model.number="quantizePlanes"
+                type="number"
+                class="banana-studio__text-input"
+                min="1"
+                max="5"
+              />
+            </div>
+          </div>
+
+          <div class="banana-studio__actions flex gap-2 flex-wrap">
+            <button
+              type="button"
+              class="usx-btn usx-btn--primary"
+              :disabled="generating"
+              @click="handleQuantizeLattice"
+            >
+              <UIcon :name="generating ? 'sync' : 'grain'" /> Dot Lattice Quantize
+            </button>
+            <button
+              type="button"
+              class="usx-btn usx-btn--secondary"
+              :disabled="generating"
+              @click="handleQuantizeTeletext"
+            >
+              <UIcon name="grid_on" /> Teletext G1 Mosaic
+            </button>
+            <button
+              type="button"
+              class="usx-btn usx-btn--secondary"
+              :disabled="generating"
+              @click="handleQuantizeBob"
+            >
+              <UIcon name="memory" /> Amiga BOB Blitter
+            </button>
+          </div>
+        </div>
+
         <span v-if="statusMessage" class="banana-studio__status-msg">{{ statusMessage }}</span>
       </section>
 
@@ -236,6 +335,22 @@
             >
               Teletext (40×25)
             </button>
+            <button
+              type="button"
+              class="banana-studio__tab-btn"
+              :class="{ 'banana-studio__tab-btn--active': previewTab === 'lattice' }"
+              @click="previewTab = 'lattice'"
+            >
+              Dot Lattice
+            </button>
+            <button
+              type="button"
+              class="banana-studio__tab-btn"
+              :class="{ 'banana-studio__tab-btn--active': previewTab === 'bob' }"
+              @click="previewTab = 'bob'"
+            >
+              BOB Inspector
+            </button>
             <button
               type="button"
               class="banana-studio__tab-btn"
@@ -295,6 +410,60 @@
             <pre class="banana-studio__teletext-pre">{{ activeAsset.teletext || "No teletext grid available." }}</pre>
           </div>
 
+          <!-- View Tab: Dot Lattice Matrix Preview -->
+          <div v-else-if="previewTab === 'lattice'" class="banana-studio__lattice-wrapper">
+            <div v-if="activeAsset.lattice" class="banana-studio__lattice-content">
+              <div class="banana-studio__lattice-stats font-mono">
+                <span>Resolution: {{ activeAsset.lattice.width }}×{{ activeAsset.lattice.height }}</span>
+                <span>Active Dots: {{ activeAsset.lattice.active_points }} / {{ activeAsset.lattice.total_points }}</span>
+                <span>Fill: {{ Math.round(activeAsset.lattice.fill_ratio * 100) }}%</span>
+              </div>
+              <div class="banana-studio__lattice-matrix font-mono">
+                <div v-for="(row, idx) in activeAsset.lattice.rows.slice(0, 48)" :key="idx" class="banana-studio__lattice-row">
+                  {{ row }}
+                </div>
+                <div v-if="activeAsset.lattice.rows.length > 48" class="banana-studio__lattice-more font-mono text-xs text-zinc-500">
+                  ... ({{ activeAsset.lattice.rows.length - 48 }} more rows)
+                </div>
+              </div>
+            </div>
+            <div v-else class="banana-studio__preview-empty">
+              <p>No dot lattice data generated yet. Click "Dot Lattice Quantize".</p>
+            </div>
+          </div>
+
+          <!-- View Tab: BOB Blitter Inspector -->
+          <div v-else-if="previewTab === 'bob'" class="banana-studio__bob-wrapper">
+            <div v-if="activeAsset.bob" class="banana-studio__bob-content">
+              <div class="banana-studio__meta-row">
+                <span class="banana-studio__meta-key">Dimensions:</span>
+                <span class="banana-studio__meta-val font-mono">{{ activeAsset.bob.width }} × {{ activeAsset.bob.height }} px</span>
+              </div>
+              <div class="banana-studio__meta-row">
+                <span class="banana-studio__meta-key">Bitplanes:</span>
+                <span class="banana-studio__meta-val font-mono">{{ activeAsset.bob.planes }} planes ({{ Math.pow(2, activeAsset.bob.planes) }} colors max)</span>
+              </div>
+              <div class="banana-studio__meta-row">
+                <span class="banana-studio__meta-key">Row Stride:</span>
+                <span class="banana-studio__meta-val font-mono">{{ activeAsset.bob.bytes_per_row }} bytes/row</span>
+              </div>
+              <div class="banana-studio__meta-row">
+                <span class="banana-studio__meta-key">Plane Footprint:</span>
+                <span class="banana-studio__meta-val font-mono">{{ activeAsset.bob.plane_size_bytes }} bytes/plane (Total: {{ activeAsset.bob.total_bytes }} bytes)</span>
+              </div>
+              <div class="banana-studio__bob-hex-card">
+                <div class="banana-studio__bob-hex-header">
+                  <span>Planar Byte Stream</span>
+                  <button type="button" class="usx-btn usx-btn--sm" @click="copyBobHex">Copy Hex</button>
+                </div>
+                <pre class="banana-studio__bob-hex font-mono">{{ activeAsset.bob.data_hex.slice(0, 512) }}{{ activeAsset.bob.data_hex.length > 512 ? '...' : '' }}</pre>
+              </div>
+            </div>
+            <div v-else class="banana-studio__preview-empty">
+              <p>No BOB blitter object data generated yet. Click "Amiga BOB Blitter".</p>
+            </div>
+          </div>
+
           <!-- View Tab 3: ASCII Art -->
           <div v-else-if="previewTab === 'ascii'" class="banana-studio__ascii-wrapper">
             <pre class="banana-studio__ascii-pre">{{ activeAsset.ascii || "No ASCII output available." }}</pre>
@@ -336,16 +505,16 @@
             </div>
 
             <div class="banana-studio__asset-actions">
-              <button type="button" class="uxs-btn" @click="copySvg">
+              <button type="button" class="usx-btn" @click="copySvg">
                 <UIcon name="code" /> Copy SVG
               </button>
-              <button type="button" class="uxs-btn" @click="copyMarkdown">
+              <button type="button" class="usx-btn" @click="copyMarkdown">
                 <UIcon name="content_copy" /> Copy Markdown Embed
               </button>
-              <button type="button" class="uxs-btn" @click="downloadSvg">
+              <button type="button" class="usx-btn" @click="downloadSvg">
                 <UIcon name="download" /> Download SVG
               </button>
-              <button type="button" class="uxs-btn uxs-btn--primary" @click="saveToVault">
+              <button type="button" class="usx-btn usx-btn--primary" @click="saveToVault">
                 <UIcon name="save" /> Save to Vault
               </button>
             </div>
@@ -381,6 +550,9 @@ import {
   generateVectorAsset,
   traceVectorAsset,
   saveVectorAsset,
+  quantizeVectorToLattice,
+  quantizeVectorToTeletext,
+  quantizeVectorToBob,
   type BananaAssetResult,
 } from "../ApiBridge"
 
@@ -445,33 +617,33 @@ const PRESETS: PresetDefinition[] = [
     icon: "sports_esports",
     swatchBg: "#1e1e2e",
     swatchBorder: "#f38ba8",
-    swatchColor: "#a6e3a1",
+    swatchColor: "#f9e2af",
     chips: [
-      "16-bit cybernetic warrior sprite on pixel grid",
-      "Retro isometric game room with CRT television and console",
-      "Pixel art mountain fortress under a starry night sky",
+      "16-color pixel art space rover on martian regolith terrain",
+      "Retro 8-bit laboratory workstation computer console",
+      "Isometric game sprite fantasy potion workshop",
     ],
   },
   {
     id: "line_art",
-    name: "Technical Line Art",
-    description: "Clean monochrome vector geometry with dimensions and precision guides",
+    name: "Monochrome Technical Line Art",
+    description: "Crisp black on white vector CAD line art and mechanical schematic",
     icon: "draw",
     swatchBg: "#ffffff",
     swatchBorder: "#000000",
     swatchColor: "#000000",
     chips: [
-      "Microprocessor internal bus architecture and registers",
-      "Exploded view assembly of mechanical escapement gear",
-      "Concentric optics lens ray tracing technical schematic",
+      "Exploded view mechanical gearbox assembly line drawing",
+      "Aeronautical jet engine cross-section technical diagram",
+      "Vintage botanical microscope specimen pen-and-ink diagram",
     ],
   },
 ]
 
 const ASPECT_RATIOS = ["16:9", "4:3", "1:1", "2:1", "3:4"]
 
-const activeMode = ref<"generate" | "trace" | "font_map">("generate")
-const previewTab = ref<"svg" | "teletext" | "ascii" | "inspector">("svg")
+const activeMode = ref<"generate" | "trace" | "font_map" | "quantize">("generate")
+const previewTab = ref<"svg" | "teletext" | "lattice" | "bob" | "ascii" | "inspector">("svg")
 const selectedPreset = ref("mono_blueprint")
 const selectedAspect = ref("16:9")
 const promptText = ref("")
@@ -482,6 +654,13 @@ const statusMessage = ref("")
 const activeAsset = ref<BananaAssetResult | null>(null)
 const history = ref<BananaAssetResult[]>([])
 
+// Quantizer state
+const quantizeWidth = ref<number>(320)
+const quantizeHeight = ref<number>(256)
+const quantizePlanes = ref<number>(2)
+const quantizeThreshold = ref<number>(128)
+const quantizeSourceSvg = ref<string>("")
+
 const activePresetMeta = computed(() =>
   PRESETS.find((p) => p.id === (activeAsset.value?.style_preset || selectedPreset.value))
 )
@@ -557,6 +736,163 @@ async function handleMapFont() {
   }
 }
 
+async function handleQuantizeLattice() {
+  const svg = quantizeSourceSvg.value.trim() || activeAsset.value?.svg
+  if (!svg) {
+    statusMessage.value = "Please provide an SVG or generate a vector asset first."
+    return
+  }
+  generating.value = true
+  statusMessage.value = "Quantizing vector to GridCore dot lattice..."
+  try {
+    const res = await quantizeVectorToLattice({
+      svg,
+      target_width: quantizeWidth.value,
+      target_height: quantizeHeight.value,
+      threshold: quantizeThreshold.value,
+    })
+    if (res.ok) {
+      if (!activeAsset.value) {
+        activeAsset.value = {
+          status: "success",
+          model: "uvcore-lattice",
+          style_preset: "mono_teletext",
+          asset_id: `lattice-${Date.now()}`,
+          prompt: `Quantized Dot Lattice (${res.width}×${res.height})`,
+          svg,
+          lattice: {
+            width: res.width,
+            height: res.height,
+            active_points: res.active_points,
+            total_points: res.total_points,
+            fill_ratio: res.fill_ratio,
+            rows: res.rows,
+          },
+        }
+        history.value.unshift(activeAsset.value)
+      } else {
+        activeAsset.value.lattice = {
+          width: res.width,
+          height: res.height,
+          active_points: res.active_points,
+          total_points: res.total_points,
+          fill_ratio: res.fill_ratio,
+          rows: res.rows,
+        }
+      }
+      previewTab.value = "lattice"
+      statusMessage.value = `Lattice quantized: ${res.active_points}/${res.total_points} dots active (${Math.round(res.fill_ratio * 100)}% fill)`
+    } else {
+      statusMessage.value = `Lattice error: ${res.error}`
+    }
+  } catch (err: any) {
+    statusMessage.value = `Lattice quantization error: ${err?.message || err}`
+  } finally {
+    generating.value = false
+  }
+}
+
+async function handleQuantizeTeletext() {
+  const svg = quantizeSourceSvg.value.trim() || activeAsset.value?.svg
+  if (!svg) {
+    statusMessage.value = "Please provide an SVG or generate a vector asset first."
+    return
+  }
+  generating.value = true
+  statusMessage.value = "Quantizing vector to Teletext G1 mosaic..."
+  try {
+    const res = await quantizeVectorToTeletext({ svg })
+    if (res.ok) {
+      if (!activeAsset.value) {
+        activeAsset.value = {
+          status: "success",
+          model: "uvcore-teletext",
+          style_preset: "mono_teletext",
+          asset_id: `teletext-${Date.now()}`,
+          prompt: "Teletext G1 Mosaic",
+          svg,
+          teletext: res.teletext,
+        }
+        history.value.unshift(activeAsset.value)
+      } else {
+        activeAsset.value.teletext = res.teletext
+      }
+      previewTab.value = "teletext"
+      statusMessage.value = `Teletext G1 mosaic generated (${res.columns}×${res.rows})`
+    } else {
+      statusMessage.value = `Teletext error: ${res.error}`
+    }
+  } catch (err: any) {
+    statusMessage.value = `Teletext error: ${err?.message || err}`
+  } finally {
+    generating.value = false
+  }
+}
+
+async function handleQuantizeBob() {
+  const svg = quantizeSourceSvg.value.trim() || activeAsset.value?.svg
+  if (!svg) {
+    statusMessage.value = "Please provide an SVG or generate a vector asset first."
+    return
+  }
+  generating.value = true
+  statusMessage.value = "Exporting Amiga BOB blitter object..."
+  try {
+    const res = await quantizeVectorToBob({
+      svg,
+      target_width: quantizeWidth.value,
+      target_height: quantizeHeight.value,
+      planes: quantizePlanes.value,
+    })
+    if (res.ok) {
+      if (!activeAsset.value) {
+        activeAsset.value = {
+          status: "success",
+          model: "uvcore-bob",
+          style_preset: "mono_blueprint",
+          asset_id: `bob-${Date.now()}`,
+          prompt: `Amiga BOB Blitter (${res.width}×${res.height}, ${res.planes} planes)`,
+          svg,
+          bob: {
+            width: res.width,
+            height: res.height,
+            planes: res.planes,
+            bytes_per_row: res.bytes_per_row,
+            plane_size_bytes: res.plane_size_bytes,
+            total_bytes: res.total_bytes,
+            data_hex: res.data_hex,
+          },
+        }
+        history.value.unshift(activeAsset.value)
+      } else {
+        activeAsset.value.bob = {
+          width: res.width,
+          height: res.height,
+          planes: res.planes,
+          bytes_per_row: res.bytes_per_row,
+          plane_size_bytes: res.plane_size_bytes,
+          total_bytes: res.total_bytes,
+          data_hex: res.data_hex,
+        }
+      }
+      previewTab.value = "bob"
+      statusMessage.value = `BOB generated: ${res.width}×${res.height}, ${res.planes} planes (${res.total_bytes} bytes)`
+    } else {
+      statusMessage.value = `BOB export error: ${res.error}`
+    }
+  } catch (err: any) {
+    statusMessage.value = `BOB export error: ${err?.message || err}`
+  } finally {
+    generating.value = false
+  }
+}
+
+function copyBobHex() {
+  if (!activeAsset.value?.bob?.data_hex) return
+  navigator.clipboard.writeText(activeAsset.value.bob.data_hex)
+  statusMessage.value = "Planar BOB hex copied to clipboard."
+}
+
 function handleFileUpload(event: Event) {
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) return
@@ -1000,6 +1336,78 @@ async function saveToVault() {
   white-space: pre;
 }
 
+.banana-studio__lattice-wrapper,
+.banana-studio__bob-wrapper {
+  background: var(--usx-color-surface-variant);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-sm);
+  padding: var(--usx-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--usx-spacing-sm);
+}
+
+.banana-studio__lattice-stats {
+  display: flex;
+  gap: var(--usx-spacing-md);
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-primary);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  padding-bottom: var(--usx-spacing-xs);
+}
+
+.banana-studio__lattice-matrix {
+  background: #000000;
+  border-radius: var(--usx-radius-sm);
+  padding: var(--usx-spacing-xs);
+  overflow: auto;
+  max-height: 380px;
+  font-size: 10px;
+  line-height: 1;
+  color: #39c5cf;
+}
+
+.banana-studio__lattice-row {
+  letter-spacing: 1px;
+}
+
+.banana-studio__bob-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--usx-spacing-xs);
+  font-size: var(--usx-font-size-xs);
+}
+
+.banana-studio__bob-hex-card {
+  margin-top: var(--usx-spacing-xs);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-sm);
+  overflow: hidden;
+}
+
+.banana-studio__bob-hex-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--usx-spacing-xs) var(--usx-spacing-sm);
+  background: var(--usx-color-surface);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  font-weight: var(--usx-font-weight-medium);
+}
+
+.banana-studio__bob-hex {
+  margin: 0;
+  padding: var(--usx-spacing-sm);
+  background: #000000;
+  color: #58a6ff;
+  font-size: 11px;
+  line-height: 1.4;
+  word-break: break-all;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
 .banana-studio__inspector-wrapper {
   padding: var(--usx-spacing-sm);
   background: var(--usx-color-surface-variant);
diff --git a/frontend-vue/src/surfaces/browserui/panels/CardStack.vue b/frontend-vue/src/surfaces/browserui/panels/CardStack.vue
index ffd4941b..bad1942d 100644
--- a/frontend-vue/src/surfaces/browserui/panels/CardStack.vue
+++ b/frontend-vue/src/surfaces/browserui/panels/CardStack.vue
@@ -40,8 +40,8 @@
           <span v-for="t in card.tags" :key="t" class="card-stack__tag">{{ t }}</span>
         </div>
         <div class="card-stack__actions">
-          <button class="uxs-btn uxs-btn--sm" @click.stop="$emit('research', card)">Research</button>
-          <button class="uxs-btn uxs-btn--sm" @click.stop="$emit('enhance', card)">Enhance</button>
+          <button class="usx-btn usx-btn--sm" @click.stop="$emit('research', card)">Research</button>
+          <button class="usx-btn usx-btn--sm" @click.stop="$emit('enhance', card)">Enhance</button>
         </div>
       </div>
     </div>
@@ -159,13 +159,14 @@ function scoreClass(s: number | undefined): string {
   color: var(--usx-color-on-surface-muted);
 }
 .card-stack__actions { display: flex; gap: var(--usx-spacing-xs); }
-.uxs-btn {
+.usx-btn {
   display: inline-flex; align-items: center; gap: var(--usx-spacing-xs);
-  border: 1px solid var(--usx-color-border); border-radius: var(--usx-radius-sm);
+  border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-md);
   padding: 4px var(--usx-spacing-sm); cursor: pointer;
   background: var(--usx-color-surface); font-size: var(--usx-font-size-xs);
   color: var(--usx-color-on-surface); white-space: nowrap;
+  transition: all var(--usx-transition-base);
 }
-.uxs-btn:hover { background: var(--usx-color-surface-hover); }
-.uxs-btn--sm { font-size: var(--usx-font-size-xs); padding: 3px var(--usx-spacing-sm); }
+.usx-btn:hover { background: var(--usx-color-surface-hover); border-color: var(--usx-color-primary); }
+.usx-btn--sm { font-size: var(--usx-font-size-xs); padding: 3px var(--usx-spacing-sm); }
 </style>
diff --git a/frontend-vue/src/surfaces/browserui/panels/EditTab.vue b/frontend-vue/src/surfaces/browserui/panels/EditTab.vue
index 0ff4c75a..772b171a 100644
--- a/frontend-vue/src/surfaces/browserui/panels/EditTab.vue
+++ b/frontend-vue/src/surfaces/browserui/panels/EditTab.vue
@@ -5,8 +5,8 @@
   <div class="edit-tab">
     <div class="edit-tab__toolbar">
       <span class="edit-tab__binder" v-if="binder">Binder: {{ binder }}</span>
-      <button class="uxs-btn" @click="undo" :disabled="historyIndex <= 0">Undo</button>
-      <button class="uxs-btn" @click="redo" :disabled="historyIndex >= history.length-1">Redo</button>
+      <button class="usx-btn" @click="undo" :disabled="historyIndex <= 0">Undo</button>
+      <button class="usx-btn" @click="redo" :disabled="historyIndex >= history.length-1">Redo</button>
     </div>
     <div class="edit-tab__frontmatter">
       <input v-model="fmTitle" placeholder="Title" class="edit-tab__fm-input" />
@@ -20,8 +20,8 @@
       placeholder="Write markdown..."
     />
     <div class="edit-tab__footer">
-      <button class="uxs-btn" @click="$emit('preview')">Preview</button>
-      <button class="uxs-btn uxs-btn--primary" @click="$emit('save', { title: fmTitle, content: text, tags: (fmTags || '').split(',').map(t=>t.trim()).filter(Boolean) })">Save to Binder</button>
+      <button class="usx-btn" @click="$emit('preview')">Preview</button>
+      <button class="usx-btn usx-btn--primary" @click="$emit('save', { title: fmTitle, content: text, tags: (fmTags || '').split(',').map(t=>t.trim()).filter(Boolean) })">Save to Binder</button>
     </div>
   </div>
 </template>
@@ -83,8 +83,8 @@ function redo() {
 .edit-tab__fm-input { flex: 1; min-height: var(--usx-touch-target-compact); padding: 0 var(--usx-spacing-sm); border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-sm); font-size: var(--usx-font-size-sm); background: var(--usx-color-surface-variant); }
 .edit-tab__editor { flex: 1; min-height: calc(var(--usx-touch-target-comfortable) * 4); padding: var(--usx-spacing-sm); border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-sm); font-family: var(--usx-font-family-mono); font-size: var(--usx-font-size-sm); resize: vertical; background: var(--usx-color-surface); }
 .edit-tab__footer { display: flex; gap: var(--usx-spacing-xs); margin-top: var(--usx-spacing-xs); }
-.uxs-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-sm); min-height: var(--usx-touch-target-compact); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); }
-.uxs-btn:hover { background: var(--usx-color-surface-hover); }
-.uxs-btn:disabled { opacity: 0.5; cursor: default; }
-.uxs-btn--primary { background: var(--usx-color-primary); color: var(--usx-color-on-primary); border-color: var(--usx-color-primary); }
+.usx-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-md); min-height: var(--usx-control-size-sm); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); transition: all var(--usx-transition-base); }
+.usx-btn:hover { background: var(--usx-color-surface-hover); border-color: var(--usx-color-primary); }
+.usx-btn:disabled { opacity: 0.5; cursor: default; }
+.usx-btn--primary { background: var(--usx-color-primary); color: var(--usx-color-on-primary); border-color: var(--usx-color-primary); }
 </style>
diff --git a/frontend-vue/src/surfaces/browserui/panels/PreviewTab.vue b/frontend-vue/src/surfaces/browserui/panels/PreviewTab.vue
index 89ecb3ca..ad4ecd81 100644
--- a/frontend-vue/src/surfaces/browserui/panels/PreviewTab.vue
+++ b/frontend-vue/src/surfaces/browserui/panels/PreviewTab.vue
@@ -4,8 +4,8 @@
 <template>
   <div class="preview-tab">
     <div class="preview-tab__toolbar">
-      <button class="uxs-btn" @click="$emit('edit')">Edit</button>
-      <button class="uxs-btn" @click="$emit('chatui')">Send to ChatUI</button>
+      <button class="usx-btn" @click="$emit('edit')">Edit</button>
+      <button class="usx-btn" @click="$emit('chatui')">Send to ChatUI</button>
     </div>
     <div class="preview-tab__meta" v-if="meta?.source">
       <span>Source: <a :href="meta?.source" target="_blank">{{ sourceLabel }}</a></span>
@@ -61,6 +61,6 @@ const rendered = computed(() => {
 .prose :deep(code) { background: var(--usx-color-surface-variant); padding: 0 var(--usx-spacing-xs); border-radius: var(--usx-radius-sm); font-size: var(--usx-font-size-xs); }
 .preview-tab__tags { display: flex; gap: var(--usx-spacing-xs); margin-top: var(--usx-spacing-md); }
 .preview-tab__tag { font-size: var(--usx-font-size-xs); min-height: calc(var(--usx-touch-target-compact) - var(--usx-spacing-sm)); padding: 0 var(--usx-spacing-sm); border-radius: var(--usx-radius-full); background: var(--usx-color-surface-variant); display: inline-flex; align-items: center; }
-.uxs-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-sm); min-height: var(--usx-touch-target-compact); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); }
-.uxs-btn:hover { background: var(--usx-color-surface-hover); }
+.usx-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-md); min-height: var(--usx-control-size-sm); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); transition: all var(--usx-transition-base); }
+.usx-btn:hover { background: var(--usx-color-surface-hover); border-color: var(--usx-color-primary); }
 </style>
diff --git a/frontend-vue/src/surfaces/browserui/panels/ResearchDashboard.vue b/frontend-vue/src/surfaces/browserui/panels/ResearchDashboard.vue
index 05f5ca96..4e1d0138 100644
--- a/frontend-vue/src/surfaces/browserui/panels/ResearchDashboard.vue
+++ b/frontend-vue/src/surfaces/browserui/panels/ResearchDashboard.vue
@@ -70,7 +70,7 @@
           <div v-if="selectedJob?.id === j.id && j.state === 'completed'" class="rdash__job-detail">
             <div v-if="j.result?.file"><strong>Saved:</strong> {{ j.result.file }}</div>
             <div v-if="j.result?.score"><strong>Quality:</strong> {{ j.result.score }}/5</div>
-            <button class="uxs-btn uxs-btn--sm" @click.stop="$emit('approve', j)">Approve</button>
+            <button class="usx-btn usx-btn--sm" @click.stop="$emit('approve', j)">Approve</button>
           </div>
         </div>
         </div>
@@ -94,7 +94,7 @@
               <span>Tags</span>
               <input v-model="newTags" placeholder="ai, docs, planning" class="rdash__input rdash__input--sm" />
             </label>
-            <button class="uxs-btn uxs-btn--primary" @click="submitRequest" :disabled="!newUrl">Start Research</button>
+            <button class="usx-btn usx-btn--primary" @click="submitRequest" :disabled="!newUrl">Start Research</button>
           </div>
         </section>
 
@@ -108,14 +108,14 @@
 
           <template v-else>
             <div class="rdash__gap-actions">
-              <button class="uxs-btn uxs-btn--sm" @click="props.gaps.forEach(g => $emit('fillGap', g))">Research All</button>
+              <button class="usx-btn usx-btn--sm" @click="props.gaps.forEach(g => $emit('fillGap', g))">Research All</button>
             </div>
           <div v-for="g in props.gaps" :key="g.topic" class="rdash__gap">
             <UIcon name="warning" class="rdash__gap-icon" />
             <span class="rdash__gap-priority" :class="`rdash__gap-priority--${g.priority || 'low'}`">{{ (g.priority || 'low') }}</span>
             <span class="rdash__gap-topic">{{ g.topic }}</span>
             <span class="rdash__gap-reason">{{ g.reason }}</span>
-            <button class="uxs-btn uxs-btn--sm" @click="$emit('fillGap', g)">Research</button>
+            <button class="usx-btn usx-btn--sm" @click="$emit('fillGap', g)">Research</button>
           </div>
           </template>
         </section>
@@ -411,11 +411,12 @@ function submitRequest() {
 .rdash__gap-topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rdash__gap-reason { font-size: var(--usx-font-size-xs); color: var(--usx-color-on-surface-muted); min-width: 0; }
 
-.uxs-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-sm); min-height: var(--usx-touch-target-compact); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); }
-.uxs-btn:hover { background: var(--usx-color-surface-hover); }
-.uxs-btn--primary { background: var(--usx-color-primary); color: var(--usx-color-on-primary); border-color: var(--usx-color-primary); }
-.uxs-btn--sm { font-size: var(--usx-font-size-xs); }
-.uxs-btn:disabled { opacity: 0.5; cursor: default; }
+.usx-btn { border: var(--usx-border-width) solid var(--usx-color-border); border-radius: var(--usx-radius-md); min-height: var(--usx-control-size-sm); padding: 0 var(--usx-spacing-sm); cursor: pointer; background: var(--usx-color-surface); font-size: var(--usx-font-size-xs); transition: all var(--usx-transition-base); }
+.usx-btn:hover { background: var(--usx-color-surface-hover); border-color: var(--usx-color-primary); }
+.usx-btn--primary { background: var(--usx-color-primary); color: var(--usx-color-on-primary); border-color: var(--usx-color-primary); }
+.usx-btn--primary:hover { background: var(--usx-color-primary-hover); }
+.usx-btn--sm { font-size: var(--usx-font-size-xs); min-height: 28px; }
+.usx-btn:disabled { opacity: 0.5; cursor: default; }
 
 @media (max-width: 1100px) {
   .rdash__stats {
diff --git a/frontend-vue/src/surfaces/dashboard/DashboardSurface.vue b/frontend-vue/src/surfaces/dashboard/DashboardSurface.vue
index 04174231..d92328ab 100644
--- a/frontend-vue/src/surfaces/dashboard/DashboardSurface.vue
+++ b/frontend-vue/src/surfaces/dashboard/DashboardSurface.vue
@@ -17,6 +17,92 @@
         <h1 class="dashboard-surface__title">Dashboard</h1>
         <p class="dashboard-surface__subtitle">Select a surface to begin</p>
 
+        <!-- Sovereign Ecosystem Sync Status Card -->
+        <div class="dashboard-sync-card surface__panel">
+          <div class="dashboard-sync-card__header">
+            <div class="dashboard-sync-card__title">
+              <span
+                class="dashboard-sync-card__dot"
+                :class="{ 'dashboard-sync-card__dot--active': syncState.ok }"
+              />
+              <h3>Sovereign Ecosystem Sync</h3>
+            </div>
+            <div class="dashboard-sync-card__actions">
+              <span v-if="syncState.timestamp" class="dashboard-sync-card__time font-mono">
+                {{ formatSyncTime(syncState.timestamp) }}
+              </span>
+              <button
+                type="button"
+                class="usx-btn usx-btn--sm usx-btn--secondary"
+                :disabled="syncing"
+                @click="fetchSyncStatus"
+              >
+                <UIcon :name="syncing ? 'sync' : 'refresh'" :class="{ 'dashboard-spin': syncing }" />
+                <span>{{ syncing ? "Checking..." : "Check Status" }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="dashboard-sync-card__grid">
+            <!-- Apple PIM -->
+            <div class="dashboard-sync-item">
+              <div class="dashboard-sync-item__icon">
+                <UIcon name="phone_iphone" />
+              </div>
+              <div class="dashboard-sync-item__info">
+                <span class="dashboard-sync-item__label">Apple Ecosystem (PIM)</span>
+                <span class="dashboard-sync-item__detail">
+                  Reminders · Notes · Mail · Messages (JXA)
+                </span>
+              </div>
+              <UBadge
+                :type="syncState.apple_sync?.reminders?.available ? 'success' : 'neutral'"
+                size="sm"
+              >
+                {{ syncState.apple_sync?.reminders?.available ? "Bridged" : "Standby" }}
+              </UBadge>
+            </div>
+
+            <!-- BitChat Mesh -->
+            <div class="dashboard-sync-item">
+              <div class="dashboard-sync-item__icon">
+                <UIcon name="hub" />
+              </div>
+              <div class="dashboard-sync-item__info">
+                <span class="dashboard-sync-item__label">BitChat Mesh Transport</span>
+                <span class="dashboard-sync-item__detail font-mono">
+                  {{ syncState.bitchat_mesh?.local_peer_id || "LAN Mesh" }} · {{ syncState.bitchat_mesh?.online_peers || 0 }} peers
+                </span>
+              </div>
+              <UBadge
+                :type="syncState.bitchat_mesh?.active ? 'success' : 'neutral'"
+                size="sm"
+              >
+                {{ syncState.bitchat_mesh?.active ? "Active" : "Offline" }}
+              </UBadge>
+            </div>
+
+            <!-- Google Vault -->
+            <div class="dashboard-sync-item">
+              <div class="dashboard-sync-item__icon">
+                <UIcon name="folder_shared" />
+              </div>
+              <div class="dashboard-sync-item__info">
+                <span class="dashboard-sync-item__label">Sovereign Vault Storage</span>
+                <span class="dashboard-sync-item__detail font-mono">
+                  {{ syncState.google_drive?.vault_path || "~/Vault" }}
+                </span>
+              </div>
+              <UBadge
+                :type="syncState.google_drive?.vault_exists ? 'success' : 'neutral'"
+                size="sm"
+              >
+                {{ syncState.google_drive?.vault_exists ? "Mounted" : "Missing" }}
+              </UBadge>
+            </div>
+          </div>
+        </div>
+
         <div class="dashboard-surface__grid-inner">
           <SurfaceCard
             v-for="surface in visibleSurfaces"
@@ -58,8 +144,11 @@ import { ref, computed, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useShellStore } from "../../stores/shell";
 import { useExtensionStore } from "../../stores/extensions";
+import { ucoreApi } from "../../api/client";
 import SurfaceCard from "../../skills/molecules/SurfaceCard.vue";
 import SurfaceTabNav from "../../skills/molecules/SurfaceTabNav.vue";
+import UIcon from "../../skills/atoms/UIcon.vue";
+import UBadge from "../../skills/atoms/UBadge.vue";
 
 const router = useRouter();
 const shell = useShellStore();
@@ -294,8 +383,67 @@ const activeExtensions = computed(() => {
     }));
 });
 
+const syncState = ref<{
+  ok?: boolean;
+  timestamp?: string | null;
+  apple_sync?: {
+    reminders?: { available?: boolean; bidirectional?: boolean };
+    notes?: { available?: boolean; bidirectional?: boolean };
+    mail?: { available?: boolean; bidirectional?: boolean };
+    messages?: { available?: boolean; bidirectional?: boolean };
+  } | null;
+  google_drive?: {
+    configured?: boolean;
+    vault_path?: string;
+    vault_exists?: boolean;
+    cloud_storage_detected?: boolean;
+  } | null;
+  bitchat_mesh?: {
+    active?: boolean;
+    local_peer_id?: string;
+    online_peers?: number;
+  } | null;
+}>({
+  ok: true,
+  timestamp: null,
+  apple_sync: null,
+  google_drive: null,
+  bitchat_mesh: null,
+});
+
+const syncing = ref(false);
+
+async function fetchSyncStatus() {
+  syncing.value = true;
+  try {
+    const res = await ucoreApi.host.syncStatus();
+    if (res) {
+      syncState.value = res;
+    }
+  } catch (err) {
+    console.warn("Failed to fetch host sync status:", err);
+  } finally {
+    syncing.value = false;
+  }
+}
+
+function formatSyncTime(ts: string | null | undefined): string {
+  if (!ts) return "";
+  try {
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return "";
+  }
+}
+
 onMounted(() => {
   void extStore.fetchCatalogue();
+  void fetchSyncStatus();
 });
 
 function navigate(route: string) {
@@ -337,6 +485,128 @@ function navigate(route: string) {
   font-size: var(--usx-font-size-base);
 }
 
+/* ── Sovereign Ecosystem Sync Card ───────────────────────────── */
+
+.dashboard-sync-card {
+  margin-bottom: var(--usx-spacing-xl);
+  padding: var(--usx-spacing-md);
+  background: var(--usx-color-surface);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-lg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.dashboard-sync-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--usx-spacing-sm);
+  margin-bottom: var(--usx-spacing-md);
+  padding-bottom: var(--usx-spacing-xs);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  flex-wrap: wrap;
+}
+
+.dashboard-sync-card__title {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
+}
+
+.dashboard-sync-card__title h3 {
+  margin: 0;
+  font-size: var(--usx-font-size-md);
+  font-weight: 600;
+  color: var(--usx-color-on-surface);
+}
+
+.dashboard-sync-card__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--usx-color-on-surface-muted);
+  display: inline-block;
+  transition: background-color 0.2s ease;
+}
+
+.dashboard-sync-card__dot--active {
+  background: var(--usx-color-success);
+  box-shadow: 0 0 6px var(--usx-color-success);
+}
+
+.dashboard-sync-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
+}
+
+.dashboard-sync-card__time {
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-on-surface-muted);
+}
+
+.dashboard-sync-card__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--usx-spacing-md);
+}
+
+.dashboard-sync-item {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-md);
+  background: var(--usx-color-surface-variant);
+}
+
+.dashboard-sync-item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--usx-radius-sm);
+  background: var(--usx-color-surface);
+  color: var(--usx-color-primary);
+  flex-shrink: 0;
+}
+
+.dashboard-sync-item__info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.dashboard-sync-item__label {
+  font-size: var(--usx-font-size-xs);
+  font-weight: 600;
+  color: var(--usx-color-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dashboard-sync-item__detail {
+  font-size: 0.7rem;
+  color: var(--usx-color-on-surface-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dashboard-spin {
+  animation: dashboard-spin 1s linear infinite;
+}
+
+@keyframes dashboard-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .dashboard-surface__grid-inner {
   --dashboard-column-min: calc(var(--usx-touch-min) * 8);
   --dashboard-column-max: 3;
diff --git a/frontend-vue/src/surfaces/groovebox/GrooveboxSurface.vue b/frontend-vue/src/surfaces/groovebox/GrooveboxSurface.vue
index 8b19ba32..59cb6c7c 100644
--- a/frontend-vue/src/surfaces/groovebox/GrooveboxSurface.vue
+++ b/frontend-vue/src/surfaces/groovebox/GrooveboxSurface.vue
@@ -1,32 +1,30 @@
 <template>
   <div class="groovebox-surface-wrapper">
-    <div class="groovebox-surface-toolbar">
-      <button
-        class="groovebox-surface-back"
-        @click="router.push('/')"
-        title="Back to Dashboard"
-      >
-        &#x2190; Dashboard
-      </button>
-      <span class="groovebox-surface-label">Groovebox</span>
-      <span
-        class="groovebox-surface-status"
-        :class="`is-${connectionStatus}`"
-        role="status"
-        aria-live="polite"
-      >
-        <span class="groovebox-surface-status-dot" aria-hidden="true" />
-        {{ connectionStatusLabel }}
-      </span>
-      <a
-        class="groovebox-surface-external"
-        :href="grooveboxUrl"
-        target="_blank"
-        title="Open in new tab"
-      >
-        &#x2197;
-      </a>
-    </div>
+    <header class="groovebox-header">
+      <div class="groovebox-header__title-group">
+        <h1 class="groovebox-header__title">Groovebox</h1>
+        <span
+          class="groovebox-surface-status"
+          :class="`is-${connectionStatus}`"
+          role="status"
+          aria-live="polite"
+        >
+          <span class="groovebox-surface-status-dot" aria-hidden="true" />
+          {{ connectionStatusLabel }}
+        </span>
+      </div>
+      <div class="groovebox-header__actions">
+        <a
+          class="usx-btn usx-btn--sm usx-btn--secondary"
+          :href="grooveboxUrl"
+          target="_blank"
+          title="Open Groovebox in new tab"
+        >
+          <UIcon name="open_in_new" />
+          <span>External</span>
+        </a>
+      </div>
+    </header>
     <iframe
       :key="iframeKey"
       ref="iframeRef"
@@ -49,16 +47,19 @@
       <div class="groovebox-surface-error-title">Groovebox is unavailable</div>
       <div class="groovebox-surface-error-body">{{ loadError }}</div>
       <div class="groovebox-surface-error-actions">
-        <button class="groovebox-surface-retry" @click="retryLoad">
-          Retry
+        <button class="usx-btn usx-btn--sm usx-btn--primary" @click="retryLoad">
+          <UIcon name="refresh" />
+          <span>Retry</span>
         </button>
         <a
-          class="groovebox-surface-open"
+          class="usx-btn usx-btn--sm usx-btn--secondary"
           :href="grooveboxUrl"
           target="_blank"
           rel="noopener"
-          >Open directly</a
         >
+          <UIcon name="open_in_new" />
+          <span>Open directly</span>
+        </a>
       </div>
     </div>
   </div>
@@ -73,9 +74,7 @@
  * @usage Routed at '/groovebox'
  */
 import { computed, ref, onBeforeUnmount, onMounted } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
+import UIcon from "../../skills/atoms/UIcon.vue";
 const iframeRef = ref<HTMLIFrameElement | null>(null);
 const loading = ref(true);
 const loadError = ref<string | null>(null);
@@ -153,40 +152,33 @@ onBeforeUnmount(() => {
   position: relative;
 }
 
-.groovebox-surface-toolbar {
+.groovebox-header {
   display: flex;
   align-items: center;
-  gap: var(--usx-spacing-md);
+  justify-content: space-between;
   padding: var(--usx-spacing-sm) var(--usx-spacing-md);
   background: var(--usx-color-surface);
   border-bottom: var(--usx-border-width) solid var(--usx-color-border);
   flex-shrink: 0;
-  min-height: var(--usx-touch-min);
 }
 
-.groovebox-surface-back {
-  background: none;
-  border: var(--usx-border-width) solid var(--usx-color-border);
-  border-radius: var(--usx-radius-sm);
-  color: var(--usx-color-on-surface-muted);
-  cursor: pointer;
-  font-size: var(--usx-font-size-sm);
-  font-family: inherit;
-  padding: var(--usx-spacing-xs) var(--usx-spacing-md);
-  transition: background var(--usx-transition-fast), border-color var(--usx-transition-fast), color var(--usx-transition-fast);
+.groovebox-header__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-md);
 }
 
-.groovebox-surface-back:hover {
-  background: var(--usx-color-surface-hover);
+.groovebox-header__title {
+  font-size: var(--usx-font-size-xl);
+  font-weight: 600;
+  margin: 0;
   color: var(--usx-color-on-surface);
-  border-color: var(--usx-color-primary);
 }
 
-.groovebox-surface-label {
-  flex: 1;
-  font-weight: var(--usx-font-weight-semibold);
-  color: var(--usx-color-on-surface);
-  font-size: var(--usx-font-size-sm);
+.groovebox-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
 }
 
 .groovebox-surface-status {
@@ -231,20 +223,6 @@ onBeforeUnmount(() => {
   color: var(--usx-color-warning);
 }
 
-.groovebox-surface-external {
-  color: var(--usx-color-on-surface-muted);
-  text-decoration: none;
-  font-size: var(--usx-font-size-lg);
-  padding: var(--usx-spacing-xs) var(--usx-spacing-sm);
-  border-radius: var(--usx-radius-sm);
-  transition: background var(--usx-transition-fast), color var(--usx-transition-fast);
-}
-
-.groovebox-surface-external:hover {
-  color: var(--usx-color-primary);
-  background: var(--usx-color-surface-hover);
-}
-
 .groovebox-surface-iframe {
   flex: 1;
   width: 100%;
diff --git a/frontend-vue/src/surfaces/homenest/HomeNestSurface.vue b/frontend-vue/src/surfaces/homenest/HomeNestSurface.vue
index d6bef786..90a1aa27 100644
--- a/frontend-vue/src/surfaces/homenest/HomeNestSurface.vue
+++ b/frontend-vue/src/surfaces/homenest/HomeNestSurface.vue
@@ -1,34 +1,29 @@
 <template>
   <div class="homenest-surface-wrapper">
-    <div class="homenest-surface-toolbar">
-      <button
-        class="homenest-surface-back"
-        @click="router.push('/')"
-        title="Back to Dashboard"
-      >
-        ← Dashboard
-      </button>
-      <span class="homenest-surface-label">HomeNest</span>
-      <span class="homenest-surface-badge">Media & Steam Living-Room Console</span>
-    </div>
+    <header class="homenest-header">
+      <div class="homenest-header__title-group">
+        <h1 class="homenest-header__title">HomeNest</h1>
+        <UBadge type="success" size="sm">Media & Steam Living-Room Console</UBadge>
+      </div>
+    </header>
 
     <div class="homenest-surface-body">
       <!-- Status Summary -->
       <div class="homenest-summary-grid">
         <div class="homenest-stat-card">
-          <div class="homenest-stat-value text-emerald-400">{{ lifecycleState.toUpperCase() }}</div>
+          <div class="homenest-stat-value text-success">{{ lifecycleState.toUpperCase() }}</div>
           <div class="homenest-stat-label">Presentation State</div>
         </div>
         <div class="homenest-stat-card">
-          <div class="homenest-stat-value text-sky-400">{{ activePresentation || 'None' }}</div>
+          <div class="homenest-stat-value text-info">{{ activePresentation || 'None' }}</div>
           <div class="homenest-stat-label">Active Session</div>
         </div>
         <div class="homenest-stat-card">
-          <div class="homenest-stat-value text-purple-400">{{ queue.length }}</div>
+          <div class="homenest-stat-value text-primary">{{ queue.length }}</div>
           <div class="homenest-stat-label">Queued Media</div>
         </div>
         <div class="homenest-stat-card">
-          <div class="homenest-stat-value text-amber-400">{{ focusTarget }}</div>
+          <div class="homenest-stat-value text-warning">{{ focusTarget }}</div>
           <div class="homenest-stat-label">Input Focus</div>
         </div>
       </div>
@@ -37,29 +32,32 @@
       <div class="homenest-card">
         <div class="homenest-card-header">
           <h2>Presentation Lifecycle Controls</h2>
-          <span class="homenest-badge font-mono">{{ running ? 'LIVE' : 'IDLE' }}</span>
+          <UBadge :type="running ? 'success' : 'neutral'" size="sm">{{ running ? 'LIVE' : 'IDLE' }}</UBadge>
         </div>
         <div class="homenest-card-content flex gap-3 p-4">
           <button
-            class="homenest-btn homenest-btn--primary"
+            class="usx-btn usx-btn--primary"
             :disabled="running && activePresentation === 'steam-console'"
             @click="startPresentation('steam-console')"
           >
-            🎮 Launch Steam Console
+            <UIcon name="sports_esports" />
+            <span>Launch Steam Console</span>
           </button>
           <button
-            class="homenest-btn homenest-btn--secondary"
+            class="usx-btn usx-btn--secondary"
             :disabled="running && activePresentation === 'thin-gui'"
             @click="startPresentation('thin-gui')"
           >
-            📺 Launch Thin GUI
+            <UIcon name="tv" />
+            <span>Launch Thin GUI</span>
           </button>
           <button
-            class="homenest-btn homenest-btn--danger"
+            class="usx-btn usx-btn--danger"
             :disabled="!running"
             @click="stopPresentation"
           >
-            ⏹ Stop Session & Restore Focus
+            <UIcon name="stop" />
+            <span>Stop Session & Restore Focus</span>
           </button>
         </div>
       </div>
@@ -68,15 +66,18 @@
       <div class="homenest-card">
         <div class="homenest-card-header">
           <h2>Playback Handoff Queue</h2>
-          <button class="homenest-btn" @click="addSampleMedia">Enqueue Sample Media</button>
+          <button class="usx-btn usx-btn--sm usx-btn--secondary" @click="addSampleMedia">
+            <UIcon name="add" />
+            <span>Enqueue Sample Media</span>
+          </button>
         </div>
         <div class="homenest-event-list">
           <div v-if="queue.length === 0" class="p-4 text-xs text-zinc-500 text-center font-mono">
             No media currently queued.
           </div>
           <div v-for="(item, i) in queue" :key="i" class="homenest-event-row">
-            <span class="homenest-event-time">{{ item.queued_at?.slice(11, 19) || '12:00:00' }}</span>
-            <span class="homenest-badge homenest-badge--info">{{ item.status || 'queued' }}</span>
+            <span class="homenest-event-time font-mono">{{ item.queued_at?.slice(11, 19) || '12:00:00' }}</span>
+            <UBadge type="info" size="sm">{{ item.status || 'queued' }}</UBadge>
             <span class="homenest-event-msg font-medium">{{ item.item_id }}</span>
             <span class="text-xs text-zinc-400 font-mono">Target: {{ item.target_client }}</span>
           </div>
@@ -88,9 +89,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
+import UIcon from '../../skills/atoms/UIcon.vue'
+import UBadge from '../../skills/atoms/UBadge.vue'
 
 const lifecycleState = ref('idle')
 const activePresentation = ref<string | null>(null)
@@ -135,106 +135,87 @@ function addSampleMedia() {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--usx-color-bg, #0d0e11);
-  color: var(--usx-color-text, #e2e4e9);
-  padding: 1rem;
-  gap: 1rem;
-}
-.homenest-surface-toolbar {
+  background: var(--usx-color-surface-base, var(--usx-color-bg, #0d0e11));
+  color: var(--usx-color-on-surface, #e2e4e9);
+  padding: var(--usx-spacing-md);
+  gap: var(--usx-spacing-md);
+  max-width: var(--usx-max-width);
+  margin: 0 auto;
+  width: 100%;
+}
+.homenest-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--usx-color-border, #262930);
+  justify-content: space-between;
+  padding-bottom: var(--usx-spacing-sm);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
 }
-.homenest-surface-back {
-  background: transparent;
-  border: 1px solid var(--usx-color-border, #262930);
-  color: var(--usx-color-text, #e2e4e9);
-  padding: 0.35rem 0.75rem;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.8rem;
+.homenest-header__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
 }
-.homenest-surface-label {
+.homenest-header__title {
+  font-size: var(--usx-font-size-xl);
   font-weight: 600;
-  font-size: 1.1rem;
-}
-.homenest-surface-badge {
-  font-size: 0.75rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 9999px;
-  background: rgba(16, 185, 129, 0.15);
-  color: #10b981;
-  font-family: monospace;
+  margin: 0;
+  color: var(--usx-color-on-surface);
 }
 .homenest-surface-body {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--usx-spacing-md);
 }
 .homenest-summary-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
+  gap: var(--usx-spacing-sm);
 }
 .homenest-stat-card {
-  background: var(--usx-color-surface, #16181d);
-  border: 1px solid var(--usx-color-border, #262930);
-  border-radius: 8px;
-  padding: 0.75rem;
+  background: var(--usx-color-surface);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-md);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
 }
 .homenest-stat-value {
-  font-size: 1.25rem;
+  font-size: var(--usx-font-size-xl);
   font-weight: 700;
   font-family: monospace;
 }
+.text-success {
+  color: var(--usx-color-success);
+}
+.text-info {
+  color: var(--usx-color-info);
+}
+.text-primary {
+  color: var(--usx-color-primary);
+}
+.text-warning {
+  color: var(--usx-color-warning);
+}
 .homenest-stat-label {
-  font-size: 0.75rem;
-  color: var(--usx-color-text-muted, #8b92a5);
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-on-surface-muted);
 }
 .homenest-card {
-  background: var(--usx-color-surface, #16181d);
-  border: 1px solid var(--usx-color-border, #262930);
-  border-radius: 8px;
+  background: var(--usx-color-surface);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-md);
   overflow: hidden;
 }
 .homenest-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--usx-color-border, #262930);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
 }
 .homenest-card-header h2 {
-  font-size: 0.95rem;
+  font-size: var(--usx-font-size-sm);
   font-weight: 600;
   margin: 0;
 }
-.homenest-btn {
-  background: var(--usx-color-surface-hover, #20242c);
-  border: 1px solid var(--usx-color-border, #262930);
-  color: var(--usx-color-text, #e2e4e9);
-  padding: 0.4rem 0.8rem;
-  border-radius: 6px;
-  font-size: 0.8rem;
-  cursor: pointer;
-}
-.homenest-btn--primary {
-  background: #2563eb;
-  color: #fff;
-  border-color: #3b82f6;
-}
-.homenest-btn--secondary {
-  background: #059669;
-  color: #fff;
-  border-color: #10b981;
-}
-.homenest-btn--danger {
-  background: #dc2626;
-  color: #fff;
-  border-color: #ef4444;
-}
 .homenest-event-list {
   display: flex;
   flex-direction: column;
@@ -242,23 +223,13 @@ function addSampleMedia() {
 .homenest-event-row {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.6rem 1rem;
-  border-bottom: 1px solid var(--usx-color-border, #262930);
-  font-size: 0.8rem;
+  gap: var(--usx-spacing-sm);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  font-size: var(--usx-font-size-sm);
 }
 .homenest-event-time {
-  font-family: monospace;
-  color: var(--usx-color-text-muted, #8b92a5);
-  font-size: 0.75rem;
-}
-.homenest-badge {
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-}
-.homenest-badge--info {
-  background: rgba(59, 130, 246, 0.15);
-  color: #60a5fa;
+  color: var(--usx-color-on-surface-muted);
+  font-size: var(--usx-font-size-xs);
 }
 </style>
diff --git a/frontend-vue/src/surfaces/sonic/SonicScrewdriverSurface.vue b/frontend-vue/src/surfaces/sonic/SonicScrewdriverSurface.vue
index c34749d4..df40296c 100644
--- a/frontend-vue/src/surfaces/sonic/SonicScrewdriverSurface.vue
+++ b/frontend-vue/src/surfaces/sonic/SonicScrewdriverSurface.vue
@@ -1,24 +1,22 @@
 <template>
   <div class="sonic-surface-wrapper">
-    <div class="sonic-surface-toolbar">
-      <button
-        class="sonic-surface-back"
-        @click="router.push('/')"
-        title="Back to Dashboard"
-      >
-        ← Dashboard
-      </button>
-      <span class="sonic-surface-label">SonicScrewdriver</span>
-      <span class="sonic-surface-badge">USB Bootloader & Device Toolkit</span>
-      <a
-        class="sonic-surface-external"
-        href="https://github.com/uDosGo/SonicScrewdriver"
-        target="_blank"
-        title="Open SonicScrewdriver on GitHub"
-      >
-        GitHub ↗
-      </a>
-    </div>
+    <header class="sonic-header">
+      <div class="sonic-header__title-group">
+        <h1 class="sonic-header__title">SonicScrewdriver</h1>
+        <UBadge type="info" size="sm">USB Bootloader & Device Toolkit</UBadge>
+      </div>
+      <div class="sonic-header__actions">
+        <a
+          class="usx-btn usx-btn--sm usx-btn--secondary"
+          href="https://github.com/uDosGo/SonicScrewdriver"
+          target="_blank"
+          title="Open SonicScrewdriver on GitHub"
+        >
+          <UIcon name="open_in_new" />
+          <span>GitHub</span>
+        </a>
+      </div>
+    </header>
 
     <div class="sonic-surface-body">
       <!-- Stats Summary -->
@@ -45,11 +43,14 @@
       <div class="sonic-card">
         <div class="sonic-card-header">
           <h2>Recent Spool Events</h2>
-          <button class="sonic-btn" @click="refresh">Refresh</button>
+          <button class="usx-btn usx-btn--sm usx-btn--secondary" @click="refresh">
+            <UIcon name="refresh" />
+            <span>Refresh</span>
+          </button>
         </div>
         <div class="sonic-event-list">
           <div v-for="(event, i) in events" :key="i" class="sonic-event-row">
-            <span class="sonic-event-time">{{ event.timestamp.slice(0, 19) }}</span>
+            <span class="sonic-event-time font-mono">{{ event.timestamp.slice(0, 19) }}</span>
             <span :class="['sonic-badge', eventBadgeClass(event.level)]">{{ event.level }}</span>
             <span class="sonic-event-msg">{{ event.message }}</span>
             <span class="sonic-event-tags">
@@ -83,8 +84,9 @@
           <h2>Quick Actions</h2>
         </div>
         <div class="sonic-actions">
-          <a href="https://github.com/uDosGo/SonicScrewdriver" target="_blank" class="sonic-btn">
-            GitHub Repo ↗
+          <a href="https://github.com/uDosGo/SonicScrewdriver" target="_blank" class="usx-btn usx-btn--primary">
+            <UIcon name="open_in_new" />
+            <span>GitHub Repository</span>
           </a>
           <span class="sonic-actions-hint">
             Full CLI tools available at <code>~/Code/SonicScrewdriver/cli/</code>
@@ -103,9 +105,8 @@
  * @usage Routed at '/sonic'
  */
 import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
+import UIcon from '../../skills/atoms/UIcon.vue'
+import UBadge from '../../skills/atoms/UBadge.vue'
 
 interface SpoolEvent {
   timestamp: string
@@ -161,59 +162,33 @@ function refresh() {
   overflow: hidden;
 }
 
-.sonic-surface-toolbar {
+.sonic-header {
   display: flex;
   align-items: center;
-  gap: var(--usx-spacing-md);
+  justify-content: space-between;
   padding: var(--usx-spacing-sm) var(--usx-spacing-md);
   background: var(--usx-color-surface);
   border-bottom: var(--usx-border-width) solid var(--usx-color-border);
   flex-shrink: 0;
-  min-height: var(--usx-touch-min);
 }
 
-.sonic-surface-back {
-  background: none;
-  border: var(--usx-border-width) solid var(--usx-color-border);
-  border-radius: var(--usx-radius-sm);
-  color: var(--usx-color-on-surface-muted);
-  cursor: pointer;
-  font-size: var(--usx-font-size-sm);
-  font-family: inherit;
-  padding: var(--usx-spacing-xs) var(--usx-spacing-md);
+.sonic-header__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
 }
 
-.sonic-surface-back:hover {
-  background: var(--usx-color-surface-hover);
+.sonic-header__title {
+  font-size: var(--usx-font-size-xl);
+  font-weight: 600;
+  margin: 0;
   color: var(--usx-color-on-surface);
-  border-color: var(--usx-color-primary);
 }
 
-.sonic-surface-label {
-  flex: 1;
-  font-weight: var(--usx-font-weight-semibold);
-  font-size: var(--usx-font-size-sm);
-}
-
-.sonic-surface-badge {
-  font-size: var(--usx-font-size-xs);
-  color: var(--usx-color-on-surface-muted);
-  background: var(--usx-color-surface-variant);
-  padding: var(--usx-spacing-xs) var(--usx-spacing-sm);
-  border-radius: var(--usx-radius-full);
-}
-
-.sonic-surface-external {
-  color: var(--usx-color-on-surface-muted);
-  text-decoration: none;
-  font-size: var(--usx-font-size-sm);
-  padding: var(--usx-spacing-xs) var(--usx-spacing-sm);
-  border-radius: var(--usx-radius-sm);
-}
-
-.sonic-surface-external:hover {
-  color: var(--usx-color-primary);
-  background: var(--usx-color-surface-hover);
+.sonic-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
 }
 
 .sonic-surface-body {
diff --git a/frontend-vue/src/surfaces/workflow/panels/TasksPanel.vue b/frontend-vue/src/surfaces/workflow/panels/TasksPanel.vue
index 147ab960..f4bbd043 100644
--- a/frontend-vue/src/surfaces/workflow/panels/TasksPanel.vue
+++ b/frontend-vue/src/surfaces/workflow/panels/TasksPanel.vue
@@ -5,49 +5,72 @@
   >
     <!-- ── Task list / kanban (always visible, shrinks when editor slides in) ── -->
     <div class="wf-panel__main wf-zen-surface">
-      <header class="wf-standard-header">
-        <div><p class="wf-standard-header__kicker">User Workflow</p><h2>Task List</h2><p>{{ wf.inProgressCount }} in progress · {{ wf.activeTasks.length }} open</p></div>
-        <button class="wf-standard-header__action" type="button" @click="wf.setTab('editor')"><UIcon name="add" /> New or open task</button>
-      </header>
-      <!-- Compact toolbar row -->
-      <div class="wf-toolbar">
-        <div class="wf-toolbar__toggles">
-          <button
-            class="wf-toolbar__btn"
-            :class="{ 'wf-toolbar__btn--active': viewMode === 'list' }"
-            title="List view"
-            @click="viewMode = 'list'"
-          >
-            <UIcon name="table_rows" />
-          </button>
-          <button
-            class="wf-toolbar__btn"
-            :class="{ 'wf-toolbar__btn--active': viewMode === 'kanban' }"
-            title="Kanban view"
-            @click="viewMode = 'kanban'"
-          >
-            <UIcon name="view_kanban" />
-          </button>
+      <header class="wf-unified-header">
+        <div class="wf-unified-header__left">
+          <p class="wf-standard-header__kicker">User Workflow</p>
+          <div class="wf-unified-header__title-row">
+            <h2 class="wf-unified-header__title">Tasks & Communications</h2>
+            <div class="wf-unified-header__badges">
+              <UBadge type="info" size="sm">{{ wf.activeTasks.length }} open</UBadge>
+              <UBadge v-if="wf.inProgressCount > 0" type="warning" size="sm">{{ wf.inProgressCount }} in progress</UBadge>
+              <UBadge v-if="pendingApprovals.length > 0" type="warning" size="sm">{{ pendingApprovals.length }} approvals</UBadge>
+              <UBadge v-if="inboundItems.length > 0" type="info" size="sm">{{ inboundItems.length }} inbound</UBadge>
+            </div>
+          </div>
         </div>
-        <span class="wf-toolbar__count">{{ wf.activeTasks.length }} open</span>
-        <span
-          v-if="wf.flowLogTasks.length"
-          class="wf-toolbar__count wf-toolbar__count--done"
-        >
-          {{ wf.flowLogTasks.length }} done
-        </span>
-        <div class="wf-toolbar__actions">
-          <button
-            class="wf-toolbar__btn wf-toolbar__sync-btn"
-            :disabled="syncingReminders"
-            title="Sync with Apple Reminders (Bidirectional)"
-            @click="triggerRemindersSync"
-          >
-            <UIcon :name="syncingReminders ? 'sync' : 'alarm'" :class="{ 'wf-spin': syncingReminders }" />
-            <span class="wf-toolbar__btn-label">{{ syncingReminders ? "Syncing..." : "Sync Reminders" }}</span>
-          </button>
+
+        <div class="wf-unified-header__right">
+          <!-- View switcher segmented group -->
+          <div class="wf-segmented-group">
+            <button
+              type="button"
+              class="wf-segmented-btn"
+              :class="{ 'wf-segmented-btn--active': viewMode === 'kanban' }"
+              title="Kanban view"
+              @click="viewMode = 'kanban'"
+            >
+              <UIcon name="view_kanban" />
+              <span>Kanban</span>
+            </button>
+            <button
+              type="button"
+              class="wf-segmented-btn"
+              :class="{ 'wf-segmented-btn--active': viewMode === 'list' }"
+              title="List view"
+              @click="viewMode = 'list'"
+            >
+              <UIcon name="table_rows" />
+              <span>List</span>
+            </button>
+            <button
+              type="button"
+              class="wf-segmented-btn"
+              :class="{ 'wf-segmented-btn--active': viewMode === 'triage' }"
+              title="Inbound Communications Triage"
+              @click="loadInboundTriage(); viewMode = 'triage'"
+            >
+              <UIcon name="mark_email_unread" />
+              <span>Inbox Triage</span>
+            </button>
+          </div>
+
+          <!-- Actions -->
+          <div class="wf-header-actions">
+            <button
+              class="usx-btn usx-btn--secondary"
+              :disabled="syncingReminders"
+              title="Sync with Apple Reminders (Bidirectional)"
+              @click="triggerRemindersSync"
+            >
+              <UIcon :name="syncingReminders ? 'sync' : 'alarm'" :class="{ 'wf-spin': syncingReminders }" />
+              <span class="wf-toolbar__btn-label">{{ syncingReminders ? "Syncing..." : "Sync Reminders" }}</span>
+            </button>
+            <button class="usx-btn usx-btn--primary" type="button" @click="wf.setTab('editor')">
+              <UIcon name="add" /> <span>New Task</span>
+            </button>
+          </div>
         </div>
-      </div>
+      </header>
 
       <div v-if="syncFeedback" class="wf-feedback-banner font-mono">
         <UIcon name="info" /> {{ syncFeedback }}
@@ -88,7 +111,7 @@
         </div>
       </div>
 
-      <div v-else class="kanban-board">
+      <div v-else-if="viewMode === 'kanban'" class="kanban-board">
         <div
           v-for="status in statuses"
           :key="status"
@@ -150,6 +173,136 @@
         </div>
       </div>
 
+      <!-- ── Inbound Communications Triage View ── -->
+      <div v-else-if="viewMode === 'triage'" class="wf-triage-view">
+        <!-- Autonomous Approvals Section -->
+        <section v-if="pendingApprovals.length > 0" class="wf-triage-section surface__panel">
+          <div class="wf-triage-section__header">
+            <div class="wf-triage-section__title">
+              <UIcon name="gavel" />
+              <h3>Autonomous Actions Pending Human Approval</h3>
+            </div>
+            <UBadge type="warning" size="sm">{{ pendingApprovals.length }} Pending</UBadge>
+          </div>
+          <div class="wf-triage-list">
+            <div v-for="task in pendingApprovals" :key="task.id" class="wf-triage-card wf-triage-card--approval">
+              <div class="wf-triage-card__main">
+                <div class="wf-triage-card__header">
+                  <span class="wf-triage-card__badge wf-triage-card__badge--autonomous">Autonomous Gate</span>
+                  <span class="wf-triage-card__title">{{ task.title }}</span>
+                </div>
+                <p class="wf-triage-card__desc">{{ task.description || task.summary || 'Awaiting sovereign approval before execution.' }}</p>
+                <div v-if="task.action_type" class="wf-triage-card__meta font-mono">
+                  <span>Action: {{ task.action_type }}</span>
+                </div>
+              </div>
+              <div class="wf-triage-card__actions">
+                <button
+                  type="button"
+                  class="usx-btn usx-btn--sm usx-btn--primary"
+                  @click="handleApproveTask(task)"
+                >
+                  <UIcon name="check" /> Approve
+                </button>
+                <button
+                  type="button"
+                  class="usx-btn usx-btn--sm usx-btn--secondary"
+                  @click="handleRejectTask(task)"
+                >
+                  <UIcon name="close" /> Reject
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Inbound Communications Feed -->
+        <section class="wf-triage-section surface__panel">
+          <div class="wf-triage-section__header">
+            <div class="wf-triage-section__title">
+              <UIcon name="inbox" />
+              <h3>Host Inbound Feed (Apple Mail & Messages)</h3>
+            </div>
+            <div class="wf-triage-section__actions">
+              <button
+                type="button"
+                class="usx-btn usx-btn--sm"
+                :disabled="loadingInbound"
+                @click="loadInboundTriage"
+              >
+                <UIcon :name="loadingInbound ? 'sync' : 'refresh'" :class="{ 'wf-spin': loadingInbound }" />
+                <span>Fetch Latest</span>
+              </button>
+            </div>
+          </div>
+
+          <div v-if="loadingInbound" class="wf-loading">
+            <UIcon name="sync" class="wf-spin" /> Querying Apple Mail & Messages via JXA...
+          </div>
+
+          <div v-else-if="inboundItems.length === 0" class="wf-triage-empty">
+            <UIcon name="mark_email_read" :size="40" />
+            <p>All host communications are triaged. Zero pending messages.</p>
+            <button type="button" class="usx-btn usx-btn--sm usx-btn--secondary" @click="loadInboundTriage">
+              Check for New Messages
+            </button>
+          </div>
+
+          <div v-else class="wf-triage-list">
+            <div
+              v-for="item in inboundItems"
+              :key="item.id"
+              class="wf-triage-card"
+              :class="`wf-triage-card--${item.source}`"
+            >
+              <div class="wf-triage-card__main">
+                <div class="wf-triage-card__header">
+                  <span
+                    class="wf-triage-card__badge"
+                    :class="item.source === 'mail' ? 'wf-triage-card__badge--mail' : 'wf-triage-card__badge--imessage'"
+                  >
+                    <UIcon :name="item.source === 'mail' ? 'mail' : 'chat'" />
+                    {{ item.source === 'mail' ? 'Apple Mail' : 'iMessage' }}
+                  </span>
+                  <span class="wf-triage-card__sender">{{ item.sender }}</span>
+                  <span class="wf-triage-card__time font-mono">{{ item.timestamp }}</span>
+                </div>
+                <h4 v-if="item.subject" class="wf-triage-card__subject">{{ item.subject }}</h4>
+                <p class="wf-triage-card__preview">{{ item.preview }}</p>
+              </div>
+              <div class="wf-triage-card__actions">
+                <button
+                  type="button"
+                  class="usx-btn usx-btn--sm usx-btn--primary"
+                  title="Extract action and add as Workflow Task"
+                  @click="convertInboundToTask(item)"
+                >
+                  <UIcon name="add_task" /> Convert to Task
+                </button>
+                <template v-if="item.source === 'mail'">
+                  <button
+                    type="button"
+                    class="usx-btn usx-btn--sm usx-btn--secondary"
+                    title="Flag email in Apple Mail"
+                    @click="flagMail(item)"
+                  >
+                    <UIcon name="flag" />
+                  </button>
+                  <button
+                    type="button"
+                    class="usx-btn usx-btn--sm usx-btn--secondary"
+                    title="Archive email in Apple Mail"
+                    @click="archiveMail(item)"
+                  >
+                    <UIcon name="archive" />
+                  </button>
+                </template>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
       <section v-if="wf.flowLogTasks.length > 0" class="wf-flowlog">
         <header class="wf-flowlog__header">
           <div>
@@ -239,12 +392,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
 import UIcon from "../../../skills/atoms/UIcon.vue";
 import UBadge from "../../../skills/atoms/UBadge.vue";
 import { EditorPanel } from "../../../skills";
 import { useWorkflowStore, type WorkflowTask } from "../../../stores/workflow";
 import { toTaskMarkdownLine } from "../../../utils/taskMarkdown";
+import { ucoreApi } from "../../../api/client";
 import {
   approveTaskAction,
   syncAppleRemindersInbound,
@@ -253,7 +407,7 @@ import {
 } from "../../browserui/ApiBridge";
 
 const wf = useWorkflowStore();
-const viewMode = ref<"list" | "kanban">("list");
+const viewMode = ref<"list" | "kanban" | "triage">("kanban");
 const statuses = ["todo", "in-progress", "review", "blocked"];
 const dragTaskId = ref<string | null>(null);
 const dragFromStatus = ref<string | null>(null);
@@ -265,6 +419,168 @@ const syncingSingleRem = ref(false);
 const executingAction = ref(false);
 const syncFeedback = ref<string | null>(null);
 
+// ── Communications & Inbound Triage state ─────────────────────────
+const inboundItems = ref<
+  Array<{
+    id: string;
+    source: "mail" | "imessage";
+    sender: string;
+    subject?: string;
+    preview: string;
+    timestamp: string;
+    raw?: any;
+  }>
+>([]);
+const loadingInbound = ref(false);
+
+const pendingApprovals = computed(() =>
+  (wf.tasks || []).filter(
+    (t) =>
+      t.approval_status === "pending" ||
+      (t.workflowType === "autonomous" && t.status === "in-progress"),
+  ),
+);
+
+async function loadInboundTriage() {
+  loadingInbound.value = true;
+  try {
+    const items: Array<{
+      id: string;
+      source: "mail" | "imessage";
+      sender: string;
+      subject?: string;
+      preview: string;
+      timestamp: string;
+      raw?: any;
+    }> = [];
+
+    // 1. Fetch Apple Mail intake
+    try {
+      const mailRes: any = await ucoreApi.host.mailIntake({
+        limit: 15,
+        unread_only: false,
+      });
+      if (mailRes?.ok && Array.isArray(mailRes.items)) {
+        for (const m of mailRes.items) {
+          items.push({
+            id: m.id || m.message_id || `mail-${Math.random()}`,
+            source: "mail",
+            sender: m.sender || m.from || "Apple Mail",
+            subject: m.subject || "(No Subject)",
+            preview: m.snippet || m.body || "",
+            timestamp:
+              m.date_received || m.timestamp || new Date().toLocaleTimeString(),
+            raw: m,
+          });
+        }
+      }
+    } catch {
+      // Ignored if host Apple Mail is unavailable
+    }
+
+    // 2. Fetch Apple Messages intake
+    try {
+      const msgRes: any = await ucoreApi.host.imessageIntake({ limit: 15 });
+      if (msgRes?.ok && Array.isArray(msgRes.items)) {
+        for (const msg of msgRes.items) {
+          items.push({
+            id: msg.id || `msg-${Math.random()}`,
+            source: "imessage",
+            sender: msg.sender || msg.handle || "iMessage Contact",
+            preview: msg.text || msg.body || "",
+            timestamp: msg.timestamp || new Date().toLocaleTimeString(),
+            raw: msg,
+          });
+        }
+      }
+    } catch {
+      // Ignored if host iMessage is unavailable
+    }
+
+    inboundItems.value = items;
+  } finally {
+    loadingInbound.value = false;
+  }
+}
+
+async function convertInboundToTask(item: {
+  id: string;
+  source: "mail" | "imessage";
+  sender: string;
+  subject?: string;
+  preview: string;
+}) {
+  try {
+    const text = item.subject
+      ? `${item.subject}: ${item.preview}`
+      : item.preview;
+    const res: any = await ucoreApi.workflow.actionToTask({
+      text,
+      source: item.source,
+      source_ref: item.id,
+      priority: "medium",
+      sender: item.sender,
+    });
+    if (res?.ok) {
+      syncFeedback.value = `Created task: "${res.task?.title || item.subject || "Inbound action"}"`;
+      inboundItems.value = inboundItems.value.filter((i) => i.id !== item.id);
+      await wf.fetchTasks();
+    }
+  } catch (err: any) {
+    syncFeedback.value = `Error converting to task: ${err?.message || err}`;
+  }
+}
+
+async function handleApproveTask(task: WorkflowTask) {
+  try {
+    const res: any = await ucoreApi.workflow.approveTask(task.id);
+    if (res?.ok) {
+      syncFeedback.value = `Approved action for: ${task.title}`;
+      await wf.fetchTasks();
+    }
+  } catch (err: any) {
+    syncFeedback.value = `Approval error: ${err?.message || err}`;
+  }
+}
+
+async function handleRejectTask(task: WorkflowTask) {
+  try {
+    const res: any = await ucoreApi.workflow.rejectTask(
+      task.id,
+      "Rejected by user in inbox triage",
+    );
+    if (res?.ok) {
+      syncFeedback.value = `Rejected task: ${task.title}`;
+      await wf.fetchTasks();
+    }
+  } catch (err: any) {
+    syncFeedback.value = `Rejection error: ${err?.message || err}`;
+  }
+}
+
+async function flagMail(item: { id: string }) {
+  try {
+    await ucoreApi.host.mailFlag(item.id, 0);
+    syncFeedback.value = "Flagged message in Apple Mail";
+  } catch (err: any) {
+    syncFeedback.value = `Flag error: ${err?.message || err}`;
+  }
+}
+
+async function archiveMail(item: { id: string }) {
+  try {
+    await ucoreApi.host.mailArchive(item.id);
+    inboundItems.value = inboundItems.value.filter((i) => i.id !== item.id);
+    syncFeedback.value = "Archived message in Apple Mail";
+  } catch (err: any) {
+    syncFeedback.value = `Archive error: ${err?.message || err}`;
+  }
+}
+
+onMounted(() => {
+  void loadInboundTriage();
+});
+
 // ── Inline code editor state ──────────────────────────────────────
 const showCodeEditor = ref(false);
 const activeCodeTask = ref<WorkflowTask | null>(null);
@@ -1153,4 +1469,268 @@ async function handleApproveAction(task: WorkflowTask) {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+/* ── Unified Tasks & Communications Header ───────────────────── */
+
+.wf-unified-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--usx-spacing-md);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
+  background: var(--usx-color-surface);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  flex-wrap: wrap;
+}
+
+.wf-unified-header__left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-unified-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-sm);
+  flex-wrap: wrap;
+}
+
+.wf-unified-header__title {
+  margin: 0;
+  font-size: var(--usx-font-size-lg);
+  font-weight: 600;
+  color: var(--usx-color-on-surface);
+}
+
+.wf-unified-header__badges {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+}
+
+.wf-unified-header__right {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-md);
+  flex-wrap: wrap;
+}
+
+.wf-segmented-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  background: var(--usx-color-surface-variant);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-md);
+  gap: 2px;
+}
+
+.wf-segmented-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+  padding: 0.25rem 0.6rem;
+  font-size: var(--usx-font-size-xs);
+  font-weight: 500;
+  border: none;
+  border-radius: var(--usx-radius-sm);
+  background: transparent;
+  color: var(--usx-color-on-surface-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wf-segmented-btn:hover {
+  color: var(--usx-color-on-surface);
+  background: color-mix(in srgb, var(--usx-color-surface) 60%, transparent);
+}
+
+.wf-segmented-btn--active {
+  background: var(--usx-color-surface);
+  color: var(--usx-color-primary);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.wf-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+}
+
+/* ── Inbound Communications Triage View ─────────────────────── */
+
+.wf-triage-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--usx-spacing-lg);
+  padding: var(--usx-spacing-md);
+  overflow-y: auto;
+}
+
+.wf-triage-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--usx-spacing-md);
+  padding: var(--usx-spacing-md);
+  border-radius: var(--usx-radius-lg);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  background: var(--usx-color-surface);
+}
+
+.wf-triage-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--usx-spacing-sm);
+  border-bottom: var(--usx-border-width) solid var(--usx-color-border);
+  padding-bottom: var(--usx-spacing-xs);
+}
+
+.wf-triage-section__title {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+}
+
+.wf-triage-section__title h3 {
+  margin: 0;
+  font-size: var(--usx-font-size-md);
+  font-weight: 600;
+  color: var(--usx-color-on-surface);
+}
+
+.wf-triage-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--usx-spacing-sm);
+}
+
+.wf-triage-card {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--usx-spacing-md);
+  padding: var(--usx-spacing-sm) var(--usx-spacing-md);
+  border: var(--usx-border-width) solid var(--usx-color-border);
+  border-radius: var(--usx-radius-md);
+  background: var(--usx-color-surface-variant);
+  transition: border-color 0.15s ease;
+}
+
+.wf-triage-card:hover {
+  border-color: var(--usx-color-primary);
+}
+
+.wf-triage-card--approval {
+  border-left: 3px solid var(--usx-color-warning);
+}
+
+.wf-triage-card--mail {
+  border-left: 3px solid var(--usx-color-info);
+}
+
+.wf-triage-card--imessage {
+  border-left: 3px solid var(--usx-color-success);
+}
+
+.wf-triage-card__main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.wf-triage-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+  flex-wrap: wrap;
+}
+
+.wf-triage-card__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--usx-radius-sm);
+}
+
+.wf-triage-card__badge--autonomous {
+  background: color-mix(in srgb, var(--usx-color-warning) 15%, transparent);
+  color: var(--usx-color-warning);
+}
+
+.wf-triage-card__badge--mail {
+  background: color-mix(in srgb, var(--usx-color-info) 15%, transparent);
+  color: var(--usx-color-info);
+}
+
+.wf-triage-card__badge--imessage {
+  background: color-mix(in srgb, var(--usx-color-success) 15%, transparent);
+  color: var(--usx-color-success);
+}
+
+.wf-triage-card__sender {
+  font-weight: 600;
+  font-size: var(--usx-font-size-sm);
+  color: var(--usx-color-on-surface);
+}
+
+.wf-triage-card__time {
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-on-surface-muted);
+}
+
+.wf-triage-card__title {
+  font-weight: 600;
+  font-size: var(--usx-font-size-sm);
+  color: var(--usx-color-on-surface);
+}
+
+.wf-triage-card__subject {
+  margin: 0.15rem 0 0 0;
+  font-size: var(--usx-font-size-sm);
+  font-weight: 500;
+  color: var(--usx-color-on-surface);
+}
+
+.wf-triage-card__desc,
+.wf-triage-card__preview {
+  margin: 0.15rem 0 0 0;
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-on-surface-muted);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.wf-triage-card__meta {
+  font-size: var(--usx-font-size-xs);
+  color: var(--usx-color-on-surface-muted);
+  margin-top: 0.2rem;
+}
+
+.wf-triage-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--usx-spacing-xs);
+  flex-shrink: 0;
+}
+
+.wf-triage-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--usx-spacing-sm);
+  padding: var(--usx-spacing-xl);
+  color: var(--usx-color-on-surface-muted);
+  text-align: center;
+}
 </style>