@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/test-results.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { StatusBadge, StatusIcon, type Status } from "@elabs-ai/components-ui";
+import { StatusBadge, StatusIcon, useLocale, type Status } from "@elabs-ai/components-ui";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { ChevronRightIcon } from "lucide-react";
@@ -64,7 +64,7 @@ export const TestResultsDuration = ({
 
   return (
     <span
-      className={cn("shrink-0 text-muted-foreground text-sm tabular-nums", className)}
+      className={cn("shrink-0 text-muted-foreground text-body tabular-nums", className)}
       {...props}
     >
       {children ?? formatDuration(summary.duration)}
@@ -76,6 +76,7 @@ export type TestResultsSummaryProps = HTMLAttributes<HTMLDivElement>;
 
 export const TestResultsSummary = ({ className, children, ...props }: TestResultsSummaryProps) => {
   const { summary } = useContext(TestResultsContext);
+  const { t } = useLocale();
 
   if (!summary) {
     return null;
@@ -86,16 +87,16 @@ export const TestResultsSummary = ({ className, children, ...props }: TestResult
       {children ?? (
         <>
           <StatusBadge size="sm" status="complete">
-            {summary.passed} passed
+            {t("ai.testResults.passedCount", { count: summary.passed })}
           </StatusBadge>
           {summary.failed > 0 && (
             <StatusBadge size="sm" status="failed">
-              {summary.failed} failed
+              {t("ai.testResults.failedCount", { count: summary.failed })}
             </StatusBadge>
           )}
           {summary.skipped > 0 && (
             <StatusBadge size="sm" status="skipped">
-              {summary.skipped} skipped
+              {t("ai.testResults.skippedCount", { count: summary.skipped })}
             </StatusBadge>
           )}
         </>
@@ -134,6 +135,7 @@ export const TestResultsProgress = ({
   ...props
 }: TestResultsProgressProps) => {
   const { summary } = useContext(TestResultsContext);
+  const { t, formatNumber } = useLocale();
 
   if (!summary) {
     return null;
@@ -156,11 +158,14 @@ export const TestResultsProgress = ({
               style={{ width: `${failedPercent}%` }}
             />
           </div>
-          <div className="flex justify-between text-muted-foreground text-xs tabular-nums">
+          <div className="flex justify-between text-muted-foreground text-meta tabular-nums">
             <span>
-              {summary.passed}/{summary.total} tests passed
+              {t("ai.testResults.testsPassed", { passed: summary.passed, total: summary.total })}
+            </span>
+            <span>
+              {formatNumber(passedPercent, { maximumFractionDigits: 0 })}
+              {"%"}
             </span>
-            <span>{passedPercent.toFixed(0)}%</span>
           </div>
         </>
       )}
@@ -247,7 +252,7 @@ export const TestSuiteName = ({ className, children, ...props }: TestSuiteNamePr
     >
       <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-standard motion-reduce:transition-none group-data-[state=open]:rotate-90" />
       <TestStatusIcon status={status} />
-      <span className="min-w-0 flex-1 truncate font-medium text-sm">{children ?? name}</span>
+      <span className="min-w-0 flex-1 truncate font-medium text-body">{children ?? name}</span>
     </CollapsibleTrigger>
   );
 };
@@ -265,20 +270,35 @@ export const TestSuiteStats = ({
   className,
   children,
   ...props
-}: TestSuiteStatsProps) => (
-  <div
-    className={cn("ms-auto flex shrink-0 items-center gap-3 text-xs tabular-nums", className)}
-    {...props}
-  >
-    {children ?? (
-      <>
-        {passed > 0 && <span className="text-success-text">{passed} passed</span>}
-        {failed > 0 && <span className="text-destructive-text">{failed} failed</span>}
-        {skipped > 0 && <span className="text-muted-foreground">{skipped} skipped</span>}
-      </>
-    )}
-  </div>
-);
+}: TestSuiteStatsProps) => {
+  const { t } = useLocale();
+  return (
+    <div
+      className={cn("ms-auto flex shrink-0 items-center gap-3 text-meta tabular-nums", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {passed > 0 && (
+            <span className="text-success-text">
+              {t("ai.testResults.passedCount", { count: passed })}
+            </span>
+          )}
+          {failed > 0 && (
+            <span className="text-destructive-text">
+              {t("ai.testResults.failedCount", { count: failed })}
+            </span>
+          )}
+          {skipped > 0 && (
+            <span className="text-muted-foreground">
+              {t("ai.testResults.skippedCount", { count: skipped })}
+            </span>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
 
 export type TestSuiteContentProps = ComponentProps<typeof CollapsibleContent>;
 
@@ -328,7 +348,7 @@ export const TestDuration = ({ className, children, ...props }: TestDurationProp
 
   return (
     <span
-      className={cn("shrink-0 text-muted-foreground text-xs tabular-nums", className)}
+      className={cn("shrink-0 text-muted-foreground text-meta tabular-nums", className)}
       {...props}
     >
       {children ?? `${duration}ms`}
@@ -365,7 +385,7 @@ export const Test = ({ name, status, duration, className, children, ...props }:
   return (
     <TestContext.Provider value={contextValue}>
       <div
-        className={cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-sm", className)}
+        className={cn("flex min-w-0 items-center gap-2 ps-10 pe-4 py-2 text-body", className)}
         {...props}
       >
         {children ?? (
@@ -391,7 +411,7 @@ export const TestError = ({ className, children, ...props }: TestErrorProps) =>
 export type TestErrorMessageProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const TestErrorMessage = ({ className, children, ...props }: TestErrorMessageProps) => (
-  <p className={cn("font-medium text-destructive-text text-sm", className)} {...props}>
+  <p className={cn("font-medium text-destructive-text text-body", className)} {...props}>
     {children}
   </p>
 );
@@ -400,7 +420,7 @@ export type TestErrorStackProps = HTMLAttributes<HTMLPreElement>;
 
 export const TestErrorStack = ({ className, children, ...props }: TestErrorStackProps) => (
   <pre
-    className={cn("mt-2 overflow-auto font-mono text-destructive-text text-xs", className)}
+    className={cn("mt-2 overflow-auto font-mono text-destructive-text text-meta", className)}
     {...props}
   >
     {children}

package/src/token-usage.tsx

@@ -154,7 +154,7 @@ export const TokenUsageContentHeader = ({
     <div className={cn("w-full space-y-2 p-3", className)} {...props}>
       {children ?? (
         <>
-          <div className="flex items-center justify-between gap-3 text-xs">
+          <div className="flex items-center justify-between gap-3 text-meta">
             <p>{displayPct}</p>
             <p className="font-mono text-muted-foreground">
               {used} / {total}
@@ -207,7 +207,7 @@ export const TokenUsageContentFooter = ({
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-meta",
         className,
       )}
       {...props}
@@ -259,7 +259,7 @@ export const TokenUsageInput = ({ className, children, ...props }: TokenUsageInp
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.input")}</span>
       <TokensWithCost costText={inputCostText} tokens={inputTokens} />
     </div>
@@ -293,7 +293,7 @@ export const TokenUsageOutput = ({ className, children, ...props }: TokenUsageOu
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.output")}</span>
       <TokensWithCost costText={outputCostText} tokens={outputTokens} />
     </div>
@@ -333,7 +333,7 @@ export const TokenUsageReasoning = ({
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.reasoning")}</span>
       <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
     </div>
@@ -369,7 +369,7 @@ export const TokenUsageCache = ({ className, children, ...props }: TokenUsageCac
   });
 
   return (
-    <div className={cn("flex items-center justify-between text-xs", className)} {...props}>
+    <div className={cn("flex items-center justify-between text-meta", className)} {...props}>
       <span className="text-muted-foreground">{t("ai.tokenUsage.cache")}</span>
       <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
     </div>

package/src/tool.test.tsx

@@ -61,3 +61,68 @@ describe("ToolOutput isStreaming (#269, loading-states.md)", () => {
     expect(container).toBeEmptyDOMElement();
   });
 });
+
+// A tool that returns a count of 0, a boolean check of false, or an empty
+// string is a REAL, defined result — only `undefined` means "no output yet".
+// The old `!(output || errorText || isStreaming)` guard treated all three as
+// "nothing to show" and rendered null outright.
+describe("ToolOutput — defined-but-falsy output renders (review #1)", () => {
+  it("renders a numeric 0 result instead of returning null", () => {
+    render(<ToolOutput output={0} errorText={undefined} />);
+    expect(screen.getByText("Result")).toBeInTheDocument();
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+
+  it("renders a boolean false result instead of returning null", () => {
+    const { container } = render(<ToolOutput output={false} errorText={undefined} />);
+    expect(screen.getByText("Result")).toBeInTheDocument();
+    expect(container.querySelector('[data-language="json"]')).not.toBeNull();
+  });
+
+  it("renders an empty-string result (not the pending skeleton, not null)", () => {
+    const { container } = render(<ToolOutput output="" errorText={undefined} />);
+    expect(screen.getByText("Result")).toBeInTheDocument();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+});
+
+describe("ToolOutput — string output renders as plain text, not forced JSON (review #1)", () => {
+  it("renders a plain-text (non-JSON) string result without the JSON highlighter", () => {
+    const { container } = render(
+      <ToolOutput output="just a plain sentence, not json" errorText={undefined} />,
+    );
+    expect(screen.getByText("just a plain sentence, not json")).toBeInTheDocument();
+    expect(container.querySelector('[data-language="text"]')).not.toBeNull();
+    expect(container.querySelector('[data-language="json"]')).toBeNull();
+  });
+
+  it("still renders an object result through the JSON highlighter", () => {
+    const { container } = render(<ToolOutput output={{ ok: true }} errorText={undefined} />);
+    expect(container.querySelector('[data-language="json"]')).not.toBeNull();
+  });
+});
+
+describe("ToolOutput/ToolInput — JSON.stringify never crashes the render (review #1)", () => {
+  it("falls back gracefully for a circular output object instead of throwing", () => {
+    const circular: Record<string, unknown> = { name: "circular" };
+    circular.self = circular;
+
+    expect(() => render(<ToolOutput output={circular} errorText={undefined} />)).not.toThrow();
+    expect(screen.getByText("Result")).toBeInTheDocument();
+  });
+
+  it("renders a BigInt field in the output instead of throwing", () => {
+    expect(() =>
+      render(<ToolOutput output={{ total: 10n }} errorText={undefined} />),
+    ).not.toThrow();
+    expect(screen.getByText("Result")).toBeInTheDocument();
+    expect(screen.getByText(/10n/)).toBeInTheDocument();
+  });
+
+  it("falls back gracefully for circular tool input instead of throwing", () => {
+    const circular: Record<string, unknown> = { query: "x" };
+    circular.self = circular;
+
+    expect(() => render(<ToolInput input={circular} />)).not.toThrow();
+  });
+});

package/src/tool.tsx

@@ -7,6 +7,7 @@ import type { DynamicToolUIPart, ToolUIPart } from "ai";
 import { ChevronDownIcon, WrenchIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
+import type { BundledLanguage } from "shiki";
 
 import { CodeBlock } from "./code-block";
 
@@ -21,6 +22,19 @@ export const Tool = ({ className, ...props }: ToolProps) => (
 
 export type ToolPart = ToolUIPart | DynamicToolUIPart;
 
+/**
+ * `JSON.stringify` throws on a circular reference or a `BigInt` — both
+ * realistic shapes for tool input/output payloads a model produced. Falls
+ * back to a readable placeholder instead of crashing the message render.
+ */
+function safeJsonStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value, (_key, v) => (typeof v === "bigint" ? `${v.toString()}n` : v), 2);
+  } catch {
+    return String(value);
+  }
+}
+
 export type ToolHeaderProps = {
   title?: string;
   /**
@@ -123,23 +137,26 @@ export type ToolDetailsProps = ComponentProps<typeof Collapsible> & {
  */
 export const ToolDetails = ({
   className,
-  label = "Show technical details",
+  label,
   defaultOpen = false,
   children,
   ...props
-}: ToolDetailsProps) => (
-  <Collapsible
-    className={cn("group/tool-details not-prose", className)}
-    defaultOpen={defaultOpen}
-    {...props}
-  >
-    <CollapsibleTrigger className="flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-      <ChevronDownIcon className="size-3.5 transition-transform group-data-[state=open]/tool-details:rotate-180" />
-      {label}
-    </CollapsibleTrigger>
-    <CollapsibleContent className="mt-3 space-y-4">{children}</CollapsibleContent>
-  </Collapsible>
-);
+}: ToolDetailsProps) => {
+  const { t } = useLocale();
+  return (
+    <Collapsible
+      className={cn("group/tool-details not-prose", className)}
+      defaultOpen={defaultOpen}
+      {...props}
+    >
+      <CollapsibleTrigger className="flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <ChevronDownIcon className="size-3.5 transition-transform group-data-[state=open]/tool-details:rotate-180" />
+        {label ?? t("ai.tool.showTechnicalDetails")}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3 space-y-4">{children}</CollapsibleContent>
+    </Collapsible>
+  );
+};
 
 export type ToolInputProps = ComponentProps<"div"> & {
   input: ToolPart["input"];
@@ -153,7 +170,7 @@ export const ToolInput = ({ className, input, ...props }: ToolInputProps) => {
         {t("ai.schemaDisplay.parameters")}
       </h4>
       <div className="rounded-md bg-muted/50">
-        <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+        <CodeBlock code={safeJsonStringify(input)} language="json" />
       </div>
     </div>
   );
@@ -197,25 +214,44 @@ export const ToolOutput = ({
 }: ToolOutputProps) => {
   const { t } = useLocale();
 
-  if (!(output || errorText || isStreaming)) {
+  // `output` is a defined-but-falsy result (`0`, `false`, `""`) for plenty of
+  // real tools (a count, a boolean check, an empty-string field) — only
+  // `undefined` means "no output (yet)".
+  const hasOutput = output !== undefined;
+
+  if (!(hasOutput || errorText || isStreaming)) {
     return null;
   }
 
   const showError = !isStreaming && Boolean(errorText);
-  const pending = isStreaming && !output && !errorText;
+  const pending = isStreaming && !hasOutput && !errorText;
 
-  let Output = <div>{output as ReactNode}</div>;
+  let Output: ReactNode = null;
 
-  if (typeof output === "object" && !isValidElement(output)) {
-    Output = <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />;
-  } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
+  if (hasOutput) {
+    if (isValidElement(output)) {
+      Output = output;
+    } else if (typeof output === "string") {
+      // A tool result is arbitrary text, not guaranteed JSON — forcing the
+      // JSON highlighter on it mis-colours ordinary strings. Shiki's own
+      // `BundledLanguage` union (grammar-backed languages) omits its
+      // hard-coded plain-text pseudo-languages (`isPlainLang`:
+      // "plaintext" | "txt" | "text" | "plain") — `createHighlighter`/
+      // `codeToTokens` accept and special-case them with no grammar load
+      // (verified: `getLoadedLanguages()` stays empty, no throw), so this
+      // is a type-only gap, not a runtime one.
+      Output = <CodeBlock code={output} language={"text" as BundledLanguage} />;
+    } else {
+      // Objects, arrays, numbers, booleans, null, bigint — all safe to
+      // stringify for display.
+      Output = <CodeBlock code={safeJsonStringify(output)} language="json" />;
+    }
   }
 
   return (
     <div className={cn("space-y-2", className)} {...props}>
       <h4 className="text-meta uppercase text-muted-foreground">
-        {showError ? "Error" : "Result"}
+        {showError ? t("ai.tool.error") : t("ai.tool.result")}
       </h4>
       {pending ? (
         <div className="space-y-2 rounded-md bg-muted/50 p-3" role="status" aria-live="polite">

package/src/transcription.tsx

@@ -54,7 +54,7 @@ export const Transcription = ({
   return (
     <TranscriptionContext.Provider value={contextValue}>
       <div
-        className={cn("flex flex-wrap gap-1 text-sm leading-relaxed", className)}
+        className={cn("flex flex-wrap gap-1 text-body leading-relaxed", className)}
         data-slot="transcription"
         {...props}
       >

package/src/voice-selector.tsx

@@ -197,7 +197,7 @@ export const VoiceSelectorGender = ({
   }
 
   return (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
+    <span className={cn("text-muted-foreground text-meta", className)} {...props}>
       {children ?? icon}
     </span>
   );
@@ -373,7 +373,7 @@ export const VoiceSelectorAccent = ({
   }
 
   return (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
+    <span className={cn("text-muted-foreground text-meta", className)} {...props}>
       {children ?? emoji}
     </span>
   );
@@ -382,7 +382,7 @@ export const VoiceSelectorAccent = ({
 export type VoiceSelectorAgeProps = ComponentProps<"span">;
 
 export const VoiceSelectorAge = ({ className, ...props }: VoiceSelectorAgeProps) => (
-  <span className={cn("text-muted-foreground text-xs tabular-nums", className)} {...props} />
+  <span className={cn("text-muted-foreground text-meta tabular-nums", className)} {...props} />
 );
 
 export type VoiceSelectorNameProps = ComponentProps<"span">;
@@ -397,7 +397,7 @@ export const VoiceSelectorDescription = ({
   className,
   ...props
 }: VoiceSelectorDescriptionProps) => (
-  <span className={cn("text-muted-foreground text-xs", className)} {...props} />
+  <span className={cn("text-muted-foreground text-meta", className)} {...props} />
 );
 
 export type VoiceSelectorAttributesProps = ComponentProps<"div">;
@@ -407,7 +407,7 @@ export const VoiceSelectorAttributes = ({
   children,
   ...props
 }: VoiceSelectorAttributesProps) => (
-  <div className={cn("flex items-center text-xs", className)} {...props}>
+  <div className={cn("flex items-center text-meta", className)} {...props}>
     {children}
   </div>
 );

package/src/web-preview.test.tsx

@@ -1,8 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { LocaleProvider } from "@elabs-ai/components-ui";
 import {
   WebPreview,
   WebPreviewBody,
+  WebPreviewConsole,
   WebPreviewNavigation,
   WebPreviewNavigationButton,
   WebPreviewUrl,
@@ -115,3 +117,51 @@ describe("WebPreviewNavigationButton accessible name (#386)", () => {
     expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
   });
 });
+
+// 1.3 — `allow-same-origin` combined with `allow-scripts` lets a same-origin
+// previewed page break out of the sandbox entirely. It must be opt-in.
+describe("WebPreviewBody sandbox (#1.3)", () => {
+  it("never includes allow-same-origin by default", () => {
+    const { container } = render(
+      <WebPreview>
+        <WebPreviewBody />
+      </WebPreview>,
+    );
+    const iframe = container.querySelector("iframe");
+    expect(iframe).not.toBeNull();
+    expect(iframe?.getAttribute("sandbox")).not.toContain("allow-same-origin");
+    // The other, non-origin-escaping permissions still apply.
+    expect(iframe?.getAttribute("sandbox")).toContain("allow-scripts");
+  });
+
+  it("adds allow-same-origin only when explicitly opted in", () => {
+    const { container } = render(
+      <WebPreview>
+        <WebPreviewBody allowSameOrigin />
+      </WebPreview>,
+    );
+    const iframe = container.querySelector("iframe");
+    expect(iframe?.getAttribute("sandbox")).toContain("allow-same-origin");
+  });
+});
+
+describe("WebPreviewConsole timestamp formatting (#1.3)", () => {
+  it("formats the log timestamp through the active locale, not the JS-engine default", () => {
+    const timestamp = new Date("2024-03-04T15:30:00Z");
+    render(
+      <LocaleProvider locale="de-DE">
+        <WebPreview>
+          <WebPreviewConsole logs={[{ level: "log", message: "started", timestamp }]} />
+        </WebPreview>
+      </LocaleProvider>,
+    );
+    // The console body is collapsed by default — open it before asserting.
+    fireEvent.click(screen.getByRole("button", { name: "Console" }));
+    const expected = new Intl.DateTimeFormat("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    }).format(timestamp);
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+});

package/src/web-preview.tsx

@@ -158,7 +158,7 @@ export const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }: WebPrevi
 
   return (
     <Input
-      className="h-8 flex-1 text-sm"
+      className="h-8 flex-1 text-body"
       onChange={onChange ?? handleChange}
       onKeyDown={handleKeyDown}
       placeholder={t("ai.webPreview.urlPlaceholder")}
@@ -180,20 +180,45 @@ export type WebPreviewBodyProps = Omit<ComponentProps<"iframe">, "loading"> & {
    * @default false
    */
   loading?: boolean | ReactNode;
+  /**
+   * Adds `allow-same-origin` to the iframe sandbox. **Opt-in, off by
+   * default**: combined with `allow-scripts`, a same-origin previewed page
+   * can script its way out of the sandbox restrictions entirely (its own
+   * `<iframe>` reads as unsandboxed once it shares the origin). Only enable
+   * this for content you trust to be same-origin-safe.
+   * @default false
+   */
+  allowSameOrigin?: boolean;
 };
 
-export const WebPreviewBody = ({ className, loading, src, ...props }: WebPreviewBodyProps) => {
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  allowSameOrigin = false,
+  ...props
+}: WebPreviewBodyProps) => {
   const { url } = useWebPreview();
   const { t } = useLocale();
 
+  const sandbox = [
+    "allow-scripts",
+    "allow-forms",
+    "allow-popups",
+    "allow-presentation",
+    allowSameOrigin && "allow-same-origin",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
     <div className="relative flex-1">
       <iframe
         className={cn("size-full", className)}
         // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)
-        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        sandbox={sandbox}
         src={(src ?? url) || undefined}
-        title="Preview"
+        title={t("ai.webPreview.previewTitle")}
         {...props}
       />
       {loading === true ? (
@@ -228,11 +253,11 @@ export const WebPreviewConsole = ({
   ...props
 }: WebPreviewConsoleProps) => {
   const { consoleOpen, setConsoleOpen } = useWebPreview();
-  const { t } = useLocale();
+  const { t, formatDate } = useLocale();
 
   return (
     <Collapsible
-      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      className={cn("border-t bg-muted/50 font-mono text-body", className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}
@@ -264,7 +289,7 @@ export const WebPreviewConsole = ({
             logs.map((log) => (
               <div
                 className={cn(
-                  "text-xs",
+                  "text-meta",
                   // #124: console log lines are running text — ink rung, not
                   // the mark rung. `text-yellow-600` was also a raw, untokened
                   // Tailwind palette colour (styling-and-tokens.md); replaced
@@ -275,7 +300,13 @@ export const WebPreviewConsole = ({
                 )}
                 key={`${log.timestamp.getTime()}-${log.level}-${log.message}`}
               >
-                <span className="text-muted-foreground">{log.timestamp.toLocaleTimeString()}</span>{" "}
+                <span className="text-muted-foreground">
+                  {formatDate(log.timestamp, {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })}
+                </span>{" "}
                 {log.message}
               </div>
             ))