@agent-native/core 0.83.0 → 0.84.1

package/corpus/core/src/client/AssistantChat.tsx

@@ -91,6 +91,7 @@ import {
   getRepoMessage,
   shouldImportServerThreadData,
   dedupeRepoMessagesById,
+  dropEmptyAssistantMessages,
 } from "./chat/repo-helpers.js";
 import {
   BuilderSetupCard,
@@ -885,7 +886,7 @@ function ensureMessageMetadata(repo: any): any {
   // throws "performOp/link: A message with the same id already exists in the
   // parent tree" (Sentry AGENT-NATIVE-BROWSER-2Q) when fed repeated ids. No-op
   // for the normal no-duplicate case. See dedupeRepoMessagesById.
-  repo = dedupeRepoMessagesById(repo);
+  repo = dropEmptyAssistantMessages(dedupeRepoMessagesById(repo));
   if (!repo?.messages || !Array.isArray(repo.messages)) return repo;
   for (const entry of repo.messages) {
     // Handle both wrapped ({ message: { ... } }) and flat ({ role, ... }) formats
@@ -1347,6 +1348,7 @@ const AssistantChatInner = forwardRef<
   // True during the 250ms continuation window and startup of the next chunk
   // (adapter's auto-continue delay before POSTing the next chunk).
   const [isAutoResuming, setIsAutoResuming] = useState(false);
+  const [optimisticRunning, setOptimisticRunning] = useState(false);
   const [runningActivityLabel, setRunningActivityLabel] = useState<
     string | null
   >(null);
@@ -1379,7 +1381,8 @@ const AssistantChatInner = forwardRef<
   // Real running state — drives submission/queue gating. Treat reconnecting
   // to an active run the same as running, UNLESS the user has explicitly
   // clicked stop (forceStopped).
-  const isRunning = !forceStopped && (isRuntimeRunning || isReconnecting);
+  const isRunning =
+    !forceStopped && (isRuntimeRunning || isReconnecting || optimisticRunning);
   const textStreaming = isRunning || externalStreaming;
   // UI-only running state — drives the stop button and thinking indicator.
   const showRunningInUI = isRunning;
@@ -1402,6 +1405,16 @@ const AssistantChatInner = forwardRef<
   // a running turn without adding many unstable closure deps to its dep list.
   const stopActiveRunRef = useRef<() => void>(() => {});
 
+  const markOptimisticRunning = useCallback(() => {
+    setOptimisticRunning(true);
+    if (typeof window === "undefined") return;
+    window.dispatchEvent(
+      new CustomEvent("agentNative.chatRunning", {
+        detail: { isRunning: true, tabId: tabId || threadId },
+      }),
+    );
+  }, [tabId, threadId]);
+
   useEffect(() => {
     if (lastBroadcastRunningRef.current === isRunning) return;
     lastBroadcastRunningRef.current = isRunning;
@@ -1412,6 +1425,20 @@ const AssistantChatInner = forwardRef<
     );
   }, [isRunning, tabId, threadId]);
 
+  useEffect(() => {
+    if (!optimisticRunning) return;
+    if (!forceStopped && !isRuntimeRunning && !isReconnecting) return;
+    setOptimisticRunning(false);
+  }, [forceStopped, isReconnecting, isRuntimeRunning, optimisticRunning]);
+
+  useEffect(() => {
+    if (!optimisticRunning) return;
+    const timer = window.setTimeout(() => {
+      setOptimisticRunning(false);
+    }, 15_000);
+    return () => window.clearTimeout(timer);
+  }, [optimisticRunning]);
+
   // ─── Chat persistence ──────────────────────────────────────────────
   const hasRestoredRef = useRef(false);
   const [initialCachedThreadSnapshot] = useState(() =>
@@ -1468,6 +1495,7 @@ const AssistantChatInner = forwardRef<
       // re-evaluates against the runtime exactly as before instead of
       // short-circuiting to the rejected repo.
       let settled = true;
+      let settledRepo = repo;
       if (repo?.messages?.length > 0) {
         let shouldImport = true;
         try {
@@ -1482,7 +1510,9 @@ const AssistantChatInner = forwardRef<
           if (options?.markTitleGenerated) {
             titleGeneratedRef.current = true;
           }
-          threadRuntime.import(ensureMessageMetadata(repo));
+          const importRepo = ensureMessageMetadata(repo);
+          threadRuntime.import(importRepo);
+          settledRepo = importRepo;
         } else {
           settled = false;
         }
@@ -1503,7 +1533,7 @@ const AssistantChatInner = forwardRef<
       }
       if (settled && signature !== null) {
         lastImportedSignatureRef.current = signature;
-        lastImportedRepoRef.current = repo;
+        lastImportedRepoRef.current = settledRepo;
       }
       return repo;
     },
@@ -2594,6 +2624,7 @@ const AssistantChatInner = forwardRef<
   // all the stop-related state in its own dep array.
   const stopActiveRun = useCallback(() => {
     setForceStopped(true);
+    setOptimisticRunning(false);
     const activeRun = getActiveRun();
     const runIdToAbort = reconnectRunIdRef.current ?? activeRun?.runId;
     userStoppedRunRef.current = {
@@ -2834,19 +2865,25 @@ const AssistantChatInner = forwardRef<
           },
         ]);
       } else {
-        appendThreadMessage({
-          role: "user",
-          content: [{ type: "text", text: submittedText }],
-          ...(messageAttachments.length > 0
-            ? { attachments: messageAttachments }
-            : {}),
-          ...createUserMessageRunConfig(
-            references,
-            effectiveRequestMode,
-            recoveryAction,
-            trackInRunsTray,
-          ),
-        } as Parameters<typeof threadRuntime.append>[0]);
+        markOptimisticRunning();
+        try {
+          appendThreadMessage({
+            role: "user",
+            content: [{ type: "text", text: submittedText }],
+            ...(messageAttachments.length > 0
+              ? { attachments: messageAttachments }
+              : {}),
+            ...createUserMessageRunConfig(
+              references,
+              effectiveRequestMode,
+              recoveryAction,
+              trackInRunsTray,
+            ),
+          } as Parameters<typeof threadRuntime.append>[0]);
+        } catch (error) {
+          setOptimisticRunning(false);
+          throw error;
+        }
       }
       if (submitted.includesContext) {
         updateComposerContextItems(() => []);
@@ -2859,6 +2896,7 @@ const AssistantChatInner = forwardRef<
       execMode,
       isRunning,
       materializeFrozenReconnectContent,
+      markOptimisticRunning,
       appendThreadMessage,
       updateComposerContextItems,
     ],
@@ -2918,7 +2956,7 @@ const AssistantChatInner = forwardRef<
         addToQueue(text, images);
       },
       isRunning() {
-        return thread.isRunning;
+        return isRunning;
       },
       focusComposer() {
         tiptapRef.current?.focus();
@@ -2938,9 +2976,9 @@ const AssistantChatInner = forwardRef<
     [
       addToQueue,
       exportCleanThreadRepo,
+      isRunning,
       messages.length,
       stageComposerContextItem,
-      thread.isRunning,
     ],
   );
 
