feat: mute toggle, persisted preferences, onboarding polish

- Sound mute toggle in the system tray, persisted; muted floppy-seek
  also skips its pacing delay
- CRT preference persists across visits
- Settings: 'Verify GitHub Account' button (cheap 1-page fetch) closes
  the validation gap for the most error-prone input; explicit copy that
  the AI key is optional (language-only map is a supported mode)
- D7: 'Remember API key on this device' checkbox — unchecked keeps the
  key in memory only, persistence strips it
- Help: Ollama/OLLAMA_ORIGINS guidance, keyboard shortcuts, 500-star
  cap and layout-toggle documentation

https://claude.ai/code/session_01K7SFMH22xz6AJwkMgtqH7E

Author: claude

src/App.jsx

@@ -30,12 +30,16 @@ const DEFAULT_SETTINGS = {
   provider: 'gemini',
   apiKey: '',
   model: 'gemini-2.5-flash',
-  customUrl: ''
+  customUrl: '',
+  persistApiKey: true
 };
 
 export default function App() {
-  // 1. Desktop & CRT State
-  const [crtEnabled, setCrtEnabled] = useState(true);
+  // 1. Desktop & CRT State (CRT and mute preferences persist across visits)
+  const [crtEnabled, setCrtEnabled] = useState(() =>
+    storage.read('crt', true, (v) => typeof v === 'boolean')
+  );
+  const [muted, setMuted] = useState(() => audio.isMuted());
   const [isShutdown, setIsShutdown] = useState(false);
   const [selectedIcon, setSelectedIcon] = useState(null);
 
@@ -86,7 +90,11 @@ export default function App() {
 
   const handleSaveSettings = (newSettings) => {
     setSettings(newSettings);
-    storage.write('settings', newSettings);
+    // Session-only key option (D7): the key lives in React state either way,
+    // but is stripped from persistence when the user opts out
+    storage.write('settings', newSettings.persistApiKey
+      ? newSettings
+      : { ...newSettings, apiKey: '' });
 
     // Clear data cache if username changed to force re-fetch
     if (newSettings.username !== settings.username) {
@@ -316,6 +324,14 @@ export default function App() {
             onToggleCrt={() => {
               audio.playClick();
               setCrtEnabled(!crtEnabled);
+              storage.write('crt', !crtEnabled);
+            }}
+            muted={muted}
+            onToggleMute={() => {
+              const next = !muted;
+              audio.setMuted(next);
+              setMuted(next);
+              if (!next) audio.playClick(); // audible confirmation on unmute
             }}
             onShutdown={() => {
               audio.playError();

src/components/HelpWindow.jsx

@@ -53,6 +53,19 @@ export default function HelpWindow({ onClose }) {
           <li>
             <strong>Local Guardrails:</strong> Our built-in rate limiter monitors your requests per-minute and per-day in local storage, blocking requests client-side before they can reach the limits.
           </li>
+          <li>
+            <strong>Local AI (Ollama):</strong> Pick the Custom provider and point it at your local endpoint (e.g. <code style={{ fontFamily: 'var(--font-mono)' }}>http://localhost:11434/v1/chat/completions</code>). Start Ollama with <code style={{ fontFamily: 'var(--font-mono)' }}>OLLAMA_ORIGINS</code> set so the browser may call it. No key needed.
+          </li>
+        </ul>
+      </fieldset>
+
+      {/* Keyboard & windows */}
+      <fieldset className="win95-raised" style={{ padding: '10px', marginBottom: '12px' }}>
+        <legend style={{ padding: '0 4px', fontWeight: 'bold' }}>⌨️ Windows & Shortcuts</legend>
+        <ul style={{ paddingLeft: '18px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          <li>Drag windows by the title bar; resize from the bottom-right grip; double-click the title bar to maximize.</li>
+          <li><strong>Esc</strong> closes the active window · <strong>F6</strong> cycles window focus.</li>
+          <li>The map shows your <strong>500 most recent stars</strong> at most; toggle 🕸️ Web / 🌀 Force layouts inside the map; press <strong>Enter</strong> in the search box to fly to a match.</li>
         </ul>
       </fieldset>
 

src/components/SettingsWindow.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { audio } from '../utils/audio';
 import { aiRouter } from '../services/aiRouter';
+import { fetchStarredRepos } from '../services/github';
 
 export default function SettingsWindow({ settings, onSave, onClose }) {
   const [username, setUsername] = useState(settings.username || '');
@@ -10,9 +11,11 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
   const [apiKey, setApiKey] = useState(settings.apiKey || '');
   const [model, setModel] = useState(settings.model || 'gemini-2.5-flash');
   const [customUrl, setCustomUrl] = useState(settings.customUrl || '');
+  const [persistApiKey, setPersistApiKey] = useState(settings.persistApiKey !== false);
 
   // Testing connection state
   const [testStatus, setTestStatus] = useState({ state: 'idle', message: '' });
+  const [ghStatus, setGhStatus] = useState({ state: 'idle', message: '' });
 
   // Re-sync the form when the settings object changes from outside (e.g.
   // Reset All). Render-time adjustment per React docs — avoids the
@@ -27,6 +30,7 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
     setApiKey(settings.apiKey || '');
     setModel(settings.model || 'gemini-2.5-flash');
     setCustomUrl(settings.customUrl || '');
+    setPersistApiKey(settings.persistApiKey !== false);
   }
 
   const handleSave = (e) => {
@@ -39,10 +43,34 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
       provider,
       apiKey,
       model,
-      customUrl
+      customUrl,
+      persistApiKey
     });
   };
 
+  const handleVerifyGitHub = async () => {
+    if (!username) {
+      setGhStatus({ state: 'error', message: 'Enter a GitHub username first!' });
+      audio.playError();
+      return;
+    }
+    setGhStatus({ state: 'loading', message: 'Checking GitHub account...' });
+    audio.playClick();
+    try {
+      const repos = await fetchStarredRepos(username, githubToken, 1);
+      setGhStatus({
+        state: 'success',
+        message: repos.length > 0
+          ? `Account found — stars are accessible.`
+          : 'Account found, but it has no public stars yet.'
+      });
+      audio.playSuccess();
+    } catch (err) {
+      setGhStatus({ state: 'error', message: err.message });
+      audio.playError();
+    }
+  };
+
   const handleTestConnection = async () => {
     if (!apiKey) {
       setTestStatus({ state: 'error', message: 'Enter an API key first!' });
@@ -104,6 +132,26 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
             Increases rate limit from 60 to 5000 requests/hr. Required for private stars.
           </span>
         </div>
+        <div className="field-group">
+          <button
+            type="button"
+            className="win95-btn"
+            onClick={handleVerifyGitHub}
+            disabled={ghStatus.state === 'loading'}
+            style={{ padding: '4px 10px' }}
+          >
+            {ghStatus.state === 'loading' ? 'Verifying...' : '✓ Verify GitHub Account'}
+          </button>
+          {ghStatus.state !== 'idle' && ghStatus.state !== 'loading' && (
+            <span style={{
+              fontSize: '10px',
+              marginLeft: '6px',
+              color: ghStatus.state === 'success' ? '#006600' : '#cc0000'
+            }}>
+              {ghStatus.state === 'success' ? '✓ ' : '❌ '}{ghStatus.message}
+            </span>
+          )}
+        </div>
         <div className="field-group">
           <label htmlFor="gh-limit">Max Stars to Visualize:</label>
           <select
@@ -128,7 +176,10 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
       {/* Universal AI Router Config */}
       <fieldset className="win95-raised" style={{ padding: '10px', margin: '5px 0' }}>
         <legend style={{ padding: '0 5px', fontSize: '12px', fontWeight: 'bold' }}>Universal AI Settings</legend>
-        
+        <span style={{ fontSize: '10px', color: '#666', display: 'block', marginBottom: '6px' }}>
+          Optional — without an AI key you still get a working map, grouped by programming language (no AI categories or semantic links).
+        </span>
+
         <div className="field-group">
           <label htmlFor="ai-provider">AI Provider:</label>
           <select
@@ -163,6 +214,14 @@ export default function SettingsWindow({ settings, onSave, onClose }) {
             value={apiKey}
             onChange={(e) => setApiKey(e.target.value)}
           />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '10px', color: '#444', marginTop: '4px', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={persistApiKey}
+              onChange={(e) => setPersistApiKey(e.target.checked)}
+            />
+            Remember API key on this device (uncheck to keep it for this session only)
+          </label>
         </div>
 
         <div className="field-group">

src/components/Taskbar.jsx

@@ -1,14 +1,16 @@
 import { useState, useEffect } from 'react';
 import { audio } from '../utils/audio';
 
-export default function Taskbar({ 
-  windows, 
-  onToggleWindow, 
-  onFocusWindow, 
-  crtEnabled, 
-  onToggleCrt, 
+export default function Taskbar({
+  windows,
+  onToggleWindow,
+  onFocusWindow,
+  crtEnabled,
+  onToggleCrt,
+  muted,
+  onToggleMute,
   onShutdown,
-  onResetAll 
+  onResetAll
 }) {
   const [startMenuOpen, setStartMenuOpen] = useState(false);
   const [timeStr, setTimeStr] = useState('');
@@ -181,6 +183,20 @@ export default function Taskbar({
         >
           📺 CRT: {crtEnabled ? 'ON' : 'OFF'}
         </button>
+        {/* Sound mute toggle */}
+        <button
+          className="win95-btn"
+          aria-label={muted ? 'Unmute sounds' : 'Mute sounds'}
+          style={{
+            fontSize: '10px',
+            padding: '1px 4px',
+            height: '20px',
+            borderStyle: muted ? 'inset' : 'outset'
+          }}
+          onClick={onToggleMute}
+        >
+          {muted ? '🔇' : '🔊'}
+        </button>
         <span style={{ fontFamily: 'var(--font-mono)' }}>{timeStr}</span>
       </div>
 

src/utils/audio.js

@@ -1,4 +1,7 @@
+import { storage } from '../services/storage';
+
 let audioCtx = null;
+let muted = storage.read('muted', false, (v) => typeof v === 'boolean');
 
 function getAudioContext() {
   if (!audioCtx) {
@@ -14,7 +17,17 @@ function getAudioContext() {
 }
 
 export const audio = {
+  isMuted() {
+    return muted;
+  },
+
+  setMuted(value) {
+    muted = !!value;
+    storage.write('muted', muted);
+  },
+
   playClick() {
+    if (muted) return;
     try {
       const ctx = getAudioContext();
       const osc = ctx.createOscillator();
@@ -37,6 +50,7 @@ export const audio = {
   },
 
   playSuccess() {
+    if (muted) return;
     try {
       const ctx = getAudioContext();
       const now = ctx.currentTime;
@@ -61,6 +75,7 @@ export const audio = {
   },
 
   playError() {
+    if (muted) return;
     try {
       const ctx = getAudioContext();
       const now = ctx.currentTime;
@@ -83,6 +98,7 @@ export const audio = {
   },
 
   async playFloppySeek(durationMs = 1500) {
+    if (muted) return; // skip the pacing delay too — silence shouldn't slow indexing
     try {
       const ctx = getAudioContext();
       const steps = Math.floor(durationMs / 120);