claudeup 4.18.0 → 4.22.0

package/src/ui/screens/AliasScreen.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState, useCallback, useMemo, useRef } from "react"
 import type { ScrollBoxRenderable } from "@opentui/core";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
-import { ScreenLayout } from "../components/layout/index.js";
+import { ScreenLayout, type FooterHint } from "../components/layout/index.js";
+import { FlagDetailEditor } from "../components/FlagDetailEditor.js";
 import {
   ALIAS_FLAGS,
   FLAG_GROUPS,
@@ -12,6 +13,9 @@ import {
   defaultAliasConfig,
   defaultValueFor,
   validateAliasName,
+  derivedChannelValues,
+  withoutDerivedChannel,
+  CHANNELS_FLAG_ID,
   DEFAULT_ALIAS_NAME,
   type AliasConfig,
   type FlagValue,
@@ -20,12 +24,14 @@ import { loadAliasName, saveAliasName } from "../../services/alias-settings.js";
 import {
   detectShells,
   renderArgs,
-  renderAlias,
   validateConfig,
   writeAliasToShell,
   parseAliasFromRc,
+  findAdoptableAlias,
   type ShellTarget,
   type FlagValidationIssue,
+  type Segment,
+  type AdoptableAlias,
 } from "../../services/alias-shell-writer.js";
 import { readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
@@ -36,6 +42,26 @@ interface FlagRow {
   value: FlagValue;
   /** Pre-computed validation issue for this row, if any. */
   issue?: FlagValidationIssue;
+  /**
+   * Override for the checkbox's enabled state when the rendered alias would
+   * carry this flag even though its OWN value is disabled. Used by --channels:
+   * a dev-loaded channel forces `--channels` to emit (the render-time union),
+   * so the row must show `[x]` to match what gets written — even when the
+   * user's own channels list is off. Undefined → use the flag's own enabled.
+   */
+  effectiveEnabled?: boolean;
+  /**
+   * Override for the trailing detail (e.g. the --channels union count: own +
+   * derived). Undefined → derive from the flag's own value. Empty string is a
+   * valid override meaning "show nothing".
+   */
+  effectiveDetail?: string;
+  /**
+   * Override for the detail-pane `State:` line. For --channels this is the
+   * effective channel-list summary (the union of own + derived), so the detail
+   * agrees with the list count and the Preview. Undefined → summarizeValue.
+   */
+  stateSummary?: string;
 }
 
 interface AliasNameRow {
@@ -78,22 +104,6 @@ function isSelectableItem(item: Item): boolean {
  */
 type ViewMode = { kind: "main" } | { kind: "flag-detail"; flagId: string };
 
-/**
- * Items shown in the flag-detail sub-screen. Distinct from `Item` because the
- * navigation context is different (one flag, not the whole catalog).
- */
-type DetailItem =
-  | { kind: "toggle"; enabled: boolean }
-  | { kind: "value"; index: number; text: string }
-  | { kind: "picklist"; token: string; picked: boolean }
-  | { kind: "custom"; index: number; text: string }
-  | { kind: "add" }
-  | { kind: "header"; label: string };
-
-function isSelectableDetailItem(item: DetailItem): boolean {
-  return item.kind !== "header";
-}
-
 export function AliasScreen() {
   const { state } = useApp();
   const modal = useModal();
@@ -103,12 +113,118 @@ export function AliasScreen() {
   const [selectedIdx, setSelectedIdx] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<ViewMode>({ kind: "main" });
-  const [detailSelectedIdx, setDetailSelectedIdx] = useState(0);
   // Snapshot of the rc file's flag values as parsed on mount / write. Used
   // to compute the dirty indicator: in-memory != rcSnapshot ⇒ unsaved.
   const [rcSnapshot, setRcSnapshot] = useState<Record<string, FlagValue> | null>(
     null,
   );
+  // Transient write feedback shown on the header status line (not a blocking
+  // modal). Auto-clears after a few seconds. Errors still use a modal since
+  // they need to be read and acknowledged.
+  const [writeStatus, setWriteStatus] = useState<string | null>(null);
+
+  // A hand-written `claude` alias found OUTSIDE any managed block on mount.
+  // Set when the rc file has no managed block but a stray alias we could
+  // adopt — drives the one-time "import it?" offer below. Cleared once the
+  // offer has been shown (whether accepted or declined).
+  const [adoptable, setAdoptable] = useState<AdoptableAlias | null>(null);
+  // When the user accepts a LOSSLESS adoption, we remember the line range of
+  // their original alias so the next write replaces it in place (no duplicate
+  // alias). Cleared after that write absorbs it into the managed block.
+  const [pendingAdoptRange, setPendingAdoptRange] = useState<
+    [number, number] | null
+  >(null);
+
+  // Clear the write status line a few seconds after it appears.
+  useEffect(() => {
+    if (!writeStatus) return;
+    const t = setTimeout(() => setWriteStatus(null), 4000);
+    return () => clearTimeout(t);
+  }, [writeStatus]);
+
+  // One-time "adopt a hand-written alias?" offer. Fires when the mount load
+  // found a stray `claude` alias outside any managed block. We import only the
+  // flags we recognized; whether we also TAKE OWNERSHIP (remove the original
+  // line on the next write) depends on `lossless`:
+  //   - lossless: every token round-trips → safe to absorb. We stash the line
+  //     range so the next write replaces it in place (no duplicate alias).
+  //   - not lossless: we couldn't parse some tokens (e.g. an uncatalogued
+  //     flag like --model) → import the known flags for convenience but LEAVE
+  //     the original line untouched. CRITICAL: we must NOT adopt its name here.
+  //     Shell alias resolution is last-definition-wins, so a managed block
+  //     sharing the name would shadow the surviving original at `source` time —
+  //     silently killing the very tokens that made it not-lossless. Keeping the
+  //     tool's own name lets both coexist: the original keeps working, the
+  //     managed block lives under a different name.
+  // True once we've shown the offer. A ref (not state) so it survives re-render
+  // without being a dependency — critical because this effect mutates its own
+  // `adoptable` dep, and tying "fire once" to state/deps would let the dep
+  // change abort the in-flight modal mid-await (the cleanup would fire before
+  // the user answered). The ref decouples one-shot from the dependency array.
+  const didOfferAdoptRef = useRef(false);
+  useEffect(() => {
+    if (!adoptable || !config || didOfferAdoptRef.current) return;
+    didOfferAdoptRef.current = true;
+    (async () => {
+      const a = adoptable;
+
+      const body = a.rawLine.trim();
+      const others =
+        a.others.length > 0
+          ? `\n\n(Also found ${a.others.length} other claude alias${
+              a.others.length === 1 ? "" : "es"
+            } — leaving those alone.)`
+          : "";
+
+      // On a not-lossless adopt the managed block must NOT share the original's
+      // name — same name + last-wins shell resolution = the block shadows the
+      // surviving original, killing its uncatalogued tokens. Compute a managed
+      // name distinct from `a.name`: keep the tool's current name if it already
+      // differs, else derive a suffixed variant that's free in the rc file.
+      const managedName = a.lossless
+        ? a.name
+        : pickDistinctName(config.aliasName, a.name, a.others);
+
+      const message = a.lossless
+        ? `Found a hand-written alias:\n\n  ${body}\n\nImport its flags into the editor? On the next write it'll be absorbed into a managed block (your original line is replaced — no duplicate).${others}`
+        : `Found a hand-written alias:\n\n  ${body}\n\nI can import the flags I recognize, but it uses ${
+            a.leftovers.length
+          } token${a.leftovers.length === 1 ? "" : "s"} I don't manage (${a.leftovers
+            .map((t) => JSON.stringify(t))
+            .join(", ")}). I'll import the known flags and LEAVE your original "${a.name}" line untouched so it keeps working. The managed alias will use the name "${managedName}" — distinct from "${a.name}" so it can't override it. Import the known flags?${others}`;
+
+      const accepted = await modal.confirm("Adopt existing alias?", message);
+      if (accepted) {
+        // Lossless: adopt the name AND take ownership (replace the line on
+        // write). Not-lossless: import flags under a distinct managed name and
+        // never touch the original line — so it survives AND keeps resolving.
+        setConfig((prev) =>
+          prev
+            ? {
+                ...prev,
+                aliasName: managedName,
+                flags: { ...prev.flags, ...a.flags },
+              }
+            : prev,
+        );
+        if (a.lossless) {
+          // Persist the adopted name and stash the line range so the next
+          // write replaces the original in place (no duplicate, no shadow).
+          void persistAliasName(a.name);
+          setPendingAdoptRange(a.lineRange);
+        } else {
+          // Persist the distinct managed name so it survives a reopen.
+          void persistAliasName(managedName);
+        }
+      }
+      // Clear the candidate now that the decision is made — after the await,
+      // never before (clearing before would abort this very async via the
+      // dep-change cleanup, the bug this effect previously had).
+      setAdoptable(null);
+    })();
+    // persistAliasName is stable (useCallback); excluded to keep this one-shot.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adoptable, config, modal]);
 
   // ── Load alias name + parse rc file + detect shells on mount ─────────
   // The alias name is computer-wide and persisted in ~/.claude/settings.json.
@@ -132,6 +248,7 @@ export function AliasScreen() {
         base.aliasName = name;
 
         let parsedFlags: Record<string, FlagValue> | null = null;
+        let foundAdoptable: AdoptableAlias | null = null;
         if (readTarget && existsSync(readTarget.path)) {
           try {
             const rcText = await readFile(readTarget.path, "utf8");
@@ -142,6 +259,11 @@ export function AliasScreen() {
               // Honour an existing alias name from the rc if settings is at default.
               // But the user's stored preference wins when set explicitly.
               // (No-op here — `name` already loaded above.)
+            } else {
+              // No managed block on disk. The user may still have a hand-written
+              // `claude` alias elsewhere — detect it so we can offer to adopt it
+              // instead of looking broken. Non-destructive: just a candidate.
+              foundAdoptable = findAdoptableAlias(rcText);
             }
           } catch {
             // rc unreadable — fall back to defaults; not a hard error.
@@ -149,9 +271,14 @@ export function AliasScreen() {
         }
 
         if (cancelled) return;
+        // No mirror normalization: channels.values holds OWN channels only;
+        // derived channels come from the dev-load flag at display/render time.
+        // The parser already subtracts derived values from the parsed channels
+        // list, so `base.flags` is correct as-is.
         setConfig(base);
         setShells(s);
-        setRcSnapshot(parsedFlags ?? base.flags);
+        setRcSnapshot(parsedFlags ?? { ...base.flags });
+        if (foundAdoptable) setAdoptable(foundAdoptable);
       } catch (err) {
         if (cancelled) return;
         setError(err instanceof Error ? err.message : String(err));
@@ -183,6 +310,31 @@ export function AliasScreen() {
       if (groupFlags.length === 0) continue;
       out.push({ kind: "header", label: group.label });
       for (const flag of groupFlags) {
+        // --channels shows enabled when the rendered alias would emit it —
+        // i.e. own channels are on OR a dev-loaded channel is derived in. This
+        // keeps the checkbox honest about what gets written without mutating
+        // the own-channels enabled flag (which would silently re-emit own
+        // values the user disabled).
+        let effectiveEnabled: boolean | undefined;
+        let effectiveDetail: string | undefined;
+        let stateSummary: string | undefined;
+        if (flag.id === CHANNELS_FLAG_ID) {
+          const own = config.flags[flag.id];
+          const ownValues =
+            own && own.kind === "text-list" && own.enabled
+              ? own.values.filter((v) => v.length > 0)
+              : [];
+          const derived = derivedChannelValues(config.flags);
+          // Deduped union — matches the writer's render-time union and the
+          // detail-pane summary, so the count is consistent everywhere.
+          const total = new Set([...ownValues, ...derived]).size;
+          effectiveEnabled = total > 0;
+          // Show the union count so the row matches what's written. When the
+          // count is purely derived, this reads e.g. `[x] --channels  1`.
+          effectiveDetail = total > 0 ? `${total}` : "";
+          // The detail-pane State line shows the same final channel list.
+          stateSummary = channelsStateSummary(config.flags);
+        }
         out.push({
           kind: "flag",
           row: {
@@ -190,6 +342,9 @@ export function AliasScreen() {
             flag,
             value: config.flags[flag.id] ?? defaultValueFor(flag),
             issue: issueMap.get(flag.id),
+            effectiveEnabled,
+            effectiveDetail,
+            stateSummary,
           },
         });
       }
@@ -206,8 +361,9 @@ export function AliasScreen() {
 
   // ── Flag-detail sub-screen items ──────────────────────────────────────
   // Computed only when viewMode is flag-detail. Built off the flag's current
-  // value in `config.flags[flagId]`. Kinds vary by flag.kind (text-list vs
-  // multi-with-custom).
+  // The flag-detail sub-screen is now self-contained in <FlagDetailEditor>.
+  // We just resolve the flag + value pair here so the parent can render
+  // the editor and the right-pane preview.
   const detailFlag: AliasFlag | null =
     viewMode.kind === "flag-detail"
       ? ALIAS_FLAGS.find((f) => f.id === viewMode.flagId) ?? null
@@ -215,58 +371,6 @@ export function AliasScreen() {
   const detailValue: FlagValue | null =
     detailFlag && config ? config.flags[detailFlag.id] ?? null : null;
 
-  const detailItems: DetailItem[] = useMemo(() => {
-    if (!detailFlag || !detailValue) return [];
-    if (detailValue.kind === "text-list") {
-      const out: DetailItem[] = [
-        { kind: "toggle", enabled: detailValue.enabled },
-      ];
-      if (detailValue.values.length > 0) {
-        out.push({ kind: "header", label: "Values" });
-        detailValue.values.forEach((v, i) =>
-          out.push({ kind: "value", index: i, text: v }),
-        );
-      }
-      out.push({ kind: "add" });
-      return out;
-    }
-    if (detailValue.kind === "multi-with-custom") {
-      const pickedSet = new Set(detailValue.picked);
-      const out: DetailItem[] = [
-        { kind: "toggle", enabled: detailValue.enabled },
-      ];
-      if ((detailFlag.picklist?.length ?? 0) > 0) {
-        out.push({ kind: "header", label: "Common filters" });
-        for (const tok of detailFlag.picklist!) {
-          out.push({ kind: "picklist", token: tok, picked: pickedSet.has(tok) });
-        }
-      }
-      if (detailValue.custom.length > 0) {
-        out.push({ kind: "header", label: "Custom tokens" });
-        detailValue.custom.forEach((v, i) =>
-          out.push({ kind: "custom", index: i, text: v }),
-        );
-      }
-      out.push({ kind: "add" });
-      return out;
-    }
-    return [];
-  }, [detailFlag, detailValue]);
-
-  const detailSelectableIndices = useMemo(
-    () => detailItems.flatMap((it, i) => (isSelectableDetailItem(it) ? [i] : [])),
-    [detailItems],
-  );
-
-  // Reset detail selection on entering / on items shape change.
-  useEffect(() => {
-    if (viewMode.kind !== "flag-detail") return;
-    if (detailSelectableIndices.length === 0) return;
-    if (!detailItems[detailSelectedIdx] || !isSelectableDetailItem(detailItems[detailSelectedIdx])) {
-      setDetailSelectedIdx(detailSelectableIndices[0]);
-    }
-  }, [viewMode, detailItems, detailSelectableIndices, detailSelectedIdx]);
-
   // ── Helper: check whether a row is gated (requires unmet) ─────────────
   const isGated = useCallback(
     (flag: AliasFlag): boolean => {
@@ -369,6 +473,16 @@ export function AliasScreen() {
     [],
   );
 
+  // Remove a value from the dev-load flag — invoked when the user deletes a
+  // "Dev-loaded channels" row inside the --channels editor. The derived
+  // section is sourced from this flag, so the deletion lands here, not in
+  // channels.values. updateFlag keeps enabled-state and cascades consistent.
+  const removeDevloadChannel = useCallback((val: string) => {
+    setConfig((prev) =>
+      prev ? { ...prev, flags: withoutDerivedChannel(prev.flags, val) } : prev,
+    );
+  }, []);
+
   const editAliasName = useCallback(async () => {
     if (!config) return;
     const v = await modal.input(
@@ -400,7 +514,7 @@ export function AliasScreen() {
     // so there's no "what does enter do here?" overloading.
     const k = selectedRow.value.kind;
     if (k === "text-list" || k === "multi-with-custom") {
-      setDetailSelectedIdx(0);
+      // FlagDetailEditor manages its own cursor — parent just flips mode.
       setViewMode({ kind: "flag-detail", flagId: selectedRow.flag.id });
       return;
     }
@@ -450,11 +564,22 @@ export function AliasScreen() {
     }
 
     try {
-      const r = await writeAliasToShell(config, target);
-      await modal.message(
-        "Alias written",
-        `${r.action === "created" ? "Created" : "Updated"} ${r.path}\n\nRun \`source ${r.path}\` or open a new shell to use it.`,
-        "success",
+      // If we adopted a lossless hand-written alias, pass its line range so
+      // the FIRST write replaces that line in place (absorbing it into the
+      // managed block) rather than appending a second alias. Once the block
+      // exists, the writer ignores the range and splices by markers.
+      const r = await writeAliasToShell(
+        config,
+        target,
+        pendingAdoptRange ? { adoptLineRange: pendingAdoptRange } : {},
+      );
+      // The adopted line is now gone (replaced by the block); drop the range
+      // so subsequent writes don't try to re-target a line that moved.
+      if (pendingAdoptRange) setPendingAdoptRange(null);
+      // Non-blocking confirmation on the status line — no "press any key".
+      const name = r.path.split("/").pop() || r.path;
+      setWriteStatus(
+        `✓ ${r.action === "created" ? "Created" : "Updated"} ${name} — source it or open a new shell`,
       );
       setShells(await detectShells());
       // We just wrote the rc file with current in-memory flag values, so
@@ -467,7 +592,7 @@ export function AliasScreen() {
         "error",
       );
     }
-  }, [config, shells, modal]);
+  }, [config, shells, modal, pendingAdoptRange]);
 
   // ── Keyboard ──────────────────────────────────────────────────────────
   // j/k navigate the selectable subset, jumping over headers/legend lines.
@@ -490,154 +615,21 @@ export function AliasScreen() {
     [selectableIndices, selectedIdx],
   );
 
-  // ── Flag-detail sub-screen mutators ───────────────────────────────────
-  const moveDetailSelection = useCallback(
-    (dir: 1 | -1) => {
-      if (detailSelectableIndices.length === 0) return;
-      const cursorPos = detailSelectableIndices.indexOf(detailSelectedIdx);
-      const nextPos =
-        cursorPos === -1
-          ? dir === 1
-            ? 0
-            : detailSelectableIndices.length - 1
-          : Math.min(
-              detailSelectableIndices.length - 1,
-              Math.max(0, cursorPos + dir),
-            );
-      setDetailSelectedIdx(detailSelectableIndices[nextPos]);
-    },
-    [detailSelectableIndices, detailSelectedIdx],
-  );
-
-  const handleDetailToggle = useCallback(() => {
-    if (!detailFlag || !detailValue) return;
-    const item = detailItems[detailSelectedIdx];
-    if (!item) return;
-    if (item.kind === "toggle") {
-      if (detailValue.kind === "text-list") {
-        updateFlag(detailFlag.id, { ...detailValue, enabled: !detailValue.enabled });
-      } else if (detailValue.kind === "multi-with-custom") {
-        updateFlag(detailFlag.id, { ...detailValue, enabled: !detailValue.enabled });
-      }
-      return;
-    }
-    if (item.kind === "picklist" && detailValue.kind === "multi-with-custom") {
-      const pickedSet = new Set(detailValue.picked);
-      const next = pickedSet.has(item.token)
-        ? detailValue.picked.filter((p) => p !== item.token)
-        : [...detailValue.picked, item.token];
-      updateFlag(detailFlag.id, {
-        ...detailValue,
-        enabled: true,
-        picked: next,
-      });
-      return;
-    }
-    if (item.kind === "add") {
-      void handleDetailAdd();
-      return;
-    }
-    // value / custom rows: enter does nothing destructive; use `d` to delete.
-  }, [detailFlag, detailValue, detailItems, detailSelectedIdx, updateFlag]);
-
-  const handleDetailAdd = useCallback(async () => {
-    if (!detailFlag || !detailValue) return;
-    if (detailValue.kind === "text-list") {
-      const v = await modal.input(`Add to ${detailFlag.flag}`, "Value");
-      if (v === null || v.length === 0) return;
-      updateFlag(detailFlag.id, {
-        ...detailValue,
-        enabled: true,
-        values: [...detailValue.values, v],
-      });
-      return;
-    }
-    if (detailValue.kind === "multi-with-custom") {
-      const v = await modal.input(
-        `Add custom token`,
-        'Token (e.g. "router" or "!file" for negation)',
-      );
-      if (v === null || v.length === 0) return;
-      updateFlag(detailFlag.id, {
-        ...detailValue,
-        enabled: true,
-        custom: [...detailValue.custom, v],
-      });
-      return;
-    }
-  }, [detailFlag, detailValue, modal, updateFlag]);
-
-  const handleDetailDelete = useCallback(async () => {
-    if (!detailFlag || !detailValue) return;
-    const item = detailItems[detailSelectedIdx];
-    if (!item) return;
-    if (item.kind === "value" && detailValue.kind === "text-list") {
-      const target = detailValue.values[item.index];
-      const ok = await modal.confirm(
-        "Remove item?",
-        `Remove "${truncate(target, 60)}" from ${detailFlag.flag}?`,
-      );
-      if (!ok) return;
-      updateFlag(detailFlag.id, {
-        ...detailValue,
-        values: detailValue.values.filter((_, i) => i !== item.index),
-      });
-      return;
-    }
-    if (item.kind === "custom" && detailValue.kind === "multi-with-custom") {
-      const target = detailValue.custom[item.index];
-      const ok = await modal.confirm(
-        "Remove custom token?",
-        `Remove "${truncate(target, 60)}" from ${detailFlag.flag}?`,
-      );
-      if (!ok) return;
-      updateFlag(detailFlag.id, {
-        ...detailValue,
-        custom: detailValue.custom.filter((_, i) => i !== item.index),
-      });
-      return;
-    }
-  }, [detailFlag, detailValue, detailItems, detailSelectedIdx, modal, updateFlag]);
-
+  // The flag-detail sub-screen handles its own cursor + key + render
+  // (see FlagDetailEditor component). The parent only needs to know how
+  // to leave it.
   const exitDetail = useCallback(() => {
     setViewMode({ kind: "main" });
-    setDetailSelectedIdx(0);
   }, []);
 
   // ── Keyboard handler ──────────────────────────────────────────────────
-  // Dispatches on viewMode so sub-screen keybindings don't leak into main.
+  // When the sub-screen is mounted, FlagDetailEditor installs its own
+  // keyboard handler. Both handlers fire (OpenTUI's useKeyboard delivers
+  // to every subscriber), so this handler must SKIP the keys the child
+  // owns to avoid double-dispatch. We bail entirely while in detail mode.
   useKeyboardHandler((input, key) => {
     if (state.modal) return;
-
-    if (viewMode.kind === "flag-detail") {
-      if (input === "j" || key.downArrow) {
-        moveDetailSelection(1);
-        return;
-      }
-      if (input === "k" || key.upArrow) {
-        moveDetailSelection(-1);
-        return;
-      }
-      if (key.return || input === " " || key.name === "space") {
-        handleDetailToggle();
-        return;
-      }
-      if (input === "a") {
-        void handleDetailAdd();
-        return;
-      }
-      if (input === "d") {
-        void handleDetailDelete();
-        return;
-      }
-      if (input === "h") {
-        exitDetail();
-        return;
-      }
-      // Esc is handled by the global handler — it'll exit the entire screen
-      // back to plugins, which is fine. `h` is the documented "back to main".
-      return;
-    }
+    if (viewMode.kind === "flag-detail") return;
 
     // Main mode.
     if (input === "j" || key.downArrow) {
@@ -676,7 +668,8 @@ export function AliasScreen() {
   });
 
   // ── Render ────────────────────────────────────────────────────────────
-  const previewBlock = config ? renderAlias(config, "zsh").block : "";
+  const previewSegments = config ? renderArgs(config) : [];
+  const previewAliasName = config?.aliasName ?? "";
 
   // Native OpenTUI scrollboxes own the scroll math. We render every item
   // into the scrollbox's content area and ask the renderable to scroll the
@@ -684,20 +677,22 @@ export function AliasScreen() {
   // windowed approach (ScrollableList) overstrike-rendered rows when its
   // height computation drifted off the actual panel size.
   const mainScrollRef = useRef<ScrollBoxRenderable | null>(null);
-  const detailScrollRef = useRef<ScrollBoxRenderable | null>(null);
-
-  useEffect(() => {
-    mainScrollRef.current?.scrollChildIntoView(`alias-row-${selectedIdx}`);
-  }, [selectedIdx]);
 
   useEffect(() => {
-    if (viewMode.kind !== "flag-detail") return;
-    detailScrollRef.current?.scrollChildIntoView(
-      `alias-detail-row-${detailSelectedIdx}`,
-    );
-  }, [detailSelectedIdx, viewMode]);
+    const item = items[selectedIdx];
+    if (!item) return;
+    mainScrollRef.current?.scrollChildIntoView(`alias-row-${getItemKey(item)}`);
+  }, [items, selectedIdx]);
 
   const inDetail = viewMode.kind === "flag-detail" && detailFlag && detailValue;
+  // FlagDetailEditor only handles text-list and multi-with-custom values;
+  // narrow the type for the JSX below.
+  const editableDetailValue =
+    inDetail &&
+    (detailValue.kind === "text-list" ||
+      detailValue.kind === "multi-with-custom")
+      ? detailValue
+      : null;
 
   const mainListPanel = !config ? (
     <text fg="gray">{error ? `Error: ${error}` : "Loading..."}</text>
@@ -711,7 +706,9 @@ export function AliasScreen() {
       >
         <box flexDirection="column">
           {items.map((item, idx) => (
-            <box key={getItemKey(item)} id={`alias-row-${idx}`}>
+            // id is content-derived (not positional `${idx}`) so OpenTUI's
+            // reconciler stays in lockstep with React's key-based reconcile.
+            <box key={getItemKey(item)} id={`alias-row-${getItemKey(item)}`}>
               {renderItem(item, idx === selectedIdx, isGated)}
             </box>
           ))}
@@ -720,35 +717,66 @@ export function AliasScreen() {
     </box>
   );
 
-  const detailListPanel = inDetail ? (
-    <box flexDirection="column" height="100%">
-      <text fg="#7e57c2">
-        <strong>{detailFlag.flag}</strong>
-      </text>
-      <text fg="gray">{`(h to go back to all flags)`}</text>
-      <text> </text>
-      <scrollbox
-        ref={detailScrollRef}
-        scrollY={true}
-        scrollX={false}
-        flexGrow={1}
-      >
-        <box flexDirection="column">
-          {detailItems.map((item, idx) => (
-            <box key={getDetailItemKey(item, idx)} id={`alias-detail-row-${idx}`}>
-              {renderDetailItem(item, idx === detailSelectedIdx)}
-            </box>
-          ))}
-        </box>
-      </scrollbox>
-    </box>
-  ) : null;
-
-  const listPanel = inDetail ? detailListPanel : mainListPanel;
+  const listPanel =
+    inDetail && editableDetailValue ? (
+      <FlagDetailEditor
+        flag={detailFlag}
+        value={editableDetailValue}
+        onChange={(next) => updateFlag(detailFlag.id, next)}
+        onBack={exitDetail}
+        derivedValues={
+          detailFlag.id === CHANNELS_FLAG_ID && config
+            ? derivedChannelValues(config.flags)
+            : undefined
+        }
+        derivedLabel="From --dangerously-load:"
+        toggleLabel={
+          detailFlag.id === CHANNELS_FLAG_ID
+            ? "Enable own channels"
+            : undefined
+        }
+        onDerivedDelete={(v) => removeDevloadChannel(v)}
+      />
+    ) : (
+      mainListPanel
+    );
 
-  const mainDetailPanel = renderDetail(selectedRow, isGated, previewBlock);
+  const mainDetailPanel = renderDetail(
+    selectedRow,
+    isGated,
+    previewAliasName,
+    previewSegments,
+  );
+  // When editing --channels and there are derived rows, the right pane carries
+  // the contextual instruction about what deleting a derived row does — that
+  // explanation belongs here, not crammed into the left list.
+  const channelsHasDerived =
+    inDetail &&
+    detailFlag.id === CHANNELS_FLAG_ID &&
+    config &&
+    derivedChannelValues(config.flags).length > 0;
+  const derivedNote = channelsHasDerived
+    ? "Rows under “From --dangerously-load:” are derived from the --dangerously-load-development-channels flag. Deleting one here removes it from that flag."
+    : undefined;
+  // The right-pane `State:` line is informational — it describes what the alias
+  // actually runs. For --channels that's the FINAL channel list: the union of
+  // the user's own channels and the derived (dev-loaded) ones. We show the
+  // union count so it agrees with the list row's count and the Preview, and
+  // annotate how many are derived so the source is clear. Computed only when
+  // editing --channels; other flags fall back to their own summary.
+  const stateOverride =
+    inDetail && detailFlag.id === CHANNELS_FLAG_ID && config
+      ? channelsStateSummary(config.flags)
+      : undefined;
   const detailDetailPanel = inDetail
-    ? renderFlagDetailRightPane(detailFlag, detailValue, previewBlock)
+    ? renderFlagDetailRightPane(
+        detailFlag,
+        detailValue,
+        previewAliasName,
+        previewSegments,
+        derivedNote,
+        stateOverride,
+      )
     : null;
   const detailPanel = inDetail ? detailDetailPanel : mainDetailPanel;
 
@@ -757,9 +785,11 @@ export function AliasScreen() {
     : 0;
   const subtitle = inDetail
     ? `editing ${detailFlag.flag}`
-    : config
-      ? `${enabledCount} flag${enabledCount === 1 ? "" : "s"} enabled`
-      : "";
+    : writeStatus
+      ? writeStatus
+      : config
+        ? `${enabledCount} flag${enabledCount === 1 ? "" : "s"} enabled`
+        : "";
 
   // Resolve the rc-file name we'd actually write to (basename of the chosen
   // shell's path). Falls back to "shell" if no shells were detected — UI
@@ -778,15 +808,15 @@ export function AliasScreen() {
     ? rcSnapshot !== null && !shallowFlagsEqual(config.flags, rcSnapshot)
     : false;
 
-  const footerHints = inDetail
-    ? renderFooterHints([
+  const footerHints: FooterHint[] = inDetail
+    ? [
         { keys: ["↑", "↓"], label: "move" },
         { keys: ["space"], label: "toggle" },
         { keys: ["a"], label: "add" },
         { keys: ["d"], label: "delete" },
         { keys: ["h"], label: "back" },
-      ])
-    : renderFooterHints([
+      ]
+    : [
         { keys: ["↑", "↓"], label: "move" },
         { keys: ["space"], label: "toggle" },
         { keys: ["e"], label: "edit" },
@@ -795,7 +825,7 @@ export function AliasScreen() {
           keys: ["w"],
           label: `${dirty ? "*" : ""}write to ${writeLabel}`,
         },
-      ]);
+      ];
 
   return (
     <ScreenLayout
@@ -811,6 +841,38 @@ export function AliasScreen() {
 
 // ─── Helpers ────────────────────────────────────────────────────────────
 
+/**
+ * Summarize the EFFECTIVE state of `--channels` for the detail `State:` line:
+ * the final channel list that the alias will actually run, i.e. the union of
+ * the user's own (enabled) channels and the derived dev-loaded ones. This must
+ * agree with the list row's union count and the Preview.
+ *
+ * Returns "off" when nothing is emitted, or e.g.:
+ *   - "2 channels" (all own, no derived)
+ *   - "1 channel (from --dangerously-load)" (purely derived, own off/empty)
+ *   - "2 channels (1 from --dangerously-load)" (mixed)
+ */
+function channelsStateSummary(flags: Record<string, FlagValue>): string {
+  const ownValue = flags[CHANNELS_FLAG_ID];
+  const ownValues =
+    ownValue && ownValue.kind === "text-list" && ownValue.enabled
+      ? ownValue.values.filter((v) => v.length > 0)
+      : [];
+  const derived = derivedChannelValues(flags);
+  // Union, deduped, matching the writer's render-time union.
+  const total = new Set([...ownValues, ...derived]).size;
+  if (total === 0) return "off";
+  const noun = total === 1 ? "channel" : "channels";
+  if (derived.length === 0) return `${total} ${noun}`;
+  // How many of the union come from the derived flag (after dedup with own).
+  const derivedInUnion = new Set(derived).size;
+  const derivedNote =
+    derivedInUnion === total
+      ? "from --dangerously-load"
+      : `${derivedInUnion} from --dangerously-load`;
+  return `${total} ${noun} (${derivedNote})`;
+}
+
 /**
  * Compare two flag maps for value equality. We render-then-diff via JSON
  * because FlagValues are small, fully serialisable, and order-insensitive
@@ -849,6 +911,47 @@ function isFlagEnabled(value: FlagValue | undefined): boolean {
   }
 }
 
+/**
+ * Pick a managed-alias name that can't shadow a surviving hand-written alias.
+ *
+ * On a not-lossless adoption we keep the user's original `<original>` line in
+ * the rc file, so the managed block must NOT share its name (shell aliases are
+ * last-definition-wins — a same-named block would override the original and
+ * silently drop the very tokens that made it not-lossless).
+ *
+ * Strategy: prefer the tool's `current` name if it already differs from the
+ * original. Otherwise derive `<original>m`, `<original>m2`, … until we find one
+ * that is valid AND collides with neither the original nor the other detected
+ * claude aliases. Falls back to a timestamp-free deterministic suffix.
+ */
+function pickDistinctName(
+  current: string,
+  original: string,
+  others: string[],
+): string {
+  // Names already taken by aliases we're leaving in place.
+  const taken = new Set<string>([original]);
+  for (const line of others) {
+    const m = /^alias\s+([A-Za-z_][A-Za-z0-9_-]*)\s*=/.exec(line.trim());
+    if (m) taken.add(m[1]);
+  }
+
+  // If our current name is already distinct + valid, just use it.
+  if (current !== original && !taken.has(current) && !validateAliasName(current)) {
+    return current;
+  }
+
+  // Derive a suffixed variant from the original.
+  const base = `${original}m`;
+  if (!taken.has(base) && !validateAliasName(base)) return base;
+  for (let n = 2; n < 100; n++) {
+    const cand = `${original}m${n}`;
+    if (!taken.has(cand) && !validateAliasName(cand)) return cand;
+  }
+  // Pathological fallback — should never be reached for sane inputs.
+  return `${original}managed`;
+}
+
 /**
  * Produce an "enabled by default" value for a flag — what we'd give it when
  * the user activates a dependent that needs this one on. For booleans this
@@ -1149,13 +1252,16 @@ function renderRow(
   selected: boolean,
   gated: boolean,
 ): React.ReactNode {
-  const enabled = isFlagEnabled(row.value);
+  // Prefer the precomputed effective state (e.g. --channels shows enabled when
+  // a dev-loaded channel forces it to emit) over the flag's own enabled flag.
+  const enabled = row.effectiveEnabled ?? isFlagEnabled(row.value);
   const marker = enabled ? "[x]" : "[ ]";
   const issueMark = row.issue ? " ⚠" : "";
   const fg = gated ? "gray" : enabled ? "white" : "gray";
   // Only show a value suffix when the flag carries non-redundant detail.
-  // Boolean / tri-state state is fully conveyed by the checkbox.
-  const detail = enabledDetail(row.value);
+  // Boolean / tri-state state is fully conveyed by the checkbox. A precomputed
+  // effectiveDetail (e.g. --channels union count) wins over the own-value one.
+  const detail = row.effectiveDetail ?? enabledDetail(row.value);
   const detailSuffix = detail ? `  ${detail}` : "";
   const line = `${selected ? "▶ " : "  "}${marker} ${row.flag.flag}${detailSuffix}${issueMark}`;
   if (selected) {
@@ -1204,7 +1310,8 @@ function enabledDetail(value: FlagValue): string {
 function renderDetail(
   row: Row | undefined,
   isGated: (f: AliasFlag) => boolean,
-  previewBlock: string,
+  aliasName: string,
+  segments: Segment[],
 ): React.ReactNode {
   if (!row) {
     return <text fg="gray">No row selected.</text>;
@@ -1217,13 +1324,15 @@ function renderDetail(
 
   // Preview is the only "global" element kept in the detail panel — it
   // updates as the user toggles, which is the strongest visual feedback for
-  // "what alias am I building". Shells live in the list-panel legend.
+  // "what alias am I building". We show argv one-per-line rather than the
+  // raw POSIX-escaped alias body (which contains `'\''` sequences that look
+  // alarming to readers who don't know the close-escape-reopen pattern).
   return (
     <box flexDirection="column">
       {headerAndBody}
       <text> </text>
-      <text fg="gray">Preview (zsh/bash):</text>
-      <text fg="white">{firstLine(previewBlock, 1)}</text>
+      <text fg="gray">Preview:</text>
+      {renderPreviewLines(aliasName, segments)}
     </box>
   );
 }
@@ -1256,6 +1365,10 @@ function renderFlagDetail(
   isGated: (f: AliasFlag) => boolean,
 ): React.ReactNode {
   const gated = isGated(row.flag);
+  // State must agree with the checkbox and the Preview. For --channels we show
+  // the effective channel-list summary (union of own + derived); other flags
+  // use their own value summary.
+  const stateText = row.stateSummary ?? summarizeValue(row.value);
   return (
     <box flexDirection="column">
       <text fg="white">
@@ -1265,7 +1378,7 @@ function renderFlagDetail(
       <text> </text>
       <text>
         <span fg="gray">State: </span>
-        <span fg="white">{summarizeValue(row.value)}</span>
+        <span fg="white">{stateText}</span>
       </text>
       {gated && (
         <text fg="gray">
@@ -1279,103 +1392,116 @@ function renderFlagDetail(
   );
 }
 
-function firstLine(block: string, skip: number): string {
-  const lines = block.split("\n");
-  return lines[skip] ?? "";
-}
-
 /**
- * Render footer hints as keycap badges + labels. Keys are rendered with an
- * inverted color (white bg, dark fg) so they read as visual chips rather
- * than letters dropped into prose. Multi-key bindings (`↑↓`) render as one
- * combined badge.
+ * Render the alias preview as one argv arg per line. This replaces the raw
+ * POSIX-escaped alias body (`alias c='claude '\''text with spaces'\'' …'`),
+ * which is correct but visually alarming — readers without POSIX shell
+ * fluency mistake `'\''` for broken quoting.
+ *
+ * We show each argv token on its own row, with values that need quoting
+ * wrapped in plain double quotes (display-only — these are NOT what gets
+ * written to the rc file). Composite segments (templated values) display
+ * with their `{token}` placeholders intact in cyan so users see exactly
+ * what will expand at shell-eval time.
+ *
+ * Example output:
+ *   alias c='claude
+ *     --dangerously-skip-permissions
+ *     --append-system-prompt  "you ae the smaretes model ever"
+ *     --debug                 plugins
+ *   '
  */
-function renderFooterHints(
-  hints: Array<{ keys: string[]; label: string }>,
+function renderPreviewLines(
+  aliasName: string,
+  segments: Segment[],
 ): React.ReactNode {
-  const nodes: React.ReactNode[] = [];
-  hints.forEach((hint, i) => {
-    if (i > 0) {
-      nodes.push(
-        <span key={`gap-${i}`} fg="gray">
-          {"   "}
+  if (segments.length === 0) {
+    return <text fg="white">{`alias ${aliasName || "?"}='claude'`}</text>;
+  }
+  const lines: React.ReactNode[] = [
+    <text key="head" fg="white">{`alias ${aliasName || "?"}='claude`}</text>,
+  ];
+  segments.forEach((seg, i) => {
+    lines.push(
+      <text key={`arg-${i}`} fg="white">
+        {"  "}
+        {renderPreviewSegment(seg)}
+      </text>,
+    );
+  });
+  lines.push(
+    <text key="tail" fg="white">
+      {"'"}
+    </text>,
+  );
+  return <>{lines}</>;
+}
+
+function renderPreviewSegment(seg: Segment): React.ReactNode {
+  if (seg.kind === "literal") {
+    return <span fg="white">{quoteForDisplay(seg.text)}</span>;
+  }
+  // Composite: literal parts as-is, raw parts as `{token}` reconstructed
+  // from the writer's TOKEN_TO_SUB map. We don't have direct access to the
+  // map here, so we reverse-lookup using the same forms.
+  const spans: React.ReactNode[] = [];
+  seg.parts.forEach((p, i) => {
+    if (p.kind === "literal") {
+      spans.push(
+        <span key={`p-${i}`} fg="white">
+          {p.text}
+        </span>,
+      );
+    } else {
+      spans.push(
+        <span key={`p-${i}`} fg="cyan">
+          {substitutionToToken(p.posix)}
         </span>,
       );
     }
-    nodes.push(
-      <span key={`k-${i}`} bg="#3f3f46" fg="#fafafa">
-        {` ${hint.keys.join("")} `}
-      </span>,
-    );
-    nodes.push(
-      <span key={`l-${i}`} fg="gray">
-        {` ${hint.label}`}
-      </span>,
-    );
   });
-  return <text>{nodes}</text>;
+  return <span>{spans}</span>;
 }
 
-// ─── Flag-detail sub-screen render helpers ─────────────────────────────
+const PREVIEW_SAFE = /^[A-Za-z0-9_\-=,:.\/!@%+]+$/;
 
-function getDetailItemKey(item: DetailItem, idx: number): string {
-  switch (item.kind) {
-    case "toggle":
-      return "toggle";
-    case "value":
-      return `value:${item.index}`;
-    case "picklist":
-      return `pick:${item.token}`;
-    case "custom":
-      return `custom:${item.index}`;
-    case "add":
-      return "add";
-    case "header":
-      return `header:${item.label}:${idx}`;
-  }
+function quoteForDisplay(text: string): string {
+  if (text === "") return '""';
+  if (PREVIEW_SAFE.test(text)) return text;
+  // Display-only quoting. We don't have to escape anything for the shell
+  // since this string never reaches a parser — it's just for the user to
+  // read. We do escape an embedded `"` to keep visual balance.
+  return `"${text.replace(/"/g, '\\"')}"`;
 }
 
-function renderDetailItem(
-  item: DetailItem,
-  isSelected: boolean,
-): React.ReactNode {
-  if (item.kind === "header") {
-    return <text fg="#7e57c2">{item.label}</text>;
-  }
-  const cursor = isSelected ? "▶ " : "  ";
-  let body: string;
-  switch (item.kind) {
-    case "toggle":
-      body = `[${item.enabled ? "x" : " "}] Enable flag`;
-      break;
-    case "value":
-      body = item.text;
-      break;
-    case "picklist":
-      body = `[${item.picked ? "x" : " "}] ${item.token}`;
-      break;
-    case "custom":
-      body = item.text;
-      break;
-    case "add":
-      body = "+ Add new...";
-      break;
-  }
-  const line = `${cursor}${body}`;
-  if (isSelected) {
-    return (
-      <text bg="#7e57c2" fg="white">
-        {line}
-      </text>
-    );
+/**
+ * Reverse-lookup the writer's POSIX substitution codes to their `{token}`
+ * forms. Mirror of `TOKEN_TO_SUB` in `alias-shell-writer.ts`.
+ */
+function substitutionToToken(posixCode: string): string {
+  switch (posixCode) {
+    case '$(basename "$PWD")':
+      return "{folder}";
+    case "$(date +%d)":
+      return "{day}";
+    case "$(date +%m)":
+      return "{month}";
+    case "$(date +%Y)":
+      return "{year}";
+    default:
+      return posixCode;
   }
-  return <text fg="white">{line}</text>;
 }
 
+
+
 function renderFlagDetailRightPane(
   flag: AliasFlag,
   value: FlagValue,
-  previewBlock: string,
+  aliasName: string,
+  segments: Segment[],
+  derivedNote?: string,
+  stateOverride?: string,
 ): React.ReactNode {
   return (
     <box flexDirection="column">
@@ -1383,14 +1509,20 @@ function renderFlagDetailRightPane(
         <strong>{flag.flag}</strong>
       </text>
       <text fg="gray">{flag.description}</text>
+      {derivedNote && (
+        <>
+          <text> </text>
+          <text fg="gray">{derivedNote}</text>
+        </>
+      )}
       <text> </text>
       <text>
         <span fg="gray">State: </span>
-        <span fg="white">{summarizeValue(value)}</span>
+        <span fg="white">{stateOverride ?? summarizeValue(value)}</span>
       </text>
       <text> </text>
-      <text fg="gray">Preview (zsh/bash):</text>
-      <text fg="white">{firstLine(previewBlock, 1)}</text>
+      <text fg="gray">Preview:</text>
+      {renderPreviewLines(aliasName, segments)}
       <text> </text>
       <text fg="gray">Keys:</text>
       <text fg="white">  space/enter toggle the highlighted row</text>