@molecule/app-ide-react 1.11.3 → 1.12.1

package/dist/components/ChatPanel.js

@@ -3,13 +3,14 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useReducer, useRef, us
 import { formatTokenCount, isDeprecated, partitionByDeprecation, PROVIDER_BRAND_COLORS, } from '@molecule/app-ai-models';
 import { getProvider as getVoiceProvider, listVoiceEngines, selectVoiceEngine, voiceEngineCoversLanguage, } from '@molecule/app-ai-voice';
 import { getCountryFlag } from '@molecule/app-country-flags';
-import { t } from '@molecule/app-i18n';
+import { getLocale, t } from '@molecule/app-i18n';
 import { getLogger } from '@molecule/app-logger';
 import { DEFAULT_AGENT_NAME, DEFAULT_PRODUCT_NAME, useAIModels, useChat, useHttpClient, useThemeMode, } from '@molecule/app-react';
 import { getClassMap } from '@molecule/app-ui';
 import { Tooltip } from '@molecule/app-ui-react/components/Tooltip.js';
 import { timelineSortKey } from '../chatTimelineOrdering.js';
 import { getCustomEventCardFactory } from '../customEventCards.js';
+import { useChatTimestampsVisible, useMinuteNow } from '../hooks/useChatTimestampsVisible.js';
 import { useCoarsePointer, useNarrowViewport } from '../hooks/useViewport.js';
 import { activityFromEvent } from './activity-utilities.js';
 import { ActivityCard } from './ActivityCard.js';
@@ -29,8 +30,10 @@ import { buildSettingsList, summarizeSounds } from './chat-settings-utilities.js
 import { buildShareUrl, DEFAULT_SHARE_ROLE, parseShareCommand, SHARE_ROLES, } from './chat-share-utilities.js';
 import { buildNewSkillTemplate, loadProjectSkills, newSkillPath, parseSkillMeta, pickRelevantSkill, recentUserText, } from './chat-skills-utilities.js';
 import { estimateTurnTokens } from './chat-stream-utilities.js';
+import { getChatTimestampsVisible, parseTimestampsCommand, planChatTimestamps, resolveChatLocale, setChatTimestampsVisible, } from './chat-timestamps-utilities.js';
 import { ENTRY_TIP, pickIdleTip, shouldShowIdleTip, TIP_IDLE_MS, TIP_MIN_MESSAGES, } from './chat-tips-utilities.js';
 import { ChatItemBoundary } from './ChatItemBoundary.js';
+import { ChatTimestamp } from './ChatTimestamp.js';
 import { HelpCard } from './HelpCard.js';
 import { Icon } from './Icon.js';
 import { MarkdownContent } from './MarkdownContent.js';
@@ -259,24 +262,6 @@ function relativeTime(iso) {
     const d = Math.floor(h / 24);
     return `${d}d ago`;
 }
