Merge pull request #18 from tyulyukov/marcode/explored-files-visibility

feat(chat): add exploration card for file reads and searches

Author: tyulyukov

apps/web/src/components/ChatView.tsx

@@ -1987,7 +1987,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
       );
       if (!trigger || !scrollContainer.contains(trigger)) return;
       if (trigger.closest("[data-scroll-anchor-ignore]")) {
-        trigger = trigger.parentElement?.closest<HTMLElement>("[data-scroll-anchor-target]") ?? null;
+        trigger =
+          trigger.parentElement?.closest<HTMLElement>("[data-scroll-anchor-target]") ?? null;
         if (!trigger || !scrollContainer.contains(trigger)) return;
       }
 

apps/web/src/components/chat/ExplorationCard.tsx

@@ -0,0 +1,90 @@
+import { ChevronDownIcon, ChevronRightIcon, EyeIcon, SearchIcon } from "lucide-react";
+import { memo, useState } from "react";
+import { cn } from "~/lib/utils";
+import type { WorkLogEntry } from "../../session-logic";
+
+interface ExplorationCardProps {
+  entries: ReadonlyArray<WorkLogEntry>;
+  isLive: boolean;
+}
+
+const READ_LABEL_RE = /^Read\b/i;
+
+function isReadEntry(entry: WorkLogEntry): boolean {
+  return entry.requestKind === "file-read" || READ_LABEL_RE.test(entry.toolTitle ?? entry.label);
+}
+
+function explorationEntryHeading(entry: WorkLogEntry): string {
+  const raw = (entry.toolTitle ?? entry.label).trim();
+  if (raw.length === 0) return "Explored";
+  return `${raw.charAt(0).toUpperCase()}${raw.slice(1)}`;
+}
+
+function ExplorationEntryRow(props: { entry: WorkLogEntry }) {
+  const { entry } = props;
+  const isRead = isReadEntry(entry);
+  const Icon = isRead ? EyeIcon : SearchIcon;
+  const heading = explorationEntryHeading(entry);
+  const preview = entry.detail;
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg px-1 py-0.5">
+      <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground/50">
+        <Icon className="size-3" />
+      </span>
+      <p className="min-w-0 flex-1 truncate text-[11px] leading-5 text-muted-foreground/70">
+        <span className="text-foreground/70">{heading}</span>
+        {preview && <span className="text-muted-foreground/45"> — {preview}</span>}
+      </p>
+    </div>
+  );
+}
+
+export const ExplorationCard = memo(function ExplorationCard(props: ExplorationCardProps) {
+  const { entries, isLive } = props;
+  const [expanded, setExpanded] = useState(false);
+
+  if (entries.length === 0) return null;
+
+  const readCount = entries.filter(isReadEntry).length;
+  const searchCount = entries.length - readCount;
+
+  const headerParts: string[] = [];
+  if (readCount > 0) headerParts.push(`${readCount} file${readCount !== 1 ? "s" : ""}`);
+  if (searchCount > 0) headerParts.push(`${searchCount} search${searchCount !== 1 ? "es" : ""}`);
+  const summary = headerParts.join(", ");
+
+  const verb = isLive ? "Exploring" : "Explored";
+  const ToggleIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <div
+      data-scroll-anchor-target
+      className={cn(
+        "overflow-hidden rounded-xl border border-border/40 border-l-2 bg-card/25",
+        isLive ? "border-l-blue-400/40" : "border-l-blue-400/20",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((prev) => !prev)}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors duration-100 hover:bg-muted/20"
+      >
+        <ToggleIcon className="size-3 shrink-0 text-muted-foreground/50" />
+        <SearchIcon className="size-3.5 shrink-0 text-blue-400/50" />
+        <span className="min-w-0 flex-1 truncate text-[11px] text-foreground/80">
+          {verb} {summary}
+        </span>
+        {isLive && <span className="size-1.5 shrink-0 animate-pulse rounded-full bg-blue-400/60" />}
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border/20 px-2 py-1">
+          {entries.map((entry) => (
+            <ExplorationEntryRow key={entry.id} entry={entry} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -62,6 +62,7 @@ import {
 } from "./userMessageTerminalContexts";
 import { InlineDiffPreview } from "./InlineDiffPreview";
 import { FileChangeCard } from "./FileChangeCard";
+import { ExplorationCard } from "./ExplorationCard";
 
 const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
 
@@ -73,6 +74,7 @@ const DIFF_PREVIEW_MAX_HEIGHT = 260;
 const DIFF_HUNK_SPACING = 8;
 const AGENT_GROUP_HEADER_HEIGHT = 32;
 const FILE_CHANGE_CARD_COLLAPSED_HEIGHT = 64;
+const EXPLORATION_CARD_COLLAPSED_HEIGHT = 36;
 
 type TimelineEntry = ReturnType<typeof deriveTimelineEntries>[number];
 type TimelineMessage = Extract<TimelineEntry, { kind: "message" }>["message"];
@@ -105,6 +107,13 @@ type TimelineRow =
       createdAt: string;
       entry: TimelineWorkEntry;
     }
+  | {
+      kind: "exploration";
+      id: string;
+      createdAt: string;
+      entries: TimelineWorkEntry[];
+      isLive: boolean;
+    }
   | { kind: "working"; id: string; createdAt: string | null };
 
 interface TimelineRowContentProps {
@@ -213,6 +222,8 @@ const TimelineRowContent = memo(function TimelineRowContent({
 
       {row.kind === "file-change" && <FileChangeCard diffPreviews={row.entry.diffPreviews ?? []} />}
 
+      {row.kind === "exploration" && <ExplorationCard entries={row.entries} isLive={row.isLive} />}
+
       {row.kind === "message" &&
         row.message.role === "user" &&
         (() => {
@@ -564,6 +575,9 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         let pendingWork: TimelineWorkEntry[] = [];
         let pendingWorkFirstId: string | null = null;
         let pendingWorkFirstCreatedAt: string | null = null;
+        let pendingExploration: TimelineWorkEntry[] = [];
+        let pendingExplorationFirstId: string | null = null;
+        let pendingExplorationFirstCreatedAt: string | null = null;
         let cursor = index;
 
         const flushPendingWork = () => {
@@ -580,6 +594,21 @@ export const MessagesTimeline = memo(function MessagesTimeline({
           }
         };
 
+        const flushPendingExploration = () => {
+          if (pendingExploration.length > 0) {
+            nextRows.push({
+              kind: "exploration",
+              id: pendingExplorationFirstId!,
+              createdAt: pendingExplorationFirstCreatedAt!,
+              entries: pendingExploration,
+              isLive: false,
+            });
+            pendingExploration = [];
+            pendingExplorationFirstId = null;
+            pendingExplorationFirstCreatedAt = null;
+          }
+        };
+
         while (cursor < timelineEntries.length) {
           const current = timelineEntries[cursor];
           if (!current || current.kind !== "work") break;
@@ -590,13 +619,22 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 
           if (isFileChange) {
             flushPendingWork();
+            flushPendingExploration();
             nextRows.push({
               kind: "file-change",
               id: current.id,
               createdAt: current.createdAt,
               entry: current.entry,
             });
+          } else if (isExplorationEntry(current.entry)) {
+            flushPendingWork();
+            if (pendingExploration.length === 0) {
+              pendingExplorationFirstId = current.id;
+              pendingExplorationFirstCreatedAt = current.createdAt;
+            }
+            pendingExploration.push(current.entry);
           } else {
+            flushPendingExploration();
             if (pendingWork.length === 0) {
               pendingWorkFirstId = current.id;
               pendingWorkFirstCreatedAt = current.createdAt;
@@ -606,6 +644,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
           cursor += 1;
         }
         flushPendingWork();
+        flushPendingExploration();
         index = cursor - 1;
         continue;
       }
@@ -634,6 +673,16 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     }
 
     if (isWorking) {
+      for (let i = nextRows.length - 1; i >= 0; i--) {
+        const r = nextRows[i];
+        if (!r) break;
+        if (r.kind === "exploration") {
+          nextRows[i] = { ...r, isLive: true };
+          break;
+        }
+        if (r.kind === "message" || r.kind === "proposed-plan") break;
+      }
+
       nextRows.push({
         kind: "working",
         id: "working-indicator-row",
@@ -719,6 +768,7 @@ function estimateRowHeight(
   if (row.kind === "proposed-plan") return estimateTimelineProposedPlanHeight(row.proposedPlan);
   if (row.kind === "working") return 40;
   if (row.kind === "file-change") return FILE_CHANGE_CARD_COLLAPSED_HEIGHT;
+  if (row.kind === "exploration") return EXPLORATION_CARD_COLLAPSED_HEIGHT;
   return estimateTimelineMessageHeight(row.message, { timelineWidthPx });
 }
 
@@ -954,6 +1004,28 @@ function workToneIcon(tone: TimelineWorkEntry["tone"]): {
   };
 }
 
+const EXPLORATION_LABEL_RE =
+  /^(Read|Search(ed)?|Glob(bed)?|Grep(ped)?|List(ed)?|Find|Found|View(ed)?|Inspect(ed)?)\b/i;
+
+function isExplorationEntry(entry: TimelineWorkEntry): boolean {
+  if (entry.requestKind === "file-change" || entry.requestKind === "command") return false;
+  if (
+    entry.itemType === "file_change" ||
+    entry.itemType === "command_execution" ||
+    entry.itemType === "web_search"
+  )
+    return false;
+  if (entry.command) return false;
+  if ((entry.diffPreviews?.length ?? 0) > 0) return false;
+  if (entry.agentGroup) return false;
+
+  if (entry.requestKind === "file-read") return true;
+  if (entry.itemType === "image_view") return true;
+
+  const heading = (entry.toolTitle ?? entry.label).trim();
+  return EXPLORATION_LABEL_RE.test(heading);
+}
+
 function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
   if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";
   if (tone === "tool") return "text-muted-foreground/70";