feat: load plugin frontends at runtime and remove plugin ids from the shell

plugins/ai/src/frontend/AiAssistantStep.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { Check } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { setAssistantEnabledForUser } from "./settings/AiUserSettings";
+
+/**
+ * Asks once, plainly.
+ *
+ * "Leave it off" is preselected and applied on mount, so someone who clicks
+ * straight through ends up without the assistant rather than with it. Both
+ * options are described in the same flat register and neither is marked
+ * recommended: this is a choice, not a pitch.
+ */
+export function AiAssistantStep() {
+  const { t } = useTranslation();
+  const [enabled, setEnabled] = useState(false);
+
+  function apply(next: boolean) {
+    setEnabled(next);
+    setAssistantEnabledForUser(next);
+  }
+
+  // Skipping the step entirely still has to mean off, not unset.
+  useEffect(() => {
+    apply(false);
+  }, []);
+
+  const options = [
+    {
+      value: false,
+      title: t("onboarding.aiSkipTitle"),
+      description: t("onboarding.aiSkipDesc"),
+    },
+    {
+      value: true,
+      title: t("onboarding.aiEnableTitle"),
+      description: t("onboarding.aiEnableDesc"),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-xs text-muted-foreground">{t("onboarding.aiIntro")}</p>
+
+      <div className="flex flex-col gap-2">
+        {options.map((option) => (
+          <button
+            key={String(option.value)}
+            type="button"
+            onClick={() => apply(option.value)}
+            className={`flex items-start gap-2.5 border p-2.5 text-left ${
+              enabled === option.value
+                ? "border-accent-brand bg-accent-brand/10"
+                : "border-border bg-card"
+            }`}
+          >
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <span className="text-xs font-medium">{option.title}</span>
+              <span className="text-[10px] leading-snug text-muted-foreground">
+                {option.description}
+              </span>
+            </div>
+            {/*
+              Always rendered and only made visible when selected, so picking an
+              option never reflows the text beside it.
+            */}
+            <Check
+              size={14}
+              className={`ml-auto mt-0.5 shrink-0 ${
+                enabled === option.value ? "opacity-100" : "opacity-0"
+              }`}
+            />
+          </button>
+        ))}
+      </div>
+
+      <p className="text-[10px] text-muted-foreground/70">
+        {t("onboarding.aiNote")}
+      </p>
+    </div>
+  );
+}