@molecule/app-ide-react 1.5.0 → 1.6.0

package/dist/components/ChatPanel.js

@@ -16,7 +16,7 @@ import { ActivityCard } from './ActivityCard.js';
 import { AutoCommitBadge } from './AutoCommitBadge.js';
 import { AUTO_COMMIT_DISABLED, autoCommitReducer, isAutoCommitArmed, isAutoCommitDue, isAutoCommitEnabled, parseAutoCommitCommand, resolveAutoCommitSeconds, } from './chat-autocommit-utilities.js';
 import { CHAT_CARD_ICON_SIZE, chatCardBorder, chatCardStyle } from './chat-card-style.js';
-import { COMMAND_CATEGORIES, COMMANDS } from './chat-commands.js';
+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';
@@ -928,7 +928,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, userAvatar, onAvatarClick, discovery, buildUpgradeCta, } = props;
+    const { msg, sendMessage, handleAskUserResponse, isLoading, streamingStatus, onNavigatePreview, undoneTcIds, handleUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, handleFileRevert, setInputAndCursorEnd, setModelPicker, userAvatar, onAvatarClick, discovery, buildUpgradeCta, agentName, } = props;
     const cm = getClassMap();
     const themeMode = useThemeMode();
     const isLight = themeMode === 'light';
@@ -936,6 +936,11 @@ const MessageItem = memo(function MessageItem(props) {
     // A message sent automatically on the user's behalf (e.g. an auto-fix prompt):
     // it has role 'user' but must NOT look like the user typed it (C2).
     const isAutomatic = msg.role === 'user' && !!msg.automatic;
+    // A human-only team note (side channel, e.g. /teamsay): renders like a user
+    // message — author header, time, plain content — but with the gold team-only
+    // accent + badge, and never the user message's blue stripe. `role` is 'system'
+    // (the model never sees it), so this is checked before isUser.
+    const isTeamNote = !!msg.teamOnly;
     // A real, user-typed message (the only one styled with the blue border + the
     // user's own avatar).
     const isUser = msg.role === 'user' && !isAutomatic;
@@ -949,7 +954,7 @@ const MessageItem = memo(function MessageItem(props) {
     const wrapperSpacing = {
         marginBottom: `${discovery ? TIMELINE_ITEM_GAP_DISCOVERY : TIMELINE_ITEM_GAP}px`,
     };
-    return (_jsx("div", { style: wrapperSpacing, children: isUser || isAutomatic ? (_jsxs("div", { className: 
+    return (_jsx("div", { style: wrapperSpacing, children: isUser || isAutomatic || isTeamNote ? (_jsxs("div", { className: 
             // Auto-sent card matches the info cards' `xs` body; a real user message keeps
             // its slightly larger `sm` (it's a different kind of row, not an info card).
             isAutomatic ? cm.textSize('xs') : cm.cn(cm.surfaceSecondary, cm.textSize('sm')), style: {
@@ -962,7 +967,9 @@ const MessageItem = memo(function MessageItem(props) {
                 // 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).
+                // — 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.
                 ...(isAutomatic
                     ? chatCardStyle(AUTO_SENT_ACCENT)
                     : {
@@ -971,14 +978,41 @@ const MessageItem = memo(function MessageItem(props) {
                         paddingTop: '10px',
                         paddingBottom: '10px',
                         paddingRight: '10px',
+                        ...(isTeamNote ? { border: `1px solid ${NOTICE_TONE.gold.accent}` } : {}),
                     }),
-            }, "data-mol-id": isAutomatic ? 'chat-automatic-message' : 'chat-user-message', children: [isAutomatic ? (_jsx(Icon, { name: "sync", size: CHAT_CARD_ICON_SIZE, "aria-hidden": "true", style: { flexShrink: 0, marginTop: 1, color: AUTO_SENT_ACCENT } })) : (_jsx(UserAvatar, { userAvatar: msg.author?.avatar ?? userAvatar, size: 36, onClick: onAvatarClick })), _jsxs("div", { style: { flex: 1, minWidth: 0, marginTop: 1 }, children: [isAutomatic ? null : (_jsxs("div", { style: {
+            }, "data-mol-id": isTeamNote
+                ? 'chat-team-message'
+                : isAutomatic
+                    ? 'chat-automatic-message'
+                    : 'chat-user-message', children: [isAutomatic ? (_jsx(Icon, { name: "sync", size: CHAT_CARD_ICON_SIZE, "aria-hidden": "true", style: { flexShrink: 0, marginTop: 1, color: AUTO_SENT_ACCENT } })) : (_jsx(UserAvatar
+                // 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.
+                , { 
+                    // 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: {
                                 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' }) }), typeof msg.timestamp === 'number' && (_jsx("span", { className: cm.textMuted, style: { fontSize: 11 }, children: relativeTimeLong(msg.timestamp) }))] })), _jsx(CollapsibleUserMessage, { content: msg.content, isLight: isLight }), msg.attachments && msg.attachments.length > 0 && (_jsx("div", { style: { marginTop: 4, display: 'flex', gap: 4, flexWrap: 'wrap' }, children: msg.attachments.map((att, ai) => (_jsxs("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [att.mediaType.startsWith('image/')
+                            }, 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' }, {
+                                        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',
+                                    }), style: { display: 'inline-flex', alignSelf: 'center', flexShrink: 0 }, "data-mol-id": "chat-team-only-badge", children: _jsx(Icon
+                                    // Same size as the username text (textSize('sm') ≈ 14px) so the
+                                    // badge reads as part of the header line, not a footnote.
+                                    , { 
+                                        // Same size as the username text (textSize('sm') ≈ 14px) so the
+                                        // badge reads as part of the header line, not a footnote.
+                                        name: "people", size: 14, "aria-hidden": "true", style: { color: NOTICE_TONE.gold.accent } }) })), typeof msg.timestamp === 'number' && (_jsx("span", { className: cm.textMuted, style: { fontSize: 11 }, children: relativeTimeLong(msg.timestamp) }))] })), _jsx(CollapsibleUserMessage, { content: msg.content, isLight: isLight }), msg.attachments && msg.attachments.length > 0 && (_jsx("div", { style: { marginTop: 4, display: 'flex', gap: 4, flexWrap: 'wrap' }, children: msg.attachments.map((att, ai) => (_jsxs("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [att.mediaType.startsWith('image/')
                                         ? '\uD83D\uDDBC\uFE0F'
                                         : att.mediaType.startsWith('audio/')
                                             ? '\uD83C\uDFB5'
@@ -1152,7 +1186,7 @@ const MessageItem = memo(function MessageItem(props) {
  * @param props - Component props (see {@link MessageItemProps}).
  * @returns The rendered chat inner component.
  */
-function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent, isPro, isAnonymous, buildUpgradeCta, buildHelpUpgradeSection, activeFile, openTabs, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onFileChange, onFileDeleted, onCommit, onConversationId, onActivityClick, onRenderError, onProfileClick, onReadyToBuild, awaitingSandboxBoot, onClientAction, onTurnComplete, onLoadingChange, onNavigatePreview, onRegisterPushHandler, autoSubmitSignal, openSettingsSignal, onManageCustomModels, modelSelectionSignal, openReportSignal, openShareSignal, initialInputValue, pendingMessage, pendingMessageKey, pendingMessageSuppressUser, pendingMessageUserInitiated, userEditedFile, userEditedFileKey, gitStatusTick: externalGitStatusTick, discovery, userAvatar, agentName = DEFAULT_AGENT_NAME, productName = DEFAULT_PRODUCT_NAME, version, extraCommands,
+function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent, isPro, isAnonymous, canEdit, buildUpgradeCta, buildHelpUpgradeSection, activeFile, openTabs, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onFileChange, onFileDeleted, onCommit, onConversationId, onActivityClick, onRenderError, onProfileClick, currentUserId, onReadyToBuild, awaitingSandboxBoot, onClientAction, onTurnComplete, onLoadingChange, onNavigatePreview, onRegisterPushHandler, autoSubmitSignal, openSettingsSignal, onManageCustomModels, modelSelectionSignal, openReportSignal, openShareSignal, initialInputValue, pendingMessage, pendingMessageKey, pendingMessageSuppressUser, pendingMessageUserInitiated, userEditedFile, userEditedFileKey, gitStatusTick: externalGitStatusTick, discovery, userAvatar, agentName = DEFAULT_AGENT_NAME, productName = DEFAULT_PRODUCT_NAME, version, extraCommands,
 // feedbackUrl: prop kept for back-compat (callers still pass it), but no longer
 // consumed here — its only use was the command-menu footer link removed in P3-21.
  }) {
@@ -1171,10 +1205,12 @@ 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 clicked user's identity once
-    // (the chat is solo, so every user avatar is the signed-in user — the only
-    // known identity is `userAvatar`). Stable so MessageItem's memo isn't broken;
-    // `undefined` when the host opts out, which keeps every avatar non-interactive.
+    // 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]);
@@ -1235,6 +1271,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     // applied through handleStreamEvent) can append a card-message to the ONE message store.
     // This client's OWN `card` events are appended internally by useChat's stream handler.
     const appendCardMessageRef = useRef(() => { });
+    // Ref to useChat's appendCompleteMessage — same contract as appendCardMessageRef, for a
+    // teammate's broadcast `message` event (a complete non-streaming message, e.g. a
+    // human-only team note). This client's OWN `message` events append internally in useChat.
+    const appendCompleteMessageRef = useRef(() => { });
     // Kept current each render so handleStreamEvent (memoized) always calls the latest.
     const onReadyToBuildRef = useRef(onReadyToBuild);
     onReadyToBuildRef.current = onReadyToBuild;
@@ -1281,6 +1321,13 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         if (event.type === 'card' && applyingPushedRef.current) {
             appendCardMessageRef.current(event.id, event.timestamp, event.card);
         }
+        // A teammate's broadcast complete message (e.g. a human-only team note) — append it
+        // to the local store so it shows live for the collaborator too (de-duped by id;
+        // never re-persisted — the originating server already persisted it). This client's
+        // OWN `message` stream events are appended internally by useChat.
+        if (event.type === 'message' && applyingPushedRef.current && event.message) {
+            appendCompleteMessageRef.current(event.message);
+        }
         // Captured outbound side effect (email/sms/push/webhook/channel) — push an
         // inline activity card into the timeline. Non-text card, mirroring how
         // system cards are appended.
@@ -1415,7 +1462,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         }
         onFileChange?.(path, content);
     }, [onFileChange, onFileOpen, autoFixCountdown]);
-    const { messages, isLoading, isRemoteStreaming, noteRemoteStreamEvent, error, errorMeta, mode, fastMode, streamingStatus, setMode, setFastMode, sendMessage, abort, clearHistory, editQueuedMessage, deleteQueuedMessage, clearQueuedForFile, appendCardMessage, retryCountdown, cancelRetry, } = useChat({
+    const { messages, isLoading, isRemoteStreaming, noteRemoteStreamEvent, error, errorMeta, mode, fastMode, streamingStatus, setMode, setFastMode, sendMessage, abort, clearHistory, editQueuedMessage, deleteQueuedMessage, clearQueuedForFile, appendCardMessage, appendCompleteMessage, retryCountdown, cancelRetry, } = useChat({
         endpoint,
         projectId,
         agentName,
@@ -1441,6 +1488,8 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     // Keep the card-append ref current so handleStreamEvent (memoized) can append a teammate's
     // broadcast `card` event to the message store.
     appendCardMessageRef.current = appendCardMessage;
+    // Same for a teammate's broadcast complete `message` event (e.g. a team note).
+    appendCompleteMessageRef.current = appendCompleteMessage;
     // User Stop. A stop is a user decision the platform must not overrule — so
     // beyond killing the stream (useChat.abort also records the stop client-side
     // and, via chat-abort's userInitiated flag, server-side), drop every pending
@@ -2303,6 +2352,31 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         const text = t(`ide.chat.tip.${ENTRY_TIP.id}`, { agentName }, { defaultValue: ENTRY_TIP.text });
         setTipCards((prev) => [...prev, { id: crypto.randomUUID(), text, timestamp: Date.now() }]);
     }, [conversationId, messages.length, agentName, discovery]);
+    // Viewer orientation tip: a read-only member's explainer — GOLD like the
+    // team-only messages and led by the same `people` icon it explains, so the
+    // badge on a team note is self-describing. A regular dismissable tip (never a
+    // permanent composer note); shown once per panel mount, skipped in discovery
+    // like the other tips (mvp B1). Gated on an EXPLICIT canEdit === false so
+    // hosts that don't do roles never see it.
+    const viewerTipShownRef = useRef(false);
+    useEffect(() => {
+        if (canEdit !== false || discovery || viewerTipShownRef.current)
+            return;
+        viewerTipShownRef.current = true;
+        const text = t('ide.chat.tip.viewerTeamOnly', { agentName }, {
+            defaultValue: 'View-only access — read along and /teamsay the team. This gold icon marks team-only messages ({{agentName}} ignores them). Running the assistant and changing the model or settings need editor access.',
+        });
+        setTipCards((prev) => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                text,
+                timestamp: Date.now(),
+                accent: NOTICE_TONE.gold.accent,
+                icon: 'people',
+            },
+        ]);
+    }, [canEdit, discovery, agentName]);
     // Surface an occasional idle tip. This effect re-runs on every message change, so
     // the idle timer is continually reset by activity; it only fires once the
     // conversation has been quiet for TIP_IDLE_MS — and even then only when the
@@ -2591,7 +2665,15 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             return;
         removedModelNotifiedRef.current = currentModel;
         const removedId = currentModel;
-        const fallback = FREE_TIER_MODEL || AVAILABLE_MODELS[0]?.id;
+        // Prefer a still-available model from the SAME custom provider before a
+        // platform model: when a BYO provider's model is renamed (custom/<prov>/A →
+        // custom/<prov>/B), keep the user on their own endpoint rather than bouncing
+        // them to a platform free model.
+        const sameProviderPrefix = removedId.match(/^(custom\/[^/]+\/)/)?.[1];
+        const sameProviderModel = sameProviderPrefix
+            ? AVAILABLE_MODELS.find((m) => m.id.startsWith(sameProviderPrefix))?.id
+            : undefined;
+        const fallback = sameProviderModel || FREE_TIER_MODEL || AVAILABLE_MODELS[0]?.id;
         addSystemCard(fallback
             ? t('ide.chat.modelRemoved', { removed: removedId, fallback }, {
                 defaultValue: 'Your selected model "{{removed}}" is no longer available. Switched to "{{fallback}}". Type /model to pick another.',
@@ -2780,10 +2862,13 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
     useEffect(() => {
         if (initialMessage && !hasConversation && sentInitialRef.current !== initialMessage) {
             sentInitialRef.current = initialMessage;
-            sendMessage(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.
+            const sideChannel = matchesSideChannelCommand(extraCommands?.length ? [...COMMANDS, ...extraCommands] : COMMANDS, initialMessage);
+            sendMessage(initialMessage, undefined, sideChannel ? { suppressUserMessage: true } : undefined);
             onInitialMessageSent?.();
         }
-    }, [initialMessage, hasConversation, sendMessage, onInitialMessageSent]);
+    }, [initialMessage, hasConversation, sendMessage, onInitialMessageSent, extraCommands]);
     // ── 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.
@@ -3459,6 +3544,20 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             setInputAndCursorEnd(`/${id} `);
             return;
         }
+        // A read-only VIEWER may run only viewerSafe commands (read / view-only /
+        // per-user preference). Everything else writes shared project state or
+        // triggers a Synthase turn the server 403s, so surface a read-only note
+        // instead of a dead control that silently fails. Default-deny: an
+        // unflagged command is unavailable to viewers.
+        if (!canEdit) {
+            const def = allCommands.find((c) => c.id === id);
+            if (def && !def.viewerSafe) {
+                addSystemCard(t('ide.chat.viewerReadOnlyCommand', undefined, {
+                    defaultValue: 'You have view-only access, so this command is unavailable. Ask an editor to make changes.',
+                }));
+                return;
+            }
+        }
         if (id === 'clear') {
             setInputValue('');
             await clearHistory();
@@ -3804,6 +3903,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         refreshGitStatus,
         openPanelOverlay,
         extraCommandIds,
+        canEdit,
+        allCommands,
+        t,
     ]);
     // When the auto-commit countdown reaches zero, fire the existing /commit path
     // (no new backend) and pause until the next file change re-arms it. /commit
@@ -3839,6 +3941,26 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         const trimmed = inputRef.current.trim();
         if (!trimmed && attachedFiles.length === 0)
             return;
+        // Read-only VIEWER guard. A viewer cannot run the assistant (the server 403s
+        // the chat route) or any project-mutating command, so block a plain message
+        // or a write-command here with a read-only note instead of a silent 403 —
+        // but let team side-channel messages (/teamsay) and viewerSafe commands
+        // through so viewers can still talk to the team and read. (Menu-dispatched
+        // commands are gated in executeCommand; this covers composer typing.)
+        if (!canEdit) {
+            const token = trimmed.match(/^\/(\S+)/)?.[1]?.toLowerCase();
+            const def = token
+                ? allCommands.find((c) => c.id.toLowerCase() === token || c.aliases?.includes(token))
+                : undefined;
+            const allowed = matchesSideChannelCommand(allCommands, trimmed) || def?.viewerSafe === true;
+            if (!allowed) {
+                setInputValue('');
+                addSystemCard(t('ide.chat.viewerReadOnly', undefined, {
+                    defaultValue: "You have view-only access, so you can't run the assistant here. You can still read along and use /teamsay to message the team.",
+                }));
+                return;
+            }
+        }
         // Handle /autofix toggle locally
         if (/^\/autofix$/i.test(trimmed)) {
             void executeCommand('autofix');
@@ -4157,6 +4279,16 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             sendMessage(prompt);
             return;
         }
+        // A host side-channel command (CommandDef.sideChannel, matched by id or alias — e.g.
+        // molecule.dev's /teamsay + /t): send the raw text to the host's server intercept but
+        // suppress the optimistic user bubble. The server emits the canonical `message` stream
+        // event (persisted + broadcast to every member), which IS the visible message — so the
+        // transcript never shows the literal "/command" text, and never shows it twice.
+        if (matchesSideChannelCommand(allCommands, trimmed)) {
+            setInputValue('');
+            sendMessage(trimmed, undefined, { suppressUserMessage: true });
+            return;
+        }
         // Rewrite /explain with attachments into a proper prompt (attachments processed below)
         let message = trimmed;
         if (explainMatch) {
@@ -4203,7 +4335,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         setAttachedFiles([]);
         setAttachmentError(null);
         sendMessage(message, chatAttachments.length > 0 ? chatAttachments : undefined);
-    }, [attachedFiles, http, projectId, sendMessage, setInputValue, runSavedScript]);
+    }, [attachedFiles, http, projectId, sendMessage, setInputValue, runSavedScript, allCommands]);
     // External auto-submit. When the signal changes, submit the current input —
     // used by the prompt → chat morph to send the prefilled prompt once the chat
     // has docked into place (handleSubmit clears the input as it sends).
@@ -4259,7 +4391,12 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         if (!q)
             return AVAILABLE_MODELS;
         return AVAILABLE_MODELS.filter((m) => m.id.toLowerCase().includes(q) || m.label.toLowerCase().includes(q));
-    }, [modelPicker]);
+        // AVAILABLE_MODELS MUST be a dep: when a custom provider is edited (a model
+        // renamed/added, a URL changed) the catalog refreshes in place, and without
+        // this the picker keeps rendering the pre-edit snapshot — the new model
+        // never appears and can't be selected. (The query is read from inputRef and
+        // stays fresh because each keystroke re-sets modelPicker.)
+    }, [modelPicker, AVAILABLE_MODELS]);
     // ── Older models section ────────────────────────────────────────────────────
     // Deprecated entries fold into a collapsed "Older models ⌄" section under the
     // current models. The section auto-expands when the user's currentModel is in
@@ -4870,7 +5007,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                             if (item.kind === 'activity')
                                 return (_jsx(ActivityCard, { activity: item.card.activity, onActivityClick: onActivityClick }, item.card.id));
                             if (item.kind === 'tip')
-                                return (_jsx(TipCard, { text: item.card.text, onDismiss: () => dismissTip(item.card.id) }, item.card.id));
+                                return (_jsx(TipCard, { text: item.card.text, accent: item.card.accent, icon: item.card.icon, onDismiss: () => dismissTip(item.card.id) }, item.card.id));
                             if (item.kind === 'system') {
                                 if (item.card.variant === 'settings') {
                                     // Legacy inline branch — kept so any 'settings' card persisted
@@ -4973,7 +5110,15 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         hash,
                                     }, onRevert: 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, userAvatar: userAvatar, onAvatarClick: onUserAvatarClick, discovery: discovery, buildUpgradeCta: buildUpgradeCta }, 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, 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 }, msg.id));
                         } }, item.kind === 'message' ? item.msg.id : item.card.id))), error &&
                         !isStaleAnonymousLimit &&
                         (errorMeta?.limitType ? (_jsx(ResourceLimitBanner, { message: error, action: buildUpgradeCta?.({ requiresSignup: errorMeta.requiresSignup }) })) : (_jsx("div", { className: cm.cn(cm.textSize('sm'), cm.sp('p', 2), cm.sp('mb', 2), cm.bgErrorSubtle, cm.textError), style: { borderRadius: '6px' }, children: error }))), (() => {
@@ -6358,7 +6503,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     alignItems: 'center',
                                     marginTop: '6px',
                                     gap: '4px',
-                                }, children: [_jsx("button", { type: "button", onClick: () => {
+                                }, children: [_jsx("button", { type: "button", disabled: !canEdit, onClick: () => {
                                             const newMode = mode === 'plan' ? 'execute' : 'plan';
                                             setMode(newMode);
                                             http
@@ -6392,9 +6537,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 ? `1px solid ${isLight ? 'rgba(217,119,6,0.55)' : 'rgba(234,179,8,0.5)'}`
                                                 : 'none',
                                             borderRadius: '3px',
-                                            cursor: 'pointer',
+                                            cursor: canEdit ? 'pointer' : 'not-allowed',
                                             color: mode === 'plan' ? (isLight ? '#d97706' : '#eab308') : 'inherit',
-                                            opacity: mode === 'plan' ? 1 : 0.4,
+                                            opacity: !canEdit ? 0.4 : mode === 'plan' ? 1 : 0.4,
                                             padding: 0,
                                             transition: 'opacity 100ms, color 100ms',
                                         }, onMouseEnter: (e) => {
@@ -6403,7 +6548,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         }, onMouseLeave: (e) => {
                                             if (mode !== 'plan')
                                                 e.currentTarget.style.opacity = '0.4';
-                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" }) }) }), fastModeAvailable && (_jsx("button", { type: "button", "data-mol-id": "chat-fast-mode-toggle", onClick: () => {
+                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" }) }) }), fastModeAvailable && (_jsx("button", { type: "button", "data-mol-id": "chat-fast-mode-toggle", disabled: !canEdit, onClick: () => {
                                             const next = !fastMode;
                                             setFastMode(next);
                                             http
@@ -6709,7 +6854,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
  * @param props - Component props (see {@link MessageItemProps}).
  * @returns The rendered chat panel element.
  */
-export function ChatPanel({ projectId, endpoint, initialMessage, onInitialMessageSent, activeFile, openTabs, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onFileChange, onFileDeleted, onCommit, onActivityClick, onRenderError, onProfileClick, onReadyToBuild, awaitingSandboxBoot, onClientAction, onTurnComplete, onLoadingChange, onNavigatePreview, onRegisterPushHandler, autoSubmitSignal, initialInputValue, hideConversationMenu, renderConversationHeader = true, conversationId: controlledConversationId, chatKey: controlledChatKey, onConversationId: controlledOnConversationId, openShareSignal: controlledShareSignal, openReportSignal: controlledReportSignal, openSettingsSignal: controlledSettingsSignal, onManageCustomModels, gitStatusTick, pendingMessage, pendingMessageKey, pendingMessageSuppressUser, pendingMessageUserInitiated, userEditedFile, userEditedFileKey, isPro, isAnonymous, buildUpgradeCta, buildHelpUpgradeSection, userAvatar, agentName, productName, version, extraCommands, feedbackUrl, className, }) {
+export function ChatPanel({ projectId, endpoint, initialMessage, onInitialMessageSent, activeFile, openTabs, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onFileChange, onFileDeleted, onCommit, onActivityClick, onRenderError, onProfileClick, currentUserId, onReadyToBuild, awaitingSandboxBoot, onClientAction, onTurnComplete, onLoadingChange, onNavigatePreview, onRegisterPushHandler, autoSubmitSignal, initialInputValue, hideConversationMenu, renderConversationHeader = true, conversationId: controlledConversationId, chatKey: controlledChatKey, onConversationId: controlledOnConversationId, openShareSignal: controlledShareSignal, openReportSignal: controlledReportSignal, openSettingsSignal: controlledSettingsSignal, onManageCustomModels, gitStatusTick, pendingMessage, pendingMessageKey, pendingMessageSuppressUser, pendingMessageUserInitiated, userEditedFile, userEditedFileKey, isPro, isAnonymous, canEdit = true, buildUpgradeCta, buildHelpUpgradeSection, userAvatar, agentName, productName, version, extraCommands, feedbackUrl, className, }) {
     const cm = getClassMap();
     const isNarrow = useNarrowViewport();
     const isCoarse = useCoarsePointer();
@@ -6918,7 +7063,7 @@ export function ChatPanel({ projectId, endpoint, initialMessage, onInitialMessag
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             width: '100%',
-                                        }, children: conv.preview ?? 'New conversation' }), _jsx("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { opacity: 0.55 }, children: relativeTime(conv.updatedAt) })] }, conv.id)))] }))] })), _jsx(ChatInner, { projectId: projectId, endpoint: chatEndpoint, initialMessage: initialMessage, onInitialMessageSent: onInitialMessageSent, isPro: isPro, isAnonymous: isAnonymous, buildUpgradeCta: buildUpgradeCta, buildHelpUpgradeSection: buildHelpUpgradeSection, activeFile: activeFile, openTabs: openTabs, onFileOpen: onFileOpen, onFileDoubleClick: onFileDoubleClick, onFileDiff: onFileDiff, onFileRevert: onFileRevert, onFileChange: onFileChange, onFileDeleted: onFileDeleted, onCommit: onCommit, onConversationId: reportConversationId, onActivityClick: onActivityClick, onRenderError: onRenderError, onProfileClick: onProfileClick, onReadyToBuild: onReadyToBuild, awaitingSandboxBoot: awaitingSandboxBoot, onClientAction: onClientAction, onTurnComplete: onTurnComplete, onLoadingChange: onLoadingChange, onNavigatePreview: onNavigatePreview, onRegisterPushHandler: onRegisterPushHandler, autoSubmitSignal: autoSubmitSignal, openSettingsSignal: effectiveSettingsSignal, onManageCustomModels: onManageCustomModels, openReportSignal: effectiveReportSignal, openShareSignal: effectiveShareSignal, initialInputValue: initialInputValue, pendingMessage: pendingMessage, pendingMessageKey: pendingMessageKey, pendingMessageSuppressUser: pendingMessageSuppressUser, pendingMessageUserInitiated: pendingMessageUserInitiated, userEditedFile: userEditedFile, userEditedFileKey: userEditedFileKey, gitStatusTick: gitStatusTick, discovery: hideConversationMenu, userAvatar: userAvatar, agentName: agentName, productName: productName, version: version, extraCommands: extraCommands, feedbackUrl: feedbackUrl }, chatKey)] }));
+                                        }, children: conv.preview ?? 'New conversation' }), _jsx("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { opacity: 0.55 }, children: relativeTime(conv.updatedAt) })] }, conv.id)))] }))] })), _jsx(ChatInner, { projectId: projectId, endpoint: chatEndpoint, initialMessage: initialMessage, onInitialMessageSent: onInitialMessageSent, isPro: isPro, isAnonymous: isAnonymous, canEdit: canEdit, buildUpgradeCta: buildUpgradeCta, buildHelpUpgradeSection: buildHelpUpgradeSection, activeFile: activeFile, openTabs: openTabs, onFileOpen: onFileOpen, onFileDoubleClick: onFileDoubleClick, onFileDiff: onFileDiff, onFileRevert: onFileRevert, onFileChange: onFileChange, onFileDeleted: onFileDeleted, onCommit: onCommit, onConversationId: reportConversationId, onActivityClick: onActivityClick, onRenderError: onRenderError, onProfileClick: onProfileClick, currentUserId: currentUserId, onReadyToBuild: onReadyToBuild, awaitingSandboxBoot: awaitingSandboxBoot, onClientAction: onClientAction, onTurnComplete: onTurnComplete, onLoadingChange: onLoadingChange, onNavigatePreview: onNavigatePreview, onRegisterPushHandler: onRegisterPushHandler, autoSubmitSignal: autoSubmitSignal, openSettingsSignal: effectiveSettingsSignal, onManageCustomModels: onManageCustomModels, openReportSignal: effectiveReportSignal, openShareSignal: effectiveShareSignal, initialInputValue: initialInputValue, pendingMessage: pendingMessage, pendingMessageKey: pendingMessageKey, pendingMessageSuppressUser: pendingMessageSuppressUser, pendingMessageUserInitiated: pendingMessageUserInitiated, userEditedFile: userEditedFile, userEditedFileKey: userEditedFileKey, gitStatusTick: gitStatusTick, discovery: hideConversationMenu, userAvatar: userAvatar, agentName: agentName, productName: productName, version: version, extraCommands: extraCommands, feedbackUrl: feedbackUrl }, chatKey)] }));
 }
 ChatPanel.displayName = 'ChatPanel';
 //# sourceMappingURL=ChatPanel.js.map