fix paper

HINDSIGHT_PAPER.md

@@ -808,38 +808,6 @@ Users may provide background in second person ("You are..."), but internal stora
 
 **Trajectory**: The opinion evolved from strong conviction (0.7 → 0.85) to weaker, more malleable belief (0.55) as evidence accumulated.
 
-## 12. Use Cases and Real-World Deployment
-
-### 12.1 Multi-Persona Sports Commentary (Production Deployment)
-
-**Application**: AI-generated sports analysis and entertainment content with multiple agent personalities
-
-**Real-World System**: A production sports content platform where AI agents with distinct personalities co-host episodic shows discussing team performance, game analysis, and sports debates.
-
-**System Architecture**:
-- **Multiple Banks**: Each bank has unique personality traits and sports background
-- **Continuous Memory**: Banks maintain persistent team/player assessments across episodes spanning months
-- **Opinion Evolution**: As games occur and statistics accumulate, banks automatically update beliefs through reinforcement
-- **Personality-Driven Commentary**: The same game results generate different perspectives based on bank traits
-
-**Key Benefits Observed**:
-1. **Viewer Engagement**: Improved audience retention with "personality diversity" as primary appeal
-2. **Content Consistency**: Banks maintain recognizable voices across episodes without manual tuning
-3. **Scalability**: New banks can be added with distinct personalities without retraining
-4. **Opinion Richness**: Opinion networks capture nuanced, evolving assessments
-
-This deployment validates that personality-driven opinion systems can operate at production scale for content generation requiring consistent yet adaptive perspectives.
-
-### 12.2 Additional Use Cases
-
-**Customer Support**: Multi-agent systems with specialized personas (empathetic, analytical, creative)
-
-**Consistent Character AI**: Conversational AI characters for entertainment or education with stable personality
-
-**Explainable AI**: Systems requiring transparent decision-making where personality traits explain reasoning style
-
----
-
 # Part III: Unified Hindsight Architecture
 
 ## 13. Integration: TEMPR + CARA

hindsight-control-plane/src/components/data-view.tsx

