feat: make investigation history readable

components/reasoning-workspace.jsx

@@ -193,29 +193,33 @@ function CurrentFocusCard({ graph }) {
   );
 }
 
-// ── Investigation history card ────────────────────────────────
+// ── Investigation history card (readable notebook style) ───────
 function InvestigationHistoryCard({ turn }) {
-  const qSnippet = turn.question.length > 80
+  const isCollapsed = turn._collapsed;
-    ? turn.question.slice(0, 80) + "…"
-    : turn.question;
 
   return (
-    <details className="rounded-lg border border-gray-100 bg-gray-50/60 px-4 py-3" key={turn.id}>
+    <details
-      <summary className="cursor-pointer text-xs font-semibold uppercase tracking-wide text-gray-400 hover:text-gray-600">
+      className="rounded-lg border border-gray-100 bg-gray-50/60"
-        {new Date(turn.timestamp).toLocaleString(undefined, {
+      key={turn.id}
-          month: "short",
+      open={!isCollapsed}
-          day: "numeric",
+    >
-          hour: "2-digit",
+      <summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900">
-          minute: "2-digit",
+        {isCollapsed ? "Q: " : "✓ "}
-        })} — {qSnippet}
+        {turn.question.length > 60 && !isCollapsed
+          ? turn.question.slice(0, 60) + "…"
+          : turn.question}
+        {!isCollapsed && (
+          <span className="ml-2 text-xs font-normal text-gray-400">— answered</span>
+        )}
       </summary>
-      <div className="mt-2 space-y-2 text-sm">
+
-        <p><strong>Question</strong></p>
+      <div className="px-4 pb-3 pt-1 space-y-2">
-        <p>{turn.question}</p>
+        <p><strong>Your answer</strong></p>
-        <p><strong>You answered</strong></p>
         <p className="text-gray-700">{turn.answer}</p>
+
         {turn.acknowledgement && (
           <>
+            <hr className="border-gray-200" />
             <p><strong>What changed</strong></p>
             <p className="italic text-gray-500">{turn.acknowledgement}</p>
           </>
@@ -229,6 +233,8 @@ function InvestigationHistoryCard({ turn }) {
 function InvestigationHistory({ turns }) {
   if (!turns || turns.length === 0) return null;
 
+  const latestId = turns[turns.length - 1].id;
+
   return (
     <div className="space-y-3">
       <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400">
@@ -236,7 +242,7 @@ function InvestigationHistory({ turns }) {
       </h2>
       <div className="space-y-2">
         {turns.map((turn) => (
-          <InvestigationHistoryCard key={turn.id} turn={turn} />
+          <InvestigationHistoryCard key={turn.id} turn={{ ...turn, _collapsed: turn.id !== latestId }} />
         ))}
       </div>
     </div>
@@ -403,7 +409,6 @@ export default function ReasoningWorkspace({
       question: q,
       answer: answerText.trim(),
       acknowledgement: null,
-      timestamp: Date.now(),
     };
   };