Lab 3 Terminal UI

src/components/labs/LabContent.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Fragment, useEffect, useRef, useState } from "react";
+import { Lab3TerminalFrame } from "~/components/labs/Lab3TerminalFrame";
 import { Objective5Chat } from "~/components/labs/Objective5Chat";
 import { QuantizationGridExplorer } from "~/components/labs/QuantizationGridExplorer";
 import { QuantizationExplorer } from "~/components/labs/QuantizationExplorer";
@@ -33,6 +34,7 @@ const quantizationExplorerToken = "<div data-quantization-explorer></div>";
 const quantizationGridExplorerToken =
   "<div data-quantization-grid-explorer></div>";
 const objective5ChatToken = "<div data-objective5-chat></div>";
+const lab3TerminalToken = "<div data-lab3-terminal></div>";
 
 function looksLikeCliCommand(commandText: string, className: string) {
   if (cliLanguagePattern.test(className)) return true;
@@ -197,7 +199,7 @@ export function LabContent({ className, html }: LabContentProps) {
   const renderedContent = html
     .split(
       new RegExp(
-        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)})`,
+        `(${escapeRegex(quantizationExplorerToken)}|${escapeRegex(quantizationGridExplorerToken)}|${escapeRegex(objective5ChatToken)}|${escapeRegex(lab3TerminalToken)})`,
         "g",
       ),
     )
@@ -219,6 +221,10 @@ export function LabContent({ className, html }: LabContentProps) {
         return <Objective5Chat key={`objective5-chat-${index}`} />;
       }
 
+      if (part === lab3TerminalToken) {
+        return <Lab3TerminalFrame key={`lab3-terminal-${index}`} />;
+      }
+
       return (
         <Fragment key={`html-segment-${index}`}>
           <div dangerouslySetInnerHTML={{ __html: part }} />