@molecule/app-ide-react 1.9.0 → 1.10.0

package/dist/components/ChatPanel.js

@@ -19,7 +19,7 @@ import { CHAT_CARD_ICON_SIZE, chatCardBorder, chatCardStyle } from './chat-card-
 import { COMMAND_CATEGORIES, COMMANDS, matchesSideChannelCommand, } from './chat-commands.js';
 import { stripCommitCoauthorTrailer } from './chat-commit-utilities.js';
 import { cachedPromptTokens, formatTokenTotal } from './chat-cost-utilities.js';
-import { effortOptionsForModel, nativeEffortName, parseEffortCommand, resolveEffortArg, } from './chat-effort-utilities.js';
+import { defaultEffortForModel, effortOptionsForModel, nativeEffortName, parseEffortCommand, resolveEffortArg, } from './chat-effort-utilities.js';
 import { buildHelpText } from './chat-help-utilities.js';
 import { effectiveModeModelId, freeTierLockReason, freeTierUsableMode, isModeModelLocked, modeSettingKey, parseModelModeCommand, resolveModeModel, } from './chat-model-mode-utilities.js';
 import { modelHasPeakPricing, modelPeakMultiplier, modelPeakWindowLabels, modelUsageRate, sortModels, } from './chat-models-utilities.js';
@@ -935,6 +935,36 @@ export function CommitCardItem({ card, onRevert, }) {
                             return _jsx("div", { children: path }, path);
                         }) }) }))] }) }));
 }