@@ -3110,6 +3148,12 @@ const AssistantChatInner = forwardRef<
     centeredEmptyState && !isRestoring && hasThreadFooterSlot;
   const showComposerSlot =
     Boolean(composerSlot) && (!centerComposerWhenEmpty || centeredEmptyState);
+  const compactMissingKeyEmptyState =
+    missingApiKeySetupAboveComposer &&
+    missingApiKey &&
+    !authError &&
+    showEmptyState &&
+    !isRestoring;
 
   // Clarifying-question surface: the `ask-question` action writes a
   // GuidedQuestionPayload to application_state under "guided-questions". The
@@ -3137,6 +3181,7 @@ const AssistantChatInner = forwardRef<
   const approvalCtx = useMemo<ApprovalContextValue>(
     () => ({
       onApprove: (approvalKey: string) => {
+        markOptimisticRunning();
         appendThreadMessage({
           role: "user",
           content: [
@@ -3159,7 +3204,7 @@ const AssistantChatInner = forwardRef<
         } as Parameters<typeof threadRuntime.append>[0]);
       },
     }),
-    [appendThreadMessage, execMode],
+    [appendThreadMessage, execMode, markOptimisticRunning],
   );
 
   return (
@@ -3170,7 +3215,11 @@ const AssistantChatInner = forwardRef<
             <TextStreamingContext.Provider value={textStreaming}>
               <div
                 data-agent-empty-state={
-                  centeredEmptyState ? "centered" : undefined
+                  centeredEmptyState
+                    ? "centered"
+                    : compactMissingKeyEmptyState
+                      ? "compact-setup"
+                      : undefined
                 }
                 className={cn(
                   "relative flex flex-1 flex-col h-full min-h-0 text-foreground",
@@ -3515,27 +3564,25 @@ const AssistantChatInner = forwardRef<
                   </div>
                 ) : null}
                 {guidedQuestions && guidedQuestions.length > 0 && (
-                  <div className="shrink-0 px-3 pb-2 pt-1">
-                    <div className="rounded-lg border border-border bg-card/60 shadow-sm">
-                      <GuidedQuestionFlow
-                        questions={guidedQuestions}
-                        onSubmit={handleGuidedQuestionsSubmit}
-                        onSkip={handleGuidedQuestionsSkip}
-                        {...(guidedQuestionsTitle
-                          ? { title: guidedQuestionsTitle }
-                          : {})}
-                        {...(guidedQuestionsDescription
-                          ? { description: guidedQuestionsDescription }
-                          : {})}
-                        {...(guidedQuestionsSkipLabel
-                          ? { skipLabel: guidedQuestionsSkipLabel }
-                          : {})}
-                        {...(guidedQuestionsSubmitLabel
-                          ? { submitLabel: guidedQuestionsSubmitLabel }
-                          : {})}
-                        className="h-auto items-stretch justify-stretch bg-transparent"
-                      />
-                    </div>
+                  <div className="shrink-0 px-3 pb-2">
+                    <GuidedQuestionFlow
+                      questions={guidedQuestions}
+                      onSubmit={handleGuidedQuestionsSubmit}
+                      onSkip={handleGuidedQuestionsSkip}
+                      {...(guidedQuestionsTitle
+                        ? { title: guidedQuestionsTitle }
+                        : {})}
+                      {...(guidedQuestionsDescription
+                        ? { description: guidedQuestionsDescription }
+                        : {})}
+                      {...(guidedQuestionsSkipLabel
+                        ? { skipLabel: guidedQuestionsSkipLabel }
+                        : {})}
+                      {...(guidedQuestionsSubmitLabel
+                        ? { submitLabel: guidedQuestionsSubmitLabel }
+                        : {})}
+                      className="h-auto items-stretch justify-stretch bg-transparent"
+                    />
                   </div>
                 )}
                 {showPlanModeCallout && (

package/corpus/core/src/client/DefaultSpinner.tsx

@@ -31,8 +31,15 @@ export function DefaultSpinner() {
       </svg>
       <style>{`
         @keyframes an-spin { to { transform: rotate(360deg) } }
+        html {
+          background: hsl(var(--background, 0 0% 100%));
+          color: hsl(var(--foreground, 240 10% 3.9%));
+        }
         @media (prefers-color-scheme: dark) {
-          html { background: #09090b; color: #fafafa }
+          html {
+            background: hsl(var(--background, 240 10% 3.9%));
+            color: hsl(var(--foreground, 0 0% 98%));
+          }
         }
       `}</style>
     </div>

package/corpus/core/src/client/chat/message-components.tsx

@@ -760,6 +760,46 @@ export function UserMessage() {
 
 // ─── AssistantMessage ─────────────────────────────────────────────────────────
 
+function assistantMessageHasRenderableContent(message: {
+  content?: unknown;
+}): boolean {
+  const content = message.content;
+  if (typeof content === "string") return content.trim().length > 0;
+  if (!Array.isArray(content)) return false;
+  return content.some((part) => {
+    if (!part || typeof part !== "object") return false;
+    const type = (part as { type?: unknown }).type;
+    if (type === "text") {
+      const text = (part as { text?: unknown }).text;
+      return typeof text === "string" && text.trim().length > 0;
+    }
+    return true;
+  });
+}
+
+function assistantMessageStatusIsTerminal(message: {
+  status?: { type?: unknown };
+}): boolean {
+  const statusType = message.status?.type;
+  return statusType === "complete" || statusType === "incomplete";
+}
+
+export function shouldShowAssistantMessageFooter({
+  isLast,
+  chatRunning,
+  hasRenderableContent,
+  statusIsTerminal,
+}: {
+  isLast: boolean;
+  chatRunning: boolean;
+  hasRenderableContent: boolean;
+  statusIsTerminal: boolean;
+}): boolean {
+  if (!hasRenderableContent) return false;
+  if (!isLast) return true;
+  return !chatRunning && statusIsTerminal;
+}
+
 export function AssistantMessage() {
   const [restoreState, setRestoreState] = useState<
     "idle" | "confirming" | "restoring"
@@ -772,7 +812,13 @@ export function AssistantMessage() {
   const isLast =
     thread.messages.length > 0 &&
     thread.messages[thread.messages.length - 1].id === msg.id;
-  const isComplete = !isLast || !chatRunning;
+  const hasRenderableContent = assistantMessageHasRenderableContent(msg);
+  const isComplete = shouldShowAssistantMessageFooter({
+    isLast,
+    chatRunning,
+    hasRenderableContent,
+    statusIsTerminal: assistantMessageStatusIsTerminal(msg),
+  });
   const cpCtx = React.useContext(CheckpointContext);
 
   const handleRestore = useCallback(async () => {
@@ -842,6 +888,8 @@ export function AssistantMessage() {
           p.structuredMeta.toolKind === "write"),
     );
 
+  if (!hasRenderableContent) return null;
+
   return (
     <div
       className="group relative"

package/corpus/core/src/client/chat/repo-helpers.ts

@@ -94,6 +94,77 @@ export function dedupeRepoMessagesById<T extends NormalizedRepo>(
   return { ...repo, messages: deduped };
 }
 
+function repoMessageContentIsEmpty(content: unknown): boolean {
+  if (typeof content === "string") return content.trim().length === 0;
+  if (!Array.isArray(content)) return true;
+  return !content.some((part) => {
+    if (!part || typeof part !== "object") return false;
+    const type = (part as { type?: unknown }).type;
+    if (type === "text") {
+      const text = (part as { text?: unknown }).text;
+      return typeof text === "string" && text.trim().length > 0;
+    }
+    return true;
+  });
+}
+
+function entryWithParentId(
+  entry: RepoEntry,
+  parentId: string | null,
+): RepoEntry {
+  return { ...entry, parentId };
+}
+
+function repairRepoLinks<T extends NormalizedRepo>(
+  repo: T,
+  entries: RepoEntry[],
+): T {
+  const seenIds = new Set<string>();
+  let previousId: string | null = null;
+  const repaired: RepoEntry[] = [];
+
+  for (const entry of entries) {
+    const id = getRepoMessage(entry)?.id;
+    if (typeof id !== "string" || !id) continue;
+    const requestedParentId = entry.parentId;
+    const parentId =
+      requestedParentId === null
+        ? null
+        : typeof requestedParentId === "string" &&
+            seenIds.has(requestedParentId)
+          ? requestedParentId
+          : previousId;
+    repaired.push(entryWithParentId(entry, parentId));
+    seenIds.add(id);
+    previousId = id;
+  }
+
+  const headId =
+    typeof repo.headId === "string" && seenIds.has(repo.headId)
+      ? repo.headId
+      : previousId;
+  return { ...repo, messages: repaired, headId: headId ?? undefined };
+}
+
+export function dropEmptyAssistantMessages<T extends NormalizedRepo>(
+  repo: T | null | undefined,
+): T | null | undefined {
+  if (!repo || !Array.isArray(repo.messages)) return repo;
+
+  let changed = false;
+  const messages = repo.messages.filter((entry) => {
+    const message = getRepoMessage(entry);
+    const drop =
+      message?.role === "assistant" &&
+      repoMessageContentIsEmpty(message.content);
+    if (drop) changed = true;
+    return !drop;
+  });
+
+  if (!changed) return repo;
+  return repairRepoLinks(repo, messages);
+}
+
 export function isAssistantMessageTerminal(
   message: RepoMessage | null,
 ): boolean {

package/corpus/core/src/client/chat/run-recovery.tsx

@@ -436,14 +436,24 @@ export function BuilderSetupCard({
         "agent-builder-setup-card",
         sidebarLayout && "agent-builder-setup-card--sidebar",
         fullWidth
-          ? "w-full pb-2"
+          ? "w-full px-3 pb-2"
           : sidebarLayout
             ? "mx-auto w-full max-w-[42rem] px-3 pb-2"
             : "mx-auto w-full max-w-[42rem] px-3 pb-2 sm:w-fit",
       )}
     >
-      <div className="rounded-lg border border-border/80 bg-background/80 p-3 shadow-sm backdrop-blur">
-        <div className="agent-builder-setup-card__content flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div
+        className={cn(
+          "agent-builder-setup-card__panel rounded-lg border border-border/80 bg-background/80 shadow-sm backdrop-blur",
+          sidebarLayout ? "p-2.5" : "p-3",
+        )}
+      >
+        <div
+          className={cn(
+            "agent-builder-setup-card__content flex flex-col sm:flex-row sm:items-center sm:justify-between",
+            sidebarLayout ? "gap-2" : "gap-3",
+          )}
+        >
           <div className="agent-builder-setup-card__copy min-w-0">
             <h3 className="text-[13px] font-medium text-foreground">
               Connect AI
@@ -456,7 +466,7 @@ export function BuilderSetupCard({
             className={cn(
               "agent-builder-setup-card__actions flex shrink-0",
               sidebarLayout
-                ? "flex-col items-start gap-0 sm:items-center"
+                ? "flex-col items-start gap-1 sm:items-center"
                 : "flex-nowrap items-center gap-2",
             )}
           >
@@ -472,7 +482,7 @@ export function BuilderSetupCard({
               )}
               aria-expanded={keyOpen}
             >
-              {sidebarLayout ? "Or, use API key" : "Use API key"}
+              Use API key
             </button>
           </div>
         </div>

package/corpus/core/src/client/components/ApiKeySettings.tsx

@@ -228,7 +228,7 @@ const styles: Record<string, React.CSSProperties> = {
     marginTop: "8px",
     padding: "6px 12px",
     fontSize: "13px",
-    border: "1px solid rgba(255,255,255,0.15)",
+    border: "1px solid hsl(var(--border))",
     borderRadius: "6px",
     background: "transparent",
     color: "inherit",
@@ -242,8 +242,8 @@ const styles: Record<string, React.CSSProperties> = {
   keyCard: {
     padding: "10px 12px",
     borderRadius: "8px",
-    border: "1px solid rgba(255,255,255,0.08)",
-    background: "rgba(255,255,255,0.03)",
+    border: "1px solid hsl(var(--border))",
+    background: "hsl(var(--card))",
   },
   keyHeader: {
     display: "flex",
@@ -268,7 +268,7 @@ const styles: Record<string, React.CSSProperties> = {
     fontSize: "14px",
   },
   unconfiguredDot: {
-    color: "rgba(255,255,255,0.25)",
+    color: "hsl(var(--muted-foreground) / 0.55)",
     fontSize: "8px",
   },
   requiredBadge: {
@@ -285,8 +285,8 @@ const styles: Record<string, React.CSSProperties> = {
     padding: "7px 10px",
     fontSize: "13px",
     borderRadius: "6px",
-    border: "1px solid rgba(255,255,255,0.12)",
-    background: "rgba(0,0,0,0.2)",
+    border: "1px solid hsl(var(--input))",
+    background: "hsl(var(--background))",
     color: "inherit",
     outline: "none",
     boxSizing: "border-box" as const,
@@ -302,8 +302,8 @@ const styles: Record<string, React.CSSProperties> = {
     fontWeight: 500,
     borderRadius: "6px",
     border: "none",
-    background: "#3b82f6",
-    color: "#fff",
+    background: "hsl(var(--primary))",
+    color: "hsl(var(--primary-foreground))",
     cursor: "pointer",
   },
 };

package/corpus/core/src/client/components/CodeRequiredDialog.tsx

@@ -162,7 +162,9 @@ export function CodeRequiredDialog({
               Object.assign(e.currentTarget.style, s.optionCardHover)
             }
             onMouseLeave={(e) =>
-              Object.assign(e.currentTarget.style, { borderColor: "#e5e7eb" })
+              Object.assign(e.currentTarget.style, {
+                borderColor: "hsl(var(--border))",
+              })
             }
           >
             <div style={s.optionIcon}>
@@ -190,7 +192,9 @@ export function CodeRequiredDialog({
                 Object.assign(e.currentTarget.style, s.optionCardHover)
               }
               onMouseLeave={(e) =>
-                Object.assign(e.currentTarget.style, { borderColor: "#e5e7eb" })
+                Object.assign(e.currentTarget.style, {
+                  borderColor: "hsl(var(--border))",
+                })
               }
               onClick={handleBuilderAgent}
             >
@@ -254,7 +258,7 @@ export function CodeRequiredDialog({
               }
               onMouseLeave={(e) =>
                 Object.assign(e.currentTarget.style, {
-                  borderColor: "#e5e7eb",
+                  borderColor: "hsl(var(--border))",
                 })
               }
             >
@@ -294,7 +298,13 @@ export function CodeRequiredDialog({
         )}
 
         {error && (
-          <p style={{ color: "#ef4444", fontSize: 12, marginTop: 12 }}>
+          <p
+            style={{
+              color: "hsl(var(--destructive))",
+              fontSize: 12,
+              marginTop: 12,
+            }}
+          >
             {error}
           </p>
         )}
@@ -326,8 +336,9 @@ const s: Record<string, React.CSSProperties> = {
   },
   dialog: {
     position: "relative",
-    background: "#fff",
+    background: "hsl(var(--popover))",
     borderRadius: "12px",
+    border: "1px solid hsl(var(--border))",
     maxWidth: "460px",
     width: "100%",
     padding: "24px",
@@ -335,7 +346,7 @@ const s: Record<string, React.CSSProperties> = {
       "0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)",
     fontFamily:
       '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    color: "#111827",
+    color: "hsl(var(--popover-foreground))",
   },
   header: {
     display: "flex",
@@ -348,11 +359,11 @@ const s: Record<string, React.CSSProperties> = {
     width: "40px",
     height: "40px",
     borderRadius: "10px",
-    background: "#f3f4f6",
+    background: "hsl(var(--muted))",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
   },
   title: {
     margin: 0,
@@ -363,7 +374,7 @@ const s: Record<string, React.CSSProperties> = {
   subtitle: {
     margin: "4px 0 0",
     fontSize: "13px",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
     lineHeight: "1.5",
   },
   options: {
@@ -377,7 +388,7 @@ const s: Record<string, React.CSSProperties> = {
     alignItems: "flex-start",
     gap: "14px",
     padding: "14px",
-    border: "1px solid #e5e7eb",
+    border: "1px solid hsl(var(--border))",
     borderRadius: "10px",
     background: "transparent",
     cursor: "pointer",
@@ -388,7 +399,7 @@ const s: Record<string, React.CSSProperties> = {
     color: "inherit",
   },
   optionCardHover: {
-    borderColor: "#a5b4fc",
+    borderColor: "hsl(var(--ring))",
   },
   optionLink: {
     textDecoration: "none",
@@ -410,7 +421,7 @@ const s: Record<string, React.CSSProperties> = {
   },
   optionDesc: {
     fontSize: "12px",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
     lineHeight: "1.5",
   },
   badge: {
@@ -420,7 +431,7 @@ const s: Record<string, React.CSSProperties> = {
     fontSize: "10px",
     fontWeight: 600,
     color: "#00B5FF",
-    background: "#e0f2fe",
+    background: "hsl(var(--primary) / 0.08)",
     padding: "2px 8px",
     borderRadius: "99px",
     textTransform: "uppercase",
@@ -435,7 +446,7 @@ const s: Record<string, React.CSSProperties> = {
     cursor: "pointer",
     padding: "6px",
     borderRadius: "6px",
-    color: "#9ca3af",
+    color: "hsl(var(--muted-foreground))",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -445,7 +456,7 @@ const s: Record<string, React.CSSProperties> = {
     padding: "12px",
     borderRadius: "8px",
     border: "1px solid #22c55e40",
-    background: "#f0fdf4",
+    background: "rgba(34,197,94,0.08)",
     display: "flex",
     flexDirection: "column",
     gap: "4px",