diff --git a/system-block-ui/.env.example b/system-block-ui/.env.example
new file mode 100644
index 0000000..f85c324
--- /dev/null
+++ b/system-block-ui/.env.example
@@ -0,0 +1 @@
+VITE_TI_RECOMMENDATIONS_URL=http://localhost:8787/api/ti-recommendations
diff --git a/system-block-ui/README.md b/system-block-ui/README.md
index ef9f296..31e48b9 100644
--- a/system-block-ui/README.md
+++ b/system-block-ui/README.md
@@ -29,6 +29,15 @@ bun run dev
 Open the local HTTP URL printed by Vite. Schematic evaluation and evaluated
 downloads are supported when the application is served over HTTP.
 
+TI Support Intelligence recommendations are fetched from the cached Cloudflare
+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.
+
 To build the production application and serve that build locally:
 
 ```bash
@@ -51,6 +60,10 @@ Use `npx vercel --prod` after checking the preview deployment. The configured
 install command performs a frozen install from `system-block-ui/bun.lock`; no
 dashboard build overrides are required.
 
+The deployed cache proxy is used by default. Set
+`VITE_TI_RECOMMENDATIONS_URL` only when a deployment should use another proxy
+endpoint.
+
 The remaining production checks are:
 
 ```bash
diff --git a/system-block-ui/src/components/SubcircuitPickerModal.tsx b/system-block-ui/src/components/SubcircuitPickerModal.tsx
index 8dca615..c775de6 100644
--- a/system-block-ui/src/components/SubcircuitPickerModal.tsx
+++ b/system-block-ui/src/components/SubcircuitPickerModal.tsx
@@ -1,6 +1,11 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import type { SubcircuitDefinition } from "../model";
+import {
+  getTiRecommendations,
+  matchTiRecommendedDefinitionIds,
+  type TiRecommendedPart,
+} from "../ti-recommendations";
 
 export function getSelectableSubcircuitCandidates(
   definitions: readonly SubcircuitDefinition[],
@@ -11,6 +16,7 @@ export function getSelectableSubcircuitCandidates(
       (definition) =>
         definition.id !== currentDefinition.id &&
         definition.canInstantiate !== false &&
+        definition.sourcePath.startsWith("lib/subcircuits/") &&
         definition.category === currentDefinition.category,
     )
     .sort((a, b) => a.title.localeCompare(b.title, "en"));
@@ -29,10 +35,80 @@ export function SubcircuitPickerModal({
   onClose,
   onSelect,
 }: SubcircuitPickerModalProps) {
-  const candidates = useMemo(
-    () => getSelectableSubcircuitCandidates(definitions, currentDefinition),
-    [currentDefinition, definitions],
+  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,
+      currentDefinition,
+    );
+    return [currentDefinition, ...selectable].sort((a, b) =>
+      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>(
+    null,
+  );
+  const [isFetchingRecommendations, setIsFetchingRecommendations] =
+    useState(false);
+  const widerPortfolioParts = useMemo(
+    () =>
+      recommendedParts.filter(
+        (part) =>
+          matchTiRecommendedDefinitionIds(
+            [part.partNumber],
+            recommendationDefinitions,
+          ).size === 0,
+      ),
+    [recommendationDefinitions, recommendedParts],
+  );
+
+  useEffect(() => {
+    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) => {
+        if (!active) return;
+        setRecommendedIds(recommendations.definitionIds);
+        setRecommendedParts(recommendations.parts);
+        setIsFetchingRecommendations(false);
+      },
+      () => {
+        if (active) setIsFetchingRecommendations(false);
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [
+    candidates.length,
+    currentDefinition.category,
+    recommendationDefinitions,
+  ]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -70,25 +146,91 @@ export function SubcircuitPickerModal({
 
         <div className="subcircuit-picker-catalog">
           <div className="subcircuit-picker-results-heading">
-            <span>Available parts</span>
-            <small>{candidates.length}</small>
+            <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>
           </div>
 
           <div className="subcircuit-picker-results">
-            {candidates.map((definition) => (
-              <button
-                aria-label={`Select ${definition.title}`}
-                className="subcircuit-candidate"
-                key={definition.id}
-                onClick={() => onSelect(definition)}
-                type="button"
+            {widerPortfolioParts.length > 0 && (
+              <section
+                aria-label="Recommendations from the wider TI portfolio"
+                className="ti-portfolio-recommendations"
               >
-                <strong>{definition.title}</strong>
-                {definition.description && (
-                  <span>{definition.description}</span>
-                )}
-              </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"
+                    >
+                      <div>
+                        <strong>{part.name}</strong>
+                        <small>Recommended</small>
+                      </div>
+                      {isExpanded && part.description && (
+                        <span>{part.description}</span>
+                      )}
+                    </button>
+                  );
+                })}
+              </section>
+            )}
+
+            {candidates.map((definition) => {
+              const isCurrent = definition.id === currentDefinition.id;
+              return (
+                <button
+                  aria-label={
+                    isCurrent
+                      ? `Current subcircuit: ${definition.title}`
+                      : `Select ${definition.title}`
+                  }
+                  className="subcircuit-candidate"
+                  disabled={isCurrent}
+                  key={definition.id}
+                  onClick={() => onSelect(definition)}
+                  type="button"
+                >
+                  <div className="subcircuit-candidate-heading">
+                    <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 && (
+                    <span>{definition.description}</span>
+                  )}
+                </button>
+              );
+            })}
 
             {candidates.length === 0 && (
               <div className="subcircuit-picker-empty">
diff --git a/system-block-ui/src/styles.css b/system-block-ui/src/styles.css
index 049fa8f..31e1fe4 100644
--- a/system-block-ui/src/styles.css
+++ b/system-block-ui/src/styles.css
@@ -857,6 +857,34 @@ 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;
@@ -865,6 +893,81 @@ button {
   border-radius: 9px;
 }
 
+.ti-portfolio-recommendations {
+  background: #f6fbf8;
+  border-bottom: 1px solid #dce7e1;
+}
+
+.ti-portfolio-recommendations-heading,
+.ti-portfolio-part div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ti-portfolio-recommendations-heading {
+  padding: 9px 15px;
+  color: #22734b;
+  border-bottom: 1px solid #dce7e1;
+}
+
+.ti-portfolio-recommendations-heading strong {
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.ti-portfolio-recommendations-heading small,
+.ti-portfolio-part small {
+  flex: none;
+  padding: 3px 7px;
+  color: #22734b;
+  font-size: 9px;
+  font-weight: 720;
+  line-height: 1.2;
+  background: #edf8f2;
+  border: 1px solid #c8ead8;
+  border-radius: 999px;
+}
+
+.ti-portfolio-part {
+  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;
+}
+
+.ti-portfolio-part + .ti-portfolio-part {
+  border-top: 1px solid #dfe9e3;
+}
+
+.ti-portfolio-part:hover,
+.ti-portfolio-part:focus-visible {
+  background: #edf8f2;
+  outline: none;
+}
+
+.ti-portfolio-part strong {
+  font-size: 13px;
+  font-weight: 720;
+}
+
+.ti-portfolio-part span {
+  color: #697582;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .subcircuit-candidate {
   display: flex;
   width: 100%;
@@ -886,6 +989,39 @@ button {
   font-weight: 720;
 }
 
+.subcircuit-candidate-heading {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.subcircuit-candidate-badges {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+}
+
+.subcircuit-candidate-badges small {
+  flex: none;
+  padding: 3px 7px;
+  color: #22734b;
+  font-size: 9px;
+  font-weight: 720;
+  line-height: 1.2;
+  background: #edf8f2;
+  border: 1px solid #c8ead8;
+  border-radius: 999px;
+}
+
+.subcircuit-candidate-badges small[data-tone="current"] {
+  color: #697582;
+  background: #f1f3f5;
+  border-color: #dce1e7;
+}
+
 .subcircuit-candidate span {
   display: -webkit-box;
   overflow: hidden;
@@ -908,6 +1044,12 @@ button {
   outline: none;
 }
 
+.subcircuit-candidate:disabled {
+  color: #29343f;
+  background: #f8f9fa;
+  cursor: default;
+}
+
 .subcircuit-candidate:focus-visible {
   box-shadow: inset 0 0 0 2px rgb(199 33 39 / 18%);
 }
diff --git a/system-block-ui/src/ti-recommendations.ts b/system-block-ui/src/ti-recommendations.ts
new file mode 100644
index 0000000..a35d90c
--- /dev/null
+++ b/system-block-ui/src/ti-recommendations.ts
@@ -0,0 +1,127 @@
+import type { SubcircuitDefinition } from "./model";
+
+interface TiRecommendationResponse {
+  recommendations?: 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 TiRecommendations {
+  definitionIds: ReadonlySet<string>;
+  parts: readonly TiRecommendedPart[];
+}
+
+const recommendationCache = new Map<
+  string,
+  Promise<readonly TiRecommendedPart[]>
+>();
+
+function normalizePartText(value: string): string {
+  return value
+    .normalize("NFKC")
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]/g, "");
+}
+
+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);
+}
+
+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);
+}
+
+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 parts.then((resolvedParts) => ({
+    definitionIds: matchTiRecommendedDefinitionIds(
+      resolvedParts.map((part) => part.partNumber),
+      definitions,
+    ),
+    parts: resolvedParts,
+  }));
+}