+/**
+ * The clickable author-name in a message header (C5) — a reset button that
+ * renders exactly like the bold name span it replaces, with an underline on
+ * hover/focus as the affordance, and opens the author's profile like their
+ * avatar does. Its own component so the hover state never re-renders the
+ * (memoized, heavy) message row.
+ *
+ * @param props - Click handler + the name text.
+ * @param props.onClick - Opens the author's profile.
+ * @param props.children - The author's display name.
+ * @returns The name button.
+ */
+function AuthorNameButton({ onClick, children, }) {
+    const [hover, setHover] = useState(false);
+    return (_jsx("button", { type: "button", onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onFocus: () => setHover(true), onBlur: () => setHover(false), "data-mol-id": "chat-user-name-button", 
+        // Full button reset so it is byte-identical to the former bold span at
+        // rest — the underline affordance is the only visual change on hover.
+        style: {
+            padding: 0,
+            margin: 0,
+            border: 'none',
+            background: 'transparent',
+            font: 'inherit',
+            color: 'inherit',
+            fontWeight: 600,
+            cursor: 'pointer',
+            textDecoration: hover ? 'underline' : 'none',
+        }, children: children }));
+}
+AuthorNameButton.displayName = 'AuthorNameButton';
 /**
  * Renders a single message (user or assistant) in the chat timeline.
  * Wrapped in React.memo so unchanged messages skip re-rendering when
@@ -943,7 +973,7 @@ export function CommitCardItem({ card, onRevert, }) {
  * @returns The rendered message item.
  */
 const MessageItem = memo(function MessageItem(props) {
-    const { msg, sendMessage, handleAskUserResponse, isLoading, streamingStatus, onNavigatePreview, undoneTcIds, handleUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, handleFileRevert, setInputAndCursorEnd, setModelPicker, chatMode, userAvatar, onAvatarClick, discovery, buildUpgradeCta, agentName, canEdit, } = props;
+    const { msg, sendMessage, handleAskUserResponse, isLoading, streamingStatus, onNavigatePreview, undoneTcIds, handleUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, handleFileRevert, setInputAndCursorEnd, setModelPicker, chatMode, userAvatar, onProfileClick, currentUserId, discovery, buildUpgradeCta, agentName, canEdit, } = props;
     const cm = getClassMap();
     const themeMode = useThemeMode();
     const isLight = themeMode === 'light';
@@ -959,6 +989,15 @@ const MessageItem = memo(function MessageItem(props) {
     // A real, user-typed message (the only one styled with the blue border + the
     // user's own avatar).
     const isUser = msg.role === 'user' && !isAutomatic;
+    // Who this message belongs to — the identity a profile click hands the host.
+    // An AUTHORED message is that author's (a teammate's click opens THEIR
+    // profile, never the viewer's); an author-less one (the local optimistic
+    // echo, legacy solo rows) is the signed-in user's own, stamped with
+    // currentUserId + the viewer's avatar so the host still knows who it is.
+    const authorIdentity = msg.author
+        ? { id: msg.author.id, name: msg.author.name, avatar: msg.author.avatar ?? null }
+        : { id: currentUserId, avatar: userAvatar ?? null };
+    const openAuthorProfile = onProfileClick ? () => onProfileClick(authorIdentity) : undefined;
     // Spacing follows the one timeline convention (see TIMELINE_ITEM_GAP above): a
     // single bottom margin, no top margin, no negatives — so a message can never
     // pull itself up over the previous item's spacing. Discovery is roomier but
@@ -980,11 +1019,16 @@ const MessageItem = memo(function MessageItem(props) {
                 // A real user message keeps its classic look: a gray surface with the
                 // molecule brand's ANIMATED blue gradient stripe (3px) on the left edge,
                 // drawn by the `::before` injected via USER_ACCENT_STYLE + gated on the
-                // data-mol-id below, and the user's full-size avatar. An auto-sent message
-                // is instead a green (success) tinted card — same chrome as the info cards
-                // — so it's unmistakably agent-sent, not user-typed (C2). A team note keeps
-                // the user-message look but swaps the blue stripe (its data-mol-id differs,
-                // so USER_ACCENT_STYLE never applies) for the gold team-only border.
+                // data-mol-id below, PLUS a solid blue outline ring (host-tunable via
+                // `--mol-chat-accent-border`) so a sent-to-Synthase message reads bordered
+                // the same way a team note does, and the user's full-size avatar. An
+                // auto-sent message is instead a green (success) tinted card — same chrome
+                // as the info cards — so it's unmistakably agent-sent, not user-typed (C2).
+                // A team note keeps the user-message look but swaps the blue chrome (its
+                // data-mol-id differs, so USER_ACCENT_STYLE never applies) for the gold
+                // team-only border — with its own solid 3px left band (an inset box-shadow,
+                // which starts at the border's inner edge exactly like the stripe's
+                // `inset: 0` ::before, so the two rows' left accents match in geometry).
                 ...(isAutomatic
                     ? chatCardStyle(AUTO_SENT_ACCENT)
                     : {
@@ -993,7 +1037,12 @@ const MessageItem = memo(function MessageItem(props) {
                         paddingTop: '10px',
                         paddingBottom: '10px',
                         paddingRight: '10px',
-                        ...(isTeamNote ? { border: `1px solid ${NOTICE_TONE.gold.accent}` } : {}),
+                        border: isTeamNote
+                            ? `1px solid ${NOTICE_TONE.gold.accent}`
+                            : '1px solid var(--mol-chat-accent-border, var(--mol-color-primary, #3060c0))',
+                        ...(isTeamNote
+                            ? { boxShadow: `inset 3px 0 0 0 ${NOTICE_TONE.gold.accent}` }
+                            : {}),
                     }),
             }, "data-mol-id": isTeamNote
                 ? 'chat-team-message'
@@ -1004,20 +1053,24 @@ const MessageItem = memo(function MessageItem(props) {
                 // when they have none — NEVER the viewing user's picture (which made
                 // a teammate's avatar-less message wear the viewer's own face). Only
                 // an author-less message (the local optimistic echo, legacy rows) is
-                // the signed-in user's own and uses their avatar.
+                // the signed-in user's own and uses their avatar. Clicking opens the
+                // AUTHOR's profile (own and teammate alike — the host decides which
+                // surface from the identity's id).
                 , { 
                     // An AUTHORED message shows that author's avatar — or their initial
                     // when they have none — NEVER the viewing user's picture (which made
                     // a teammate's avatar-less message wear the viewer's own face). Only
                     // an author-less message (the local optimistic echo, legacy rows) is
-                    // the signed-in user's own and uses their avatar.
-                    userAvatar: msg.author ? msg.author.avatar : userAvatar, name: msg.author?.name ?? undefined, size: 36, onClick: onAvatarClick })), _jsxs("div", { style: { flex: 1, minWidth: 0, marginTop: 1 }, children: [isAutomatic ? null : (_jsxs("div", { style: {
+                    // the signed-in user's own and uses their avatar. Clicking opens the
+                    // AUTHOR's profile (own and teammate alike — the host decides which
+                    // surface from the identity's id).
+                    userAvatar: authorIdentity.avatar, name: msg.author?.name ?? undefined, size: 36, onClick: openAuthorProfile })), _jsxs("div", { style: { flex: 1, minWidth: 0, marginTop: 1 }, children: [isAutomatic ? null : (_jsxs("div", { style: {
                                 display: 'flex',
                                 alignItems: 'baseline',
                                 gap: 8,
                                 lineHeight: 1.3,
                                 marginBottom: 1,
-                            }, children: [_jsx("span", { style: { fontWeight: 600 }, children: msg.author?.name ?? t('ide.chat.you', undefined, { defaultValue: 'You' }) }), isTeamNote && (_jsx("span", { title: t('ide.chat.teamOnly.badge', { agentName: agentName ?? 'the assistant' }, {
+                            }, children: [openAuthorProfile ? (_jsx(AuthorNameButton, { onClick: openAuthorProfile, children: msg.author?.name ?? t('ide.chat.you', undefined, { defaultValue: 'You' }) })) : (_jsx("span", { style: { fontWeight: 600 }, children: msg.author?.name ?? t('ide.chat.you', undefined, { defaultValue: 'You' }) })), isTeamNote && (_jsx("span", { title: t('ide.chat.teamOnly.badge', { agentName: agentName ?? 'the assistant' }, {
                                         defaultValue: 'Team only — visible to your team; {{agentName}} will ignore it',
                                     }), "aria-label": t('ide.chat.teamOnly.badge', { agentName: agentName ?? 'the assistant' }, {
                                         defaultValue: 'Team only — visible to your team; {{agentName}} will ignore it',
@@ -1241,15 +1294,6 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     // visible; 420px bounds it on small tablets.
     const popupMaxHeight = isNarrow ? 'min(50dvh, 420px)' : '70vh';
     const http = useHttpClient();
-    // Bind the host's profile-click callback to the SIGNED-IN user's identity once.
-    // Hosts open the *own*-profile surface from this, so it is only ever attached to
-    // the signed-in user's OWN messages (see the per-message gate at the MessageItem
-    // call site — a teammate's avatar must never open the viewer's profile). Stable
-    // so MessageItem's memo isn't broken; `undefined` when the host opts out, which
-    // keeps every avatar non-interactive.
-    const onUserAvatarClick = useMemo(() => onProfileClick
-        ? () => onProfileClick({ avatar: userAvatar })
-        : undefined, [onProfileClick, userAvatar]);
     // If there's already a conversation (conversationId in the URL), always load
     // history — even when initialMessage is set. This prevents a refresh from
     // re-sending the initial prompt instead of restoring the existing conversation.
@@ -1265,19 +1309,39 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     const soundsConfigRef = useRef({ ...DEFAULT_SOUNDS_CONFIG });
     // ── Context usage tracking (ring indicator) ─────────────────────────────
     const [contextUsage, setContextUsage] = useState(null);
-    // Restore context usage from the history endpoint on mount
+    // Restore context usage from the history endpoint on mount. Retries a few
+    // times on failure: this used to be one-shot, so a single transient error at
+    // mount (an API deploy restart, a rate-limit blip) silently cost the context
+    // ring for the entire session — the state only ever refills from the next
+    // turn's `done` event (observed live 2026-08-29: ring gone, server data fine,
+    // reload fixed it).
     useEffect(() => {
         if (!hasConversation)
             return;
-        http
-            .get(endpoint)
-            .then((res) => {
-            if (res.data.contextUsage)
-                setContextUsage(res.data.contextUsage);
-        })
-            .catch(() => {
-            /* ignore */
-        });
+        let cancelled = false;
+        let attempt = 0;
+        const load = () => {
+            http
+                .get(endpoint)
+                .then((res) => {
+                if (cancelled)
+                    return;
+                if (res.data.contextUsage)
+                    setContextUsage(res.data.contextUsage);
+            })
+                .catch((_error) => {
+                // Transient failure — retry with backoff (bounded); after the budget,
+                // the next turn's done event repopulates the ring.
+                if (cancelled || attempt >= 3)
+                    return;
+                attempt++;
+                setTimeout(load, attempt * 4000);
+            });
+        };
+        load();
+        return () => {
+            cancelled = true;
+        };
     }, [endpoint, hasConversation, http]);
     // ── Auto-fix countdown state ──────────────────────────────────────────────
     // After the AI finishes, if verification found errors, show a countdown
@@ -1438,6 +1502,13 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     const sendMessageRef = useRef(() => { });
     useEffect(() => {
         if (autoFixCountdown && autoFixCountdown.secondsLeft === 0 && !autoFixCountdown.paused) {
+            // Defense-in-depth: arming is sender-only (a viewer never owns a stream),
+            // but an autonomous agent-turn dispatch must never fire from a read-only
+            // client regardless of how the countdown came to exist.
+            if (canEdit === false) {
+                setAutoFixCountdown(null);
+                return;
+            }
             const msg = `Fix these issues:\n\n${autoFixCountdown.output}`;
             setAutoFixCountdown(null);
             // Auto-sent on the user's behalf — flag it so the chat renders it in the
@@ -1445,7 +1516,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             // user typed it (C2).
             sendMessageRef.current(msg, undefined, { automatic: true });
         }
-    }, [autoFixCountdown]);
+    }, [autoFixCountdown, canEdit]);
     // Auto-pause countdown when user starts typing
     const handleAutoFixPauseOnInput = useCallback(() => {
         setAutoFixCountdown((prev) => (prev && !prev.paused ? { ...prev, paused: true } : prev));
@@ -1463,6 +1534,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     // overwrite it), and `…PersistedRef` tracks the value we believe is on the
     // server so we only PATCH genuine changes (never the value we just hydrated).
     const [autoCommitLoaded, setAutoCommitLoaded] = useState(false);
+    // Live canEdit for async callbacks (the settings hydrate) that must not
+    // capture a stale role from mount time.
+    const canEditRef = useRef(canEdit);
+    canEditRef.current = canEdit;
     const autoCommitPersistedRef = useRef(0);
     const autoCommitPatchTimerRef = useRef(null);
     // Set after debouncedFetchPendingFiles is defined below (it depends on state
@@ -1919,6 +1994,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 setIsListening(false);
                 setCommandMenu(null);
                 setModelPicker(null);
+                setEffortPicker(null);
                 setSoundsPicker(null);
                 setFilePicker(null);
                 setPanelOverlay(null);
@@ -2115,6 +2191,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             // Popups are one-at-a-time — close any sibling before opening the picker
             setCommandMenu(null);
             setModelPicker(null);
+            setEffortPicker(null);
             setSoundsPicker(null);
             setFilePicker(null);
             setPanelOverlay(null);
@@ -2155,6 +2232,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     const [commandMenu, setCommandMenu] = useState(null);
     // ── Model picker (shown when typing /model <filter>) ──────────────────────
     const [modelPicker, setModelPicker] = useState(null);
+    const [effortPicker, setEffortPicker] = useState(null);
     // ── System cards (persistent inline notifications in chat history) ────────
     const [systemCards, setSystemCards] = useState([]);
     // Bug-report modal — `{ title }` (seed) when open, null when closed. Opened by
@@ -2519,6 +2597,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         // Close any sibling popup so overlays never stack (matches how the model
         // picker / sounds picker each own this region exclusively).
         setModelPicker(null);
+        setEffortPicker(null);
         setSoundsPicker(null);
         setCommandMenu(null);
         setPanelOverlayQuery(query);
@@ -2677,11 +2756,15 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             // Restore the persisted auto-commit cadence in the paused state (it
             // re-arms on the next file change). Auto-commit is ON by default: a
             // project that never set `autoCommitSeconds` resolves to the default
-            // cadence; an explicit 0 (the user turned it off) stays off.
+            // cadence; an explicit 0 (the user turned it off) stays off. Never for
+            // a read-only VIEWER: /commit is an editor action, so arming the
+            // countdown on a viewer's client only produces a doomed dispatch (and
+            // the denial card it minted) when it lapses.
             const savedAutoCommit = resolveAutoCommitSeconds(s?.autoCommitSeconds);
             autoCommitPersistedRef.current = savedAutoCommit;
-            if (savedAutoCommit > 0)
+            if (savedAutoCommit > 0 && canEditRef.current !== false) {
                 dispatchAutoCommit({ type: 'hydrate', seconds: savedAutoCommit });
+            }
             setAutoCommitLoaded(true);
         })
             .catch(() => {
@@ -2764,6 +2847,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     useEffect(() => {
         if (!autoCommitLoaded)
             return;
+        // A viewer never mirrors auto-commit state back to the project — the PATCH
+        // is editor-gated server-side and their reducer stays disarmed anyway.
+        if (canEdit === false)
+            return;
         const seconds = autoCommit.intervalSeconds;
         if (autoCommitPersistedRef.current === seconds)
             return;
@@ -2782,7 +2869,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             if (autoCommitPatchTimerRef.current)
                 clearTimeout(autoCommitPatchTimerRef.current);
         };
-    }, [autoCommit.intervalSeconds, autoCommitLoaded, http, projectId]);
+    }, [autoCommit.intervalSeconds, autoCommitLoaded, http, projectId, canEdit]);
     // ── Removed-model recovery ──────────────────────────────────────────────────
     // If the saved chatModel is no longer in the catalog (a provider retired it,
     // or we pruned the entry), notify once and fall back to the free-tier model.
@@ -3004,13 +3091,18 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     useEffect(() => {
         if (initialMessage && !hasConversation && sentInitialRef.current !== initialMessage) {
             sentInitialRef.current = initialMessage;
-            // Same rule as handleSubmit: a host side-channel command (e.g. /teamsay)
-            // renders no optimistic echo — the server's `message` event is the message.
+            // A read-only VIEWER never auto-sends the initial prompt: the host sources
+            // it from PROJECT-keyed localStorage, which survives a role demotion and a
+            // shared browser — a stale entry would auto-POST an agent turn the server
+            // 403s, surfacing a spurious red error on mount. Consume the ref (above)
+            // so it is never retried either.
+            if (canEdit === false)
+                return;
             const sideChannel = matchesSideChannelCommand(extraCommands?.length ? [...COMMANDS, ...extraCommands] : COMMANDS, initialMessage);
             sendMessage(initialMessage, undefined, sideChannel ? { suppressUserMessage: true } : undefined);
             onInitialMessageSent?.();
         }
-    }, [initialMessage, hasConversation, sendMessage, onInitialMessageSent, extraCommands]);
+    }, [initialMessage, hasConversation, sendMessage, onInitialMessageSent, extraCommands, canEdit]);
     // ── Auto-send pending message (e.g. "Fix with AI", preview errors) ──────
     // Defers sending while the AI is streaming to avoid queueing up auto-fix
     // messages during active work. Messages are sent once streaming ends.
@@ -3591,6 +3683,23 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             return;
         }
         setModelPicker(null);
+        // Show the effort picker while typing "/effort ..." — same live behavior
+        // as /model. Text after the command (minus the --plan/--execute flag)
+        // filters the level list; "?" keeps the textual status path instead. A
+        // dropdown-chosen mode survives further keystrokes unless a flag names one.
+        if (/^\/effort\s/i.test(val)) {
+            const typed = parseEffortCommand(val);
+            if (typed && (typed.kind === 'menu' || (typed.kind === 'set' && typed.arg !== '?'))) {
+                const typedMode = typed.mode;
+                setEffortPicker((p) => ({
+                    selectedIdx: -1,
+                    mode: typedMode ?? p?.mode ?? liveModelMode,
+                }));
+                setCommandMenu(null);
+                return;
+            }
+        }
+        setEffortPicker(null);
         if (val.startsWith('/') && !val.includes(' ')) {
             setCommandMenu({ selectedIdx: -1 });
         }
@@ -3686,6 +3795,29 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             logger.warn('Failed to update model processing region', { error });
         }
     }, [http, projectId, modelRegions]);
+    // Persist a mode's reasoning effort (used by both the /effort <level> typed
+    // path and the effort picker). Shallow-merge on the server means we send the
+    // WHOLE effortByMode map, not just the changed entry.
+    const applyEffortLevel = useCallback(async (targetMode, level, targetModel) => {
+        setEffortPicker(null);
+        setInputValue('');
+        try {
+            const nextByMode = { ...effortByMode, [targetMode]: level };
+            await http.patch(settingsPatchUrl(), { settings: { effortByMode: nextByMode } });
+            setEffortByMode(nextByMode);
+            addSystemCard(t('ide.chat.effort.setMode', {
+                mode: targetMode,
+                level: nativeEffortName(targetModel, level) ?? level,
+                model: targetModel?.label ?? '?',
+            }, { defaultValue: 'Reasoning effort for {{mode}} set to {{level}} ({{model}}).' }));
+        }
+        catch (error) {
+            logger.warn('Failed to update reasoning effort level', { error });
+            addSystemCard(t('ide.chat.effort.error', undefined, {
+                defaultValue: 'Failed to update reasoning effort.',
+            }));
+        }
+    }, [http, effortByMode, settingsPatchUrl, addSystemCard]);
     // The shared command registry UNION any host-provided commands (e.g.
     // molecule.dev's /deploy, /push, /invite, /teamsay), so the menu, grouping,
     // and dispatch all see one list and host commands never go missing. Declared
@@ -3694,11 +3826,12 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     const extraCommandIds = useMemo(() => new Set((extraCommands ?? []).map((c) => c.id)), [extraCommands]);
     const executeCommand = useCallback(async (id) => {
         setCommandMenu(null);
-        // Any command closes every sibling popup (panel overlay, model/sounds/mic
-        // pickers) so popups are strictly one-at-a-time — the branches below
-        // re-open their own.
+        // Any command closes every sibling popup (panel overlay, model/effort/
+        // sounds/mic pickers) so popups are strictly one-at-a-time — the branches
+        // below re-open their own.
         setPanelOverlay(null);
         setModelPicker(null);
+        setEffortPicker(null);
         setSoundsPicker(null);
         setMicPicker(null);
         // Host-provided commands (e.g. molecule.dev's /deploy, /push, /invite,
@@ -3743,8 +3876,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             setInputAndCursorEnd('/maxloops ');
         }
         else if (id === 'effort') {
-            // Prefill so the user types a level; /effort ? (or bare) shows status.
-            setInputAndCursorEnd('/effort ');
+            // Open the selectable level picker (mirrors /model) scoped to the live
+            // conversation mode; its mode dropdown re-scopes in place.
+            setInputValue('');
+            setEffortPicker({ selectedIdx: -1, mode: liveModelMode });
         }
         else if (id === 'autocommit') {
             // Prefill so the user types the cadence (seconds); 0 cancels.
@@ -4084,11 +4219,17 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     // the exact render the countdown hits zero): never commit mid-turn — the
     // effect re-runs when the hold clears and fires then.
     useEffect(() => {
-        if (!isAutoCommitDue(autoCommit) || autoCommitHeld)
+        // A read-only VIEWER never fires auto-commit: /commit is an editor action,
+        // and the client-side dispatch here surfaced the "view-only access, so this
+        // command is unavailable" denial card out of nowhere on viewers whenever a
+        // synced countdown lapsed (observed 2026-08-31, right after a watched turn
+        // settled and released the hold). The hydrate below is also viewer-gated,
+        // so this is the belt for a mid-session demotion.
+        if (canEdit === false || !isAutoCommitDue(autoCommit) || autoCommitHeld)
             return;
         void executeCommand('commit');
         dispatchAutoCommit({ type: 'fired' });
-    }, [autoCommit, autoCommitHeld, executeCommand]);
+    }, [autoCommit, autoCommitHeld, executeCommand, canEdit]);
     // ── Submit ─────────────────────────────────────────────────────────────────
     const handleSubmit = useCallback(async () => {
         // Stop voice recognition on submit
@@ -4255,6 +4396,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             setPanelOverlay(null);
             setCommandMenu(null);
             setModelPicker(null);
+            setEffortPicker(null);
             setSoundsPicker(null);
             setMicPicker({ autoStart: false });
             return;
@@ -4304,6 +4446,18 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         const effortCmd = parseEffortCommand(trimmed);
         if (effortCmd) {
             setInputValue('');
+            // Bare /effort (or a bare --plan/--execute flag) opens the selectable
+            // level picker — same interaction as bare /model. The picker lists the
+            // target mode's model's own levels; its mode dropdown re-scopes in place.
+            if (effortCmd.kind === 'menu') {
+                setPanelOverlay(null);
+                setCommandMenu(null);
+                setModelPicker(null);
+                setSoundsPicker(null);
+                setMicPicker(null);
+                setEffortPicker({ selectedIdx: -1, mode: effortCmd.mode ?? liveModelMode });
+                return;
+            }
             // Resolve the model a given mode will actually use — mirrors the /model
             // picker + slash-suffix resolveModeModel logic (P2-10: each mode's
             // options come from ITS model's reasoning capabilities).
@@ -4361,22 +4515,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                     }, { defaultValue: "{{level}} isn't available for {{model}}. Available: {{levels}}" }));
                     return;
                 }
-                try {
-                    const nextByMode = { ...effortByMode, [targetMode]: level };
-                    await http.patch(settingsPatchUrl(), { settings: { effortByMode: nextByMode } });
-                    setEffortByMode(nextByMode);
-                    addSystemCard(t('ide.chat.effort.setMode', {
-                        mode: targetMode,
-                        level: nativeEffortName(targetModel, level) ?? effortCmd.arg,
-                        model: targetModelLabel,
-                    }, { defaultValue: 'Reasoning effort for {{mode}} set to {{level}} ({{model}}).' }));
-                }
-                catch (error) {
-                    logger.warn('Failed to update reasoning effort level', { error });
-                    addSystemCard(t('ide.chat.effort.error', undefined, {
-                        defaultValue: 'Failed to update reasoning effort.',
-                    }));
-                }
+                await applyEffortLevel(targetMode, level, targetModel);
             }
             return;
         }
@@ -4472,7 +4611,11 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 setInputAndCursorEnd('/teamsay ');
             else
                 setInputValue('');
-            sendMessage(trimmed, undefined, { suppressUserMessage: true });
+            // sideChannel: a team note is a human-to-human message, not a turn — it
+            // goes out immediately even while a turn streams (it used to queue
+            // silently behind the sender's own active turn, and a viewer's note
+            // used to tear down their remote-turn tracking).
+            sendMessage(trimmed, undefined, { suppressUserMessage: true, sideChannel: true });
             return;
         }
         // Rewrite /explain with attachments into a proper prompt (attachments processed below)
@@ -4530,6 +4673,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         runSavedScript,
         allCommands,
         selectModel,
+        applyEffortLevel,
         liveModelMode,
     ]);
     // External auto-submit. When the signal changes, submit the current input —
@@ -4746,6 +4890,43 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 ? (resolveModeModel({ planModel, executeModel, commitModel, compactModel, chatModel: savedChatModel }, modelPicker.mode) ?? serverModelDefaults?.[modelPicker.mode])
                 : savedChatModel || undefined
         : undefined;
+    // ── Effort picker derived state ─────────────────────────────────────────────
+    // The model whose levels the open /effort picker lists — the model the
+    // selected mode will actually run — plus its selectable options and the level
+    // the "current" pill marks (the persisted per-mode value resolved per-model,
+    // so an unset mode correctly pills the model's own default). Cheap to
+    // recompute per render, mirroring pickerModeOptions above.
+    const effortPickerModel = effortPicker
+        ? AVAILABLE_MODELS.find((m) => m.id === effectiveModelForMode(effortPicker.mode))
+        : undefined;
+    const effortPickerOptions = effortOptionsForModel(effortPickerModel);
+    // Typed filter, mirroring filteredModels: the text after "/effort" (minus a
+    // mode flag) narrows the rows, so "/effort xh" + Enter selects xhigh. Read
+    // from inputRef — it stays fresh because each keystroke re-sets effortPicker.
+    const effortPickerVisibleOptions = (() => {
+        if (!effortPicker)
+            return [];
+        const typed = parseEffortCommand(inputRef.current);
+        const q = typed?.kind === 'set' ? typed.arg.toLowerCase() : '';
+        if (!q)
+            return effortPickerOptions;
+        return effortPickerOptions.filter((o) => o.value.toLowerCase().includes(q));
+    })();
+    const effortPickerCurrent = effortPicker
+        ? nativeEffortName(effortPickerModel, effortByMode[effortPicker.mode] ?? (effortLevel || undefined))
+        : null;
+    // Mode dropdown rows ("Plan · <model>") — effort exists only for the two
+    // conversation modes, each scoped to ITS model's native levels.
+    const effortPickerModeOptions = ['plan', 'execute'].map((m) => ({
+        value: m,
+        label: t('ide.chat.modelModeOption', {
+            mode: m === 'plan'
+                ? t('ide.chat.settings.modePlan', undefined, { defaultValue: 'Plan' })
+                : t('ide.chat.settings.modeExecute', undefined, { defaultValue: 'Execute' }),
+            model: AVAILABLE_MODELS.find((x) => x.id === effectiveModelForMode(m))?.label ??
+                effectiveModelForMode(m),
+        }, { defaultValue: '{{mode}} · {{model}}' }),
+    }));
     const filteredEntries = useMemo(() => {
         if (!filePicker)
             return [];
@@ -4807,6 +4988,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 setMicPicker(null);
                 return;
             }
+            if (effortPicker) {
+                setEffortPicker(null);
+                return;
+            }
             if (modelPicker) {
                 setModelPicker(null);
                 return;
@@ -4851,6 +5036,43 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 return;
             }
         }
+        // Effort picker: one row per (typed-filter-matching) level of the selected
+        // mode's model. A fixed-reasoning model or an unmatched filter lists
+        // nothing — arrows/Enter fall through (Escape closes; Enter submits the
+        // typed text, so an unknown level still gets the "isn't available" card).
+        if (effortPicker && effortPickerVisibleOptions.length > 0) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setEffortPicker((p) => p
+                    ? { ...p, selectedIdx: wrapIdx(p.selectedIdx, 1, effortPickerVisibleOptions.length) }
+                    : null);
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setEffortPicker((p) => p
+                    ? { ...p, selectedIdx: wrapIdx(p.selectedIdx, -1, effortPickerVisibleOptions.length) }
+                    : null);
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                // Highlighted row wins; otherwise an exactly-typed level beats the
+                // first substring match ("/effort high" must never apply xhigh's
+                // neighbor), then default to the first visible row (mirrors /model).
+                let option = effortPickerVisibleOptions[effortPicker.selectedIdx];
+                if (!option) {
+                    const typed = parseEffortCommand(inputRef.current);
+                    const q = typed?.kind === 'set' ? typed.arg.toLowerCase() : '';
+                    option =
+                        (q ? effortPickerVisibleOptions.find((o) => o.value.toLowerCase() === q) : undefined) ??
+                            effortPickerVisibleOptions[0];
+                }
+                if (option)
+                    void applyEffortLevel(effortPicker.mode, option.value, effortPickerModel);
+                return;
+            }
+        }
         // The optional "manage your own models" row sits after the model rows and
         // participates in arrow/Enter navigation as the last index.
         const modelRowCount = visibleModels.length + (onManageCustomModels ? 1 : 0);
@@ -5406,14 +5628,11 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     }, onRevert: canEdit === false ? undefined : handleRevertCommit }, msg.id));
                             }
                             return (_jsx(MessageItem, { msg: msg, sendMessage: sendMessage, handleAskUserResponse: handleAskUserResponse, isLoading: isLoading, streamingStatus: streamingStatus, onNavigatePreview: onNavigatePreview, undoneTcIds: undoneTcIds, handleUndoToggle: handleUndoToggle, onFileOpen: onFileOpen, onFileDoubleClick: onFileDoubleClick, onFileDiff: onFileDiff, handleFileRevert: handleFileRevert, setInputAndCursorEnd: setInputAndCursorEnd, setModelPicker: setModelPicker, chatMode: liveModelMode, userAvatar: userAvatar, 
-                                // Avatar clicks open the signed-in user's OWN profile, so only
-                                // their own messages get the handler: author-less ones (the
-                                // local echo, legacy solo rows) or an author matching
-                                // currentUserId. A teammate's avatar stays non-interactive —
-                                // clicking Test's face must not open Luke's profile editor.
-                                onAvatarClick: !msg.author?.id || (currentUserId != null && msg.author.id === currentUserId)
-                                    ? onUserAvatarClick
-                                    : undefined, discovery: discovery, buildUpgradeCta: buildUpgradeCta, agentName: agentName, canEdit: canEdit }, msg.id));
+                                // Avatar/name clicks open the clicked AUTHOR's profile —
+                                // MessageItem builds the identity from the message's own
+                                // author (teammates included), so the host shows their
+                                // view-only profile and the viewer's editable own.
+                                onProfileClick: onProfileClick, currentUserId: currentUserId, discovery: discovery, buildUpgradeCta: buildUpgradeCta, agentName: agentName, canEdit: canEdit }, msg.id));
                         } }, item.kind === 'message' ? item.msg.id : item.card.id))), error &&
                         !isStaleAnonymousLimit &&
                         (errorMeta?.limitType ? (_jsx(ResourceLimitBanner, { message: error, action: buildUpgradeCta?.({ requiresSignup: errorMeta.requiresSignup }) })) : isViewerAccessDenied ? (
@@ -5434,7 +5653,14 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                         // continuation) shows the same live activity indicator as an own send —
                         // watchers see Synthase working, not a frozen transcript.
                         const showActivity = isLoading || awaitingSandboxBoot || isRemoteStreaming;
-                        const streamingMsg = isLoading
+                        // A remote turn streams real messages into the same store, so it gets the
+                        // SAME activity treatment as an own send. Only the no-turn-at-all case
+                        // (awaitingSandboxBoot alone) is a sandbox-boot wait — labeling every
+                        // !isLoading render with the boot copy showed viewers "Waiting for the
+                        // development environment to finish starting…" over a running sandbox
+                        // for the whole remote turn (observed 2026-08-31).
+                        const streamingLike = isLoading || isRemoteStreaming;
+                        const streamingMsg = streamingLike
                             ? [...visibleMessages].reverse().find((m) => m.isStreaming)
                             : undefined;
                         // Turn start = the last genuine user message, so the elapsed timer counts up across
@@ -5451,7 +5677,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                         // matches the elapsed timer's span: it climbs monotonically and only plateaus during
                         // tool-execution gaps, rather than vanishing/restarting at each new assistant message.
                         const turnTokens = estimateTurnTokens(messages);
-                        const label = isLoading
+                        const label = streamingLike
                             ? (streamingStatus ?? (streamingMsg ? streamingActivityLabel(streamingMsg) : undefined))
                             : t('ide.chat.awaitingSandbox', undefined, {
                                 defaultValue: 'Waiting for the development environment to finish starting…',
@@ -5461,7 +5687,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                 opacity: showActivity ? 1 : 0,
                                 pointerEvents: showActivity ? 'auto' : 'none',
                                 transition: 'opacity 0.18s ease-out',
-                            }, children: showActivity && (_jsx(StreamingIndicator, { label: label, tokens: isLoading ? turnTokens : undefined, startedAt: isLoading ? turnStartedAt : undefined })) }));
+                            }, children: showActivity && (_jsx(StreamingIndicator, { label: label, tokens: streamingLike ? turnTokens : undefined, startedAt: streamingLike ? turnStartedAt : undefined })) }));
                     })(), _jsx("div", { ref: messagesEndRef })] }), autoFixCountdown && (_jsxs("div", { className: cm.cn(cm.shrink0, cm.borderT), style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -6260,7 +6486,108 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         : 'color-mix(in srgb, var(--mol-color-primary, #6366f1) 12%, transparent)',
                                 }, children: t('ide.chat.manageCustomModels', undefined, {
                                     defaultValue: 'Add or manage your own models…',
-                                }) }))] })), soundsPicker && (_jsxs("div", { className: cm.cn(cm.surface, cm.borderAll), style: {
+                                }) }))] })), effortPicker && (_jsxs("div", { className: cm.cn(cm.surface, cm.borderAll), style: {
+                            position: 'absolute',
+                            bottom: '100%',
+                            left: 0,
+                            right: 0,
+                            marginBottom: 0,
+                            borderRadius: '6px 6px 0 0',
+                            zIndex: 100,
+                            boxShadow: '0 -4px 16px rgba(0,0,0,0.25)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            maxHeight: popupMaxHeight,
+                        }, children: [_jsxs("div", { className: cm.cn(cm.textSize('xs'), cm.textMuted), style: {
+                                    padding: '6px 12px',
+                                    borderBottom: '1px solid rgba(128,128,128,0.12)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 10,
+                                    flexShrink: 0,
+                                    flexWrap: 'wrap',
+                                }, children: [_jsx("span", { style: { flexShrink: 0 }, children: t('ide.chat.settings.effort.label', undefined, {
+                                            defaultValue: 'Reasoning effort',
+                                        }) }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 6,
+                                            flex: '1 1 190px',
+                                            minWidth: 0,
+                                        }, children: [_jsx("span", { style: { flexShrink: 0 }, children: t('ide.chat.modelModeLabel', undefined, { defaultValue: 'Mode' }) }), _jsx("select", { "data-mol-id": "chat-effort-mode-select", "aria-label": t('ide.chat.modelModeLabel', undefined, { defaultValue: 'Mode' }), value: effortPicker.mode, onChange: (e) => {
+                                                    const v = e.target.value;
+                                                    // Reset the highlighted row — the level list changes with
+                                                    // the mode's model.
+                                                    setEffortPicker((p) => (p ? { mode: v, selectedIdx: -1 } : p));
+                                                }, className: cm.cn(cm.surfaceSecondary, cm.borderAll, cm.textSize('xs')), style: {
+                                                    borderRadius: 4,
+                                                    // Extra right padding clears the native dropdown arrow so
+                                                    // the selected label never runs underneath it.
+                                                    padding: '2px 18px 2px 6px',
+                                                    color: 'inherit',
+                                                    cursor: 'pointer',
+                                                    height: 24,
+                                                    boxSizing: 'border-box',
+                                                    flex: 1,
+                                                    minWidth: 0,
+                                                    overflow: 'hidden',
+                                                    whiteSpace: 'nowrap',
+                                                    textOverflow: 'ellipsis',
+                                                }, children: effortPickerModeOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }), _jsx("button", { type: "button", "data-mol-id": "chat-effort-picker-close", onClick: () => setEffortPicker(null), style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            color: 'inherit',
+                                            padding: '0 2px',
+                                            fontSize: '14px',
+                                            lineHeight: 1,
+                                            opacity: 0.6,
+                                            // Touch floor for this secondary header ✕ (36px, like the
+                                            // notice-card actions); fine pointers keep the slim header.
+                                            ...(isCoarse
+                                                ? {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    minWidth: 36,
+                                                    minHeight: 36,
+                                                }
+                                                : {}),
+                                        }, children: '✕' })] }), _jsx("div", { style: { overflowY: 'auto', flex: 1 }, children: effortPickerOptions.length === 0 ? (_jsx("div", { className: cm.cn(cm.textSize('sm'), cm.textMuted), style: { padding: 12 }, children: t('ide.chat.effort.fixedForModel', { mode: effortPicker.mode, model: effortPickerModel?.label ?? '?' }, {
+                                        defaultValue: 'Reasoning effort is fixed on {{model}} ({{mode}} mode) — nothing to set.',
+                                    }) })) : (effortPickerVisibleOptions.map((option, idx) => (_jsxs("button", { type: "button", "data-mol-id": `chat-effort-level-${option.value}`, onClick: () => void applyEffortLevel(effortPicker.mode, option.value, effortPickerModel), onMouseEnter: (e) => {
+                                        ;
+                                        e.currentTarget.style.background = 'rgba(128,128,128,0.15)';
+                                    }, onMouseLeave: (e) => {
+                                        ;
+                                        e.currentTarget.style.background =
+                                            idx === effortPicker.selectedIdx ? 'rgba(128,128,128,0.1)' : 'transparent';
+                                    }, className: cm.w('full'), style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '6px',
+                                        width: '100%',
+                                        minHeight: '40px',
+                                        padding: '8px 12px',
+                                        border: 'none',
+                                        borderTop: idx === 0 ? 'none' : '1px solid rgba(128,128,128,0.12)',
+                                        cursor: 'pointer',
+                                        color: 'inherit',
+                                        textAlign: 'left',
+                                        fontSize: '13px',
+                                        background: idx === effortPicker.selectedIdx ? 'rgba(128,128,128,0.1)' : 'transparent',
+                                    }, children: [_jsx("span", { className: cm.fontWeight('medium'), children: option.value }), defaultEffortForModel(effortPickerModel) === option.value && (_jsx("span", { className: cm.textMuted, style: { fontSize: '10px' }, children: t('ide.chat.modelMode.default', undefined, { defaultValue: 'Default' }) })), effortPickerCurrent === option.value && (_jsx("span", { "data-mol-id": `effort-current-${option.value}`, className: cm.fontWeight('medium'), style: {
+                                                // Right-aligned + primary-tinted, matching the model
+                                                // picker's "current" pill (hex is only the var()
+                                                // fallback; the theme token wins).
+                                                marginLeft: 'auto',
+                                                fontSize: '10px',
+                                                color: 'var(--mol-color-primary, #6366f1)',
+                                                background: 'color-mix(in srgb, var(--mol-color-primary, #6366f1) 16%, transparent)',
+                                                border: '1px solid color-mix(in srgb, var(--mol-color-primary, #6366f1) 42%, transparent)',
+                                                padding: '1px 7px',
+                                                borderRadius: '999px',
+                                            }, children: t('ide.chat.currentBadge', undefined, { defaultValue: 'current' }) }))] }, option.value)))) })] })), soundsPicker && (_jsxs("div", { className: cm.cn(cm.surface, cm.borderAll), style: {
                             position: 'absolute',
                             bottom: '100%',
                             left: 0,
@@ -6501,7 +6828,11 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                     ? t('ide.chat.activeFile', undefined, { defaultValue: 'active' })
                                                     : t('ide.chat.openTab', undefined, { defaultValue: 'open' }) }))] }, entry.name));
                                 }) }));
