@agent-native/core 0.151.2 → 0.152.0

package/corpus/templates/clips/desktop/src/app.tsx

@@ -164,6 +164,8 @@ type PopoverView =
   | "meetings"
   | "dictation";
 
+type SettingsTabId = "general" | "recording" | "meetings" | "dictation";
+
 interface PopoverMeeting {
   id: string;
   title: string;
@@ -2622,8 +2624,12 @@ export function App() {
   // and we call `resize_popover` to match.
   const appRef = useRef<HTMLDivElement | null>(null);
   usePopoverAutoSize(appRef, {
-    disabled: !popoverVisible || isRecording || recordingFlowActive,
-    width: popoverView === "settings" || popoverView === "memory" ? 440 : 360,
+    disabled:
+      (popoverView !== "settings" && !popoverVisible) ||
+      isRecording ||
+      recordingFlowActive,
+    width:
+      popoverView === "settings" ? 920 : popoverView === "memory" ? 440 : 360,
   });
 
   const loadPendingUploads = useCallback(async () => {
@@ -5315,6 +5321,7 @@ function Setup({
 }) {
   const [url, setUrl] = useState(initial ?? DEFAULT_URL);
   const [readinessOpen, setReadinessOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState<SettingsTabId>("general");
   const featureConfig = useFeatureConfig();
   const updateStatus = useUpdateStatus();
   const voiceEnabled = featureConfig?.voiceEnabled !== false;
@@ -6069,13 +6076,6 @@ function Setup({
     updateStatus.state === "available" ||
     updateStatus.state === "downloading";
   const updateReady = updateStatus.state === "downloaded";
-  const updateStatusClass =
-    updateStatus.state === "error"
-      ? "setup-warning"
-      : updateStatus.state === "downloaded" ||
-          updateStatus.state === "not-available"
-        ? "setup-success"
-        : "setup-hint";
   const updateCheckLabel = !updateChecksSupported
     ? "Release builds only"
     : updateStatus.state === "checking"
@@ -6808,1071 +6808,843 @@ function Setup({
     );
   }
 
-  return (
-    <div className="setup">
-      <div className="setup-header" onMouseDown={handlePopoverHeaderMouseDown}>
-        {onCancel ? (
-          <button
-            type="button"
-            className="setup-back"
-            onClick={onCancel}
-            aria-label="Back"
-          >
-            <IconArrowLeft size={18} stroke={1.75} />
-          </button>
-        ) : null}
-        <h2>Settings</h2>
-      </div>
-
-      <div className="setup-section-heading">General</div>
-
-      <div className="setup-section">
-        <SettingLabel
-          label="Clips server URL"
-          hint="The URL of the Clips backend this tray app connects to."
-          htmlFor="clips-url"
-        />
-        <input
-          id="clips-url"
-          type="url"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
-          placeholder="http://localhost:8080"
-        />
-        <button
-          className="secondary setup-connect-button"
-          type="button"
-          onClick={handleConnect}
+  function renderGeneralSettings() {
+    return (
+      <div className="settings-tab-content">
+        <DesktopSettingsGroup
+          title="Connection"
+          description="Choose the Clips backend used by this desktop recorder."
         >
-          Connect
-        </button>
-      </div>
+          <DesktopSettingsRow
+            label="Clips server URL"
+            description="The backend this tray app connects to."
+            control={
+              <div className="settings-control-group settings-control-group--wide">
+                <input
+                  id="clips-url"
+                  className="settings-url-input"
+                  type="url"
+                  value={url}
+                  onChange={(event) => setUrl(event.target.value)}
+                  placeholder="http://localhost:8080"
+                />
+                <button
+                  className="secondary"
+                  type="button"
+                  onClick={handleConnect}
+                >
+                  Connect
+                </button>
+              </div>
+            }
+          />
+        </DesktopSettingsGroup>
 
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
+        <DesktopSettingsGroup
+          title="App behavior"
+          description="Keep Clips ready when you need it and out of the way when you do not."
+        >
+          <DesktopSettingsRow
             label="Open at login"
-            hint="Start Clips automatically when you sign in so recording, meetings, and dictation shortcuts are ready."
-          />
-          <Switch
-            on={launchAtLoginEnabled}
-            onChange={setLaunchAtLoginEnabled}
-            label="Open Clips at login"
+            description="Start Clips when you sign in."
+            control={
+              <Switch
+                on={launchAtLoginEnabled}
+                onChange={setLaunchAtLoginEnabled}
+                label="Open Clips at login"
+              />
+            }
           />
-        </div>
-      </div>
-
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
+          <DesktopSettingsRow
             label="Hide when inactive"
-            hint="When off, the Clips window stays open until you close it."
-          />
-          <Switch
-            on={autoHidePopoverEnabled}
-            onChange={setAutoHidePopoverEnabled}
-            label="Hide Clips when focus leaves"
-          />
-        </div>
-      </div>
-
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
-            label="Show Clips in screen captures"
-            hint="When off, Clips windows and recording overlays stay out of screenshots, normal screen recordings, and Rewind. Turn on only for debugging or demos."
-          />
-          <Switch
-            on={showInScreenCapture}
-            onChange={setShowInScreenCapture}
-            label="Show Clips in screen captures"
+            description="Hide the tray window when it loses focus."
+            control={
+              <Switch
+                on={autoHidePopoverEnabled}
+                onChange={setAutoHidePopoverEnabled}
+                label="Hide Clips when focus leaves"
+              />
+            }
           />
-        </div>
-      </div>
-
-      <div className="setup-section">
-        <SettingLabel
-          label="Desktop updates"
-          hint="Check the signed Clips desktop release channel and download any available update."
-        />
-        <div className="setup-button-row">
-          <button
-            type="button"
-            className="secondary"
-            onClick={checkForDesktopUpdate}
-            disabled={!updateChecksSupported || updateBusy || updateReady}
-          >
-            <IconRefresh
-              size={15}
-              stroke={1.9}
-              className={updateBusy ? "update-spinner" : undefined}
-            />
-            {updateCheckLabel}
-          </button>
-          {updateReady ? (
-            <button
-              type="button"
-              className="secondary"
-              onClick={() => {
-                installAndRestart().catch((err) => {
-                  console.error("[clips-updater] relaunch failed:", err);
-                });
-              }}
-            >
-              Restart to install
-            </button>
-          ) : null}
-        </div>
-        <p className={updateStatusClass}>
-          {updateChecksSupported
-            ? desktopUpdateStatusText(updateStatus)
-            : "Update checks are available in signed release builds."}
-        </p>
-      </div>
-
-      <div className="setup-section-heading">Permissions</div>
-
-      <div className="setup-section">
-        <ReadinessPanel
-          mode="screen-camera"
-          cameraOn={true}
-          micOn={true}
-          includeVoicePaste={voiceEnabled}
-          includeFnMonitoring={fnShortcutSelected}
-          open={readinessOpen}
-          onOpenChange={setReadinessOpen}
-          onOpenPermission={openPrivacySettings}
-        />
-      </div>
-
-      <div className="setup-section-heading">Recording</div>
-
-      <div className="setup-section rewind-settings-entry">
-        <div className="rewind-settings-entry-main">
-          <span
-            className={`rewind-home-dot ${rewindStatusPresentation.isLive ? "is-live" : ""}`}
+          <DesktopSettingsRow
+            label="Show in screen captures"
+            description="Include Clips windows in screenshots and recordings."
+            control={
+              <Switch
+                on={showInScreenCapture}
+                onChange={setShowInScreenCapture}
+                label="Show Clips in screen captures"
+              />
+            }
           />
-          <div>
-            <strong>Rewind</strong>
-            <p className="setup-hint">{rewindStatusPresentation.title}</p>
-          </div>
-        </div>
-        <button type="button" className="secondary" onClick={onOpenRewind}>
-          Rewind settings
-        </button>
-      </div>
+        </DesktopSettingsGroup>
 
-      <div className="setup-section">
-        <SettingLabel
-          label="Clip Drafts"
-          hint="Only clips you dismiss from the saved-upload card appear in Movies/Clips/Drafts. To retry a failed upload, return to the Clips popover and use Retry."
-        />
-        <button
-          type="button"
-          className="secondary"
-          onClick={openClipDraftsFolder}
+        <DesktopSettingsGroup
+          title="Updates"
+          description="Keep the signed Clips desktop release current."
         >
-          <IconFolderOpen size={15} stroke={1.9} />
-          Open Clip Drafts
-        </button>
-        {clipDraftsError ? (
-          <p className="setup-warning">{clipDraftsError}</p>
-        ) : null}
-      </div>
-
-      <div className="setup-section setup-rewind-legacy">
-        <div className="setup-toggle-row">
-          <SettingLabel
-            label="Rewind"
-            hint="A disabled-by-default rolling local archive for recent screen and app context. It never becomes a shared Clip on its own."
-          />
-          <Switch
-            on={screenMemory.enabled}
-            onChange={(enabled) =>
-              void setScreenMemoryConfig({ enabled, paused: false })
+          <DesktopSettingsRow
+            label="Desktop updates"
+            description={
+              updateChecksSupported
+                ? desktopUpdateStatusText(updateStatus)
+                : "Update checks are available in signed release builds."
             }
-            label="Enable Rewind"
-            disabled={screenMemoryConfigBusy || captureControlsLocked}
-          />
-        </div>
-        <p className="setup-hint">
-          Local-only by default. Media uploads and sharing happen only when you
-          make a normal Clip.
-        </p>
-        {screenMemory.enabled ? (
-          <>
-            <div className="setup-toggle-row">
-              <SettingLabel
-                label="Pause capture"
-                hint="Stop retaining new Rewind segments without clearing the local archive."
-              />
-              <Switch
-                on={screenMemory.paused}
-                onChange={(paused) => void setScreenMemoryConfig({ paused })}
-                label="Pause Rewind"
-                disabled={screenMemoryConfigBusy || captureControlsLocked}
-              />
-            </div>
-            <div className="setup-grid">
-              <label className="setup-mini-field">
-                <span>Retention</span>
-                <select
-                  className="setup-select"
-                  disabled={screenMemoryConfigBusy || captureControlsLocked}
-                  value={screenMemory.retentionHours}
-                  onChange={(event) =>
-                    setScreenMemoryConfig({
-                      retentionHours: Number(event.target.value),
-                    })
-                  }
-                >
-                  <option value={8}>8 hours</option>
-                  <option value={24}>24 hours</option>
-                </select>
-              </label>
-              <label className="setup-mini-field">
-                <span>Disk cap</span>
-                <select
-                  className="setup-select"
-                  disabled={screenMemoryConfigBusy}
-                  value={screenMemory.maxBytes}
-                  onChange={(event) =>
-                    setScreenMemoryConfig({
-                      maxBytes: Number(event.target.value),
-                    })
-                  }
-                >
-                  <option value={5 * 1024 * 1024 * 1024}>5 GB</option>
-                  <option value={20 * 1024 * 1024 * 1024}>20 GB</option>
-                  <option value={50 * 1024 * 1024 * 1024}>50 GB</option>
-                </select>
-              </label>
-            </div>
-            <div className="setup-grid">
-              <label className="setup-mini-field">
-                <span>Capture mode</span>
-                <select
-                  className="setup-select"
-                  disabled={screenMemoryConfigBusy}
-                  value={screenMemory.captureMode}
-                  onChange={(event) =>
-                    setScreenMemoryConfig({
-                      captureMode: event.target.value as
-                        | "visuals"
-                        | "visuals-audio",
-                    })
-                  }
-                >
-                  <option value="visuals">Visuals</option>
-                  <option value="visuals-audio">Visuals + audio</option>
-                </select>
-              </label>
-              <label className="setup-mini-field">
-                <span>Agent handoff review</span>
-                <select
-                  className="setup-select"
-                  disabled={screenMemoryConfigBusy}
-                  value={screenMemory.reviewBeforeSending ? "review" : "direct"}
-                  onChange={(event) =>
-                    setScreenMemoryConfig({
-                      reviewBeforeSending: event.target.value === "review",
-                    })
-                  }
-                >
-                  <option value="review">Review before sending</option>
-                  <option value="direct">Send requested range directly</option>
-                </select>
-              </label>
-            </div>
-            <p className="setup-hint">
-              {screenMemory.captureMode === "visuals-audio"
-                ? "Visuals + audio is configured to retain microphone and system audio as separate local tracks."
-                : "Visuals retains screen and app context without selecting audio capture."}
-            </p>
-            <p className="setup-hint">
-              Agents receive bounded matching text when you ask. Raw Rewind
-              media remains local unless a bounded range becomes a private Clip.
-            </p>
-            <label className="setup-mini-field">
-              <span>Excluded apps</span>
-              <input
-                value={excludedBundleIdsInput}
-                onChange={(event) =>
-                  setExcludedBundleIdsInput(event.target.value)
-                }
-                onBlur={() =>
-                  setScreenMemoryConfig({
-                    excludedBundleIds: parseExcludedBundleIds(
-                      excludedBundleIdsInput,
-                    ),
-                  })
-                }
-                placeholder="com.example.private-app, com.example.vault"
-                aria-describedby="rewind-excluded-apps-hint"
-              />
-            </label>
-            <button
-              type="button"
-              className="secondary"
-              disabled={screenMemoryConfigBusy}
-              onClick={() =>
-                void setScreenMemoryConfig({
-                  excludedBundleIds: parseExcludedBundleIds(
-                    excludedBundleIdsInput,
-                  ),
-                })
-              }
-            >
-              Apply exclusions
-            </button>
-            <p id="rewind-excluded-apps-hint" className="setup-hint">
-              Bundle IDs, comma-separated. Password managers are excluded by
-              default. Recognized bundle IDs stop media capture and discard the
-              entire in-flight segment; apps that do not expose a recognized
-              bundle ID cannot be detected.
-            </p>
-            <div className="whisper-status">
-              {rewindStatusPresentation.isLive ? (
-                <IconCircleCheck size={13} className="whisper-status-icon" />
-              ) : (
-                <IconAlertTriangle size={13} className="whisper-status-icon" />
-              )}
-              <span>
-                {rewindStatusPresentation.kind === "recording" &&
-                !rewindStatusPresentation.hasError
-                  ? `Rewind is retaining local coverage: ${screenMemorySegments.length} segment${screenMemorySegments.length === 1 ? "" : "s"}, ${formatStorageBytes(screenMemoryTotalBytes)}.`
-                  : rewindStatusPresentation.detail}
-              </span>
-            </div>
-            {screenMemorySegments[0] ? (
-              <p className="setup-hint">
-                Latest local coverage:{" "}
-                {new Date(screenMemorySegments[0].endedAt).toLocaleTimeString()}
-                .
-              </p>
-            ) : null}
-            <div className="setup-advanced-body">
-              <SettingLabel
-                label="Ask Rewind"
-                hint="Searches app context, local transcripts, and local visual text on this Mac. Private mode allows this because no model or network service is called."
-              />
-              <div className="setup-button-row">
-                <input
-                  value={rewindLocalQuery}
-                  onChange={(event) => setRewindLocalQuery(event.target.value)}
-                  placeholder="What was Lilian saying about the audience?"
-                  aria-label="Ask Rewind locally"
-                  maxLength={500}
-                  onKeyDown={(event) => {
-                    if (event.key !== "Enter") return;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    void askRewindLocally();
-                  }}
-                />
+            control={
+              <div className="settings-control-group">
                 <button
                   type="button"
                   className="secondary"
-                  disabled={rewindLocalBusy || !rewindLocalQuery.trim()}
-                  onClick={() => void askRewindLocally()}
+                  onClick={checkForDesktopUpdate}
+                  disabled={!updateChecksSupported || updateBusy || updateReady}
                 >
-                  {rewindLocalBusy ? "Searching…" : "Search locally"}
+                  <IconRefresh
+                    size={15}
+                    stroke={1.9}
+                    className={updateBusy ? "update-spinner" : undefined}
+                  />
+                  {updateCheckLabel}
                 </button>
+                {updateReady ? (
+                  <button
+                    type="button"
+                    className="secondary"
+                    onClick={() => {
+                      installAndRestart().catch((err) => {
+                        console.error("[clips-updater] relaunch failed:", err);
+                      });
+                    }}
+                  >
+                    Restart to install
+                  </button>
+                ) : null}
               </div>
-              {rewindLocalError ? (
-                <p className="setup-warning">{rewindLocalError}</p>
-              ) : null}
-              {rewindLocalResult ? (
-                <div aria-live="polite">
-                  <p className="setup-hint">
-                    <strong>Local answer:</strong>{" "}
-                    {rewindLocalResult.answerSummary}
-                  </p>
-                  <p className="setup-hint">
-                    <strong>Confidence:</strong> {rewindLocalResult.confidence}
-                  </p>
-                  <p className="setup-hint">
-                    <strong>Coverage:</strong>{" "}
-                    {rewindLocalResult.coverage.segmentsConsidered} retained
-                    segment
-                    {rewindLocalResult.coverage.segmentsConsidered === 1
-                      ? ""
-                      : "s"}
-                    ; {rewindLocalResult.coverage.transcriptIndexesReady}{" "}
-                    transcript and {rewindLocalResult.coverage.ocrIndexesReady}{" "}
-                    visual indexes ready.
-                    {rewindLocalResult.coverage.gaps.length > 0
-                      ? ` ${rewindLocalResult.coverage.gaps.length} capture or index gap${rewindLocalResult.coverage.gaps.length === 1 ? "" : "s"} may hide matches.`
-                      : " No known capture or index gaps."}
-                  </p>
-                  {rewindLocalResult.coverage.gaps.length > 0 ? (
-                    <details className="setup-advanced">
-                      <summary className="setup-advanced-summary">
-                        Coverage gaps
-                      </summary>
-                      <div className="setup-advanced-body">
-                        {rewindLocalResult.coverage.gaps
-                          .slice(0, 10)
-                          .map((gap, index) => (
-                            <p
-                              className="setup-hint"
-                              key={`${gap.kind}-${gap.source}-${gap.startedAt ?? index}`}
-                            >
-                              <strong>{gap.source}</strong> · {gap.detail}
-                            </p>
-                          ))}
-                      </div>
-                    </details>
-                  ) : null}
-                  {rewindLocalResult.evidence.length === 0 ? (
-                    <p className="setup-hint">No matching evidence to show.</p>
-                  ) : (
-                    rewindLocalResult.evidence.map((evidence) => (
-                      <div className="setup-section" key={evidence.id}>
-                        <p className="setup-hint">
-                          <strong>{evidence.sourceType}</strong> ·{" "}
-                          {new Date(evidence.capturedAt).toLocaleString()}
-                          {typeof evidence.confidence === "number"
-                            ? ` · ${Math.round(evidence.confidence * 100)}% OCR confidence`
-                            : ""}
-                          <br />
-                          {evidence.excerpt}
-                        </p>
-                        <button
-                          type="button"
-                          className="secondary"
-                          onClick={() => void replayRewindMoment(evidence)}
-                          disabled={rewindReplayId === evidence.id}
-                        >
-                          <IconExternalLink size={14} stroke={1.9} />
-                          {rewindReplayId === evidence.id
-                            ? "Preparing replay…"
-                            : "Replay moment"}
-                        </button>
-                      </div>
-                    ))
-                  )}
-                  {rewindLocalResult.truncated ? (
-                    <p className="setup-hint">
-                      More local matches exist; results are bounded to the
-                      strongest 12.
-                    </p>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
-            <div className="setup-button-row">
+            }
+          />
+        </DesktopSettingsGroup>
+
+        <DesktopSettingsGroup
+          title="Account & diagnostics"
+          description="Manage the local desktop session and find troubleshooting information."
+        >
+          {signedInAs && onSignOut ? (
+            <DesktopSettingsRow
+              label="Signed in"
+              description={signedInAs}
+              control={
+                <button
+                  type="button"
+                  className="link-button"
+                  onClick={onSignOut}
+                >
+                  Sign out
+                </button>
+              }
+            />
+          ) : null}
+          <DesktopSettingsRow
+            label="Diagnostic logs"
+            description="Open the local Clips logs folder."
+            control={
               <button
                 type="button"
                 className="secondary"
-                onClick={exportScreenMemoryRecent}
-                disabled={screenMemoryBusy || screenMemorySegments.length === 0}
+                onClick={() => {
+                  invoke("open_logs").catch((err) => {
+                    console.error("[clips-tray] open logs failed:", err);
+                  });
+                }}
               >
-                <IconDownload size={15} stroke={1.9} />
-                Export 5 min
+                <IconFolderOpen size={15} stroke={1.9} />
+                Open logs
               </button>
+            }
+          />
+        </DesktopSettingsGroup>
+      </div>
+    );
+  }
+
+  function renderRecordingSettings() {
+    return (
+      <div className="settings-tab-content">
+        <DesktopSettingsGroup
+          title="Permissions"
+          description="Clips needs access to capture your screen, camera, and microphone."
+        >
+          <div className="settings-group-inset">
+            <ReadinessPanel
+              mode="screen-camera"
+              cameraOn={true}
+              micOn={true}
+              includeVoicePaste={voiceEnabled}
+              includeFnMonitoring={fnShortcutSelected}
+              open={readinessOpen}
+              onOpenChange={setReadinessOpen}
+              onOpenPermission={openPrivacySettings}
+            />
+          </div>
+        </DesktopSettingsGroup>
+
+        <DesktopSettingsGroup
+          title="Capture"
+          description="Choose how recordings are saved and how the tray opens them."
+        >
+          <DesktopSettingsRow
+            label="Rewind"
+            description={rewindStatusPresentation.title}
+            control={
               <button
                 type="button"
                 className="secondary"
-                onClick={openScreenMemoryFolder}
+                onClick={() => onOpenRewind?.()}
               >
-                <IconFolderOpen size={15} stroke={1.9} />
-                Open folder
+                Open Rewind settings
               </button>
+            }
+          />
+          <DesktopSettingsRow
+            label="Clip Drafts"
+            description="Open local recordings that were kept after an upload issue."
+            control={
               <button
                 type="button"
                 className="secondary"
-                onClick={clearScreenMemory}
-                disabled={screenMemoryBusy || screenMemorySegments.length === 0}
+                onClick={openClipDraftsFolder}
               >
-                <IconTrash size={15} stroke={1.9} />
-                Clear Rewind
+                <IconFolderOpen size={15} stroke={1.9} />
+                Open Clip Drafts
               </button>
-            </div>
-            <details
-              className="setup-advanced"
-              open={rewindEgressOpen}
-              onToggle={(event) => {
-                const open = event.currentTarget.open;
-                setRewindEgressOpen(open);
-                if (open) refreshRewindEgressLog();
-              }}
-            >
-              <summary className="setup-advanced-summary">
-                Agent access log
-              </summary>
-              <div className="setup-advanced-body">
-                <p className="setup-hint">
-                  Every bounded Rewind evidence request is recorded on this Mac
-                  before matching text is returned. Raw media appears only as a
-                  separate private Clip handoff.
-                </p>
-                {rewindEgressEvents.length === 0 ? (
-                  <p className="setup-hint">No evidence requests yet.</p>
-                ) : (
-                  rewindEgressEvents.slice(0, 10).map((event) => (
-                    <details
-                      className="setup-advanced"
-                      key={`${event.requestId}-${event.state}`}
-                    >
-                      <summary className="popover-kv">
-                        <span>
-                          {new Date(event.occurredAt).toLocaleString()} ·{" "}
-                          {event.state}
-                        </span>
-                        <strong>
-                          {event.evidenceCount} item
-                          {event.evidenceCount === 1 ? "" : "s"}
-                        </strong>
-                      </summary>
-                      <div className="setup-advanced-body">
-                        <p className="setup-hint">
-                          <strong>{event.operation ?? "Agent access"}</strong>
-                          {" · "}Request {event.requestId}
-                        </p>
-                        {event.receipt?.evidence?.map((evidence) => (
-                          <p className="setup-hint" key={evidence.id}>
-                            <strong>{evidence.sourceType}</strong>
-                            {evidence.capturedAt
-                              ? ` · ${new Date(evidence.capturedAt).toLocaleTimeString()}`
-                              : ""}
-                            <br />
-                            Evidence {evidence.id} · moment {evidence.momentId}
-                          </p>
-                        ))}
-                        {event.receipt?.frames?.map((frame) => (
-                          <p className="setup-hint" key={frame.timestamp}>
-                            <strong>Local frame</strong>
-                            {` · ${new Date(frame.timestamp).toLocaleTimeString()}`}
-                            <br />
-                            Segment {frame.segmentId}
-                          </p>
-                        ))}
-                        {event.receipt?.mediaInterval ? (
-                          <p className="setup-hint">
-                            <strong>Private Clip range</strong>
-                            {` · ${new Date(event.receipt.mediaInterval.startAt).toLocaleTimeString()}–${new Date(event.receipt.mediaInterval.endAt).toLocaleTimeString()}`}
-                          </p>
-                        ) : null}
-                        {!event.receipt ? (
-                          <p className="setup-hint">
-                            This completion record refers to the prepared
-                            receipt with request ID {event.requestId}.
-                          </p>
-                        ) : null}
-                        {event.error ? (
-                          <p className="setup-warning">{event.error}</p>
-                        ) : null}
-                      </div>
-                    </details>
-                  ))
-                )}
-              </div>
-            </details>
-            {screenMemoryMessage ? (
-              <p
-                className={
-                  screenMemoryMessage.kind === "ok"
-                    ? "setup-success"
-                    : "setup-warning"
+            }
+          >
+            {clipDraftsError ? (
+              <p className="setup-warning">{clipDraftsError}</p>
+            ) : null}
+          </DesktopSettingsRow>
+          <DesktopSettingsRow
+            label="Save recordings locally"
+            description="Keep recordings on this Mac instead of uploading them."
+            control={
+              <select
+                id="local-recording-mode"
+                className="setup-select"
+                value={localRecordingMode}
+                onChange={(event) =>
+                  setLocalRecordingMode(
+                    event.target.value as LocalRecordingMode,
+                  )
                 }
               >
-                {screenMemoryMessage.text}
-              </p>
-            ) : null}
-          </>
-        ) : null}
-      </div>
-
-      <details className="setup-advanced">
-        <summary className="setup-advanced-summary">Advanced recording</summary>
-        <div className="setup-advanced-body">
-          <div className="setup-section">
-            <SettingLabel
-              label="Save recordings locally"
-              hint="Advanced local-only mode. Local recordings save to Movies/Clips and do not upload or create a Clip."
-              htmlFor="local-recording-mode"
-            />
-            <select
-              id="local-recording-mode"
-              className="setup-select"
-              value={localRecordingMode}
-              onChange={(event) =>
-                setLocalRecordingMode(event.target.value as LocalRecordingMode)
-              }
-            >
-              <option value="off">Cloud Clips (default)</option>
-              <option value="composed">One local composed video</option>
-              <option value="separate">
-                Two local files: desktop + camera
-              </option>
-            </select>
-            <p className="setup-hint">
-              Two-file mode records desktop with audio and a raw rectangular
-              camera video with no audio.
-            </p>
-          </div>
-
-          <div className="setup-section">
-            <div className="setup-toggle-row">
-              <SettingLabel
-                label="Screen region guides"
-                hint="Show private rectangle guides over your screen while recording. They stay out of the saved Clip."
-              />
-              <Switch
-                on={regionGuides.enabled}
-                onChange={setRegionGuidesEnabled}
-                label="Show screen region guides while recording"
-              />
-            </div>
-            {regionGuides.enabled && (
-              <div className="setup-toggle-row">
-                <SettingLabel
-                  label="Keep guides on screen even when not recording"
-                  hint="Stays visible at all times so you can frame recordings made with other tools like OBS or QuickTime. Still excluded from every screen recording."
+                <option value="off">Cloud Clips (default)</option>
+                <option value="composed">One local composed video</option>
+                <option value="separate">
+                  Two local files: desktop + camera
+                </option>
+              </select>
+            }
+          />
+          <DesktopSettingsRow
+            label="Screen region guides"
+            description={
+              regionGuideCount === 0
+                ? "Frame recordings with private guides that never enter the saved Clip."
+                : `${regionGuideCount} ${regionGuideCount === 1 ? "rectangle" : "rectangles"} saved.`
+            }
+            extraClassName="settings-row-extra--inline"
+            control={
+              <div className="settings-control-group">
+                <Switch
+                  on={regionGuides.enabled}
+                  onChange={setRegionGuidesEnabled}
+                  label="Show screen region guides while recording"
                 />
+                <button
+                  type="button"
+                  className="secondary"
+                  onClick={openRegionGuideEditor}
+                >
+                  <IconPencil size={15} stroke={1.9} />
+                  Edit preset
+                </button>
+              </div>
+            }
+          >
+            {regionGuides.enabled ? (
+              <>
+                <span>Keep guides visible when you are not recording.</span>
                 <Switch
                   on={regionGuidesAlwaysVisible}
                   onChange={setRegionGuidesAlwaysVisible}
                   label="Keep region guides on screen even when not recording"
                 />
-              </div>
-            )}
-            <div className="setup-button-row">
-              <button
-                type="button"
-                className="secondary"
-                onClick={openRegionGuideEditor}
-              >
-                <IconPencil size={15} stroke={1.9} />
-                Edit preset
-              </button>
-              <button
-                type="button"
-                className="secondary"
-                onClick={clearRegionGuidePreset}
-                disabled={regionGuideCount === 0}
-              >
-                <IconTrash size={15} stroke={1.9} />
-                Clear
-              </button>
-            </div>
-            <p className="setup-hint">
-              {regionGuideCount === 0
-                ? "No guide preset saved yet."
-                : `${regionGuideCount} ${regionGuideCount === 1 ? "rectangle" : "rectangles"} saved.`}
-            </p>
-          </div>
-        </div>
-      </details>
-
-      <div className="setup-section">
-        <SettingLabel
-          label="Start/stop recording shortcut"
-          hint="Optional global shortcut for starting full-screen, region, or camera recordings and stopping the active recording."
-        />
-        <ShortcutRecorder
-          value={recordCustomShortcut}
-          placeholder="Record shortcut"
-          onChange={onRecordCustomShortcutChange}
-        />
-        <p className="setup-hint">
-          Window and browser-tab sources still open Clips first so the picker
-          can use a click.
-        </p>
-      </div>
+                {regionGuideCount > 0 ? (
+                  <button
+                    type="button"
+                    className="settings-text-button"
+                    onClick={clearRegionGuidePreset}
+                  >
+                    Clear saved preset
+                  </button>
+                ) : null}
+              </>
+            ) : null}
+          </DesktopSettingsRow>
+        </DesktopSettingsGroup>
 
-      <div className="setup-section">
-        <SettingLabel
-          label="Open Clips shortcut"
-          hint="Optional extra global shortcut for opening the tray popover. Cmd+Shift+L remains available."
-        />
-        <ShortcutRecorder
-          value={popoverCustomShortcut}
-          placeholder="Record shortcut"
-          onChange={onPopoverCustomShortcutChange}
-        />
-        <p className="setup-hint">
-          Use a modifier combination like Cmd+Shift+K. Leave empty to use only
-          Cmd+Shift+L.
-        </p>
-        {shortcutRegistrationError ? (
-          <p className="setup-warning">{shortcutRegistrationError}</p>
-        ) : null}
+        <DesktopSettingsGroup
+          title="Keyboard shortcuts"
+          description="Optional global shortcuts for recording and opening the tray."
+        >
+          <DesktopSettingsRow
+            label="Start/stop recording"
+            description="Start full-screen, region, or camera recordings and stop the active recording."
+            control={
+              <ShortcutRecorder
+                value={recordCustomShortcut}
+                placeholder="Record shortcut"
+                onChange={onRecordCustomShortcutChange}
+              />
+            }
+          />
+          <DesktopSettingsRow
+            label="Open Clips"
+            description="Open the tray popover; Cmd+Shift+L remains available."
+            control={
+              <ShortcutRecorder
+                value={popoverCustomShortcut}
+                placeholder="Record shortcut"
+                onChange={onPopoverCustomShortcutChange}
+              />
+            }
+          >
+            <>
+              <span>Leave this empty to use only Cmd+Shift+L.</span>
+              {shortcutRegistrationError ? (
+                <span className="setup-warning">
+                  {shortcutRegistrationError}
+                </span>
+              ) : null}
+            </>
+          </DesktopSettingsRow>
+        </DesktopSettingsGroup>
       </div>
+    );
+  }
 
-      <div className="setup-section-heading">Meetings</div>
-
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
+  function renderMeetingSettings() {
+    return (
+      <div className="settings-tab-content">
+        <DesktopSettingsGroup
+          title="Meeting notes"
+          description="Use calendar meetings to show reminders and start live transcription."
+        >
+          <DesktopSettingsRow
             label="Meeting notes"
-            hint="Use calendar meetings to show a notes widget and start live transcription."
-          />
-          <Switch
-            on={meetingsEnabled}
-            onChange={setMeetingsEnabled}
-            label="Enable meeting notes"
+            description="Show the meeting widget and enable live notes."
+            control={
+              <Switch
+                on={meetingsEnabled}
+                onChange={setMeetingsEnabled}
+                label="Enable meeting notes"
+              />
+            }
           />
-        </div>
-      </div>
-
-      {meetingsEnabled ? (
-        <>
-          <div className="setup-section">
-            <SettingLabel
-              label="Meeting transcription"
-              hint="Choose whether Clips asks first, starts automatically, or waits for manual start."
-              htmlFor="meeting-transcription-mode"
-            />
-            <select
-              id="meeting-transcription-mode"
-              className="setup-select"
-              value={meetingTranscriptionMode}
-              onChange={(event) =>
-                setMeetingTranscriptionMode(
-                  event.target.value as MeetingTranscriptionMode,
-                )
-              }
-            >
-              <option value="ask">Ask at meeting time</option>
-              <option value="auto">Auto-start during meeting times</option>
-              <option value="manual">Manual only</option>
-            </select>
-            <p className="setup-hint">
-              Auto-start still shows the notes pill while transcription is
-              active.
-            </p>
-          </div>
-
-          <div className="setup-section">
-            <div className="setup-toggle-row">
-              <SettingLabel
-                label="Meeting widget"
-                hint="Show the on-screen meeting widget near calendar start times, even when macOS notifications are hidden."
+          {meetingsEnabled ? (
+            <>
+              <DesktopSettingsRow
+                label="Meeting transcription"
+                description="Ask first, start automatically, or wait for a manual start."
+                control={
+                  <select
+                    id="meeting-transcription-mode"
+                    className="setup-select"
+                    value={meetingTranscriptionMode}
+                    onChange={(event) =>
+                      setMeetingTranscriptionMode(
+                        event.target.value as MeetingTranscriptionMode,
+                      )
+                    }
+                  >
+                    <option value="ask">Ask at meeting time</option>
+                    <option value="auto">
+                      Auto-start during meeting times
+                    </option>
+                    <option value="manual">Manual only</option>
+                  </select>
+                }
               />
-              <Switch
-                on={showMeetingWidgetEnabled}
-                onChange={setShowMeetingWidgetEnabled}
-                label="Show meeting widget"
+              <DesktopSettingsRow
+                label="Meeting widget"
+                description="Show the on-screen meeting widget near calendar start times."
+                control={
+                  <Switch
+                    on={showMeetingWidgetEnabled}
+                    onChange={setShowMeetingWidgetEnabled}
+                    label="Show meeting widget"
+                  />
+                }
               />
-            </div>
-          </div>
-        </>
-      ) : null}
-
-      <div className="setup-section-heading">Whisper</div>
+            </>
+          ) : null}
+        </DesktopSettingsGroup>
+      </div>
+    );
+  }
 
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
+  function renderDictationSettings() {
+    return (
+      <div className="settings-tab-content">
+        <DesktopSettingsGroup
+          title="Local transcription"
+          description="Use Whisper for offline transcription without an API key."
+        >
+          <DesktopSettingsRow
             label="Whisper model"
-            hint="Local AI model for offline transcription (dictation and meetings). No API key required."
-          />
-          <Switch
-            on={whisperModelEnabled}
-            onChange={whisper.setEnabled}
-            label="Enable Whisper model"
+            description="Enable the local model for dictation and meetings."
+            control={
+              <Switch
+                on={whisperModelEnabled}
+                onChange={whisper.setEnabled}
+                label="Enable Whisper model"
+              />
+            }
           />
-        </div>
-        <SettingLabel
-          label="Model"
-          hint="Larger models can improve transcription accuracy but use more storage and may run more slowly."
-          htmlFor="whisper-model"
-        />
-        <select
-          id="whisper-model"
-          className="setup-select"
-          value={whisperModelId}
-          onChange={(event) => whisper.setModelId(event.target.value)}
-          disabled={
-            whisperModels.length === 0 || whisperStatus?.state === "downloading"
-          }
-        >
-          {whisperModels.map((model) => (
-            <option key={model.id} value={model.id}>
-              {model.title} · {model.sizeMb} MB — {model.description}
-            </option>
-          ))}
-        </select>
-        {selectedWhisperModel ? (
-          <p className="setup-hint">{selectedWhisperModel.description}</p>
-        ) : null}
-        <WhisperModelStatusRow
-          status={whisperStatus}
-          enabled={whisperModelEnabled}
-          onDownload={whisper.triggerDownload}
-        />
-        {deletableModels.length > 0 ? (
-          <div className="whisper-other-models">
-            <p className="setup-hint">Other downloaded models</p>
-            {deletableModels.map((model) => (
-              <div key={model.id} className="whisper-other-model-row">
-                <span className="whisper-other-model-name">
-                  {model.title} &middot; {model.sizeMb} MB
-                </span>
-                <button
-                  type="button"
-                  className="whisper-delete-btn"
-                  onClick={() => whisper.deleteModel(model.id)}
-                >
-                  <IconTrash size={13} />
-                  Delete
-                </button>
-              </div>
-            ))}
-          </div>
-        ) : null}
-      </div>
-
-      <div className="setup-section-heading">Dictation</div>
+          <DesktopSettingsRow
+            label="Model"
+            description={
+              selectedWhisperModel?.description ??
+              "Choose the downloaded model used for offline transcription."
+            }
+            control={
+              <select
+                id="whisper-model"
+                className="setup-select"
+                value={whisperModelId}
+                onChange={(event) => whisper.setModelId(event.target.value)}
+                disabled={
+                  whisperModels.length === 0 ||
+                  whisperStatus?.state === "downloading"
+                }
+              >
+                {whisperModels.map((model) => (
+                  <option key={model.id} value={model.id}>
+                    {model.title} · {model.sizeMb} MB — {model.description}
+                  </option>
+                ))}
+              </select>
+            }
+          >
+            <>
+              <WhisperModelStatusRow
+                status={whisperStatus}
+                enabled={whisperModelEnabled}
+                onDownload={whisper.triggerDownload}
+              />
+              {deletableModels.length > 0 ? (
+                <div className="whisper-other-models">
+                  <p className="setup-hint">Other downloaded models</p>
+                  {deletableModels.map((model) => (
+                    <div key={model.id} className="whisper-other-model-row">
+                      <span className="whisper-other-model-name">
+                        {model.title} &middot; {model.sizeMb} MB
+                      </span>
+                      <button
+                        type="button"
+                        className="whisper-delete-btn"
+                        onClick={() => whisper.deleteModel(model.id)}
+                      >
+                        <IconTrash size={13} />
+                        Delete
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+            </>
+          </DesktopSettingsRow>
+        </DesktopSettingsGroup>
 
-      <div className="setup-section">
-        <div className="setup-toggle-row">
-          <SettingLabel
+        <DesktopSettingsGroup
+          title="Voice dictation"
+          description="Speak to type anywhere on your Mac."
+        >
+          <DesktopSettingsRow
             label="Voice dictation"
-            hint="Speak to type anywhere on your Mac. Turn off to disable globally and remove the keyboard shortcuts."
-          />
-          <Switch
-            on={voiceEnabled}
-            onChange={setVoiceEnabled}
-            label="Enable voice dictation"
+            description="Enable the global dictation shortcut."
+            control={
+              <Switch
+                on={voiceEnabled}
+                onChange={setVoiceEnabled}
+                label="Enable voice dictation"
+              />
+            }
           />
-        </div>
-      </div>
-
-      {voiceEnabled ? (
-        <>
-          <div className="setup-section">
-            <SettingLabel
-              label="Provider"
-              hint="Choose free on-device dictation, Builder.io cleanup, or a provider key you own."
-              htmlFor="voice-provider"
-            />
-            <select
-              id="voice-provider"
-              className="setup-select"
-              value={selectedMode}
-              onChange={(event) =>
-                selectProviderMode(event.target.value as VoiceProviderMode)
-              }
-            >
-              <option value="native">On-device (free, fast)</option>
-              <option value="whisper" disabled={!whisperModelEnabled}>
-                {whisperModelEnabled
-                  ? "Local Whisper (offline AI)"
-                  : "Local Whisper — enable Whisper model first"}
-              </option>
-              <option value="builder">Builder.io</option>
-              <option value="byok">Add your own key</option>
-            </select>
-            <p className="setup-hint">{providerHint[selectedMode]}</p>
-            {selectedMode === "whisper" && !whisperModelEnabled ? (
-              <p className="setup-warning">
-                Whisper model is disabled. Enable it in the Whisper section
-                above.
-              </p>
-            ) : null}
-            {providerWarning ? (
-              <p className="setup-warning">{providerWarning}</p>
-            ) : null}
-            {selectedMode === "builder" && !providerStatus?.builder ? (
-              <button
-                type="button"
-                className="secondary"
-                onClick={connectBuilder}
+          {voiceEnabled ? (
+            <>
+              <DesktopSettingsRow
+                label="Provider"
+                description={providerHint[selectedMode]}
+                control={
+                  <div className="settings-control-group">
+                    <select
+                      id="voice-provider"
+                      className="setup-select"
+                      value={selectedMode}
+                      onChange={(event) =>
+                        selectProviderMode(
+                          event.target.value as VoiceProviderMode,
+                        )
+                      }
+                    >
+                      <option value="native">On-device (free, fast)</option>
+                      <option value="whisper" disabled={!whisperModelEnabled}>
+                        {whisperModelEnabled
+                          ? "Local Whisper (offline AI)"
+                          : "Local Whisper — enable Whisper model first"}
+                      </option>
+                      <option value="builder">Builder.io</option>
+                      <option value="byok">Add your own key</option>
+                    </select>
+                    {selectedMode === "builder" && !providerStatus?.builder ? (
+                      <button
+                        type="button"
+                        className="secondary"
+                        onClick={connectBuilder}
+                      >
+                        Use Builder.io
+                      </button>
+                    ) : null}
+                  </div>
+                }
               >
-                Use Builder.io
-              </button>
-            ) : null}
-          </div>
+                {providerWarning ||
+                (selectedMode === "whisper" && !whisperModelEnabled) ? (
+                  <p className="setup-warning">
+                    {providerWarning ??
+                      "Whisper model is disabled. Enable it in Local transcription."}
+                  </p>
+                ) : null}
+              </DesktopSettingsRow>
+
+              {selectedMode === "byok" ? (
+                <>
+                  <DesktopSettingsRow
+                    label="Key provider"
+                    description="Choose the provider key used for cleanup."
+                    control={
+                      <select
+                        id="voice-byok-provider"
+                        className="setup-select"
+                        value={byokProvider}
+                        onChange={(event) => {
+                          setApiKeyMessage(null);
+                          onVoiceProviderChange(
+                            event.target.value as ByokVoiceProvider,
+                          );
+                        }}
+                      >
+                        <option value="gemini">
+                          Google Gemini (recommended)
+                        </option>
+                        <option value="groq">Groq</option>
+                      </select>
+                    }
+                  />
+                  <DesktopSettingsRow
+                    label="API key"
+                    description={
+                      providerStatus?.[byokProvider]
+                        ? `${labelForByokProvider(byokProvider)} key is set. Paste a new key to rotate it.`
+                        : `Save a ${keyForByokProvider(byokProvider)} key for cleanup.`
+                    }
+                    control={
+                      <div className="settings-control-group settings-control-group--wide">
+                        <input
+                          type="password"
+                          value={apiKeyValue}
+                          onChange={(event) =>
+                            setApiKeyValue(event.target.value)
+                          }
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter") {
+                              event.preventDefault();
+                              saveApiKey();
+                            }
+                          }}
+                          placeholder={
+                            providerStatus?.[byokProvider]
+                              ? "Paste to rotate"
+                              : `Paste ${keyForByokProvider(byokProvider)}`
+                          }
+                          className="settings-url-input"
+                        />
+                        <button
+                          type="button"
+                          className="secondary"
+                          onClick={saveApiKey}
+                          disabled={!apiKeyValue.trim() || apiKeySaving}
+                        >
+                          {apiKeySaving
+                            ? "Saving..."
+                            : providerStatus?.[byokProvider]
+                              ? "Rotate"
+                              : "Save"}
+                        </button>
+                      </div>
+                    }
+                  >
+                    {apiKeyMessage ? (
+                      <p
+                        className={
+                          apiKeyMessage.kind === "ok"
+                            ? "setup-success"
+                            : "setup-warning"
+                        }
+                      >
+                        {apiKeyMessage.text}
+                      </p>
+                    ) : null}
+                  </DesktopSettingsRow>
+                </>
+              ) : null}
 
-          {selectedMode === "byok" ? (
-            <div className="setup-section">
-              <SettingLabel
-                label="Key provider"
-                hint="Choose which provider key to use for cleanup."
-                htmlFor="voice-byok-provider"
-              />
-              <select
-                id="voice-byok-provider"
-                className="setup-select"
-                value={byokProvider}
-                onChange={(event) => {
-                  setApiKeyMessage(null);
-                  onVoiceProviderChange(
-                    event.target.value as ByokVoiceProvider,
-                  );
-                }}
-              >
-                <option value="gemini">Google Gemini (recommended)</option>
-                <option value="groq">Groq</option>
-              </select>
-              <div className="setup-key-row">
-                <input
-                  type="password"
-                  value={apiKeyValue}
-                  onChange={(event) => setApiKeyValue(event.target.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter") {
-                      event.preventDefault();
-                      saveApiKey();
+              {selectedMode !== "native" && selectedMode !== "whisper" ? (
+                <DesktopSettingsRow
+                  label="Custom instructions"
+                  description="Guide casing, names, punctuation, and terms of art for LLM cleanup."
+                  stacked
+                  control={
+                    <textarea
+                      id="voice-instructions"
+                      className="setup-textarea"
+                      rows={4}
+                      value={voiceInstructions}
+                      onChange={(event) =>
+                        onVoiceInstructionsChange(event.target.value)
+                      }
+                      placeholder="Example: keep it casual and preserve technical terms exactly."
+                    />
+                  }
+                />
+              ) : null}
+
+              <DesktopSettingsRow
+                label="Shortcut"
+                description={shortcutHint[voiceShortcut]}
+                control={
+                  <select
+                    id="voice-shortcut"
+                    className="setup-select"
+                    value={voiceShortcut}
+                    onChange={(event) =>
+                      onVoiceShortcutChange(
+                        event.target.value as VoiceShortcutPreference,
+                      )
                     }
-                  }}
-                  placeholder={
-                    providerStatus?.[byokProvider]
-                      ? "Key is saved — paste to rotate"
-                      : `Paste ${keyForByokProvider(byokProvider)} here`
+                  >
+                    <option value="cmd-shift-space">Cmd+Shift+Space</option>
+                    <option value="ctrl-shift-space">Ctrl+Shift+Space</option>
+                    <option value="custom">Custom shortcut</option>
+                    <option value="fn">
+                      Fn (globe, needs Input Monitoring)
+                    </option>
+                    <option value="both">All shortcuts (includes Fn)</option>
+                  </select>
+                }
+              />
+              {voiceShortcut === "custom" ? (
+                <DesktopSettingsRow
+                  label="Custom shortcut"
+                  description="Record the key combination used for dictation."
+                  control={
+                    <ShortcutRecorder
+                      value={voiceCustomShortcut}
+                      placeholder="Record voice shortcut"
+                      onChange={onVoiceCustomShortcutChange}
+                    />
                   }
-                  className="setup-key-input"
                 />
-                <button
-                  type="button"
-                  className="secondary setup-key-save"
-                  onClick={saveApiKey}
-                  disabled={!apiKeyValue.trim() || apiKeySaving}
-                >
-                  {apiKeySaving
-                    ? "Saving..."
-                    : providerStatus?.[byokProvider]
-                      ? "Rotate"
-                      : "Save"}
-                </button>
-              </div>
-              {providerStatus?.[byokProvider] ? (
-                <p className="setup-hint">
-                  {labelForByokProvider(byokProvider)} key is set.
-                </p>
               ) : null}
-              {apiKeyMessage ? (
-                <p
-                  className={
-                    apiKeyMessage.kind === "ok"
-                      ? "setup-success"
-                      : "setup-warning"
+              {isMacPlatform() && fnShortcutSelected ? (
+                <DesktopSettingsRow
+                  label="Input Monitoring"
+                  description="Required when the Fn / globe shortcut is enabled."
+                  control={
+                    <button
+                      type="button"
+                      className="secondary"
+                      onClick={() => openPrivacySettings("input-monitoring")}
+                    >
+                      Open settings
+                    </button>
                   }
-                >
-                  {apiKeyMessage.text}
-                </p>
+                />
               ) : null}
-            </div>
-          ) : null}
-
-          {selectedMode !== "native" && selectedMode !== "whisper" ? (
-            <div className="setup-section">
-              <SettingLabel
-                label="Custom instructions"
-                hint="Included with LLM cleanup/transcription. Use this for casing, names, punctuation, tone, or terms of art."
-                htmlFor="voice-instructions"
-              />
-              <textarea
-                id="voice-instructions"
-                className="setup-textarea"
-                rows={4}
-                value={voiceInstructions}
-                onChange={(event) =>
-                  onVoiceInstructionsChange(event.target.value)
+              <DesktopSettingsRow
+                label="Mode"
+                description={modeHint[voiceMode]}
+                control={
+                  <select
+                    id="voice-mode"
+                    className="setup-select"
+                    value={voiceMode}
+                    onChange={(event) =>
+                      onVoiceModeChange(event.target.value as VoiceMode)
+                    }
+                  >
+                    <option value="push-to-talk">Hold to dictate</option>
+                    <option value="toggle">
+                      Press to start, press to stop
+                    </option>
+                  </select>
                 }
-                placeholder="Example: keep it casual, spell Builder.io with a dot, and preserve technical terms exactly."
               />
-              <p className="setup-hint">
-                These instructions are sent only when an LLM-based provider is
-                selected.
-              </p>
-            </div>
+            </>
           ) : null}
+        </DesktopSettingsGroup>
+      </div>
+    );
+  }
 
-          <div className="setup-section">
-            <SettingLabel
-              label="Shortcut"
-              hint="The key combination that triggers voice dictation."
-              htmlFor="voice-shortcut"
-            />
-            <select
-              id="voice-shortcut"
-              className="setup-select"
-              value={voiceShortcut}
-              onChange={(event) =>
-                onVoiceShortcutChange(
-                  event.target.value as VoiceShortcutPreference,
-                )
-              }
+  const settingsTabs: Array<{
+    id: SettingsTabId;
+    label: string;
+    group: string;
+  }> = [
+    { id: "general", label: "General", group: "Personal" },
+    { id: "recording", label: "Recording", group: "Personal" },
+    { id: "meetings", label: "Meetings", group: "Workflow" },
+    { id: "dictation", label: "Dictation", group: "Workflow" },
+  ];
+  const activeSettingsTab =
+    settingsTabs.find((tab) => tab.id === settingsTab) ?? settingsTabs[0];
+
+  function renderSettingsTab() {
+    switch (settingsTab) {
+      case "recording":
+        return renderRecordingSettings();
+      case "meetings":
+        return renderMeetingSettings();
+      case "dictation":
+        return renderDictationSettings();
+      case "general":
+      default:
+        return renderGeneralSettings();
+    }
+  }
+
+  return (
+    <div className="setup settings-page">
+      <div
+        className="setup-header settings-page-header"
+        onMouseDown={handlePopoverHeaderMouseDown}
+      >
+        {onCancel ? (
+          <button
+            type="button"
+            className="setup-back"
+            onClick={onCancel}
+            aria-label="Back"
+          >
+            <IconArrowLeft size={18} stroke={1.75} />
+          </button>
+        ) : null}
+        <div className="settings-page-title">
+          <h2>Settings</h2>
+          <p>Clips desktop preferences</p>
+        </div>
+      </div>
+
+      <div className="settings-page-layout">
+        <nav className="settings-nav" aria-label="Settings sections">
+          {settingsTabs.map((tab, index) => (
+            <div
+              key={tab.id}
+              className={`settings-nav-group ${
+                index === 0 || settingsTabs[index - 1]?.group !== tab.group
+                  ? "settings-nav-group--start"
+                  : ""
+              }`}
             >
-              <option value="cmd-shift-space">Cmd+Shift+Space</option>
-              <option value="ctrl-shift-space">Ctrl+Shift+Space</option>
-              <option value="custom">Custom shortcut</option>
-              <option value="fn">Fn (globe, needs Input Monitoring)</option>
-              <option value="both">All shortcuts (includes Fn)</option>
-            </select>
-            {voiceShortcut === "custom" ? (
-              <ShortcutRecorder
-                value={voiceCustomShortcut}
-                placeholder="Record voice shortcut"
-                onChange={onVoiceCustomShortcutChange}
-              />
-            ) : null}
-            <p className="setup-hint">{shortcutHint[voiceShortcut]}</p>
-            {isMacPlatform() && fnShortcutSelected ? (
+              {index === 0 || settingsTabs[index - 1]?.group !== tab.group ? (
+                <div className="settings-nav-group-label">{tab.group}</div>
+              ) : null}
               <button
                 type="button"
-                className="secondary"
-                onClick={() => openPrivacySettings("input-monitoring")}
+                className={`settings-nav-button ${settingsTab === tab.id ? "is-active" : ""}`}
+                aria-current={settingsTab === tab.id ? "page" : undefined}
+                onClick={() => setSettingsTab(tab.id)}
               >
-                Open Input Monitoring
+                {tab.label}
               </button>
-            ) : null}
-          </div>
-
-          <div className="setup-section">
-            <SettingLabel
-              label="Mode"
-              hint="Whether you hold the shortcut while speaking or toggle it on and off."
-              htmlFor="voice-mode"
-            />
-            <select
-              id="voice-mode"
-              className="setup-select"
-              value={voiceMode}
-              onChange={(event) =>
-                onVoiceModeChange(event.target.value as VoiceMode)
-              }
-            >
-              <option value="push-to-talk">Hold to dictate</option>
-              <option value="toggle">Press to start, press to stop</option>
-            </select>
-            <p className="setup-hint">{modeHint[voiceMode]}</p>
+            </div>
+          ))}
+        </nav>
+        <main className="settings-page-content" tabIndex={-1}>
+          <div className="settings-tab-heading">
+            <h3>{activeSettingsTab.label}</h3>
+            <p>
+              {settingsTab === "general"
+                ? "Connection, app behavior, updates, and diagnostics."
+                : settingsTab === "recording"
+                  ? "Capture behavior, permissions, drafts, and shortcuts."
+                  : settingsTab === "meetings"
+                    ? "Meeting reminders and live transcription behavior."
+                    : "Local transcription and voice dictation controls."}
+            </p>
           </div>
-        </>
-      ) : null}
+          {renderSettingsTab()}
+        </main>
+      </div>
+    </div>
+  );
+}
 
-      <div className="setup-section-heading">Debug</div>
+function DesktopSettingsGroup({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="settings-group">
+      <header className="settings-group-header">
+        <h4>{title}</h4>
+        {description ? <p>{description}</p> : null}
+      </header>
+      <div className="settings-group-body">{children}</div>
+    </section>
+  );
+}
 
-      <div className="setup-account setup-account--no-border">
-        <button
-          type="button"
-          className="link-button"
-          onClick={() => {
-            invoke("open_logs").catch((err) => {
-              console.error("[clips-tray] open logs failed:", err);
-            });
-          }}
-          style={{ display: "flex", alignItems: "center", gap: 6 }}
-        >
-          <IconFolderOpen size={14} />
-          Open logs
-        </button>
+function DesktopSettingsRow({
+  label,
+  description,
+  control,
+  children,
+  extraClassName,
+  stacked = false,
+}: {
+  label: string;
+  description: ReactNode;
+  control?: ReactNode;
+  children?: ReactNode;
+  extraClassName?: string;
+  stacked?: boolean;
+}) {
+  return (
+    <div className={`settings-row ${stacked ? "settings-row--stacked" : ""}`}>
+      <div className="settings-row-copy">
+        <strong>{label}</strong>
+        <span>{description}</span>
       </div>
-      {signedInAs && onSignOut ? (
-        <div className="setup-account">
-          <span className="setup-account-email">{signedInAs}</span>
-          <button
-            type="button"
-            className="link-button"
-            onClick={onSignOut}
-            style={{ background: "transparent", border: "none" }}
-          >
-            Sign out
-          </button>
+      {control ? <div className="settings-row-control">{control}</div> : null}
+      {children ? (
+        <div className={`settings-row-extra ${extraClassName ?? ""}`}>
+          {children}
         </div>
       ) : null}
     </div>