@@ -307,12 +307,13 @@ export function DataView({ factType }: DataViewProps) {
                 </div>
               </div>
 
-              {/* Memory Detail Panel for Graph View */}
+              {/* Memory Detail Panel for Graph View - Fixed on Right */}
               {selectedGraphNode && (
-                <div className="w-1/3">
+                <div className="fixed right-0 top-0 h-screen w-[420px] bg-card border-l-2 border-primary shadow-2xl z-50 overflow-y-auto animate-in slide-in-from-right duration-300 ease-out">
                   <MemoryDetailPanel
                     memory={selectedGraphNode}
                     onClose={() => setSelectedGraphNode(null)}
+                    inPanel
                   />
                 </div>
               )}
@@ -872,13 +873,13 @@ function TimelineView({ data }: { data: any }) {
         </div>
       </div>
 
-      {/* Detail Panel */}
+      {/* Detail Panel - Fixed on Right */}
       {selectedItem && (
-        <div className="w-1/3">
+        <div className="fixed right-0 top-0 h-screen w-[420px] bg-card border-l-2 border-primary shadow-2xl z-50 overflow-y-auto animate-in slide-in-from-right duration-300 ease-out">
           <MemoryDetailPanel
             memory={selectedItem}
             onClose={() => setSelectedItem(null)}
-            compact
+            inPanel
           />
         </div>
       )}

hindsight-control-plane/src/components/memory-detail-panel.tsx

@@ -9,12 +9,14 @@ interface MemoryDetailPanelProps {
   memory: any;
   onClose: () => void;
   compact?: boolean;
+  inPanel?: boolean;
 }
 
 export function MemoryDetailPanel({
   memory,
   onClose,
   compact = false,
+  inPanel = false,
 }: MemoryDetailPanelProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [modalType, setModalType] = useState<'document' | 'chunk' | null>(null);
@@ -47,10 +49,147 @@ export function MemoryDetailPanel({
 
   if (!memory) return null;
 
-  const padding = compact ? 'p-3' : 'p-4';
-  const titleSize = compact ? 'text-sm' : 'text-lg';
   const labelSize = compact ? 'text-[10px]' : 'text-xs';
   const textSize = compact ? 'text-xs' : 'text-sm';
+
+  // Panel mode: no outer border/bg, larger padding, prominent close button
+  if (inPanel) {
+    return (
+      <>
+        <div className="p-5">
+          {/* Header with close button */}
+          <div className="flex justify-between items-center mb-6 pb-4 border-b border-border">
+            <div>
+              <h3 className="text-xl font-bold text-foreground">Memory Details</h3>
+              <p className="text-sm text-muted-foreground mt-1">Full memory content and metadata</p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onClose}
+              className="h-9 px-3 gap-2"
+            >
+              <X className="h-4 w-4" />
+              Close
+            </Button>
+          </div>
+
+          <div className="space-y-5">
+            {/* Full Text */}
+            <div>
+              <div className="text-xs font-bold text-muted-foreground uppercase mb-2">Full Text</div>
+              <div className="text-sm whitespace-pre-wrap leading-relaxed">{memory.text}</div>
+            </div>
+
+            {/* Context */}
+            {memory.context && (
+              <div className="p-4 bg-muted/50 rounded-lg">
+                <div className="text-xs font-bold text-muted-foreground uppercase mb-2">Context</div>
+                <div className="text-sm">{memory.context}</div>
+              </div>
+            )}
+
+            {/* Dates */}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="p-4 bg-muted/50 rounded-lg">
+                <div className="text-xs font-bold text-muted-foreground uppercase mb-2">Occurred</div>
+                <div className="text-sm font-medium">
+                  {memory.occurred_start
+                    ? new Date(memory.occurred_start).toLocaleString()
+                    : 'N/A'}
+                </div>
+              </div>
+              <div className="p-4 bg-muted/50 rounded-lg">
+                <div className="text-xs font-bold text-muted-foreground uppercase mb-2">Mentioned</div>
+                <div className="text-sm font-medium">
+                  {memory.mentioned_at
+                    ? new Date(memory.mentioned_at).toLocaleString()
+                    : 'N/A'}
+                </div>
+              </div>
+            </div>
+
+            {/* Entities */}
+            {memory.entities && (
+              <div>
+                <div className="text-xs font-bold text-muted-foreground uppercase mb-3">Entities</div>
+                <div className="flex flex-wrap gap-2">
+                  {(Array.isArray(memory.entities) ? memory.entities : String(memory.entities).split(', ')).map((entity: any, i: number) => {
+                    const entityText = typeof entity === 'string' ? entity : (entity?.name || JSON.stringify(entity));
+                    return (
+                      <span
+                        key={i}
+                        className="text-sm px-3 py-1.5 rounded-full bg-primary/10 text-primary font-medium"
+                      >
+                        {entityText}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* ID */}
+            <div className="p-4 bg-muted/50 rounded-lg">
+              <div className="text-xs font-bold text-muted-foreground uppercase mb-2">Memory ID</div>
+              <div className="flex items-center gap-2">
+                <code className="text-xs font-mono break-all flex-1 text-muted-foreground">{memory.id}</code>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 flex-shrink-0"
+                  onClick={() => copyToClipboard(memory.id)}
+                >
+                  {copiedId === memory.id ? (
+                    <Check className="h-4 w-4 text-green-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            {/* Document/Chunk buttons */}
+            {(memory.document_id || memory.chunk_id) && (
+              <div className="flex gap-3 pt-2">
+                {memory.document_id && (
+                  <Button
+                    onClick={() => openDocumentModal(memory.document_id)}
+                    variant="outline"
+                    className="flex-1"
+                  >
+                    View Document
+                  </Button>
+                )}
+                {memory.chunk_id && (
+                  <Button
+                    onClick={() => openChunkModal(memory.chunk_id)}
+                    variant="outline"
+                    className="flex-1"
+                  >
+                    View Chunk
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Document/Chunk Modal */}
+        {modalType && modalId && (
+          <DocumentChunkModal
+            type={modalType}
+            id={modalId}
+            onClose={closeModal}
+          />
+        )}
+      </>
+    );
+  }
+
+  // Original compact/default mode
+  const padding = compact ? 'p-3' : 'p-4';
+  const titleSize = compact ? 'text-sm' : 'text-lg';
   const gap = compact ? 'space-y-2' : 'space-y-4';
 
   return (

hindsight-control-plane/src/components/search-debug-view.tsx

@@ -508,8 +508,8 @@ export function SearchDebugView() {
   }
 
   return (
-    <div className="flex gap-4">
-      <div className={selectedMemory ? 'flex-1' : 'w-full'}>
+    <div>
+      <div className="w-full">
         <div className="mb-4">
           <Button
             onClick={addPane}
@@ -836,13 +836,13 @@ export function SearchDebugView() {
         </div>
       </div>
 
-      {/* Memory Detail Panel */}
+      {/* Memory Detail Panel - Fixed on Right */}
       {selectedMemory && (
-        <div className="w-80 flex-shrink-0">
+        <div className="fixed right-0 top-0 h-screen w-[420px] bg-card border-l-2 border-primary shadow-2xl z-50 overflow-y-auto animate-in slide-in-from-right duration-300 ease-out">
           <MemoryDetailPanel
             memory={selectedMemory}
             onClose={() => setSelectedMemory(null)}
-            compact
+            inPanel
           />
         </div>
       )}