From 37725ac022060b5829bd815988e008e01c82338c Mon Sep 17 00:00:00 2001
From: imrishabh18 <belikerishabh@gmail.com>
Date: Thu, 3 Sep 2026 20:06:46 +0530
Subject: [PATCH] Show TI MCP conversation in subcircuit picker

---
 system-block-ui/README.md                     |   7 +-
 .../src/components/SubcircuitPickerModal.tsx  | 184 ++++++++----------
 system-block-ui/src/styles.css                | 162 ++++++++-------
 system-block-ui/src/ti-recommendations.ts     | 161 +++++----------
 4 files changed, 223 insertions(+), 291 deletions(-)

diff --git a/system-block-ui/README.md b/system-block-ui/README.md
index 31e48b9..f385bb4 100644
--- a/system-block-ui/README.md
+++ b/system-block-ui/README.md
@@ -34,9 +34,10 @@ Worker at <https://ti-mcp-cache-proxy.seve.workers.dev>. No TI credentials are
 stored in this application. To use a locally running proxy instead, copy
 `.env.example` to `.env.local` before starting Vite.
 
-In the subcircuit picker, click a recommended TI portfolio part to reveal its
-description. Recommendation descriptions stay collapsed until their part is
-clicked.
+The subcircuit picker keeps the repository's selectable TI subcircuits separate
+from the upstream exchange. Expand **TI MCP conversation** to see the exact
+request prompt and literal tool-response text. The MCP output is not converted
+into selectable parts or recommendation badges.
 
 To build the production application and serve that build locally:
 
