Add TypeScript Agent SDK reference documentation

- Introduced comprehensive API reference for the TypeScript Agent SDK.
- Documented installation instructions for the SDK.
- Detailed the main functions: `query()`, `tool()`, and `createSdkMcpServer()`.
- Defined various types including `Options`, `Query`, `AgentDefinition`, and more.
- Included message types and their structures, such as `SDKMessage`, `SDKAssistantMessage`, and `SDKUserMessage`.
- Explained hook types and their usage within the SDK.
- Provided detailed documentation for tool input and output types.
- Added sections on permission types and other relevant types for better clarity.

src/ui/viewer-template.html

@@ -578,8 +578,8 @@
       color: var(--color-text-primary);
     }
 
-    /* Expanded content container */
-    .card-expanded-content {
+    /* Verbose content container (narrative and facts - collapsible) */
+    .card-verbose-content {
       margin-top: 16px;
       padding-top: 16px;
       border-top: 1px solid var(--color-border-primary);
@@ -597,6 +597,48 @@
       }
     }
 
+    /* Metadata grid (concepts, files, session info - always visible) */
+    .card-metadata-grid {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border-primary);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      grid-auto-flow: dense;
+    }
+
+    /* Files section spans full width */
+    .card-metadata-grid .card-section.files-section {
+      grid-column: 1 / -1;
+    }
+
+    /* Responsive: stack on smaller screens */
+    @media (max-width: 768px) {
+      .card-metadata-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .card-metadata-grid .card-section.files-section {
+        grid-column: 1;
+      }
+    }
+
+    /* Compact section styling for grid items */
+    .card-section.compact {
+      margin-bottom: 0;
+    }
+
+    .card-section.compact .section-header {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    .card-section.compact .section-content {
+      padding-left: 0;
+      font-size: 12px;
+    }
+
     /* Section styling */
     .card-section {
       margin-bottom: 16px;

src/ui/viewer/components/ObservationCard.tsx

@@ -6,6 +6,30 @@ interface ObservationCardProps {
   observation: Observation;
 }
 
+// Helper to strip project root from file paths
+function stripProjectRoot(filePath: string): string {
+  // Try to extract relative path by finding common project markers
+  const markers = ['/Scripts/', '/src/', '/plugin/', '/docs/'];
+
+  for (const marker of markers) {
+    const index = filePath.indexOf(marker);
+    if (index !== -1) {
+      // Keep the marker and everything after it
+      return filePath.substring(index + 1);
+    }
+  }
+
+  // Fallback: if path contains project name, strip everything before it
+  const projectIndex = filePath.indexOf('claude-mem/');
+  if (projectIndex !== -1) {
+    return filePath.substring(projectIndex + 'claude-mem/'.length);
+  }
+
+  // If no markers found, return basename or original path
+  const parts = filePath.split('/');
+  return parts.length > 3 ? parts.slice(-3).join('/') : filePath;
+}
+
 export function ObservationCard({ observation }: ObservationCardProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const date = formatDate(observation.created_at_epoch);
@@ -13,11 +37,14 @@ export function ObservationCard({ observation }: ObservationCardProps) {
   // Parse JSON fields
   const facts = observation.facts ? JSON.parse(observation.facts) : [];
   const concepts = observation.concepts ? JSON.parse(observation.concepts) : [];
-  const filesRead = observation.files_read ? JSON.parse(observation.files_read) : [];
-  const filesModified = observation.files_modified ? JSON.parse(observation.files_modified) : [];
+  const filesRead = observation.files_read ? JSON.parse(observation.files_read).map(stripProjectRoot) : [];
+  const filesModified = observation.files_modified ? JSON.parse(observation.files_modified).map(stripProjectRoot) : [];
+
+  // Check if there's verbose content to expand
+  const hasVerboseContent = observation.narrative || facts.length > 0;
 
   return (
-    <div className={`card ${isExpanded ? 'card-expanded' : ''}`}>
+    <div className="card">
       {/* Header - always visible */}
       <div className="card-header">
         <span className={`card-type type-${observation.type}`}>
@@ -35,18 +62,19 @@ export function ObservationCard({ observation }: ObservationCardProps) {
       {/* Metadata + Expand button - always visible */}
       <div className="card-meta">
         <span>#{observation.id} • {date}</span>
-        <button
-          className="expand-toggle"
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded ? '▲ Less' : '▼ More'}
-        </button>
+        {hasVerboseContent && (
+          <button
+            className="expand-toggle"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? '▲ Less' : '▼ More'}
+          </button>
+        )}
       </div>
 
-      {/* Expanded content - conditional */}
-      {isExpanded && (
-        <div className="card-expanded-content">
-
+      {/* Collapsible verbose content - Narrative and Facts */}
+      {isExpanded && hasVerboseContent && (
+        <div className="card-verbose-content">
           {/* Narrative Section */}
           {observation.narrative && (
             <div className="card-section">
@@ -68,61 +96,63 @@ export function ObservationCard({ observation }: ObservationCardProps) {
               </ul>
             </div>
           )}
+        </div>
+      )}
 
-          {/* Concepts Section */}
-          {concepts.length > 0 && (
-            <div className="card-section">
-              <div className="section-header">🏷️ Concepts</div>
-              <div className="section-content concepts">
-                {concepts.map((concept: string, i: number) => (
-                  <span key={i} className="concept-tag">{concept}</span>
-                ))}
-              </div>
+      {/* Always visible metadata grid - Concepts, Files, Session Info */}
+      <div className="card-metadata-grid">
+        {/* Concepts Section */}
+        {concepts.length > 0 && (
+          <div className="card-section compact">
+            <div className="section-header">Concepts</div>
+            <div className="section-content concepts">
+              {concepts.map((concept: string, i: number) => (
+                <span key={i} className="concept-tag">{concept}</span>
+              ))}
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Files Section */}
-          {(filesRead.length > 0 || filesModified.length > 0) && (
-            <div className="card-section">
-              <div className="section-header">📁 Files</div>
-              <div className="section-content files">
-                {filesRead.length > 0 && (
-                  <div className="file-group">
-                    <div className="file-group-label">📖 Read:</div>
-                    {filesRead.map((file: string, i: number) => (
-                      <div key={i} className="file-path">{file}</div>
-                    ))}
-                  </div>
-                )}
-                {filesModified.length > 0 && (
-                  <div className="file-group">
-                    <div className="file-group-label">✏️ Modified:</div>
-                    {filesModified.map((file: string, i: number) => (
-                      <div key={i} className="file-path">{file}</div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
+        {/* Session Info Section */}
+        <div className="card-section compact">
+          <div className="section-header">Session Info</div>
+          <div className="section-content session-info">
+            {observation.prompt_number && (
+              <span>Prompt #{observation.prompt_number}</span>
+            )}
+            {observation.sdk_session_id && (
+              <span className="session-id">
+                Session: {observation.sdk_session_id.substring(0, 8)}...
+              </span>
+            )}
+          </div>
+        </div>
 
-          {/* Session Info Section */}
-          <div className="card-section">
-            <div className="section-header">🔗 Session Info</div>
-            <div className="section-content session-info">
-              {observation.prompt_number && (
-                <span>Prompt #{observation.prompt_number}</span>
+        {/* Files Section - spans full width */}
+        {(filesRead.length > 0 || filesModified.length > 0) && (
+          <div className="card-section compact files-section">
+            <div className="section-header">Files</div>
+            <div className="section-content files">
+              {filesRead.length > 0 && (
+                <div className="file-group">
+                  <div className="file-group-label">Read:</div>
+                  {filesRead.map((file: string, i: number) => (
+                    <div key={i} className="file-path">{file}</div>
+                  ))}
+                </div>
               )}
-              {observation.sdk_session_id && (
-                <span className="session-id">
-                  Session: {observation.sdk_session_id.substring(0, 8)}...
-                </span>
+              {filesModified.length > 0 && (
+                <div className="file-group">
+                  <div className="file-group-label">Modified:</div>
+                  {filesModified.map((file: string, i: number) => (
+                    <div key={i} className="file-path">{file}</div>
+                  ))}
+                </div>
               )}
             </div>
           </div>
-
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }