Same gated-layout pattern as Phase 5c. v0.2 surface untouched;
quietware path renders FilesPage via LumotiaPageSkeleton with the
four zones the page actually needs:
Capture header "File transcription" + "Transcribe audio files locally."
Primary surface drop zone / progress / transcript states
Action dock Browse files / Copy / Export
Mono footer formats · model · Local only
State + handlers preserved.
fileTranscript, segments, isDragOver, progress, progressText,
fileName, error, transcribing, showExportMenu — all unchanged.
handleBrowse, transcribeFiles, copyAll, handleExport — all
unchanged. Tauri drag-drop listeners stay live on onMount; new
MutationObserver for data-design joins them.
Primary surface state machine.
transcribing Upload icon, "Transcribing" label, mono file
name, LumotiaProgress (tone="transcribing", so
the blue Phase 4k progress fill applies).
Progress text below.
empty Dashed drop zone using --button-primary-bg
accent when isDragOver, neutral subtle border
otherwise. Empty-state typography mirrors
Dictation: Young Serif italic "Drop an audio
file.", Work Sans support, format list in
JetBrains Mono.
has transcript Full-bleed editable textarea.
Action dock.
Browse files (primary when no transcript; secondary when transcript
exists — at that point Export becomes the primary action).
Copy (tertiary, disabled until transcript exists).
Export (LumotiaMenu trigger — primary when transcript exists,
secondary otherwise).
Disabled controls render neutral per the Phase 4k token contract.
Mono footer.
Single line: "MP3 · WAV · M4A · MP4 · FLAC · OGG · {model} · Local only"
Capture script updated.
scripts/capture-quietware-screenshots.mjs now navigates to the
Files page via the sidebar nav button after capturing the root
route, and screenshots both quietware modes.
Verified.
- npm run check: 0 errors, 0 warnings across 5707 files.
- Headless captures confirm the new layout in both modes:
drop zone + action dock + mono footer with the right Phase 4j
colour grammar applied. Browse Files blue primary, disabled
actions neutral, dashed border picks up --button-primary-bg
when isDragOver.
Phase 5e (Tasks) and 5f (History) follow same pattern.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jake
f311fdc47f