fix(a11y): bump all text below 12px to 12px floor and promote tertiary-on-body to secondary
Brand guidelines (docs/brand/magnotia-brand-guidelines.md §4) say "Never go below 12px for any text" and "tertiary text must be ≥18px bold or ≥24px regular". Audit found 246 sub-12px className sites and 166 cases of text-text-tertiary paired with body sizes. Bumped text-[9/10/11px] → text-[12px] across 26 .svelte files in src/lib and src/routes. Promoted text-text-tertiary → text-text-secondary at body sizes (12-14px) where context allowed; left placeholder pseudo-states, ternary-conditional inactive states, and line-through "done" states alone (8 residual pairings, all decorative). Affects neurodivergent users on 1366×768 budget hardware most directly. svelte-check: 0 errors, 0 warnings.
This commit is contained in:
@@ -1069,7 +1069,7 @@
|
||||
deep-dive; this chip is a one-line summary that's always
|
||||
visible while the user moves through the settings tree. -->
|
||||
<span
|
||||
class="text-[11px] text-text-tertiary bg-accent-subtle rounded-full px-2.5 py-1"
|
||||
class="text-[12px] text-text-secondary bg-accent-subtle rounded-full px-2.5 py-1"
|
||||
>100% local · no telemetry · no cloud</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1112,11 +1112,11 @@
|
||||
the global hotkey above the seven groups. -->
|
||||
<div class="grid grid-cols-3 gap-3 px-1 pb-4 border-b border-border-subtle mb-2">
|
||||
<div>
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Theme</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Theme</p>
|
||||
<SegmentedButton size="small" options={["Dark", "Light"]} bind:value={settings.theme} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Font size</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Font size</p>
|
||||
<SegmentedButton
|
||||
size="small"
|
||||
options={["Smaller", "Default", "Larger"]}
|
||||
@@ -1124,11 +1124,11 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Hotkey</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Hotkey</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={jumpToGlobalHotkey}
|
||||
class="px-2.5 py-1 text-[11px] font-medium rounded-lg bg-bg-elevated text-text-secondary border border-border-subtle hover:border-accent hover:text-accent"
|
||||
class="px-2.5 py-1 text-[12px] font-medium rounded-lg bg-bg-elevated text-text-secondary border border-border-subtle hover:border-accent hover:text-accent"
|
||||
style="transition-duration: var(--duration-ui)"
|
||||
aria-label={`Edit global hotkey, currently ${settings.globalHotkey}`}
|
||||
>{settings.globalHotkey}</button>
|
||||
@@ -1144,7 +1144,7 @@
|
||||
>
|
||||
<div class="px-1 pb-2 animate-fade-in">
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Microphone</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Microphone</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
@@ -1167,11 +1167,11 @@
|
||||
>Refresh</button>
|
||||
</div>
|
||||
{#if audioDevicesError}
|
||||
<p class="text-[11px] text-danger mt-2">{audioDevicesError}</p>
|
||||
<p class="text-[12px] text-danger mt-2">{audioDevicesError}</p>
|
||||
{:else if visibleAudioDevices.length === 0}
|
||||
<p class="text-[11px] text-text-tertiary mt-2">No input devices detected. Check that a microphone is connected and PulseAudio/PipeWire is running.</p>
|
||||
<p class="text-[12px] text-text-secondary mt-2">No input devices detected. Check that a microphone is connected and PulseAudio/PipeWire is running.</p>
|
||||
{:else}
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
Auto mode tries the system default first, then any other real input. Speaker-monitor sources (loopback) are skipped because they record system audio rather than the microphone. If dictation is silent, pick the device explicitly here.
|
||||
</p>
|
||||
{/if}
|
||||
@@ -1197,13 +1197,13 @@
|
||||
open={searchActive ? searchMatches('Terms profiles initial prompt vocabulary') : true}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[12px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
Words and phrases the AI cleanup pass should preserve exactly. Useful for medication names, place names, jargon, names of people in your support network, anything Whisper tends to mishear. Vocabulary is scoped to a profile, switch profiles to swap whole vocabularies.
|
||||
</p>
|
||||
|
||||
<!-- Profile selector -->
|
||||
<div class="mb-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Active Profile</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Active Profile</p>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
@@ -1270,7 +1270,7 @@
|
||||
{#if profilesStore.active}
|
||||
<!-- Rename active profile -->
|
||||
<div class="mb-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Profile Name</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Profile Name</p>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={profileRenameDraft}
|
||||
@@ -1283,8 +1283,8 @@
|
||||
|
||||
<!-- Initial prompt textarea -->
|
||||
<div class="mb-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Initial Prompt</p>
|
||||
<p class="text-[11px] text-text-tertiary mb-2">
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Initial Prompt</p>
|
||||
<p class="text-[12px] text-text-secondary mb-2">
|
||||
Passed to Whisper before every transcription in this profile. Used as a biasing prompt, keep it short and topic-specific (names, domain terms, tone cues).
|
||||
</p>
|
||||
<textarea
|
||||
@@ -1300,17 +1300,17 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={saveInitialPrompt}
|
||||
class="text-[11px] text-accent hover:text-accent-hover"
|
||||
class="text-[12px] text-accent hover:text-accent-hover"
|
||||
>Save prompt</button>
|
||||
<span class="text-[11px] text-text-tertiary">Unsaved changes, saves on blur.</span>
|
||||
<span class="text-[12px] text-text-secondary">Unsaved changes, saves on blur.</span>
|
||||
{:else}
|
||||
<span class="text-[11px] text-text-tertiary">Saved.</span>
|
||||
<span class="text-[12px] text-text-secondary">Saved.</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terms -->
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Terms</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Terms</p>
|
||||
|
||||
<div class="flex gap-2 mb-4">
|
||||
<input
|
||||
@@ -1342,7 +1342,7 @@
|
||||
{#if !showBulkVocab}
|
||||
<button
|
||||
type="button"
|
||||
class="text-[11px] text-text-tertiary hover:text-accent underline"
|
||||
class="text-[12px] text-text-secondary hover:text-accent underline"
|
||||
onclick={() => { showBulkVocab = true; }}
|
||||
>Bulk add from a list…</button>
|
||||
{:else}
|
||||
@@ -1367,7 +1367,7 @@
|
||||
type="button"
|
||||
onclick={() => { showBulkVocab = false; bulkVocabText = ""; }}
|
||||
disabled={bulkVocabBusy}
|
||||
class="px-3 py-1.5 text-[12px] text-text-tertiary hover:text-text"
|
||||
class="px-3 py-1.5 text-[12px] text-text-secondary hover:text-text"
|
||||
>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1375,11 +1375,11 @@
|
||||
</div>
|
||||
|
||||
{#if vocabularyError}
|
||||
<p class="text-[11px] text-danger mb-3">{vocabularyError}</p>
|
||||
<p class="text-[12px] text-danger mb-3">{vocabularyError}</p>
|
||||
{/if}
|
||||
|
||||
{#if vocabulary.length === 0}
|
||||
<p class="text-[11px] text-text-tertiary italic">No terms yet. Add one above.</p>
|
||||
<p class="text-[12px] text-text-secondary italic">No terms yet. Add one above.</p>
|
||||
{:else}
|
||||
<ul class="space-y-1">
|
||||
{#each vocabulary as entry (entry.id)}
|
||||
@@ -1387,13 +1387,13 @@
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-[13px] text-text font-medium truncate">{entry.term}</div>
|
||||
{#if entry.note}
|
||||
<div class="text-[11px] text-text-tertiary truncate">{entry.note}</div>
|
||||
<div class="text-[12px] text-text-secondary truncate">{entry.note}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => deleteVocabTerm(entry.id)}
|
||||
class="text-[12px] text-text-tertiary hover:text-danger border border-border hover:border-danger rounded px-2 py-1"
|
||||
class="text-[12px] text-text-secondary hover:text-danger border border-border hover:border-danger rounded px-2 py-1"
|
||||
aria-label="Delete {entry.term}"
|
||||
>Remove</button>
|
||||
</li>
|
||||
@@ -1401,7 +1401,7 @@
|
||||
</ul>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-[11px] text-text-tertiary italic">Loading profiles…</p>
|
||||
<p class="text-[12px] text-text-secondary italic">Loading profiles…</p>
|
||||
{/if}
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
@@ -1428,15 +1428,15 @@
|
||||
<div class="group">
|
||||
<div class="flex items-center gap-2 bg-bg-input rounded-lg px-3 h-[36px]">
|
||||
<span class="text-[12px] text-text flex-1 truncate">{profile.name}</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
|
||||
<span class="text-[12px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-secondary">
|
||||
{profileWordCount(profile.words)} words
|
||||
</span>
|
||||
<button
|
||||
class="text-[10px] text-text-tertiary hover:text-accent opacity-0 group-hover:opacity-100"
|
||||
class="text-[12px] text-text-secondary hover:text-accent opacity-0 group-hover:opacity-100"
|
||||
onclick={() => editingProfile = editingProfile === i ? -1 : i}
|
||||
>{editingProfile === i ? "Close" : "Edit"}</button>
|
||||
<button
|
||||
class="text-[10px] text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100"
|
||||
class="text-[12px] text-text-secondary hover:text-danger opacity-0 group-hover:opacity-100"
|
||||
onclick={() => deleteProfile(i)}
|
||||
>Delete</button>
|
||||
</div>
|
||||
@@ -1466,8 +1466,8 @@
|
||||
onkeydown={(e) => e.key === "Enter" && createProfile()}
|
||||
data-no-transition
|
||||
/>
|
||||
<button class="text-[11px] text-accent hover:text-accent-hover" onclick={createProfile}>Create</button>
|
||||
<button class="text-[11px] text-text-tertiary" onclick={() => { showNewProfile = false; newProfileName = ""; }}>Cancel</button>
|
||||
<button class="text-[12px] text-accent hover:text-accent-hover" onclick={createProfile}>Create</button>
|
||||
<button class="text-[12px] text-text-secondary" onclick={() => { showNewProfile = false; newProfileName = ""; }}>Cancel</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="text-[12px] text-accent hover:text-accent-hover" onclick={() => showNewProfile = true}>+ Add profile</button>
|
||||
@@ -1486,15 +1486,15 @@
|
||||
<div class="group">
|
||||
<div class="flex items-center gap-2 bg-bg-input rounded-lg px-3 h-[36px]">
|
||||
<span class="text-[12px] text-text flex-1 truncate">{template.name}</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
|
||||
<span class="text-[12px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-secondary">
|
||||
{template.sections.length} sections
|
||||
</span>
|
||||
<button
|
||||
class="text-[10px] text-text-tertiary hover:text-accent opacity-0 group-hover:opacity-100"
|
||||
class="text-[12px] text-text-secondary hover:text-accent opacity-0 group-hover:opacity-100"
|
||||
onclick={() => editingTemplate = editingTemplate === i ? -1 : i}
|
||||
>{editingTemplate === i ? "Close" : "Edit"}</button>
|
||||
<button
|
||||
class="text-[10px] text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100"
|
||||
class="text-[12px] text-text-secondary hover:text-danger opacity-0 group-hover:opacity-100"
|
||||
onclick={() => deleteTemplate(i)}
|
||||
>Delete</button>
|
||||
</div>
|
||||
@@ -1524,8 +1524,8 @@
|
||||
onkeydown={(e) => e.key === "Enter" && createTemplate()}
|
||||
data-no-transition
|
||||
/>
|
||||
<button class="text-[11px] text-accent hover:text-accent-hover" onclick={createTemplate}>Create</button>
|
||||
<button class="text-[11px] text-text-tertiary" onclick={() => { showNewTemplate = false; newTemplateName = ""; }}>Cancel</button>
|
||||
<button class="text-[12px] text-accent hover:text-accent-hover" onclick={createTemplate}>Create</button>
|
||||
<button class="text-[12px] text-text-secondary" onclick={() => { showNewTemplate = false; newTemplateName = ""; }}>Cancel</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="text-[12px] text-accent hover:text-accent-hover" onclick={() => showNewTemplate = true}>+ Add template</button>
|
||||
@@ -1547,9 +1547,9 @@
|
||||
|
||||
<!-- Engine selector -->
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Engine</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Engine</p>
|
||||
<SegmentedButton options={["whisper", "parakeet"]} bind:value={settings.engine} />
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{settings.engine === "whisper"
|
||||
? "Whisper with the currently shipped English-only models in this build"
|
||||
: "Parakeet CTC 0.6B. English-only, fast when the model is installed"}
|
||||
@@ -1558,9 +1558,9 @@
|
||||
|
||||
<!-- Format mode -->
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Format Mode</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Format Mode</p>
|
||||
<SegmentedButton options={["Raw", "Clean", "Smart"]} bind:value={settings.formatMode} />
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{settings.formatMode === "Raw" ? "Exact Whisper output, no formatting" :
|
||||
settings.formatMode === "Clean" ? "Grouped into paragraphs, punctuation tidied" :
|
||||
"Structured with lists, headings, and sections"}
|
||||
@@ -1570,27 +1570,27 @@
|
||||
<!-- Engine-specific model management -->
|
||||
{#if settings.engine === "whisper"}
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Whisper Model</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Whisper Model</p>
|
||||
<SegmentedButton options={["Tiny", "Base", "Small", "Distil-S", "Medium", "Distil-L"]} bind:value={settings.modelSize} />
|
||||
<p class="text-[11px] text-text-tertiary mt-2">{modelDescriptions[settings.modelSize]}</p>
|
||||
<p class="text-[12px] text-text-secondary mt-2">{modelDescriptions[settings.modelSize]}</p>
|
||||
|
||||
<div class="flex items-center gap-2 mt-3">
|
||||
{#if isModelLoaded(settings.modelSize)}
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] text-success">
|
||||
<span class="inline-flex items-center gap-1.5 text-[12px] text-success">
|
||||
<span class="w-[6px] h-[6px] rounded-full bg-success"></span>
|
||||
Model loaded
|
||||
</span>
|
||||
{:else if isModelDownloaded(settings.modelSize)}
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] text-success">
|
||||
<span class="inline-flex items-center gap-1.5 text-[12px] text-success">
|
||||
<span class="w-[6px] h-[6px] rounded-full bg-success"></span>
|
||||
Downloaded
|
||||
</span>
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary hover:text-accent"
|
||||
class="text-[12px] text-text-secondary hover:text-accent"
|
||||
onclick={loadSelectedModel}
|
||||
>Load model</button>
|
||||
{:else if downloadingModel === whisperModelId(settings.modelSize)}
|
||||
<span class="text-[11px] text-warning">
|
||||
<span class="text-[12px] text-warning">
|
||||
{downloadProgress}%
|
||||
{#if downloadTotal > 0}
|
||||
· {formatBytes(downloadBytes)} / {formatBytes(downloadTotal)}
|
||||
@@ -1604,7 +1604,7 @@
|
||||
</span>
|
||||
{:else}
|
||||
<button
|
||||
class="text-[11px] text-accent hover:text-accent-hover"
|
||||
class="text-[12px] text-accent hover:text-accent-hover"
|
||||
onclick={() => downloadModel(whisperModelId(settings.modelSize))}
|
||||
>Download {settings.modelSize}</button>
|
||||
{/if}
|
||||
@@ -1612,29 +1612,29 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Parakeet Model</p>
|
||||
<p class="text-[11px] text-text-tertiary mb-3">Parakeet CTC 0.6B (int8). ~613MB, near-instant transcription</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Parakeet Model</p>
|
||||
<p class="text-[12px] text-text-secondary mb-3">Parakeet CTC 0.6B (int8). ~613MB, near-instant transcription</p>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{#if parakeetOk}
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] text-success">
|
||||
<span class="inline-flex items-center gap-1.5 text-[12px] text-success">
|
||||
<span class="w-[6px] h-[6px] rounded-full bg-success"></span>
|
||||
Model loaded
|
||||
</span>
|
||||
{:else if parakeetDownloaded}
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] text-text-secondary">
|
||||
<span class="inline-flex items-center gap-1.5 text-[12px] text-text-secondary">
|
||||
<span class="w-[6px] h-[6px] rounded-full bg-text-tertiary"></span>
|
||||
Downloaded
|
||||
</span>
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary hover:text-accent"
|
||||
class="text-[12px] text-text-secondary hover:text-accent"
|
||||
onclick={loadParakeet}
|
||||
>Load model</button>
|
||||
{:else if parakeetDownloading}
|
||||
<span class="text-[11px] text-warning">{parakeetProgress}% downloading...</span>
|
||||
<span class="text-[12px] text-warning">{parakeetProgress}% downloading...</span>
|
||||
{:else}
|
||||
<button
|
||||
class="text-[11px] text-accent hover:text-accent-hover"
|
||||
class="text-[12px] text-accent hover:text-accent-hover"
|
||||
onclick={downloadParakeet}
|
||||
>Download Parakeet</button>
|
||||
{/if}
|
||||
@@ -1644,7 +1644,7 @@
|
||||
|
||||
<!-- Compute device -->
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Compute Device</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Compute Device</p>
|
||||
{#if hasGpuAcceleration()}
|
||||
<select
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
|
||||
@@ -1664,7 +1664,7 @@
|
||||
{/if}
|
||||
<option value="cpu">CPU</option>
|
||||
</select>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">Only accelerators built into this binary are shown here.</p>
|
||||
<p class="text-[12px] text-text-secondary mt-2">Only accelerators built into this binary are shown here.</p>
|
||||
{:else}
|
||||
<div class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text w-[320px]">
|
||||
This build is CPU-only. GPU controls appear in GPU-enabled builds.
|
||||
@@ -1674,7 +1674,7 @@
|
||||
|
||||
<!-- Language -->
|
||||
<div>
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Language</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Language</p>
|
||||
<div class="flex items-center gap-3">
|
||||
{#if currentModelIsEnglishOnly()}
|
||||
<select
|
||||
@@ -1709,7 +1709,7 @@
|
||||
{/if}
|
||||
{#if settings.language === "en"}
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-[11px] border animate-fade-in
|
||||
class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-[12px] border animate-fade-in
|
||||
{settings.britishEnglish
|
||||
? 'bg-accent/10 border-accent/30 text-accent font-medium'
|
||||
: 'bg-bg-input border-border text-text-tertiary hover:text-text-secondary'}"
|
||||
@@ -1723,7 +1723,7 @@
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{#if currentModelIsEnglishOnly()}
|
||||
The selected model only supports English in this build.
|
||||
{:else}
|
||||
@@ -1772,12 +1772,12 @@
|
||||
open={searchActive ? searchMatches('AI Assistant Local LLM tier model management qwen llama prewarm', 'Advanced cleanup preset prompt email notes code GPU concurrency parallel sequential VRAM') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
Local LLM for transcript cleanup, smart task extraction, and task breakdown. Runs fully offline after the model is downloaded.
|
||||
</p>
|
||||
|
||||
<div class="mb-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Feature Tier</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Feature Tier</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@@ -1804,7 +1804,7 @@
|
||||
onclick={() => setAiTier("tasks")}
|
||||
>Cleanup + Tasks</button>
|
||||
</div>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{settings.aiTier === "off"
|
||||
? "No local LLM calls. Magnotia falls back to the existing rule-based path."
|
||||
: settings.aiTier === "cleanup"
|
||||
@@ -1814,7 +1814,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Model Tier</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Model Tier</p>
|
||||
<div class="space-y-2">
|
||||
{#each LLM_MODELS as model}
|
||||
<button
|
||||
@@ -1830,14 +1830,14 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[12px] font-medium text-text">{model.label}</span>
|
||||
<span class="text-[11px] text-text-secondary">{model.subtitle}</span>
|
||||
<span class="text-[12px] text-text-secondary">{model.subtitle}</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-text-tertiary mt-1">{model.size} · {model.fit}</p>
|
||||
<p class="text-[12px] text-text-secondary mt-1">{model.size} · {model.fit}</p>
|
||||
{#if llmHardwareWarning(model.id)}
|
||||
<p class="text-[11px] text-warning mt-2">{llmHardwareWarning(model.id)}</p>
|
||||
<p class="text-[12px] text-warning mt-2">{llmHardwareWarning(model.id)}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-right text-[11px]">
|
||||
<div class="text-right text-[12px]">
|
||||
{#if llmModelLoaded(model.id)}
|
||||
<span class="text-success">Loaded</span>
|
||||
{:else if llmModelDownloaded(model.id)}
|
||||
@@ -1858,15 +1858,15 @@
|
||||
<p class="text-[12px] text-text-secondary font-medium">
|
||||
{LLM_MODELS.find((model) => model.id === selectedLlmModelId())?.subtitle || "Local model"}
|
||||
</p>
|
||||
<p class="text-[11px] text-text-tertiary mt-1">{llmStatus}</p>
|
||||
<p class="text-[12px] text-text-secondary mt-1">{llmStatus}</p>
|
||||
{#if llmTestHint}
|
||||
<p class="text-[11px] text-accent mt-1">{llmTestHint}</p>
|
||||
<p class="text-[12px] text-accent mt-1">{llmTestHint}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
{#if llmDownloadingModel === selectedLlmModelId()}
|
||||
<span class="text-[11px] text-warning">
|
||||
<span class="text-[12px] text-warning">
|
||||
{llmDownloadProgress}%
|
||||
{#if llmDownloadTotal > 0}
|
||||
· {formatBytes(llmDownloadBytes)} / {formatBytes(llmDownloadTotal)}
|
||||
@@ -1922,7 +1922,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-[11px] text-text-tertiary mt-3">
|
||||
<p class="text-[12px] text-text-secondary mt-3">
|
||||
Recommended for this machine:
|
||||
<span class="text-text">
|
||||
{LLM_MODELS.find((model) => model.id === (settings.llmModelId || "qwen3_5_4b"))?.subtitle || "Qwen3.5 4B"}
|
||||
@@ -1955,12 +1955,12 @@
|
||||
structure of LLM cleanup output; composes on top of the
|
||||
active profile's initial prompt. -->
|
||||
<div>
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Cleanup preset</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Cleanup preset</p>
|
||||
<SegmentedButton
|
||||
options={["default", "email", "notes", "code"]}
|
||||
bind:value={settings.llmPromptPreset}
|
||||
/>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{#if settings.llmPromptPreset === "email"}
|
||||
Formats output as an email paragraph, tight sentences, no markdown, no auto-added greeting or signoff.
|
||||
{:else if settings.llmPromptPreset === "notes"}
|
||||
@@ -1979,12 +1979,12 @@
|
||||
other; adds reload latency between transcribe and
|
||||
cleanup phases. -->
|
||||
<div class="mt-5">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">GPU concurrency</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">GPU concurrency</p>
|
||||
<SegmentedButton
|
||||
options={["parallel", "sequential"]}
|
||||
bind:value={settings.aiGpuConcurrency}
|
||||
/>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
{#if settings.aiGpuConcurrency === "sequential"}
|
||||
On tight-VRAM cards (≤6 GB), loading Whisper + LLM together OOMs. Sequential mode frees the other model before loading; adds a small reload pause between transcribe and cleanup.
|
||||
{:else}
|
||||
@@ -2026,7 +2026,7 @@
|
||||
open={searchActive ? searchMatches('Rituals morning triage wind-down launch login autostart') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
All off by default. Rituals only appear when you ask for them.
|
||||
</p>
|
||||
|
||||
@@ -2038,7 +2038,7 @@
|
||||
|
||||
{#if settings.ritualsMorning}
|
||||
<div class="pl-1 py-3 animate-fade-in">
|
||||
<label for="triage-time" class="block text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
|
||||
<label for="triage-time" class="block text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">
|
||||
Earliest triage time
|
||||
</label>
|
||||
<input
|
||||
@@ -2047,7 +2047,7 @@
|
||||
class="bg-bg-input border border-border rounded-lg px-3 py-1.5 text-[12px] text-text focus:border-accent focus:outline-none"
|
||||
bind:value={settings.ritualsMorningTime}
|
||||
/>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
ADHD sleep inertia is intense for the first 30–45 minutes after waking. Pick a time when you're genuinely ready to decide.
|
||||
</p>
|
||||
</div>
|
||||
@@ -2093,7 +2093,7 @@
|
||||
open={searchActive ? searchMatches('Tasks page gamification visuals header sparkline') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
How the Tasks page surfaces progress. Always additive.
|
||||
</p>
|
||||
|
||||
@@ -2113,7 +2113,7 @@
|
||||
open={searchActive ? searchMatches('Nudges soft notifications hourly') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
Gentle, anticipatory reminders. Capped at 3 per hour. Never fires while you're looking at Magnotia.
|
||||
</p>
|
||||
|
||||
@@ -2158,12 +2158,12 @@
|
||||
open={searchActive ? searchMatches('Read aloud TTS voice rate system') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">
|
||||
<p class="text-[12px] text-text-secondary mb-4">
|
||||
Uses your operating system's built-in voices. No audio leaves the machine.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="tts-voice" class="block text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Voice</label>
|
||||
<label for="tts-voice" class="block text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Voice</label>
|
||||
<select
|
||||
id="tts-voice"
|
||||
class="w-full bg-bg-input border border-border rounded-lg px-3 py-2 text-[12px] text-text focus:border-accent focus:outline-none"
|
||||
@@ -2179,16 +2179,16 @@
|
||||
{/each}
|
||||
</select>
|
||||
{#if ttsVoicesError}
|
||||
<p class="text-[11px] text-danger mt-2">{ttsVoicesError}</p>
|
||||
<p class="text-[12px] text-danger mt-2">{ttsVoicesError}</p>
|
||||
{:else if ttsVoicesLoaded && ttsVoices.length === 0}
|
||||
<p class="text-[11px] text-text-tertiary mt-2">
|
||||
<p class="text-[12px] text-text-secondary mt-2">
|
||||
No additional voices reported by the system synth. Install extra voices through your OS accessibility settings.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="tts-rate" class="block text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
|
||||
<label for="tts-rate" class="block text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">
|
||||
Rate · {settings.ttsRate.toFixed(1)}×
|
||||
</label>
|
||||
<input
|
||||
@@ -2200,7 +2200,7 @@
|
||||
class="w-full accent-accent"
|
||||
bind:value={settings.ttsRate}
|
||||
/>
|
||||
<div class="flex justify-between text-[10px] text-text-tertiary mt-1">
|
||||
<div class="flex justify-between text-[12px] text-text-secondary mt-1">
|
||||
<span>Slower</span>
|
||||
<span>Normal</span>
|
||||
<span>Faster</span>
|
||||
@@ -2242,7 +2242,7 @@
|
||||
/>
|
||||
{#if settings.meetingAutoCapture}
|
||||
<div class="ml-[50px] mt-2 mb-1 animate-fade-in">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5">Apps to watch (comma-separated)</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-1.5">Apps to watch (comma-separated)</p>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full bg-bg-input border border-border-subtle rounded-lg px-3 py-1.5 text-[12px] text-text"
|
||||
@@ -2264,7 +2264,7 @@
|
||||
/>
|
||||
{#if settings.soundCues}
|
||||
<div class="ml-[50px] mt-2 mb-1 animate-fade-in flex items-center gap-3">
|
||||
<label for="sound-cue-volume" class="text-[11px] text-text-tertiary uppercase tracking-wider">Volume</label>
|
||||
<label for="sound-cue-volume" class="text-[12px] text-text-secondary uppercase tracking-wider">Volume</label>
|
||||
<input
|
||||
id="sound-cue-volume"
|
||||
type="range"
|
||||
@@ -2275,9 +2275,9 @@
|
||||
class="w-[160px] accent-accent"
|
||||
data-no-transition
|
||||
/>
|
||||
<span class="text-[11px] text-text-secondary w-[34px]">{Math.round(settings.soundCueVolume * 100)}%</span>
|
||||
<span class="text-[12px] text-text-secondary w-[34px]">{Math.round(settings.soundCueVolume * 100)}%</span>
|
||||
<button
|
||||
class="text-[11px] text-accent hover:text-accent-hover"
|
||||
class="text-[12px] text-accent hover:text-accent-hover"
|
||||
onclick={async () => {
|
||||
const mod = await import("$lib/utils/sounds.js");
|
||||
mod.playCompleteCue(settings.soundCueVolume, true);
|
||||
@@ -2293,15 +2293,15 @@
|
||||
/>
|
||||
{#if settings.saveAudio}
|
||||
<div class="ml-[50px] mt-2 animate-fade-in">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5">Output Folder</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-1.5">Output Folder</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div bind:this={outputFolderEl} class="flex-1 bg-bg-input rounded-lg px-3 py-1.5 border border-border-subtle">
|
||||
<p class="text-[11px] text-text-secondary whitespace-pre-wrap break-words" style="line-height: {settingsPathLineHeight}px" title={settings.outputFolder || "Default (app data)"}>
|
||||
<p class="text-[12px] text-text-secondary whitespace-pre-wrap break-words" style="line-height: {settingsPathLineHeight}px" title={settings.outputFolder || "Default (app data)"}>
|
||||
{outputFolderPreview}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="text-[11px] text-accent hover:text-accent-hover whitespace-nowrap"
|
||||
class="text-[12px] text-accent hover:text-accent-hover whitespace-nowrap"
|
||||
onclick={async () => {
|
||||
try {
|
||||
const folder = await open({ directory: true, title: "Select output folder" });
|
||||
@@ -2311,7 +2311,7 @@
|
||||
>Change</button>
|
||||
{#if settings.outputFolder}
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary hover:text-text-secondary whitespace-nowrap"
|
||||
class="text-[12px] text-text-secondary hover:text-text-secondary whitespace-nowrap"
|
||||
onclick={() => { settings.outputFolder = ""; saveSettings(); }}
|
||||
>Reset</button>
|
||||
{/if}
|
||||
@@ -2341,7 +2341,7 @@
|
||||
open={searchActive ? searchMatches('Global hotkey toggle recording shortcut') : false}
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<p class="text-[11px] text-text-tertiary mb-4">Toggle recording from anywhere. Click to change.</p>
|
||||
<p class="text-[12px] text-text-secondary mb-4">Toggle recording from anywhere. Click to change.</p>
|
||||
<HotkeyRecorder />
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
@@ -2354,17 +2354,17 @@
|
||||
>
|
||||
<div class="animate-fade-in">
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Theme</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Theme</p>
|
||||
<SegmentedButton options={["Dark", "Light", "System"]} bind:value={settings.theme} />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Zone</p>
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Zone</p>
|
||||
<ZonePicker />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">
|
||||
Font Size <span class="font-normal text-text-secondary ml-1">{settings.fontSize}px</span>
|
||||
</p>
|
||||
<input
|
||||
@@ -2376,7 +2376,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">
|
||||
{$_("settings.language")}
|
||||
</p>
|
||||
<div class="inline-flex bg-bg-elevated rounded-[10px] p-[3px] gap-[2px]">
|
||||
@@ -2391,7 +2391,7 @@
|
||||
>{option.label}</button>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="text-[11px] text-text-tertiary mt-2">{$_("settings.languageDescription")}</p>
|
||||
<p class="text-[12px] text-text-secondary mt-2">{$_("settings.languageDescription")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
@@ -2428,17 +2428,17 @@
|
||||
] as item}
|
||||
<div class="flex items-start gap-2">
|
||||
<Check class="w-3.5 h-3.5 text-success mt-0.5 flex-shrink-0" />
|
||||
<p class="text-[11px] text-text-secondary">{item}</p>
|
||||
<p class="text-[12px] text-text-secondary">{item}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<p class="text-[11px] text-text-tertiary mt-5">Magnotia v1.0 · Powered by whisper.cpp · Built by CORBEL Ltd</p>
|
||||
<p class="text-[12px] text-text-secondary mt-5">Magnotia v1.0 · Powered by whisper.cpp · Built by CORBEL Ltd</p>
|
||||
|
||||
<!-- Diagnostic report (privacy posture: local only until you share it) -->
|
||||
<div class="mt-6 pt-5 border-t border-border-subtle">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Diagnostics</p>
|
||||
<p class="text-[11px] text-text-tertiary mb-3">
|
||||
<p class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Diagnostics</p>
|
||||
<p class="text-[12px] text-text-secondary mb-3">
|
||||
If something goes wrong, generate a diagnostic report to share with the developer. The report contains your settings, recent errors, any crash dumps, and the tail of the log file. Nothing is sent automatically, you preview it first, then choose copy or save.
|
||||
</p>
|
||||
<div class="flex gap-2 mb-3">
|
||||
@@ -2462,15 +2462,15 @@
|
||||
{/if}
|
||||
</div>
|
||||
{#if diagnosticReportError}
|
||||
<p class="text-[11px] text-danger mb-2">{diagnosticReportError}</p>
|
||||
<p class="text-[12px] text-danger mb-2">{diagnosticReportError}</p>
|
||||
{/if}
|
||||
{#if diagnosticReportSavedTo}
|
||||
<p class="text-[11px] text-success mb-2">{diagnosticReportSavedTo}</p>
|
||||
<p class="text-[12px] text-success mb-2">{diagnosticReportSavedTo}</p>
|
||||
{/if}
|
||||
{#if diagnosticReport}
|
||||
<details class="text-[11px]">
|
||||
<details class="text-[12px]">
|
||||
<summary class="cursor-pointer text-text-secondary hover:text-text">Preview report ({diagnosticReport.length} chars)</summary>
|
||||
<pre class="mt-2 p-3 bg-bg-input border border-border rounded-lg text-[10px] text-text-secondary overflow-auto max-h-[400px] whitespace-pre-wrap font-mono">{diagnosticReport}</pre>
|
||||
<pre class="mt-2 p-3 bg-bg-input border border-border rounded-lg text-[12px] text-text-secondary overflow-auto max-h-[400px] whitespace-pre-wrap font-mono">{diagnosticReport}</pre>
|
||||
</details>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user