-/**
- * Long-form relative time (e.g. "just now", "43 minutes ago", "2 hours ago",
- * "3 days ago") for the Slack-style message header.
- * @param ms - Epoch milliseconds of the message.
- * @returns A human-readable long-form relative time string.
- */
-function relativeTimeLong(ms) {
-    const min = Math.floor((Date.now() - ms) / 60_000);
-    if (min < 1)
-        return 'just now';
-    if (min < 60)
-        return `${min} minute${min === 1 ? '' : 's'} ago`;
-    const h = Math.floor(min / 60);
-    if (h < 24)
-        return `${h} hour${h === 1 ? '' : 's'} ago`;
-    const d = Math.floor(h / 24);
-    return `${d} day${d === 1 ? '' : 's'} ago`;
-}
 /**
  * Format an AI-allowance window reset (epoch ms) as a short countdown phrase for
  * the /cost used-up line ("refreshes in about 3 hours"). Under an hour reads "in
@@ -986,7 +971,7 @@ AuthorNameButton.displayName = 'AuthorNameButton';
  * @returns The rendered message item.
  */
 const MessageItem = memo(function MessageItem(props) {
-    const { msg, sendMessage, handleAskUserResponse, isLoading, streamingStatus, onNavigatePreview, undoneTcIds, handleUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, handleFileRevert, setInputAndCursorEnd, setModelPicker, chatMode, userAvatar, onProfileClick, currentUserId, discovery, buildUpgradeCta, agentName, canEdit, } = props;
+    const { msg, sendMessage, handleAskUserResponse, isLoading, streamingStatus, onNavigatePreview, undoneTcIds, handleUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, handleFileRevert, setInputAndCursorEnd, setModelPicker, chatMode, userAvatar, onProfileClick, currentUserId, discovery, buildUpgradeCta, agentName, canEdit, showTimestamp, } = props;
     const cm = getClassMap();
     const themeMode = useThemeMode();
     const isLight = themeMode === 'light';
@@ -1110,7 +1095,7 @@ const MessageItem = memo(function MessageItem(props) {
                                         // 16px so the glyph reads at the username's optical size — the
                                         // people glyph has internal viewBox padding, so a nominal 14px
                                         // renders visibly smaller than the 14px text next to it.
-                                        name: "people", size: 16, "aria-hidden": "true", style: { color: NOTICE_TONE.gold.accent } }) })), typeof msg.timestamp === 'number' && (_jsx("span", { className: cm.textMuted, style: { fontSize: 11 }, children: relativeTimeLong(msg.timestamp) }))] })), _jsx(CollapsibleUserMessage, { content: msg.content, isLight: isLight }), msg.attachments && msg.attachments.length > 0 && (_jsx("div", { style: { marginTop: 4, display: 'flex', gap: 4, flexWrap: 'wrap' }, children: msg.attachments.map((att, ai) => (_jsxs("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [att.mediaType.startsWith('image/')
+                                        name: "people", size: 16, "aria-hidden": "true", style: { color: NOTICE_TONE.gold.accent } }) })), showTimestamp && typeof msg.timestamp === 'number' && (_jsx(ChatTimestamp, { timestamp: msg.timestamp }))] })), _jsx(CollapsibleUserMessage, { content: msg.content, isLight: isLight }), msg.attachments && msg.attachments.length > 0 && (_jsx("div", { style: { marginTop: 4, display: 'flex', gap: 4, flexWrap: 'wrap' }, children: msg.attachments.map((att, ai) => (_jsxs("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [att.mediaType.startsWith('image/')
                                         ? '\uD83D\uDDBC\uFE0F'
                                         : att.mediaType.startsWith('audio/')
                                             ? '\uD83C\uDFB5'
@@ -2608,6 +2593,18 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             // localStorage unavailable — treat as unset; the project fallback may apply.
         }
     }, []);
+    // ── Timestamps (/timestamps) ────────────────────────────────────────────────
+    // A per-device display preference (localStorage, like sounds), off by default.
+    // The minute clock re-plans which items show a time (see planChatTimestamps),
+    // so labels advance and runs of identical labels regroup as time passes.
+    const timestampsVisible = useChatTimestampsVisible();
+    const minuteNow = useMinuteNow();
+    const applyTimestampsVisible = useCallback((visible) => {
+        setChatTimestampsVisible(visible);
+        addSystemCard(visible
+            ? t('ide.chat.timestampsShown', undefined, { defaultValue: 'Timestamps shown.' })
+            : t('ide.chat.timestampsHidden', undefined, { defaultValue: 'Timestamps hidden.' }), { clientOnly: true });
+    }, [addSystemCard]);
     // ── Panel overlay (/skills, /scripts, /settings — closeable popups) ──────────
     // These three commands open a closeable overlay above the composer (mirrors how
     // /model and /sounds own this popup region) instead of dropping an inline card
@@ -4197,6 +4194,10 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             setInputValue('');
             setSoundsPicker({ selectedIdx: -1 });
         }
+        else if (id === 'timestamps') {
+            setInputValue('');
+            applyTimestampsVisible(!getChatTimestampsVisible());
+        }
         else if (id === 'settings') {
             setInputValue('');
             // Opens the settings + command-reference card in a closeable overlay.
@@ -4241,6 +4242,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 setShareModal({ role: DEFAULT_SHARE_ROLE });
         }
     }, [
+        applyTimestampsVisible,
         clearHistory,
         setInputAndCursorEnd,
         http,
@@ -4338,6 +4340,22 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
             setSoundsPicker({ selectedIdx: -1 });
             return;
         }
+        // Handle /timestamps [on | off] locally — a per-device display preference.
+        const timestampsCommand = parseTimestampsCommand(trimmed);
+        if (timestampsCommand) {
+            setInputValue('');
+            if (timestampsCommand.action === 'invalid') {
+                addSystemCard(t('ide.chat.timestampsUsage', undefined, {
+                    defaultValue: 'Usage: /timestamps [on | off]',
+                }), { clientOnly: true });
+            }
+            else {
+                applyTimestampsVisible(timestampsCommand.action === 'toggle'
+                    ? !getChatTimestampsVisible()
+                    : timestampsCommand.action === 'on');
+            }
+            return;
+        }
         // Handle /settings command locally
         if (/^\/settings$/i.test(trimmed)) {
             void executeCommand('settings');
@@ -4713,6 +4731,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         setAttachmentError(null);
         sendMessage(message, chatAttachments.length > 0 ? chatAttachments : undefined);
     }, [
+        applyTimestampsVisible,
         attachedFiles,
         http,
         projectId,
@@ -5371,6 +5390,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                     ...(card.icon ? { icon: card.icon } : {}),
                     ...(card.content ? { content: card.content } : {}),
                     ...(card.coversLimitType ? { coversLimitType: card.coversLimitType } : {}),
+                    ...(card.critical ? { critical: true } : {}),
                     timestamp,
                 };
             }
