Lab 3 Terminal UI

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_LAB3_TERMINAL_PATH=/wetty

README.md

@@ -18,6 +18,23 @@ npm run dev
 
 3. Open `http://localhost:3000`.
 
+## Lab 3 Web Terminal
+
+Set `NEXT_PUBLIC_LAB3_TERMINAL_PATH` to the WeTTY endpoint used by your deployment. The default expected path is `/wetty`, and `.env.example` includes that value. Local environments can also provide a full URL such as `http://127.0.0.1:7681/wetty`.
+
+The Lab 3 widget assumes:
+
+- WeTTY runs on the lab host and is bound to `127.0.0.1`
+- the public proxy forwards `/wetty` to the local WeTTY port
+- WebSocket upgrade happens at the reverse proxy
+- WeTTY is launched as root so it can present `/bin/login` locally instead of SSH
+
+Example service command:
+
+```bash
+wetty --host 127.0.0.1 --port 3001 --base /wetty --allow-iframe
+```
+
 ## Project Structure
 
 ```text

content/labs/lab-3-llama-cpp-and-ollama.md

@@ -24,7 +24,11 @@ In this lab, we will:
   <strong>Execute</strong> sections require running commands and producing output.
 </div>
 
-To start this lab, you'll need CLI access:
+To start this lab, use the embedded terminal below. It connects to the same lab machine in your browser and should prompt you to log in with the default `student` account.
+
+<div data-lab3-terminal></div>
+
+If the embedded terminal is unavailable, you can still fall back to:
 
 - SSH - <IP>:22
 - All necessary artifacts are in the `lab3` folder

docs/lab3-terminal-deployment.md

@@ -0,0 +1,32 @@
+# Lab 3 Embedded Terminal Deployment
+
+Lab 3 now expects a same-origin WeTTY endpoint mounted at `/wetty` by default.
+
+## Runtime Contract
+
+- Run WeTTY on the lab host, bound to `127.0.0.1`
+- Mount it behind the same public origin as the Next.js app
+- Let the reverse proxy handle WebSocket upgrade for `/wetty`
+- Launch WeTTY as root so it uses `/bin/login` locally
+- Keep SSH available as a fallback path, not the primary student UX
+
+Example launch command:
+
+```bash
+wetty --host 127.0.0.1 --port 3001 --base /wetty --allow-iframe
+```
+
+## Proxmox VM Shape
+
+- Install WeTTY as a system service
+- Keep it bound to localhost only
+- Reverse proxy `/wetty` to the local WeTTY port over HTTPS
+
+## Docker Shape
+
+- Include WeTTY in the lab image
+- Include the `login` and PAM pieces needed for `/bin/login`
+- Run WeTTY under an init or supervisor process
+- Reverse proxy `/wetty` to the local WeTTY port over HTTPS
+
+If a specific container image cannot support `/bin/login`, the operational fallback is WeTTY SSH mode to localhost.

src/components/labs/Lab3TerminalFrame.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  LAB3_DEFAULT_TERMINAL_PATH,
+  Lab3TerminalFrame,
+  getLab3TerminalPath,
+} from "~/components/labs/Lab3TerminalFrame";
+
+describe("getLab3TerminalPath", () => {
+  it("falls back to the default same-origin terminal path", () => {
+    expect(getLab3TerminalPath()).toBe(LAB3_DEFAULT_TERMINAL_PATH);
+    expect(getLab3TerminalPath("")).toBe(LAB3_DEFAULT_TERMINAL_PATH);
+  });
+
+  it("normalizes relative and absolute terminal values to a same-origin path", () => {
+    expect(getLab3TerminalPath("wetty")).toBe("/wetty");
+    expect(getLab3TerminalPath("https://labs.example.com/wetty?view=lab3")).toBe(
+      "https://labs.example.com/wetty?view=lab3",
+    );
+  });
+});
+
+describe("Lab3TerminalFrame", () => {
+  const originalEnvValue = process.env.NEXT_PUBLIC_LAB3_TERMINAL_PATH;
+
+  afterEach(() => {
+    process.env.NEXT_PUBLIC_LAB3_TERMINAL_PATH = originalEnvValue;
+  });
+
+  it("renders the embedded terminal with the configured path", () => {
+    process.env.NEXT_PUBLIC_LAB3_TERMINAL_PATH = "lab-terminal";
+
+    render(<Lab3TerminalFrame />);
+
+    const frame = screen.getByTitle("Lab 3 terminal session");
+    expect(frame).toHaveAttribute("src", "/lab-terminal");
+    expect(
+      screen.getAllByRole("link", { name: "Open in New Tab" }).every((link) => {
+        return link.getAttribute("href") === "/lab-terminal";
+      }),
+    ).toBe(true);
+    expect(screen.getAllByText("/home/student/lab3")).toHaveLength(2);
+  });
+
+  it("toggles the dock open and closed", () => {
+    render(<Lab3TerminalFrame srcPath="/wetty" />);
+
+    const toggle = screen.getAllByRole("button", { name: /open terminal|hide terminal|lab 3 terminal/i })[0];
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders fallback guidance alongside the embedded frame", () => {
+    render(<Lab3TerminalFrame srcPath="/wetty" />);
+
+    expect(screen.getByText(/If the terminal page does not appear/i)).toBeInTheDocument();
+  });
+});

src/components/labs/Lab3TerminalFrame.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+
+export const LAB3_DEFAULT_TERMINAL_PATH = "/wetty";
+
+export function getLab3TerminalPath(envValue?: string) {
+  const trimmedValue = envValue?.trim();
+
+  if (!trimmedValue) {
+    return LAB3_DEFAULT_TERMINAL_PATH;
+  }
+
+  if (/^https?:\/\//i.test(trimmedValue)) {
+    return trimmedValue;
+  }
+
+  return trimmedValue.startsWith("/") ? trimmedValue : `/${trimmedValue}`;
+}
+
+type Lab3TerminalFrameProps = {
+  srcPath?: string;
+};
+
+export function Lab3TerminalFrame({
+  srcPath = getLab3TerminalPath(process.env.NEXT_PUBLIC_LAB3_TERMINAL_PATH),
+}: Lab3TerminalFrameProps) {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
+  const terminalPath = useMemo(() => getLab3TerminalPath(srcPath), [srcPath]);
+
+  function handleFrameLoad() {
+    const frame = frameRef.current;
+
+    try {
+      const frameDocument = frame?.contentDocument;
+      const title = frameDocument?.title ?? "";
+      const bodyText = frameDocument?.body?.textContent?.replace(/\s+/g, " ").trim() ?? "";
+
+      if (
+        /\b404\b/i.test(title) ||
+        /\b404\b/i.test(bodyText) ||
+        /This page could not be found/i.test(bodyText)
+      ) {
+        setStatus("error");
+        return;
+      }
+    } catch {
+      // Ignore cross-document reads and treat the frame as successfully loaded.
+    }
+
+    setStatus("ready");
+  }
+
+  return (
+    <>
+      <section className="lab3-terminal-inline" data-widget-enhanced="true">
+        <div>
+          <p className="lab3-terminal-inline__eyebrow">Lab 3 Terminal</p>
+          <h3>Use the lab shell directly in your browser</h3>
+          <p className="lab3-terminal-inline__lede">
+            The terminal is docked to the bottom of the page. Expand it with the
+            arrow when you&apos;re ready to work from <code>/home/student/lab3</code>.
+          </p>
+        </div>
+
+        <div className="lab3-terminal-inline__actions">
+          <button
+            aria-controls="lab3-terminal-dock-panel"
+            aria-expanded={isOpen}
+            className="lab3-terminal-inline__button"
+            onClick={() => setIsOpen((current) => !current)}
+            type="button"
+          >
+            {isOpen ? "Hide Terminal" : "Open Terminal"}
+          </button>
+
+          <a
+            className="lab3-terminal-inline__link"
+            href={terminalPath}
+            rel="noreferrer"
+            target="_blank"
+          >
+            Open in New Tab
+          </a>
+        </div>
+      </section>
+
+      <section
+        className={`lab3-terminal-dock${isOpen ? " is-open" : " is-closed"}`}
+        data-widget-enhanced="true"
+      >
+        <button
+          aria-controls="lab3-terminal-dock-panel"
+          aria-expanded={isOpen}
+          className="lab3-terminal-dock__toggle"
+          onClick={() => setIsOpen((current) => !current)}
+          type="button"
+        >
+          <span>Lab 3 Terminal</span>
+          <span aria-hidden="true" className="lab3-terminal-dock__toggle-icon">
+            {isOpen ? "▾" : "▴"}
+          </span>
+        </button>
+
+        <div className="lab3-terminal-dock__panel" id="lab3-terminal-dock-panel">
+          <div className="lab3-terminal-dock__header">
+            <p className="lab3-terminal-dock__lede">
+              Work from <code>/home/student/lab3</code>, or pop the terminal out
+              into a full tab for more room.
+            </p>
+
+            <a
+              className="lab3-terminal-dock__link"
+              href={terminalPath}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Open in New Tab
+            </a>
+          </div>
+
+          <div className="lab3-terminal-dock__frame-shell">
+            <iframe
+              className="lab3-terminal-dock__frame"
+              loading="lazy"
+              onError={() => setStatus("error")}
+              onLoad={handleFrameLoad}
+              ref={frameRef}
+              src={terminalPath}
+              title="Lab 3 terminal session"
+            />
+          </div>
+
+          {status === "loading" ? (
+            <p className="lab3-terminal-dock__status" aria-live="polite">
+              Connecting to the embedded terminal...
+            </p>
+          ) : null}
+
+          {status === "error" ? (
+            <p
+              className="lab3-terminal-dock__status lab3-terminal-dock__status--warning"
+              aria-live="polite"
+            >
+              The reverse proxy is not running for <code>{terminalPath}</code>.
+            </p>
+          ) : (
+            <p className="lab3-terminal-dock__status">
+              If the terminal page does not appear, open it in a new tab or fall
+              back to SSH on <code>&lt;IP&gt;:22</code>.
+            </p>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}

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 }} />

src/styles/globals.css

@@ -1483,6 +1483,174 @@ ol {
   opacity: 0.72;
 }
 
+.lab3-terminal-inline {
+  margin: 1.15rem 0 1.45rem;
+  padding: 1rem;
+  border: 1px solid #d7e4ef;
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(239, 246, 252, 0.9)),
+    radial-gradient(circle at top right, rgba(248, 156, 39, 0.14), transparent 34%);
+  box-shadow:
+    0 18px 36px rgba(15, 23, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.lab3-terminal-inline__eyebrow {
+  margin: 0;
+  color: #9a5f00;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.lab3-terminal-inline__lede {
+  margin: 0.55rem 0 0;
+  color: #334155;
+}
+
+.lab3-terminal-inline__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.lab3-terminal-inline__button,
+.lab3-terminal-inline__link,
+.lab3-terminal-dock__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  border: 1px solid #cbd9e5;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ffffff, #eff5fb);
+  color: #18466a;
+  font-size: 0.88rem;
+  font-weight: 700;
+  padding: 0.72rem 1rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.lab3-terminal-inline__button {
+  cursor: pointer;
+}
+
+.lab3-terminal-inline__button:hover,
+.lab3-terminal-inline__link:hover,
+.lab3-terminal-dock__link:hover {
+  background: linear-gradient(180deg, #ffffff, #e7f0f8);
+}
+
+.lab3-terminal-dock {
+  position: fixed;
+  left: 1rem;
+  right: 1rem;
+  bottom: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+
+.lab3-terminal-dock__toggle,
+.lab3-terminal-dock__panel {
+  pointer-events: auto;
+}
+
+.lab3-terminal-dock__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  min-width: 14rem;
+  margin-left: auto;
+  padding: 0.78rem 1rem;
+  border: 1px solid #c8d9e8;
+  border-bottom: none;
+  border-radius: 18px 18px 0 0;
+  background: linear-gradient(180deg, rgba(15, 79, 118, 0.98), rgba(10, 47, 71, 0.98));
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 700;
+  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
+}
+
+.lab3-terminal-dock__toggle-icon {
+  font-size: 1.05rem;
+  line-height: 1;
+}
+
+.lab3-terminal-dock__panel {
+  overflow: hidden;
+  max-height: 70vh;
+  border: 1px solid #0f172a;
+  border-radius: 18px 0 0 0;
+  background:
+    linear-gradient(180deg, #101926, #05090f),
+    radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 35%);
+  box-shadow: 0 -18px 34px rgba(15, 23, 42, 0.28);
+  transform-origin: bottom;
+  transition:
+    max-height 220ms ease,
+    opacity 220ms ease,
+    transform 220ms ease;
+}
+
+.lab3-terminal-dock.is-closed .lab3-terminal-dock__panel {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(1rem);
+  border-top: none;
+}
+
+.lab3-terminal-dock.is-open .lab3-terminal-dock__panel {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.lab3-terminal-dock__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem 0.7rem;
+}
+
+.lab3-terminal-dock__lede {
+  margin: 0;
+  color: #d5e5f2;
+}
+
+.lab3-terminal-dock__frame-shell {
+  margin: 0 1rem;
+  border: 1px solid #314252;
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.lab3-terminal-dock__frame {
+  display: block;
+  width: 100%;
+  height: 26rem;
+  border: 0;
+  background: #05090f;
+}
+
+.lab3-terminal-dock__status {
+  margin: 0;
+  padding: 0.75rem 1rem 0.9rem;
+  color: #c6d5e2;
+  font-size: 0.9rem;
+}
+
+.lab3-terminal-dock__status--warning {
+  color: #ffd6b3;
+  font-weight: 600;
+}
+
 @media (max-width: 640px) {
   .lab-content.objective-style-cards .objective-segment {
     padding: 0.9rem 1rem 1rem;
@@ -1545,8 +1713,37 @@ ol {
   }
 
   .objective5-chat__composer-actions,
-  .objective5-chat__message-meta {
+  .objective5-chat__message-meta,
+  .lab3-terminal-dock__header {
     align-items: flex-start;
     flex-direction: column;
   }
+
+  .lab3-terminal-inline {
+    padding: 0.9rem;
+  }
+
+  .lab3-terminal-inline__button,
+  .lab3-terminal-inline__link,
+  .lab3-terminal-dock__link {
+    width: 100%;
+  }
+
+  .lab3-terminal-dock {
+    left: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .lab3-terminal-dock__toggle {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .lab3-terminal-dock__frame-shell {
+    margin: 0 0.75rem;
+  }
+
+  .lab3-terminal-dock__frame {
+    height: 18rem;
+  }
 }