@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/Combobox.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ElementType } from "react";
+import { createPortal } from "react-dom";
+import { AlertTriangle, ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Tip } from "./ui/tip";
+import { t } from "../i18n";
+import { toneText } from "../lib/tone";
+
+export interface ComboOption {
+  value: string;
+  /** Display text. Defaults to `value`. */
+  label?: string;
+  /** Secondary text, right-aligned in the row (engine id, "off", …). */
+  hint?: string;
+  icon?: ElementType;
+  /** Listed but not pickable — greyed, click does nothing. */
+  disabled?: boolean;
+}
+
+// Editable combobox: type freely, matching options appear below; click one to
+// pick it, or keep your own text. It is a text input that is ALSO a select —
+// an id that is not in the list is still a valid value (providers come and go,
+// model catalogs lag behind the provider's actual releases).
+export function Combobox({
+  value,
+  onChange,
+  onPick,
+  options,
+  placeholder = t("shared_ui.model_combobox_ph"),
+  invalid,
+  invalidHint,
+  className,
+  mono = true,
+  emptyHint,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  /** Fired only when an option is chosen from the list (not while typing).
+   *  Lets a caller prefill siblings on a pick without fighting free text. */
+  onPick?: (v: string) => void;
+  options: ComboOption[];
+  placeholder?: string;
+  invalid?: boolean;
+  invalidHint?: string;
+  className?: string;
+  /** Render the value + option rows in the mono face (model/provider ids). */
+  mono?: boolean;
+  /** Shown in place of the list when there is nothing to offer. */
+  emptyHint?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState(value);
+  // Did the user type since the last value that came from outside? Only then
+  // do we narrow the list — a field sitting on its committed value should show
+  // the whole catalog, not the one row that happens to equal it.
+  const [typed, setTyped] = useState(false);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  // Last text we emitted, so `value` echoing our own keystroke back does not
+  // count as an outside change and reset `typed`.
+  const emitted = useRef<string | null>(null);
+  const [menuRect, setMenuRect] = useState<{ top: number; left: number; width: number } | null>(null);
+
+  useEffect(() => {
+    if (emitted.current === value) return;
+    setQuery(value);
+    setTyped(false);
+  }, [value]);
+
+  // Position the portal'd list right under the input, in viewport coords.
+  // Recompute on open, scroll, and resize so it tracks the trigger even
+  // inside a scrolling modal.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const compute = () => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+    compute();
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open]);
+
+  // Close on outside click — must allow clicks inside the portal'd list too.
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (wrapRef.current?.contains(target)) return;
+      if (listRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  const q = query.trim().toLowerCase();
+  const filtered = q && typed
+    ? options.filter((o) => `${o.value} ${o.label || ""}`.toLowerCase().includes(q))
+    : options;
+
+  const selected = options.find((o) => o.value === value);
+  const SelectedIcon = selected?.icon;
+
+  const pick = (o: ComboOption) => {
+    if (o.disabled) return;
+    emitted.current = o.value;
+    setQuery(o.value);
+    setTyped(false);
+    setOpen(false);
+    (onPick || onChange)(o.value);
+  };
+
+  const typeText = (text: string) => {
+    emitted.current = text;
+    setQuery(text);
+    setTyped(true);
+    setOpen(true);
+    onChange(text);
+  };
+
+  const showList = open && menuRect && (filtered.length > 0 || !!emptyHint);
+
+  return (
+    <div ref={wrapRef} className={cn("relative", className)}>
+      <div
+        className={cn(
+          "flex items-center gap-1.5 rounded-lg border bg-background px-2.5 transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+          invalid ? "border-amber-500/60" : "border-border",
+        )}
+      >
+        {invalid ? (
+          <Tip content={invalidHint || t("models_ui.invalid_hint")}>
+            <span>
+              <AlertTriangle className={`size-3.5 shrink-0 ${toneText.amber}`} />
+            </span>
+          </Tip>
+        ) : SelectedIcon ? (
+          <SelectedIcon className="size-3.5 shrink-0 text-muted-fg" />
+        ) : null}
+        <input
+          value={query}
+          placeholder={placeholder}
+          onChange={(e) => typeText(e.target.value)}
+          onFocus={() => setOpen(true)}
+          onKeyDown={(e) => { if (e.key === "Escape" && open) { e.stopPropagation(); setOpen(false); } }}
+          className={cn("w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-fg/60", mono && "font-mono text-xs")}
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setOpen((v) => !v)}
+          className="shrink-0 text-muted-fg hover:text-foreground"
+        >
+          <ChevronDown className="size-4" />
+        </button>
+      </div>
+
+      {showList && createPortal(
+        <ul
+          ref={listRef}
+          style={{ position: "fixed", top: menuRect.top, left: menuRect.left, width: menuRect.width }}
+          className="z-[1000] max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-md ring-1 ring-foreground/10"
+        >
+          {filtered.length === 0 ? (
+            <li className="px-2 py-1.5 text-xs text-muted-fg">{emptyHint}</li>
+          ) : filtered.map((o) => {
+            const Icon = o.icon;
+            return (
+              <li key={o.value}>
+                <button
+                  type="button"
+                  disabled={o.disabled}
+                  onMouseDown={(e) => { e.preventDefault(); pick(o); }}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm",
+                    o.disabled
+                      ? "cursor-not-allowed text-muted-fg/60"
+                      : "hover:bg-accent hover:text-accent-fg",
+                    o.value === value && !o.disabled && "bg-accent/50",
+                  )}
+                >
+                  {Icon && <Icon className="size-3.5 shrink-0 text-muted-fg" />}
+                  <span className={cn("truncate", mono && "font-mono text-xs")}>{o.label || o.value}</span>
+                  {o.hint && <span className="ml-auto shrink-0 text-[10px] text-muted-fg">{o.hint}</span>}
+                </button>
+              </li>
+            );
+          })}
+        </ul>,
+        document.body,
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/MobileHint.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { MessageSquare, Smartphone, X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { installStance, onInstallStateChange, promptInstall } from "../lib/pwa";
+import { cn } from "../lib/cn";
+import { t } from "../i18n";
+
+/**
+ * "You are on a phone, and this is the desktop panel."
+ *
+ * The manifest's start_url points at /mobile, but that only applies once the
+ * app is INSTALLED. Opening the URL in a browser lands on `/` — the desktop
+ * shell, on a 400px screen — which is exactly where the phone surface is least
+ * discoverable and where the install banner (which lives inside /mobile) never
+ * appears. So the two offers go here, on the screen you actually land on.
+ *
+ * Deliberately not a redirect: someone may want the full panel on a tablet, or
+ * on a phone, and being moved somewhere else without asking is worse than a
+ * card you can dismiss.
+ */
+const DISMISSED = "apx.mobilehint.dismissed";
+const NARROW = 820;
+
+export function MobileHint() {
+  const navigate = useNavigate();
+  const [, bump] = useState(0);
+  const [narrow, setNarrow] = useState(() => window.innerWidth <= NARROW);
+  const [hidden, setHidden] = useState(() => {
+    try {
+      return localStorage.getItem(DISMISSED) === "1";
+    } catch {
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    const onResize = () => setNarrow(window.innerWidth <= NARROW);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  // Chrome fires beforeinstallprompt whenever it likes, usually after paint.
+  useEffect(() => onInstallStateChange(() => bump((n) => n + 1)), []);
+
+  if (hidden || !narrow) return null;
+
+  const stance = installStance();
+  const canInstall = stance.kind === "prompt";
+
+  const dismiss = () => {
+    setHidden(true);
+    try {
+      localStorage.setItem(DISMISSED, "1");
+    } catch {
+      /* private mode: gone for this session, which is enough */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-x-3 z-50 flex items-center gap-2 rounded-2xl border border-border bg-card/95 p-2 shadow-lg backdrop-blur",
+        // Above the home indicator, and above anything the page floats there.
+        "bottom-[max(0.75rem,env(safe-area-inset-bottom))]",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => navigate("/m/chat")}
+        className="flex min-w-0 flex-1 items-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-medium text-primary-foreground"
+      >
+        <MessageSquare size={15} className="shrink-0" />
+        <span className="truncate">{t("mobile_link.open_chat")}</span>
+      </button>
+      {canInstall && (
+        <button
+          type="button"
+          onClick={() => void promptInstall()}
+          className="flex shrink-0 items-center gap-1.5 rounded-xl border border-border px-3 py-2 text-sm"
+        >
+          <Smartphone size={15} />
+          <span className="hidden xs:inline">{t("access.install_now")}</span>
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label={t("common.close")}
+        className="shrink-0 rounded-lg p-2 text-muted-fg hover:text-foreground"
+      >
+        <X size={15} />
+      </button>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/MobileLinkDialog.tsx

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Copy, ShieldAlert } from "lucide-react";
+import { Dialog, Button, Spinner } from "./ui";
+import { Qr } from "./common/Qr";
+import { useToast } from "./Toast";
+import { Net, Pair, HttpError } from "../lib/api";
+import type { Endpoint } from "../lib/api/net";
+import { t } from "../i18n";
+import { toneText } from "../lib/tone";
+
+/**
+ * Getting the phone surface ONTO a phone.
+ *
+ * `/m/chat` is a URL like any other, which means the honest answer to "how do I
+ * open this on my phone" was "type a LAN address by hand". The QR here carries
+ * the whole thing in one scan: the best address this daemon has, the /m/chat
+ * path, and — when the panel is running on the machine itself, which is the
+ * only place allowed to mint one — a pairing nonce, so the phone lands already
+ * authenticated instead of on a "pair this device" screen.
+ *
+ * Best address means the https:// one when there is a tailnet certificate. Not
+ * a preference: the origin a phone arrives at is the origin its installed app
+ * launches at forever, and only a secure one can install as an app, record a
+ * voice note, or reach the clipboard.
+ */
+export function MobileLinkDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const toast = useToast();
+  const [endpoint, setEndpoint] = useState<Endpoint | null>(null);
+  const [pairingId, setPairingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [paired, setPaired] = useState(false);
+  const pollRef = useRef<number | null>(null);
+
+  const start = useCallback(async () => {
+    setError(null);
+    setPaired(false);
+    setPairingId(null);
+    try {
+      const net = await Net.endpoints();
+      // The daemon already ranks them by how long the address keeps working;
+      // skip loopback, which is the one address a phone can never reach.
+      const reachable = net.endpoints.filter((e) => e.kind !== "loopback");
+      setEndpoint(reachable[0] || net.endpoints[0] || null);
+    } catch (e) {
+      setError((e as Error).message);
+      return;
+    }
+    try {
+      const init = await Pair.init();
+      setPairingId(init.pairing_id);
+    } catch (e) {
+      // 403 = this panel is not on the daemon's machine, so it cannot mint a
+      // nonce. The link still works; the phone pairs on arrival.
+      if (!(e instanceof HttpError && e.status === 403)) {
+        setError((e as Error).message);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) void start();
+    else {
+      setEndpoint(null);
+      setPairingId(null);
+      setError(null);
+      setPaired(false);
+    }
+  }, [open, start]);
+
+  // Say when the phone actually arrives — otherwise the only feedback for a
+  // successful scan is on the other device, in your other hand.
+  useEffect(() => {
+    if (!open || !pairingId || paired) return;
+    let alive = true;
+    const tick = async () => {
+      try {
+        const s = await Pair.status(pairingId);
+        if (!alive) return;
+        if (s.status === "confirmed") {
+          setPaired(true);
+          return;
+        }
+        if (s.status === "expired" || s.status === "unknown") return;
+      } catch {
+        /* transient */
+      }
+      pollRef.current = window.setTimeout(tick, 1500);
+    };
+    pollRef.current = window.setTimeout(tick, 1500);
+    return () => {
+      alive = false;
+      if (pollRef.current) window.clearTimeout(pollRef.current);
+    };
+  }, [open, pairingId, paired]);
+
+  const base = endpoint?.url || window.location.origin;
+  const link = `${base}/m/chat`;
+  // The nonce rides in the FRAGMENT: it never reaches a server, never lands in
+  // a Referer header, and never shows up in a proxy log.
+  const scanUrl = pairingId ? `${link}#pair=${pairingId}` : link;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(scanUrl);
+      toast.success(t("access.copied"));
+    } catch {
+      toast.info(scanUrl);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("mobile_link.title")}
+      description={t("mobile_link.desc")}
+      footer={<Button variant="secondary" onClick={onClose}>{t("common.close")}</Button>}
+    >
+      {error && <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p>}
+
+      {!error && !endpoint && (
+        <div className="flex items-center gap-2 py-8 text-sm text-muted-fg">
+          <Spinner /> {t("common.loading")}
+        </div>
+      )}
+
+      {!error && endpoint && (
+        <div className="flex flex-col items-center gap-3">
+          <Qr value={scanUrl} size={196} />
+
+          {paired ? (
+            <p className={`text-sm font-medium ${toneText.emerald}`}>{t("mobile_link.paired")}</p>
+          ) : (
+            <p className="text-center text-xs text-muted-fg">
+              {pairingId ? t("mobile_link.scan_paired") : t("mobile_link.scan_plain")}
+            </p>
+          )}
+
+          <div className="flex w-full items-center gap-2 rounded-md border border-border bg-muted/30 px-2 py-1.5">
+            <span className="min-w-0 flex-1 truncate font-mono text-[11px]">{link}</span>
+            <Button size="sm" variant="ghost" onClick={() => void copy()} aria-label={t("access.copy")}>
+              <Copy size={13} />
+            </Button>
+          </div>
+
+          {!endpoint.secure && (
+            <p className="flex items-start gap-2 rounded-md bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
+              <ShieldAlert size={13} className="mt-0.5 shrink-0" />
+              <span>{t("mobile_link.insecure")}</span>
+            </p>
+          )}
+        </div>
+      )}
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/ModelCombobox.tsx

@@ -1,135 +1,43 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { AlertTriangle, ChevronDown } from "lucide-react";
-import { cn } from "../lib/cn";
-import { Tip } from "./ui/tip";
+import { useMemo } from "react";
+import { Combobox } from "./Combobox";
 import { t } from "../i18n";
 
-// Editable combobox: type freely, matching options appear below; click one to
-// pick it, or keep your own text. Behaves like a text input that is also a
-// select (the panda.project model picker pattern).
+// Model picker: a plain string list on top of the shared <Combobox>. Typing a
+// model id that is not in the catalog is always allowed — provider catalogs
+// move faster than ours.
 export function ModelCombobox({
   value,
   onChange,
+  onPick,
   options,
   placeholder = t("shared_ui.model_combobox_ph"),
   invalid,
   invalidHint,
   className,
+  emptyHint,
 }: {
   value: string;
   onChange: (v: string) => void;
+  onPick?: (v: string) => void;
   options: string[];
   placeholder?: string;
   invalid?: boolean;
   invalidHint?: string;
   className?: string;
+  emptyHint?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState(value);
-  const wrapRef = useRef<HTMLDivElement | null>(null);
-  const listRef = useRef<HTMLUListElement | null>(null);
-  const [menuRect, setMenuRect] = useState<{ top: number; left: number; width: number } | null>(null);
-
-  useEffect(() => { setQuery(value); }, [value]);
-
-  // Position the portal'd list right under the input, in viewport coords.
-  // Recompute on open, scroll, and resize so it tracks the trigger even
-  // inside a scrolling modal.
-  useLayoutEffect(() => {
-    if (!open) return;
-    const compute = () => {
-      const el = wrapRef.current;
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
-    };
-    compute();
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [open]);
-
-  // Close on outside click — must allow clicks inside the portal'd list too.
-  useEffect(() => {
-    if (!open) return;
-    const onDoc = (e: MouseEvent) => {
-      const t = e.target as Node;
-      if (wrapRef.current?.contains(t)) return;
-      if (listRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", onDoc);
-    return () => document.removeEventListener("mousedown", onDoc);
-  }, [open]);
-
-  // If the visible text matches the committed value, the user hasn't typed
-  // anything new yet — show the full list so they can see every option.
-  // Only narrow when they actively start filtering.
-  const q = query.trim().toLowerCase();
-  const isUntouched = query === value;
-  const filtered = q && !isUntouched ? options.filter((o) => o.toLowerCase().includes(q)) : options;
-
-  const pick = (o: string) => { onChange(o); setQuery(o); setOpen(false); };
-
+  const opts = useMemo(() => options.map((o) => ({ value: o })), [options]);
   return (
-    <div ref={wrapRef} className={cn("relative", className)}>
-      <div
-        className={cn(
-          "flex items-center gap-1 rounded-lg border bg-background px-2.5 transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
-          invalid ? "border-amber-500/60" : "border-border",
-        )}
-      >
-        {invalid && (
-          <Tip content={invalidHint || t("models_ui.invalid_hint")}>
-            <span>
-              <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
-            </span>
-          </Tip>
-        )}
-        <input
-          value={query}
-          placeholder={placeholder}
-          onChange={(e) => { setQuery(e.target.value); onChange(e.target.value); setOpen(true); }}
-          onFocus={() => setOpen(true)}
-          className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-fg/60"
-        />
-        <button
-          type="button"
-          tabIndex={-1}
-          onClick={() => setOpen((v) => !v)}
-          className="shrink-0 text-muted-fg hover:text-foreground"
-        >
-          <ChevronDown className="size-4" />
-        </button>
-      </div>
-
-      {open && filtered.length > 0 && menuRect && createPortal(
-        <ul
-          ref={listRef}
-          style={{ position: "fixed", top: menuRect.top, left: menuRect.left, width: menuRect.width }}
-          className="z-[1000] max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-md ring-1 ring-foreground/10"
-        >
-          {filtered.map((o) => (
-            <li key={o}>
-              <button
-                type="button"
-                onMouseDown={(e) => { e.preventDefault(); pick(o); }}
-                className={cn(
-                  "flex w-full items-center rounded-md px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-fg",
-                  o === value && "bg-accent/50",
-                )}
-              >
-                <span className="truncate font-mono text-xs">{o}</span>
-              </button>
-            </li>
-          ))}
-        </ul>,
-        document.body,
-      )}
-    </div>
+    <Combobox
+      value={value}
+      onChange={onChange}
+      onPick={onPick}
+      options={opts}
+      placeholder={placeholder}
+      invalid={invalid}
+      invalidHint={invalidHint}
+      className={className}
+      emptyHint={emptyHint}
+    />
   );
 }

package/src/interfaces/web/src/components/{routines/ReadOnlyBlock.tsx → ReadOnlyBlock.tsx}

@@ -1,13 +1,22 @@
-import { cn } from "../../lib/cn";
-import { t } from "../../i18n";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { t } from "../i18n";
 
 /** A titled, read-only, scrollable block — the detail-view stand-in for an editor textarea. */
-export function ReadOnlyBlock({ title, body, mono }: { title: string; body: string; mono?: boolean }) {
+export function ReadOnlyBlock({
+  title, body, mono, empty,
+}: {
+  title: string;
+  body: string;
+  mono?: boolean;
+  /** Shown when there is nothing to read; say what the field is FOR. */
+  empty?: ReactNode;
+}) {
   return (
     <div className="space-y-1">
       <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{title}</div>
       <div className={cn("max-h-44 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-muted/20 px-3 py-2 text-xs", mono && "font-mono")}>
-        {body.trim() ? body : <span className="text-muted-fg">{t("project.routines.block_empty")}</span>}
+        {body.trim() ? body : <span className="text-muted-fg">{empty ?? t("project.routines.block_empty")}</span>}
       </div>
     </div>
   );

package/src/interfaces/web/src/components/Roby.tsx

@@ -25,13 +25,15 @@ export function Roby({ mood = "happy", className }: { mood?: RobyMood; className
   const face = FACES[mood] ?? FACES.happy;
   const [el, er] = face.eyes;
   // Recessed eye "screens" + floating accent sit in a dimmer emerald; the bright
-  // frame, pupils and mouth inherit text-emerald-400 from the wrapper.
-  const dim = "text-emerald-700 dark:text-emerald-600/70";
+  // frame, pupils and mouth inherit the wrapper's emerald. Both halves flip
+  // with the theme: on a white ground the bright part has to be the DARK
+  // shade and the dim part the faded one, or the mascot reads inside-out.
+  const dim = "text-emerald-600/45 dark:text-emerald-600/70";
   return (
     <div
       aria-hidden
       className={cn(
-        "select-none whitespace-pre font-mono leading-none text-emerald-400",
+        "select-none whitespace-pre font-mono leading-none text-emerald-700 dark:text-emerald-400",
         className
       )}
     >