@agent-native/core 0.80.8 → 0.80.9

package/corpus/templates/clips/actions/query-screen-memory-context.ts

@@ -0,0 +1,29 @@
+import { defineAction } from "@agent-native/core";
+import { queryScreenMemoryContext } from "@agent-native/core/mcp-client";
+import { z } from "zod";
+
+export default defineAction({
+  description:
+    "Search recent local Clips Screen Memory context from this machine. Returns bounded OCR/context snippets only; use get-screen-memory-status first if availability is unclear.",
+  schema: z.object({
+    query: z
+      .string()
+      .optional()
+      .describe("Optional case-insensitive search text"),
+    sinceMinutes: z.coerce
+      .number()
+      .min(0)
+      .optional()
+      .describe("Only include captures newer than this many minutes"),
+    limit: z.coerce
+      .number()
+      .int()
+      .min(1)
+      .max(50)
+      .default(10)
+      .describe("Maximum number of context snippets to return"),
+  }),
+  http: { method: "GET" },
+  readOnly: true,
+  run: async (args) => queryScreenMemoryContext(args),
+});

package/corpus/templates/clips/actions/view-screen.ts

@@ -455,12 +455,12 @@ export default defineAction({
   schema: z.object({}),
   http: false,
   run: async () => {
-    // Scoped to the requesting browser tab so each tab exposes the clip IT is
+    // Scoped to the requesting browser tab so each tab exposes the clip it is
     // showing, falling back to the global key for CLI/external agents.
     const navigation = (await readAppStateForCurrentTab(
       "navigation",
     )) as NavigationState | null;
-    const playerState = await readAppState("player-state");
+    const playerState = await readAppStateForCurrentTab("player-state");
     const editorDraft = await readAppState("editor-draft");
     const selection = await readAppStateForCurrentTab("selection");
     const organizationId = await getActiveOrganizationId();

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -584,7 +584,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
               </Tooltip>
             </div>
           )}
-          <main className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <main className="agent-native-app-main flex min-h-0 flex-1 flex-col overflow-y-auto">
             <PageHeaderSlotProvider slot={headerSlot}>
               {children}
             </PageHeaderSlotProvider>

package/corpus/templates/clips/app/global.css

@@ -8,63 +8,63 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 
@@ -76,6 +76,18 @@
   }
 }
 
