@hienlh/ppm 0.23.5 → 0.23.7

package/src/web/components/chat/message-input.tsx

@@ -3,6 +3,8 @@ import { useProjectStore } from "@/stores/project-store";
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
+import { useWhisperVoiceInput } from "@/hooks/use-whisper-voice-input";
+import { useSettingsStore } from "@/stores/settings-store";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { downscaleImage } from "@/lib/image-resize";
 import { INLINE_IMAGE_LIMITS } from "@/lib/image-resize-limits";
@@ -20,6 +22,8 @@ import type { SlashItem } from "./slash-command-picker";
 import { fetchSlashItems, clearSlashItemsCache } from "@/lib/slash-items-cache";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
+import { PromptCacheChip } from "./prompt-cache-chip";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
 
 /**
  * Base64 payload for an image file, or undefined when it cannot be read.
@@ -136,6 +140,8 @@ interface MessageInputProps {
   thinking?: boolean;
   /** Thinking toggle handler */
   onThinkingChange?: (enabled: boolean) => void;
+  /** This session's prompt-cache clock, for the countdown chip */
+  promptCache?: PromptCacheState | null;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -172,6 +178,7 @@ export const MessageInput = memo(function MessageInput({
   onEffortChange,
   thinking,
   onThinkingChange,
+  promptCache,
   configurationPending = false,
 }: MessageInputProps) {
   // Uncontrolled textarea: value lives in DOM + ref, not React state.
@@ -248,8 +255,16 @@ export const MessageInput = memo(function MessageInput({
     [getUserHistory, writeTextareas, getVisibleTextarea],
   );
 
-  // Voice input (Web Speech API)
-  const voice = useVoiceInput();
+  // Voice input. Two engines behind the same button: the browser's own
+  // recogniser (text appears as you speak, but Chrome/Edge/Safari only) and
+  // Whisper running on the PPM host (any browser, answers once at the end).
+  // Settings picks, per device; an engine the device cannot do falls back.
+  const voiceEngine = useSettingsStore((s) => s.voiceEngine);
+  const browserVoice = useVoiceInput();
+  const whisperVoice = useWhisperVoiceInput();
+  const useWhisper = voiceEngine === "whisper" && whisperVoice.supported;
+  const voice = useWhisper ? whisperVoice : browserVoice;
+  const isTranscribing = useWhisper && whisperVoice.isTranscribing;
   // Store pre-voice text so voice appends to existing input
   const preVoiceTextRef = useRef("");
   const voiceResultCb = useCallback((text: string) => {
@@ -268,13 +283,20 @@ export const MessageInput = memo(function MessageInput({
     }
   }, [writeTextareas, getVisibleTextarea]);
   const handleVoiceToggle = useCallback(() => {
+    // The shortcut reaches this while Whisper is still working on the last
+    // recording, where the button is already disabled.
+    if (isTranscribing) return;
     if (voice.isListening) {
       voice.stop();
     } else {
       preVoiceTextRef.current = valueRef.current.trim();
       voice.start(voiceResultCb);
     }
-  }, [voice.isListening, voice.start, voice.stop, voiceResultCb]);
+  }, [voice.isListening, voice.start, voice.stop, voiceResultCb, isTranscribing]);
+
+  const micLabel = isTranscribing
+    ? "Transcribing"
+    : voice.isListening ? "Stop voice input" : "Start voice input";
 
   // Listen for global keyboard shortcut (Cmd+Shift+V) to toggle voice.
   // Guarded so that only the focused panel's chat reacts — every chat tab stays
@@ -691,7 +713,13 @@ export const MessageInput = memo(function MessageInput({
     slashPickerOpenRef.current = false;
     onFileStateChange?.(false, "");
     filePickerOpenRef.current = false;
-    if (voice.isListening) voice.stop();
+    // Sending closes the mic. Whisper's recording is dropped rather than
+    // transcribed: its text would arrive seconds later, into the box the
+    // message just left.
+    if (voice.isListening) {
+      if (useWhisper) whisperVoice.cancel();
+      else voice.stop();
+    }
     onSend(content, readyAttachments, isStreaming ? priority : undefined);
     writeTextareas("");
     // Revoke preview URLs
@@ -707,7 +735,8 @@ export const MessageInput = memo(function MessageInput({
       if (textareaRef.current) textareaRef.current.style.height = "auto";
       if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
     }
-  }, [attachments, agentTag, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority, writeTextareas]);
+  }, [attachments, agentTag, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority, writeTextareas,
+      voice.isListening, voice.stop, whisperVoice.cancel, useWhisper]);
 
   const handleSend = useCallback(() => {
     if (disabled) return;
@@ -933,7 +962,7 @@ export const MessageInput = memo(function MessageInput({
         {/* Attachment chips (inside container, aligned with input) */}
         <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: mode chip + provider selector row */}
-        <div className="flex items-center gap-1 px-2 pt-2 md:hidden relative">
+        <div className="flex flex-wrap items-center gap-1 px-2 pt-2 md:hidden relative">
           {!configurationPending && <>
           <ModeChip
             mode={permissionMode ?? "bypassPermissions"}
@@ -967,6 +996,7 @@ export const MessageInput = memo(function MessageInput({
             />
           )}
           {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
+          <PromptCacheChip promptCache={promptCache ?? null} />
         </div>
         {/* Mobile: single row — attach + textarea + mic + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
@@ -996,15 +1026,17 @@ export const MessageInput = memo(function MessageInput({
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
-              disabled={disabled}
+              disabled={disabled || isTranscribing}
               className={`flex items-center justify-center size-8 shrink-0 rounded-[10px] transition-colors disabled:opacity-50 ${
                 voice.isListening
                   ? "bg-error text-white animate-pulse"
                   : "text-text-3 hover:text-text-primary"
               }`}
-              aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+              aria-label={micLabel}
             >
-              {voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
+              {isTranscribing
+                ? <Loader2 className="size-4 animate-spin" />
+                : voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
             </button>
           )}
           {showCancel ? (
@@ -1030,7 +1062,7 @@ export const MessageInput = memo(function MessageInput({
         {/* Desktop: chips row (permission + model) then a single input row
             (paperclip | textarea | mic | send) — design PPMWorkspace composer. */}
         <div className="hidden md:block">
-          <div className="flex items-center gap-1.5 px-2.5 pt-2.5">
+          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
             {/* Mode indicator chip */}
             {!configurationPending && <div className="relative">
               <ModeChip
@@ -1066,6 +1098,7 @@ export const MessageInput = memo(function MessageInput({
               />
             )}
             {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
+            <PromptCacheChip promptCache={promptCache ?? null} />
           </div>
           <div className="flex items-end gap-2 px-2.5 py-2">
             <button
@@ -1094,15 +1127,17 @@ export const MessageInput = memo(function MessageInput({
               <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
-                disabled={disabled}
+                disabled={disabled || isTranscribing}
                 className={`flex items-center justify-center size-[34px] shrink-0 rounded-[10px] transition-colors disabled:opacity-50 ${
                   voice.isListening
                     ? "bg-error text-white animate-pulse"
                     : "text-text-3 hover:text-text-primary hover:bg-surface-elevated"
                 }`}
-                aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+                aria-label={micLabel}
               >
-                {voice.isListening ? <MicOff className="size-[17px]" /> : <Mic className="size-[17px]" />}
+                {isTranscribing
+                  ? <Loader2 className="size-[17px] animate-spin" />
+                  : voice.isListening ? <MicOff className="size-[17px]" /> : <Mic className="size-[17px]" />}
               </button>
             )}
             {showCancel ? (

package/src/web/components/chat/message-list.tsx

@@ -18,6 +18,9 @@ import { extractJsonlPath } from "./pre-compact-button";
 import { MarkdownContent } from "./message-markdown";
 import { UserBubble } from "./message-user-bubble";
 import { InterleavedEvents, ThinkingIndicator } from "./message-events";
+import { CompactionDivider } from "./compaction-divider";
+import { IdleCacheNotice } from "./idle-cache-notice";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
 import { RenderErrorBoundary } from "@/components/shared/markdown-error-boundary";
 
 import {
@@ -50,6 +53,8 @@ interface MessageListProps {
   connectingElapsed?: number;
   statusMessage?: string | null;
   compactStatus?: "compacting" | null;
+  /** Prompt-cache clock for the idle re-cache notice; null when PPM cannot measure it. */
+  promptCache?: PromptCacheState | null;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string, messageId?: string) => void;
@@ -127,6 +132,7 @@ export function MessageList({
   connectingElapsed,
   statusMessage,
   compactStatus,
+  promptCache,
   projectName,
   onFork,
   onEdit,
@@ -454,6 +460,10 @@ export function MessageList({
                 data-msg-index={globalIdx}
                 className="px-4 pt-4 select-none"
               >
+                {/* Above the summary rather than beside it: the rule is what marks
+                    where the conversation was cut, and the summary is the first
+                    message on the new side of it. */}
+                {msg.compaction && <CompactionDivider compaction={msg.compaction} />}
                 <RenderErrorBoundary fallbackContent={msg.content}>
                   <MessageBubble
                     message={msg}
@@ -479,6 +489,11 @@ export function MessageList({
               </div>
             );
           })}
+          {/* Idle only: once a turn starts the cache question is already answered, and the
+              thinking indicator below owns that space. */}
+          {!isStreaming && !pendingApproval && (
+            <IdleCacheNotice promptCache={promptCache ?? null} />
+          )}
           {hasTrailing && (
             <div className="px-4 pt-4 pb-4 space-y-4 select-none">
               {pendingApproval && (

package/src/web/components/chat/prompt-cache-chip.tsx

@@ -0,0 +1,74 @@
+import { Clock } from "@/lib/icons";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMinuteClock } from "@/hooks/use-minute-clock";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
+import {
+  promptCacheStatus,
+  formatCacheCountdown,
+  formatIdleDuration,
+  formatContextTokens,
+} from "../../../shared/prompt-cache-idle";
+
+/**
+ * How long this session's prompt cache has left, in the composer's chip row.
+ *
+ * The banner above the composer only appears once the cache is already gone, which answers
+ * "why was that turn expensive" after the fact. This is the same fact while it can still be
+ * acted on — a countdown says the next message is cheap *now*, and going red says it is not.
+ *
+ * Reads as a chip rather than a control because there is nothing to click: the cache's clock
+ * is not a setting. Renders nothing at all when PPM has not measured the session, so a chat
+ * with no completed turn shows a row unchanged from before.
+ *
+ * The hover text is the only part that is hover-only, and deliberately so: everything it
+ * says is already on screen as the chip's own number and, once expired, as the banner. So
+ * touch loses a sentence of phrasing rather than a fact — which is why this needs no tap
+ * affordance and stays out of the composer's tab order.
+ */
+export function PromptCacheChip({ promptCache }: { promptCache: PromptCacheState | null }) {
+  const status = promptCacheStatus(promptCache, useMinuteClock());
+  if (status.kind === "unknown") return null;
+
+  const cold = status.kind === "cold";
+  const label = status.kind === "cold"
+    ? formatIdleDuration(status.idleMs)
+    : formatCacheCountdown(status.remainingMs);
+
+  let detail: string;
+  if (status.kind !== "cold") {
+    detail = `Prompt cache warm, about ${label.replace(/m$/, " min")} left.`;
+  } else if (status.reason === "compacted") {
+    // No token figure here on purpose: what the next message re-caches is the summary the
+    // compaction just produced, and no API call has reported its size yet.
+    detail = `Prompt cache does not cover the compacted conversation. Compacted ${label} ago, so your next message will re-cache it.`;
+  } else {
+    detail = `Prompt cache expired ${label} ago. Your next message re-sends ${
+      status.contextTokens != null
+        ? `about ${formatContextTokens(status.contextTokens)} tokens`
+        : "the whole transcript"
+    } at full price.`;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          // Same shape as `ModeChip` and `PriorityToggle` beside it; only the colour carries
+          // the state, and only once the cache is gone — a countdown still running is not news.
+          className={`inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
+            cold
+              ? "text-error border-error/40 bg-error/10"
+              : "text-text-2 bg-panel-2 border-border-soft"
+          }`}
+        >
+          <Clock className="size-3" />
+          {/* `tabular-nums` so a minute ticking over does not shift the chips beside it. */}
+          <span className="tabular-nums">{label}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-[240px] text-xs">
+        {detail}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/web/components/editor/code-editor.tsx

@@ -860,6 +860,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
               onToggle={setLspEnabled}
               status={lsp.status}
               diagnostics={lsp.diagnostics}
+              onInstall={lsp.install}
             />
           )}
           <EditorLanguagePicker value={effectiveLanguage} onChange={handleLanguageChange} />

package/src/web/components/editor/editor-language-service.tsx

@@ -23,6 +23,14 @@ import { useTabStore } from "@/stores/tab-store";
 export interface EditorLspState {
   status: LspDocumentStatus | null;
   diagnostics: LspDiagnostic[];
+  /**
+   * Install the server this file has none of.
+   *
+   * Handed up rather than called from the toolbar directly: the indicator lives on the
+   * editor's static path, and one runtime import of the LSP client there would merge this
+   * whole chunk back into the editor's — see `editor-lsp-lazy-boundary.test.ts`.
+   */
+  install?: (serverId: string) => Promise<void>;
 }
 
 const NO_LSP_STATE: EditorLspState = { status: null, diagnostics: [] };
@@ -39,7 +47,7 @@ interface EditorLanguageServiceProps {
 export function EditorLanguageService({
   editor, monaco, projectName, filePath, onState,
 }: EditorLanguageServiceProps) {
-  const { status, diagnostics } = useLsp({ editor, monaco, projectName, filePath, enabled: true });
+  const { status, diagnostics, install } = useLsp({ editor, monaco, projectName, filePath, enabled: true });
 
   // F12. Monaco's own binding would swap another file's model into this
   // editor, leaving the tab titled and dirty-tracked as the old file. Disposed
@@ -64,8 +72,8 @@ export function EditorLanguageService({
   onStateRef.current = onState;
 
   useEffect(() => {
-    onStateRef.current({ status, diagnostics });
-  }, [status, diagnostics]);
+    onStateRef.current({ status, diagnostics, install });
+  }, [status, diagnostics, install]);
 
   // The editor keeps drawing whatever it was last told, so a language service
   // that is going away has to retract its own status.

package/src/web/components/editor/lsp-status.tsx

@@ -9,9 +9,11 @@
  * three things is true: it is working, it is starting, or it is not installed
  * and here is the one command that fixes that.
  *
- * Nothing here installs anything. The command is shown to be copied and run
- * deliberately; an editor that reaches out to the network and installs a
- * binary because a file was opened is doing something the user did not ask for.
+ * Nothing here installs anything on its own. An editor that reaches out to the
+ * network and installs a binary because a file was opened is doing something
+ * the user did not ask for — but a button that says Install is the user asking,
+ * so the missing server has one, and the command stays for anyone who would
+ * rather run it themselves or whose server is not one PPM can install.
  *
  * The same argument is why the *off* state has a chip. A language server is a
  * real process on the host — one was 854 MB resident — so PPM keeps it off
@@ -21,12 +23,13 @@
  * the on-state chip opens.
  */
 import { useState } from "react";
-import { AlertTriangle, Check, Copy, Loader2, Zap, ZapOff } from "@/lib/icons";
+import { AlertTriangle, Check, Copy, Download, Loader2, Zap, ZapOff } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { useIsMobile } from "@/hooks/use-is-mobile";
-import type { LspDocumentStatus } from "@/lib/lsp/lsp-client";
+import type { LspDocumentStatus, LspMissingServer } from "@/lib/lsp/lsp-client";
 import type { LspDiagnostic } from "@/hooks/use-lsp";
 
 interface LspStatusProps {
@@ -35,9 +38,16 @@ interface LspStatusProps {
   onToggle: (enabled: boolean) => void;
   status: LspDocumentStatus | null;
   diagnostics: LspDiagnostic[];
+  /**
+   * Install the missing server, and reopen this file against it.
+   *
+   * Comes from the language service, which is behind a `lazy()` — this component is on the
+   * editor's static path, so it may not reach the LSP client itself.
+   */
+  onInstall?: (serverId: string) => Promise<void>;
 }
 
-export function LspStatus({ enabled, onToggle, status, diagnostics }: LspStatusProps) {
+export function LspStatus({ enabled, onToggle, status, diagnostics, onInstall }: LspStatusProps) {
   const [open, setOpen] = useState(false);
   const isMobile = useIsMobile();
 
@@ -106,6 +116,7 @@ export function LspStatus({ enabled, onToggle, status, diagnostics }: LspStatusP
           warnings={warnings}
           isMobile={isMobile}
           onToggle={onToggle}
+          onInstall={onInstall}
           onClose={() => setOpen(false)}
         />
       )}
@@ -114,17 +125,25 @@ export function LspStatus({ enabled, onToggle, status, diagnostics }: LspStatusP
 }
 
 function LspStatusDetails({
-  status, errors, warnings, isMobile, onToggle, onClose,
+  status, errors, warnings, isMobile, onToggle, onInstall, onClose,
 }: {
   status: LspDocumentStatus;
   errors: number;
   warnings: number;
   isMobile: boolean;
   onToggle: (enabled: boolean) => void;
+  onInstall?: (serverId: string) => Promise<void>;
   onClose: () => void;
 }) {
   const body = (
-    <LspStatusBody status={status} errors={errors} warnings={warnings} isMobile={isMobile} onToggle={onToggle} />
+    <LspStatusBody
+      status={status}
+      errors={errors}
+      warnings={warnings}
+      isMobile={isMobile}
+      onToggle={onToggle}
+      onInstall={onInstall}
+    />
   );
 
   if (isMobile) {
@@ -146,13 +165,14 @@ function LspStatusDetails({
 }
 
 function LspStatusBody({
-  status, errors, warnings, isMobile, onToggle,
+  status, errors, warnings, isMobile, onToggle, onInstall,
 }: {
   status: LspDocumentStatus;
   errors: number;
   warnings: number;
   isMobile: boolean;
   onToggle: (enabled: boolean) => void;
+  onInstall?: (serverId: string) => Promise<void>;
 }) {
   return (
     <div className="p-4 space-y-4 overflow-y-auto text-sm leading-relaxed">
@@ -181,10 +201,15 @@ function LspStatusBody({
           <p>{status.message}</p>
           {status.server && (
             <div className="space-y-2">
-              <p className="text-xs text-muted-foreground">
-                Install it, then reopen this file. PPM does not install it for you — that would mean
-                fetching and running a binary because you opened a file.
-              </p>
+              {status.reason === "not-installed" && status.server.installable && onInstall ? (
+                <>
+                  <p className="text-xs text-muted-foreground">{installNote(status.server.installWith)}</p>
+                  <InstallServerButton server={status.server} isMobile={isMobile} onInstall={onInstall} />
+                  <p className="text-xs text-muted-foreground">Or run it yourself:</p>
+                </>
+              ) : (
+                <p className="text-xs text-muted-foreground">{cannotInstallNote(status.server.installWith)}</p>
+              )}
               <CopyableCommand command={status.server.installHint} isMobile={isMobile} />
             </div>
           )}
@@ -209,6 +234,83 @@ function LspStatusBody({
   );
 }
 
+/**
+ * What pressing Install will actually do.
+ *
+ * Worth saying, because the three are not the same promise: two of them leave the machine's own
+ * tools untouched, and the rustup one deliberately does not — a rust-analyzer belongs to a
+ * toolchain, so PPM adds the component rather than keeping a copy that would be the wrong one
+ * for a project pinning another toolchain.
+ */
+function installNote(installWith: LspMissingServer["installWith"]): string {
+  switch (installWith) {
+    case "go":
+      return "PPM builds it with the Go on this machine and keeps the binary in its own folder,"
+        + " leaving your GOBIN alone. A first build takes a minute or two.";
+    case "rustup":
+      return "PPM asks rustup to add the component to the toolchain this project uses — the same"
+        + " as running the command below yourself.";
+    default:
+      return "PPM downloads it from npm into its own folder. Nothing you installed globally"
+        + " changes, and this file picks it up without being reopened.";
+  }
+}
+
+/** Why there is no button: either PPM has no toolchain to do it with, or it is a system package. */
+function cannotInstallNote(installWith: LspMissingServer["installWith"]): string {
+  switch (installWith) {
+    case "go":
+      return "Install it, then reopen this file. PPM installs language servers but never toolchains,"
+        + " and it cannot find a Go on this host.";
+    case "rustup":
+      return "Install it, then reopen this file. PPM installs language servers but never toolchains,"
+        + " and it cannot find rustup on this host.";
+    default:
+      return "Install it, then reopen this file. This one comes from a system package manager,"
+        + " which PPM will not run on your behalf.";
+  }
+}
+
+/**
+ * The Install button, and whatever the host said when it did not work.
+ *
+ * The progress is this component's own state rather than the caller's, so closing the dialog
+ * mid-install cancels nothing: the host finishes either way and the file's status is what
+ * reports it. Reopening during one shows an idle button, and pressing it again joins the
+ * install already running rather than starting a second over the same lockfile.
+ */
+function InstallServerButton({
+  server, isMobile, onInstall,
+}: {
+  server: LspMissingServer;
+  isMobile: boolean;
+  onInstall: (serverId: string) => Promise<void>;
+}) {
+  const [installing, setInstalling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <>
+      <Button
+        type="button"
+        disabled={installing}
+        onClick={() => {
+          setInstalling(true);
+          setError(null);
+          onInstall(server.id)
+            .catch((e) => setError(e instanceof Error ? e.message : String(e)))
+            .finally(() => setInstalling(false));
+        }}
+        className={`w-full ${isMobile ? "min-h-11" : ""}`}
+      >
+        {installing ? <Loader2 className="size-4 animate-spin" /> : <Download className="size-4" />}
+        {installing ? `Installing ${server.displayName}…` : `Install ${server.displayName}`}
+      </Button>
+      {error && <p className="text-xs text-red-500 break-words">{error}</p>}
+    </>
+  );
+}
+
 function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
     <div className="flex gap-2 items-baseline">