{children}
,
+ DialogDescription: ({ children }: React.PropsWithChildren) => {children}
, + DialogFooter: ({ children }: React.PropsWithChildren) =>{children}
,
+ DialogHeader: ({ children }: React.PropsWithChildren) => {children}
,
+ DialogTitle: ({ children }: React.PropsWithChildren) => {children}
, +})); + +const { AppLinkConfirmDialog } = await import('./AppLinkConfirmDialog'); +const { + getAppLinkConfirmationSnapshot, + openAppLinkWithConfirmation, + settleAppLinkConfirmation, +} = await import('./appLinkConfirmation'); + +describe('AppLinkConfirmDialog', () => { + beforeEach(() => { + if (getAppLinkConfirmationSnapshot()) { + settleAppLinkConfirmation('cancel'); + } + }); + + test('keeps cancel visible and focused beside both open choices', () => { + void openAppLinkWithConfirmation('obsidian://open?vault=Notebook'); + + const markup = renderToStaticMarkup( +
+
{renderDraftTitle(
projectLabel
@@ -558,6 +566,8 @@ export const ChatContainer: React.FC
+ );
+ }
+
+ if (sessionMessages.length === 0 && !sessionIsWorking) {
+ return (
- );
- }
-
- if (sessionMessages.length === 0 && !sessionIsWorking) {
- return (
- // No transform here either — same fixed-positioning constraint as the
- // draft branch above.
-
{renderDraftTitle(
projectLabel
@@ -558,6 +566,8 @@ export const ChatContainer: React.FC = ({
// Session UI state
const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
const currentSessionDirectory = useSessionUIStore((s) => s.currentSessionDirectory);
+ const materializedDraftSessionId = useSessionUIStore((s) => s.materializedDraftSessionId);
+ const clearMaterializedDraftSession = useSessionUIStore((s) => s.clearMaterializedDraftSession);
const openNewSessionDraft = useSessionUIStore((s) => s.openNewSessionDraft);
const setCurrentSession = useSessionUIStore((s) => s.setCurrentSession);
const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
@@ -731,12 +741,15 @@ export const ChatContainer: React.FC = ({
const isVSCode = isVSCodeRuntime();
const chatSurfaceMode = useChatSurfaceMode();
const draftOpen = Boolean(newSessionDraft?.open);
+ const isManagedChatContext = draftOpen
+ ? newSessionDraft?.target === 'chat'
+ : isChatDirectoryPath(effectiveSessionDirectory);
// A draft can target another project or a pending worktree before it has a
// session. Keep the panel on that same directory so its project, MCP, and
// usage readouts describe where the draft will run rather than the project
// the user came from.
const workStatusDirectory = draftOpen
- ? newSessionDraft?.bootstrapPendingDirectory ?? newSessionDraft?.directoryOverride ?? effectiveSessionDirectory
+ ? (isManagedChatContext ? null : newSessionDraft?.bootstrapPendingDirectory ?? newSessionDraft?.directoryOverride ?? effectiveSessionDirectory)
: effectiveSessionDirectory;
const initError = useGlobalSyncStore((s) => s.error);
// Despite the historical name, this now covers mobile too: the mobile
@@ -748,7 +761,6 @@ export const ChatContainer: React.FC = ({
// row that holds both columns, so its width never depends on the panel's
// own visibility.
const { rowRef: workStatusRowRef, visible: workStatusVisible, fits: workStatusFits } = useWorkStatusVisibility({
- directory: workStatusDirectory,
isMobile,
isVSCode,
});
@@ -1091,11 +1103,75 @@ export const ChatContainer: React.FC = ({
void ensureSessionRenderable(currentSessionId);
}, [currentSessionId, ensureSessionRenderable, hasRenderableSessionSnapshot, messagesEnabled]);
+ const composerSlotRef = React.useRef(null);
+ const previousComposerRectRef = React.useRef(null);
+ const previousDraftOpenRef = React.useRef(draftOpen);
+ const previousDraftLayoutVisibleRef = React.useRef(draftOpen);
+ const [draftExitAnimating, setDraftExitAnimating] = React.useState(false);
+ const shouldAnimateDraftTransition = Boolean(
+ currentSessionId && materializedDraftSessionId === currentSessionId,
+ );
+ const draftPresentationExiting = draftExitAnimating
+ || (previousDraftOpenRef.current && !draftOpen && shouldAnimateDraftTransition);
+ const draftLayoutVisible = draftOpen || draftPresentationExiting;
+
+ React.useLayoutEffect(() => {
+ if (draftOpen) {
+ setDraftExitAnimating(false);
+ return;
+ }
+ if (!previousDraftOpenRef.current || !shouldAnimateDraftTransition) return;
+
+ setDraftExitAnimating(true);
+ const timeoutId = window.setTimeout(() => setDraftExitAnimating(false), DRAFT_EXIT_DURATION_MS);
+ return () => window.clearTimeout(timeoutId);
+ }, [draftOpen, shouldAnimateDraftTransition]);
+
+ React.useLayoutEffect(() => {
+ previousDraftOpenRef.current = draftOpen;
+ }, [draftOpen]);
+
+ React.useLayoutEffect(() => {
+ const composerSlot = composerSlotRef.current;
+ if (!composerSlot) return;
+
+ const composerEditor = composerSlot.querySelector('[data-testid="chat-input"]');
+ const currentRect = composerEditor?.getBoundingClientRect() ?? composerSlot.getBoundingClientRect();
+ const previousRect = previousComposerRectRef.current;
+ const leftDraftLayout = previousDraftLayoutVisibleRef.current
+ && !draftLayoutVisible
+ && Boolean(currentSessionId);
+ const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+
+ const shouldMoveComposer = leftDraftLayout && shouldAnimateDraftTransition;
+ if (shouldMoveComposer && previousRect && !reduceMotion && !useCompactDraftLayout && !isDesktopExpandedInput) {
+ const deltaX = previousRect.left - currentRect.left;
+ const deltaY = previousRect.top - currentRect.top;
+ composerSlot.animate(
+ [
+ { transform: `translate(${deltaX}px, ${deltaY}px)` },
+ { transform: 'translate(0, 0)' },
+ ],
+ { duration: COMPOSER_MOVE_DURATION_MS, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
+ );
+ }
+ previousComposerRectRef.current = currentRect;
+ previousDraftLayoutVisibleRef.current = draftLayoutVisible;
+ if (leftDraftLayout && currentSessionId) {
+ clearMaterializedDraftSession(currentSessionId);
+ }
+ }, [
+ clearMaterializedDraftSession,
+ currentSessionId,
+ draftLayoutVisible,
+ isDesktopExpandedInput,
+ shouldAnimateDraftTransition,
+ useCompactDraftLayout,
+ ]);
+
if (!currentSessionId && !draftOpen) {
- // With auto-open, the draft welcome opens on the next tick (effect below),
- // so the empty state is only ever transient here — render a neutral
- // background instead of flashing the logo / "start a new chat" on refresh.
- // Keep the empty state when there's nothing to auto-open or an init error to show.
+ // The auto-open effect runs on the next tick. Use a neutral background
+ // until then instead of flashing the standard empty state.
if (autoOpenDraft && !initError) {
return ;
}
@@ -1106,82 +1182,37 @@ export const ChatContainer: React.FC = ({
);
}
- if (!currentSessionId && draftOpen) {
- return (
- // No transform on this root: it would become the containing block for
- // the fullscreen composer's position:fixed visual-viewport pinning in
- // mobile browsers (see ChatInput's composerFormRef effect).
-
-
- {useCompactDraftLayout && !isDesktopExpandedInput ? {t('chat.container.sessionLoadError.title')}
+ {t('chat.container.sessionLoadError.description')}
+
+
+
+ );
+ }
- if (isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking) {
- if (sessionMessageLoadState.status === 'error') {
- return (
-
- {returnToParentButton}
-
-
-
- {t('chat.container.sessionLoadError.title')}
- {t('chat.container.sessionLoadError.description')}
-
-
-
-
- {promptReadOnly ? = ({
- {item.toolRows.map((row) => {
- return (
-
- = ({
-
- );
- }
+ const sessionSurface = (() => {
+ if (draftOpen || draftPresentationExiting) {
+ if (!useCompactDraftLayout || isDesktopExpandedInput) {
+ return null;
+ }
+ return
- {useCompactDraftLayout && !isDesktopExpandedInput ?
- {workStatusPanelMountable ? (
-
- {promptReadOnly ?
- {workStatusOverlayMountable ? (
-
+
+ );
+ }
- if (isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking) {
- if (sessionMessageLoadState.status === 'error') {
- return (
-
+
+
+
+ {t('chat.container.sessionLoadError.title')}
+{t('chat.container.sessionLoadError.description')}
+ +
- {returnToParentButton}
-
- );
- }
- return (
-
-
-
-
-
-
- {t('chat.container.sessionLoadError.title')}
-{t('chat.container.sessionLoadError.description')}
- -
- {promptReadOnly ?
-
- {returnToParentButton}
-
@@ -1192,20 +1223,18 @@ export const ChatContainer: React.FC = ({
@@ -1214,62 +1243,25 @@ export const ChatContainer: React.FC = ({
- {item.toolRows.map((row) => {
- return (
-
-
- );
- })}
+ {item.toolRows.map((row) => (
+
+
+ ))}
-
- {promptReadOnly ?
-
- {returnToParentButton}
-
- );
- }
+ />
+ );
+ }
- return (
-
- {!isDesktopExpandedInput ? (
-
-
-
- ) : null}
-
- {promptReadOnly ?
-
-
- {returnToParentButton}
- = ({
isLoadingOlderPrompts={timelineController.isLoadingOlder}
onLoadEarlierPrompts={handleLoadOlderClick}
/>
+ );
+ })();
+
+ return (
+
+ = ({ onOpenSettings, scrollToBottom, active = true }) => {
+const ChatInputComponent: React.FC = ({
+ onOpenSettings,
+ scrollToBottom,
+ active = true,
+ draftPresentationExiting = false,
+}) => {
const { t } = useI18n();
// Track if we restored a draft on mount (for text selection)
const initialDraftRef = React.useRef(null);
@@ -314,6 +323,20 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const currentSessionDirectoryForSync = useSessionUIStore(
React.useCallback((s) => currentSessionId ? s.getDirectoryForSession(currentSessionId) : null, [currentSessionId]),
);
+ // btw mode: the CURRENT session's metadata links an active btw fork and
+ // the panel is expanded, so this composer's sends route to the fork
+ // instead of the main session. Collapsed keeps the fork alive (chip stays
+ // visible) while the composer talks to the main session again.
+ const btwPanel = useBtwPanelState(currentSessionId, currentSessionDirectoryForSync ?? currentDirectory ?? undefined);
+ const btwSessionId = btwPanel.btwSessionId;
+ const btwDirectory = btwPanel.btwDirectory;
+ const btwSessionRef = React.useMemo(
+ () => (currentSessionId && btwSessionId && btwDirectory
+ ? { parentSessionId: currentSessionId, btwSessionId, directory: btwDirectory }
+ : null),
+ [btwDirectory, btwSessionId, currentSessionId],
+ );
+ const isBtwActive = Boolean(btwSessionRef) && !btwPanel.collapsed;
const activeRuntimeKey = getRuntimeKey();
const chatDraftIdentity = React.useMemo(
() => createChatDraftIdentity(
@@ -331,6 +354,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const setNewSessionDraftTarget = useSessionUIStore((s) => s.setNewSessionDraftTarget);
const setDraftPermissionAutoAcceptEnabled = useSessionUIStore((s) => s.setDraftPermissionAutoAcceptEnabled);
const openNewSessionDraft = useSessionUIStore((s) => s.openNewSessionDraft);
+ const prepareChatDraftDirectory = useSessionUIStore((s) => s.prepareChatDraftDirectory);
const abortPromptSessionId = useSessionUIStore((s) => s.abortPromptSessionId);
const clearAbortPrompt = useSessionUIStore((s) => s.clearAbortPrompt);
const attachedFiles = useInputStore((s) => s.attachedFiles);
@@ -341,6 +365,11 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const pendingPresetSubmit = useInputStore((s) => s.pendingPresetSubmit);
const setPendingInputText = useInputStore((s) => s.setPendingInputText);
const pendingInputText = useInputStore((s) => s.pendingInputText);
+
+ React.useEffect(() => {
+ if (!newSessionDraftOpen || newSessionDraft.target !== 'chat' || message.trim().length === 0) return;
+ void prepareChatDraftDirectory();
+ }, [message, newSessionDraft.target, newSessionDraftOpen, prepareChatDraftDirectory]);
const consumePendingSyntheticParts = useInputStore((s) => s.consumePendingSyntheticParts);
const acknowledgeSessionAbort = useSessionUIStore((s) => s.acknowledgeSessionAbort);
const abortCurrentOperation = React.useCallback(
@@ -557,7 +586,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const availableSkills = useSkillsStore((s) => s.skills);
const knownSlashNames = React.useMemo(() => {
const names = new Set([
- 'init', 'review', 'undo', 'redo', 'timeline', 'compact', 'summary', 'workspace-review', 'plan-feature', 'craft-goal', 'schedule-task', 'catch-up', 'debug', 'weigh', 'explore',
+ 'init', 'review', 'undo', 'redo', 'timeline', 'compact', 'btw', 'summary', 'workspace-review', 'plan-feature', 'craft-goal', 'schedule-task', 'catch-up', 'debug', 'weigh', 'explore',
]);
if (!isMobile && !isVSCodeRuntime()) names.add('handoff-review');
for (const command of availableCommands) names.add(command.name.toLowerCase());
@@ -832,8 +861,13 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
prevNewSessionDraftOpenRef.current = newSessionDraftOpen;
}, [newSessionDraftOpen, isMobile]);
- // Session activity for queue availability and controls
- const { phase: sessionPhase } = useCurrentSessionActivity();
+ // Session activity for queue availability and controls. In btw mode the
+ // composer controls the temporary fork, so the stop button and send-button
+ // state follow the FORK's activity; the queue affordance stays tied to the
+ // main session (queued messages always belong to the main chat).
+ const { phase: currentSessionPhase } = useCurrentSessionActivity();
+ const { phase: btwSessionPhase } = useSessionActivity(btwSessionId, btwDirectory ?? undefined);
+ const sessionPhase = isBtwActive ? btwSessionPhase : currentSessionPhase;
const autoReviewRunning = useAutoReviewStore(React.useCallback((state) => {
if (!currentSessionId) return false;
const run = state.runsByOriginalSessionID[currentSessionId];
@@ -1043,12 +1077,15 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
// queued-message auto-send hook delivers it as the next turn once the
// rejected turn winds down and the session returns to idle. This avoids
// aborting the turn (which would surface an "aborted" notice).
- if (currentSessionId && !queuedOnly && autoReviewRunning) {
+ if (currentSessionId && !queuedOnly && autoReviewRunning && !isBtwActive) {
handleQueueMessage();
return;
}
- if (currentSessionId && !queuedOnly) {
+ // btw mode: the child fork's blocking prompts are answered inside the
+ // panel; the composer send goes straight to the fork (routeMessage
+ // queues if the fork's own turn is busy).
+ if (currentSessionId && !queuedOnly && !isBtwActive) {
// Sending is authoritative for blocking prompts: deny pending
// permissions and dismiss open questions for the session subtree,
// then queue the message once if either was open. The deny/clear
@@ -1068,17 +1105,24 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
}
}
- const sendMessageOptions: {
+ let sendMessageOptions: {
target?: NonNullable;
+ sessionId?: string;
+ directory?: string;
draftSnapshot?: NonNullable;
delivery?: 'steer';
- } | undefined = (capturedTarget || capturedDraftSnapshot || delivery)
- ? {
- ...(capturedTarget ? { target: capturedTarget } : {}),
- ...(capturedDraftSnapshot ? { draftSnapshot: capturedDraftSnapshot } : {}),
- ...(delivery ? { delivery } : {}),
- }
- : undefined;
+ } | undefined;
+ if (isBtwActive && btwSessionId && btwDirectory) {
+ sendMessageOptions = {
+ sessionId: btwSessionId,
+ directory: btwDirectory,
+ };
+ } else if (capturedTarget || capturedDraftSnapshot || delivery) {
+ sendMessageOptions = {};
+ if (capturedTarget) sendMessageOptions.target = capturedTarget;
+ if (capturedDraftSnapshot) sendMessageOptions.draftSnapshot = capturedDraftSnapshot;
+ }
+ if (delivery && sendMessageOptions) sendMessageOptions.delivery = delivery;
const preparedDocumentMentions = new Map();
const reservedFilenames = new Set([
@@ -1219,6 +1263,40 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
}
return;
}
+ if (commandName === 'btw' && currentSessionId) {
+ const question = argument.trim();
+ if (!question) {
+ toast.error(t('chat.btw.toast.emptyArgument'));
+ return;
+ }
+ const targetDirectory = useSessionUIStore.getState().getDirectoryForSession(currentSessionId)
+ || currentDirectory
+ || null;
+ if (!targetDirectory) {
+ toast.error(t('chat.btw.toast.createFailed'));
+ return;
+ }
+ try {
+ // A new btw replaces this session's current one: destroy
+ // the previous fork first so forks never accumulate.
+ if (btwSessionRef) {
+ await destroyBtwSession(btwSessionRef);
+ }
+ await startBtwSession({
+ parentSessionId: currentSessionId,
+ question,
+ directory: targetDirectory,
+ providerID: providerIdToSend,
+ modelID: modelIdToSend,
+ agent: agentNameToSend,
+ variant: variantToSend,
+ });
+ scrollToBottom?.();
+ } catch (error) {
+ toast.error(getSubmitErrorMessage(error, t('chat.btw.toast.createFailed')));
+ }
+ return;
+ }
// The rest render a visible prompt plus synthetic instructions and
// send them as one message.
@@ -1254,7 +1332,9 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
}
const currentSessionDirectory = capturedTarget?.directory ?? currentDirectory;
- const shouldAddResponseStyle = newSessionDraftOpen || (currentSessionId ? !hasUserMessages(currentSessionId, currentSessionDirectory) : false);
+ // btw mode: the fork already carries the question plus full history,
+ // so the response-style instruction never applies there.
+ const shouldAddResponseStyle = !isBtwActive && (newSessionDraftOpen || (currentSessionId ? !hasUserMessages(currentSessionId, currentSessionDirectory) : false));
if (shouldAddResponseStyle) {
const responseStyleInstruction = await fetchResponseStyleInstruction().catch(() => null);
if (responseStyleInstruction) {
@@ -1424,7 +1504,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
// Primary action for send/queue button — respects selected follow-up behavior
const handlePrimaryAction = React.useCallback(() => {
const inputSnapshot = getCurrentInputSnapshot();
- const canQueue = inputMode === 'normal' && inputSnapshot.hasContent && currentSessionId && (sessionPhase !== 'idle' || autoReviewRunning);
+ const canQueue = !isBtwActive && inputMode === 'normal' && inputSnapshot.hasContent && currentSessionId && (currentSessionPhase !== 'idle' || autoReviewRunning);
if (followUpBehavior === 'queue' && canQueue) {
handleQueueMessage();
} else if (followUpBehavior === 'steer' && canQueue) {
@@ -1432,7 +1512,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
} else {
void handleSubmitRef.current();
}
- }, [inputMode, getCurrentInputSnapshot, currentSessionId, sessionPhase, autoReviewRunning, followUpBehavior, handleQueueMessage]);
+ }, [inputMode, getCurrentInputSnapshot, currentSessionId, currentSessionPhase, autoReviewRunning, followUpBehavior, handleQueueMessage, isBtwActive]);
// Draft welcome presets: submit immediately.
const submitPresetPrompt = React.useCallback((text: string, type: 'command' | 'skill') => {
@@ -1636,15 +1716,19 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
return;
}
- // Handle Enter/Ctrl+Enter based on selected follow-up behavior.
- if (e.key === 'Enter' && !e.shiftKey && (!isMobile || e.ctrlKey || e.metaKey)) {
+ // Handle Enter/Ctrl+Enter based on selected follow-up behavior. On
+ // mobile, and in desktop focus mode, plain Enter writes a newline and
+ // only Cmd/Ctrl+Enter sends: both are surfaces for composing long
+ // prompts, where an accidental send costs more than an extra keypress.
+ const requiresModifierToSend = isMobile || isDesktopExpanded;
+ if (e.key === 'Enter' && !e.shiftKey && (!requiresModifierToSend || e.ctrlKey || e.metaKey)) {
e.preventDefault();
const isCtrlEnter = e.ctrlKey || e.metaKey;
// Queueing / steering only works when there's an existing busy
// session (or an active auto-review run).
- const canQueue = inputMode === 'normal' && hasContent && currentSessionId && (sessionPhase !== 'idle' || autoReviewRunning);
+ const canQueue = !isBtwActive && inputMode === 'normal' && hasContent && currentSessionId && (currentSessionPhase !== 'idle' || autoReviewRunning);
if (followUpBehavior === 'queue') {
if (isCtrlEnter || !canQueue) {
@@ -1694,8 +1778,11 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
clearAbortPrompt();
startAbortIndicator();
- void abortCurrentOperation(currentSessionId || undefined);
- }, [abortCurrentOperation, clearAbortPrompt, currentSessionId, startAbortIndicator]);
+ // btw mode: the stop button stops the fork's turn, not the main
+ // session's.
+ const abortTarget = isBtwActive && btwSessionId ? btwSessionId : currentSessionId;
+ void abortCurrentOperation(abortTarget || undefined);
+ }, [abortCurrentOperation, btwSessionId, clearAbortPrompt, currentSessionId, isBtwActive, startAbortIndicator]);
const handleCycleAgent = React.useCallback((direction: 1 | -1 = 1) => {
const nextAgentName = getCycledPrimaryAgentName(agents, currentAgentName, direction);
@@ -2392,6 +2479,15 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const chatSurfaceMode = useChatSurfaceMode();
const isMiniChatSurface = chatSurfaceMode === 'mini-chat';
+ const showDesktopDraftPresentation = (newSessionDraftOpen || draftPresentationExiting)
+ && !isDesktopExpanded
+ && !isMobile
+ && !isVSCode
+ && !isMiniChatSurface;
+ const draftPresentationClassName = cn(
+ 'transition-opacity duration-[120ms] ease-out motion-reduce:transition-none',
+ draftPresentationExiting && 'pointer-events-none opacity-0',
+ );
const hasPendingChanges = React.useMemo(() => {
if (isMiniChatSurface) {
@@ -2405,7 +2501,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
React.useEffect(() => {
- if (!showDraftTargetSelectors || !selectedDraftProject || !selectedDraftDirectory) {
+ if (!showDraftTargetSelectors || !selectedDraftProject || selectedDraftProject.kind === 'chat' || !selectedDraftDirectory) {
return;
}
if (newSessionDraft?.pendingWorktreeRequestId || newSessionDraft?.bootstrapPendingDirectory || newSessionDraft?.preserveDirectoryOverride) {
@@ -2569,8 +2665,8 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
)}
style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined}
>
- {newSessionDraftOpen && !isDesktopExpanded && !isMobile && !isVSCode && !isMiniChatSurface ? (
-
+ {returnToParentButton}
+ {sessionSurface}
= ({
visible={showWorkStatusOverlay}
sessionId={currentSessionId ?? null}
directory={workStatusDirectory ?? null}
+ repositoryEnabled={!isManagedChatContext}
/>
) : null}
@@ -1349,6 +1361,7 @@ export const ChatContainer: React.FC = ({
visible={showWorkStatusPanel}
sessionId={currentSessionId ?? null}
directory={workStatusDirectory ?? null}
+ repositoryEnabled={!isManagedChatContext}
/>
) : null}
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index f822053d..a7befbcf 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -34,6 +34,9 @@ import {
type ChatDraftSnapshot,
} from '@/lib/chatDraftPersistence';
import { ReviewFlowDialog, type ReviewFlowExecution } from '@/components/session/ReviewFlowDialog';
+import { BtwPanel } from './btw/BtwPanel';
+import { useBtwPanelState } from './btw/useBtwPanelState';
+import { destroyBtwSession, startBtwSession, type BtwSessionRef } from '@/lib/btw';
import { AttachedFilesList, AttachedVSCodeFileChips, ActiveEditorFileSuggestion } from './FileAttachment';
import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
import type { ToolPopupContent } from './message/types';
@@ -51,7 +54,7 @@ import { PendingChangesBar } from './PendingChangesBar';
import { useChatSurfaceMode } from './useChatSurfaceMode';
import { MobileAgentButton } from './MobileAgentButton';
import { MobileModelButton } from './MobileModelButton';
-import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
+import { useCurrentSessionActivity, useSessionActivity } from '@/hooks/useSessionActivity';
import { toast } from '@/components/ui';
// useMessageStore removed — messages now come from sync system
import { isVSCodeRuntime } from '@/lib/desktop';
@@ -229,6 +232,7 @@ interface ChatInputProps {
onOpenSettings?: () => void;
scrollToBottom?: () => void;
active?: boolean;
+ draftPresentationExiting?: boolean;
}
const resolveChatDraftIdentity = (sessionId: string | null): ChatDraftIdentity | null => {
@@ -242,7 +246,12 @@ const resolveChatDraftIdentity = (sessionId: string | null): ChatDraftIdentity |
return createChatDraftIdentity(getRuntimeKey(), directory, sessionId);
};
-const ChatInputComponent: React.FC
- {!isDesktopExpandedInput && sessionMessages.length > 0 && (
+ {!draftLayoutVisible && !isDesktopExpandedInput && sessionMessages.length > 0 && (
{/* Inside the chat column, not beside it: as a row sibling it took
@@ -1327,6 +1338,7 @@ export const ChatContainer: React.FC
+ {showDesktopDraftPresentation ? (
+
{renderDraftTitle(
draftProjectLabel
@@ -2645,21 +2741,23 @@ const ChatInputComponent: React.FC
- {newSessionDraftOpen && !isDesktopExpanded && !isMobile && !isVSCode && !isMiniChatSurface ? (
+ {showDesktopDraftPresentation ? (
submitPresetPrompt(starter.submitText, starter.ref.type)}
- className="chat-input-column mt-4"
+ className={cn('chat-input-column mt-4', draftPresentationClassName)}
/>
) : null}
+ {currentSessionId ? = ({
const messageRole = React.useMemo(() => deriveMessageRole(message.info), [message.info]);
const isUser = messageRole.isUser;
+ const chatSurfaceMode = useChatSurfaceMode();
const useExternalUserActionsRow = isUser && (isMobile || !stickyUserHeader);
const showStickyInlineHoverRow = isUser && !isMobile && stickyUserHeader && !useExternalUserActionsRow;
@@ -1044,7 +1046,10 @@ const ChatMessage: React.FC = ({
respectReducedMotion
>
(null);
const isMobile = useUIStore((state) => state.isMobile);
- const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, isMobile);
+ const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, true, 240);
const [selectedIndex, setSelectedIndex] = React.useState(0);
const selectedIndexRef = React.useRef(0);
const [filteredSnippets, setFilteredSnippets] = React.useState([]);
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 66ecde5f..1159e822 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -306,13 +306,19 @@ export const StatusRow: React.FC = ({
return (
{renderDraftTitle(
draftProjectLabel
@@ -2645,21 +2741,23 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
? null
: = ({ onOpenSettings, scrollTo
}}
onFocus={mobileShell.onEditorFocus}
onBlur={mobileShell.onEditorBlur}
- placeholder={currentSessionId || newSessionDraftOpen
- ? inputMode === 'shell'
- ? t('chat.chatInput.placeholder.shell')
- : t(useCompactChatPlaceholder ? 'chat.chatInput.placeholder.chatCompact' : 'chat.chatInput.placeholder.chat')
- : t('chat.chatInput.placeholder.selectSession')}
+ placeholder={isBtwActive
+ ? t('chat.btw.mainComposerPlaceholder')
+ : currentSessionId || newSessionDraftOpen
+ ? inputMode === 'shell'
+ ? t('chat.chatInput.placeholder.shell')
+ : t(useCompactChatPlaceholder ? 'chat.chatInput.placeholder.chatCompact' : 'chat.chatInput.placeholder.chat')
+ : t('chat.chatInput.placeholder.selectSession')}
editable={Boolean(currentSessionId || newSessionDraftOpen)}
autoCorrect={isMobile}
autoCapitalize={isMobile ? 'sentences' : 'none'}
@@ -2923,12 +3023,13 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
/>
) : null}
+
) : null}
{isMobile && showDraftTargetSelectors && selectedDraftProject ? (
-
+
{t('chat.modelControls.thinking')}
handleVariantSelect(undefined)}>
+
= ({
) : (
sortedAndFilteredAgents.map((agent) => (
- handleAgentChange(agent.name)}
- >
- {
const containerRef = React.useRef(null);
const isMobile = useUIStore((state) => state.isMobile);
- const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, isMobile);
+ const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, true, 240);
const [selectedIndex, setSelectedIndex] = React.useState(0);
const selectedIndexRef = React.useRef(0);
const keyboardNavigationRef = React.useRef(false);
@@ -126,6 +127,7 @@ export const SkillAutocomplete = React.forwardRef
+
);
};
diff --git a/packages/ui/src/components/chat/SnippetAutocomplete.tsx b/packages/ui/src/components/chat/SnippetAutocomplete.tsx
index dbba82fd..87125618 100644
--- a/packages/ui/src/components/chat/SnippetAutocomplete.tsx
+++ b/packages/ui/src/components/chat/SnippetAutocomplete.tsx
@@ -32,7 +32,7 @@ export const SnippetAutocomplete = React.forwardRef
+ {/* peek: the action row under the bubble is suppressed, so
+ reserve its gap to the next message here, OUTSIDE the
+ bubble background. */}
+
+
);
})}
{commands.length === 0 && (
diff --git a/packages/ui/src/components/chat/DiffPreview.tsx b/packages/ui/src/components/chat/DiffPreview.tsx
index c749b033..2c0fc05a 100644
--- a/packages/ui/src/components/chat/DiffPreview.tsx
+++ b/packages/ui/src/components/chat/DiffPreview.tsx
@@ -3,17 +3,29 @@ import { cn } from '@/lib/utils';
import { getLanguageFromExtension } from '@/lib/toolHelpers';
import { useThemeSystem } from '@/contexts/useThemeSystem';
import { getMarkdownSyntaxVars } from '@/components/chat/markdown/markdownSyntaxVars';
-import { useWorkerHighlightedLines } from '@/components/code/useWorkerHighlightedLines';
+import {
+ useWorkerHighlightedLines,
+ type WorkerHighlightedLinesResult,
+} from '@/components/code/useWorkerHighlightedLines';
import { parseDiffToUnified } from './message/toolRenderers';
-// One highlighted line: swaps in worker-tokenized inner HTML when ready, falls
-// back to plain text while loading or on failure.
-const CodeLineContent: React.FC<{ content: string; html: string | undefined }> = ({ content, html }) =>
- html !== undefined ? (
-
- ) : (
- {content}
- );
+// Keep the line's layout stable while a cold worker request finishes. Plain
+// text appears only if highlighting fails, avoiding a visible color flash.
+interface CodeLineContentProps {
+ content: string;
+ html: string | undefined;
+ status: WorkerHighlightedLinesResult['status'];
+}
+
+const CodeLineContent: React.FC = ({ content, html, status }) => {
+ if (status === 'ready' && html !== undefined) {
+ return ;
+ }
+ if (status === 'loading') {
+ return {content};
+ }
+ return {content};
+};
interface DiffPreviewProps {
diff: string;
@@ -44,7 +56,7 @@ export const DiffPreview: React.FC = ({ diff, filePath }) => {
([]);
const containerRef = React.useRef(null);
const isMobile = useUIStore((state) => state.isMobile);
- const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, isMobile);
+ const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, true);
const normalizedSearchQuery = (searchQuery ?? '').trim();
const recentFiles = React.useMemo(() => {
if (!projectRoot || !projectTabs) {
@@ -458,6 +459,7 @@ export const FileMentionAutocomplete = React.forwardRef {
const isSelected = selectedIndex === index;
return (
+
);
})}
{visibleAgents.length === 2 && normalizedSearchQuery.length === 0 && agents.length > 2 && (
diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
index 6d4665e2..b8af3e03 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
@@ -4,11 +4,12 @@ import { renderMermaidASCII, renderMermaidSVG } from 'beautiful-mermaid';
import type { Part } from '@opencode-ai/sdk/v2';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
-import { runtimeFetch } from '@/lib/runtime-fetch';
-import { isExternalHttpUrl, openExternalUrl } from '@/lib/url';
+import { openExternalUrl } from '@/lib/url';
import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
import { getDefaultTheme } from '@/lib/theme/themes';
import type { Theme } from '@/types/theme';
+import { openAppLinkWithConfirmation } from './appLinkConfirmation';
+import { attachAppLinkInteractions } from './appLinkInteractions';
import type { ToolPopupContent } from './message/types';
import { FadeInOnReveal } from './message/FadeInOnReveal';
import { useUIStore } from '@/stores/useUIStore';
@@ -42,6 +43,7 @@ import {
parseFileReference,
type ParsedFileReference,
} from './fileReferenceParser';
+import { fileReferenceExists } from './fileReferenceStat';
import { streamPerfCount, streamPerfObserve } from '@/stores/utils/streamDebug';
const useCurrentMermaidTheme = () => {
@@ -55,7 +57,7 @@ const useCurrentMermaidTheme = () => {
: fallbackLight);
};
-const useExternalLinkInteractions = ({
+const useLinkInteractions = ({
containerRef,
enabled,
}: {
@@ -63,48 +65,16 @@ const useExternalLinkInteractions = ({
enabled?: boolean;
}) => {
React.useEffect(() => {
- if (enabled === false) {
- return;
- }
-
const container = containerRef.current;
if (!container) {
return;
}
- const handleClick = (event: MouseEvent) => {
- if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
- return;
- }
-
- const target = event.target;
- if (!(target instanceof Element)) {
- return;
- }
-
- const anchor = target.closest('a[href]');
- if (!(anchor instanceof HTMLAnchorElement)) {
- return;
- }
-
- if (anchor.getAttribute('data-openchamber-file-link') === 'true') {
- return;
- }
-
- const href = anchor.getAttribute('href') ?? '';
- if (!isExternalHttpUrl(href)) {
- return;
- }
-
- event.preventDefault();
- event.stopPropagation();
- void openExternalUrl(href);
- };
-
- container.addEventListener('click', handleClick);
- return () => {
- container.removeEventListener('click', handleClick);
- };
+ return attachAppLinkInteractions(container, {
+ allowExternalHttp: enabled !== false,
+ openAppLink: (href) => void openAppLinkWithConfirmation(href),
+ openExternalHttp: (href) => void openExternalUrl(href),
+ });
}, [containerRef, enabled]);
};
@@ -151,19 +121,9 @@ const CODE_BLOCK_PATH_SCANNED_ATTR = 'data-openchamber-block-paths-scanned';
// output. The regex is defined in `./fileReferenceParser`; the inline-code
// pipeline reads full text content rather than using this regex.
const MAX_BLOCK_CODE_SCAN_LENGTH = 200_000;
-const FILE_REFERENCE_STAT_CONCURRENCY = 4;
-const FILE_REFERENCE_STAT_CACHE_MAX = 1000;
-const VSCODE_FILE_REFERENCE_STAT_CACHE_MAX = 200;
const FILE_REFERENCE_LINK_LIMIT = 80;
const VSCODE_FILE_REFERENCE_LINK_LIMIT = 40;
const FILE_REFERENCE_ANNOTATION_DELAY_MS = 160;
-const FILE_REFERENCE_STAT_CACHE = new Map>();
-let activeFileReferenceStatCount = 0;
-const pendingFileReferenceStats: Array<() => void> = [];
-
-const getFileReferenceStatCacheMax = (): number => (
- isVSCodeRuntime() ? VSCODE_FILE_REFERENCE_STAT_CACHE_MAX : FILE_REFERENCE_STAT_CACHE_MAX
-);
const getFileReferenceLinkLimit = (): number => (
isVSCodeRuntime() ? VSCODE_FILE_REFERENCE_LINK_LIMIT : FILE_REFERENCE_LINK_LIMIT
@@ -361,61 +321,6 @@ const getResolvedReference = (rawValue: string, effectiveDirectory: string): (Pa
};
};
-const fileReferenceExists = (resolvedPath: string): Promise => {
- const normalizedPath = normalizePath(resolvedPath);
- if (!normalizedPath) {
- return Promise.resolve(false);
- }
-
- const cached = FILE_REFERENCE_STAT_CACHE.get(normalizedPath);
- if (cached) {
- FILE_REFERENCE_STAT_CACHE.delete(normalizedPath);
- FILE_REFERENCE_STAT_CACHE.set(normalizedPath, cached);
- return cached;
- }
-
- const request = new Promise((resolve) => {
- const run = () => {
- activeFileReferenceStatCount += 1;
- void runtimeFetch(`/api/fs/stat?path=${encodeURIComponent(normalizedPath)}&optional=true`, {
- method: 'GET',
- cache: 'no-store',
- })
- .then(async (response) => {
- if (!response.ok) {
- resolve(false);
- return;
- }
- const payload = await response.json().catch(() => null) as { exists?: unknown } | null;
- resolve(payload?.exists !== false);
- })
- .catch(() => resolve(false))
- .finally(() => {
- activeFileReferenceStatCount = Math.max(0, activeFileReferenceStatCount - 1);
- pendingFileReferenceStats.shift()?.();
- });
- };
-
- if (activeFileReferenceStatCount < FILE_REFERENCE_STAT_CONCURRENCY) {
- run();
- return;
- }
-
- pendingFileReferenceStats.push(run);
- });
-
- const maxCacheEntries = getFileReferenceStatCacheMax();
- while (FILE_REFERENCE_STAT_CACHE.size >= maxCacheEntries) {
- const oldest = FILE_REFERENCE_STAT_CACHE.keys().next().value;
- if (typeof oldest !== 'string') {
- break;
- }
- FILE_REFERENCE_STAT_CACHE.delete(oldest);
- }
- FILE_REFERENCE_STAT_CACHE.set(normalizedPath, request);
- return request;
-};
-
const getContextDirectory = (effectiveDirectory: string, resolvedPath: string): string => {
return effectiveDirectory || getDirectoryForFilePath(effectiveDirectory, resolvedPath);
};
@@ -521,7 +426,7 @@ const useFileReferenceInteractions = ({
&& !isFilePathWithinDirectory(resolved.resolvedPath, effectiveDirectory);
const existsPromise = canGrantOutsideFile
? Promise.resolve(true)
- : fileReferenceExists(resolved.resolvedPath);
+ : fileReferenceExists(resolved.resolvedPath, effectiveDirectory);
void existsPromise.then((exists) => {
if (cancelled || !exists || !container.contains(candidate)) {
@@ -1034,7 +939,7 @@ const MarkdownRendererImpl: React.FC = ({
preferRuntimeEditor: runtime.isVSCode,
enabled: enableFileReferences && !isStreaming,
});
- useExternalLinkInteractions({ containerRef });
+ useLinkInteractions({ containerRef });
const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
const ctx = useDecorateContext(currentTheme, live, effectiveDirectory ? handlePreviewLoopback : undefined, DEFAULT_MERMAID_CONTROLS);
@@ -1085,6 +990,7 @@ const SimpleMarkdownRendererImpl: React.FC<{
content: string;
className?: string;
variant?: MarkdownVariant;
+ // App links remain confirmed even where ordinary HTTP link handling is off.
disableLinkSafety?: boolean;
stripFrontmatter?: boolean;
onShowPopup?: (content: ToolPopupContent) => void;
@@ -1126,7 +1032,7 @@ const SimpleMarkdownRendererImpl: React.FC<{
preferRuntimeEditor: runtime.isVSCode,
enabled: enableFileReferences,
});
- useExternalLinkInteractions({ containerRef, enabled: !disableLinkSafety });
+ useLinkInteractions({ containerRef, enabled: !disableLinkSafety });
const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
const ctx = useDecorateContext(currentTheme, false, undefined, mermaidControls);
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index 262664b9..f7f9e1f2 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -57,6 +57,28 @@ type MobileVariantTarget = { providerId: string; modelId: string };
const buildModelRefKey = (providerID: string, modelID: string) => `${providerID}:${modelID}`;
const MAX_INLINE_MOBILE_VARIANT_OPTIONS = 6;
+const AgentDescriptionTooltip: React.FC<{
+ description?: string;
+ children: React.ReactElement;
+}> = ({ description, children }) => {
+ if (!description) {
+ return children;
+ }
+
+ return (
+
+ {children}
+
+ {description}
+
+
+ );
+};
+
const asPermissionRuleset = (value: unknown): PermissionRule[] | null => {
if (!Array.isArray(value)) {
return null;
@@ -893,25 +915,29 @@ export const ModelControls: React.FC = ({
? useSelectionStore.getState().getSessionAgentSelection(currentSessionId)
: null;
if (savedAgentName) {
- if (currentAgentName !== savedAgentName) {
- setAgent(savedAgentName);
- }
-
const savedModel = getAgentModelForSession(currentSessionId, savedAgentName);
if (savedModel) {
const result = tryApplyModelSelection(savedModel.providerId, savedModel.modelId, savedAgentName);
if (result === 'applied') {
+ if (currentAgentName !== savedAgentName) {
+ setAgent(savedAgentName);
+ }
return 'resolved';
}
if (result === 'provider-missing') {
return 'waiting';
}
+ } else if (currentAgentName !== savedAgentName) {
+ setAgent(savedAgentName);
}
}
if (savedSessionModel) {
const result = tryApplyModelSelection(savedSessionModel.providerId, savedSessionModel.modelId, savedAgentName || currentAgentName || undefined);
if (result === 'applied') {
+ if (savedAgentName && currentAgentName !== savedAgentName) {
+ setAgent(savedAgentName);
+ }
return 'resolved';
}
if (result === 'provider-missing') {
@@ -925,16 +951,15 @@ export const ModelControls: React.FC = ({
continue;
}
- if (currentAgentName !== agent.name) {
- setAgent(agent.name);
- }
-
- const existingSelection = useSelectionStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current;
- if (!existingSelection) {
- saveSessionAgentSelection(currentSessionId, agent.name);
- }
const result = tryApplyModelSelection(selection.providerId, selection.modelId, agent.name);
if (result === 'applied') {
+ if (currentAgentName !== agent.name) {
+ setAgent(agent.name);
+ }
+ const existingSelection = useSelectionStore.getState().getSessionAgentSelection(currentSessionId) || stickySessionAgentRef.current;
+ if (!existingSelection) {
+ saveSessionAgentSelection(currentSessionId, agent.name);
+ }
return 'resolved';
}
if (result === 'provider-missing') {
@@ -2316,6 +2341,7 @@ export const ModelControls: React.FC = ({
= ({
- ([]);
const containerRef = React.useRef(null);
- const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, isMobile);
+ const mobileMaxHeight = useMobileAutocompleteMaxHeight(containerRef, true);
const ignoreClickRef = React.useRef(false);
const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
const pointerMovedRef = React.useRef(false);
@@ -152,6 +153,10 @@ export const CommandAutocomplete = React.forwardRef
{ itemRefs.current[index] = el; }}
@@ -471,13 +481,9 @@ export const CommandAutocomplete = React.forwardRef
)}
- {command.description && !isMobile && (
-
- {command.description}
-
- )}
{hunk.lines.map((line, lineIdx) => {
- const html = highlighted?.[lineCursor];
+ const html = highlighted.lines?.[lineCursor];
lineCursor += 1;
return (
= ({ content, filePath })
{lineIdx + 1}
))}
diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
index cef55209..9192fbc7 100644
--- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -14,6 +14,7 @@ import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
import { useI18n } from '@/lib/i18n';
import { useUIStore } from '@/stores/useUIStore';
import { useMobileAutocompleteMaxHeight } from './useMobileAutocompleteMaxHeight';
+import { AutocompleteRowTooltip } from './composer/ui/AutocompleteRowTooltip';
type FileInfo = ProjectFileSearchHit;
type AgentInfo = {
@@ -80,7 +81,7 @@ export const FileMentionAutocomplete = React.forwardRef = ({ diff, filePath }) => {
{line.lineNumber || ''}
);
@@ -106,7 +118,11 @@ export const WritePreview: React.FC
-
-
{ itemRefs.current[index] = el; }}
@@ -470,11 +472,9 @@ export const FileMentionAutocomplete = React.forwardRef
+ @{agent.name}
- {agent.description && !isMobile ? (
- {agent.description}
- ) : null}
@@ -2708,7 +2734,7 @@ export const ModelControls: React.FC = ({
-
+
+ handleAgentChange(agent.name)}
+ >
-
+
+
))
)}
diff --git a/packages/ui/src/components/chat/SkillAutocomplete.tsx b/packages/ui/src/components/chat/SkillAutocomplete.tsx
index b88fd3f3..a5d05e4a 100644
--- a/packages/ui/src/components/chat/SkillAutocomplete.tsx
+++ b/packages/ui/src/components/chat/SkillAutocomplete.tsx
@@ -4,6 +4,7 @@ import { useSkillsStore } from '@/stores/useSkillsStore';
import { useUIStore } from '@/stores/useUIStore';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { useMobileAutocompleteMaxHeight } from './useMobileAutocompleteMaxHeight';
+import { AutocompleteRowTooltip } from './composer/ui/AutocompleteRowTooltip';
interface SkillInfo {
name: string;
@@ -31,7 +32,7 @@ export const SkillAutocomplete = React.forwardRef = ({
)} />
{capitalizeAgentName(agent.name)}
- {agent.description && (
-
- {agent.description}
-
- )}
- {
@@ -157,13 +159,9 @@ export const SkillAutocomplete = React.forwardRef
- {skill.description && !isMobile && (
-
- {skill.description}
-
- )}
is running…" row sits flush against
- // the message above.
- className={cn("mb-1", isMobile && "mt-2", !hasLeftAccessory && "chat-column")}
+ // This row must land exactly where the assistant turn footer (mt-2
+ // inside the message) appears when the turn completes. Measured against
+ // the live DOM: the gap ABOVE already matches (message pb-2 = footer
+ // mt-2 = 8px), but the chat is bottom-anchored and the finished message
+ // carries ~12px more structure BELOW its footer than this row has — so
+ // the swap used to lift the line up. mb-6 (24px) reserves that space
+ // under this row instead (verified: row top 636 == footer top 636).
+ className={cn("mb-6", !hasLeftAccessory && "chat-column")}
style={STATUS_ROW_CONTAINER_STYLE}
>
-
+ {/* h-8 matches the turn footer's real row height: its h-8 action
+ buttons define the footer line, with the meta text centered in it. */}
+
{/* Left: Abort status | Working placeholder | leftAccessory */}
{showAssistantStatus && showAbortStatus ? (
diff --git a/packages/ui/src/components/chat/__tests__/issue-2903-subagent-status-line-only.test.tsx b/packages/ui/src/components/chat/__tests__/issue-2903-subagent-status-line-only.test.tsx
index cd72ed46..54ed84d2 100644
--- a/packages/ui/src/components/chat/__tests__/issue-2903-subagent-status-line-only.test.tsx
+++ b/packages/ui/src/components/chat/__tests__/issue-2903-subagent-status-line-only.test.tsx
@@ -226,20 +226,23 @@ describe('issue #2903 busy embedded subagent status-line-only', () => {
expect(chatContainerSource).toContain('void ensureSessionRenderable(currentSessionId);');
});
- test('empty+busy branch skips empty state so StatusRowContainer can stand alone', () => {
+ test('the empty and idle branch leaves the status row to the busy path', () => {
+ // A busy session with no messages yet must fall through to the viewport so
+ // StatusRowContainer is the only thing on screen. The idle branch returns
+ // before it and must not render one of its own. The empty state itself no
+ // longer lives here: the draft surface owns it since the draft transition
+ // animation landed.
expect(chatContainerSource).toContain('if (sessionMessages.length === 0 && !sessionIsWorking)');
- expect(chatContainerSource).toContain(' => {
+ const scheme = getUrlScheme(url);
+ if (!scheme) {
+ return Promise.resolve();
+ }
+
+ const trustStore = useAppLinkTrustStore.getState();
+ if (trustStore.isSchemeTrusted(scheme)) {
+ return openConfirmedAppLinkUrl(url).then(() => undefined);
+ }
+
+ if (pendingRequest) {
+ pendingRequest.resolve('cancel');
+ }
+
+ return new Promise((resolve) => {
+ pendingRequest = { url, resolve };
+ emitChange();
+ }).then((choice) => {
+ if (choice === 'trust') {
+ useAppLinkTrustStore.getState().trustScheme(scheme);
+ }
+ if (choice === 'open' || choice === 'trust') {
+ return openConfirmedAppLinkUrl(url).then(() => undefined);
+ }
+ });
+};
+
+export const settleAppLinkConfirmation = (choice: AppLinkConfirmationChoice): void => {
+ const request = pendingRequest;
+ pendingRequest = null;
+ emitChange();
+ request?.resolve(choice);
+};
+
+export const subscribeAppLinkConfirmation = subscribe;
+export const getAppLinkConfirmationSnapshot = getSnapshot;
diff --git a/packages/ui/src/components/chat/appLinkInteractions.test.ts b/packages/ui/src/components/chat/appLinkInteractions.test.ts
new file mode 100644
index 00000000..e32acbd9
--- /dev/null
+++ b/packages/ui/src/components/chat/appLinkInteractions.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, test } from 'bun:test';
+
+import { attachAppLinkInteractions } from './appLinkInteractions';
+
+const TestElement = class Element {};
+const TestHTMLAnchorElement = class HTMLAnchorElement extends TestElement {};
+Object.assign(globalThis, { Element: TestElement, HTMLAnchorElement: TestHTMLAnchorElement });
+
+class TestAnchor extends HTMLAnchorElement {
+ constructor(private readonly rawHref: string) {
+ super();
+ }
+
+ getAttribute(name: string): string | null {
+ return name === 'href' ? this.rawHref : null;
+ }
+
+ closest(): TestAnchor {
+ return this;
+ }
+}
+
+class TestContainer {
+ listeners = new Map();
+
+ addEventListener(name: string, listener: (event: MouseEvent) => void): void {
+ // SAFETY: dispatch constructs every mouse field read by the production listener.
+ this.listeners.set(name, (event) => listener(event as MouseEvent));
+ }
+
+ removeEventListener(name: string, listener: (event: MouseEvent) => void): void {
+ void listener;
+ this.listeners.delete(name);
+ }
+
+ dispatch(name: string, href: string, init: Partial = {}): Event {
+ const event = new Event(name, { cancelable: true });
+ Object.defineProperties(event, {
+ target: { value: new TestAnchor(href) },
+ button: { value: init.button ?? 0 },
+ metaKey: { value: init.metaKey ?? false },
+ ctrlKey: { value: init.ctrlKey ?? false },
+ altKey: { value: init.altKey ?? false },
+ shiftKey: { value: init.shiftKey ?? false },
+ });
+ this.listeners.get(name)?.(event);
+ return event;
+ }
+}
+
+const setup = (allowExternalHttp = true) => {
+ const container = new TestContainer();
+ const appLinks: string[] = [];
+ const httpLinks: string[] = [];
+ const cleanup = attachAppLinkInteractions(container, {
+ allowExternalHttp,
+ openAppLink: (url) => appLinks.push(url),
+ openExternalHttp: (url) => httpLinks.push(url),
+ });
+ return { container, appLinks, httpLinks, cleanup };
+};
+
+describe('app link interactions', () => {
+ test('confirms plain, modifier, and middle-click activations', () => {
+ const { container, appLinks } = setup();
+ const href = 'obsidian://open?vault=Notes';
+
+ expect(container.dispatch('click', href).defaultPrevented).toBe(true);
+ expect(container.dispatch('click', href, { metaKey: true }).defaultPrevented).toBe(true);
+ expect(container.dispatch('auxclick', href, { button: 1 }).defaultPrevented).toBe(true);
+ expect(appLinks).toEqual([href, href, href]);
+ });
+
+ test('blocks drag activation without opening immediately', () => {
+ const { container, appLinks } = setup();
+ const href = 'obsidian://open?vault=Notes';
+
+ expect(container.dispatch('dragstart', href).defaultPrevented).toBe(true);
+ expect(appLinks).toEqual([]);
+ });
+
+ test('keeps HTTP modifier behavior and the disabled HTTP path unchanged', () => {
+ const enabled = setup();
+ const disabled = setup(false);
+ const href = 'https://example.com';
+
+ expect(enabled.container.dispatch('click', href, { ctrlKey: true }).defaultPrevented).toBe(false);
+ expect(enabled.container.dispatch('click', href).defaultPrevented).toBe(true);
+ expect(disabled.container.dispatch('click', href).defaultPrevented).toBe(false);
+ expect(enabled.httpLinks).toEqual([href]);
+ expect(disabled.httpLinks).toEqual([]);
+ });
+});
diff --git a/packages/ui/src/components/chat/appLinkInteractions.ts b/packages/ui/src/components/chat/appLinkInteractions.ts
new file mode 100644
index 00000000..595e671a
--- /dev/null
+++ b/packages/ui/src/components/chat/appLinkInteractions.ts
@@ -0,0 +1,75 @@
+import { isAppLinkUrl, isExternalHttpUrl } from '@/lib/url';
+
+type AppLinkInteractionOptions = {
+ allowExternalHttp: boolean;
+ openAppLink: (url: string) => void;
+ openExternalHttp: (url: string) => void;
+};
+
+type LinkInteractionContainer = {
+ addEventListener: (type: string, listener: (event: MouseEvent) => void) => void;
+ removeEventListener: (type: string, listener: (event: MouseEvent) => void) => void;
+};
+
+const findLink = (event: MouseEvent | DragEvent): HTMLAnchorElement | null => {
+ const target = event.target;
+ if (!(target instanceof Element)) return null;
+ const anchor = target.closest('a[href]');
+ if (!(anchor instanceof HTMLAnchorElement)) return null;
+ if (anchor.getAttribute('data-openchamber-file-link') === 'true') return null;
+ return anchor;
+};
+
+const interceptAppLink = (
+ event: MouseEvent | DragEvent,
+ openAppLink?: (url: string) => void,
+): boolean => {
+ if (event.defaultPrevented) return false;
+ const anchor = findLink(event);
+ const href = anchor?.getAttribute('href') ?? '';
+ if (!isAppLinkUrl(href)) return false;
+
+ event.preventDefault();
+ event.stopPropagation();
+ openAppLink?.(href);
+ return true;
+};
+
+const isPlainPrimaryClick = (event: MouseEvent): boolean => (
+ event.button === 0
+ && !event.metaKey
+ && !event.ctrlKey
+ && !event.altKey
+ && !event.shiftKey
+);
+
+export const attachAppLinkInteractions = (
+ container: LinkInteractionContainer,
+ options: AppLinkInteractionOptions,
+): (() => void) => {
+ const handleClick = (event: MouseEvent) => {
+ if (interceptAppLink(event, options.openAppLink)) return;
+ if (!options.allowExternalHttp || event.defaultPrevented || !isPlainPrimaryClick(event)) return;
+
+ const href = findLink(event)?.getAttribute('href') ?? '';
+ if (!isExternalHttpUrl(href)) return;
+ event.preventDefault();
+ event.stopPropagation();
+ options.openExternalHttp(href);
+ };
+ const handleAuxClick = (event: MouseEvent) => {
+ if (event.button === 1) interceptAppLink(event, options.openAppLink);
+ };
+ const blockAlternateAppLinkActivation = (event: MouseEvent | DragEvent) => {
+ interceptAppLink(event);
+ };
+
+ container.addEventListener('click', handleClick);
+ container.addEventListener('auxclick', handleAuxClick);
+ container.addEventListener('dragstart', blockAlternateAppLinkActivation);
+ return () => {
+ container.removeEventListener('click', handleClick);
+ container.removeEventListener('auxclick', handleAuxClick);
+ container.removeEventListener('dragstart', blockAlternateAppLinkActivation);
+ };
+};
diff --git a/packages/ui/src/components/chat/btw/BtwPanel.tsx b/packages/ui/src/components/chat/btw/BtwPanel.tsx
new file mode 100644
index 00000000..ecae7ba3
--- /dev/null
+++ b/packages/ui/src/components/chat/btw/BtwPanel.tsx
@@ -0,0 +1,481 @@
+import React from 'react';
+import type { Message, Part } from '@opencode-ai/sdk/v2';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { toast } from '@/components/ui';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/icon/Icon';
+import { useBtwStore } from '@/stores/useBtwStore';
+import { useSync } from '@/sync/use-sync';
+import {
+ useSessionMessageRecords,
+ useSessionRenderable,
+ useSessionStatus,
+ useScopedBlockingPermissions,
+ useScopedBlockingQuestions,
+} from '@/sync/sync-context';
+import { useStreamingStore } from '@/sync/streaming';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { destroyBtwSession, filterBtwTailMessages, promoteBtwSession, type BtwSessionRef } from '@/lib/btw';
+import type { BtwPanelState } from './useBtwPanelState';
+import { ChatSurfaceProvider } from '../ChatSurfaceContext';
+import { useMobileAutocompleteMaxHeight } from '../useMobileAutocompleteMaxHeight';
+import ChatMessage from '../ChatMessage';
+import { PermissionCard } from '../PermissionCard';
+import { QuestionCard } from '../QuestionCard';
+
+const IDLE_SESSION_STATUS = { type: 'idle' as const };
+
+/** Stable no-op so ChatMessage memoization keeps working in the read-only peek. */
+const NOOP_CONTENT_CHANGE = (): void => {};
+
+/**
+ * The `/btw` peek panel.
+ *
+ * Rendered from inside the composer form, so the sheet docks exactly above
+ * the main composer (`absolute bottom-full` on the composer column) on both
+ * desktop and mobile — the main composer IS the btw input, so nothing may
+ * cover it. Identity is derived from the parent session's metadata (see
+ * `useBtwPanelState`), so the panel belongs to one parent session only.
+ *
+ * Three exits: collapse (panel minimizes to the composer chip, the composer
+ * returns to the main session), promote (the fork becomes a normal session
+ * and the app navigates to it), destroy (the fork is deleted; the main
+ * conversation is never touched).
+ */
+export const BtwPanel: React.FC<{ parentSessionId: string; panel: BtwPanelState }> = ({
+ parentSessionId,
+ panel,
+}) => {
+ const { t } = useI18n();
+
+ if (panel.btwSessionId && panel.btwDirectory) {
+ return (
+
+
+ );
+ }
+
+ return null;
+};
+
+const useBtwDestroy = (sessionRef: BtwSessionRef | null): (() => void) => {
+ const { t } = useI18n();
+ return React.useCallback(() => {
+ if (!sessionRef) return;
+ void destroyBtwSession(sessionRef).then((ok) => {
+ if (!ok) toast.error(t('chat.btw.toast.destroyFailed'));
+ });
+ }, [sessionRef, t]);
+};
+
+type BtwSessionData = {
+ messageRecords: Array<{ info: Message; parts: Part[] }>;
+ sessionIsWorking: boolean;
+ streamingMessageId: string | null;
+ activeStreamingPhase: 'streaming' | 'cooldown' | 'completed' | null;
+ sessionPermissions: ReturnType;
+ sessionQuestions: ReturnType;
+ isEmpty: boolean;
+};
+
+/**
+ * Live session data for the fork, all keyed by the fork's own ids. Only the
+ * fork's tail (messages after the inherited-history boundary) is shown.
+ */
+const useBtwSessionData = (
+ sessionId: string,
+ directory: string,
+ boundaryMessageID: string | null,
+): BtwSessionData => {
+ const sync = useSync();
+ const renderable = useSessionRenderable(sessionId, directory);
+ React.useEffect(() => {
+ if (!renderable) {
+ void sync.ensureSessionRenderable(sessionId, false, directory);
+ }
+ }, [directory, renderable, sessionId, sync]);
+
+ const messageRecords = useSessionMessageRecords(sessionId, directory);
+ const status = useSessionStatus(sessionId, directory) ?? IDLE_SESSION_STATUS;
+ const streamingMessageId = useStreamingStore(
+ React.useCallback((s) => s.streamingMessageIds.get(sessionId) ?? null, [sessionId]),
+ );
+ const activeStreamingPhase = useStreamingStore(
+ React.useCallback(
+ (s) => (streamingMessageId ? s.messageStreamStates.get(streamingMessageId)?.phase ?? null : null),
+ [streamingMessageId],
+ ),
+ );
+ const sessionPermissions = useScopedBlockingPermissions(sessionId, directory);
+ const sessionQuestions = useScopedBlockingQuestions(sessionId, directory);
+
+ const tailRecords = React.useMemo(
+ () => filterBtwTailMessages(messageRecords, boundaryMessageID),
+ [boundaryMessageID, messageRecords],
+ );
+
+ const sessionIsWorking = React.useMemo(() => {
+ if (sessionPermissions.length > 0 || sessionQuestions.length > 0) {
+ return false;
+ }
+ const statusType = status.type ?? 'idle';
+ if (statusType === 'busy' || statusType === 'retry') {
+ return true;
+ }
+ // SAFETY: reads only the optional `time.completed` field, which the
+ // SDK Message union does not expose uniformly; a missing value means
+ // the assistant turn has not completed.
+ const lastMessage = tailRecords[tailRecords.length - 1]?.info as (Message & { time?: { completed?: number } }) | undefined;
+ return Boolean(
+ lastMessage
+ && lastMessage.role === 'assistant'
+ && typeof lastMessage.time?.completed !== 'number',
+ );
+ }, [sessionPermissions.length, sessionQuestions.length, status.type, tailRecords]);
+
+ return {
+ messageRecords: tailRecords,
+ sessionIsWorking,
+ streamingMessageId,
+ activeStreamingPhase,
+ sessionPermissions,
+ sessionQuestions,
+ isEmpty: tailRecords.length === 0,
+ };
+};
+
+/** Esc collapses the sheet (never destroys) unless focus is in a text field. */
+const useEscapeToCollapse = (onCollapse: () => void): void => {
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key !== 'Escape') return;
+ // SAFETY: keydown targets are DOM elements (or null on window).
+ const target = event.target as HTMLElement | null;
+ if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+ return;
+ }
+ onCollapse();
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [onCollapse]);
+};
+
+/**
+ * Stick-to-bottom auto-scroll. Streaming grows content inside one message
+ * without changing the record count, so following the tail needs a
+ * ResizeObserver on the content wrapper — data-driven effects alone would
+ * stop following mid-stream.
+ */
+const useAutoScroll = (
+ bodyRef: React.RefObject,
+ contentRef: React.RefObject,
+ contentReady: boolean,
+): ((event: React.UIEvent) => void) => {
+ const stickToBottomRef = React.useRef(true);
+ // `contentReady` is a dependency because the refs are only attached once
+ // the empty state gives way to the message list; an effect keyed on the
+ // refs alone would run against `null` and never re-attach the observer.
+ React.useEffect(() => {
+ if (!contentReady) return;
+ const content = contentRef.current;
+ const element = bodyRef.current;
+ if (element && stickToBottomRef.current) {
+ element.scrollTop = element.scrollHeight;
+ }
+ if (!content || typeof ResizeObserver === 'undefined') return;
+ const observer = new ResizeObserver(() => {
+ const body = bodyRef.current;
+ if (body && stickToBottomRef.current) {
+ body.scrollTop = body.scrollHeight;
+ }
+ });
+ observer.observe(content);
+ return () => observer.disconnect();
+ }, [bodyRef, contentReady, contentRef]);
+ return React.useCallback((event: React.UIEvent) => {
+ const element = event.currentTarget;
+ stickToBottomRef.current = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+ }, []);
+};
+
+const BtwFrame: React.FC<{
+ title: string;
+ actions?: React.ReactNode;
+ onTitleClick?: () => void;
+ titleClickLabel?: string;
+ collapsed?: boolean;
+ headerSpinner?: boolean;
+ children?: React.ReactNode;
+}> = ({ title, actions, onTitleClick, titleClickLabel, collapsed, headerSpinner, children }) => (
+ (null);
+ const contentRef = React.useRef(null);
+ const handleBodyScroll = useAutoScroll(bodyRef, contentRef, !data.isEmpty);
+ // With the on-screen keyboard open the composer (this panel's anchor)
+ // rises, and a vh-based cap would push the panel under the app header.
+ // Same protection as the composer autocomplete popups: clamp the scroll
+ // body to the space actually available above the anchor. The hook measures
+ // room for the scroll body itself, but the panel header and bottom spacer
+ // sit inside the same frame above/below it — reserve their height too.
+ const BTW_FRAME_CHROME_PX = 48;
+ const availableMaxHeight = useMobileAutocompleteMaxHeight(bodyRef, true, 520 + BTW_FRAME_CHROME_PX);
+ const mobileMaxHeight = availableMaxHeight !== undefined
+ ? Math.max(120, availableMaxHeight - BTW_FRAME_CHROME_PX)
+ : undefined;
+
+ return (
+
+
+
+
+ );
+};
+
+const BtwMessages: React.FC<{
+ data: BtwSessionData;
+ bodyRef: React.RefObject;
+ contentRef: React.RefObject;
+ onBodyScroll: (event: React.UIEvent) => void;
+ maxHeight?: number;
+}> = ({ data, bodyRef, contentRef, onBodyScroll, maxHeight }) => {
+ const { t } = useI18n();
+
+ if (data.isEmpty) {
+ return (
+
+
+ );
+};
diff --git a/packages/ui/src/components/chat/btw/useBtwPanelState.ts b/packages/ui/src/components/chat/btw/useBtwPanelState.ts
new file mode 100644
index 00000000..6d36f060
--- /dev/null
+++ b/packages/ui/src/components/chat/btw/useBtwPanelState.ts
@@ -0,0 +1,54 @@
+import React from 'react';
+import type { Session } from '@opencode-ai/sdk/v2';
+import { useSession } from '@/sync/sync-context';
+import { getBtwBoundaryMessageID, getBtwSessionID } from '@/lib/sessionBtwMetadata';
+import { useBtwStore } from '@/stores/useBtwStore';
+
+export type BtwPanelState = {
+ /** The active fork for this parent, or null when no panel should exist. */
+ btwSessionId: string | null;
+ btwSession: Session | null;
+ /** The fork's directory identity (may be canonicalized by the server). */
+ btwDirectory: string | null;
+ /** Last message id inherited from the parent; the panel shows what's after it. */
+ boundaryMessageID: string | null;
+ collapsed: boolean;
+ creating: boolean;
+};
+
+/**
+ * Derive the `/btw` panel identity for one parent session from authoritative
+ * session metadata (`openchamber.btwSessionID`), plus the transient UI state
+ * kept in `useBtwStore`. The panel exists only while the parent's link AND the
+ * fork itself are present in the live stores, so a fork deleted anywhere
+ * (sidebar, another client) makes the panel disappear without extra tracking.
+ */
+export function useBtwPanelState(
+ parentSessionId: string | null | undefined,
+ directory: string | undefined,
+): BtwPanelState {
+ const parentSession = useSession(parentSessionId, directory);
+ const linkedBtwSessionId = getBtwSessionID(parentSession);
+ const btwSession = useSession(linkedBtwSessionId, directory) ?? null;
+ const uiState = useBtwStore(
+ React.useCallback(
+ (s) => (parentSessionId ? s.byParent[parentSessionId] : undefined),
+ [parentSessionId],
+ ),
+ );
+
+ const destroying = Boolean(uiState?.destroying);
+ const btwSessionId = btwSession && !destroying ? linkedBtwSessionId : null;
+ return {
+ btwSessionId,
+ btwSession: btwSessionId ? btwSession : null,
+ // SAFETY: the SDK Session type omits the server's `directory` field; this
+ // widening only reads it, with the parent's directory as the fallback.
+ btwDirectory: btwSessionId
+ ? ((btwSession as (Session & { directory?: string | null }) | null)?.directory ?? directory ?? null)
+ : null,
+ boundaryMessageID: btwSessionId ? getBtwBoundaryMessageID(btwSession) : null,
+ collapsed: Boolean(uiState?.collapsed),
+ creating: Boolean(uiState?.creating),
+ };
+}
diff --git a/packages/ui/src/components/chat/chatSurfaceContextValue.ts b/packages/ui/src/components/chat/chatSurfaceContextValue.ts
index 30065ad0..74470c17 100644
--- a/packages/ui/src/components/chat/chatSurfaceContextValue.ts
+++ b/packages/ui/src/components/chat/chatSurfaceContextValue.ts
@@ -1,5 +1,11 @@
import React from 'react';
-export type ChatSurfaceMode = 'default' | 'mini-chat';
+/**
+ * 'mini-chat' is the browser-panel side chat (compact, no fork/plan actions).
+ * 'peek' is a read-only glance surface (the /btw panel): messages render with
+ * no per-message controls at all — no user action row, no assistant action
+ * buttons, no turn footer.
+ */
+export type ChatSurfaceMode = 'default' | 'mini-chat' | 'peek';
export const ChatSurfaceContext = React.createContext('default');
diff --git a/packages/ui/src/components/chat/composer/DOCUMENTATION.md b/packages/ui/src/components/chat/composer/DOCUMENTATION.md
index 667c2db7..f800230b 100644
--- a/packages/ui/src/components/chat/composer/DOCUMENTATION.md
+++ b/packages/ui/src/components/chat/composer/DOCUMENTATION.md
@@ -7,6 +7,16 @@ everything between typing and sending.
own state and wires these modules together; it should not grow logic that
belongs to one of them.
+`ChatContainer.tsx` keeps one `ChatInput` mounted while a new-session draft
+becomes its first session. Draft-only UI first fades for 120ms while the editor
+stays in place. The parent then moves the editor to its final session position
+with a 180ms transform-only FLIP animation. Reduced-motion mode skips these
+transitions. `session-ui-store.ts` marks sessions materialized from a submitted
+draft, so selecting an existing session while a draft is open switches without
+animation. Do not restore separate draft and session composer branches:
+remounting the editor loses focus and interrupts the transition. Keep the
+existing mobile fixed-position rules unchanged.
+
## Layers
| Directory | Owns |
diff --git a/packages/ui/src/components/chat/composer/state/useDraftTarget.ts b/packages/ui/src/components/chat/composer/state/useDraftTarget.ts
index ae8cc408..d4586591 100644
--- a/packages/ui/src/components/chat/composer/state/useDraftTarget.ts
+++ b/packages/ui/src/components/chat/composer/state/useDraftTarget.ts
@@ -23,6 +23,8 @@ import { useProjectsStore } from '@/stores/useProjectsStore';
import { useSessionUIStore } from '@/sync/session-ui-store';
import { buildSessionTargetOptions } from '@/sync/session-worktree-contract';
import { normalizePath } from '../attachments/filePaths';
+import { CHAT_DRAFT_PROJECT_ID } from '@/lib/chatDirectories';
+import { useI18n } from '@/lib/i18n';
/** How long a cached branch list is served before it is refreshed. */
const BRANCHES_SWR_TTL_MS = 30_000;
@@ -35,6 +37,7 @@ export interface DraftTargetProject {
color?: string | null;
iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' } | null;
iconBackground?: string | null;
+ kind?: 'chat' | 'project';
}
/** A project's display name, falling back to its directory name. */
@@ -43,7 +46,15 @@ export function getProjectDisplayLabel(project: { label?: string; path: string }
}
export function useDraftTarget(enabled: boolean) {
- const projects = useProjectsStore((state) => state.projects) as DraftTargetProject[];
+ const configuredProjects: readonly DraftTargetProject[] = useProjectsStore((state) => state.projects);
+ const { t } = useI18n();
+ const chatProject = React.useMemo(() => ({
+ id: CHAT_DRAFT_PROJECT_ID,
+ path: '',
+ label: t('layout.mainTab.chat'),
+ kind: 'chat',
+ }), [t]);
+ const projects = React.useMemo(() => [chatProject, ...configuredProjects], [chatProject, configuredProjects]);
const activeProjectId = useProjectsStore((state) => state.activeProjectId);
const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
@@ -53,6 +64,7 @@ export function useDraftTarget(enabled: boolean) {
const { git: runtimeGit } = useRuntimeAPIs();
const selectedDraftProject = React.useMemo(() => {
+ if (newSessionDraft?.target === 'chat') return chatProject;
const explicit = newSessionDraft?.selectedProjectId
? projects.find((project) => project.id === newSessionDraft.selectedProjectId) ?? null
: null;
@@ -67,14 +79,16 @@ export function useDraftTarget(enabled: boolean) {
return active;
}
- return projects[0] ?? null;
- }, [activeProjectId, newSessionDraft?.selectedProjectId, projects]);
+ return configuredProjects[0] ?? chatProject;
+ }, [activeProjectId, chatProject, configuredProjects, newSessionDraft?.selectedProjectId, newSessionDraft?.target, projects]);
const selectedDraftProjectPath = React.useMemo(
- () => normalizePath(selectedDraftProject?.path ?? null),
- [selectedDraftProject?.path],
+ () => selectedDraftProject?.kind === 'chat' ? null : normalizePath(selectedDraftProject?.path ?? null),
+ [selectedDraftProject?.kind, selectedDraftProject?.path],
);
- const draftProjectLabel = selectedDraftProject ? getProjectDisplayLabel(selectedDraftProject) : null;
+ const draftProjectLabel = selectedDraftProject && selectedDraftProject.kind !== 'chat'
+ ? getProjectDisplayLabel(selectedDraftProject)
+ : null;
const selectedDraftProjectBranches = useGitBranches(selectedDraftProjectPath);
const selectedDraftProjectBranchesFetchedAt = useGitStore(
@@ -258,6 +272,10 @@ export function useDraftTarget(enabled: boolean) {
if (!project) {
return;
}
+ if (project.kind === 'chat') {
+ setNewSessionDraftTarget({ projectId: CHAT_DRAFT_PROJECT_ID, directoryOverride: null }, { force: true });
+ return;
+ }
if (activeProjectId !== projectId) {
setActiveProjectIdOnly(projectId);
}
diff --git a/packages/ui/src/components/chat/composer/ui/AutocompleteRowTooltip.tsx b/packages/ui/src/components/chat/composer/ui/AutocompleteRowTooltip.tsx
new file mode 100644
index 00000000..f85d77b8
--- /dev/null
+++ b/packages/ui/src/components/chat/composer/ui/AutocompleteRowTooltip.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface AutocompleteRowTooltipProps {
+ description?: string;
+ active: boolean;
+ children: React.ReactElement;
+}
+
+export function AutocompleteRowTooltip({ description, active, children }: AutocompleteRowTooltipProps) {
+ const [delayedActive, setDelayedActive] = React.useState(false);
+
+ React.useEffect(() => {
+ if (!active || !description) {
+ setDelayedActive(false);
+ return;
+ }
+
+ const timeout = window.setTimeout(() => setDelayedActive(true), 200);
+ return () => window.clearTimeout(timeout);
+ }, [active, description]);
+
+ if (!description) return children;
+
+ return (
+ {}}>
+ {children}
+ {active && delayedActive ? (
+
+
+ ) : null}
+
+ );
+}
diff --git a/packages/ui/src/components/chat/composer/ui/ComposerAttachmentControls.tsx b/packages/ui/src/components/chat/composer/ui/ComposerAttachmentControls.tsx
index ba237472..1d6254ea 100644
--- a/packages/ui/src/components/chat/composer/ui/ComposerAttachmentControls.tsx
+++ b/packages/ui/src/components/chat/composer/ui/ComposerAttachmentControls.tsx
@@ -93,7 +93,7 @@ export const ComposerAttachmentControls = React.memo(function ComposerAttachment
+
{
requestAnimationFrame(handlePickLocalFiles);
diff --git a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
index e3cefb15..8c44d434 100644
--- a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
+++ b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
@@ -57,7 +57,9 @@ const getProjectIconColor = (projectColor?: string | null): string | undefined =
function ProjectLabel({ project, theme }: { project: DraftTargetProject; theme: Theme }) {
const projectIconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
const iconColor = getProjectIconColor(project.color);
- const fallbackIcon = projectIconName ? (
+ const fallbackIcon = project.kind === 'chat' ? (
+
- {
-
+
{projects.map((project) => (
- {
))}
@@ -140,7 +144,7 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
{selectedBranchLabel ?? t('chat.chatInput.branch')}
-
+
{projectRootBranchOption ? (
{t('chat.chatInput.projectRoot')}
@@ -195,7 +199,9 @@ export function MobileDraftTargetTriggers(
className="inline-flex h-7 min-w-0 max-w-[42vw] flex-shrink cursor-pointer items-center gap-1 rounded-lg px-1.5 typography-micro font-medium text-foreground/80 hover:bg-[var(--interactive-hover)]"
onClick={() => onOpenPicker('project')}
>
- {>();
+let activeFileReferenceStatCount = 0;
+const pendingFileReferenceStats: Array<() => void> = [];
+
+const getFileReferenceStatCacheMax = (): number => (
+ isVSCodeRuntime() ? VSCODE_FILE_REFERENCE_STAT_CACHE_MAX : FILE_REFERENCE_STAT_CACHE_MAX
+);
+
+// NUL cannot occur in a real path, so a directory-qualified key cannot collide
+// with a differently scoped entry.
+const statCacheKey = (directory: string, normalizedPath: string): string => `${directory}\u0000${normalizedPath}`;
+
+export const fileReferenceExists = (resolvedPath: string, effectiveDirectory: string): Promise => {
+ const normalizedPath = normalizeReferencePath(resolvedPath);
+ if (!normalizedPath) {
+ return Promise.resolve(false);
+ }
+
+ const cacheKey = statCacheKey(effectiveDirectory, normalizedPath);
+ const cached = FILE_REFERENCE_STAT_CACHE.get(cacheKey);
+ if (cached) {
+ FILE_REFERENCE_STAT_CACHE.delete(cacheKey);
+ FILE_REFERENCE_STAT_CACHE.set(cacheKey, cached);
+ return cached;
+ }
+
+ const request = new Promise((resolve) => {
+ const run = () => {
+ activeFileReferenceStatCount += 1;
+ void runtimeFetch(`/api/fs/stat?path=${encodeURIComponent(normalizedPath)}&optional=true`, {
+ method: 'GET',
+ cache: 'no-store',
+ // The stat route resolves the workspace from this header. Without it
+ // the server falls back to the browsed lastDirectory, which rejects
+ // session-local files with 400 whenever the two directories differ.
+ headers: effectiveDirectory ? { 'x-opencode-directory': effectiveDirectory } : undefined,
+ })
+ .then(async (response) => {
+ if (!response.ok) {
+ resolve(false);
+ return;
+ }
+ const payload = await response.json().catch(() => null) as { exists?: unknown } | null;
+ resolve(payload?.exists !== false);
+ })
+ .catch(() => resolve(false))
+ .finally(() => {
+ activeFileReferenceStatCount = Math.max(0, activeFileReferenceStatCount - 1);
+ pendingFileReferenceStats.shift()?.();
+ });
+ };
+
+ if (activeFileReferenceStatCount < FILE_REFERENCE_STAT_CONCURRENCY) {
+ run();
+ return;
+ }
+
+ pendingFileReferenceStats.push(run);
+ });
+
+ const maxCacheEntries = getFileReferenceStatCacheMax();
+ while (FILE_REFERENCE_STAT_CACHE.size >= maxCacheEntries) {
+ const oldest = FILE_REFERENCE_STAT_CACHE.keys().next().value;
+ if (typeof oldest !== 'string') {
+ break;
+ }
+ FILE_REFERENCE_STAT_CACHE.delete(oldest);
+ }
+ FILE_REFERENCE_STAT_CACHE.set(cacheKey, request);
+ return request;
+};
diff --git a/packages/ui/src/components/chat/markdown/markdown-worker.ts b/packages/ui/src/components/chat/markdown/markdown-worker.ts
index ab5b6eb6..2feb270a 100644
--- a/packages/ui/src/components/chat/markdown/markdown-worker.ts
+++ b/packages/ui/src/components/chat/markdown/markdown-worker.ts
@@ -167,6 +167,12 @@ export const highlightLinesInWorker = async (code: string, lang: string): Promis
return result?.type === 'highlightLines' ? result.lines : null;
};
+/** Return an already-tokenized line result without scheduling a worker request. */
+export const getCachedHighlightedLines = (code: string, lang: string): string[] | null => {
+ const cached = resultCache.get(cacheKeyFor('highlightLines', lang, code));
+ return cached?.type === 'highlightLines' ? cached.lines : null;
+};
+
/**
* Tokenize `code` with the given resolved TextMate theme and return per-line
* styled runs with offsets — for building CodeMirror decorations that match the
diff --git a/packages/ui/src/components/chat/markdown/markdownCore.test.ts b/packages/ui/src/components/chat/markdown/markdownCore.test.ts
index 968363d3..9153250d 100644
--- a/packages/ui/src/components/chat/markdown/markdownCore.test.ts
+++ b/packages/ui/src/components/chat/markdown/markdownCore.test.ts
@@ -1,10 +1,43 @@
import { describe, expect, mock, test } from 'bun:test';
+type SanitizeAttribute = {
+ attrName: string;
+ attrValue: string;
+ forceKeepAttr?: boolean;
+};
+
+class TestAnchorElement {
+ target = '';
+
+ setAttribute(name: string, value: string): void {
+ if (name === 'target') this.target = value;
+ }
+}
+
+const sanitizeHooks: {
+ uponSanitizeAttribute?: (node: unknown, data: SanitizeAttribute) => void;
+ afterSanitizeAttributes?: (node: unknown) => void;
+} = {};
+
+Object.assign(globalThis, {
+ window: {},
+ HTMLAnchorElement: TestAnchorElement,
+});
+
mock.module('dompurify', () => ({
default: {
isSupported: true,
- addHook: () => undefined,
- sanitize: (html: string) => html,
+ addHook: (name: keyof typeof sanitizeHooks, hook: never) => {
+ sanitizeHooks[name] = hook;
+ },
+ sanitize: (html: string) => html.replace(/ href="([^"]*)"/g, (attribute, href: string) => {
+ const anchor = new TestAnchorElement();
+ const data: SanitizeAttribute = { attrName: 'href', attrValue: href };
+ sanitizeHooks.uponSanitizeAttribute?.(anchor, data);
+ sanitizeHooks.afterSanitizeAttributes?.(anchor);
+
+ return data.forceKeepAttr || /^(?:https?|mailto|tel):/i.test(href) ? attribute : '';
+ }),
},
}));
mock.module('./markdown-worker', () => ({
@@ -40,6 +73,21 @@ describe('markdown sanitization', () => {
expect(isLocalFileUrl('file://remote-host/share/report.html')).toBe(false);
expect(isLocalFileUrl('javascript:alert(1)')).toBe(false);
});
+
+ test('keeps app and local file links while stripping blocked schemes', () => {
+ const html = renderMarkdownSync([
+ '[app](obsidian://open?vault=Notebook)',
+ '[file](file:///workspace/notes.md)',
+ '[script](javascript:alert(1))',
+ '[diagnostic](ms-msdt:/id%20PCWDiagnostic)',
+ ].join('\n\n'), 'inline');
+
+ expect(html).toContain('href="obsidian://open?vault=Notebook"');
+ expect(html).toContain('href="file:///workspace/notes.md"');
+ expect(html).not.toContain('href="javascript:alert(1)"');
+ expect(html).not.toContain('href="ms-msdt:/id%20PCWDiagnostic"');
+ });
+
});
describe('Markdown images', () => {
diff --git a/packages/ui/src/components/chat/markdown/markdownCore.ts b/packages/ui/src/components/chat/markdown/markdownCore.ts
index 2d3cb7a9..822a3168 100644
--- a/packages/ui/src/components/chat/markdown/markdownCore.ts
+++ b/packages/ui/src/components/chat/markdown/markdownCore.ts
@@ -3,6 +3,7 @@ import remend from 'remend';
import katex from 'katex';
import DOMPurify from 'dompurify';
import { buildAgentMentionUrl, parseAgentHref, parseSkillHref } from '@/lib/messages/inlineMessageLinks';
+import { isAppLinkUrl } from '@/lib/url';
import { isVSCodeRuntime } from '@/lib/desktop';
import { contentFingerprint, HighlightResultCache, utf16Bytes } from './highlightResultCache';
import { highlightCodeInWorker } from './markdown-worker';
@@ -472,7 +473,10 @@ const ensureSanitizeHook = (): void => {
sanitizeHookInstalled = true;
DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
if (!(node instanceof HTMLAnchorElement) || data.attrName !== 'href') return;
- if (isLocalFileUrl(data.attrValue)) data.forceKeepAttr = true;
+ // DOMPurify's default URI policy strips custom application schemes
+ // (obsidian://, vscode://, ...). Keep them for anchors; dangerous schemes
+ // stay excluded via isAppLinkUrl and clicks go through confirmation.
+ if (isLocalFileUrl(data.attrValue) || isAppLinkUrl(data.attrValue)) data.forceKeepAttr = true;
});
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
if (!(node instanceof HTMLAnchorElement)) return;
@@ -544,7 +548,10 @@ export const __markdownBlockCacheSizesForTests = (): { full: number; live: numbe
live: liveBlockCache.size,
});
-const parseBlock = async (block: MarkdownBlock, imageMode: MarkdownImageMode): Promise => {
+const parseBlock = async (
+ block: MarkdownBlock,
+ imageMode: MarkdownImageMode,
+): Promise => {
const parser = imageMode === 'label' ? imageLabelParser : inlineImageParser;
const parsed = await Promise.resolve(parser.parse(block.src));
const withMath = renderMathExpressions(parsed);
@@ -561,7 +568,10 @@ const parseBlock = async (block: MarkdownBlock, imageMode: MarkdownImageMode): P
* is synchronous (marked is not configured `async`), so this never blocks on a
* worker round-trip.
*/
-export const renderMarkdownSync = (text: string, imageMode: MarkdownImageMode = 'inline'): string => {
+export const renderMarkdownSync = (
+ text: string,
+ imageMode: MarkdownImageMode = 'inline',
+): string => {
if (!text) return '';
const parser = imageMode === 'label' ? imageLabelParser : inlineImageParser;
const parsed = parser.parse(text) as string;
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index fa0bbfa3..dc870847 100644
--- a/packages/ui/src/components/chat/message/MessageBody.tsx
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -567,7 +567,7 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
const formatted = formatTimestampForDisplay(messageCreatedAt, timeFormatPreference);
return formatted.length > 0 ? formatted : null;
}, [locale, messageCreatedAt, timeFormatPreference]);
- const actionsBlock = ((canCopyMessage && hasCopyableText) || onRevert || effectiveOnFork || onToggleContextPin) && showUserActions ? (
+ const actionsBlock = chatSurfaceMode !== 'peek' && ((canCopyMessage && hasCopyableText) || onRevert || effectiveOnFork || onToggleContextPin) && showUserActions ? (
+
+
+
+);
+
+const BtwSheet: React.FC<{
+ sessionRef: BtwSessionRef;
+ title: string;
+ boundaryMessageID: string | null;
+ collapsed: boolean;
+}> = ({ sessionRef, title, boundaryMessageID, collapsed }) => {
+ const { t } = useI18n();
+ const handleDestroy = useBtwDestroy(sessionRef);
+ const setCollapsed = React.useCallback((next: boolean) => {
+ useBtwStore.getState().setPanelState(sessionRef.parentSessionId, { collapsed: next });
+ }, [sessionRef.parentSessionId]);
+ const handleToggleCollapsed = React.useCallback(() => setCollapsed(!collapsed), [collapsed, setCollapsed]);
+ const handleCollapse = React.useCallback(() => setCollapsed(true), [setCollapsed]);
+ const handlePromote = React.useCallback(() => {
+ void promoteBtwSession(sessionRef).catch(() => {
+ toast.error(t('chat.btw.toast.promoteFailed'));
+ });
+ }, [sessionRef, t]);
+ useEscapeToCollapse(handleCollapse);
+
+ const toggleLabel = collapsed ? t('chat.btw.expandAria') : t('chat.btw.collapseAria');
+ const headerButtonClass = 'size-7 rounded-lg text-muted-foreground transition-colors hover:text-foreground hover:!bg-transparent active:!bg-transparent';
+ const actions = (
+
+
+
+ {onTitleClick ? (
+
+ ) : (
+
+
+ {children ? (
+ <>
+ {children}
+
+
+ ) : null}
+ + {title} +
+ + )} + + {actions} +
+
+
+
+ );
+
+ if (collapsed) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {data.messageRecords.map((record, index) => (
+
+
+ {data.sessionQuestions.map((question) => (
+
+ ) : null}
+ {/* Always reserve this row so the content does not shift down
+ by a line when the indicator disappears. */}
+
+
+ {description}
+
+ {/* Positional keys, not part ids: the server echo of a just-sent
+ message swaps the optimistic part id, and id-based keys would
+ remount the text subtree (blank frame + height jump). */}
{userContentParts.map((part, index) => {
if (isSubtaskPart(part)) {
return (
-
+
);
@@ -737,7 +740,7 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
if (isShellActionPart(part)) {
return (
-
+
);
@@ -752,7 +755,7 @@ const UserMessageBody = React.memo(({ messageId, parts, messageCreatedAt, isMobi
}
}
return (
-
+
= React.memo(({
output,
{
className: part.tool === 'bash' ? 'p-1 rounded-none' : 'p-1',
- maxHeightClass: isStreamingBash ? 'h-[46vh]' : part.tool === 'bash' ? 'max-h-[46vh]' : undefined,
+ maxHeightClass: part.tool === 'bash' ? 'max-h-[46vh]' : undefined,
followKey: isStreamingBash ? outputString : undefined,
}
);
diff --git a/packages/ui/src/components/chat/message/parts/UserTextPart.tsx b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
index 48aa5f79..884c8509 100644
--- a/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/UserTextPart.tsx
@@ -72,19 +72,46 @@ const UserTextPart: React.FC = ({ part, messageId, agentMenti
React.useEffect(() => {
const el = textRef.current;
if (!el) return;
+ if (!collapsibleUserMessages || isExpanded) return;
const checkTruncation = () => {
- if (collapsibleUserMessages && !isExpanded) {
- setIsTruncated(el.scrollHeight > el.clientHeight);
- }
+ setIsTruncated(el.scrollHeight > el.clientHeight);
};
checkTruncation();
+ // A just-sent message mounts while its turn is still settling, so the
+ // synchronous read can land before the clamp has its final geometry.
+ // One deferred re-read covers that without waiting for an observer.
+ const initialFrame = window.requestAnimationFrame(checkTruncation);
+ // `el` is the clamped box: once line-clamp pins it to two lines its own
+ // size stops changing, so observing it alone freezes the first
+ // measurement. Markdown settles after mount (highlighting, late layout),
+ // and a message measured while still short would never regain the
+ // expand affordance. The children keep their natural height under the
+ // clamp, so they are what reports content growth.
const resizeObserver = new ResizeObserver(checkTruncation);
resizeObserver.observe(el);
- return () => resizeObserver.disconnect();
+ const observeChildren = () => {
+ for (const child of Array.from(el.children)) {
+ resizeObserver.observe(child);
+ }
+ };
+ observeChildren();
+
+ // The renderer swaps subtrees as it settles; re-observe the new children.
+ const mutationObserver = new MutationObserver(() => {
+ observeChildren();
+ checkTruncation();
+ });
+ mutationObserver.observe(el, { childList: true, subtree: true });
+
+ return () => {
+ window.cancelAnimationFrame(initialFrame);
+ mutationObserver.disconnect();
+ resizeObserver.disconnect();
+ };
}, [collapsibleUserMessages, textContent, isExpanded]);
React.useEffect(() => {
@@ -115,10 +142,14 @@ const UserTextPart: React.FC = ({ part, messageId, agentMenti
return;
}
- if (collapsibleUserMessages && !isExpanded && isTruncated) {
+ // Measure at click time instead of trusting the observed flag: whether
+ // the text is clipped right now is what decides if expanding does
+ // anything, and the flag can still be catching up on a fresh message.
+ if (collapsibleUserMessages && !isExpanded && element.scrollHeight > element.clientHeight) {
+ setIsTruncated(true);
setIsExpanded(true);
}
- }, [collapsibleUserMessages, hasActiveSelectionInElement, isExpanded, isTruncated, openSkill]);
+ }, [collapsibleUserMessages, hasActiveSelectionInElement, isExpanded, openSkill]);
const handleCollapse = React.useCallback((event: React.MouseEvent) => {
event.stopPropagation();
diff --git a/packages/ui/src/components/chat/message/parts/VirtualizedCodeBlock.tsx b/packages/ui/src/components/chat/message/parts/VirtualizedCodeBlock.tsx
index 5ef116d7..fcc29517 100644
--- a/packages/ui/src/components/chat/message/parts/VirtualizedCodeBlock.tsx
+++ b/packages/ui/src/components/chat/message/parts/VirtualizedCodeBlock.tsx
@@ -54,7 +54,8 @@ export const VirtualizedCodeBlock: React.FC = React.m
const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
// Tokenize the whole block in one worker call; rows index into the result.
const fullText = React.useMemo(() => lines.map((line) => line.text).join('\n'), [lines]);
- const highlighted = useWorkerHighlightedLines(fullText, language);
+ const highlightResult = useWorkerHighlightedLines(fullText, language);
+ const highlighted = highlightResult.lines;
const shouldVirtualize = lines.length > VIRTUALIZE_THRESHOLD;
diff --git a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
index 2a980448..9260cc51 100644
--- a/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
+++ b/packages/ui/src/components/chat/message/parts/WorkingPlaceholder.tsx
@@ -229,15 +229,19 @@ export function WorkingPlaceholder({
return (
-
+
{hasProviderLogo && providerLogoSrc ? (
` starts below the app header in both the Capacitor shell and the
- * mobile browser, so its top edge is the correct boundary for both.
+ * Clamp an autocomplete popup (anchored above the composer via `bottom-full`)
+ * so it never rises past the top of the chat area. The chat `` starts
+ * below the app header, so its top edge is the correct boundary.
*
* Re-measures on window resizes and when the native keyboard choreography
* settles (the composer — and therefore the popup's anchor — moves with it).
*
- * Returns an inline max-height in px, or undefined when disabled. NOTE: the
- * inline value REPLACES any `max-h-*` class (it does not combine) — on mobile
- * the popup is allowed to grow all the way to the boundary, unlike the
- * desktop design cap.
+ * Returns an inline max-height only when the available space is smaller than
+ * the popup's normal CSS height cap. This keeps the desktop cap intact while
+ * still protecting the header on tall draft composers.
*/
export const useMobileAutocompleteMaxHeight = (
containerRef: React.RefObject,
enabled: boolean,
+ normalMaxHeight = 256,
): number | undefined => {
const [maxHeight, setMaxHeight] = React.useState(undefined);
@@ -28,16 +27,15 @@ export const useMobileAutocompleteMaxHeight = (
const main = el.closest('main');
if (!main) return;
// Mobile browsers pan the page up to reveal the focused field, so
- // 's top can sit ABOVE the visible screen (negative client
- // coordinates). The binding boundary is whichever is lower: the
- // chat area's top or the visual viewport's top (its offsetTop is
- // expressed in the same layout-viewport client coordinates).
+ // 's top can sit above the visible screen. The binding
+ // boundary is whichever is lower: the chat area's top or the
+ // visual viewport's top.
const visualTop = window.visualViewport?.offsetTop ?? 0;
const boundaryTop = Math.max(main.getBoundingClientRect().top, visualTop);
// The popup's bottom edge is its anchor (composer top) and does not
// depend on its current height.
- const available = el.getBoundingClientRect().bottom - boundaryTop - 8;
- const next = Math.max(120, Math.floor(available));
+ const available = Math.max(0, Math.floor(el.getBoundingClientRect().bottom - boundaryTop - 8));
+ const next = available < normalMaxHeight ? available : undefined;
setMaxHeight((prev) => (prev === next ? prev : next));
};
measure();
diff --git a/packages/ui/src/components/chat/work-status/DOCUMENTATION.md b/packages/ui/src/components/chat/work-status/DOCUMENTATION.md
index 00cc5a03..13f59014 100644
--- a/packages/ui/src/components/chat/work-status/DOCUMENTATION.md
+++ b/packages/ui/src/components/chat/work-status/DOCUMENTATION.md
@@ -45,7 +45,11 @@ exactly as it already does when the context panel opens.
- the user switched it off;
- the runtime is mobile or VS Code;
-- the context panel is open for the active directory;
+- the context panel is open for the directory the app is effectively on —
+ looked up through `useEffectiveDirectory` and `normalizeContextPanelDirectoryKey`,
+ the same key the rail and the panel use. It is deliberately **not** the
+ directory this panel reports about: a managed Chat reports about none, and
+ that empty key answered "closed" for a context panel that was plainly open;
- the row cannot fit `WORK_STATUS_MIN_CHAT_WIDTH` of transcript alongside
`WORK_STATUS_PANEL_WIDTH` of panel.
@@ -54,6 +58,11 @@ mode. It remains available on a new-session draft: when the draft targets a
project or pending worktree, the panel uses that directory for project, MCP,
and usage readouts before a session exists.
+Managed Chats never render or warm the Project repository section. A Chat draft
+also passes no fallback directory to the panel, so an active project's branch
+cannot leak into the draft while directory-independent sections remain
+available.
+
`rowRef` is a **callback ref, not an object ref**. An object ref gives no signal
when the node attaches, so the measuring effect read `.current`, found nothing
whenever the row mounted after the effect first ran, and only recovered on the
diff --git a/packages/ui/src/components/chat/work-status/WorkStatusPanel.tsx b/packages/ui/src/components/chat/work-status/WorkStatusPanel.tsx
index 3f769d58..af097a23 100644
--- a/packages/ui/src/components/chat/work-status/WorkStatusPanel.tsx
+++ b/packages/ui/src/components/chat/work-status/WorkStatusPanel.tsx
@@ -26,6 +26,8 @@ type Props = {
/** Null on a new-session draft: repository readouts still apply. */
sessionId: string | null;
directory: string | null;
+ /** Managed Chats have no project repository, even if another project remains active. */
+ repositoryEnabled?: boolean;
/** Whether the panel should currently occupy space. */
visible: boolean;
/**
@@ -63,7 +65,7 @@ const PANEL_TRANSITION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
* eat a visible slice of every row's trailing value, and the shadows already
* say there is more to see.
*/
-export const WorkStatusPanel: React.FC = ({ sessionId, directory, visible, overlay = false }) => {
+export const WorkStatusPanel: React.FC = ({ sessionId, directory, visible, repositoryEnabled = true, overlay = false }) => {
const { t } = useI18n();
const setScrollTop = useUIStore((state) => state.setWorkStatusScrollTop);
const setOverlayOpen = useUIStore((state) => state.setWorkStatusOverlayOpen);
@@ -248,7 +250,7 @@ export const WorkStatusPanel: React.FC = ({ sessionId, directory, visible
sessionId={sessionId}
directory={directory}
showSession={sectionVisible('session')}
- showRepository={sectionVisible('repository')}
+ showRepository={repositoryEnabled && sectionVisible('repository')}
goalRow={ = {};
let panelEnabled = true;
+let effectiveDirectory: string | undefined = '/repo';
mock.module('@/stores/useUIStore', () => ({
useUIStore: (selector: (state: unknown) => unknown) =>
selector({ contextPanelByDirectory: panelByDirectory, workStatusPanelEnabled: panelEnabled }),
+ normalizeContextPanelDirectoryKey: (value: string) => value,
}));
-mock.module('@/lib/pathNormalization', () => ({
- normalizePath: (value?: string | null) => value ?? null,
+mock.module('@/hooks/useEffectiveDirectory', () => ({
+ useEffectiveDirectory: () => effectiveDirectory,
}));
const { useWorkStatusVisibility, WORK_STATUS_REQUIRED_ROW_WIDTH: REQUIRED } = await import(
@@ -88,7 +90,7 @@ const installMinimalDom = () => {
};
};
-type Args = { directory: string | null; isMobile: boolean; isVSCode: boolean };
+type Args = { isMobile: boolean; isVSCode: boolean };
/**
* Renders the hook with a stand-in row node, attached through the returned
@@ -130,6 +132,7 @@ const renderVisibility = (args: Args, rowWidth: number) => {
beforeEach(() => {
panelByDirectory = {};
panelEnabled = true;
+ effectiveDirectory = '/repo';
observed = [];
notify = null;
});
@@ -142,7 +145,7 @@ afterEach(() => {
describe('useWorkStatusVisibility', () => {
test('shows the panel when the row can afford both columns', () => {
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED,
);
expect(result.visible).toBe(true);
@@ -151,7 +154,7 @@ describe('useWorkStatusVisibility', () => {
test('hides the panel when the row cannot afford both columns', () => {
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED - 1,
);
expect(result.visible).toBe(false);
@@ -173,7 +176,6 @@ describe('useWorkStatusVisibility', () => {
const Probe: React.FC = () => {
const { rowRef, visible } = useWorkStatusVisibility({
- directory: '/repo',
isMobile: false,
isVSCode: false,
});
@@ -199,7 +201,7 @@ describe('useWorkStatusVisibility', () => {
// In the app this is the chat area (chat + context panel); here `closest`
// finds nothing, so the hook falls back to the row it was given.
const { rowNode, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED,
);
expect(observed).toHaveLength(1);
@@ -209,7 +211,7 @@ describe('useWorkStatusVisibility', () => {
test('reacts to a live resize across the threshold', () => {
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED,
);
expect(result.visible).toBe(true);
@@ -228,7 +230,7 @@ describe('useWorkStatusVisibility', () => {
'/repo': { isOpen: true, tabs: [{ id: 'tab-1', mode: 'git' }], activeTabId: 'tab-1' },
};
const { result, rowNode, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED,
);
expect(result.visible).toBe(false);
@@ -236,11 +238,23 @@ describe('useWorkStatusVisibility', () => {
teardown();
});
+ test('yields to the open context panel even when the chat reports on no project', () => {
+ // A Chat session carries no repository, so the panel describes no
+ // directory. The context panel is still keyed by the directory the app is
+ // on, and looking it up under the chat's empty one answered "closed".
+ panelByDirectory = {
+ '/repo': { isOpen: true, tabs: [{ id: 'tab-1', mode: 'git' }], activeTabId: 'tab-1' },
+ };
+ const { result, teardown } = renderVisibility({ isMobile: false, isVSCode: false }, REQUIRED);
+ expect(result.visible).toBe(false);
+ teardown();
+ });
+
test('ignores an open context panel that has no resolvable tab', () => {
// ContextPanel renders nothing in that state, so it displaces nothing.
panelByDirectory = { '/repo': { isOpen: true, tabs: [], activeTabId: null } };
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED,
);
expect(result.visible).toBe(true);
@@ -264,7 +278,6 @@ describe('useWorkStatusVisibility', () => {
const Probe: React.FC = () => {
const [attached, setAttached] = React.useState(false);
const { rowRef, visible } = useWorkStatusVisibility({
- directory: '/repo',
isMobile: false,
isVSCode: false,
});
@@ -292,7 +305,7 @@ describe('useWorkStatusVisibility', () => {
// there is room for it.
panelEnabled = false;
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED * 2,
);
expect(result.visible).toBe(false);
@@ -302,7 +315,7 @@ describe('useWorkStatusVisibility', () => {
test('reports no fit when the row is too narrow, whatever the switch says', () => {
const { result, teardown } = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: false },
+ { isMobile: false, isVSCode: false },
REQUIRED - 1,
);
expect(result.fits).toBe(false);
@@ -312,7 +325,7 @@ describe('useWorkStatusVisibility', () => {
test('stays hidden on mobile and in VS Code regardless of width', () => {
const mobile = renderVisibility(
- { directory: '/repo', isMobile: true, isVSCode: false },
+ { isMobile: true, isVSCode: false },
REQUIRED * 2,
);
expect(mobile.result.visible).toBe(false);
@@ -320,7 +333,7 @@ describe('useWorkStatusVisibility', () => {
observed = [];
const vscode = renderVisibility(
- { directory: '/repo', isMobile: false, isVSCode: true },
+ { isMobile: false, isVSCode: true },
REQUIRED * 2,
);
expect(vscode.result.visible).toBe(false);
diff --git a/packages/ui/src/components/chat/work-status/useWorkStatusVisibility.ts b/packages/ui/src/components/chat/work-status/useWorkStatusVisibility.ts
index 541e4ae7..ecbdfe1d 100644
--- a/packages/ui/src/components/chat/work-status/useWorkStatusVisibility.ts
+++ b/packages/ui/src/components/chat/work-status/useWorkStatusVisibility.ts
@@ -1,6 +1,6 @@
import React from 'react';
-import { useUIStore } from '@/stores/useUIStore';
-import { normalizePath } from '@/lib/pathNormalization';
+import { normalizeContextPanelDirectoryKey, useUIStore } from '@/stores/useUIStore';
+import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
/**
* Fixed panel width. The panel is not user-resizable: it is an object inside
@@ -23,7 +23,6 @@ export const WORK_STATUS_REQUIRED_ROW_WIDTH =
WORK_STATUS_PANEL_WIDTH + WORK_STATUS_PANEL_GUTTER + WORK_STATUS_MIN_CHAT_WIDTH;
type Options = {
- directory: string | null | undefined;
isMobile: boolean;
isVSCode: boolean;
};
@@ -52,12 +51,20 @@ type Result = {
* panel, oscillating forever. The row width is independent of the panel, so it
* is the only stable input.
*/
-export const useWorkStatusVisibility = ({ directory, isMobile, isVSCode }: Options): Result => {
+export const useWorkStatusVisibility = ({ isMobile, isVSCode }: Options): Result => {
const [rowNode, setRowNode] = React.useState(null);
const [rowWidth, setRowWidth] = React.useState(null);
const rowRef = React.useCallback((node: HTMLDivElement | null) => { setRowNode(node); }, []);
- const directoryKey = React.useMemo(() => normalizePath(directory ?? null), [directory]);
+ // Keyed exactly like the rail and the panel itself: whichever directory the
+ // app is effectively on, not the directory this panel reports about. A chat
+ // with no project reports on nothing, and looking the context panel up under
+ // that empty key answered "closed" while it was plainly open on screen.
+ const effectiveDirectory = useEffectiveDirectory();
+ const directoryKey = React.useMemo(
+ () => (effectiveDirectory ? normalizeContextPanelDirectoryKey(effectiveDirectory) : ''),
+ [effectiveDirectory],
+ );
// Mirrors ContextPanel's own derivation: a panel with `isOpen` but no
// resolvable active tab renders nothing, and must not displace this panel.
diff --git a/packages/ui/src/components/code/useWorkerHighlightedLines.ts b/packages/ui/src/components/code/useWorkerHighlightedLines.ts
index 2a27e2ee..a9d20e60 100644
--- a/packages/ui/src/components/code/useWorkerHighlightedLines.ts
+++ b/packages/ui/src/components/code/useWorkerHighlightedLines.ts
@@ -1,26 +1,60 @@
import React from 'react';
-import { highlightLinesInWorker } from '@/components/chat/markdown/markdown-worker';
+import {
+ getCachedHighlightedLines,
+ highlightLinesInWorker,
+} from '@/components/chat/markdown/markdown-worker';
// Tokenize a whole block ONCE in the Shiki worker and expose per-line inner
// HTML. For per-line layouts (diffs, gutters, virtualization) that would
-// otherwise spawn one highlighter per row. Returns `null` until the first
-// result lands (or permanently on failure) — callers render plain text then.
+// otherwise spawn one highlighter per row. Cached results are available on the
+// first render; cold requests distinguish loading from permanent failure so
+// callers can choose whether to reveal their plain-text fallback.
//
// Whole-block tokenization also restores cross-line syntax context (multi-line
// strings / comments) that independent per-line highlighting loses.
-export const useWorkerHighlightedLines = (code: string, language: string): string[] | null => {
- const [lines, setLines] = React.useState(null);
+export type WorkerHighlightedLinesResult =
+ | { status: 'loading'; lines: null }
+ | { status: 'ready'; lines: string[] }
+ | { status: 'failed'; lines: null };
+
+type HighlightState = WorkerHighlightedLinesResult & {
+ code: string;
+ language: string;
+};
+
+const getHighlightState = (code: string, language: string): HighlightState => {
+ const lines = getCachedHighlightedLines(code, language);
+ return lines
+ ? { status: 'ready', lines, code, language }
+ : { status: 'loading', lines: null, code, language };
+};
+
+export const useWorkerHighlightedLines = (code: string, language: string): WorkerHighlightedLinesResult => {
+ const normalizedLanguage = (language || 'text').toLowerCase();
+ const [state, setState] = React.useState(() => getHighlightState(code, normalizedLanguage));
React.useEffect(() => {
+ const cached = getCachedHighlightedLines(code, normalizedLanguage);
+ if (cached) {
+ setState({ status: 'ready', lines: cached, code, language: normalizedLanguage });
+ return;
+ }
+
+ setState({ status: 'loading', lines: null, code, language: normalizedLanguage });
let active = true;
- setLines(null);
- void highlightLinesInWorker(code, (language || 'text').toLowerCase()).then((result) => {
- if (active) setLines(result);
+ void highlightLinesInWorker(code, normalizedLanguage).then((lines) => {
+ if (!active) return;
+ setState(lines
+ ? { status: 'ready', lines, code, language: normalizedLanguage }
+ : { status: 'failed', lines: null, code, language: normalizedLanguage });
});
return () => {
active = false;
};
- }, [code, language]);
+ }, [code, normalizedLanguage]);
- return lines;
+ if (state.code !== code || state.language !== normalizedLanguage) {
+ return getHighlightState(code, normalizedLanguage);
+ }
+ return state;
};
diff --git a/packages/ui/src/components/comments/useInlineCommentController.ts b/packages/ui/src/components/comments/useInlineCommentController.ts
index 3220e07a..b8862039 100644
--- a/packages/ui/src/components/comments/useInlineCommentController.ts
+++ b/packages/ui/src/components/comments/useInlineCommentController.ts
@@ -11,6 +11,7 @@ import { useSessionUIStore } from '@/sync/session-ui-store';
import { useI18n } from '@/lib/i18n';
import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
import { getRuntimeKey } from '@/lib/runtime-switch';
+import { focusChatInput } from '@/components/chat/composer/editor/dom';
type LineRangeBase = {
start: number;
@@ -136,6 +137,7 @@ export function useInlineCommentController(
const normalizedStoreRange = normalizeStoreRange(toStoreRange(normalizedRange));
const code = getCodeForRange(normalizedRange);
+ const isNewComment = !editingDraftId;
if (editingDraftId) {
updateDraft(target, editingDraftId, {
fileLabel,
@@ -160,6 +162,9 @@ export function useInlineCommentController(
}
reset();
+ if (isNewComment) {
+ requestAnimationFrame(focusChatInput);
+ }
}, [addDraft, editingDraftId, fileLabel, getCodeForRange, language, reset, selection, source, t, target, toStoreRange, updateDraft]);
return {
diff --git a/packages/ui/src/components/desktop/WindowsWindowControls.tsx b/packages/ui/src/components/desktop/WindowsWindowControls.tsx
index 8c8e88c5..4d257e30 100644
--- a/packages/ui/src/components/desktop/WindowsWindowControls.tsx
+++ b/packages/ui/src/components/desktop/WindowsWindowControls.tsx
@@ -205,7 +205,10 @@ export const WindowsWindowControls = React.memo(function WindowsWindowControls({