claudeup 4.18.0 → 4.19.0

package/src/ui/screens/AliasScreen.js

@@ -1,20 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
 import { ScreenLayout } from "../components/layout/index.js";
+import { FlagDetailEditor } from "../components/FlagDetailEditor.js";
 import { ALIAS_FLAGS, FLAG_GROUPS, } from "../../data/alias-flags.js";
-import { defaultAliasConfig, defaultValueFor, validateAliasName, DEFAULT_ALIAS_NAME, } from "../../services/alias-store.js";
+import { defaultAliasConfig, defaultValueFor, validateAliasName, derivedChannelValues, withoutDerivedChannel, CHANNELS_FLAG_ID, DEFAULT_ALIAS_NAME, } from "../../services/alias-store.js";
 import { loadAliasName, saveAliasName } from "../../services/alias-settings.js";
-import { detectShells, renderAlias, validateConfig, writeAliasToShell, parseAliasFromRc, } from "../../services/alias-shell-writer.js";
+import { detectShells, renderArgs, validateConfig, writeAliasToShell, parseAliasFromRc, findAdoptableAlias, } from "../../services/alias-shell-writer.js";
 import { readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 function isSelectableItem(item) {
     return item.kind === "alias-name" || item.kind === "flag";
 }
-function isSelectableDetailItem(item) {
-    return item.kind !== "header";
-}
 export function AliasScreen() {
     const { state } = useApp();
     const modal = useModal();
@@ -23,10 +21,103 @@ export function AliasScreen() {
     const [selectedIdx, setSelectedIdx] = useState(0);
     const [error, setError] = useState(null);
     const [viewMode, setViewMode] = useState({ 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(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(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(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(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.
     // Flag values are read directly from the shell rc file's managed block —
@@ -46,6 +137,7 @@ export function AliasScreen() {
                 const base = defaultAliasConfig();
                 base.aliasName = name;
                 let parsedFlags = null;
+                let foundAdoptable = null;
                 if (readTarget && existsSync(readTarget.path)) {
                     try {
                         const rcText = await readFile(readTarget.path, "utf8");
@@ -57,6 +149,12 @@ export function AliasScreen() {
                             // 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.
@@ -64,9 +162,15 @@ 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)
@@ -99,6 +203,30 @@ export function AliasScreen() {
                 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;
+                let effectiveDetail;
+                let stateSummary;
+                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: {
@@ -106,6 +234,9 @@ export function AliasScreen() {
                         flag,
                         value: config.flags[flag.id] ?? defaultValueFor(flag),
                         issue: issueMap.get(flag.id),
+                        effectiveEnabled,
+                        effectiveDetail,
+                        stateSummary,
                     },
                 });
             }
@@ -116,57 +247,13 @@ export function AliasScreen() {
     const selectableIndices = useMemo(() => items.flatMap((it, i) => (isSelectableItem(it) ? [i] : [])), [items]);
     // ── 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 = viewMode.kind === "flag-detail"
         ? ALIAS_FLAGS.find((f) => f.id === viewMode.flagId) ?? null
         : null;
     const detailValue = detailFlag && config ? config.flags[detailFlag.id] ?? null : null;
-    const detailItems = useMemo(() => {
-        if (!detailFlag || !detailValue)
-            return [];
-        if (detailValue.kind === "text-list") {
-            const out = [
-                { 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 = [
-                { 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) => {
         if (!flag.requires || !config)
@@ -257,6 +344,13 @@ export function AliasScreen() {
             return { ...prev, flags };
         });
     }, []);
+    // 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) => {
+        setConfig((prev) => prev ? { ...prev, flags: withoutDerivedChannel(prev.flags, val) } : prev);
+    }, []);
     const editAliasName = useCallback(async () => {
         if (!config)
             return;
@@ -286,7 +380,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;
         }
@@ -330,8 +424,18 @@ export function AliasScreen() {
             return;
         }
         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
             // the snapshot now matches in-memory state. Dirty indicator clears.
@@ -340,7 +444,7 @@ export function AliasScreen() {
         catch (err) {
             await modal.message("Write failed", err instanceof Error ? err.message : String(err), "error");
         }
-    }, [config, shells, modal]);
+    }, [config, shells, modal, pendingAdoptRange]);
     // ── Keyboard ──────────────────────────────────────────────────────────
     // j/k navigate the selectable subset, jumping over headers/legend lines.
     const moveSelection = useCallback((dir) => {
@@ -355,144 +459,22 @@ export function AliasScreen() {
             : Math.min(selectableIndices.length - 1, Math.max(0, cursorPos + dir));
         setSelectedIdx(selectableIndices[nextPos]);
     }, [selectableIndices, selectedIdx]);
-    // ── Flag-detail sub-screen mutators ───────────────────────────────────
-    const moveDetailSelection = useCallback((dir) => {
-        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".
+        if (viewMode.kind === "flag-detail")
             return;
-        }
         // Main mode.
         if (input === "j" || key.downArrow) {
             moveSelection(1);
@@ -528,29 +510,59 @@ 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
     // selected child into view whenever the cursor moves. The previous JS-
     // windowed approach (ScrollableList) overstrike-rendered rows when its
     // height computation drifted off the actual panel size.
     const mainScrollRef = useRef(null);
-    const detailScrollRef = useRef(null);
-    useEffect(() => {
-        mainScrollRef.current?.scrollChildIntoView(`alias-row-${selectedIdx}`);
-    }, [selectedIdx]);
     useEffect(() => {
-        if (viewMode.kind !== "flag-detail")
+        const item = items[selectedIdx];
+        if (!item)
             return;
-        detailScrollRef.current?.scrollChildIntoView(`alias-detail-row-${detailSelectedIdx}`);
-    }, [detailSelectedIdx, viewMode]);
+        mainScrollRef.current?.scrollChildIntoView(`alias-row-${getItemKey(item)}`);
+    }, [items, selectedIdx]);
     const inDetail = viewMode.kind === "flag-detail" && detailFlag && detailValue;
-    const mainListPanel = !config ? (_jsx("text", { fg: "gray", children: error ? `Error: ${error}` : "Loading..." })) : (_jsx("box", { flexDirection: "column", height: "100%", children: _jsx("scrollbox", { ref: mainScrollRef, scrollY: true, scrollX: false, flexGrow: 1, children: _jsx("box", { flexDirection: "column", children: items.map((item, idx) => (_jsx("box", { id: `alias-row-${idx}`, children: renderItem(item, idx === selectedIdx, isGated) }, getItemKey(item)))) }) }) }));
-    const detailListPanel = inDetail ? (_jsxs("box", { flexDirection: "column", height: "100%", children: [_jsx("text", { fg: "#7e57c2", children: _jsx("strong", { children: detailFlag.flag }) }), _jsx("text", { fg: "gray", children: `(h to go back to all flags)` }), _jsx("text", { children: " " }), _jsx("scrollbox", { ref: detailScrollRef, scrollY: true, scrollX: false, flexGrow: 1, children: _jsx("box", { flexDirection: "column", children: detailItems.map((item, idx) => (_jsx("box", { id: `alias-detail-row-${idx}`, children: renderDetailItem(item, idx === detailSelectedIdx) }, getDetailItemKey(item, idx)))) }) })] })) : null;
-    const listPanel = inDetail ? detailListPanel : mainListPanel;
-    const mainDetailPanel = renderDetail(selectedRow, isGated, previewBlock);
+    // 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 ? (_jsx("text", { fg: "gray", children: error ? `Error: ${error}` : "Loading..." })) : (_jsx("box", { flexDirection: "column", height: "100%", children: _jsx("scrollbox", { ref: mainScrollRef, scrollY: true, scrollX: false, flexGrow: 1, children: _jsx("box", { flexDirection: "column", children: items.map((item, idx) => (
+                // id is content-derived (not positional `${idx}`) so OpenTUI's
+                // reconciler stays in lockstep with React's key-based reconcile.
+                _jsx("box", { id: `alias-row-${getItemKey(item)}`, children: renderItem(item, idx === selectedIdx, isGated) }, getItemKey(item)))) }) }) }));
+    const listPanel = inDetail && editableDetailValue ? (_jsx(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, 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;
     const enabledCount = config
@@ -558,9 +570,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
     // surface mirrors the runtime behavior of `handleWrite`.
@@ -576,14 +590,14 @@ export function AliasScreen() {
         ? rcSnapshot !== null && !shallowFlagsEqual(config.flags, rcSnapshot)
         : false;
     const footerHints = inDetail
-        ? renderFooterHints([
+        ? [
             { 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" },
@@ -592,10 +606,41 @@ export function AliasScreen() {
                 keys: ["w"],
                 label: `${dirty ? "*" : ""}write to ${writeLabel}`,
             },
-        ]);
+        ];
     return (_jsx(ScreenLayout, { title: "Claude Alias", subtitle: subtitle, currentScreen: "alias", footerHints: footerHints, listPanel: listPanel, detailPanel: detailPanel }));
 }
 // ─── 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) {
+    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
@@ -633,6 +678,43 @@ function isFlagEnabled(value) {
             return value.enabled;
     }
 }
+/**
+ * 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, original, others) {
+    // Names already taken by aliases we're leaving in place.
+    const taken = new Set([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
@@ -871,13 +953,16 @@ function renderItem(item, isSelected, isGated) {
     }
 }
 function renderRow(row, selected, gated) {
-    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) {
@@ -917,7 +1002,7 @@ function enabledDetail(value) {
         }
     }
 }
-function renderDetail(row, isGated, previewBlock) {
+function renderDetail(row, isGated, aliasName, segments) {
     if (!row) {
         return _jsx("text", { fg: "gray", children: "No row selected." });
     }
@@ -926,83 +1011,101 @@ function renderDetail(row, isGated, previewBlock) {
         : renderFlagDetail(row, isGated);
     // 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.
-    return (_jsxs("box", { flexDirection: "column", children: [headerAndBody, _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Preview (zsh/bash):" }), _jsx("text", { fg: "white", children: firstLine(previewBlock, 1) })] }));
+    // "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 (_jsxs("box", { flexDirection: "column", children: [headerAndBody, _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Preview:" }), renderPreviewLines(aliasName, segments)] }));
 }
 function renderAliasNameDetail(row) {
     return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "white", children: _jsx("strong", { children: "Alias name" }) }), _jsx("text", { fg: "gray", children: "Shell name for the wrapped claude command. Default: \"c\". Letters, digits, _ or - only." }), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Current: " }), _jsx("span", { fg: "white", children: _jsx("strong", { children: row.value }) })] }), _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Enter to rename. r resets to \"c\"." })] }));
 }
 function renderFlagDetail(row, isGated) {
     const gated = isGated(row.flag);
-    return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "white", children: _jsx("strong", { children: row.flag.flag }) }), _jsx("text", { fg: "gray", children: row.flag.description }), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "State: " }), _jsx("span", { fg: "white", children: summarizeValue(row.value) })] }), gated && (_jsx("text", { fg: "gray", children: `Depends on --${row.flag.requires}. Enabling this will turn that on too.` })), row.issue && (_jsx("text", { fg: "yellow", children: `Conflict: ${row.issue.reason}` }))] }));
-}
-function firstLine(block, skip) {
-    const lines = block.split("\n");
-    return lines[skip] ?? "";
+    // 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 (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "white", children: _jsx("strong", { children: row.flag.flag }) }), _jsx("text", { fg: "gray", children: row.flag.description }), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "State: " }), _jsx("span", { fg: "white", children: stateText })] }), gated && (_jsx("text", { fg: "gray", children: `Depends on --${row.flag.requires}. Enabling this will turn that on too.` })), row.issue && (_jsx("text", { fg: "yellow", children: `Conflict: ${row.issue.reason}` }))] }));
 }
 /**
- * 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) {
-    const nodes = [];
-    hints.forEach((hint, i) => {
-        if (i > 0) {
-            nodes.push(_jsx("span", { fg: "gray", children: "   " }, `gap-${i}`));
-        }
-        nodes.push(_jsx("span", { bg: "#3f3f46", fg: "#fafafa", children: ` ${hint.keys.join("")} ` }, `k-${i}`));
-        nodes.push(_jsx("span", { fg: "gray", children: ` ${hint.label}` }, `l-${i}`));
+function renderPreviewLines(aliasName, segments) {
+    if (segments.length === 0) {
+        return _jsx("text", { fg: "white", children: `alias ${aliasName || "?"}='claude'` });
+    }
+    const lines = [
+        _jsx("text", { fg: "white", children: `alias ${aliasName || "?"}='claude` }, "head"),
+    ];
+    segments.forEach((seg, i) => {
+        lines.push(_jsxs("text", { fg: "white", children: ["  ", renderPreviewSegment(seg)] }, `arg-${i}`));
     });
-    return _jsx("text", { children: nodes });
+    lines.push(_jsx("text", { fg: "white", children: "'" }, "tail"));
+    return _jsx(_Fragment, { children: lines });
 }
-// ─── Flag-detail sub-screen render helpers ─────────────────────────────
-function getDetailItemKey(item, idx) {
-    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 renderPreviewSegment(seg) {
+    if (seg.kind === "literal") {
+        return _jsx("span", { fg: "white", children: quoteForDisplay(seg.text) });
     }
+    // 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 = [];
+    seg.parts.forEach((p, i) => {
+        if (p.kind === "literal") {
+            spans.push(_jsx("span", { fg: "white", children: p.text }, `p-${i}`));
+        }
+        else {
+            spans.push(_jsx("span", { fg: "cyan", children: substitutionToToken(p.posix) }, `p-${i}`));
+        }
+    });
+    return _jsx("span", { children: spans });
 }
-function renderDetailItem(item, isSelected) {
-    if (item.kind === "header") {
-        return _jsx("text", { fg: "#7e57c2", children: item.label });
-    }
-    const cursor = isSelected ? "▶ " : "  ";
-    let body;
-    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 (_jsx("text", { bg: "#7e57c2", fg: "white", children: line }));
+const PREVIEW_SAFE = /^[A-Za-z0-9_\-=,:.\/!@%+]+$/;
+function quoteForDisplay(text) {
+    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, '\\"')}"`;
+}
+/**
+ * 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) {
+    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 _jsx("text", { fg: "white", children: line });
 }
-function renderFlagDetailRightPane(flag, value, previewBlock) {
-    return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "white", children: _jsx("strong", { children: flag.flag }) }), _jsx("text", { fg: "gray", children: flag.description }), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "State: " }), _jsx("span", { fg: "white", children: summarizeValue(value) })] }), _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Preview (zsh/bash):" }), _jsx("text", { fg: "white", children: firstLine(previewBlock, 1) }), _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Keys:" }), _jsx("text", { fg: "white", children: "  space/enter toggle the highlighted row" }), _jsx("text", { fg: "white", children: "  a add a new value" }), _jsx("text", { fg: "white", children: "  d delete the highlighted item" }), _jsx("text", { fg: "white", children: "  h back to flag list" })] }));
+function renderFlagDetailRightPane(flag, value, aliasName, segments, derivedNote, stateOverride) {
+    return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "white", children: _jsx("strong", { children: flag.flag }) }), _jsx("text", { fg: "gray", children: flag.description }), derivedNote && (_jsxs(_Fragment, { children: [_jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: derivedNote })] })), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "State: " }), _jsx("span", { fg: "white", children: stateOverride ?? summarizeValue(value) })] }), _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Preview:" }), renderPreviewLines(aliasName, segments), _jsx("text", { children: " " }), _jsx("text", { fg: "gray", children: "Keys:" }), _jsx("text", { fg: "white", children: "  space/enter toggle the highlighted row" }), _jsx("text", { fg: "white", children: "  a add a new value" }), _jsx("text", { fg: "white", children: "  d delete the highlighted item" }), _jsx("text", { fg: "white", children: "  h back to flag list" })] }));
 }