feat(gui): Added handoff llm call log details to gui

apps/gui/src/components/play/HandoffModal.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useState } from "react";
+import type { SimSnapshot } from "@/lib/simulation-types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+
+interface HandoffModalProps {
+  entry: SimSnapshot["log"][number];
+  onClose: () => void;
+}
+
+export function HandoffModal({ entry, onClose }: HandoffModalProps) {
+  const [activeTab, setActiveTab] = useState<"chunks" | "prompt" | "output">(
+    "chunks",
+  );
+
+  const handoffResult = entry.handoffResult;
+  const chunks = handoffResult?.chunks || [];
+
+  const getImportanceColor = (score: number) => {
+    if (score >= 8)
+      return "bg-destructive/10 text-destructive border-destructive/30";
+    if (score >= 5) return "bg-amber-500/10 text-amber-500 border-amber-500/30";
+    return "bg-emerald-500/10 text-emerald-500 border-emerald-500/30";
+  };
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-[800px] sm:max-w-[800px] h-[85vh] overflow-hidden flex flex-col p-0 gap-0 border-2">
+        <DialogHeader className="px-6 pt-5 pb-4 border-b">
+          <DialogTitle className="text-lg font-head tracking-wide text-primary flex items-center justify-between">
+            <span>Memory Handoff Details &mdash; {entry.entityName}</span>
+            {entry.usage && (
+              <span className="text-xs font-mono font-normal text-muted-foreground">
+                {entry.usage.modelName || "Handoff Model"}
+              </span>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Custom Tab Switcher */}
+        <div className="flex border-b bg-muted/20 px-6 py-2 gap-2">
+          <button
+            onClick={() => setActiveTab("chunks")}
+            className={`px-3 py-1.5 text-xs font-medium border transition-all duration-100 ${
+              activeTab === "chunks"
+                ? "border-primary bg-primary/10 text-primary shadow-[1px_1px_0_0_var(--primary)]"
+                : "border-transparent hover:bg-secondary text-muted-foreground"
+            }`}
+          >
+            Promoted Chunks ({chunks.length})
+          </button>
+          <button
+            onClick={() => setActiveTab("prompt")}
+            className={`px-3 py-1.5 text-xs font-medium border transition-all duration-100 ${
+              activeTab === "prompt"
+                ? "border-primary bg-primary/10 text-primary shadow-[1px_1px_0_0_var(--primary)]"
+                : "border-transparent hover:bg-secondary text-muted-foreground"
+            }`}
+          >
+            Raw LLM Prompt
+          </button>
+          <button
+            onClick={() => setActiveTab("output")}
+            className={`px-3 py-1.5 text-xs font-medium border transition-all duration-100 ${
+              activeTab === "output"
+                ? "border-primary bg-primary/10 text-primary shadow-[1px_1px_0_0_var(--primary)]"
+                : "border-transparent hover:bg-secondary text-muted-foreground"
+            }`}
+          >
+            Raw JSON Output
+          </button>
+        </div>
+
+        <div className="overflow-y-auto flex-1 p-6 space-y-4">
+          {activeTab === "chunks" && (
+            <div className="space-y-4">
+              {entry.usage && (
+                <div className="grid grid-cols-3 gap-4 border border-dotted border-border/20 p-3 bg-secondary/10 rounded text-xs font-mono">
+                  <div>
+                    <span className="text-muted-foreground block uppercase tracking-wider text-[10px]">
+                      Input Tokens
+                    </span>
+                    <strong className="text-foreground">
+                      {entry.usage.inputTokens}
+                    </strong>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground block uppercase tracking-wider text-[10px]">
+                      Output Tokens
+                    </span>
+                    <strong className="text-foreground">
+                      {entry.usage.outputTokens}
+                    </strong>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground block uppercase tracking-wider text-[10px]">
+                      Total Tokens
+                    </span>
+                    <strong className="text-foreground">
+                      {entry.usage.totalTokens}
+                    </strong>
+                  </div>
+                </div>
+              )}
+
+              {chunks.length === 0 ? (
+                <div className="border border-dotted border-border/30 p-8 text-center bg-card text-muted-foreground rounded">
+                  <p className="text-sm">
+                    No memories were promoted to the Ledger during this turn.
+                  </p>
+                  <p className="text-xs mt-1">
+                    All working memory buffer entries were summarized or
+                    forgotten.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono">
+                    Ledger Additions
+                  </h3>
+                  {chunks.map((chunk: any, index: number) => (
+                    <div
+                      key={index}
+                      className="border border-border/30 bg-card p-4 shadow-[2px_2px_0_0_var(--border)] relative flex flex-col gap-3"
+                    >
+                      <div className="flex justify-between items-start gap-4">
+                        <div className="flex-1 text-sm text-foreground/90 leading-relaxed font-sans">
+                          {chunk.content}
+                        </div>
+                        <Badge
+                          variant="outline"
+                          className={`font-mono text-xs ${getImportanceColor(chunk.importance)}`}
+                        >
+                          Importance: {chunk.importance}
+                        </Badge>
+                      </div>
+
+                      {chunk.quotes && chunk.quotes.length > 0 && (
+                        <div className="bg-secondary/10 border-l-2 border-primary/50 p-2.5 my-1 text-xs italic text-muted-foreground space-y-1">
+                          {chunk.quotes.map((quote: string, qIdx: number) => (
+                            <div key={qIdx}>&ldquo;{quote}&rdquo;</div>
+                          ))}
+                        </div>
+                      )}
+
+                      <div className="flex flex-wrap gap-2 text-xs pt-2 border-t border-dotted border-border/10">
+                        {chunk.retainInBuffer ? (
+                          <Badge
+                            variant="outline"
+                            className="bg-primary/5 text-primary border-primary/20 text-[10px] font-mono"
+                          >
+                            Pinned in Buffer
+                          </Badge>
+                        ) : (
+                          <Badge
+                            variant="outline"
+                            className="bg-muted text-muted-foreground border-border/20 text-[10px] font-mono"
+                          >
+                            Pruned from Buffer
+                          </Badge>
+                        )}
+
+                        {chunk.involvedEntityIds &&
+                          chunk.involvedEntityIds.length > 0 && (
+                            <div className="flex items-center gap-1.5 ml-auto text-[10px] font-mono text-muted-foreground">
+                              <span>Entities:</span>
+                              {chunk.involvedEntityIds.map((entId: string) => (
+                                <Badge
+                                  key={entId}
+                                  variant="outline"
+                                  className="text-[10px] px-1 py-0 border-border/20 font-mono"
+                                >
+                                  {entId}
+                                </Badge>
+                              ))}
+                            </div>
+                          )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === "prompt" && entry.rawPrompt && (
+            <div className="space-y-4">
+              <div>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono mb-2">
+                  System Prompt
+                </h4>
+                <pre className="p-3 bg-muted rounded text-xs font-mono whitespace-pre-wrap text-foreground border max-h-[250px] overflow-y-auto">
+                  {entry.rawPrompt.systemPrompt}
+                </pre>
+              </div>
+
+              <div>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono mb-2">
+                  User Context (Candidates)
+                </h4>
+                <pre className="p-3 bg-muted rounded text-xs font-mono whitespace-pre-wrap text-foreground border max-h-[350px] overflow-y-auto font-sans leading-relaxed font-mono">
+                  {entry.rawPrompt.userContext}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "output" && (
+            <div className="space-y-2 h-full flex flex-col">
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground font-mono">
+                Raw JSON Output
+              </h4>
+              <pre className="p-3 bg-muted rounded text-xs font-mono whitespace-pre-wrap text-foreground border flex-1 overflow-y-auto max-h-[500px]">
+                {handoffResult
+                  ? JSON.stringify(handoffResult, null, 2)
+                  : "No JSON Output recorded."}
+              </pre>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/gui/src/components/play/PlayView.tsx

@@ -12,6 +12,13 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
 import { PromptModal } from "./PromptModal";
+import { HandoffModal } from "./HandoffModal";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
 import { cn } from "@/lib/utils";
 import { ChevronLeft } from "lucide-react";
 import {
@@ -163,6 +170,9 @@ export function PlayView() {
   const [selectedEntryForModal, setSelectedEntryForModal] = useState<
     SimSnapshot["log"][number] | null
   >(null);
+  const [selectedHandoffForModal, setSelectedHandoffForModal] = useState<
+    SimSnapshot["log"][number] | null
+  >(null);
 
   const logEndRef = useRef<HTMLDivElement>(null);
   const steppingRef = useRef(false);
@@ -490,14 +500,43 @@ export function PlayView() {
                   const playerEntity = snapshot.entities.find(
                     (e) => e.isPlayer,
                   );
-                  return snapshot.log.map((entry, i) => (
-                    <LogEntryCard
-                      key={i}
-                      entry={entry}
-                      onShowPrompt={setSelectedEntryForModal}
-                      isPlayerCard={entry.entityId === playerEntity?.id}
-                    />
-                  ));
+                  return snapshot.log.map((entry, i) => {
+                    if (entry.isHandoff) {
+                      return (
+                        <Alert
+                          key={i}
+                          className="max-w-md border-dashed bg-secondary/10"
+                        >
+                          <div className="flex-1">
+                            <AlertTitle>
+                              Handoff triggered for {entry.entityName}
+                            </AlertTitle>
+                            <AlertDescription>
+                              Memories were transferred from Buffer to Memory
+                              Ledger
+                            </AlertDescription>
+                          </div>
+                          <AlertAction>
+                            <Button
+                              size="xs"
+                              variant="default"
+                              onClick={() => setSelectedHandoffForModal(entry)}
+                            >
+                              View Details
+                            </Button>
+                          </AlertAction>
+                        </Alert>
+                      );
+                    }
+                    return (
+                      <LogEntryCard
+                        key={i}
+                        entry={entry}
+                        onShowPrompt={setSelectedEntryForModal}
+                        isPlayerCard={entry.entityId === playerEntity?.id}
+                      />
+                    );
+                  });
                 })()}
                 {loading && (
                   <div className="flex items-center gap-2 text-sm italic text-muted-foreground p-2 font-mono">
@@ -662,6 +701,13 @@ export function PlayView() {
             onClose={() => setSelectedEntryForModal(null)}
           />
         )}
+
+        {selectedHandoffForModal && (
+          <HandoffModal
+            entry={selectedHandoffForModal}
+            onClose={() => setSelectedHandoffForModal(null)}
+          />
+        )}
       </div>
     </SidebarProvider>
   );

apps/gui/src/components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(
+      "relative w-full rounded border border-border/30 bg-card p-4 text-sm shadow-[2px_2px_0_0_var(--border)] flex flex-col md:flex-row md:items-center gap-3 justify-between",
+      className,
+    )}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn(
+      "font-head font-bold leading-none tracking-tight text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-xs text-muted-foreground mt-1 flex-1 leading-relaxed md:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+const AlertAction = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("shrink-0 flex items-center mt-2 md:mt-0 md:ml-4", className)}
+    {...props}
+  />
+));
+AlertAction.displayName = "AlertAction";
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

apps/gui/src/components/ui/button.tsx

@@ -22,6 +22,7 @@ const buttonVariants = cva(
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 px-3 text-xs",
+        xs: "h-7 px-2.5 text-xs",
         lg: "h-11 px-8 text-base",
         icon: "h-10 w-10",
       },

apps/gui/src/lib/simulation-types.ts

@@ -16,6 +16,8 @@ export interface LogEntry {
   narrativeProse: string;
   intents: IntentInfo[];
   timestamp: string;
+  isHandoff?: boolean;
+  handoffResult?: any;
   rawPrompt?: {
     systemPrompt: string;
     userContext: string;

apps/gui/src/lib/simulation/alias-handoff.ts

@@ -33,11 +33,36 @@ export async function runHandoffResolution(session: SimSession): Promise<void> {
       maxContext,
     );
     if (trigger !== "none") {
-      await handoffEngine.runHandoff(
+      const ran = await handoffEngine.runHandoff(
         entity,
         bufferEntries,
         worldState.clock.get(),
       );
+      if (ran) {
+        const lastCall =
+          session.handoffProvider.lastCalls?.[
+            (session.handoffProvider.lastCalls?.length || 0) - 1
+          ];
+        const info = session.entities.find((e) => e.id === entity.id);
+        const entityName = info?.name || entity.id;
+        session.log.push({
+          turn: session.turn,
+          entityId: entity.id,
+          entityName,
+          narrativeProse: `Handoff triggered for ${entityName}: memories were transferred from Buffer to Memory Ledger`,
+          intents: [],
+          timestamp: worldState.clock.get().toISOString(),
+          isHandoff: true,
+          rawPrompt: lastCall
+            ? {
+                systemPrompt: lastCall.systemPrompt,
+                userContext: lastCall.userContext,
+              }
+            : undefined,
+          usage: lastCall?.usage,
+          handoffResult: lastCall?.response,
+        });
+      }
     }
   }
 }

packages/llm/src/base-provider.ts

@@ -105,6 +105,7 @@ export abstract class BaseLLMProvider implements ILLMProvider {
       systemPrompt: request.systemPrompt,
       userContext: request.userContext,
       usage,
+      response: parsed,
     });
 
     return { success: true, data: parsed, usage };

packages/llm/src/llm.ts

@@ -33,6 +33,7 @@ export interface LLMCallRecord {
     providerInstanceName?: string;
     maxContext?: number;
   };
+  response?: any;
 }
 
 export interface ILLMProvider {

packages/llm/src/providers/mock.ts

@@ -48,15 +48,21 @@ export class MockLLMProvider implements ILLMProvider {
       return { success: false, error: "Mock responses exhausted" };
     }
     const usage = { inputTokens: 100, outputTokens: 50, totalTokens: 150 };
-    this.lastCalls.push({
-      systemPrompt: request.systemPrompt,
-      userContext: request.userContext,
-      usage,
-    });
     try {
       const parsed = request.schema.parse(next);
+      this.lastCalls.push({
+        systemPrompt: request.systemPrompt,
+        userContext: request.userContext,
+        usage,
+        response: parsed,
+      });
       return { success: true, data: parsed, usage };
     } catch (e) {
+      this.lastCalls.push({
+        systemPrompt: request.systemPrompt,
+        userContext: request.userContext,
+        usage,
+      });
       return {
         success: false,
         error: e instanceof Error ? e.message : String(e),

packages/memory/src/handoff.ts

@@ -230,10 +230,12 @@ export class HandoffEngine {
 You are the memory Handoff Engine. Your task is to process a list of recent working memory buffer entries for an entity and select which memories to promote to the long-term Ledger, and which to forget or summarize.
 
 Instructions:
-1. **Cluster** related consecutive buffer entries into high-level narrative beats or events (e.g. a full back-and-forth conversation or a single physical action and its outcome). Combine them into a single summary chunk.
-2. **Write in the third-person** for the "content" of each chunk (e.g. "John asked Mary for the key, and Mary reluctantly handed it over").
+1. **Cluster** related consecutive buffer entries into high-level narrative beats or events (e.g. physical action and its outcome or trivial actions). Combine them into a single chunk.
+2. **Write in the third-person** for the events of other entities. (eg. Alan did that. Sarah did this, etc)
+2. **Write in first-person for the events that you yourself did. (eg. I did this, I did that.)
 3. **verbatim Quotes**: Extract verbatim, high-salience quotes from dialogue if relevant. Do not modify or invent quotes.
 4. **Determine Importance**: Assign an importance score from 1 (trivial, e.g. waking up) to 10 (life-altering, e.g. witnessing a crime).
+4. Discard small body movements like looking around, sighing, etc that do not contextually hold any meaning after it is done.
 5. **Involved Entities**: Identify all entity IDs involved in the memories in this chunk.
 6. **Retain in Buffer (Pinning)**: If a beat represents an unresolved high-stakes situation (e.g. a standing threat, an unanswered accusation, an ongoing chase or conflict), set "retainInBuffer" to true so it remains in the working memory buffer for immediate context. Otherwise, set it to false so it is safely pruned from the buffer.
 7. **Exclude stage business**: Glances, sighs, ambient noticing, and irrelevant sensory details should be ignored and not included in any promoted chunk. They will be forgotten.