-                        })(), queuedMessages.length > 0 && !commandMenu && !modelPicker && !panelOverlay && (_jsxs("div", { style: {
+                        })(), queuedMessages.length > 0 &&
+                        !commandMenu &&
+                        !modelPicker &&
+                        !effortPicker &&
+                        !panelOverlay && (_jsxs("div", { style: {
                             borderTop: '1px solid rgba(128,128,128,0.15)',
                             padding: '6px 8px 6px 10px',
                         }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }, children: [_jsx(Icon, { name: "clock", size: 11, "aria-hidden": "true", style: { opacity: 0.5, flexShrink: 0 } }), _jsx("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { fontStyle: 'italic' }, children: t('ide.chat.queuedCount', { count: queuedMessages.length }, { defaultValue: '{{count}} queued' }) })] }), _jsx("div", { style: {
@@ -6637,6 +6968,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                         pendingFiles.length > 0 &&
                         !commandMenu &&
                         !modelPicker &&
+                        !effortPicker &&
                         !panelOverlay && (_jsxs("div", { style: {
                             borderTop: '1px solid rgba(128,128,128,0.15)',
                             // Equal top/right/bottom (8px) so the commit button — flush to the
@@ -7002,6 +7334,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 // Popups are one-at-a-time — close siblings first.
                                                 setMicPicker(null);
                                                 setModelPicker(null);
+                                                setEffortPicker(null);
                                                 setSoundsPicker(null);
                                                 const cur = inputRef.current;
                                                 if (!cur)