@clawpump/claw-agent 0.1.5 → 0.1.7

package/agent/web/src/pages/ProfilesPage.tsx

@@ -2,12 +2,21 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
+import { useNavigate } from "react-router-dom";
+import { useProfileScope } from "@/contexts/useProfileScope";
 import {
+  AlignLeft,
+  Check,
   ChevronDown,
+  Cpu,
+  MoreVertical,
   Pencil,
+  Package,
+  Sparkles,
   Terminal,
   Trash2,
   Users,
@@ -16,7 +25,7 @@ import {
 import spinners from "unicode-animations";
 import { H2 } from "@nous-research/ui/ui/components/typography/h2";
 import { api } from "@/lib/api";
-import type { ProfileInfo } from "@/lib/api";
+import type { ActiveProfileInfo, ProfileInfo } from "@/lib/api";
 import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";
 import { useToast } from "@nous-research/ui/hooks/use-toast";
 import { useConfirmDelete } from "@nous-research/ui/hooks/use-confirm-delete";
@@ -27,6 +36,10 @@ import { Badge } from "@nous-research/ui/ui/components/badge";
 import { Button } from "@nous-research/ui/ui/components/button";
 import { Input } from "@nous-research/ui/ui/components/input";
 import { Label } from "@nous-research/ui/ui/components/label";
+import {
+  Select,
+  SelectOption,
+} from "@nous-research/ui/ui/components/select";
 import { Checkbox } from "@nous-research/ui/ui/components/checkbox";
 import { useI18n } from "@/i18n";
 import { usePageHeader } from "@/contexts/usePageHeader";
@@ -65,18 +78,254 @@ function ProfilesLoadingSpinner() {
   );
 }
 
+/**
+ * Per-card "⋯" actions menu. Holds every action for the profile (set active,
+ * model, description, SOUL, copy command, rename, delete) so the card row stays
+ * a single button. Mirrors the hand-rolled dropdown pattern used by ModelsPage's
+ * "Use as" menu (button + absolute panel + outside-click close).
+ */
+function ProfileActionsMenu({
+  isActive,
+  isDefault,
+  isEditingDesc,
+  isEditingModel,
+  isEditingSoul,
+  labels,
+  settingActive,
+  onCopyCommand,
+  onDelete,
+  onEditDescription,
+  onEditModel,
+  onEditSoul,
+  onManageSkills,
+  onRename,
+  onSetActive,
+}: ProfileActionsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node | null;
+      // Close only when the click lands outside *this* menu. Matching any
+      // `[data-profile-actions]` would treat another card's menu as "inside"
+      // and leave several menus open at once.
+      if (target && !containerRef.current?.contains(target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [open]);
+
+  // Run the action, then collapse the menu. Toggle editors (model/description/
+  // SOUL) expand the inline section below the card once the menu closes.
+  const run = (fn: () => void) => () => {
+    fn();
+    setOpen(false);
+  };
+
+  const itemClass =
+    "flex w-full items-center gap-2.5 px-3 py-2 text-xs uppercase tracking-wider hover:bg-muted/50 disabled:opacity-40";
+
+  return (
+    <div className="relative" data-profile-actions ref={containerRef}>
+      <Button
+        ghost
+        size="icon"
+        title={labels.actions}
+        aria-label={labels.actions}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <MoreVertical className="h-4 w-4" />
+      </Button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-50 mt-1 min-w-[200px] border border-border bg-card shadow-lg"
+        >
+          {!isActive && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass}
+              disabled={settingActive}
+              onClick={run(onSetActive)}
+            >
+              <Check className="h-4 w-4" />
+              {labels.setActive}
+            </button>
+          )}
+
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass}
+            onClick={run(onEditModel)}
+          >
+            {isEditingModel ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <Cpu className="h-4 w-4" />
+            )}
+            {labels.editModel}
+          </button>
+
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass}
+            onClick={run(onEditDescription)}
+          >
+            {isEditingDesc ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <AlignLeft className="h-4 w-4" />
+            )}
+            {labels.editDescription}
+          </button>
+
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass}
+            onClick={run(onEditSoul)}
+          >
+            {isEditingSoul ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <span aria-hidden className="w-4 text-center text-xs font-bold">
+                S
+              </span>
+            )}
+            {labels.editSoul}
+          </button>
+
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass}
+            onClick={run(onManageSkills)}
+          >
+            <Package className="h-4 w-4" />
+            {labels.manageSkills}
+          </button>
+
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass}
+            onClick={run(onCopyCommand)}
+          >
+            <Terminal className="h-4 w-4" />
+            {labels.openInTerminal}
+          </button>
+
+          {!isDefault && (
+            <button
+              type="button"
+              role="menuitem"
+              className={cn(itemClass, "border-t border-border/50")}
+              onClick={run(onRename)}
+            >
+              <Pencil className="h-4 w-4" />
+              {labels.rename}
+            </button>
+          )}
+
+          {!isDefault && (
+            <button
+              type="button"
+              role="menuitem"
+              className={cn(itemClass, "text-destructive hover:bg-destructive/10")}
+              onClick={run(onDelete)}
+            >
+              <Trash2 className="h-4 w-4" />
+              {labels.delete}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function ProfilesPage() {
+  const navigate = useNavigate();
   const [profiles, setProfiles] = useState<ProfileInfo[]>([]);
+  const [activeInfo, setActiveInfo] = useState<ActiveProfileInfo | null>(null);
   const [loading, setLoading] = useState(true);
   const { toast, showToast } = useToast();
   const { t } = useI18n();
   const { setEnd } = usePageHeader();
+  const { setProfile } = useProfileScope();
+
+  // Locale strings with English fallbacks. The enriched keys are optional in
+  // the i18n type so untranslated locales don't break the build — they render
+  // the English literal until translated.
+  const L = useMemo(() => {
+    const p = t.profiles;
+    return {
+      activeProfile: p.activeProfile ?? "Active profile",
+      activeBadge: p.activeBadge ?? "active",
+      setActive: p.setActive ?? "Set as active",
+      activeSet: p.activeSet ?? "Active profile set",
+      gatewayRunning: p.gatewayRunning ?? "Gateway running",
+      gatewayStopped: p.gatewayStopped ?? "Gateway stopped",
+      gatewayRunningWarning:
+        p.gatewayRunningWarning ??
+        "This profile's gateway is running — it will be stopped.",
+      aliasBadge: p.aliasBadge ?? "alias",
+      description: p.description ?? "Description",
+      descriptionPlaceholder:
+        p.descriptionPlaceholder ??
+        "What is this profile good at? Used to route kanban tasks by role.",
+      noDescription: p.noDescription ?? "No description",
+      editDescription: p.editDescription ?? "Edit description",
+      descriptionSaved: p.descriptionSaved ?? "Description saved",
+      reviewBadge: p.reviewBadge ?? "review",
+      autoGenerate: p.autoGenerate ?? "Auto-generate",
+      generating: p.generating ?? "Generating…",
+      describeFailed: p.describeFailed ?? "Could not generate description",
+      distribution: p.distribution ?? "Distribution",
+      advancedOptions: p.advancedOptions ?? "Advanced options",
+      cloneAll:
+        p.cloneAll ?? "Clone everything (memories, sessions, skills, state)",
+      noSkillsOption: p.noSkillsOption ?? "Don't seed bundled skills",
+      descriptionOptional: p.descriptionOptional ?? "Description (optional)",
+      modelOptional: p.modelOptional ?? "Model (optional)",
+      modelInherit: p.modelInherit ?? "Inherit from clone / default",
+      modelLoading: p.modelLoading ?? "Loading models…",
+      modelNone:
+        p.modelNone ?? "No authenticated providers — set a key first",
+      editModel: p.editModel ?? "Change model",
+      modelSaved: p.modelSaved ?? "Model updated",
+      modelSelect: p.modelSelect ?? "Select a model",
+      actions: p.actions ?? "Actions",
+      manageSkills: p.manageSkills ?? "Manage skills & tools",
+      activeSetHint:
+        p.activeSetHint ??
+        "Dashboard switched to manage {name}. New CLI/gateway runs will use this profile too.",
+    };
+  }, [t.profiles]);
 
   // Create modal
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [newName, setNewName] = useState("");
-  const [cloneFromDefault, setCloneFromDefault] = useState(true);
+  const [cloneFrom, setCloneFrom] = useState<string | null>("default");
+  const [cloneAll, setCloneAll] = useState(false);
+  const [noSkills, setNoSkills] = useState(false);
+  const [newDescription, setNewDescription] = useState("");
   const [creating, setCreating] = useState(false);
+  // Model picker (lazy-loaded the first time a picker is opened). modelChoice
+  // is a "slug\u0000model" key, or "" to inherit from clone/default.
+  const [modelChoices, setModelChoices] = useState<
+    { provider: string; model: string; label: string }[] | null
+  >(null);
+  const modelChoicesLoading = useRef(false);
+  const [modelChoice, setModelChoice] = useState("");
   const closeCreateModal = useCallback(() => setCreateModalOpen(false), []);
   const createModalRef = useModalBehavior({
     open: createModalOpen,
@@ -95,10 +344,60 @@ export default function ProfilesPage() {
   // newer state when the user switches profiles or closes the editor.
   const activeSoulRequest = useRef<string | null>(null);
 
-  const load = useCallback(() => {
+  // Inline description editor state
+  const [editingDescFor, setEditingDescFor] = useState<string | null>(null);
+  const [descText, setDescText] = useState("");
+  const [descSaving, setDescSaving] = useState(false);
+  const [describing, setDescribing] = useState(false);
+  // Tracks the latest description request (save / auto-describe) so a late
+  // response can't overwrite state for a different, newly-opened editor.
+  const activeDescRequest = useRef<string | null>(null);
+  // Counts in-flight save / auto-describe requests so the saving indicator
+  // is only cleared when the last concurrent request settles.
+  const descSavingCount = useRef(0);
+  const describingCount = useRef(0);
+
+  // Inline model editor state
+  const [editingModelFor, setEditingModelFor] = useState<string | null>(null);
+  const [modelEditChoice, setModelEditChoice] = useState("");
+  const [modelSaving, setModelSaving] = useState(false);
+
+  // Per-profile "set active" in-flight name
+  const [settingActive, setSettingActive] = useState<string | null>(null);
+
+  const modelKey = (provider: string | null, model: string | null) =>
+    provider && model ? `${provider}\u0000${model}` : "";
+
+  const loadModelChoices = useCallback(() => {
+    if (modelChoices !== null || modelChoicesLoading.current) return;
+    modelChoicesLoading.current = true;
     api
-      .getProfiles()
-      .then((res) => setProfiles(res.profiles))
+      .getModelOptions()
+      .then((res) => {
+        const flat: { provider: string; model: string; label: string }[] = [];
+        for (const prov of res.providers ?? []) {
+          for (const m of prov.models ?? []) {
+            flat.push({
+              provider: prov.slug,
+              model: m,
+              label: `${prov.name} · ${m}`,
+            });
+          }
+        }
+        setModelChoices(flat);
+      })
+      .catch(() => setModelChoices([]))
+      .finally(() => {
+        modelChoicesLoading.current = false;
+      });
+  }, [modelChoices]);
+
+  const load = useCallback(() => {
+    Promise.all([api.getProfiles(), api.getActiveProfile().catch(() => null)])
+      .then(([res, active]) => {
+        setProfiles(res.profiles);
+        setActiveInfo(active);
+      })
       .catch((e) => showToast(`${t.status.error}: ${e}`, "error"))
       .finally(() => setLoading(false));
   }, [showToast, t.status.error]);
@@ -107,6 +406,19 @@ export default function ProfilesPage() {
     load();
   }, [load]);
 
+  // Lazily load the model picker the first time the create modal opens.
+  useEffect(() => {
+    if (createModalOpen) loadModelChoices();
+  }, [createModalOpen, loadModelChoices]);
+
+  const isActive = useCallback(
+    (p: ProfileInfo) =>
+      activeInfo != null &&
+      (activeInfo.active === p.name ||
+        (activeInfo.active === "default" && p.is_default)),
+    [activeInfo],
+  );
+
   const handleCreate = async () => {
     const name = newName.trim();
     if (!name) {
@@ -119,9 +431,34 @@ export default function ProfilesPage() {
     }
     setCreating(true);
     try {
-      await api.createProfile({ name, clone_from_default: cloneFromDefault });
+      const cloning = cloneFrom !== null;
+      const picked = modelChoice
+        ? modelChoices?.find(
+            (c) => `${c.provider}\u0000${c.model}` === modelChoice,
+          )
+        : undefined;
+      const res = await api.createProfile({
+        name,
+        clone_from: cloneFrom,
+        clone_all: cloning && cloneAll,
+        no_skills: cloning ? false : noSkills,
+        description: newDescription.trim() || undefined,
+        provider: picked?.provider,
+        model: picked?.model,
+      });
       showToast(`${t.profiles.created}: ${name}`, "success");
+      if (picked && res.model_set === false) {
+        showToast(
+          `Profile created, but the model could not be saved — set it from the profile editor.`,
+          "error",
+        );
+      }
       setNewName("");
+      setNewDescription("");
+      setNoSkills(false);
+      setCloneAll(false);
+      setCloneFrom("default");
+      setModelChoice("");
       setCreateModalOpen(false);
       load();
     } catch (e) {
@@ -145,10 +482,7 @@ export default function ProfilesPage() {
     }
     try {
       await api.renameProfile(renamingFrom, target);
-      showToast(
-        `${t.profiles.renamed}: ${renamingFrom} → ${target}`,
-        "success",
-      );
+      showToast(`${t.profiles.renamed}: ${renamingFrom} → ${target}`, "success");
       setRenamingFrom(null);
       setRenameTo("");
       load();
@@ -157,13 +491,46 @@ export default function ProfilesPage() {
     }
   };
 
+  const handleSetActive = async (name: string) => {
+    setSettingActive(name);
+    try {
+      // The backend normalizes/validates the name; trust the canonical
+      // value it returns rather than the raw input.
+      const { active } = await api.setActiveProfile(name);
+      setProfile(active);
+      showToast(
+        `${L.activeSet}: ${active} — ${L.activeSetHint.replace("{name}", active)}`,
+        "success",
+      );
+      setActiveInfo((prev) =>
+        prev ? { ...prev, active } : { active, current: active },
+      );
+    } catch (e) {
+      showToast(`${t.status.error}: ${e}`, "error");
+    } finally {
+      setSettingActive(null);
+    }
+  };
+
+  // Closes whichever editor dialog is open (model / description / SOUL).
+  const closeEditor = useCallback(() => {
+    activeSoulRequest.current = null;
+    activeDescRequest.current = null;
+    setEditingModelFor(null);
+    setEditingDescFor(null);
+    setEditingSoulFor(null);
+  }, []);
+
   const openSoulEditor = useCallback(
     async (name: string) => {
+      // Re-selecting the action for the already-open editor collapses it,
+      // matching the chevron-down affordance in the actions menu.
       if (editingSoulFor === name) {
-        activeSoulRequest.current = null;
-        setEditingSoulFor(null);
+        closeEditor();
         return;
       }
+      setEditingDescFor(null);
+      setEditingModelFor(null);
       setEditingSoulFor(name);
       setSoulText("");
       activeSoulRequest.current = name;
@@ -178,7 +545,7 @@ export default function ProfilesPage() {
         }
       }
     },
-    [editingSoulFor, showToast, t.status.error],
+    [closeEditor, editingSoulFor, showToast, t.status.error],
   );
 
   const handleSaveSoul = async (name: string) => {
@@ -186,6 +553,8 @@ export default function ProfilesPage() {
     try {
       await api.updateProfileSoul(name, soulText);
       showToast(`${t.profiles.soulSaved}: ${name}`, "success");
+      activeSoulRequest.current = null;
+      setEditingSoulFor(null);
     } catch (e) {
       showToast(`${t.status.error}: ${e}`, "error");
     } finally {
@@ -193,6 +562,144 @@ export default function ProfilesPage() {
     }
   };
 
+  const openDescEditor = useCallback(
+    (p: ProfileInfo) => {
+      if (editingDescFor === p.name) {
+        closeEditor();
+        return;
+      }
+      activeDescRequest.current = p.name;
+      setEditingSoulFor(null);
+      setEditingModelFor(null);
+      setEditingDescFor(p.name);
+      setDescText(p.description ?? "");
+    },
+    [closeEditor, editingDescFor],
+  );
+
+  const handleSaveDesc = async (name: string) => {
+    descSavingCount.current += 1;
+    setDescSaving(true);
+    activeDescRequest.current = name;
+    try {
+      const res = await api.updateProfileDescription(name, descText);
+      // Profile-list state always reflects the persisted result, but only
+      // touch the open editor if it's still showing this profile.
+      setProfiles((prev) =>
+        prev.map((p) =>
+          p.name === name
+            ? {
+                ...p,
+                description: res.description,
+                description_auto: res.description_auto,
+              }
+            : p,
+        ),
+      );
+      if (activeDescRequest.current === name) {
+        showToast(`${L.descriptionSaved}: ${name}`, "success");
+        setEditingDescFor(null);
+      }
+    } catch (e) {
+      if (activeDescRequest.current === name) {
+        showToast(`${t.status.error}: ${e}`, "error");
+      }
+    } finally {
+      descSavingCount.current -= 1;
+      if (descSavingCount.current === 0) setDescSaving(false);
+    }
+  };
+
+  const handleAutoDescribe = async (name: string) => {
+    describingCount.current += 1;
+    setDescribing(true);
+    activeDescRequest.current = name;
+    try {
+      const res = await api.describeProfileAuto(name);
+      const current = activeDescRequest.current === name;
+      if (res.ok && res.description != null) {
+        if (current) setDescText(res.description);
+        setProfiles((prev) =>
+          prev.map((p) =>
+            p.name === name
+              ? {
+                  ...p,
+                  description: res.description ?? "",
+                  description_auto: res.description_auto,
+                }
+              : p,
+          ),
+        );
+        if (current) showToast(`${L.descriptionSaved}: ${name}`, "success");
+      } else if (current) {
+        showToast(`${L.describeFailed}: ${res.reason}`, "error");
+      }
+    } catch (e) {
+      if (activeDescRequest.current === name) {
+        showToast(`${t.status.error}: ${e}`, "error");
+      }
+    } finally {
+      describingCount.current -= 1;
+      if (describingCount.current === 0) setDescribing(false);
+    }
+  };
+
+  const openModelEditor = useCallback(
+    (p: ProfileInfo) => {
+      if (editingModelFor === p.name) {
+        closeEditor();
+        return;
+      }
+      setEditingSoulFor(null);
+      setEditingDescFor(null);
+      setEditingModelFor(p.name);
+      setModelEditChoice(modelKey(p.provider, p.model));
+      loadModelChoices();
+    },
+    [closeEditor, editingModelFor, loadModelChoices],
+  );
+
+  const handleSaveModel = async (name: string) => {
+    const picked = modelEditChoice
+      ? modelChoices?.find(
+          (c) => `${c.provider}\u0000${c.model}` === modelEditChoice,
+        )
+      : undefined;
+    if (!picked) return;
+    setModelSaving(true);
+    try {
+      await api.setProfileModel(name, picked.provider, picked.model);
+      showToast(`${L.modelSaved}: ${picked.model}`, "success");
+      setProfiles((prev) =>
+        prev.map((p) =>
+          p.name === name
+            ? { ...p, model: picked.model, provider: picked.provider }
+            : p,
+        ),
+      );
+      setEditingModelFor(null);
+    } catch (e) {
+      showToast(`${t.status.error}: ${e}`, "error");
+    } finally {
+      setModelSaving(false);
+    }
+  };
+
+  // Exactly one editor is open at a time; derive which profile + kind so a
+  // single dialog can render the right body.
+  const editorName = editingModelFor ?? editingDescFor ?? editingSoulFor;
+  const editorKind: "model" | "desc" | "soul" | null = editingModelFor
+    ? "model"
+    : editingDescFor
+      ? "desc"
+      : editingSoulFor
+        ? "soul"
+        : null;
+  const editorModalRef = useModalBehavior({
+    open: editorName != null,
+    onClose: closeEditor,
+  });
+
   const handleCopyTerminalCommand = async (name: string) => {
     let cmd: string;
     try {
@@ -227,22 +734,44 @@ export default function ProfilesPage() {
   });
 
   const pendingName = profileDelete.pendingId;
+  const pendingProfile = pendingName
+    ? profiles.find((p) => p.name === pendingName)
+    : undefined;
+  const deleteMessage = (() => {
+    if (!pendingName) return t.profiles.confirmDeleteMessage;
+    const base = t.profiles.confirmDeleteMessage.replace("{name}", pendingName);
+    return pendingProfile?.gateway_running
+      ? `${base}\n\n${L.gatewayRunningWarning}`
+      : base;
+  })();
 
-  // Put "Create" button in page header
+  // Put "Build" (full builder) + "Create" (quick modal) buttons in header
   useLayoutEffect(() => {
     setEnd(
-      <Button
-        className="uppercase"
-        size="sm"
-        onClick={() => setCreateModalOpen(true)}
-      >
-        {t.common.create}
-      </Button>,
+      <div className="flex items-center gap-2">
+        <Button
+          className="uppercase"
+          size="sm"
+          outlined
+          onClick={() => navigate("/profiles/new")}
+        >
+          Build
+        </Button>
+        <Button
+          className="uppercase"
+          size="sm"
+          onClick={() => setCreateModalOpen(true)}
+        >
+          {t.common.create}
+        </Button>
+      </div>,
     );
     return () => {
       setEnd(null);
     };
-  }, [setEnd, t.common.create, loading]);
+  }, [setEnd, t.common.create, loading, navigate]);
+
+  const cloning = cloneFrom !== null;
 
   if (loading) {
     return (
@@ -267,11 +796,7 @@ export default function ProfilesPage() {
         onCancel={profileDelete.cancel}
         onConfirm={profileDelete.confirm}
         title={t.profiles.confirmDeleteTitle}
-        description={
-          pendingName
-            ? t.profiles.confirmDeleteMessage.replace("{name}", pendingName)
-            : t.profiles.confirmDeleteMessage
-        }
+        description={deleteMessage}
         loading={profileDelete.isDeleting}
       />
 
@@ -287,7 +812,12 @@ export default function ProfilesPage() {
           aria-modal="true"
           aria-labelledby="create-profile-title"
         >
-          <div className={cn(themedBody, "relative w-full max-w-md border border-border bg-card shadow-2xl flex flex-col")}>
+          <div
+            className={cn(
+              themedBody,
+              "relative w-full max-w-md border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]",
+            )}
+          >
             <Button
               ghost
               size="icon"
@@ -307,9 +837,10 @@ export default function ProfilesPage() {
               </h2>
             </header>
 
-            <div className="p-5 grid gap-4">
+            <div className="min-h-0 overflow-y-auto p-5 grid gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="profile-name">{t.profiles.name}</Label>
+
                 <Input
                   id="profile-name"
                   autoFocus
@@ -324,28 +855,118 @@ export default function ProfilesPage() {
                     !PROFILE_NAME_RE.test(newName.trim())
                   }
                 />
+
                 <p className="text-xs text-muted-foreground">
                   {t.profiles.nameRule}
                 </p>
               </div>
 
-              <div className="flex items-center gap-2.5">
-                <Checkbox
-                  checked={cloneFromDefault}
-                  id="clone-from-default"
-                  onCheckedChange={(checked) =>
-                    setCloneFromDefault(checked === true)
-                  }
+              <div className="grid gap-2">
+                <Label htmlFor="clone-from">{t.profiles.cloneFrom}</Label>
+                <Select
+                  id="clone-from"
+                  value={cloneFrom ?? ""}
+                  onValueChange={(v) => {
+                    const next = v || null;
+                    setCloneFrom(next);
+                    if (next === null) setCloneAll(false);
+                  }}
+                >
+                  <SelectOption value="">{t.profiles.cloneFromNone}</SelectOption>
+                  {profiles.map((profile) => (
+                    <SelectOption key={profile.name} value={profile.name}>
+                      {profile.name}
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="profile-description">
+                  {L.descriptionOptional}
+                </Label>
+
+                <textarea
+                  id="profile-description"
+                  className="flex min-h-[64px] w-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder={L.descriptionPlaceholder}
+                  value={newDescription}
+                  onChange={(e) => setNewDescription(e.target.value)}
                 />
+              </div>
 
-                <Label
-                  className="font-mondwest normal-case tracking-normal text-sm cursor-pointer"
-                  htmlFor="clone-from-default"
+              <div className="grid gap-2">
+                <Label htmlFor="profile-model">{L.modelOptional}</Label>
+
+                <Select
+                  id="profile-model"
+                  value={modelChoice}
+                  disabled={modelChoices === null}
+                  onValueChange={setModelChoice}
                 >
-                  {t.profiles.cloneFromDefault}
-                </Label>
+                  <SelectOption value="">
+                    {modelChoices === null ? L.modelLoading : L.modelInherit}
+                  </SelectOption>
+
+                  {(modelChoices ?? []).map((c) => (
+                    <SelectOption
+                      key={`${c.provider}\u0000${c.model}`}
+                      value={`${c.provider}\u0000${c.model}`}
+                    >
+                      {c.label}
+                    </SelectOption>
+                  ))}
+                </Select>
+
+                {modelChoices !== null && modelChoices.length === 0 && (
+                  <p className="text-xs text-muted-foreground">{L.modelNone}</p>
+                )}
               </div>
 
+              <fieldset className="grid gap-3 border-t border-border pt-4">
+                <legend className="font-mondwest text-display text-xs tracking-wider text-muted-foreground">
+                  {L.advancedOptions}
+                </legend>
+
+                <div className="flex items-center gap-2.5">
+                  <Checkbox
+                    checked={cloneAll}
+                    disabled={!cloning}
+                    id="clone-all"
+                    onCheckedChange={(checked) => setCloneAll(checked === true)}
+                  />
+
+                  <Label
+                    className={cn(
+                      "font-mondwest normal-case tracking-normal text-sm cursor-pointer",
+                      !cloning && "opacity-50",
+                    )}
+                    htmlFor="clone-all"
+                  >
+                    {L.cloneAll}
+                  </Label>
+                </div>
+
+                <div className="flex items-center gap-2.5">
+                  <Checkbox
+                    checked={noSkills}
+                    id="no-skills"
+                    disabled={cloning}
+                    onCheckedChange={(checked) => setNoSkills(checked === true)}
+                  />
+
+                  <Label
+                    className={cn(
+                      "font-mondwest normal-case tracking-normal text-sm cursor-pointer",
+                      cloning && "opacity-50",
+                    )}
+                    htmlFor="no-skills"
+                  >
+                    {L.noSkillsOption}
+                  </Label>
+                </div>
+              </fieldset>
+
               <div className="flex justify-end">
                 <Button
                   className="uppercase"
@@ -361,6 +982,30 @@ export default function ProfilesPage() {
         </div>
       )}
 
+      {/* Active profile banner */}
+      {activeInfo && (
+        <Card>
+          <CardContent className="flex flex-wrap items-center gap-x-4 gap-y-1 py-3 text-xs">
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Check className="h-3.5 w-3.5 text-success" />
+
+              <span>
+                {L.activeProfile}:{" "}
+                <span className="font-medium text-foreground">
+                  {activeInfo.active}
+                </span>
+              </span>
+            </span>
+
+            {activeInfo.current !== activeInfo.active && (
+              <span className="font-mono text-muted-foreground/80">
+                ({activeInfo.current})
+              </span>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
       {/* List */}
       <div className="flex flex-col gap-3">
         <H2
@@ -379,15 +1024,18 @@ export default function ProfilesPage() {
           </Card>
         )}
 
-        {profiles.map((p) => {
-          const isRenaming = renamingFrom === p.name;
-          const isEditingSoul = editingSoulFor === p.name;
-          return (
-            <Card key={p.name}>
-              <CardContent className="flex items-start gap-4 py-4">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1 flex-wrap">
-                    {isRenaming ? (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {profiles.map((p) => {
+            const isRenaming = renamingFrom === p.name;
+            const isEditingSoul = editingSoulFor === p.name;
+            const isEditingDesc = editingDescFor === p.name;
+            const isEditingModel = editingModelFor === p.name;
+            const active = isActive(p);
+            return (
+              <Card key={p.name} className="h-full">
+                <CardContent className="flex h-full flex-col gap-2 py-4">
+                  {isRenaming ? (
+                    <div className="flex flex-col gap-2">
                       <Input
                         autoFocus
                         value={renameTo}
@@ -401,159 +1049,377 @@ export default function ProfilesPage() {
                           renameTo.trim() !== p.name &&
                           !PROFILE_NAME_RE.test(renameTo.trim())
                         }
-                        className="max-w-xs"
                       />
-                    ) : (
-                      <span className="font-medium text-sm truncate">
-                        {p.name}
-                      </span>
-                    )}
-                    {p.is_default && (
-                      <Badge tone="secondary">{t.profiles.defaultBadge}</Badge>
-                    )}
-                    {p.has_env && (
-                      <Badge tone="outline">{t.profiles.hasEnv}</Badge>
-                    )}
-                  </div>
-                  {isRenaming &&
-                    (() => {
-                      const trimmed = renameTo.trim();
-                      const invalid =
-                        trimmed !== "" &&
-                        trimmed !== p.name &&
-                        !PROFILE_NAME_RE.test(trimmed);
-                      return (
-                        <p
-                          className={
-                            "text-xs mb-1 " +
-                            (invalid
-                              ? "text-destructive"
-                              : "text-muted-foreground")
-                          }
-                        >
-                          {invalid
-                            ? `${t.profiles.invalidName}: ${t.profiles.nameRule}`
-                            : t.profiles.nameRule}
-                        </p>
-                      );
-                    })()}
-                  <div className="flex items-center gap-4 text-xs text-muted-foreground flex-wrap">
-                    {p.model && (
-                      <span>
-                        {t.profiles.model}: {p.model}
-                        {p.provider ? ` (${p.provider})` : ""}
-                      </span>
-                    )}
-                    <span>
-                      {t.profiles.skills}: {p.skill_count}
-                    </span>
-                    <span className="font-mono truncate max-w-[28rem]">
-                      {p.path}
-                    </span>
-                  </div>
-                </div>
 
-                <div className="flex items-center gap-1 shrink-0">
-                  {isRenaming ? (
-                    <>
-                      <Button size="sm" onClick={handleRenameSubmit}>
-                        {t.common.save}
-                      </Button>
-                      <Button
-                        size="sm"
-                        ghost
-                        onClick={() => setRenamingFrom(null)}
-                      >
-                        {t.common.cancel}
-                      </Button>
-                    </>
+                      {(() => {
+                        const trimmed = renameTo.trim();
+                        const invalid =
+                          trimmed !== "" &&
+                          trimmed !== p.name &&
+                          !PROFILE_NAME_RE.test(trimmed);
+                        return (
+                          <p
+                            className={cn(
+                              "text-xs",
+                              invalid
+                                ? "text-destructive"
+                                : "text-muted-foreground",
+                            )}
+                          >
+                            {invalid
+                              ? `${t.profiles.invalidName}: ${t.profiles.nameRule}`
+                              : t.profiles.nameRule}
+                          </p>
+                        );
+                      })()}
+
+                      <div className="flex gap-1.5">
+                        <Button size="sm" onClick={handleRenameSubmit}>
+                          {t.common.save}
+                        </Button>
+
+                        <Button
+                          size="sm"
+                          ghost
+                          onClick={() => setRenamingFrom(null)}
+                        >
+                          {t.common.cancel}
+                        </Button>
+                      </div>
+                    </div>
                   ) : (
                     <>
-                      <Button
-                        ghost
-                        size="icon"
-                        title={t.profiles.editSoul}
-                        aria-label={t.profiles.editSoul}
-                        onClick={() => openSoulEditor(p.name)}
-                      >
-                        {isEditingSoul ? (
-                          <ChevronDown className="h-4 w-4" />
-                        ) : (
-                          <span aria-hidden className="text-xs font-bold">
-                            S
+                      <div className="flex items-start gap-2">
+                        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+                          <span className="font-medium text-sm truncate">
+                            {p.name}
                           </span>
-                        )}
-                      </Button>
-                      <Button
-                        ghost
-                        size="icon"
-                        title={t.profiles.openInTerminal}
-                        aria-label={t.profiles.openInTerminal}
-                        onClick={() => handleCopyTerminalCommand(p.name)}
-                      >
-                        <Terminal className="h-4 w-4" />
-                      </Button>
-                      {!p.is_default && (
-                        <Button
-                          ghost
-                          size="icon"
-                          title={t.profiles.rename}
-                          aria-label={t.profiles.rename}
-                          onClick={() => {
+
+                          {active && (
+                            <Badge tone="success">{L.activeBadge}</Badge>
+                          )}
+
+                          {p.is_default && (
+                            <Badge tone="secondary">
+                              {t.profiles.defaultBadge}
+                            </Badge>
+                          )}
+
+                          {p.has_alias && (
+                            <Badge tone="outline">{L.aliasBadge}</Badge>
+                          )}
+
+                          {p.has_env && (
+                            <Badge tone="outline">{t.profiles.hasEnv}</Badge>
+                          )}
+
+                          {p.distribution_name && (
+                            <Badge tone="outline" className="gap-1">
+                              <Package className="h-3 w-3" />
+                              {p.distribution_name}
+                              {p.distribution_version
+                                ? `@${p.distribution_version}`
+                                : ""}
+                            </Badge>
+                          )}
+                        </div>
+
+                        <ProfileActionsMenu
+                          isActive={active}
+                          isDefault={p.is_default}
+                          isEditingDesc={isEditingDesc}
+                          isEditingModel={isEditingModel}
+                          isEditingSoul={isEditingSoul}
+                          settingActive={settingActive === p.name}
+                          labels={{
+                            actions: L.actions,
+                            setActive: L.setActive,
+                            editModel: L.editModel,
+                            editDescription: L.editDescription,
+                            editSoul: t.profiles.editSoul,
+                            manageSkills: L.manageSkills,
+                            openInTerminal: t.profiles.openInTerminal,
+                            rename: t.profiles.rename,
+                            delete: t.common.delete,
+                          }}
+                          onCopyCommand={() =>
+                            handleCopyTerminalCommand(p.name)
+                          }
+                          onDelete={() => profileDelete.requestDelete(p.name)}
+                          onEditDescription={() => openDescEditor(p)}
+                          onEditModel={() => openModelEditor(p)}
+                          onEditSoul={() => openSoulEditor(p.name)}
+                          onManageSkills={() =>
+                            navigate(
+                              `/skills?profile=${encodeURIComponent(p.name)}`,
+                            )
+                          }
+                          onRename={() => {
                             setRenamingFrom(p.name);
                             setRenameTo(p.name);
                           }}
+                          onSetActive={() => handleSetActive(p.name)}
+                        />
+                      </div>
+
+                      <div className="flex items-center gap-1.5 text-xs">
+                        <span
+                          className={cn(
+                            "h-1.5 w-1.5 rounded-full",
+                            p.gateway_running
+                              ? "bg-success"
+                              : "bg-muted-foreground/40",
+                          )}
+                        />
+
+                        <span
+                          className={cn(
+                            p.gateway_running
+                              ? "text-success"
+                              : "text-muted-foreground",
+                          )}
                         >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                      )}
-                      {!p.is_default && (
-                        <Button
-                          ghost
-                          size="icon"
-                          title={t.common.delete}
-                          aria-label={t.common.delete}
-                          onClick={() => profileDelete.requestDelete(p.name)}
+                          {p.gateway_running
+                            ? L.gatewayRunning
+                            : L.gatewayStopped}
+                        </span>
+                      </div>
+
+                      <div className="flex items-start gap-2 text-xs">
+                        <span
+                          className={cn(
+                            "line-clamp-2",
+                            p.description
+                              ? "text-muted-foreground"
+                              : "text-muted-foreground/60 italic",
+                          )}
                         >
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
-                      )}
+                          {p.description || L.noDescription}
+                        </span>
+
+                        {p.description && p.description_auto && (
+                          <Badge tone="warning" className="shrink-0">
+                            {L.reviewBadge}
+                          </Badge>
+                        )}
+                      </div>
+
+                      <div className="mt-auto flex flex-col gap-0.5 pt-1 text-xs text-muted-foreground">
+                        {p.model && (
+                          <span className="truncate">
+                            {t.profiles.model}: {p.model}
+                            {p.provider ? ` (${p.provider})` : ""}
+                          </span>
+                        )}
+
+                        <span>
+                          {t.profiles.skills}: {p.skill_count}
+                        </span>
+
+                        <span className="font-mono truncate">{p.path}</span>
+                      </div>
                     </>
                   )}
-                </div>
-              </CardContent>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Editor dialog — model / description / SOUL for the selected profile */}
+      {editorName && (
+        <div
+          ref={editorModalRef}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+          onClick={(e) => e.target === e.currentTarget && closeEditor()}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="profile-editor-title"
+        >
+          <div
+            className={cn(
+              themedBody,
+              "relative w-full max-w-lg border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]",
+            )}
+          >
+            <Button
+              ghost
+              size="icon"
+              onClick={closeEditor}
+              className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+              aria-label="Close"
+            >
+              <X />
+            </Button>
+
+            <header className="p-5 pb-3 border-b border-border">
+              <h2
+                id="profile-editor-title"
+                className="font-mondwest text-display text-base tracking-wider"
+              >
+                {editorKind === "model"
+                  ? L.editModel
+                  : editorKind === "desc"
+                    ? L.description
+                    : t.profiles.soulSection}
+                <span className="text-muted-foreground"> · {editorName}</span>
+              </h2>
+            </header>
+
+            <div
+              className={cn(
+                "p-5 grid gap-4",
+                editorKind === "soul" && "min-h-0 overflow-y-auto",
+              )}
+            >
+              {editorKind === "model" &&
+                (modelChoices !== null && modelChoices.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">{L.modelNone}</p>
+                ) : (
+                  <>
+                    <Select
+                      value={modelEditChoice}
+                      disabled={modelChoices === null}
+                      placeholder={
+                        modelChoices === null ? L.modelLoading : L.modelSelect
+                      }
+                      onValueChange={setModelEditChoice}
+                    >
+                      {(modelChoices ?? []).map((c) => (
+                        <SelectOption
+                          key={`${c.provider}\u0000${c.model}`}
+                          value={`${c.provider}\u0000${c.model}`}
+                        >
+                          {c.label}
+                        </SelectOption>
+                      ))}
+                    </Select>
+
+                    <div className="flex justify-end">
+                      <Button
+                        size="sm"
+                        className="uppercase"
+                        onClick={() => handleSaveModel(editorName)}
+                        disabled={
+                          modelSaving ||
+                          !modelChoices?.some(
+                            (c) =>
+                              `${c.provider}\u0000${c.model}` ===
+                              modelEditChoice,
+                          )
+                        }
+                      >
+                        {modelSaving ? t.common.saving : t.common.save}
+                      </Button>
+                    </div>
+                  </>
+                ))}
+
+              {editorKind === "desc" && (
+                <>
+                  <div className="flex items-center justify-between gap-2">
+                    <Label
+                      htmlFor="profile-desc-editor"
+                      className="font-mondwest text-display text-xs tracking-wider text-muted-foreground"
+                    >
+                      {L.description}
+                    </Label>
 
-              {isEditingSoul && (
-                <div className="border-t border-border px-4 pb-4 pt-3 flex flex-col gap-2">
+                    <Button
+                      size="sm"
+                      ghost
+                      className="gap-1.5"
+                      disabled={describing}
+                      onClick={() => handleAutoDescribe(editorName)}
+                    >
+                      <Sparkles className="h-3.5 w-3.5" />
+                      {describing ? L.generating : L.autoGenerate}
+                    </Button>
+                  </div>
+
+                  <textarea
+                    id="profile-desc-editor"
+                    className="flex min-h-[96px] w-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    placeholder={L.descriptionPlaceholder}
+                    value={descText}
+                    onChange={(e) => setDescText(e.target.value)}
+                  />
+
+                  <div className="flex justify-end">
+                    <Button
+                      size="sm"
+                      className="uppercase"
+                      onClick={() => handleSaveDesc(editorName)}
+                      disabled={descSaving}
+                    >
+                      {descSaving ? t.common.saving : t.common.save}
+                    </Button>
+                  </div>
+                </>
+              )}
+
+              {editorKind === "soul" && (
+                <>
                   <Label
-                    htmlFor={`soul-editor-${p.name}`}
-                    className="flex items-center gap-2 font-mondwest text-display text-xs tracking-wider text-muted-foreground"
+                    htmlFor="profile-soul-editor"
+                    className="font-mondwest text-display text-xs tracking-wider text-muted-foreground"
                   >
                     {t.profiles.soulSection}
                   </Label>
+
                   <textarea
-                    id={`soul-editor-${p.name}`}
-                    className="flex min-h-[180px] w-full border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    id="profile-soul-editor"
+                    className="flex min-h-[280px] w-full border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     placeholder={t.profiles.soulPlaceholder}
                     value={soulText}
                     onChange={(e) => setSoulText(e.target.value)}
                   />
-                  <div>
+
+                  <div className="flex justify-end">
                     <Button
                       size="sm"
                       className="uppercase"
-                      onClick={() => handleSaveSoul(p.name)}
+                      onClick={() => handleSaveSoul(editorName)}
                       disabled={soulSaving}
                     >
                       {soulSaving ? t.common.saving : t.common.save}
                     </Button>
                   </div>
-                </div>
+                </>
               )}
-            </Card>
-          );
-        })}
-      </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
+
+interface ProfileActionsMenuProps {
+  isActive: boolean;
+  isDefault: boolean;
+  isEditingDesc: boolean;
+  isEditingModel: boolean;
+  isEditingSoul: boolean;
+  labels: {
+    actions: string;
+    delete: string;
+    editDescription: string;
+    editModel: string;
+    editSoul: string;
+    manageSkills: string;
+    openInTerminal: string;
+    rename: string;
+    setActive: string;
+  };
+  settingActive: boolean;
+  onCopyCommand: () => void;
+  onDelete: () => void;
+  onEditDescription: () => void;
+  onEditModel: () => void;
+  onEditSoul: () => void;
+  onManageSkills: () => void;
+  onRename: () => void;
+  onSetActive: () => void;
+}