@springbrand/message-panel 0.1.3-alpha.33 → 0.1.3-alpha.34

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -34,11 +34,7 @@ import {
   SuggestionsBlock,
   type ApprovalDecision,
 } from "./rich-blocks";
-import {
-  ToolGroupRow,
-  WorkDescriptionRow,
-  WorkTraceDisclosure,
-} from "./tool-rows";
+import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
 import { CloudOsActivityIndicator } from "./activity-indicator";
 import { ProductGeneration } from "./image-generation";
 import { GenerationLoader } from "./loading-state";
@@ -52,14 +48,10 @@ import {
   deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
-  partitionAssistantBlocks,
   rhythmTopClass,
   type CloudOsEntry,
   type CloudOsActionPresentation,
 } from "./transcript-model";
-import { useDisclosureExpandedKeys } from "./use-lifecycle-disclosure";
-
-const NO_RUNNING_DISCLOSURES: ReadonlySet<string> = new Set();
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 
@@ -353,6 +345,12 @@ export function CloudOsChatMessages({
   const scrollRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [expandedCompactions, setExpandedCompactions] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
   const { copied, copy } = useCopyAction();
   const isActive =
     turnActive ?? (status === "submitted" || status === "streaming");
@@ -367,74 +365,6 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
-  const workEntryKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant" &&
-            partitionAssistantBlocks(entry.blocks).work.length > 0
-            ? [entry.key]
-            : [],
-        ),
-      ),
-    [entries],
-  );
-  const runningWorkEntryKeys = useMemo(() => {
-    const keys = new Set<string>();
-    if (!isActive) return keys;
-    const entry = entries.findLast(
-      (candidate) => candidate.type === "assistant",
-    );
-    if (entry?.type !== "assistant") return keys;
-    const { work, content } = partitionAssistantBlocks(entry.blocks);
-    if (work.length > 0 && !content.some((block) => block.kind === "text")) {
-      keys.add(entry.key);
-    }
-    return keys;
-  }, [entries, isActive]);
-  const toolCallKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant"
-            ? entry.blocks.flatMap((block) =>
-                block.kind === "toolGroup" ? [block.group.key] : [],
-              )
-            : [],
-        ),
-      ),
-    [entries],
-  );
-  const runningToolCallKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "assistant" && runningWorkEntryKeys.has(entry.key)
-            ? entry.blocks.flatMap((block) =>
-                block.kind === "toolGroup" && block.group.hasRunning
-                  ? [block.group.key]
-                  : [],
-              )
-            : [],
-        ),
-    ),
-    [entries, runningWorkEntryKeys],
-  );
-  const compactionKeys = useMemo(
-    () =>
-      new Set(
-        entries.flatMap((entry) =>
-          entry.type === "compactionBoundary" ? [entry.key] : [],
-        ),
-      ),
-    [entries],
-  );
-  const [expandedToolCalls, toggleToolCall] =
-    useDisclosureExpandedKeys(toolCallKeys, runningToolCallKeys);
-  const [expandedWorkEntries, toggleWorkEntry] =
-    useDisclosureExpandedKeys(workEntryKeys, runningWorkEntryKeys);
-  const [expandedCompactions, toggleCompaction] =
-    useDisclosureExpandedKeys(compactionKeys, NO_RUNNING_DISCLOSURES);
 
   const entryTopClasses = useMemo(
     () =>
@@ -444,6 +374,24 @@ export function CloudOsChatMessages({
     [entries],
   );
 
+  const toggleToolCall = useCallback((key: string) => {
+    setExpandedToolCalls((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const toggleCompaction = useCallback((key: string) => {
+    setExpandedCompactions((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
   const syncScrollButton = useCallback(() => {
     const element = scrollRef.current;
     if (!element) return;
@@ -584,7 +532,7 @@ export function CloudOsChatMessages({
                     <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
                   </div>
                   {expanded && (
-                    <div className="cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
+                    <div className="themed-surface-inset cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
                       <MarkdownMessage
                         message={entry.summary}
                         resolveUrl={resolveUrl}
@@ -597,21 +545,16 @@ export function CloudOsChatMessages({
               );
             }
 
-            const { work: workBlocks, content: contentBlocks } =
-              partitionAssistantBlocks(entry.blocks);
-            const workGroups = workBlocks.flatMap((block) =>
-              block.kind === "toolGroup" ? [block.group] : [],
-            );
-            const hasNarrative = contentBlocks.some(
+            const hasNarrative = entry.blocks.some(
               (block) => block.kind === "text",
             );
-            const insufficientFailures = contentBlocks.filter(
+            const insufficientFailures = entry.blocks.filter(
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "failed" &&
                 block.presentation.failureCode === "insufficient_credits",
             );
             const firstInsufficientFailure = insufficientFailures[0];
-            const hasCompletedAction = contentBlocks.some(
+            const hasCompletedAction = entry.blocks.some(
               (block) => block.kind === "actionPresentation" &&
                 block.presentation.state === "ready",
             );
@@ -619,83 +562,17 @@ export function CloudOsChatMessages({
             return (
               <div
                 key={entry.key}
-                className={`${topClass} min-w-0 w-full max-w-[860px]`}
+                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
               >
-                <div className="group/agentMessage relative space-y-4">
-                  {workBlocks.length > 0 && (
-                    <WorkTraceDisclosure
-                      durationMs={entry.durationMs}
-                      groups={workGroups}
-                      completed={!runningWorkEntryKeys.has(entry.key)}
-                      open={expandedWorkEntries.has(entry.key)}
-                      onToggle={() => toggleWorkEntry(entry.key)}
-                    >
-                      {workBlocks.map((block) => {
-                        switch (block.kind) {
-                          case "reasoning":
-                          case "text":
-                            return (
-                              <WorkDescriptionRow
-                                key={block.key}
-                                text={block.text}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                                resolveUrl={resolveUrl}
-                              />
-                            );
-                          case "toolGroup":
-                            return (
-                              <ToolGroupRow
-                                key={block.key}
-                                group={block.group}
-                                open={expandedToolCalls.has(block.group.key)}
-                                expandedKeys={expandedToolCalls}
-                                onToggle={toggleToolCall}
-                              />
-                            );
-                          case "plan":
-                            return (
-                              <PlanBlock
-                                key={block.key}
-                                steps={block.steps}
-                                running={
-                                  runningWorkEntryKeys.has(entry.key) && block.running
-                                }
-                                showCollapsedSummary={false}
-                              />
-                            );
-                          case "parallel":
-                            return (
-                              <ParallelBlock
-                                key={block.key}
-                                label={block.label}
-                                tools={block.tools}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                              />
-                            );
-                          case "subagents":
-                            return (
-                              <SubAgentsBlock
-                                key={block.key}
-                                agents={block.agents}
-                                running={runningWorkEntryKeys.has(entry.key)}
-                              />
-                            );
-                          default:
-                            return null;
-                        }
-                      })}
-                    </WorkTraceDisclosure>
-                  )}
-
-                  {contentBlocks.map((block) => {
+                <div className="group/agentMessage relative space-y-1.5">
+                  {entry.blocks.map((block) => {
                     switch (block.kind) {
                       case "reasoning":
                         return (
-                          <WorkDescriptionRow
+                          <ThinkingTraceRow
                             key={block.key}
-                            text={block.text}
+                            reasoning={block.text}
                             running={block.running}
-                            resolveUrl={resolveUrl}
                           />
                         );
                       case "text": {
@@ -733,9 +610,7 @@ export function CloudOsChatMessages({
                           <PlanBlock
                             key={block.key}
                             steps={block.steps}
-                            running={
-                              runningWorkEntryKeys.has(entry.key) && block.running
-                            }
+                            running={block.running}
                           />
                         );
                       case "askUser":
@@ -747,7 +622,13 @@ export function CloudOsChatMessages({
                           />
                         );
                       case "suggestions":
-                        return null;
+                        return (
+                          <SuggestionsBlock
+                            key={block.key}
+                            items={block.items}
+                            onSuggestion={(text) => onSuggestion?.(text)}
+                          />
+                        );
                       case "schedule":
                         return (
                           <ScheduleBlock
@@ -784,16 +665,11 @@ export function CloudOsChatMessages({
                             key={block.key}
                             label={block.label}
                             tools={block.tools}
-                            running={runningWorkEntryKeys.has(entry.key)}
                           />
                         );
                       case "subagents":
                         return (
-                          <SubAgentsBlock
-                            key={block.key}
-                            agents={block.agents}
-                            running={runningWorkEntryKeys.has(entry.key)}
-                          />
+                          <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
                       case "image":
                         {
@@ -874,7 +750,7 @@ export function CloudOsChatMessages({
                   )}
 
                   {hasNarrative && entry.timestamp !== undefined && (
-                    <div className="mt-0.5 -ml-1 flex items-center gap-1">
+                    <div className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100">
                       <Tooltip
                         content={copied === entry.copyText ? "Copied!" : "Copy message"}
                         asChild
@@ -899,16 +775,6 @@ export function CloudOsChatMessages({
                       </Tooltip>
                     </div>
                   )}
-
-                  {contentBlocks.map((block) =>
-                    block.kind === "suggestions" ? (
-                      <SuggestionsBlock
-                        key={block.key}
-                        items={block.items}
-                        onSuggestion={(text) => onSuggestion?.(text)}
-                      />
-                    ) : null
-                  )}
                 </div>
               </div>
             );