@agent-native/core 0.118.0 → 0.119.0

package/corpus/templates/brain/app/routes/sources.tsx

@@ -9,6 +9,7 @@ import {
   IconBrandGithub,
   IconBrandSlack,
   IconChecks,
+  IconChevronDown,
   IconCircleCheck,
   IconCircleDashed,
   IconClock,
@@ -40,7 +41,6 @@ import {
 } from "@/components/brain/Surface";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -75,6 +75,11 @@ import {
 } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   type BrainConnectionProvider,
   type BrainHealthResponse,
@@ -104,6 +109,7 @@ import {
   createOneTimeIngestHandoff,
   type OneTimeIngestHandoff,
 } from "@/lib/ingest-handoff";
+import { cn } from "@/lib/utils";
 
 type Provider = "manual" | "generic" | "clips" | "slack" | "granola" | "github";
 type CaptureStatusFilter = BrainCaptureReviewStatus | "all";
@@ -1536,6 +1542,7 @@ function SourceListItem({
   onTune: () => void;
 }) {
   const t = useT();
+  const [expanded, setExpanded] = useState(false);
   const Icon = sourceProviderIcon(source.provider);
   const retry = sourceRetryAfter(source);
   const hasSyncNotice = Boolean(
@@ -1546,113 +1553,171 @@ function SourceListItem({
     : null;
   const coverage =
     typeof source.coverage === "number" ? formatPercent(source.coverage) : null;
+  const captureCount = (source.recordCount ?? 0).toLocaleString();
+  const lastSync = shortDate(sourceLastSync(source)) ?? t("sources.never");
 
   return (
-    <Card className="overflow-hidden shadow-none">
-      <CardContent className="p-4">
-        <div className="brain-source-card-grid grid gap-4">
-          <div className="flex min-w-0 items-start gap-3">
-            <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/35">
-              <Icon className="size-4 text-muted-foreground" />
+    <div className="group bg-card transition-colors hover:bg-muted/20">
+      <div className="flex min-w-0 items-center gap-3 px-4 py-3 sm:px-5">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted/35">
+          <Icon className="size-4 text-muted-foreground" />
+        </span>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <h2 className="truncate text-sm font-medium text-foreground sm:text-[0.9375rem]">
+              {sourceName(source)}
+            </h2>
+            <StatusBadge status={sourceHealth(source)} />
+          </div>
+          <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <span className="capitalize">{sourceType(source)}</span>
+            <span aria-hidden="true">·</span>
+            <span>
+              {captureCount} {t("sources.captures").toLocaleLowerCase()}
             </span>
-            <div className="min-w-0">
-              <div className="flex min-w-0 flex-wrap items-center gap-2">
-                <h2 className="truncate text-base font-medium text-foreground">
-                  {sourceName(source)}
-                </h2>
-                <StatusBadge status={sourceHealth(source)} />
-              </div>
-              <div className="mt-1 flex flex-wrap items-center gap-2">
-                <Badge variant="outline" className="max-w-full capitalize">
-                  {sourceType(source)}
-                </Badge>
-                {nextSync ? (
-                  <span className="text-xs text-muted-foreground">
-                    {t("sources.nextSync", { date: nextSync })}
+            <span aria-hidden="true">·</span>
+            <span className="truncate">
+              {t("sources.lastSyncWithDate", { date: lastSync })}
+            </span>
+            {hasSyncNotice ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className="ms-1 inline-flex size-4 items-center justify-center text-destructive"
+                    aria-label={t("sources.actionFailedTitle")}
+                  >
+                    <IconAlertTriangle className="size-3.5" />
                   </span>
-                ) : null}
-              </div>
-              <p className="mt-2 line-clamp-2 text-sm leading-6 text-muted-foreground">
-                {sourceDescription(source)}
-              </p>
-            </div>
-          </div>
-
-          <div
-            className={
-              coverage
-                ? "grid grid-cols-2 gap-4 sm:grid-cols-3 xl:min-w-80"
-                : "grid grid-cols-2 gap-4 xl:min-w-64"
-            }
-          >
-            <SourceFact
-              label={t("sources.captures")}
-              value={(source.recordCount ?? 0).toLocaleString()}
-            />
-            <SourceFact
-              label={t("sources.lastSync")}
-              value={shortDate(sourceLastSync(source)) ?? t("sources.never")}
-            />
-            {coverage ? (
-              <SourceFact label={t("sources.coverage")} value={coverage} />
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("sources.actionFailedTitle")}
+                </TooltipContent>
+              </Tooltip>
             ) : null}
           </div>
+        </div>
 
-          <div className="flex items-center justify-end gap-2">
-            <Button size="sm" variant="outline" onClick={onReview}>
-              <IconFileSearch className="size-4" />
-              {t("sources.captures")}
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="size-9"
-                  aria-label={t("sources.moreActionsFor", {
-                    source: sourceName(source),
-                  })}
-                >
-                  <IconDotsVertical className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-40">
-                <DropdownMenuItem disabled={syncPending} onSelect={onSync}>
+        <div className="flex shrink-0 items-center gap-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                onClick={onReview}
+                aria-label={`${t("sources.captures")}: ${sourceName(source)}`}
+              >
+                <IconFileSearch className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sources.captures")}</TooltipContent>
+          </Tooltip>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                aria-label={t("sources.moreActionsFor", {
+                  source: sourceName(source),
+                })}
+              >
+                <IconDotsVertical className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem disabled={syncPending} onSelect={onSync}>
+                <IconRefresh className="size-4" />
+                {t("sources.syncNow")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={onTune}>
+                <IconSettings2 className="size-4" />
+                {t("sources.tuneSource")}
+              </DropdownMenuItem>
+              {onRotateIngestToken ? (
+                <DropdownMenuItem onSelect={onRotateIngestToken}>
                   <IconRefresh className="size-4" />
-                  {t("sources.syncNow")}
+                  {t("sources.rotateIngestToken")}
                 </DropdownMenuItem>
-                <DropdownMenuItem onSelect={onTune}>
-                  <IconSettings2 className="size-4" />
-                  {t("sources.tuneSource")}
-                </DropdownMenuItem>
-                {onRotateIngestToken ? (
-                  <DropdownMenuItem onSelect={onRotateIngestToken}>
-                    <IconRefresh className="size-4" />
-                    {t("sources.rotateIngestToken")}
-                  </DropdownMenuItem>
-                ) : null}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+              ) : null}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                onClick={() => setExpanded((value) => !value)}
+                aria-expanded={expanded}
+                aria-label={
+                  expanded ? t("sources.hideDetails") : t("sources.details")
+                }
+              >
+                <IconChevronDown
+                  className={cn(
+                    "size-4 transition-transform duration-200 ease-out",
+                    expanded && "rotate-180",
+                  )}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {expanded ? t("sources.hideDetails") : t("sources.details")}
+            </TooltipContent>
+          </Tooltip>
         </div>
+      </div>
 
-        {coverage ? (
-          <Progress
-            value={(source.coverage ?? 0) * 100}
-            className="mt-4 h-1.5 bg-muted"
-          />
-        ) : null}
+      {expanded ? (
+        <div className="border-t border-border/70 px-4 pb-4 pt-3 sm:px-5">
+          <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+            <div className="min-w-0">
+              <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+                {sourceDescription(source)}
+              </p>
+              {hasSyncNotice ? (
+                <div className="mt-3 flex gap-2 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm">
+                  <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+                  <p className="min-w-0 text-muted-foreground">
+                    {syncDetail(source, t)}
+                  </p>
+                </div>
+              ) : null}
+            </div>
 
-        {hasSyncNotice ? (
-          <div className="mt-3 flex gap-2 rounded-md border border-border bg-muted/25 px-3 py-2 text-sm">
-            <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-            <p className="min-w-0 truncate text-muted-foreground">
-              {syncDetail(source, t)}
-            </p>
+            <div
+              className={cn(
+                "grid grid-cols-2 gap-x-6 gap-y-3 lg:min-w-64",
+                coverage && "lg:grid-cols-3 lg:min-w-80",
+              )}
+            >
+              <SourceFact label={t("sources.captures")} value={captureCount} />
+              <SourceFact label={t("sources.lastSync")} value={lastSync} />
+              {coverage ? (
+                <SourceFact label={t("sources.coverage")} value={coverage} />
+              ) : null}
+            </div>
           </div>
-        ) : null}
-      </CardContent>
-    </Card>
+
+          {coverage ? (
+            <Progress
+              value={(source.coverage ?? 0) * 100}
+              className="mt-4 h-1.5 bg-muted"
+            />
+          ) : null}
+
+          {nextSync ? (
+            <p className="mt-3 text-xs text-muted-foreground">
+              {t("sources.nextSync", { date: nextSync })}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1975,25 +2040,27 @@ export default function SourcesRoute() {
             <LoadingRows rows={3} />
           </div>
         ) : visibleSources.length ? (
-          visibleSources.map((source) => (
-            <SourceListItem
-              key={source.id}
-              source={source}
-              syncPending={
-                syncSource.isPending || rotateSourceIngestToken.isPending
-              }
-              onReview={() => openCaptureReview(source)}
-              onRotateIngestToken={
-                (source.provider === "clips" ||
-                  source.provider === "generic") &&
-                ingestSourceKey(source)
-                  ? () => void rotateIngestToken(source)
-                  : undefined
-              }
-              onSync={() => syncSource.mutate({ sourceId: source.id })}
-              onTune={() => openEdit(source)}
-            />
-          ))
+          <div className="overflow-hidden rounded-lg border border-border bg-card divide-y divide-border">
+            {visibleSources.map((source) => (
+              <SourceListItem
+                key={source.id}
+                source={source}
+                syncPending={
+                  syncSource.isPending || rotateSourceIngestToken.isPending
+                }
+                onReview={() => openCaptureReview(source)}
+                onRotateIngestToken={
+                  (source.provider === "clips" ||
+                    source.provider === "generic") &&
+                  ingestSourceKey(source)
+                    ? () => void rotateIngestToken(source)
+                    : undefined
+                }
+                onSync={() => syncSource.mutate({ sourceId: source.id })}
+                onTune={() => openEdit(source)}
+              />
+            ))}
+          </div>
         ) : (
           <div>
             <EmptyActionState

package/corpus/templates/clips/AGENTS.md

@@ -96,14 +96,16 @@ ladder.
   bounded `voiceContext` to the shared cleanup/transcription path when active
   app context, learned vocabulary, user notes, or AGENTS.md preferences are
   available.
-- Cloud transcription is fallback-only for Clips recordings and should use the
-  configured Builder/Gemini or Groq paths, not OpenAI.
+- Cloud transcription is fallback-only for Clips recordings. Preserve the
+  browser/macOS native transcript first, then use the configured Builder/Gemini
+  path against the original recording when native capture is unavailable.
 - AI setup must be visible and paid-account-backed: lead with Builder.io Connect
   for managed credits, object storage, uploads, and transcription. BYOK belongs
   in the agent sidebar's API Keys & Connections panel; template settings may
   signpost that panel but should not create a second credential vault.
   Anthropic/OpenAI power the agent chat; Gemini powers cleanup, titles, and
-  meeting notes; Groq powers backup speech-to-text.
+  meeting notes; any optional third-party speech provider is limited to
+  desktop voice dictation and is not used for recording transcripts.
 - Hosted/shared recording uploads require configured storage. Do not preserve
   video bytes in SQL as a production fallback; only local SQLite/dev flows may
   keep scratch chunks while a user connects Builder.io or S3-compatible storage.
@@ -148,9 +150,9 @@ ladder.
   recordings. Do not pivot straight to frames or tell the user there is no
   transcript until the retry budget is exhausted.
 - If transcription failed because Builder transcription credits are exhausted,
-  tell the user that clearly and point them to Builder.io credits/upgrade or a
-  Groq key for backup speech-to-text. Generic OpenAI or Anthropic chat keys do
-  not transcribe Clips recordings.
+  tell the user that clearly and point them to Builder.io credits/upgrade.
+  Native browser/macOS capture remains the first transcript source; Builder
+  transcribes the original recording only when native capture is unavailable.
 - Use `get-builder-credit-status` when the user asks whether Builder.io credit
   limits are pausing backup transcription, transcript cleanup, summaries, or AI
   title generation. Treat an exhausted status as an FYI/upgrade path, not an app