Mori

DESIGN BOOK · v1.0

Desktop UI

SHELL · COMPONENTS · MOCKUPS

Mori desktop app 的 UI 規範:主視窗(sidebar shell)、chat panel、floating widget、chat bubble、picker、modal。實作位置 src/*.tsx 跟對應 CSS。

Design Reference

原始 UI 設計稿(docs/design/mori-desktop-ui.png)— 含 13 個元件 / mockup 區塊:

Main Window Shell

主視窗(label main)固定 880×600 預設,resizable + minWidth 640 minHeight 440。左側 196px sidebar + 右側內容區。

Sidebar Tabs

Icon 全套 line-art SVG(src/icons.tsx),stroke=currentColor 跟 theme 走。

id	icon	label	主內容
`chat`	`IconChat`	對話	scrollable thread + bottom input bar(v0.4.0+ topbar 顯示 profile + provider + model)
`profiles`	`IconProfiles`	Profiles	voice / agent profile list + 切換 + 編輯 modal + token 估算 chip(v0.4.3+)+ 加入範本 / 開啟資料夾按鈕(v0.4.1+)
`config`	`IconConfig`	Config	config.json typed form + raw JSON + corrections.md + theme picker
`memory`	`IconMemory`	Memory	~/.mori/memory/ list + 全文搜尋 + 編輯 modal
`annuli`	`IconAnnuli`	Annuli	annuli vault status / SOUL.md preview / MEMORY sections / events / sleep button(Wave 4 MVP)
`skills`	`IconSkills`	Skills	當前 profile 啟用 skills 列表 + parameters
`deps`	`IconDeps`	Deps	optional 工具 / 模型偵測 + 安裝
`logs`	`IconHelp`	Logs	v0.4.0+ 事件 log:date / kind / provider filter + 每行可展開 JSON。除錯第一站

Sidebar 底部另有 IconSun / IconMoon theme toggle button(brand-3)。

實作

src/MainShell.tsx — sidebar + tab routing
src/shell.css — 主視窗 + sidebar + form / modal / button 全套樣式
src/tabs/*.tsx — 每個 tab 一個 component

Chat Panel(對話 tab)

結構由上到下:

top bar — mode chip(IconChat / IconKeyboard / IconSleep)· active profile(v0.4.0+,例 AGENT-01.翻譯助手 / USER-00.純文字輸入,依 mode 自動切)· provider · model + 三個 icon button(IconSleep/IconSun 休眠 toggle · IconRefresh 重置 · IconConfig status)。Profile chip 在 phase=done / profile-switched event 觸發時自動 refresh
thread — scrollable;user 訊息靠右 sand 泡泡(暖色)、Mori 靠左 forest-soft 泡泡(葉脈綠)、IconTool tool chip 顯示 LLM 用了哪個 skill
progress chip — 錄音中(秒數 + 音量條)/ 轉錄中 / 思考中
input bar — 永遠在底部:IconMic / IconStop mic button + textarea(auto-grow)+ 送出 button

實作:src/ChatPanel.tsx + src/chat-panel.css。對應 IPC: get_conversation 拉歷史、submit_text 送文字、toggle 切錄音、 reset_conversation 清歷史。

Listening Mode(Hey Mori 待命,v0.6.0+)

第 3 條獨立 mode 軸:不用按熱鍵,對麥克風喊「Hey Mori」就觸發錄音 + STT + agent。跟 Alt+N(voice dictation Hold)/ Ctrl+Alt+N(agent toggle)完全獨立,可任意切。

進入方式: Tray menu(systray icon 右鍵)→「Hey Mori 待命」項目
離開方式: Tray menu 切回別的 mode / 點托盤圖示再選一次
底層: mori-tauri spawn examples/scripts/mori-wake-listener.py(Python openWakeWord),subprocess 讀麥克風持續偵測。退出時 kill_on_drop 收掉。
偵測命中: 先播 wake-ack 應答音(下段)→ 觸發跟 Alt+N Hold-press 等效的 start_recording 流程 → VAD 偵測 user 講完自動 stop → STT → agent
必備檔: ~/.mori/wakeword/hey-mori.onnx(v0.6.0+ binary 內嵌 TTS-only generic 版,首次啟動自動解壓)+ ~/.mori/wake-venv/bin/python(Deps tab 一鍵裝)

Wake-ack 應答音

偵測到後播一段 Mori 的回應(「嗯,我在聽」之類),user 不用盯 floating sprite 就知道可以下指令了。先播完才開麥克風,避免從喇叭出來的聲音被 mic 收回污染 STT(沒做 echo cancellation)。

5 個 bundled voice preset(Gemini 2.5 TTS bake,binary embed ~1.2 MB):leda-嗯我在聽.wav(預設)、v5-erinome-嗯.wav、v6-嗯.wav、v8a-嗨.wav、v9d-嗨.wav
切換方式:Config tab → Voice subtab 滑到底「Wake-ack 應答音」section → 按「使用」一鍵切
自錄:同 section 上傳 .wav(WAV header 自動驗證)
關掉:同 section 啟用 toggle 關掉,純靠 floating sprite 提示

VAD silence-stop(v0.6.0+)

過去 wake event 觸發後固定錄滿 max_record_secs 才停,長指令會被截。v0.6.0 改成即時 VAD:

100ms poll Recorder.level(已存在的 Arc<AtomicU16>)
State machine:WaitingForSpeech(等 user 開口)→ Speaking(追 silence run)→ 連續 silence_stop_secs(預設 1.5s)靜音自動 stop 送 STT
max_record_secs 預設 30s,只當「VAD 沒 fire」的安全兜底(背景持續噪音 / user 一直「ah...」)

Settings UI

Config tab → Voice subtab 滑到底兩個 section:

欄位	預設	說明
`threshold`	0.5	偵測門檻,越高越嚴格。光講「Mori」就觸發 → 拉到 0.65
`silence_stop_secs`	1.5	VAD 多久靜音算 user 講完
`silence_threshold_rms`	0.012	VAD 靜音判定(背景吵就拉 0.02~0.05)
`max_record_secs`	30	安全上限(秒)
`wake_ack_enabled`	true	關掉就完全靜音

自訓 wake-word(Linux only,v0.6.0+)

預設 hey-mori.onnx 是 TTS-only generic 訓練版,英文「Hey Mori」普遍適用但對非英語母語 user 命中率可能偏低。Linux + GPU 進階 user 可:

examples/scripts/mori-wake-train.py "Your Phrase" — 訓新 phrase(~30-60 min on GPU,需 ~30 GB 磁碟)
examples/scripts/mori-wake-verifier.py — 用自己的聲音錄 ~15 條 positive + ~15 條 negative,訓 scikit-learn 二階段 verifier,對個人聲線命中率大幅提高

詳見 examples/scripts/README.wake-train.md。Windows / macOS 暫未支援(piper-phonemize wheel 不齊 + macOS 沒 CUDA)。

Floating Widget(桌面常駐 sprite)

label: floating
大小: 160×160 固定,transparent + decorationless + alwaysOnTop + skipTaskbar
內容: sprite + aura ring + ripple + chip overlay
實作: src/FloatingMori.tsx + src/floating.css

狀態 visual

idle — 呼吸 5s + 微光暈
recording — 水波紋天空藍 ring(border gradient)+ 音量驅動 box-shadow + ripple 元素
thinking — 森林綠雙環 spin + 葉間光斑 breathe(::after pulse 2.6s)
done — 一次柔暖光暈 + 微 bounce
error — 角色微紅 + 抖一下
sleeping — 整體淡化 + 輕微下沉

Chat Bubble(獨立視窗)

label: chat_bubble
定位策略: 啟動時 visible+off-screen(-10000,-10000),收 chat-bubble-show event 移到 sprite 下方 8px
大小: 360 寬 × 依內容 offsetHeight 同步(max 480)
內容: 多行 wrap、可滾動、字級 13px、行高 1.55

實作:src/ChatBubble.tsx + src/chat-bubble.css

Picker(Ctrl+Alt+P profile picker)

label: picker
大小: 520×280,3-item carousel(prev / current / next)
互動: ↑↓ 轉動列表 / Tab 切組 / Enter 確認 / Esc 取消
實作: src/Picker.tsx + src/picker.css

Modal

Profile editor / Memory editor / Status modal 共用 modal 結構:

<div class="mori-modal-backdrop">
  <div class="mori-modal">
    <div class="mori-modal-header">...title + ✕...</div>
    <div class="mori-modal-body">...form / textarea...</div>
    <div class="mori-modal-footer">
      <button class="mori-btn danger">刪除</button>
      <div class="mori-modal-footer-right">
        <button class="mori-btn">還原</button>
        <button class="mori-btn primary">儲存</button>
      </div>
    </div>
  </div>
</div>

Form Components

FormRow

<div class="mori-form-row">
  <div class="mori-form-row-label">
    <span>label</span>
    <span class="mori-form-row-hint">hint</span>
  </div>
  <div class="mori-form-row-input">...input / select / textarea...</div>
</div>

Buttons

class	背景	用途
`.mori-btn`	白透	predefined neutral
`.mori-btn.primary`	forest	主動作 / 儲存
`.mori-btn.danger`	紅	刪除 / 不可逆
`.mori-btn.ghost`	無底	close ✕ / 次要
`.mori-btn.small`	小 padding	row inline

KV Table(API keys / routing.skills)

<div class="mori-kv-table">
  <div class="mori-kv-row">
    <input class="mori-kv-key"   placeholder="..." />
    <input class="mori-kv-value" placeholder="..." />
    <button class="mori-btn small ghost">✕</button>
  </div>
  <button class="mori-btn small">+ 新增</button>
</div>

Window Sizes Summary

window	size	resizable	transparent	skipTaskbar
`main`	880×600	✓	—	—
`floating`	160×160	—	✓	✓
`chat_bubble`	360×56(dyn)	✓	✓	✓
`picker`	520×280	—	✓	✓

Phase Status

主視窗 UI 完成度(2026-05-13):

✓ 5M sidebar 架構 + 6 個 tab
✓ 5N Chat panel(scrollable thread + bottom input bar)
✓ 5L config form + profile editor
✓ 5L-4 Memory + Skills browser
✓ 5O Dependencies tab
✓ Brand palette 套用全套 — forest / cream / sand 取代原 tech dark + sky blue(brand-2)
✓ Line-art SVG icon 取代 emoji — sidebar 6 tab + ChatPanel / Picker / Profiles / Memory / Skills / Deps / Floating 全套(brand-2 / brand-3)
✓ Dual theme + VSCode-like 自訂 — ~/.mori/themes/*.json 可自寫(brand-3)
✓ Custom Select 取代 native <select> — 跨 theme dropdown 配色一致(brand-3 follow-up)
✓ 5P Sprite 4×4 engine + Character pack 系統 — sprite 從 hardcoded 改 ~/.mori/characters/<active>/ 可換
✓ 5Q X11 session 支援 + 自訂熱鍵 — ~/.mori/config.json hotkeys 子樹,X11 走 XGrabKey、Wayland 走 portal
✓ 5R Starter profile + 基本操作流程文件 — 預設 ship USER-00/01 + AGENT-00/01
✓ 5R-followup XShape OS-level 圓形 floating + picker / chat-bubble 多螢幕細節修
✓ 5S Config UI IA 重組 — 7 個 sub-tab 按使用者心智模型分組 + HintTooltip + sticky save bar
✓ 5T Toggle / Hold 兩種錄音熱鍵語意 — hotkeys.toggle_mode 控制,改完按儲存即時生效

Mori Design Book · Desktop UI · 改 component class → 對齊 src/shell.css + 各 module CSS