+@container agent-native-main (min-width: 980px) {
+  .clips-meeting-detail-skeleton-grid,
+  .clips-meeting-detail-grid {
+    grid-template-columns: minmax(0, 1fr) 380px;
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .clips-meeting-notes-panel {
+    min-height: 0;
+  }
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -550,7 +550,7 @@ export default function MeetingDetailRoute() {
         <Skeleton className="h-6 w-32 mb-4" />
         <Skeleton className="h-9 w-96 mb-2" />
         <Skeleton className="h-4 w-64 mb-6" />
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="clips-meeting-detail-skeleton-grid grid grid-cols-1 gap-6">
           <Skeleton className="h-[480px] w-full" />
           <Skeleton className="h-[480px] w-full" />
         </div>
@@ -765,11 +765,11 @@ export default function MeetingDetailRoute() {
         )}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] lg:grid-rows-[minmax(0,1fr)] gap-6 flex-1 min-h-0">
+      <div className="clips-meeting-detail-grid grid grid-cols-1 gap-6 flex-1 min-h-0">
         {/* Two-tone canvas: user notes (black) + AI summary/bullets (gray) */}
         <div
           className={cn(
-            "rounded-lg border border-border bg-background min-h-[480px] lg:min-h-0 overflow-hidden flex flex-col",
+            "clips-meeting-notes-panel rounded-lg border border-border bg-background min-h-[480px] overflow-hidden flex flex-col",
             notesJustArrived && "animate-in fade-in duration-500",
           )}
         >

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -6,6 +6,7 @@ import {
   agentNativePath,
   getBrowserTabId,
   readClientAppState,
+  writeClientAppState,
   useChangeVersions,
   useT,
 } from "@agent-native/core/client";
@@ -29,10 +30,10 @@ import {
   IconFileText,
   IconSparkles,
   IconExternalLink,
-  IconLayoutSidebarRightExpand,
+  IconMessageDots,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useNavigate, NavLink, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
@@ -240,6 +241,13 @@ export default function RecordingPage() {
   const [processingTimeout, setProcessingTimeout] = useState(false);
   const [retryingFinalize, setRetryingFinalize] = useState(false);
   const [downloading, setDownloading] = useState(false);
+  const browserTabId = useMemo(() => getBrowserTabId(), []);
+  const recordingScope = useMemo(
+    () =>
+      recordingId ? { type: "recording" as const, id: recordingId } : null,
+    [recordingId],
+  );
+  const lastPlayerStateWriteRef = useRef(0);
 
   useEffect(() => {
     if (
@@ -250,8 +258,9 @@ export default function RecordingPage() {
       panelParam === "settings"
     ) {
       setPanel(panelParam);
+      if (isCompactLayout) setSidePanelOpen(true);
     }
-  }, [panelParam]);
+  }, [isCompactLayout, panelParam]);
 
   const playerDataQ = useActionQuery<any>(
     "get-recording-player-data",
@@ -315,6 +324,24 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  useEffect(() => {
+    if (!recording?.id) return;
+    const now = Date.now();
+    if (now - lastPlayerStateWriteRef.current < 1000) return;
+    lastPlayerStateWriteRef.current = now;
+    void writeClientAppState(
+      `player-state:${browserTabId}`,
+      {
+        view: "recording",
+        recordingId: recording.id,
+        currentMs: Math.max(0, Math.round(currentMs)),
+        durationMs: recording.durationMs,
+        panel,
+        updatedAt: new Date(now).toISOString(),
+      },
+      { requestSource: browserTabId },
+    ).catch(() => {});
+  }, [browserTabId, currentMs, panel, recording?.durationMs, recording?.id]);
   const appStateVersion = useChangeVersions(["app-state", "action"]);
   const generatedWorkflowQ = useQuery<GeneratedWorkflowState | null>({
     queryKey: [
@@ -777,7 +804,8 @@ export default function RecordingPage() {
         className="mt-0 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
       >
         <AgentPanel
-          browserTabId={getBrowserTabId()}
+          browserTabId={browserTabId}
+          scope={recordingScope}
           emptyStateText={t("recordingPage.askAboutClip")}
           dynamicSuggestions={false}
           chatNotice={
@@ -1047,20 +1075,19 @@ export default function RecordingPage() {
           ) : null}
 
           {!editing ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="xl:hidden"
-                  onClick={() => setSidePanelOpen(true)}
-                  aria-label={t("recordingPage.details")}
-                >
-                  <IconLayoutSidebarRightExpand className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>{t("recordingPage.details")}</TooltipContent>
-            </Tooltip>
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-1.5 xl:hidden"
+              onClick={() => {
+                setPanel("agent");
+                setSidePanelOpen(true);
+              }}
+              aria-label={t("recordingPage.askAboutClip")}
+            >
+              <IconMessageDots className="h-4 w-4" />
+              <span>{t("recordingPage.agent")}</span>
+            </Button>
           ) : null}
 
           <ShareRecordingPopover

package/corpus/templates/clips/changelog/2026-06-29-meeting-detail-layouts-adapt-when-the-agent-sidebar-is-open.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Meeting detail layouts now adapt cleanly when the agent sidebar narrows the app.

package/corpus/templates/clips/changelog/2026-06-29-screen-memory-keeps-a-local-rolling-screen-buffer-for-agent-context.md

@@ -0,0 +1,5 @@
+---
+type: added
+---
+
+Screen Memory keeps a local rolling screen buffer and recent app/window context for local agent context.

package/corpus/templates/clips/changelog/2026-06-29-video-chat-is-easier-to-find-on-recording-pages-and-s3-setup.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Video chat is easier to find on recording pages and S3 setup saves from onboarding.

package/corpus/templates/clips/chrome-extension/src/styles.css

@@ -1,34 +1,34 @@
 :root {
   color-scheme: light dark;
   --background: #ffffff;
-  --foreground: hsl(220 10% 10%);
+  --foreground: hsl(0 0% 10%);
   --card: #ffffff;
-  --primary: hsl(220 10% 15%);
+  --primary: hsl(0 0% 15%);
   --primary-foreground: #ffffff;
-  --muted: hsl(220 10% 95%);
-  --muted-foreground: hsl(220 5% 45%);
-  --border: hsl(220 10% 90%);
-  --ring: hsl(220 10% 40%);
+  --muted: hsl(0 0% 95%);
+  --muted-foreground: hsl(0 0% 45%);
+  --border: hsl(0 0% 90%);
+  --ring: hsl(0 0% 40%);
   --danger: #b42318;
   --bg: #ffffff;
-  --surface: #f5f6f9;
-  --surface-hover: #eef0f5;
-  --surface-strong: #e8ebf2;
-  --fg: #0f172a;
-  --fg-muted: #64748b;
-  --fg-subtle: #94a3b8;
-  --border-strong: #d4d9e4;
+  --surface: #f7f7f7;
+  --surface-hover: #f0f0f0;
+  --surface-strong: #ebebeb;
+  --fg: #171717;
+  --fg-muted: #737373;
+  --fg-subtle: #a3a3a3;
+  --border-strong: #d9d9d9;
   --status-ok: #22c55e;
   --status-warn: #f97316;
-  --brand: #18181b;
-  --brand-hover: #27272a;
-  --brand-ring: rgba(24, 24, 27, 0.28);
+  --brand: #1a1a1a;
+  --brand-hover: #2e2e2e;
+  --brand-ring: rgba(26, 26, 26, 0.28);
   --radius: 12px;
   --radius-sm: 8px;
   --radius-pill: 999px;
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06);
   --shadow-md:
-    0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
+    0 4px 16px rgba(23, 23, 23, 0.08), 0 2px 4px rgba(23, 23, 23, 0.04);
   font-family:
     -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
     ui-sans-serif, system-ui, sans-serif;
@@ -41,28 +41,28 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: hsl(222 18% 8%);
-    --foreground: hsl(210 20% 96%);
-    --card: hsl(222 18% 9%);
-    --primary: hsl(210 20% 96%);
-    --primary-foreground: hsl(222 18% 8%);
-    --muted: hsl(222 14% 16%);
-    --muted-foreground: hsl(216 10% 68%);
-    --border: hsl(222 12% 22%);
-    --ring: hsl(216 10% 72%);
+    --background: hsl(0 0% 13%);
+    --foreground: hsl(0 0% 96%);
+    --card: hsl(0 0% 15%);
+    --primary: hsl(0 0% 96%);
+    --primary-foreground: hsl(0 0% 10%);
+    --muted: hsl(0 0% 16%);
+    --muted-foreground: hsl(0 0% 68%);
+    --border: hsl(0 0% 24%);
+    --ring: hsl(0 0% 72%);
     --danger: hsl(6 88% 70%);
-    --bg: #0f1115;
-    --surface: #181b23;
-    --surface-hover: #1e2230;
-    --surface-strong: #252938;
-    --fg: #f1f5f9;
-    --fg-muted: #94a3b8;
-    --fg-subtle: #64748b;
-    --border: #252938;
-    --border-strong: #323747;
-    --brand: #f4f4f5;
-    --brand-hover: #e4e4e7;
-    --brand-ring: rgba(244, 244, 245, 0.28);
+    --bg: #212121;
+    --surface: #262626;
+    --surface-hover: #2e2e2e;
+    --surface-strong: #3d3d3d;
+    --fg: #f5f5f5;
+    --fg-muted: #a3a3a3;
+    --fg-subtle: #737373;
+    --border: #3d3d3d;
+    --border-strong: #4d4d4d;
+    --brand: #f5f5f5;
+    --brand-hover: #e5e5e5;
+    --brand-ring: rgba(245, 245, 245, 0.28);
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
     --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
   }