wiseguru_ReWrite-Voice-Notes/styles.css
WiseGuru 3ec83943eb Add four UX features and bundle pending pre-release work
This session's features:
- Quick Record mode selector: third button on the floater opens a
  popover of templates, switchable mid-recording. Updates the
  controller's template in place; does not touch lastUsedTemplateId
  until completion.
- Per-invocation destination override on the main modal: a Destination
  row under the template picker overrides insertMode and the new-file
  fields for one run, plumbed via PipelineParams.destinationOverride
  and shallow-merged onto a template copy before insertOutput. The
  template file on disk is never mutated.
- Assistant prompt as a vault file: replaces the settings textarea
  with ReWrite/AssistantPrompt.md, loaded via src/assistant-prompt.ts
  and cached on plugin.assistantPrompt. AI/Agent labels standardized
  to "Assistant"; aiName -> assistantName; adHocInstructionsPrompt
  field removed.
- Known Nouns list: ReWrite/KnownNouns.md with YAML guidance
  frontmatter and a Markdown body of nouns (optional misheard
  alternates after a colon). buildKnownNounsSystemPromptSection
  injects a "Known nouns" block into the LLM system prompt only when
  the list is non-empty. Frontmatter is for humans and is not sent
  to the LLM in v1.

Cross-cutting: PipelineParams gains host: PipelineHost (narrow
interface in src/types.ts) so the pipeline can read assistantPrompt
and knownNouns without importing ReWritePlugin and forming a cycle.

Pre-existing uncommitted work also rolled in:
- Passphrase encryption for secrets.json.nosync via AES-GCM +
  PBKDF2 (src/secrets.ts), with PassphraseModal and a settings-tab
  banner/dropdown for mode selection.
- WhisperHost adopt/external states + PID sidecar so an orphaned
  whisper-server from a previous session is adopted, and external
  ones are never killed by ReWrite (src/whisper-host.ts).
- Whisper status bar (src/ui/whisper-status-bar.ts) and
  start/stop commands.
- Audio persistence before transcription (src/audio-persist.ts)
  plus the reprocess-audio flow (src/ui/audio-source.ts,
  src/ui/audio-file-picker.ts).
- Wake-name extraction (src/wake-name.ts).
- Templates as vault Markdown files in a folder
  (src/templates-folder.ts).
- Linux build script for whisper-server
  (scripts/build-whisper-linux.sh).
- README, CLAUDE.md, docs/FEATURES.md, eslint.config.mts updates
  covering all of the above.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-26 10:13:42 -07:00

359 lines
7.3 KiB
CSS

