From 49a4e16e55a4ef75750a9ea8053b96dfea261864 Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 11:05:30 -0500 Subject: [PATCH 1/6] added typography and applied it to connectio, dashboard and primtivies Signed-off-by: nassery318 --- apps/frontend/package.json | 1 + .../connection/ClusterConnectionGroup.tsx | 41 ++++++------ .../src/components/connection/Connection.tsx | 10 +-- .../components/connection/ConnectionEntry.tsx | 53 ++++++++------- .../src/components/dashboard/Dashboard.tsx | 5 +- apps/frontend/src/components/ui/accordion.tsx | 18 +++-- .../frontend/src/components/ui/app-header.tsx | 32 ++++++--- .../src/components/ui/chart-section.tsx | 15 +++-- .../src/components/ui/donut-chart.tsx | 17 ++--- .../src/components/ui/empty-state.tsx | 9 +-- .../frontend/src/components/ui/line-chart.tsx | 13 ++-- apps/frontend/src/components/ui/stat-card.tsx | 7 +- .../frontend/src/components/ui/typography.tsx | 67 +++++++++++++++++++ apps/frontend/src/css/index.css | 58 +++++++++++++++- 14 files changed, 254 insertions(+), 92 deletions(-) create mode 100644 apps/frontend/src/components/ui/typography.tsx diff --git a/apps/frontend/package.json b/apps/frontend/package.json index f7becd95..41c42967 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -14,6 +14,7 @@ "test:watch": "vitest watch" }, "dependencies": { + "@fontsource-variable/inter": "^5.2.8", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-separator": "^1.1.7", diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx index af407164..3610eae0 100644 --- a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx +++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx @@ -21,6 +21,7 @@ import { import { useAppDispatch } from "@/hooks/hooks.ts" import { Button } from "@/components/ui/button.tsx" import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip.tsx" +import { Typography } from "@/components/ui/typography.tsx" interface ClusterConnectionGroupProps { clusterId: string @@ -137,19 +138,23 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust
- - {firstNodeAlias || clusterId} - + + {firstNodeAlias || clusterId} + +
@@ -158,10 +163,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust ) : (
-

setIsOpen(!isOpen)} style={{ overflow: "hidden", @@ -170,9 +172,10 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust display: "block", }} title={firstNodeAlias || clusterId} + variant="code" > {firstNodeAlias || clusterId} -

+
)} + + + {lastConnectionTime && lastConnectionTime.event === CONNECTED && ( - + Last connected: {new Date(lastConnectionTime.timestamp).toLocaleString()} - + )} {/* action buttons */} @@ -104,25 +107,27 @@ export const ConnectionEntry = ({
- + + + {connection.connectionDetails.alias && ( - + ({label}) - )} + )}
{lastConnectionTime && lastConnectionTime.event === CONNECTED && ( - + Last connected: {new Date(lastConnectionTime.timestamp).toLocaleString()} - + )}
diff --git a/apps/frontend/src/components/dashboard/Dashboard.tsx b/apps/frontend/src/components/dashboard/Dashboard.tsx index 9a789ba6..2d3675a6 100644 --- a/apps/frontend/src/components/dashboard/Dashboard.tsx +++ b/apps/frontend/src/components/dashboard/Dashboard.tsx @@ -15,6 +15,7 @@ import { Panel } from "../ui/panel" import { Input } from "../ui/input" import { StatCard } from "../ui/stat-card" import RouteContainer from "../ui/route-container" +import { Typography } from "../ui/typography" import { selectData } from "@/state/valkey-features/info/infoSelectors.ts" export function Dashboard() { @@ -30,7 +31,9 @@ export function Dashboard() { title="Dashboard" />
- Loading metrics… + + Loading metrics… +
) diff --git a/apps/frontend/src/components/ui/accordion.tsx b/apps/frontend/src/components/ui/accordion.tsx index 92bcbe83..8ebc6270 100644 --- a/apps/frontend/src/components/ui/accordion.tsx +++ b/apps/frontend/src/components/ui/accordion.tsx @@ -3,6 +3,7 @@ import { CircleChevronDown, CircleChevronUp, Dot } from "lucide-react" import { formatMetricValue, type ValueType } from "@common/src/format-metric-value" import { TooltipProvider } from "@radix-ui/react-tooltip" import { TooltipIcon } from "./tooltip-icon" +import { Typography } from "./typography" interface AccordionProps { accordionName?: string; @@ -66,15 +67,17 @@ export default function Accordion({ accordionName, accordionItems, valueType = "
- {accordionName} + + {accordionName} - - + + {searchQuery.trim() && filteredItemCount !== itemCount ? ( <>{filteredItemCount} of {itemCount} {itemCount === 1 ? "metric" : "metrics"} ) : ( <>{itemCount} {itemCount === 1 ? "metric" : "metrics"} - )} + )} +
@@ -86,12 +89,15 @@ export default function Accordion({ accordionName, accordionItems, valueType = " {Object.entries(filteredItems).map(([key, value]) => (
  • - {formatKey(key)} + + + {formatKey(key)} + {singleMetricDescriptions[key] && ( )}
    - {formatMetricValue(key, value, valueType)} + {formatMetricValue(key, value, valueType)}
    • ))} diff --git a/apps/frontend/src/components/ui/app-header.tsx b/apps/frontend/src/components/ui/app-header.tsx index b55493e5..6d23b5e2 100644 --- a/apps/frontend/src/components/ui/app-header.tsx +++ b/apps/frontend/src/components/ui/app-header.tsx @@ -3,8 +3,8 @@ import { useSelector } from "react-redux" import { useState, useRef, useEffect, type ReactNode } from "react" import { CircleChevronDown, CircleChevronUp, Dot, CornerDownRight } from "lucide-react" import { CONNECTED } from "@common/src/constants.ts" -import { Title } from "./title" import { Badge } from "./badge" +import { Typography } from "./typography" import type { RootState } from "@/store.ts" import { selectConnectionDetails } from "@/state/valkey-features/connection/connectionSelectors.ts" import { selectCluster } from "@/state/valkey-features/cluster/clusterSelectors" @@ -58,9 +58,10 @@ function AppHeader({ title, icon, className }: AppHeaderProps) { <> {id && !clusterId ? (
    - + <Typography className="flex items-center gap-2" variant="heading"> + {icon} {title} - + {alias ? alias : `${username}@${host}:${port}`} @@ -68,19 +69,23 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
    ) : (
    - + <Typography className="flex items-center gap-2" variant="heading"> + {icon} {title} - +
    - + {id} - +
    {primary.replicas?.map((replica) => (
    -
    ))} diff --git a/apps/frontend/src/components/ui/chart-section.tsx b/apps/frontend/src/components/ui/chart-section.tsx index 4baed21e..c15cc569 100644 --- a/apps/frontend/src/components/ui/chart-section.tsx +++ b/apps/frontend/src/components/ui/chart-section.tsx @@ -1,3 +1,4 @@ +import { Typography } from "./typography" import type { ReactNode } from "react" interface ChartSectionProps { @@ -31,11 +32,15 @@ export function ChartSection({ {/* Header */} {(title || subtitle) && (
    - {title &&

    {title}

    } + {title && ( + + {title} + + )} {subtitle && ( - + {subtitle} - + )}
    )} @@ -44,9 +49,9 @@ export function ChartSection({ {isEmpty ? (
    -

    + {emptyMessage} -

    +
    ) : ( diff --git a/apps/frontend/src/components/ui/donut-chart.tsx b/apps/frontend/src/components/ui/donut-chart.tsx index 29e0d465..b6b13fb8 100644 --- a/apps/frontend/src/components/ui/donut-chart.tsx +++ b/apps/frontend/src/components/ui/donut-chart.tsx @@ -4,6 +4,7 @@ import { useParams } from "react-router" import { useSelector } from "react-redux" import { formatBytes } from "@common/src/bytes-conversion" import { calculateTotalMemoryUsage } from "@common/src/memory-usage-calculation" +import { Typography } from "./typography" import { selectKeys } from "@/state/valkey-features/keys/keyBrowserSelectors" import { useAppDispatch } from "@/hooks/hooks" import { getKeysRequested } from "@/state/valkey-features/keys/keyBrowserSlice" @@ -79,10 +80,10 @@ export default function DonutChart() { const data = payload[0].payload return (
    -

    {data.name}

    -

    Count: {data.count}

    -

    Percentage: {data.percentage}%

    -

    Total Memory: {formatBytes(data.totalSize)}

    + {data.name} + Count: {data.count} + Percentage: {data.percentage}% + Total Memory: {formatBytes(data.totalSize)}
    ) } @@ -91,12 +92,12 @@ export default function DonutChart() { return (
    -

    + Key Type Distribution -

    -
    + + Total Memory: {formatBytes(totalMemory)} -
    + { @@ -26,13 +27,13 @@ function EmptyState({ >
    {icon &&
    {icon}
    } -

    + {title} -

    + {description && ( -

    + {description} -

    + )} {action}
    diff --git a/apps/frontend/src/components/ui/line-chart.tsx b/apps/frontend/src/components/ui/line-chart.tsx index e90b966f..192dc61c 100644 --- a/apps/frontend/src/components/ui/line-chart.tsx +++ b/apps/frontend/src/components/ui/line-chart.tsx @@ -1,4 +1,5 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" +import { Typography } from "./typography" interface LineChartComponentProps { data: Array<{ timestamp: number; value: number }>; @@ -22,13 +23,15 @@ export default function LineChartComponent({ }: LineChartComponentProps) { return (
    -

    - {title} -

    + {title && ( + + {title} + + )} {subtitle && ( -
    + {subtitle} -
    + )} { @@ -28,12 +29,12 @@ function StatCard({ >
    {icon} - {value} + {value}
    - + {label} {tooltip} - +
    ) } diff --git a/apps/frontend/src/components/ui/typography.tsx b/apps/frontend/src/components/ui/typography.tsx new file mode 100644 index 00000000..bfcc2198 --- /dev/null +++ b/apps/frontend/src/components/ui/typography.tsx @@ -0,0 +1,67 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" +import { cn } from "@/lib/utils" + +const typographyVariants = cva("", { + variants: { + variant: { + display: "text-display", + title: "text-title", + heading: "text-heading", + subheading: "text-subheading", + label: "text-label", + body: "text-body", + bodyLg: "text-body-lg", + bodySm: "text-body-sm", + bodyXs: "text-body-xs", + caption: "text-caption", + overline: "text-overline", + code: "text-code", + }, + }, + defaultVariants: { + variant: "body", + }, +}) + +type AllowedElements = "h1" | "h2" | "h3" | "h4" | "p" | "span" | "code" + +const defaultElements: Record< + NonNullable["variant"]>, + AllowedElements +> = { + display: "h1", + title: "h2", + heading: "h3", + subheading: "h4", + label: "p", + body: "p", + bodyLg: "p", + bodySm: "p", + bodyXs: "p", + caption: "span", + overline: "span", + code: "code", +} + +export interface TypographyProps + extends React.HTMLAttributes, + VariantProps { + asChild?: boolean + as?: AllowedElements +} + +function Typography({ className, variant = "body", asChild = false, as, ...props }: TypographyProps) { + const Comp = asChild ? Slot : (as ?? defaultElements[variant ?? "body"]) + + return ( + + ) +} + +export { Typography } diff --git a/apps/frontend/src/css/index.css b/apps/frontend/src/css/index.css index 828cb617..8870eeaf 100644 --- a/apps/frontend/src/css/index.css +++ b/apps/frontend/src/css/index.css @@ -1,3 +1,4 @@ +@import "@fontsource-variable/inter"; @import "tailwindcss"; @import "tw-animate-css"; @@ -47,6 +48,10 @@ --color-tw-dark-border: var(--tw-dark-border); --color-tw-accent: var(--tw-accent); --color-tw-accent2: var(--tw-accent2); + + /* Font */ + --font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; + --font-mono: ui-monospace, 'SF Mono', Consolas, monospace; } :root { @@ -126,7 +131,58 @@ @apply border-border outline-ring/50; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-sans antialiased; + } + + /* Display & Headings */ + .text-display { + @apply text-4xl font-bold leading-tight tracking-tight; + } + + .text-title { + @apply text-3xl font-semibold leading-tight tracking-tight; + } + + .text-heading { + @apply text-2xl font-semibold leading-snug; + } + + .text-subheading { + @apply text-xl font-semibold leading-snug; + } + + .text-label { + @apply text-sm font-semibold leading-normal; + } + + /* Body Text */ + .text-body-lg { + @apply text-lg leading-relaxed; + } + + .text-body { + @apply text-base leading-normal; + } + + .text-body-sm { + @apply text-sm leading-normal; + } + + .text-body-xs { + @apply text-xs leading-normal; + } + + /* Special Purpose */ + .text-caption { + @apply text-sm text-muted-foreground leading-normal; + } + + .text-overline { + @apply text-xs font-medium uppercase tracking-wide text-muted-foreground; + } + + .text-code { + @apply font-mono text-sm; } } From 5a016c8e60a49b932c84b9fc2f99fc45f508b44e Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 11:15:16 -0500 Subject: [PATCH 2/6] linting Signed-off-by: nassery318 --- package-lock.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index d9bf9676..a89e1ff3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ }, "apps/frontend": { "dependencies": { + "@fontsource-variable/inter": "^5.2.8", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-separator": "^1.1.7", @@ -1711,6 +1712,15 @@ "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", "license": "MIT" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", From 7889cdac72264f9a387a1ee1096df5ea3a3c35d6 Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 11:27:03 -0500 Subject: [PATCH 3/6] adjust tests Signed-off-by: nassery318 --- .../connection/ClusterConnectionGroup.tsx | 7 +++- .../__tests__/text-truncation.test.tsx | 38 ++++++++++--------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx index 3610eae0..a114f097 100644 --- a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx +++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx @@ -164,6 +164,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust ) : (
    setIsOpen(!isOpen)} style={{ overflow: "hidden", @@ -197,7 +198,11 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust
    )} - + {connections.length} instance{connections.length !== 1 ? "s" : ""} {hasConnectedInstance && ( { , ) - // Check for last connection time span with truncate class - const lastConnectionSpans = container.querySelectorAll("span.truncate") - const hasLastConnectionSpan = Array.from(lastConnectionSpans).some((span) => - span.textContent?.includes("Last connected:"), + // Check for last connection time in Typography component (renders as p by default) + const lastConnectionElements = container.querySelectorAll("p") + const hasLastConnectionElement = Array.from(lastConnectionElements).some((p) => + p.textContent?.includes("Last connected:"), ) - expect(hasLastConnectionSpan).toBe(true) + expect(hasLastConnectionElement).toBe(true) }) it("should apply truncate class and title to alias display", () => { @@ -100,12 +100,12 @@ describe("Text Truncation Improvements", () => { , ) - // Check for alias span with truncate class and title - const aliasSpans = container.querySelectorAll("span.truncate[title]") - const hasAliasSpan = Array.from(aliasSpans).some((span) => - span.textContent?.includes("(") && span.textContent?.includes(")"), + // Check for alias in Typography component with truncate and title + const aliasElements = container.querySelectorAll("p.truncate[title]") + const hasAliasElement = Array.from(aliasElements).some((p) => + p.textContent?.includes("(") && p.textContent?.includes(")"), ) - expect(hasAliasSpan).toBe(true) + expect(hasAliasElement).toBe(true) }) }) @@ -161,13 +161,17 @@ describe("Text Truncation Improvements", () => { , ) - // Since there are no connected instances, cluster name should be an h3 element + // Since there are no connected instances, cluster name should be an h3 element with Typography const clusterNameElement = container.querySelector("h3[title]") expect(clusterNameElement).toBeInTheDocument() expect(clusterNameElement).toHaveAttribute("title") - // Check that it has the ellipsis CSS classes - expect(clusterNameElement).toHaveClass("overflow-hidden", "text-ellipsis", "whitespace-nowrap") + // Check that it has ellipsis styles (via inline styles or classes) + const hasEllipsisStyles = + clusterNameElement?.classList.contains("overflow-hidden") || + clusterNameElement?.style?.overflow === "hidden" || + container.querySelector(".overflow-hidden.text-ellipsis.whitespace-nowrap") + expect(hasEllipsisStyles).toBeTruthy() }) it("should apply truncate class and title to instance count text", () => { @@ -190,10 +194,10 @@ describe("Text Truncation Improvements", () => { , ) - // Check for instance count div with truncate class and title - const instanceCountElements = container.querySelectorAll("div.truncate[title]") - const hasInstanceCountElement = Array.from(instanceCountElements).some((div) => - div.textContent?.includes("instance"), + // Check for instance count in Typography component with code variant (renders as element) with truncate and title + const instanceCountElements = container.querySelectorAll("code.truncate[title]") + const hasInstanceCountElement = Array.from(instanceCountElements).some((code) => + code.textContent?.includes("instance"), ) expect(hasInstanceCountElement).toBe(true) }) From d55f054f7c8842a48eeb9d5408e8e6ee26fa1724 Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 13:39:41 -0500 Subject: [PATCH 4/6] added custom mono font and added codeBlock Signed-off-by: nassery318 --- apps/frontend/package.json | 1 + .../connection/ClusterConnectionGroup.tsx | 17 +++-------------- .../__tests__/text-truncation.test.tsx | 12 ++++-------- apps/frontend/src/components/ui/typography.tsx | 4 +++- apps/frontend/src/css/index.css | 7 ++++++- 5 files changed, 17 insertions(+), 24 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 41c42967..ee9a156f 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@fontsource-variable/inter": "^5.2.8", + "@fontsource/geist-mono": "^5.2.7", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-separator": "^1.1.7", diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx index a114f097..cc0668db 100644 --- a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx +++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx @@ -142,13 +142,7 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust variant="code" > @@ -164,14 +158,9 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust ) : (
    setIsOpen(!isOpen)} - style={{ - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", - display: "block", - }} title={firstNodeAlias || clusterId} variant="code" > diff --git a/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx b/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx index d76d87e4..4013d69f 100644 --- a/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx +++ b/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx @@ -161,17 +161,13 @@ describe("Text Truncation Improvements", () => { , ) - // Since there are no connected instances, cluster name should be an h3 element with Typography - const clusterNameElement = container.querySelector("h3[title]") + // Since there are no connected instances, cluster name should be a code element with Typography + const clusterNameElement = container.querySelector("code[title]") expect(clusterNameElement).toBeInTheDocument() expect(clusterNameElement).toHaveAttribute("title") - // Check that it has ellipsis styles (via inline styles or classes) - const hasEllipsisStyles = - clusterNameElement?.classList.contains("overflow-hidden") || - clusterNameElement?.style?.overflow === "hidden" || - container.querySelector(".overflow-hidden.text-ellipsis.whitespace-nowrap") - expect(hasEllipsisStyles).toBeTruthy() + // Check that it has truncate class + expect(clusterNameElement).toHaveClass("truncate") }) it("should apply truncate class and title to instance count text", () => { diff --git a/apps/frontend/src/components/ui/typography.tsx b/apps/frontend/src/components/ui/typography.tsx index bfcc2198..7c3e0f9b 100644 --- a/apps/frontend/src/components/ui/typography.tsx +++ b/apps/frontend/src/components/ui/typography.tsx @@ -18,6 +18,7 @@ const typographyVariants = cva("", { caption: "text-caption", overline: "text-overline", code: "text-code", + codeBlock: "text-code-block", }, }, defaultVariants: { @@ -25,7 +26,7 @@ const typographyVariants = cva("", { }, }) -type AllowedElements = "h1" | "h2" | "h3" | "h4" | "p" | "span" | "code" +type AllowedElements = "h1" | "h2" | "h3" | "h4" | "p" | "span" | "code" | "pre" const defaultElements: Record< NonNullable["variant"]>, @@ -43,6 +44,7 @@ const defaultElements: Record< caption: "span", overline: "span", code: "code", + codeBlock: "pre", } export interface TypographyProps diff --git a/apps/frontend/src/css/index.css b/apps/frontend/src/css/index.css index 8870eeaf..bcb7b905 100644 --- a/apps/frontend/src/css/index.css +++ b/apps/frontend/src/css/index.css @@ -1,4 +1,5 @@ @import "@fontsource-variable/inter"; +@import "@fontsource/geist-mono"; @import "tailwindcss"; @import "tw-animate-css"; @@ -51,7 +52,7 @@ /* Font */ --font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif; - --font-mono: ui-monospace, 'SF Mono', Consolas, monospace; + --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace; } :root { @@ -184,6 +185,10 @@ .text-code { @apply font-mono text-sm; } + + .text-code-block { + @apply font-mono text-sm block w-full whitespace-pre overflow-x-auto; +} } @keyframes linearProgress { From 05782b0b2ccfba5a8dcb3eea2015620a92ee5630 Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 13:41:35 -0500 Subject: [PATCH 5/6] linting Signed-off-by: nassery318 --- package-lock.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index a89e1ff3..ca8227ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "apps/frontend": { "dependencies": { "@fontsource-variable/inter": "^5.2.8", + "@fontsource/geist-mono": "^5.2.7", "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-separator": "^1.1.7", @@ -1721,6 +1722,15 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource/geist-mono": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz", + "integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", From 8dbef1249f30051668c43ef08e4c1b8aed5860ef Mon Sep 17 00:00:00 2001 From: nassery318 Date: Mon, 23 Feb 2026 13:47:00 -0500 Subject: [PATCH 6/6] remove comments Signed-off-by: nassery318 --- .../src/components/connection/ClusterConnectionGroup.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx index cc0668db..57542db1 100644 --- a/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx +++ b/apps/frontend/src/components/connection/ClusterConnectionGroup.tsx @@ -158,7 +158,6 @@ export const ClusterConnectionGroup = ({ clusterId, connections, onEdit }: Clust ) : (
    setIsOpen(!isOpen)} title={firstNodeAlias || clusterId}