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.

plugin/ui/viewer.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;