/* ReWrite plugin styles */
.rewrite-modal .rewrite-template-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.rewrite-modal .rewrite-destination-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
padding: 8px;
border: 1px dashed var(--background-modifier-border);
border-radius: 4px;
}
.rewrite-modal .rewrite-destination-row .rewrite-destination-sublabel {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--font-ui-small);
color: var(--text-muted);
}
.rewrite-modal .rewrite-destination-row input[type="text"] {
width: 100%;
}
.rewrite-modal .rewrite-destination-reset {
align-self: flex-start;
font-size: var(--font-ui-small);
background: transparent;
border: none;
color: var(--text-accent);
cursor: pointer;
padding: 0;
}
.rewrite-modal .rewrite-tabs {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.rewrite-modal .rewrite-tab.is-active {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}
.rewrite-modal .rewrite-tab-body {
margin-top: 8px;
}
.rewrite-modal .rewrite-recording-indicator {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.rewrite-modal .rewrite-pulse-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-red);
animation: rewrite-pulse 1s ease-in-out infinite;
}
@keyframes rewrite-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.rewrite-modal .rewrite-live-transcript {
min-height: 60px;
padding: 8px;
margin-top: 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
white-space: pre-wrap;
}
.rewrite-modal .rewrite-paste {
width: 100%;
min-height: 160px;
font-family: var(--font-text);
}
.rewrite-settings-textarea {
width: 100%;
min-height: 80px;
font-family: var(--font-text);
resize: vertical;
}
.rewrite-modal .rewrite-progress {
margin-top: 12px;
font-style: italic;
}
.rewrite-modal .rewrite-retry {
margin-top: 12px;
padding: 8px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
}
.rewrite-setup-card {
padding: 12px;
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
margin-bottom: 12px;
}
.rewrite-setup-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
/* Settings tab */
.rewrite-settings .rewrite-section-desc {
color: var(--text-muted);
font-size: var(--font-ui-small);
margin-top: -4px;
margin-bottom: 8px;
}
/* Quick record floating mini-UI */
.rewrite-quick-floater {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: var(--background-secondary);
color: var(--text-normal);
border: 1px solid var(--background-modifier-border);
border-radius: 8px;
box-shadow: var(--shadow-s);
font-size: var(--font-ui-small);
}
.rewrite-quick-floater .rewrite-quick-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-red);
animation: rewrite-pulse 1s ease-in-out infinite;
}
.rewrite-quick-floater.is-busy .rewrite-quick-dot {
background-color: var(--color-orange);
animation: none;
}
.rewrite-quick-floater .rewrite-quick-timer {
font-variant-numeric: tabular-nums;
min-width: 4ch;
}
.rewrite-quick-floater .rewrite-quick-stop,
.rewrite-quick-floater .rewrite-quick-cancel,
.rewrite-quick-floater .rewrite-quick-template {
padding: 2px 8px;
}
.rewrite-quick-floater .rewrite-quick-template {
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rewrite-quick-floater .rewrite-quick-popover {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
display: flex;
flex-direction: column;
min-width: 180px;
max-height: 240px;
overflow-y: auto;
padding: 4px;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
box-shadow: var(--shadow-s);
z-index: 10000;
}
.rewrite-quick-floater .rewrite-quick-popover-item {
text-align: left;
padding: 4px 8px;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-normal);
font-size: var(--font-ui-small);
border-radius: 4px;
}
.rewrite-quick-floater .rewrite-quick-popover-item:hover {
background-color: var(--background-modifier-hover);
}
.rewrite-quick-floater .rewrite-quick-popover-item.is-active {
color: var(--text-on-accent);
background-color: var(--interactive-accent);
}
/* Status bar */
.rewrite-status-bar {
display: inline-flex;
gap: 6px;
align-items: center;
cursor: pointer;
}
.rewrite-status-bar .rewrite-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--text-muted);
}
.rewrite-status-bar .rewrite-status-dot.is-stopped {
background-color: var(--text-muted);
}
.rewrite-status-bar .rewrite-status-dot.is-starting {
background-color: var(--color-yellow);
}
.rewrite-status-bar .rewrite-status-dot.is-running {
background-color: var(--color-green);
}
.rewrite-status-bar .rewrite-status-dot.is-external {
background-color: var(--color-orange);
}
.rewrite-status-bar .rewrite-status-dot.is-crashed {
background-color: var(--color-red);
}
.rewrite-hidden {
display: none !important;
}
/* Encryption banner (settings tab) */
.rewrite-encryption-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin-bottom: 16px;
border-radius: 6px;
border: 1px solid var(--background-modifier-border);
background-color: var(--background-secondary);
font-size: var(--font-ui-small);
}
.rewrite-encryption-banner.is-ok {
border-color: var(--color-green);
}
.rewrite-encryption-banner.is-warning {
border-color: var(--color-yellow);
background-color: rgba(255, 196, 0, 0.08);
}
.rewrite-encryption-banner.is-locked {
border-color: var(--color-red);
background-color: rgba(255, 80, 80, 0.08);
}
.rewrite-encryption-banner button {
margin-left: auto;
}
/* Passphrase modal */
.rewrite-passphrase-modal .rewrite-passphrase-desc {
color: var(--text-muted);
margin-bottom: 12px;
}
.rewrite-passphrase-modal .rewrite-passphrase-input {
width: 100%;
font-family: var(--font-monospace);
}
.rewrite-passphrase-modal .rewrite-passphrase-warning {
color: var(--text-warning, var(--color-yellow));
font-size: var(--font-ui-small);
margin-top: 8px;
}
.rewrite-passphrase-modal .rewrite-passphrase-tips {
background-color: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 12px;
font-size: var(--font-ui-small);
}
.rewrite-passphrase-modal .rewrite-passphrase-tips strong {
display: block;
margin-bottom: 6px;
}
.rewrite-passphrase-modal .rewrite-passphrase-tips ul {
margin: 0;
padding-left: 18px;
}
.rewrite-passphrase-modal .rewrite-passphrase-tips li {
margin-bottom: 4px;
}
.rewrite-passphrase-modal .rewrite-passphrase-tips code {
font-size: 0.9em;
padding: 1px 4px;
background-color: var(--background-primary);
border-radius: 3px;
}
.rewrite-passphrase-modal .rewrite-passphrase-error {
color: var(--text-error, var(--color-red));
font-size: var(--font-ui-small);
margin-top: 8px;
}
.rewrite-passphrase-modal .rewrite-passphrase-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 16px;
}
/* Locked card in the main modal */
.rewrite-locked-card {
border-color: var(--color-red);
}