From 2662291cf2aed9592a43791eaccd3cee4692cc19 Mon Sep 17 00:00:00 2001 From: Xiaohan Li Date: Thu, 28 May 2026 18:43:51 +0800 Subject: [PATCH] fix(runtimes): disable ligatures in CLI command snippets (#3357) --- packages/ui/markdown/index.ts | 2 +- .../steps/cli-install-instructions.test.tsx | 25 +++++++ .../steps/cli-install-instructions.tsx | 9 ++- .../components/connect-remote-dialog.test.tsx | 69 +++++++++++++++++++ .../components/connect-remote-dialog.tsx | 23 ++++++- 5 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 packages/views/onboarding/steps/cli-install-instructions.test.tsx create mode 100644 packages/views/runtimes/components/connect-remote-dialog.test.tsx diff --git a/packages/ui/markdown/index.ts b/packages/ui/markdown/index.ts index d11121fb2..0a9158509 100644 --- a/packages/ui/markdown/index.ts +++ b/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' diff --git a/packages/views/onboarding/steps/cli-install-instructions.test.tsx b/packages/views/onboarding/steps/cli-install-instructions.test.tsx new file mode 100644 index 000000000..93064a2c2 --- /dev/null +++ b/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( + + + , + ); + + expect(screen.getByText("multica setup")).toHaveClass(...ligatureClasses); + }); +}); diff --git a/packages/views/onboarding/steps/cli-install-instructions.tsx b/packages/views/onboarding/steps/cli-install-instructions.tsx index 022877ae9..e4a7560d0 100644 --- a/packages/views/onboarding/steps/cli-install-instructions.tsx +++ b/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 }) {

- + {cmd} diff --git a/packages/views/runtimes/components/connect-remote-dialog.test.tsx b/packages/views/runtimes/components/connect-remote-dialog.test.tsx new file mode 100644 index 000000000..c99cbd202 --- /dev/null +++ b/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( + + + + + , + ); +} + +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 "), + ); + + expect(tokenCode).toHaveClass(...ligatureClasses); + }); +}); diff --git a/packages/views/runtimes/components/connect-remote-dialog.tsx b/packages/views/runtimes/components/connect-remote-dialog.tsx index d3bdbe62b..1944b5d23 100644 --- a/packages/views/runtimes/components/connect-remote-dialog.tsx +++ b/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 /> - + {cmd} @@ -235,7 +242,12 @@ function TroubleshootingDetails() { {t(($) => $.connect.trouble_check_status)} {/* CLI command — literal shell string, not i18n content. */} {/* eslint-disable-next-line i18next/no-literal-string */} - + {"multica daemon status"} @@ -243,7 +255,12 @@ function TroubleshootingDetails() { {t(($) => $.connect.trouble_view_logs)} {/* CLI command — literal shell string, not i18n content. */} {/* eslint-disable-next-line i18next/no-literal-string */} - + {"multica daemon logs -f"}