ompchamber 0.3.0 → 0.5.0

package/src/client/components/workspace/chat-timeline/MessageList.tsx

@@ -1,8 +1,11 @@
+import { Fragment } from 'preact';
 import { useMemo } from 'preact/hooks';
 import { memo } from 'preact/compat';
 
 import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
-import { responseRunDurationMs } from '@/shared/lib/chat/duration';
+import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter';
+import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import type { ChatMessageData } from '@/shared/types';
 
 export interface MessageListProps {
@@ -22,14 +25,15 @@ export interface MessageListProps {
 
 /**
  * Shared timeline body: the ordered message rows plus the per-run footer
- * (model + duration) ownership rules. Desktop and mobile render the exact same
+ * (model + duration) placement rules. Desktop and mobile render the exact same
  * rows — only the surrounding scroll container differs.
  *
- * Footer ownership: notice rows are transparent for footer purposes, so the
- * last real AI message of a run still owns the footer even when a notice row
- * follows it, and the notice itself never gets one.
+ * Footer placement: the footer is the run's own boundary row, so it renders
+ * after every row the run owns — including notice rows omp wrote at its tail —
+ * and therefore immediately before the next user message. A notice-only
+ * stretch never gets one.
  */
-// Per-row lookups (next/prev non-notice neighbour, run durations) are built in
+// Per-row lookups (previous non-notice neighbour, run footers) are built in
 // one O(n) pass and memoized on `messages`, so a streaming frame renders in
 // O(n) instead of re-scanning the array for every row. `memo` then skips the
 // rows entirely when the props are referentially unchanged.
@@ -46,75 +50,52 @@ export const MessageList = memo(function MessageList({
   onNewChat,
   isMobile = false,
 }: MessageListProps) {
-  const { lastAiIdx, nextNonNotice, prevNonNoticeIdx, durations } = useMemo(() => {
-    const count = messages.length;
-
-    // The streaming AI message is the last non-notice row: notice rows sit above
-    // the turn, so a plain "last item" check would mark the notice as streaming
-    // and render the footer early.
-    let lastAi = count - 1;
-    while (lastAi >= 0 && messages[lastAi].notice) lastAi--;
-
-    // nextNonNotice[idx]: nearest non-notice row strictly AFTER idx (or null).
-    const nextNonNotice: (ChatMessageData | null)[] = new Array(count);
-    let next: ChatMessageData | null = null;
-    for (let i = count - 1; i >= 0; i--) {
-      nextNonNotice[i] = next;
-      if (!messages[i].notice) next = messages[i];
-    }
-
-    // prevNonNoticeIdx[idx]: nearest non-notice row index strictly BEFORE idx.
-    const prevNonNoticeIdx: number[] = new Array(count);
-    let prevIdx = -1;
-    for (let i = 0; i < count; i++) {
-      prevNonNoticeIdx[i] = prevIdx;
-      if (!messages[i].notice) prevIdx = i;
-    }
-
-    // Footer-owning rows resolve their run duration once here (each is O(n) in
-    // the worst case, so doing it inline would be O(n²) overall).
-    const durations: (number | null)[] = new Array(count);
-    for (let i = 0; i < count; i++) {
-      const msg = messages[i];
-      const nextReal = nextNonNotice[i];
-      const ownsFooter = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
-      durations[i] = ownsFooter ? responseRunDurationMs(messages, i) : null;
-    }
-
-    return { lastAiIdx: lastAi, nextNonNotice, prevNonNoticeIdx, durations };
-  }, [messages]);
+  const { streamingIdx, footers, prevNonNoticeIdx } = useMemo(() => {
+    return {
+      // The streaming AI row is the last non-notice row (see streamingRowIndex).
+      streamingIdx: streamingRowIndex(messages),
+      // Runs resolve their footer + run duration once here, keyed by the row
+      // the footer renders after.
+      footers: resolveRunFooters(messages, isGenerating),
+      prevNonNoticeIdx: previousNonNoticeIndex(messages),
+    };
+  }, [messages, isGenerating]);
 
   return (
     <>
       {messages.map((msg, idx) => {
         const prev = messages[idx - 1];
-        const isLoading = isGenerating && idx === lastAiIdx && msg.role === 'ai';
-        const nextReal = nextNonNotice[idx];
-        const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
-        const isPrevNotice = Boolean(prev?.notice);
-        const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user' && !isPrevNotice;
+        const isLoading = isGenerating && idx === streamingIdx && msg.role === 'ai';
+        const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user' && !isNoticeRow(prev);
         const prevRealIdx = prevNonNoticeIdx[idx];
         const prevReal = prevRealIdx >= 0 ? messages[prevRealIdx] : null;
         const isPrevAssistant = Boolean(msg.role !== 'user' && prevReal && prevReal.role !== 'user');
+        const footer = footers[idx];
         return (
-          <ChatMessageItem
-            key={msg.id}
-            msg={msg}
-            provider={provider}
-            providerNames={providerNames}
-            modelName={modelName}
-            modelNames={modelNames}
-            thinkingLevel={thinkingLevel}
-            isStreaming={isLoading}
-            onUndo={onUndo}
-            onRetry={onRetry}
-            onNewChat={onNewChat}
-            footerVisible={isLastAi}
-            durationMs={durations[idx]}
-            isPrevAssistant={isPrevAssistant}
-            isMobile={isMobile}
-            className={msg.notice ? 'mt-3 mb-1' : isAiFragment ? 'mt-1' : 'mt-3'}
-          />
+          <Fragment key={msg.id}>
+            <ChatMessageItem
+              msg={msg}
+              isStreaming={isLoading}
+              onUndo={onUndo}
+              onNewChat={onNewChat}
+              isPrevAssistant={isPrevAssistant}
+              className={isNoticeRow(msg) ? 'mt-3 mb-1' : isAiFragment ? 'mt-1' : 'mt-3'}
+            />
+            {footer && (
+              <RunFooter
+                msg={footer.msg}
+                provider={provider}
+                providerNames={providerNames}
+                modelName={modelName}
+                modelNames={modelNames}
+                thinkingLevel={thinkingLevel}
+                durationMs={footer.durationMs}
+                onRetry={onRetry}
+                onNewChat={onNewChat}
+                isMobile={isMobile}
+              />
+            )}
+          </Fragment>
         );
       })}
     </>

package/src/client/components/workspace/chat-timeline/RunFooter.tsx

@@ -0,0 +1,60 @@
+import type { ChatMessageData } from '@/shared/types';
+import { AiMessageFooter } from '@/client/components/workspace/chat-timeline/AiMessageFooter';
+import { messageAnswerText } from '@/shared/lib/chat/notice-row';
+import { formatMessageStamp } from '@/shared/lib/format/time';
+
+interface RunFooterProps {
+  /** The run's last real AI message (`RunFooterSlot.msg`). */
+  msg: ChatMessageData;
+  /** Session-level provider, used when the turn recorded none. */
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  /** id → display-name map from the model catalog. */
+  modelNames?: Record<string, string>;
+  /** Session thinking level, used when the turn recorded none. */
+  thinkingLevel?: string;
+  durationMs?: number | null;
+  onRetry?: (msgId: string) => void;
+  onNewChat?: (content: string) => void;
+  /** Mobile uses a compact provider/model footer with a bottom-sheet menu. */
+  isMobile?: boolean;
+}
+
+/**
+ * Boundary footer of an AI response run: the timeline renders it as the run's
+ * own row — after every row the run owns, immediately before the next user
+ * message — never inside the answer bubble. The slot's AI message supplies the
+ * turn's model/usage/content.
+ */
+export function RunFooter({
+  msg,
+  provider,
+  providerNames,
+  modelName,
+  modelNames,
+  thinkingLevel,
+  durationMs,
+  onRetry,
+  onNewChat,
+  isMobile = false,
+}: RunFooterProps) {
+  return (
+    <div className="mt-2">
+      <AiMessageFooter
+        provider={msg.provider || provider}
+        providerNames={providerNames}
+        currentModel={(msg.model ? (modelNames?.[msg.model] ?? msg.model) : '') || modelName || ''}
+        thinkingLevel={msg.thinkingLevel ?? thinkingLevel}
+        dateStr={formatMessageStamp(msg)}
+        durationMs={durationMs ?? msg.durationMs}
+        usage={msg.usage}
+        content={messageAnswerText(msg)}
+        msgId={msg.id}
+        onRetry={onRetry}
+        onNewChat={onNewChat}
+        isMobile={isMobile}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/SubagentView.tsx

@@ -1,10 +1,14 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { Fragment } from 'preact';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
 import { ArrowLeft, Bot, Loader2, Lock } from 'lucide-preact';
 import type { SubagentInfo } from '@/shared/types';
 import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIcon';
 import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter';
 import { useSubagentTranscript } from '@/client/hooks/chat/subagent';
 import { useModelNames } from '@/client/hooks/models/use-model-names';
+import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
 interface SubagentViewProps {
@@ -43,6 +47,17 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
     return () => cancelAnimationFrame(frame);
   }, [messages.length, isRunning]);
 
+  // Boundary footers: a run's footer renders after its last row, so trailing
+  // notice rows never separate it from the next user message.
+  const { streamingIdx, footers, prevNonNoticeIdx } = useMemo(
+    () => ({
+      streamingIdx: streamingRowIndex(messages),
+      footers: resolveRunFooters(messages, isRunning),
+      prevNonNoticeIdx: previousNonNoticeIndex(messages),
+    }),
+    [messages, isRunning],
+  );
+
   if (!subagent || !isActive) return null;
 
   const progress = status?.progress ?? subagent.progress;
@@ -104,30 +119,31 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
             </div>
           ) : (
             messages.map((msg, idx) => {
-              let lastAiIdx = messages.length - 1;
-              while (lastAiIdx >= 0 && messages[lastAiIdx].notice) lastAiIdx--;
-              const isLoading = isRunning && idx === lastAiIdx && msg.role !== 'user' && !msg.notice;
-              const nextReal = messages.slice(idx + 1).find((m) => !m.notice);
-              const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
-              let prevRealIdx = idx - 1;
-              while (prevRealIdx >= 0 && messages[prevRealIdx].notice) prevRealIdx--;
+              const isLoading = isRunning && idx === streamingIdx && msg.role === 'ai';
+              const prevRealIdx = prevNonNoticeIdx[idx];
               const prevReal = prevRealIdx >= 0 ? messages[prevRealIdx] : null;
               const isPrevAssistant = Boolean(msg.role !== 'user' && prevReal && prevReal.role !== 'user');
+              const footer = footers[idx];
 
               return (
-                <ChatMessageItem
-                  key={msg.id}
-                  msg={msg}
-                  provider={msg.provider || provider}
-                  providerNames={providerNames}
-                  modelName={msg.model || modelName}
-                  modelNames={modelNames}
-                  isStreaming={isLoading}
-                  footerVisible={isLastAi}
-                  durationMs={msg.durationMs ?? null}
-                  isPrevAssistant={isPrevAssistant}
-                  className={msg.notice ? 'mt-3 mb-1' : isPrevAssistant ? 'mt-1' : 'mt-3'}
-                />
+                <Fragment key={msg.id}>
+                  <ChatMessageItem
+                    msg={msg}
+                    isStreaming={isLoading}
+                    isPrevAssistant={isPrevAssistant}
+                    className={isNoticeRow(msg) ? 'mt-3 mb-1' : isPrevAssistant ? 'mt-1' : 'mt-3'}
+                  />
+                  {footer && (
+                    <RunFooter
+                      msg={footer.msg}
+                      provider={provider}
+                      providerNames={providerNames}
+                      modelName={modelName}
+                      modelNames={modelNames}
+                      durationMs={footer.durationMs}
+                    />
+                  )}
+                </Fragment>
               );
             })
           )}

package/src/client/components/workspace/chat-timeline/ToolCallCard.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo } from 'preact/hooks';
 import { memo } from 'preact/compat';
-import { Boxes, Brain, BrainCircuit, Camera, Check, Code2, Cpu, FileCode, FileText, GitPullRequest, Globe, HelpCircle, ListTodo, Search, Server, Shield, Terminal, Wrench } from 'lucide-preact';
+import { Bell, Boxes, Brain, BrainCircuit, Camera, Check, Code2, Cpu, FileCode, FileText, GitPullRequest, Globe, HelpCircle, ListTodo, Search, Server, Shield, Terminal, Wrench } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
+import { stripAnsiCodes } from '@/shared/lib/code/ansi';
+import { isReminderTag, unwrapXmlEnvelope } from '@/shared/lib/chat/xml-envelope';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { ToolCardShell } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/ToolCardShell';
 import { DiffView } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView';
@@ -154,6 +156,13 @@ export const ToolCallCard = memo(function ToolCallCard({ tool, isOpen, onToggle,
     [hasPanel, commandOrInput]
   );
 
+  // A reminder envelope in the result is the runtime interrupting the call, not
+  // its outcome — the header flags it next to the status badge.
+  const isReminder = useMemo(() => {
+    const envelope = unwrapXmlEnvelope(stripAnsiCodes(outputText));
+    return Boolean(envelope && isReminderTag(envelope.tag));
+  }, [outputText]);
+
   // Clean title & subtitle extraction
   let displayTitle = '';
   let displaySubtitle: string | undefined;
@@ -226,9 +235,18 @@ export const ToolCallCard = memo(function ToolCallCard({ tool, isOpen, onToggle,
         ? targetFilePath
         : displaySubtitle || (tool.detail && !targetFilePath ? tool.detail : undefined);
 
-  const meta = tool.duration || tool.time ? (
-    <span className="font-mono text-[10px] text-ink/40">{tool.duration || tool.time}</span>
-  ) : null;
+  const duration = tool.duration || tool.time;
+  const meta =
+    duration || isReminder ? (
+      <span className="flex items-center gap-2">
+        {duration ? <span className="font-mono text-[10px] text-ink/40">{duration}</span> : null}
+        {isReminder && (
+          <span className="inline-flex items-center gap-1 rounded-full bg-error/10 px-2 py-0.5 text-[10px] font-semibold text-error">
+            <Bell size={10} /> Reminder
+          </span>
+        )}
+      </span>
+    ) : null;
 
   return (
     <ToolCardShell

package/src/client/components/workspace/chat-timeline/index.tsx

@@ -16,7 +16,6 @@ import { useModelNames } from '@/client/hooks/models/use-model-names';
 import { useProviderNames } from '@/client/hooks/models/use-provider-names';
 import { useToasts } from '@/client/hooks/ui/toasts';
 import { ToastStack } from '@/client/components/common/ToastStack';
-import { normalizeNoticePositions } from '@/shared/lib/chat/order';
 import { composerRootFor } from '@/shared/lib/workspace/active-project';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 
@@ -125,8 +124,6 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
     ? (modelNames[sessionData.model.modelId] ?? sessionData.model.modelId)
     : sessionData?.model;
 
-  const orderedMessages = useMemo(() => normalizeNoticePositions(localMessages), [localMessages]);
-
   // A pending "new-…" session has no messages yet, so the workspace picker
   // must stay available until the first chat is sent (which spawns the real
   // omp session). Never lock the user into a folder before sending.
@@ -137,7 +134,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
   // covers the whole chat timeline (body + composer) so a session switch shows
   // one coherent placeholder instead of a half-drawn view. Skipped while an
   // optimistic send owns the tail (fresh spawn adoption must keep its bubbles).
-  const showFullSkeleton = !isPendingSession && sessionLoading && orderedMessages.length === 0;
+  const showFullSkeleton = !isPendingSession && sessionLoading && localMessages.length === 0;
 
   if (!sessionId || isPendingSession) {
     return (
@@ -154,7 +151,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
         onSend={handleSend}
         isGenerating={isGenerating}
         appSettings={appSettings}
-        localMessages={localMessages}
+        messages={localMessages}
         provider={sessionProvider}
         providerNames={providerNames}
         modelName={sessionModelName}
@@ -201,7 +198,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                 hasMore={hasMore}
                 loadOlderError={loadOlderError}
                 loadOlder={loadOlder}
-                messages={orderedMessages}
+                messages={localMessages}
                 isGenerating={isGenerating}
                 provider={sessionProvider}
                 providerNames={providerNames}

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Edit.tsx

@@ -4,9 +4,12 @@ import type { ToolCallData } from '@/shared/types';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { DiffView } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView';
 import { HashlinePatch } from '@/client/components/workspace/chat-timeline/tool-renderers/hashline-patch';
-import { getLanguageFromPath, highlightCode, isCodeLike } from '@/shared/lib/code/syntax-highlight';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { EnvelopeHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/EnvelopeHeader';
+import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
+import { outputMarkdown, readToolOutput } from '@/shared/lib/chat/tool-output';
 import { hashlinePatchFromArgs } from '@/shared/lib/omp/session/hashline-patch';
 import { formatBytes } from '@/shared/lib/format/number';
 
@@ -148,10 +151,11 @@ export function Edit({ tool }: { tool: ToolCallData }) {
     () => (newContent ? highlightCode(newContent.split('\n').slice(0, 80).join('\n'), lang) : ''),
     [newContent, lang, syntaxReady]
   );
-  const truncatedOutput = useMemo(() => truncateTailLines(output, MAX_OUTPUT_LINES), [output]);
-  const highlightedOutput = useMemo(
-    () => (isCodeLike(output) ? highlightCode(truncatedOutput.text, lang) : ''),
-    [output, truncatedOutput, lang, syntaxReady]
+  const outputText = useMemo(() => readToolOutput(output), [output]);
+  const truncatedOutput = useMemo(() => truncateTailLines(outputText.content, MAX_OUTPUT_LINES), [outputText]);
+  const outputBody = useMemo(
+    () => outputMarkdown(truncatedOutput.text, outputText.format),
+    [truncatedOutput, outputText.format]
   );
 
   return (
@@ -261,26 +265,18 @@ export function Edit({ tool }: { tool: ToolCallData }) {
         </div>
       )}
 
-      {/* Execution Result Notification */}
+      {/* Execution Result Notification — envelope XML dilepas, isinya markdown */}
       {output && (
-        <div className="rounded-lg border border-ink/8 bg-paper p-2.5 text-[11px] font-mono select-text">
+        <div className="rounded-lg border border-ink/8 bg-paper p-2.5 select-text">
           <div className="flex items-center gap-1.5 mb-1.5 text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
             <ArrowRight size={11} className="text-success" />
             <span>Execution Output</span>
           </div>
-          {isCodeLike(output) ? (
-            <>
-              {truncatedOutput.skipped > 0 && (
-                <div className="mb-1 font-mono text-[9.5px] text-ink/45">… {truncatedOutput.skipped} earlier lines hidden</div>
-              )}
-              <pre
-                className="max-h-56 overflow-auto rounded bg-canvas/40 p-2 text-ink/85 whitespace-pre leading-relaxed scrollbar-overlay-container scrollbar-overlay-static"
-                dangerouslySetInnerHTML={{ __html: highlightedOutput }}
-              />
-            </>
-          ) : (
-            <div className="text-ink/75 leading-relaxed whitespace-pre-wrap">{truncatedOutput.text}</div>
+          {outputText.envelope && <EnvelopeHeader envelope={outputText.envelope} />}
+          {truncatedOutput.skipped > 0 && (
+            <div className="mb-1 font-mono text-[9.5px] text-ink/45">… {truncatedOutput.skipped} earlier lines hidden</div>
           )}
+          <MarkdownRenderer content={outputBody} className="text-[11.5px] text-ink/85" />
         </div>
       )}
     </div>

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/EnvelopeHeader.tsx

@@ -0,0 +1,46 @@
+import { AlertCircle, Bell, Boxes } from 'lucide-preact';
+import { isReminderTag, type XmlEnvelope } from '@/shared/lib/chat/xml-envelope';
+import { toTitleCase } from '@/shared/lib/chat/title-case';
+
+/** Badge tone per wrapper family: a system reminder is advisory (warning), an
+ *  error envelope is a failure, anything else is informational. */
+function envelopeTone(tag: string) {
+  if (isReminderTag(tag)) {
+    return { icon: <Bell size={12} />, badge: 'bg-warning/10 text-warning' };
+  }
+  if (tag === 'error' || tag === 'failure') {
+    return { icon: <AlertCircle size={12} />, badge: 'bg-error/10 text-error' };
+  }
+  return { icon: <Boxes size={12} />, badge: 'bg-info/10 text-info' };
+}
+
+interface EnvelopeHeaderProps {
+  envelope: XmlEnvelope;
+}
+
+/** Identity row for a peeled XML envelope: which wrapper carried the output and
+ *  the attributes it declared — for a system reminder those are the rule that
+ *  fired and the file behind it, which is the reason the wrapper existed. */
+export function EnvelopeHeader({ envelope }: EnvelopeHeaderProps) {
+  const tone = envelopeTone(envelope.tag);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded ${tone.badge}`}>
+        {tone.icon}
+      </span>
+      <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/60">
+        {toTitleCase(envelope.tag)}
+      </span>
+      {Object.entries(envelope.attributes).map(([key, value]) => (
+        <span
+          key={key}
+          title={`${key}=${value}`}
+          className="max-w-[240px] truncate rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9.5px] text-ink/60"
+        >
+          {value ? `${key}=${value}` : key}
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput.tsx

@@ -1,14 +1,10 @@
-import type { ReactNode } from 'preact/compat';
 import { useMemo } from 'preact/hooks';
 import { Code } from 'lucide-preact';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
-import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
 import { CopyButton } from '@/client/components/common/CopyButton';
+import { EnvelopeHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/EnvelopeHeader';
 import { stripAnsiCodes } from '@/shared/lib/code/ansi';
-import { detectOutputFormat } from '@/shared/lib/chat/detect-format';
-import { highlightCode, tryParseJson } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
+import { outputMarkdown, readToolOutput } from '@/shared/lib/chat/tool-output';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 
 interface FallbackOutputProps {
@@ -16,64 +12,16 @@ interface FallbackOutputProps {
   text: string;
 }
 
-/** Render output fallback generik dengan deteksi format otomatis:
- *  markdown → MarkdownRenderer; html → sanitize + inject; text → syntax highlight. */
+/** Blok "Output" generik untuk panel tanpa renderer khusus. Output selalu
+ *  dirender sebagai markdown: envelope XML yang membungkus seluruh output
+ *  dilepas dulu, dan konten verbatim (log/JSON/HTML) dipagari fence supaya
+ *  parser tidak meremasnya jadi satu paragraf. */
 export function FallbackOutput({ text }: FallbackOutputProps) {
   const stripped = useMemo(() => stripAnsiCodes(text), [text]);
-  const format = useMemo(() => detectOutputFormat(stripped), [stripped]);
-  const jsonResult = useMemo(() => (format === 'json' ? tryParseJson(stripped) : null), [format, stripped]);
-  const displayLinesCount = useMemo(() => {
-    if (jsonResult?.isValid && jsonResult.linesCount) return jsonResult.linesCount;
-    return stripped.split(/\r?\n/).length;
-  }, [jsonResult, stripped]);
-
-  const display = useMemo(() => {
-    const source = format === 'json' && jsonResult?.isValid && jsonResult.pretty ? jsonResult.pretty : stripped;
-    return truncateTailLines(source, MAX_OUTPUT_LINES);
-  }, [format, jsonResult, stripped]);
-
-  const isPlainText = format !== 'markdown' && format !== 'json' && format !== 'html';
-  const syntaxReady = useSyntaxReady();
-  const highlightedText = useMemo(
-    () => (isPlainText ? highlightCode(display.text, 'javascript') : ''),
-    [isPlainText, display, syntaxReady]
-  );
-  const copyText = useMemo(
-    () => (jsonResult?.isValid && jsonResult.pretty ? jsonResult.pretty : stripped),
-    [jsonResult, stripped]
-  );
-
-  let body: ReactNode;
-  if (format === 'markdown') {
-    body = (
-      <div className="prose-content max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 text-[12px] leading-relaxed text-ink/85 select-text">
-        <MarkdownRenderer content={display.text} />
-      </div>
-    );
-  } else if (format === 'json') {
-    body = (
-      <JsonCodeBlock
-        jsonString={display.text}
-        maxHeightClass="max-h-72"
-        showHeader={false}
-      />
-    );
-  } else if (format === 'html') {
-    const sanitized = sanitizeHtml(display.text);
-    body = (
-      <div
-        className="max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 text-[12px] leading-relaxed text-ink/85 select-text"
-        dangerouslySetInnerHTML={{ __html: sanitized }}
-      />
-    );
-  } else {
-    body = (
-      <pre
-        className="max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-words text-ink/80 select-text"
-        dangerouslySetInnerHTML={{ __html: highlightedText }}
-      />
-    );
-  }
+  const output = useMemo(() => readToolOutput(stripped), [stripped]);
+  const display = useMemo(() => truncateTailLines(output.content, MAX_OUTPUT_LINES), [output]);
+  const markdown = useMemo(() => outputMarkdown(display.text, output.format), [display, output.format]);
+  const lines = useMemo(() => output.content.split(/\r?\n/).length, [output.content]);
 
   return (
     <div className="space-y-1.5">
@@ -82,26 +30,28 @@ export function FallbackOutput({ text }: FallbackOutputProps) {
           <Code size={11} className="text-ink/40" />
           <span>Output</span>
           <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] text-ink/45">
-            {format}
+            {output.format}
           </span>
-          {displayLinesCount > 1 && (
+          {lines > 1 && (
             <span className="font-mono text-[9px] text-ink/35">
-              {displayLinesCount} lines
+              {lines} lines
             </span>
           )}
         </div>
         <CopyButton
-          text={copyText}
+          text={output.content}
           className="flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
           onClick={(e) => e.stopPropagation()}
           label="Copy"
         />
       </div>
+      {output.envelope && <EnvelopeHeader envelope={output.envelope} />}
       {display.skipped > 0 && (
         <div className="font-mono text-[10px] text-ink/45">… {display.skipped} earlier lines hidden</div>
       )}
-      {body}
+      <div className="max-h-72 overflow-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 select-text">
+        <MarkdownRenderer content={markdown} className="text-[12px] text-ink/85" />
+      </div>
     </div>
   );
 }
-