@@ -5509,8 +5529,92 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                 ? t('ide.chat.settings.on', undefined, { defaultValue: 'On' })
                 : t('ide.chat.settings.off', undefined, { defaultValue: 'Off' }),
             sounds: t('ide.chat.settings.soundsSummary', { enabled: soundsSummary.enabled, total: soundsSummary.total }, { defaultValue: '{{enabled}} of {{total}} events enabled' }),
+            timestamps: timestampsVisible
+                ? t('ide.chat.settings.on', undefined, { defaultValue: 'On' })
+                : t('ide.chat.settings.off', undefined, { defaultValue: 'Off' }),
         });
     };
+    const renderedTimeline = timeline.length > maxVisibleItems ? timeline.slice(-maxVisibleItems) : timeline;
+    /**
+     * Where (if anywhere) a timeline item carries its time. Typed user messages and
+     * team notes carry it in their header row and always qualify; Synthase replies
+     * and event cards get a line above them, and qualify with timestamps off only
+     * when critical. The command browsers (/settings, /skills, /scripts, /help) are
+     * this viewer's UI, not something that happened, so they never carry one.
+     *
+     * @param item - The timeline item.
+     * @returns Its slot, or `null` when it carries no timestamp.
+     */
+    const timestampSlotFor = (item) => {
+        if (item.kind === 'message') {
+            const { msg } = item;
+            if (typeof msg.timestamp !== 'number')
+                return null;
+            const base = { id: msg.id, timestamp: msg.timestamp, align: 'left' };
+            if ((msg.role === 'user' && !msg.automatic) || msg.teamOnly)
+                return { ...base, alwaysShown: true, placement: 'header' };
+            // An assistant placeholder with nothing rendered yet (still thinking).
+            if (!msg.commitRecord && !msg.content && !msg.blocks?.length && !msg.toolCalls?.length)
+                return null;
+            // A reply that failed verification or hit a resource limit is a critical event.
+            const critical = !!msg.blocks?.some((block) => {
+                const b = block;
+                return (b.type === 'verification' && b.status === 'error') || b.type === 'resource_limit';
+            });
+            return { ...base, alwaysShown: critical, placement: 'line' };
+        }
+        const { card } = item;
+        if (typeof card.timestamp !== 'number')
+            return null;
+        const base = { id: card.id, timestamp: card.timestamp, placement: 'line' };
+        if (item.kind === 'commit')
+            return { ...base, alwaysShown: item.card.status === 'error', align: 'left' };
+        if (item.kind === 'activity')
+            return { ...base, alwaysShown: item.card.activity.status === 'failed', align: 'left' };
+        if (item.kind === 'tip')
+            return { ...base, alwaysShown: false, align: 'left' };
+        const systemCard = item.card;
+        if (systemCard.variant === 'settings' ||
+            systemCard.variant === 'skills' ||
+            systemCard.variant === 'skillsCreate' ||
+            systemCard.variant === 'scripts' ||
+            systemCard.variant === 'help')
+            return null;
+        // Centered one-line notices center their time to match.
+        const centered = systemCard.variant === 'skillsLoaded' ||
+            (systemCard.variant === undefined &&
+                !(systemCard.tone || systemCard.emphasized || systemCard.action) &&
+                !systemCard.text.includes('\n'));
+        return {
+            ...base,
+            alwaysShown: systemCard.variant === undefined && !!systemCard.critical,
+            align: centered ? 'center' : 'left',
+        };
+    };
+    const timestampSlots = renderedTimeline.map(timestampSlotFor);
+    const timestampSlotById = new Map(timestampSlots.flatMap((slot) => (slot ? [[slot.id, slot]] : [])));
+    const shownTimestampIds = planChatTimestamps(timestampSlots, {
+        visible: timestampsVisible,
+        now: minuteNow,
+        locale: resolveChatLocale(getLocale),
+    });
+    /**
+     * Puts the item's time on its own line above a Synthase reply or an event card,
+     * when the timestamp plan shows it. Header-placed times render inside MessageItem.
+     *
+     * @param item - The timeline item being rendered.
+     * @param node - The item's rendered element tree.
+     * @returns The tree, preceded by its timestamp line when one applies.
+     */
+    const withTimelineTimestamp = (item, node) => {
+        if (node === null)
+            return node;
+        const id = item.kind === 'message' ? item.msg.id : item.card.id;
+        const slot = timestampSlotById.get(id);
+        if (!slot || slot.placement !== 'line' || !shownTimestampIds.has(id))
+            return node;
+        return (_jsxs(_Fragment, { children: [_jsx(ChatTimestamp, { timestamp: slot.timestamp, variant: "line", align: slot.align }), node] }));
+    };
     // ── Render ─────────────────────────────────────────────────────────────────
     return (_jsxs("div", { style: {
             display: 'flex',
@@ -5566,7 +5670,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                 opacity: 0.7,
                             }, children: t('ide.chat.showEarlier', undefined, {
                                 defaultValue: 'Show earlier messages',
-                            }) }) })), (timeline.length > maxVisibleItems ? timeline.slice(-maxVisibleItems) : timeline).map((item) => (_jsx(ChatItemBoundary, { onError: onRenderError, render: () => {
+                            }) }) })), renderedTimeline.map((item) => (_jsx(ChatItemBoundary, { onError: onRenderError, render: () => withTimelineTimestamp(item, (() => {
                             if (item.kind === 'commit')
                                 return (_jsx(CommitCardItem, { card: item.card, onRevert: canEdit === false ? undefined : handleRevertCommit }, item.card.id));
                             if (item.kind === 'activity')
@@ -5680,8 +5784,8 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                 // MessageItem builds the identity from the message's own
                                 // author (teammates included), so the host shows their
                                 // view-only profile and the viewer's editable own.
-                                onProfileClick: onProfileClick, currentUserId: currentUserId, discovery: discovery, buildUpgradeCta: buildUpgradeCta, agentName: agentName, canEdit: canEdit }, msg.id));
-                        } }, item.kind === 'message' ? item.msg.id : item.card.id))), error &&
+                                onProfileClick: onProfileClick, currentUserId: currentUserId, showTimestamp: shownTimestampIds.has(msg.id), discovery: discovery, buildUpgradeCta: buildUpgradeCta, agentName: agentName, canEdit: canEdit }, msg.id));
+                        })()) }, item.kind === 'message' ? item.msg.id : item.card.id))), error &&
                         !isStaleAnonymousLimit &&
                         (errorMeta?.limitType ? (_jsx(ResourceLimitBanner, { message: error, action: buildUpgradeCta?.({ requiresSignup: errorMeta.requiresSignup }) })) : isViewerAccessDenied ? (
                         // A viewer's denial is expected state, not an alarm: a brief, calm,