@agent-native/core 0.161.16 → 0.161.20

package/corpus/templates/clips/desktop/src/overlays/onboarding.tsx

@@ -1,314 +0,0 @@
-import { IconCircleCheck, IconCircleOff } from "@tabler/icons-react";
-import { invoke } from "@tauri-apps/api/core";
-import { open as openExternal } from "@tauri-apps/plugin-shell";
-import { useEffect, useState } from "react";
-
-import { isMacPlatform } from "../lib/platform";
-
-type PermissionPane =
-  | "microphone"
-  | "speech"
-  | "accessibility"
-  | "input-monitoring";
-
-type PermissionStatuses = {
-  screen: boolean;
-  camera: boolean;
-  microphone: boolean;
-  speech: boolean;
-  accessibility: boolean;
-  inputMonitoring: boolean;
-};
-
-const PERMISSION_CARDS: Array<{
-  pane: PermissionPane;
-  key: keyof PermissionStatuses;
-  name: string;
-  desc: string;
-}> = [
-  {
-    pane: "microphone",
-    key: "microphone",
-    name: "Microphone",
-    desc: "Needed to hear you for dictation and meeting transcripts.",
-  },
-  {
-    pane: "speech",
-    key: "speech",
-    name: "Speech Recognition",
-    desc: "Turns your voice into text on-device.",
-  },
-  {
-    pane: "accessibility",
-    key: "accessibility",
-    name: "Accessibility",
-    desc: "Lets Clips paste dictated text into other apps.",
-  },
-  {
-    pane: "input-monitoring",
-    key: "inputMonitoring",
-    name: "Input Monitoring",
-    desc: "Only needed for the hold-Fn dictation shortcut.",
-  },
-];
-
-// Fallback deep-links when the native `open_macos_privacy_settings` command
-// fails — same URLs the main app window uses.
-const MACOS_PRIVACY_URLS: Record<PermissionPane, string> = {
-  microphone:
-    "x-apple.systempreferences:com.apple.settings.PrivacySecurity.extension?Privacy_Microphone",
-  speech:
-    "x-apple.systempreferences:com.apple.settings.PrivacySecurity.extension?Privacy_SpeechRecognition",
-  accessibility:
-    "x-apple.systempreferences:com.apple.settings.PrivacySecurity.extension?Privacy_Accessibility",
-  "input-monitoring":
-    "x-apple.systempreferences:com.apple.settings.PrivacySecurity.extension?Privacy_ListenEvent",
-};
-
-function openPermissionSettings(pane: PermissionPane): void {
-  invoke("open_macos_privacy_settings", { pane }).catch(() => {
-    openExternal(MACOS_PRIVACY_URLS[pane]).catch((err) => {
-      console.error("[onboarding] open privacy settings failed", err);
-    });
-  });
-}
-
-/**
- * First-launch overlay. Full-screen with a solid dark background — NOT
- * transparent like countdown/finalizing.
- *
- * Two steps:
- *   1. Feature selection — three cards with checkboxes (all checked by
- *      default).
- *   2. Permissions (macOS, when Voice Dictation or Meetings is enabled) —
- *      live permission-status cards polled every 2s so they flip to granted
- *      as the user works through System Settings. Never blocks: the primary
- *      button always continues.
- *
- * Finishing calls `set_feature_config` with the chosen features +
- * `onboardingComplete: true`, then opens the popover via `show_popover`.
- */
-export function Onboarding() {
-  const [clips, setClips] = useState(true);
-  const [meetings, setMeetings] = useState(true);
-  const [voice, setVoice] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-  const [step, setStep] = useState<"features" | "permissions">("features");
-  const [statuses, setStatuses] = useState<PermissionStatuses | null>(null);
-
-  const needsPermissionsStep = (voice || meetings) && isMacPlatform();
-
-  useEffect(() => {
-    if (step !== "permissions") return;
-    let cancelled = false;
-    const check = () => {
-      invoke<PermissionStatuses>("check_permission_statuses")
-        .then((next) => {
-          if (!cancelled) setStatuses(next);
-        })
-        .catch(() => {
-          // Command unavailable — leave statuses null (cards show no status).
-        });
-    };
-    check();
-    const id = setInterval(check, 2_000);
-    return () => {
-      cancelled = true;
-      clearInterval(id);
-    };
-  }, [step]);
-
-  async function finish() {
-    if (submitting) return;
-    setSubmitting(true);
-    try {
-      await invoke("set_feature_config", {
-        config: {
-          clipsEnabled: clips,
-          meetingsEnabled: meetings,
-          voiceEnabled: voice,
-          voiceCleanupEnabled: true,
-          launchAtLoginEnabled: true,
-          autoHidePopoverEnabled: false,
-          meetingTranscriptionMode: "ask",
-          showMeetingWidgetEnabled: true,
-          showInScreenCapture: false,
-          onboardingComplete: true,
-        },
-      });
-      await invoke("show_popover");
-      // Close the onboarding window itself — show_popover only opens the
-      // popover, it doesn't know an onboarding window exists to dismiss.
-      await invoke("hide_onboarding_window");
-    } catch (err) {
-      console.error(
-        "[onboarding] set_feature_config / show_popover failed",
-        err,
-      );
-      setSubmitting(false);
-    }
-  }
-
-  function handleFeaturesContinue() {
-    if (needsPermissionsStep) {
-      setStep("permissions");
-      return;
-    }
-    void finish();
-  }
-
-  if (step === "permissions") {
-    const allGranted =
-      statuses !== null && PERMISSION_CARDS.every((card) => statuses[card.key]);
-    return (
-      <div className="onboarding-root">
-        <div className="onboarding-card">
-          <h1 className="onboarding-title">Permissions</h1>
-          <p className="onboarding-subtitle">
-            Grant these in System Settings — Clips updates automatically
-          </p>
-
-          <div className="onboarding-features">
-            {PERMISSION_CARDS.map((card) => {
-              const granted = statuses ? statuses[card.key] : null;
-              return (
-                <div
-                  className="onboarding-feature"
-                  key={card.pane}
-                  style={{ cursor: "default" }}
-                >
-                  <span
-                    aria-label={
-                      granted === null
-                        ? undefined
-                        : granted
-                          ? "Granted"
-                          : "Not granted"
-                    }
-                    style={{
-                      display: "inline-flex",
-                      flexShrink: 0,
-                      marginTop: 1,
-                      color: granted ? "#4ade80" : "#a3a3a3",
-                    }}
-                  >
-                    {granted ? (
-                      <IconCircleCheck size={18} stroke={2} />
-                    ) : (
-                      <IconCircleOff size={18} stroke={2} />
-                    )}
-                  </span>
-                  <div className="onboarding-feature-text">
-                    <span className="onboarding-feature-name">{card.name}</span>
-                    <span className="onboarding-feature-desc">{card.desc}</span>
-                  </div>
-                  {!granted ? (
-                    <button
-                      type="button"
-                      onClick={() => openPermissionSettings(card.pane)}
-                      style={{
-                        marginLeft: "auto",
-                        alignSelf: "center",
-                        flexShrink: 0,
-                        padding: "5px 10px",
-                        borderRadius: 8,
-                        border: "1px solid rgba(255, 255, 255, 0.15)",
-                        background: "rgba(255, 255, 255, 0.08)",
-                        color: "#f5f5f5",
-                        fontSize: 12,
-                        fontWeight: 500,
-                        cursor: "pointer",
-                      }}
-                    >
-                      Open
-                    </button>
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
-
-          <button
-            className="onboarding-cta"
-            onClick={() => void finish()}
-            disabled={submitting}
-          >
-            {submitting
-              ? "Setting up..."
-              : allGranted
-                ? "Get Started"
-                : "Continue anyway"}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="onboarding-root">
-      <div className="onboarding-card">
-        <h1 className="onboarding-title">Welcome to Clips</h1>
-        <p className="onboarding-subtitle">Choose your features</p>
-
-        <div className="onboarding-features">
-          <label className="onboarding-feature">
-            <input
-              type="checkbox"
-              checked={clips}
-              onChange={(e) => setClips(e.target.checked)}
-              className="onboarding-checkbox"
-            />
-            <div className="onboarding-feature-text">
-              <span className="onboarding-feature-name">Screen Recording</span>
-              <span className="onboarding-feature-desc">
-                Record your screen, camera, or both
-              </span>
-            </div>
-          </label>
-
-          <label className="onboarding-feature">
-            <input
-              type="checkbox"
-              checked={meetings}
-              onChange={(e) => setMeetings(e.target.checked)}
-              className="onboarding-checkbox"
-            />
-            <div className="onboarding-feature-text">
-              <span className="onboarding-feature-name">Meeting Notes</span>
-              <span className="onboarding-feature-desc">
-                AI-powered meeting transcription and note enhancement
-              </span>
-            </div>
-          </label>
-
-          <label className="onboarding-feature">
-            <input
-              type="checkbox"
-              checked={voice}
-              onChange={(e) => setVoice(e.target.checked)}
-              className="onboarding-checkbox"
-            />
-            <div className="onboarding-feature-text">
-              <span className="onboarding-feature-name">Voice Dictation</span>
-              <span className="onboarding-feature-desc">
-                Speak to type anywhere on your Mac
-              </span>
-            </div>
-          </label>
-        </div>
-
-        <button
-          className="onboarding-cta"
-          onClick={handleFeaturesContinue}
-          disabled={submitting}
-        >
-          {submitting
-            ? "Setting up..."
-            : needsPermissionsStep
-              ? "Continue"
-              : "Get Started"}
-        </button>
-      </div>
-    </div>
-  );
-}