@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/integrations/PluginConnect.tsx

@@ -1,9 +1,10 @@
-import { useState, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import useSWR from "swr";
-import { AlertCircle, CheckCircle2, ChevronDown, ExternalLink, Eye, EyeOff, Github, Loader2, RefreshCw, WifiOff, X } from "lucide-react";
+import { AlertCircle, Calendar, CheckCircle2, ChevronDown, ExternalLink, Eye, EyeOff, Github, Loader2, Pencil, RefreshCw, WifiOff, X } from "lucide-react";
 import { cn } from "../../lib/cn";
-import { Integrations, type CatalogEntry, type IntegrationScope, type IntegrationStatus } from "../../lib/api";
+import { Integrations, type CatalogEntry, type IntegrationScope, type IntegrationStatus, type PluginSelect } from "../../lib/api";
 import { t } from "../../i18n";
+import { toneChip, toneDot, toneText } from "../../lib/tone";
 import type { TKey } from "../../i18n";
 import { PluginCard } from "./PluginCard";
 import { PluginToolsSection } from "./PluginToolsSection";
@@ -38,21 +39,33 @@ function Toggle({ on, onChange, disabled, accent }: { on: boolean; onChange: (ne
 
 type Accent = { text: string; border: string; hover: string; ring: string; wrap: string };
 const ACCENTS: Record<string, Accent> = {
-  rose: { text: "text-rose-400", border: "border-rose-700/50", hover: "hover:bg-rose-900/20", ring: "focus:border-rose-500/50", wrap: "border-rose-500/30 from-rose-500/20 to-pink-500/20" },
-  slate: { text: "text-slate-200", border: "border-slate-600/60", hover: "hover:bg-slate-700/30", ring: "focus:border-slate-400/60", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
-  purple: { text: "text-purple-400", border: "border-purple-700/50", hover: "hover:bg-purple-900/20", ring: "focus:border-purple-500/50", wrap: "border-purple-500/30 from-purple-500/20 to-violet-500/20" },
+  rose: { text: toneText.rose, border: "border-rose-600/40 dark:border-rose-700/50", hover: "hover:bg-rose-500/10 dark:hover:bg-rose-900/20", ring: "focus:border-rose-500/50", wrap: "border-rose-500/30 from-rose-500/20 to-pink-500/20" },
+  slate: { text: toneText.slate, border: "border-slate-400/60 dark:border-slate-600/60", hover: "hover:bg-slate-500/10 dark:hover:bg-slate-700/30", ring: "focus:border-slate-400/60", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
+  purple: { text: toneText.purple, border: "border-purple-600/40 dark:border-purple-700/50", hover: "hover:bg-purple-500/10 dark:hover:bg-purple-900/20", ring: "focus:border-purple-500/50", wrap: "border-purple-500/30 from-purple-500/20 to-violet-500/20" },
+  sky: { text: toneText.sky, border: "border-sky-600/40 dark:border-sky-700/50", hover: "hover:bg-sky-500/10 dark:hover:bg-sky-900/20", ring: "focus:border-sky-500/50", wrap: "border-sky-500/30 from-sky-500/20 to-blue-500/20" },
 };
 
 function iconFor(slug: string, accent: Accent): ReactNode {
   if (slug === "github") return <Github className={cn("h-6 w-6", accent.text)} />;
   if (slug === "asana") return <AsanaLogo className={cn("h-6 w-6", accent.text)} />;
   if (slug === "obsidian") return <ObsidianLogo className={cn("h-6 w-6", accent.text)} />;
+  if (slug === "calendar") return <Calendar className={cn("h-6 w-6", accent.text)} />;
   return <span className={cn("text-lg", accent.text)}>◆</span>;
 }
 
 type Step = "idle" | "saving" | "validating" | "done";
 type Opt = { value: string; label: string };
 
+// Asana: workspace_gid → workspace_name. Calendar: calendar_id → calendar_name.
+function selectLabelField(select: PluginSelect): string {
+  return select.key.replace(/_gid$/, "_name").replace(/_id$/, "_name");
+}
+
+function optionsFromAction(data: Record<string, unknown>, select: PluginSelect): Opt[] {
+  const list = (data[select.listKey] as Record<string, unknown>[]) || [];
+  return list.map((o) => ({ value: String(o[select.valueKey]), label: String(o[select.labelKey]) }));
+}
+
 export function PluginConnect({ pid, scope, entry }: { pid: string; scope: IntegrationScope; entry: CatalogEntry }) {
   const ui = entry.ui!;
   const accent = ACCENTS[ui.accent || "rose"] || ACCENTS.rose;
@@ -73,16 +86,123 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
     () => Integrations.status(pid, entry.slug, scope),
     { shouldRetryOnError: false },
   );
+  const statusRef = useRef(status);
+  statusRef.current = status;
 
   const isActive = status?.status === "active" && status.is_enabled === true;
   const busy = step === "saving" || step === "validating";
   const showForm = !isActive && selectOptions.length === 0;
+  // OAuth plugins (Google Calendar): browser consent flow instead of a token paste.
+  const isOAuth = !!ui.oauth;
+  const redirectUri = isOAuth ? `${window.location.origin}${ui.oauth!.redirectPath}` : "";
+  const needsReauth = isOAuth && isActive && !!status?.needs_reauth;
+  const selectKey = ui.select?.key;
+  const hasSelectValue = !!(selectKey && status?.[selectKey]);
+  const needsSelect = Boolean(isActive && ui.select && status && !hasSelectValue);
+  const selectBusy = !!ui.select && actionBusy === ui.select.action;
   // Toggle fields (boolean switches) vs. required text/password inputs.
   const toggleFields = ui.configFields.filter((f) => f.type === "toggle");
   const requiredFields = ui.configFields.filter((f) => f.type !== "toggle");
   const missingRequired = requiredFields.some((f) => !values[f.key]?.trim());
 
+  const loadSelectOptions = useCallback(async () => {
+    const select = ui.select;
+    if (!select) return;
+    setError(null);
+    setActionBusy(select.action);
+    try {
+      const data = (await Integrations.action(pid, entry.slug, select.action, scope)) as Record<string, unknown>;
+      const opts = optionsFromAction(data, select);
+      setSelectOptions(opts);
+      const current = statusRef.current?.[select.key];
+      if (current) setSelectValue(String(current));
+      else if (opts.length === 1) setSelectValue(opts[0].value);
+      if (opts.length === 0) setError(t("integrations.select_empty"));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_generic"));
+    } finally {
+      setActionBusy(null);
+    }
+  }, [pid, entry.slug, scope, ui.select]);
+
+  // Connected without a pick (e.g. Global token saved, workspace never confirmed):
+  // open the card and load the dropdown so the user can finish / change it.
+  const autoLoaded = useRef(false);
+  useEffect(() => {
+    autoLoaded.current = false;
+  }, [pid, scope, entry.slug]);
+  useEffect(() => {
+    if (!needsSelect || autoLoaded.current) return;
+    autoLoaded.current = true;
+    setExpanded(true);
+    void loadSelectOptions();
+  }, [needsSelect, loadSelectOptions]);
+
+  // Wait for the OAuth popup to finish: the callback page posts a message when
+  // it lands, and we poll status as a fallback (popup blockers, closed tabs).
+  const waitForConnection = useCallback(async () => {
+    const deadline = Date.now() + 150_000;
+    await new Promise<void>((resolve) => {
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        window.removeEventListener("message", onMsg);
+        clearInterval(timer);
+        resolve();
+      };
+      const onMsg = (e: MessageEvent) => {
+        if (e.data && (e.data as { source?: string }).source === "apx-oauth") finish();
+      };
+      window.addEventListener("message", onMsg);
+      const timer = setInterval(async () => {
+        try {
+          const s = await Integrations.status(pid, entry.slug, scope);
+          if (s?.status === "active" && s.is_enabled) finish();
+        } catch { /* keep polling */ }
+        if (Date.now() > deadline) finish();
+      }, 2000);
+    });
+  }, [pid, entry.slug, scope]);
+
+  // Open Google's consent screen and wait for the connection to land.
+  async function startAuthorize() {
+    setStep("validating");
+    setError(null);
+    try {
+      const r = (await Integrations.action(pid, entry.slug, ui.oauth!.action, scope)) as Record<string, unknown>;
+      const authUrl = String(r.auth_url || "");
+      if (!authUrl) throw new Error(t("integrations.err_generic"));
+      const popup = window.open(authUrl, "apx-oauth", "width=520,height=680");
+      if (!popup) { window.location.href = authUrl; return; }
+      await waitForConnection();
+      await mutate();
+      setStep("done");
+      setValues({});
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_connect"));
+      setStep("idle");
+    }
+  }
+
+  // OAuth connect: save the client_id/secret, then run consent.
+  async function handleOAuthConnect() {
+    if (missingRequired) return;
+    setStep("saving");
+    setError(null);
+    try {
+      const payload: Record<string, unknown> = { ...values };
+      for (const f of toggleFields) if (payload[f.key] === undefined) payload[f.key] = f.default ? "true" : "false";
+      await Integrations.configure(pid, entry.slug, scope, payload);
+      await startAuthorize();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_connect"));
+      setStep("idle");
+    }
+  }
+
   async function handleConnect() {
+    if (isOAuth) return handleOAuthConnect();
     if (missingRequired) return;
     setStep("saving");
     setError(null);
@@ -96,13 +216,7 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
       setStep("validating");
       const result = (await Integrations.validate(pid, entry.slug, scope)) as unknown as Record<string, unknown>;
       await mutate();
-      if (ui.select && !result[ui.select.key]) {
-        const data = (await Integrations.action(pid, entry.slug, ui.select.action, scope)) as Record<string, unknown>;
-        const list = (data[ui.select.listKey] as Record<string, unknown>[]) || [];
-        if (list.length > 1) {
-          setSelectOptions(list.map((o) => ({ value: String(o[ui.select!.valueKey]), label: String(o[ui.select!.labelKey]) })));
-        }
-      }
+      if (ui.select && !result[ui.select.key]) await loadSelectOptions();
       setStep("done");
       setValues({});
     } catch (err) {
@@ -144,6 +258,9 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
     setActionMsg(null);
     try {
       await Integrations.configure(pid, entry.slug, scope, { [key]: next ? "true" : "false" });
+      // Turning write access on/off changes the OAuth scope, so Google has to be
+      // re-consented — a plain re-validate would keep the old (wrong) scope.
+      if (isOAuth && key === "write_access") { await startAuthorize(); return; }
       await Integrations.validate(pid, entry.slug, scope);
       await mutate();
     } catch (err) {
@@ -193,10 +310,10 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
         <span
           className={cn(
             "flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px]",
-            isActive ? "border-emerald-700 bg-emerald-900/20 text-emerald-400" : "border-border bg-muted text-muted-foreground",
+            isActive ? toneChip.emerald : "border-border bg-muted text-muted-foreground",
           )}
         >
-          <span className={cn("h-1.5 w-1.5 rounded-full", isActive ? "bg-emerald-400" : "bg-muted-foreground")} />
+          <span className={cn("h-1.5 w-1.5 rounded-full", isActive ? toneDot.emerald : "bg-muted-foreground")} />
           {badgeLabel}
         </span>
       }
@@ -205,29 +322,62 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
     >
       <div className="space-y-4 p-4">
         {error && (
-          <div className="flex items-center gap-2 rounded-lg border border-red-700/30 bg-red-900/20 px-3 py-2.5 text-xs text-red-300">
+          <div className={cn("flex items-center gap-2 rounded-lg px-3 py-2.5 text-xs", toneChip.red)}>
             <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
             <span className="flex-1">{error}</span>
             <button onClick={() => setError(null)}><X className="h-3.5 w-3.5" /></button>
           </div>
         )}
 
+        {/* Re-consent needed (e.g. write access was toggled → scope changed) */}
+        {needsReauth && (
+          <div className="flex items-center gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2.5 text-xs text-amber-700 dark:text-amber-300">
+            <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
+            <span className="flex-1">{t("integrations.oauth_reauth")}</span>
+            <button
+              onClick={() => void startAuthorize()}
+              disabled={busy}
+              className={cn("rounded-md border px-2 py-1 text-[10px] transition-all disabled:opacity-50", accent.border, accent.text, accent.hover)}
+            >
+              {t("integrations.connect_oauth")}
+            </button>
+          </div>
+        )}
+
         {/* Connected summary */}
-        {isActive && selectOptions.length === 0 && (
-          <div className="space-y-1 rounded-xl border border-emerald-700/30 bg-emerald-900/10 p-3">
+        {isActive && (
+          <div className="space-y-1 rounded-xl border border-emerald-600/30 bg-emerald-500/8 p-3 dark:border-emerald-700/30 dark:bg-emerald-900/10">
             <div className="flex items-center gap-2">
-              <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
-              <span className="text-xs font-medium text-emerald-300">{t("integrations.connected")}</span>
+              <CheckCircle2 className={cn("h-3.5 w-3.5", toneText.emerald)} />
+              <span className={cn("text-xs font-medium", toneText.emerald)}>{t("integrations.connected")}</span>
             </div>
             {(ui.connectedFields || []).map((key) => {
               const v = status?.[key];
-              if (!v) return null;
+              const relatedToSelect = !!ui.select && key === selectLabelField(ui.select);
+              if (!v && !relatedToSelect) return null;
               return (
-                <p key={key} className="pl-5 text-[10px] text-muted-foreground">
-                  {tk(`integrations.${entry.slug}.connected.${key}`)}: {String(v)}
-                </p>
+                <div key={key} className="flex items-center justify-between gap-2 pl-5">
+                  <p className="text-[10px] text-muted-foreground">
+                    {tk(`integrations.${entry.slug}.connected.${key}`)}: {v ? String(v) : t("integrations.select_none")}
+                  </p>
+                  {relatedToSelect && (
+                    <button
+                      type="button"
+                      data-testid="plugin-select-change"
+                      onClick={() => void loadSelectOptions()}
+                      disabled={selectBusy}
+                      className={cn("flex items-center gap-1 rounded-md border px-2 py-0.5 text-[10px] transition-all disabled:cursor-not-allowed disabled:opacity-50", accent.border, accent.text, accent.hover)}
+                    >
+                      {selectBusy ? <Loader2 className="h-3 w-3 animate-spin" /> : <Pencil className="h-3 w-3" />}
+                      {v ? t("integrations.change") : t("integrations.select_pick")}
+                    </button>
+                  )}
+                </div>
               );
             })}
+            {needsSelect && (
+              <p className="pl-5 text-[10px] text-amber-700 dark:text-amber-400">{t("integrations.select_missing")}</p>
+            )}
           </div>
         )}
 
@@ -248,7 +398,7 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
 
         {isActive && selectOptions.length === 0 && (ui.actions?.length ?? 0) > 0 && (
           <div className="space-y-2">
-            {actionMsg && <p className="text-[11px] text-emerald-400">{actionMsg}</p>}
+            {actionMsg && <p className={cn("text-[11px]", toneText.emerald)}>{actionMsg}</p>}
             <div className="flex flex-wrap gap-2">
               {ui.actions!.map((a) => (
                 <button
@@ -265,12 +415,15 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
           </div>
         )}
 
-        {/* Post-validate selection (e.g. Asana workspace) */}
-        {selectOptions.length > 1 && ui.select && (
+        {/* Post-validate selection (e.g. Asana workspace). Shown during first
+            connect AND later via Change, including the "connected but no pick"
+            case that used to leave Global stuck without a workspace. */}
+        {selectOptions.length > 0 && ui.select && (
           <div className="space-y-2">
             <p className="text-[11px] text-muted-foreground">{tk(`integrations.${entry.slug}.select_label`)}:</p>
             <div className="flex gap-2">
               <select
+                data-testid="plugin-select"
                 value={selectValue}
                 onChange={(e) => setSelectValue(e.target.value)}
                 className={cn("flex-1 rounded-lg border border-border bg-background px-2 py-1.5 text-xs outline-none", accent.ring)}
@@ -287,6 +440,16 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
               >
                 {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t("integrations.confirm")}
               </button>
+              {!needsSelect && (
+                <button
+                  type="button"
+                  onClick={() => { setSelectOptions([]); setSelectValue(""); }}
+                  disabled={busy}
+                  className="rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted/50 disabled:opacity-50"
+                >
+                  {t("common.cancel")}
+                </button>
+              )}
             </div>
           </div>
         )}
@@ -295,6 +458,21 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
         {showForm && (
           <div className="space-y-3">
             <p className="text-xs font-semibold text-foreground">{t("integrations.credentials", { name: entry.name })}</p>
+            {isOAuth && (
+              <div className={cn("space-y-1.5 rounded-lg border p-3", accent.border)}>
+                <p className="text-[11px] text-muted-foreground">{t("integrations.oauth_redirect_hint")}</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 overflow-x-auto whitespace-nowrap rounded bg-muted/50 px-2 py-1 font-mono text-[10px] text-foreground">{redirectUri}</code>
+                  <button
+                    type="button"
+                    onClick={() => void navigator.clipboard?.writeText(redirectUri)}
+                    className={cn("rounded-md border px-2 py-1 text-[10px] transition-all", accent.border, accent.text, accent.hover)}
+                  >
+                    {t("integrations.copy")}
+                  </button>
+                </div>
+              </div>
+            )}
             {ui.configFields.map((field) => {
               if (field.type === "toggle") {
                 const on = values[field.key] !== undefined ? values[field.key] === "true" : !!field.default;
@@ -393,8 +571,8 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
               className={cn("flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-xs transition-all disabled:cursor-not-allowed disabled:opacity-50", accent.border, accent.text, accent.hover)}
             >
               {busy ? (
-                <><Loader2 className="h-3.5 w-3.5 animate-spin" />{step === "saving" ? t("integrations.saving") : t("integrations.validating")}</>
-              ) : t("integrations.connect")}
+                <><Loader2 className="h-3.5 w-3.5 animate-spin" />{step === "saving" ? t("integrations.saving") : isOAuth ? t("integrations.oauth_waiting") : t("integrations.validating")}</>
+              ) : isOAuth ? t("integrations.connect_oauth") : t("integrations.connect")}
             </button>
           </div>
         )}
@@ -407,7 +585,7 @@ export function PluginConnect({ pid, scope, entry }: { pid: string; scope: Integ
           <div className="flex justify-end border-t border-border pt-2">
             <button
               onClick={handleDeactivate}
-              className="flex items-center gap-1.5 rounded-lg border border-red-700/50 px-3 py-1.5 text-xs text-red-400 transition-all hover:bg-red-900/20"
+              className={cn("flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-all", toneText.red, "border-red-600/40 hover:bg-red-500/10 dark:border-red-700/50 dark:hover:bg-red-900/20")}
             >
               <WifiOff className="h-3.5 w-3.5" /> {t("integrations.deactivate")}
             </button>

package/src/interfaces/web/src/components/integrations/PluginToolsSection.tsx

@@ -32,7 +32,7 @@ export function PluginToolsSection({ tools, isActive }: { pid: string; tools: Pl
           </div>
         ))}
       </div>
-      <p className="text-[10px] text-muted-foreground/70">{t("integrations.tools_available_note")}</p>
+      <p className="text-[10px] text-muted-foreground">{t("integrations.tools_available_note")}</p>
     </div>
   );
 }

package/src/interfaces/web/src/components/layout/ProjectAvatar.tsx

@@ -1,6 +1,6 @@
 // Discord-style rail avatar with smart initials.
 //
-//   Single-word ("iacrmar")           → big "I" + a "iacrm…" label below
+//   Single-word ("acmecorp")          → big "A" + a "acmec…" label below
 //   Multi-word  ("panda project")     → big "PP" (first letter of each)
 //   Single short ("apx", "ai")        → big initial + label fits without ellipsis
 //
@@ -20,14 +20,22 @@ interface Props {
   icon?: React.ReactNode;
   title?: string;
   testId?: string;
+  /** Pin the colour instead of hashing it from the label — for fixed rail
+   *  entries (inbox, modules) whose identity isn't a project name. */
+  tone?: ProjectTone;
+  /** Override the caption under the icon. The computed one truncates a long
+   *  label to four characters, which is fine for a project slug and useless
+   *  for a two-word module name. */
+  sublabel?: string;
 }
 
-export function ProjectAvatar({ label, active, onClick, isAdd, isSettings, isDefault, icon, title, testId }: Props) {
+export function ProjectAvatar({ label, active, onClick, isAdd, isSettings, isDefault, icon, title, testId, tone: toneProp, sublabel }: Props) {
   const text = label.trim() || "·";
   const { initials, subLabel } = computeInitialsAndSub(text);
   const tone: ProjectTone =
-    isAdd || isSettings ? "indigo" : pickTone(text);
-  const showSub = subLabel && !isAdd && !isSettings && !isDefault;
+    toneProp ?? (isAdd || isSettings ? "indigo" : pickTone(text));
+  const caption = sublabel ?? subLabel;
+  const showSub = caption && !isAdd && !isSettings && !isDefault;
   return (
     <Tooltip>
       <TooltipTrigger
@@ -41,9 +49,9 @@ export function ProjectAvatar({ label, active, onClick, isAdd, isSettings, isDef
             <span
               className={cn(
                 "flex size-10 items-center justify-center rounded-xl text-sm font-bold transition-all",
-                active && "ring-2 ring-foreground ring-offset-2 ring-offset-card",
+                active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
                 isAdd && "border border-dashed border-muted-fg/50 bg-transparent text-muted-fg hover:bg-accent/60 hover:text-foreground",
-                isSettings && "bg-muted text-muted-fg hover:bg-accent hover:text-foreground",
+                isSettings && "bg-muted text-muted-fg hover:bg-accent hover:text-foreground dark:bg-muted/60",
                 isDefault && "overflow-hidden bg-muted",
                 !isAdd && !isSettings && !isDefault && active && toneActive(tone),
                 !isAdd && !isSettings && !isDefault && !active && toneIdle(tone),
@@ -52,8 +60,11 @@ export function ProjectAvatar({ label, active, onClick, isAdd, isSettings, isDef
               {icon ?? initials}
             </span>
             {showSub && (
-              <span className="block max-w-[3.6rem] truncate text-[9px] leading-tight text-muted-fg group-hover:text-foreground">
-                {subLabel}
+              <span className={cn(
+                "block max-w-[3.6rem] truncate text-[9px] leading-tight group-hover:text-foreground",
+                active ? "font-medium text-foreground" : "text-muted-fg",
+              )}>
+                {caption}
               </span>
             )}
           </button>
@@ -92,25 +103,29 @@ function pickTone(s: string): ProjectTone {
   return PROJECT_TONES[Math.abs(h) % PROJECT_TONES.length];
 }
 
+// Two grounds, two palettes. On dark, a 15% wash with 300-level text reads;
+// on white the same pair is a pale smudge, so light gets a stronger wash and
+// 800-level text. Every tone is declared for both themes — no tone may be
+// defined only inside `dark:`.
 const TONE_IDLE: Record<ProjectTone, string> = {
-  sky:     "bg-sky-500/15 text-sky-300 hover:bg-sky-500/25",
-  violet:  "bg-violet-500/15 text-violet-300 hover:bg-violet-500/25",
-  emerald: "bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25",
-  amber:   "bg-amber-500/15 text-amber-300 hover:bg-amber-500/25",
-  rose:    "bg-rose-500/15 text-rose-300 hover:bg-rose-500/25",
-  indigo:  "bg-indigo-500/15 text-indigo-300 hover:bg-indigo-500/25",
-  teal:    "bg-teal-500/15 text-teal-300 hover:bg-teal-500/25",
-  fuchsia: "bg-fuchsia-500/15 text-fuchsia-300 hover:bg-fuchsia-500/25",
+  sky:     "bg-sky-500/20 text-sky-800 hover:bg-sky-500/30 dark:bg-sky-500/15 dark:text-sky-300 dark:hover:bg-sky-500/25",
+  violet:  "bg-violet-500/20 text-violet-800 hover:bg-violet-500/30 dark:bg-violet-500/15 dark:text-violet-300 dark:hover:bg-violet-500/25",
+  emerald: "bg-emerald-500/20 text-emerald-800 hover:bg-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-300 dark:hover:bg-emerald-500/25",
+  amber:   "bg-amber-500/20 text-amber-800 hover:bg-amber-500/30 dark:bg-amber-500/15 dark:text-amber-300 dark:hover:bg-amber-500/25",
+  rose:    "bg-rose-500/20 text-rose-800 hover:bg-rose-500/30 dark:bg-rose-500/15 dark:text-rose-300 dark:hover:bg-rose-500/25",
+  indigo:  "bg-indigo-500/20 text-indigo-800 hover:bg-indigo-500/30 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25",
+  teal:    "bg-teal-500/20 text-teal-800 hover:bg-teal-500/30 dark:bg-teal-500/15 dark:text-teal-300 dark:hover:bg-teal-500/25",
+  fuchsia: "bg-fuchsia-500/20 text-fuchsia-800 hover:bg-fuchsia-500/30 dark:bg-fuchsia-500/15 dark:text-fuchsia-300 dark:hover:bg-fuchsia-500/25",
 };
 const TONE_ACTIVE: Record<ProjectTone, string> = {
-  sky:     "bg-sky-500/30 text-sky-100",
-  violet:  "bg-violet-500/30 text-violet-100",
-  emerald: "bg-emerald-500/30 text-emerald-100",
-  amber:   "bg-amber-500/30 text-amber-100",
-  rose:    "bg-rose-500/30 text-rose-100",
-  indigo:  "bg-indigo-500/30 text-indigo-100",
-  teal:    "bg-teal-500/30 text-teal-100",
-  fuchsia: "bg-fuchsia-500/30 text-fuchsia-100",
+  sky:     "bg-sky-500/35 text-sky-900 dark:bg-sky-500/30 dark:text-sky-100",
+  violet:  "bg-violet-500/35 text-violet-900 dark:bg-violet-500/30 dark:text-violet-100",
+  emerald: "bg-emerald-500/35 text-emerald-900 dark:bg-emerald-500/30 dark:text-emerald-100",
+  amber:   "bg-amber-500/35 text-amber-900 dark:bg-amber-500/30 dark:text-amber-100",
+  rose:    "bg-rose-500/35 text-rose-900 dark:bg-rose-500/30 dark:text-rose-100",
+  indigo:  "bg-indigo-500/35 text-indigo-900 dark:bg-indigo-500/30 dark:text-indigo-100",
+  teal:    "bg-teal-500/35 text-teal-900 dark:bg-teal-500/30 dark:text-teal-100",
+  fuchsia: "bg-fuchsia-500/35 text-fuchsia-900 dark:bg-fuchsia-500/30 dark:text-fuchsia-100",
 };
 function toneIdle(t: ProjectTone)   { return TONE_IDLE[t]; }
 function toneActive(t: ProjectTone) { return TONE_ACTIVE[t]; }