diff --git a/system-block-ui/src/components/SubcircuitPickerModal.tsx b/system-block-ui/src/components/SubcircuitPickerModal.tsx
index c775de6..8f00163 100644
--- a/system-block-ui/src/components/SubcircuitPickerModal.tsx
+++ b/system-block-ui/src/components/SubcircuitPickerModal.tsx
@@ -2,9 +2,8 @@ import { useEffect, useMemo, useState } from "react";
 
 import type { SubcircuitDefinition } from "../model";
 import {
-  getTiRecommendations,
-  matchTiRecommendedDefinitionIds,
-  type TiRecommendedPart,
+  getTiMcpConversation,
+  type TiMcpConversation,
 } from "../ti-recommendations";
 
 export function getSelectableSubcircuitCandidates(
@@ -35,16 +34,6 @@ export function SubcircuitPickerModal({
   onClose,
   onSelect,
 }: SubcircuitPickerModalProps) {
-  const recommendationDefinitions = useMemo(
-    () =>
-      definitions.filter(
-        (definition) =>
-          definition.canInstantiate !== false &&
-          definition.sourcePath.startsWith("lib/subcircuits/") &&
-          definition.category === currentDefinition.category,
-      ),
-    [currentDefinition.category, definitions],
-  );
   const candidates = useMemo(() => {
     const selectable = getSelectableSubcircuitCandidates(
       definitions,
@@ -54,61 +43,42 @@ export function SubcircuitPickerModal({
       a.title.localeCompare(b.title, "en"),
     );
   }, [currentDefinition, definitions]);
-  const [recommendedIds, setRecommendedIds] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-  const [recommendedParts, setRecommendedParts] = useState<
-    readonly TiRecommendedPart[]
-  >([]);
-  const [expandedPartNumber, setExpandedPartNumber] = useState<string | null>(
+  const [isConversationOpen, setIsConversationOpen] = useState(false);
+  const [conversation, setConversation] = useState<TiMcpConversation | null>(
     null,
   );
-  const [isFetchingRecommendations, setIsFetchingRecommendations] =
-    useState(false);
-  const widerPortfolioParts = useMemo(
-    () =>
-      recommendedParts.filter(
-        (part) =>
-          matchTiRecommendedDefinitionIds(
-            [part.partNumber],
-            recommendationDefinitions,
-          ).size === 0,
-      ),
-    [recommendationDefinitions, recommendedParts],
-  );
+  const [isFetchingConversation, setIsFetchingConversation] = useState(false);
+  const [conversationUnavailable, setConversationUnavailable] = useState(false);
+
+  useEffect(() => {
+    setIsConversationOpen(false);
+    setConversation(null);
+    setIsFetchingConversation(false);
+    setConversationUnavailable(false);
+  }, [currentDefinition.category]);
 
   useEffect(() => {
+    if (!isConversationOpen || conversation) return;
+
     let active = true;
-    setRecommendedIds(new Set());
-    setRecommendedParts([]);
-    setExpandedPartNumber(null);
-    if (candidates.length === 0) {
-      setIsFetchingRecommendations(false);
-      return;
-    }
-    setIsFetchingRecommendations(true);
-    void getTiRecommendations(
-      currentDefinition.category,
-      recommendationDefinitions,
-    ).then(
-      (recommendations) => {
+    setConversationUnavailable(false);
+    setIsFetchingConversation(true);
+    void getTiMcpConversation(currentDefinition.category).then(
+      (result) => {
         if (!active) return;
-        setRecommendedIds(recommendations.definitionIds);
-        setRecommendedParts(recommendations.parts);
-        setIsFetchingRecommendations(false);
+        setConversation(result);
+        setIsFetchingConversation(false);
       },
       () => {
-        if (active) setIsFetchingRecommendations(false);
+        if (!active) return;
+        setConversationUnavailable(true);
+        setIsFetchingConversation(false);
       },
     );
     return () => {
       active = false;
     };
-  }, [
-    candidates.length,
-    currentDefinition.category,
-    recommendationDefinitions,
-  ]);
+  }, [conversation, currentDefinition.category, isConversationOpen]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -147,57 +117,64 @@ export function SubcircuitPickerModal({
         <div className="subcircuit-picker-catalog">
           <div className="subcircuit-picker-results-heading">
             <span>Available subcircuits</span>
-            <div className="subcircuit-picker-results-summary">
-              {isFetchingRecommendations && (
-                <span
-                  aria-live="polite"
-                  className="ti-recommendation-fetching"
-                  role="status"
-                >
-                  <i aria-hidden="true" />
-                  Fetching TI recommendations…
-                </span>
-              )}
-              <small>{candidates.length}</small>
-            </div>
+            <small>{candidates.length}</small>
           </div>
 
           <div className="subcircuit-picker-results">
-            {widerPortfolioParts.length > 0 && (
-              <section
-                aria-label="Recommendations from the wider TI portfolio"
-                className="ti-portfolio-recommendations"
+            <section className="ti-mcp-conversation">
+              <button
+                aria-expanded={isConversationOpen}
+                className="ti-mcp-conversation-toggle"
+                onClick={() => setIsConversationOpen((open) => !open)}
+                type="button"
               >
-                <div className="ti-portfolio-recommendations-heading">
-                  <strong>TI portfolio recommendations</strong>
-                  <small>{widerPortfolioParts.length}</small>
-                </div>
-                {widerPortfolioParts.map((part) => {
-                  const isExpanded = expandedPartNumber === part.partNumber;
-                  return (
-                    <button
-                      aria-expanded={isExpanded}
-                      className="ti-portfolio-part"
-                      key={part.partNumber}
-                      onClick={() =>
-                        setExpandedPartNumber(
-                          isExpanded ? null : part.partNumber,
-                        )
-                      }
-                      type="button"
+                <strong>TI MCP conversation</strong>
+                <span aria-hidden="true">›</span>
+              </button>
+
+              {isConversationOpen && (
+                <div className="ti-mcp-conversation-content">
+                  {isFetchingConversation && (
+                    <div
+                      aria-live="polite"
+                      className="ti-mcp-conversation-fetching"
+                      role="status"
                     >
-                      <div>
-                        <strong>{part.name}</strong>
-                        <small>Recommended</small>
-                      </div>
-                      {isExpanded && part.description && (
-                        <span>{part.description}</span>
-                      )}
-                    </button>
-                  );
-                })}
-              </section>
-            )}
+                      <i aria-hidden="true" />
+                      Contacting TI MCP…
+                    </div>
+                  )}
+
+                  {conversationUnavailable && (
+                    <p className="ti-mcp-conversation-error">
+                      TI MCP conversation is temporarily unavailable. Collapse
+                      and reopen to retry.
+                    </p>
+                  )}
+
+                  {conversation && (
+                    <>
+                      <section className="ti-mcp-message">
+                        <header>
+                          <strong>Request</strong>
+                          <small>{conversation.tool}</small>
+                        </header>
+                        <pre>{conversation.request}</pre>
+                      </section>
+                      <section className="ti-mcp-message" data-kind="response">
+                        <header>
+                          <strong>Response</strong>
+                        </header>
+                        <pre>
+                          {conversation.response ||
+                            "TI MCP returned an empty response."}
+                        </pre>
+                      </section>
+                    </>
+                  )}
+                </div>
+              )}
+            </section>
 
             {candidates.map((definition) => {
               const isCurrent = definition.id === currentDefinition.id;
@@ -218,11 +195,6 @@ export function SubcircuitPickerModal({
                     <strong>{definition.title}</strong>
                     <div className="subcircuit-candidate-badges">
                       {isCurrent && <small data-tone="current">Current</small>}
-                      {recommendedIds.has(definition.id) && (
-                        <small title="Recommended by TI Support Intelligence">
-                          Recommended
-                        </small>
-                      )}
                     </div>
                   </div>
                   {definition.description && (
diff --git a/system-block-ui/src/styles.css b/system-block-ui/src/styles.css
index 31e1fe4..3b9ec93 100644
--- a/system-block-ui/src/styles.css
+++ b/system-block-ui/src/styles.css
@@ -857,34 +857,6 @@ button {
   border-radius: 999px;
 }
 
-.subcircuit-picker-results-summary,
-.ti-recommendation-fetching {
-  display: flex;
-  align-items: center;
-}
-
-.subcircuit-picker-results-summary {
-  gap: 10px;
-}
-
-.ti-recommendation-fetching {
-  gap: 6px;
-  color: #22734b;
-  font-size: 10px;
-  font-weight: 650;
-  letter-spacing: 0;
-  text-transform: none;
-}
-
-.ti-recommendation-fetching i {
-  width: 11px;
-  height: 11px;
-  border: 2px solid #c8ead8;
-  border-top-color: #22734b;
-  border-radius: 50%;
-  animation: spin 0.75s linear infinite;
-}
-
 .subcircuit-picker-results {
   min-height: 0;
   margin: 0 18px 20px;
@@ -893,79 +865,129 @@ button {
   border-radius: 9px;
 }
 
-.ti-portfolio-recommendations {
+.ti-mcp-conversation {
   background: #f6fbf8;
   border-bottom: 1px solid #dce7e1;
 }
 
-.ti-portfolio-recommendations-heading,
-.ti-portfolio-part div {
+.ti-mcp-conversation-toggle {
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  padding: 11px 15px;
+  color: #22734b;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
 }
 
-.ti-portfolio-recommendations-heading {
-  padding: 9px 15px;
-  color: #22734b;
-  border-bottom: 1px solid #dce7e1;
+.ti-mcp-conversation-toggle:hover,
+.ti-mcp-conversation-toggle:focus-visible {
+  background: #edf8f2;
+  outline: none;
 }
 
-.ti-portfolio-recommendations-heading strong {
+.ti-mcp-conversation-toggle strong {
   font-size: 10px;
   font-weight: 750;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
-.ti-portfolio-recommendations-heading small,
-.ti-portfolio-part small {
+.ti-mcp-conversation-toggle > span {
   flex: none;
-  padding: 3px 7px;
+  font-size: 20px;
+  line-height: 1;
+  transition: transform 120ms ease;
+}
+
+.ti-mcp-conversation-toggle[aria-expanded="true"] > span {
+  transform: rotate(90deg);
+}
+
+.ti-mcp-conversation-content {
+  display: grid;
+  gap: 12px;
+  padding: 12px 15px 15px;
+  background: #fbfdfc;
+  border-top: 1px solid #dce7e1;
+}
+
+.ti-mcp-conversation-fetching {
+  display: flex;
+  align-items: center;
+  gap: 7px;
   color: #22734b;
-  font-size: 9px;
-  font-weight: 720;
-  line-height: 1.2;
-  background: #edf8f2;
-  border: 1px solid #c8ead8;
-  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 650;
 }
 
-.ti-portfolio-part {
+.ti-mcp-conversation-fetching i {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #c8ead8;
+  border-top-color: #22734b;
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+.ti-mcp-conversation-error {
+  margin: 0;
+  color: #922329;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.ti-mcp-message {
+  display: grid;
+  gap: 6px;
+}
+
+.ti-mcp-message header {
   display: flex;
-  width: 100%;
-  min-height: 50px;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4px;
-  padding: 12px 15px;
-  color: #29343f;
-  text-align: left;
-  background: #fbfdfc;
-  border: 0;
-  cursor: pointer;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  color: #5f6b78;
 }
 
-.ti-portfolio-part + .ti-portfolio-part {
-  border-top: 1px solid #dfe9e3;
+.ti-mcp-message header strong {
+  font-size: 9px;
+  font-weight: 770;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.ti-portfolio-part:hover,
-.ti-portfolio-part:focus-visible {
-  background: #edf8f2;
-  outline: none;
+.ti-mcp-message header small {
+  overflow: hidden;
+  color: #7a8591;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ti-portfolio-part strong {
-  font-size: 13px;
-  font-weight: 720;
+.ti-mcp-message pre {
+  max-height: 180px;
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  color: #34414e;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  background: white;
+  border: 1px solid #dce7e1;
+  border-radius: 6px;
 }
 
-.ti-portfolio-part span {
-  color: #697582;
-  font-size: 12px;
-  line-height: 1.4;
+.ti-mcp-message[data-kind="response"] pre {
+  max-height: 240px;
 }
 
 .subcircuit-candidate {
diff --git a/system-block-ui/src/ti-recommendations.ts b/system-block-ui/src/ti-recommendations.ts
index a35d90c..ebe93c4 100644
--- a/system-block-ui/src/ti-recommendations.ts
+++ b/system-block-ui/src/ti-recommendations.ts
@@ -1,127 +1,64 @@
-import type { SubcircuitDefinition } from "./model";
-
-interface TiRecommendationResponse {
-  recommendations?: unknown;
+interface TiMcpConversationResponse {
+  conversation?: unknown;
 }
 
 const TI_RECOMMENDATIONS_URL =
   import.meta.env.VITE_TI_RECOMMENDATIONS_URL?.trim() ||
   "https://ti-mcp-cache-proxy.seve.workers.dev/api/ti-recommendations";
 
-export interface TiRecommendedPart {
-  description: string;
-  name: string;
-  partNumber: string;
+export interface TiMcpConversation {
+  request: string;
+  response: string;
+  tool: string;
 }
 
-export interface TiRecommendations {
-  definitionIds: ReadonlySet<string>;
-  parts: readonly TiRecommendedPart[];
-}
+const conversationCache = new Map<string, Promise<TiMcpConversation>>();
 
-const recommendationCache = new Map<
-  string,
-  Promise<readonly TiRecommendedPart[]>
->();
+export function getTiMcpConversation(
+  category: string,
+): Promise<TiMcpConversation> {
+  let conversation = conversationCache.get(category);
+  if (conversation) return conversation;
 
-function normalizePartText(value: string): string {
-  return value
-    .normalize("NFKC")
-    .toLowerCase()
-    .replaceAll(/[^a-z0-9]/g, "");
-}
+  const request = (async () => {
+    const query = new URLSearchParams({
+      category,
+      format: "conversation",
+    });
+    const endpoint = new URL(TI_RECOMMENDATIONS_URL);
+    endpoint.search = query.toString();
+    const response = await fetch(endpoint);
+    if (!response.ok) {
+      throw new Error(`TI MCP request failed with HTTP ${response.status}.`);
+    }
 
-function partNumberTokens(title: string): readonly string[] {
-  return (title.match(/[a-z0-9]+(?:[-/][a-z0-9]+)*/gi) ?? [])
-    .filter((token) => /\d/.test(token))
-    .map(normalizePartText)
-    .filter((token) => token.length >= 4);
-}
+    const payload = (await response.json()) as TiMcpConversationResponse;
+    if (!payload.conversation || typeof payload.conversation !== "object") {
+      throw new Error("TI MCP response did not include a conversation.");
+    }
 
-export function matchTiRecommendedDefinitionIds(
-  partNumbers: readonly string[],
-  definitions: readonly SubcircuitDefinition[],
-): ReadonlySet<string> {
-  const normalizedRecommendation = normalizePartText(partNumbers.join(" "));
-  const matches = definitions
-    .filter((definition) => {
-      const normalizedTitle = normalizePartText(definition.title);
-      if (
-        normalizedTitle.length >= 8 &&
-        normalizedRecommendation.includes(normalizedTitle)
-      ) {
-        return true;
-      }
-      return partNumberTokens(definition.title).some((token) =>
-        normalizedRecommendation.includes(token),
-      );
-    })
-    .map((definition) => definition.id);
-  return new Set(matches);
-}
+    const value = payload.conversation as Record<string, unknown>;
+    if (
+      typeof value.request !== "string" ||
+      typeof value.response !== "string" ||
+      typeof value.tool !== "string"
+    ) {
+      throw new Error("TI MCP conversation is malformed.");
+    }
 
-export function getTiRecommendations(
-  category: string,
-  definitions: readonly SubcircuitDefinition[],
-): Promise<TiRecommendations> {
-  let parts = recommendationCache.get(category);
-  if (!parts) {
-    const request = (async () => {
-      const query = new URLSearchParams({
-        category,
-        format: "details",
-      });
-      const endpoint = new URL(TI_RECOMMENDATIONS_URL);
-      endpoint.search = query.toString();
-      const response = await fetch(endpoint);
-      if (!response.ok) {
-        throw new Error(
-          `TI recommendations failed with HTTP ${response.status}.`,
-        );
-      }
-      const payload = (await response.json()) as TiRecommendationResponse;
-      if (Array.isArray(payload.recommendations)) {
-        return payload.recommendations
-          .filter((recommendation): recommendation is Record<string, unknown> =>
-            Boolean(recommendation && typeof recommendation === "object"),
-          )
-          .map((recommendation) => ({
-            description:
-              typeof recommendation.description === "string"
-                ? recommendation.description.trim()
-                : "",
-            name:
-              typeof recommendation.name === "string"
-                ? recommendation.name.trim()
-                : "",
-            partNumber:
-              typeof recommendation.partNumber === "string"
-                ? recommendation.partNumber.trim()
-                : "",
-          }))
-          .filter((recommendation) => recommendation.partNumber)
-          .map((recommendation) => ({
-            ...recommendation,
-            name: recommendation.name || recommendation.partNumber,
-          }))
-          .slice(0, 5);
-      }
-      return [];
-    })();
-    parts = request;
-    recommendationCache.set(category, request);
-    void request.catch(() => {
-      if (recommendationCache.get(category) === request) {
-        recommendationCache.delete(category);
-      }
-    });
-  }
+    return {
+      request: value.request,
+      response: value.response,
+      tool: value.tool,
+    };
+  })();
 
-  return parts.then((resolvedParts) => ({
-    definitionIds: matchTiRecommendedDefinitionIds(
-      resolvedParts.map((part) => part.partNumber),
-      definitions,
-    ),
-    parts: resolvedParts,
-  }));
+  conversation = request;
+  conversationCache.set(category, request);
+  void request.catch(() => {
+    if (conversationCache.get(category) === request) {
+      conversationCache.delete(category);
+    }
+  });
+  return conversation;
 }