From 48685f9dda6e19e46b8408560fb5f934f77e7589 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Fri, 15 May 2026 17:44:01 +0100
Subject: [PATCH] v0.3 Phase 5c refinements: spacing, nested notice,
 conditional Save variant, paper edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final small refinements on Dictation per round-11 feedback before
moving to Files/Tasks/History.

1. Vertical rhythm tightened.

  LumotiaPageSkeleton header padding pt-5 pb-3 -> pt-3 pb-2.
  Notice padding pt-3 -> pt-2.
  Primary surface area pt-5 pb-3 -> pt-3 pb-2.
  DictationPage primary inner py-8 -> py-6.

  Net: about 16 px shaved off the top band. Transcript canvas
  begins higher, no longer feels like a large header above empty
  space.

2. Disabled actions go neutral when there is nothing to act on.

  Save button variant is now conditional:
    variant={transcript.trim() ? "primary" : "secondary"}

  Previously Save kept the blue primary fill even when disabled.
  Disabled blue under 50% opacity still read as a strong primary
  cue. Now: no transcript = neutral secondary; transcript exists
  = primary blue. Other actions (Copy / Extract / Template / Open
  Viewer) stay neutral regardless and become enabled when
  transcript exists.

3. Light-mode transcript surface gains a tactile paper edge.

  LumotiaPageSkeleton primary surface gains:
    shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]

  Subtle 1-px inset top shadow at 5% opacity. Invisible in dark
  mode (against the dark surface), visible in light mode as a
  faint paper edge. Skeleton-wide because it costs nothing in
  dark and adds the warmth Jake asked for in light.

4. Ambient info notice nested inside transcript surface.

  Browser-preview notice + real-error notice now render INSIDE
  the transcript card via the primary snippet, not in the
  skeleton's notice slot. Renders contained at the top of the
  card rather than as a full-width page banner. The notice slot
  on LumotiaPageSkeleton stays available for blocking/error-
  banner cases on other pages.

5. Mock-ready screenshot delivered.

  Captured two new screenshot pairs:
    root_PREVIEW__quiet-{dark,light}.png  browser-preview state
    root_READY__quiet-{dark,light}.png    mocked Tauri-available

  Mock done by temporarily setting tauriRuntimeAvailable = true
  for the capture run, then reverted to hasTauriRuntime() at
  commit time. The headless context still has no real Tauri
  runtime so the model-check call fails — that surfaces as a
  danger-tone slim notice in the ready screenshots, which
  happens to demonstrate the danger-slim notice rendering
  alongside the enabled red Record button.

  In the real Tauri desktop app the danger notice would not
  appear; only the Record (red), empty-state typography, and
  bottom action dock with all-disabled neutral controls would.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.

No colour exploration. No new tokens. Same red/blue/green/yellow/
orange grammar from Phase 4k.

Phase 5c is now complete. Next focused commits: 5d (Files), 5e
(Tasks), 5f (History), then Phase 6 (icon — waiting on SVG) and
Phase 7 (motion audit).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/pages/DictationPage.svelte    | 37 +++++++++++++++++----------
 src/lib/ui/LumotiaPageSkeleton.svelte | 13 +++++++---
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte
index 9ad6a1a..a26d710 100644
--- a/src/lib/pages/DictationPage.svelte
+++ b/src/lib/pages/DictationPage.svelte
@@ -1010,24 +1010,29 @@
           </div>
         {/snippet}
 
