fix(runtimes): disable ligatures in CLI command snippets (#3357)

packages/ui/markdown/index.ts

@@ -1,5 +1,5 @@
 export { Markdown, MemoizedMarkdown, type MarkdownProps, type RenderMode } from './Markdown'
-export { CodeBlock, InlineCode, type CodeBlockProps } from './CodeBlock'
+export { CodeBlock, CODE_LIGATURE_CLASS, InlineCode, type CodeBlockProps } from './CodeBlock'
 export { StreamingMarkdown, type StreamingMarkdownProps } from './StreamingMarkdown'
 export { preprocessLinks, detectLinks, hasLinks } from './linkify'
 export { preprocessMentionShortcodes } from './mentions'

packages/views/onboarding/steps/cli-install-instructions.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { I18nProvider } from "@multica/core/i18n/react";
+import enCommon from "../../locales/en/common.json";
+import enOnboarding from "../../locales/en/onboarding.json";
+import { CliInstallInstructions } from "./cli-install-instructions";
+
+const TEST_RESOURCES = { en: { common: enCommon, onboarding: enOnboarding } };
+
+const ligatureClasses = [
+  "[font-variant-ligatures:none]",
+  "[font-feature-settings:'liga'_0]",
+];
+
+describe("CliInstallInstructions", () => {
+  it("disables font ligatures in CLI command code", () => {
+    render(
+      <I18nProvider locale="en" resources={TEST_RESOURCES}>
+        <CliInstallInstructions />
+      </I18nProvider>,
+    );
+
+    expect(screen.getByText("multica setup")).toHaveClass(...ligatureClasses);
+  });
+});

packages/views/onboarding/steps/cli-install-instructions.tsx

@@ -3,6 +3,8 @@
 import { useState } from "react";
 import { Check, Copy, Terminal } from "lucide-react";
 import { Card, CardContent } from "@multica/ui/components/ui/card";
+import { CODE_LIGATURE_CLASS } from "@multica/ui/markdown";
+import { cn } from "@multica/ui/lib/utils";
 import { useT } from "../../i18n";
 
 const INSTALL_CMD =
@@ -43,7 +45,12 @@ function Step({ n, label, cmd }: { n: number; label: string; cmd: string }) {
       </p>
       <div className="flex items-start gap-2 rounded-lg bg-muted px-3 py-2.5 font-mono text-sm">
         <Terminal className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-        <code className="min-w-0 flex-1 whitespace-pre-wrap break-all">
+        <code
+          className={cn(
+            "min-w-0 flex-1 whitespace-pre-wrap break-all",
+            CODE_LIGATURE_CLASS,
+          )}
+        >
           {cmd}
         </code>
         <CopyButton text={cmd} />

packages/views/runtimes/components/connect-remote-dialog.test.tsx

@@ -0,0 +1,69 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { I18nProvider } from "@multica/core/i18n/react";
+import enCommon from "../../locales/en/common.json";
+import enRuntimes from "../../locales/en/runtimes.json";
+import { ConnectRemoteDialog } from "./connect-remote-dialog";
+
+const TEST_RESOURCES = { en: { common: enCommon, runtimes: enRuntimes } };
+
+vi.mock("@multica/core/hooks", () => ({
+  useWorkspaceId: () => "ws-test",
+}));
+
+vi.mock("@multica/core/paths", () => ({
+  paths: {
+    workspace: () => ({
+      agents: () => "/agents",
+      runtimeDetail: () => "/runtimes/rt-test",
+    }),
+  },
+  useWorkspaceSlug: () => "workspace-test",
+}));
+
+vi.mock("@multica/core/realtime", () => ({
+  useWSEvent: vi.fn(),
+}));
+
+vi.mock("../../navigation", () => ({
+  useNavigation: () => ({ push: vi.fn() }),
+}));
+
+function renderDialog() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <I18nProvider locale="en" resources={TEST_RESOURCES}>
+        <ConnectRemoteDialog onClose={vi.fn()} />
+      </I18nProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const ligatureClasses = [
+  "[font-variant-ligatures:none]",
+  "[font-feature-settings:'liga'_0]",
+];
+
+describe("ConnectRemoteDialog", () => {
+  it("disables font ligatures in setup command code", () => {
+    const { baseElement } = renderDialog();
+
+    const setupCode = Array.from(baseElement.querySelectorAll("code")).find((node) =>
+      node.textContent?.includes("multica setup"),
+    );
+
+    expect(setupCode).toHaveClass(...ligatureClasses);
+  });
+
+  it("disables font ligatures in fallback token command code", () => {
+    const { baseElement } = renderDialog();
+
+    const tokenCode = Array.from(baseElement.querySelectorAll("code")).find((node) =>
+      node.textContent?.includes("multica login --token <YOUR_TOKEN>"),
+    );
+
+    expect(tokenCode).toHaveClass(...ligatureClasses);
+  });
+});

packages/views/runtimes/components/connect-remote-dialog.tsx

@@ -16,6 +16,8 @@ import {
   DialogTitle,
 } from "@multica/ui/components/ui/dialog";
 import { Button } from "@multica/ui/components/ui/button";
+import { CODE_LIGATURE_CLASS } from "@multica/ui/markdown";
+import { cn } from "@multica/ui/lib/utils";
 import { useNavigation } from "../../navigation";
 import { useT } from "../../i18n";
 
@@ -142,7 +144,12 @@ function CommandStep({
           className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground"
           aria-hidden
         />
-        <code className="min-w-0 flex-1 break-all whitespace-pre-wrap tabular-nums">
+        <code
+          className={cn(
+            "min-w-0 flex-1 break-all whitespace-pre-wrap tabular-nums",
+            CODE_LIGATURE_CLASS,
+          )}
+        >
           {cmd}
         </code>
         <CopyButton text={cmd} ariaLabel={copyAria} />
@@ -235,7 +242,12 @@ function TroubleshootingDetails() {
             <span>{t(($) => $.connect.trouble_check_status)}</span>
             {/* CLI command — literal shell string, not i18n content. */}
             {/* eslint-disable-next-line i18next/no-literal-string */}
-            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-foreground">
+            <code
+              className={cn(
+                "rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-foreground",
+                CODE_LIGATURE_CLASS,
+              )}
+            >
               {"multica daemon status"}
             </code>
           </li>
@@ -243,7 +255,12 @@ function TroubleshootingDetails() {
             <span>{t(($) => $.connect.trouble_view_logs)}</span>
             {/* CLI command — literal shell string, not i18n content. */}
             {/* eslint-disable-next-line i18next/no-literal-string */}
-            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-foreground">
+            <code
+              className={cn(
+                "rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-foreground",
+                CODE_LIGATURE_CLASS,
+              )}
+            >
               {"multica daemon logs -f"}
             </code>
           </li>