-        {#snippet notice()}
-          {#if error === browserPreviewMessage}
-            <LumotiaNotice tone="info" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
-              {browserPreviewSlim}
-            </LumotiaNotice>
-          {:else if error}
-            <LumotiaNotice tone="danger" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
-              {error}
-            </LumotiaNotice>
-          {/if}
-        {/snippet}
-
         {#snippet primary()}
           <div class="h-full flex flex-col">
+            <!-- v0.3 Phase 5c polish: ambient info notice nested INSIDE
+                 the transcript surface. Browser preview is contextual to
+                 the capture surface, not a page-level banner. Real
+                 errors still render here with danger tone. -->
+            {#if error === browserPreviewMessage}
+              <div class="px-6 pt-4">
+                <LumotiaNotice tone="info" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
+                  {browserPreviewSlim}
+                </LumotiaNotice>
+              </div>
+            {:else if error}
+              <div class="px-6 pt-4">
+                <LumotiaNotice tone="danger" slim dismissible onDismiss={() => { error = ""; errorDetail = ""; }}>
+                  {error}
+                </LumotiaNotice>
+              </div>
+            {/if}
             <!-- Transcript canvas. Action dock below sits inside the same
                  surface so it reads as transcript actions, not a generic
                  page footer. -->
-            <div class="flex-1 flex flex-col px-8 py-8 min-h-0 overflow-hidden">
+            <div class="flex-1 flex flex-col px-8 py-6 min-h-0 overflow-hidden">
               {#if !transcript.trim()}
                 <div class="flex-1 flex flex-col items-center justify-center text-center gap-4 text-text-tertiary">
                   <Mic size={56} class="opacity-50" aria-hidden="true" />
@@ -1041,9 +1046,13 @@
                 >{transcript}</div>
               {/if}
             </div>
+            <!-- v0.3 Phase 5c polish: disabled actions stay neutral until
+                 the transcript exists. Save promotes to primary blue only
+                 when there is content to save. Other actions stay
+                 secondary or tertiary regardless. -->
             <div class="flex items-center gap-2 justify-end px-6 py-3 border-t border-border-subtle bg-bg-elevated/40">
               <LumotiaButton variant="tertiary" size="sm" onclick={copyAll} disabled={!transcript.trim()}>Copy</LumotiaButton>
-              <LumotiaButton variant="primary" size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
+              <LumotiaButton variant={transcript.trim() ? "primary" : "secondary"} size="sm" onclick={saveTypedText} disabled={!transcript.trim()}>Save</LumotiaButton>
               <LumotiaButton variant="secondary" size="sm" onclick={manualExtractTasks} disabled={!transcript.trim()}>Extract Tasks</LumotiaButton>
               <LumotiaButton
                 variant="secondary"
diff --git a/src/lib/ui/LumotiaPageSkeleton.svelte b/src/lib/ui/LumotiaPageSkeleton.svelte
index a40b800..5815fc9 100644
--- a/src/lib/ui/LumotiaPageSkeleton.svelte
+++ b/src/lib/ui/LumotiaPageSkeleton.svelte
@@ -51,19 +51,24 @@
 
 <div class="flex flex-col h-full min-h-0 bg-bg {classes}">
   {#if header}
-    <div class="shrink-0 px-7 pt-5 pb-3 border-b border-border-subtle">
+    <!-- v0.3 Phase 5c polish: tighter vertical rhythm. -->
+    <div class="shrink-0 px-7 pt-3 pb-2 border-b border-border-subtle">
       {@render header()}
     </div>
   {/if}
 
   {#if notice}
-    <div class="shrink-0 px-7 pt-3">
+    <div class="shrink-0 px-7 pt-2">
       {@render notice()}
     </div>
   {/if}
 
-  <div class="flex-1 min-h-0 flex {rightRail ? 'gap-5' : ''} px-7 pt-5 pb-3">
-    <div class="flex-1 min-w-0 {primaryBleed ? '' : 'bg-bg-card border border-border-subtle rounded-lg overflow-hidden'}">
+  <div class="flex-1 min-h-0 flex {rightRail ? 'gap-5' : ''} px-7 pt-3 pb-2">
+    <!-- v0.3 Phase 5c polish: subtle inset top-shadow gives the
+         transcript surface a faint paper edge in light mode. The
+         shadow's near-zero opacity makes it invisible against the
+         dark surface — light-only effect by accident of luminance. -->
+    <div class="flex-1 min-w-0 {primaryBleed ? '' : 'bg-bg-card border border-border-subtle rounded-lg overflow-hidden shadow-[inset_0_1px_0_rgba(0,0,0,0.05)]'}">
       {@render primary()}
     </div>
     {#if rightRail}