@agent-native/core 0.98.17 → 0.99.1

package/corpus/templates/analytics/server/routes/[...page].get.ts

@@ -161,9 +161,7 @@ export default defineEventHandler(async (event) => {
   const headers = new Headers(response.headers);
   headers.delete("content-length");
   if (discovery.privateResponse) {
-    headers.set("Cache-Control", "private, max-age=0, no-store");
     headers.set("Referrer-Policy", "no-referrer");
-    setResponseHeader(event, "Cache-Control", "private, max-age=0, no-store");
     setResponseHeader(event, "Referrer-Policy", "no-referrer");
   }
 

package/corpus/templates/assets/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/assets/agent-native.app-skill.json

@@ -5,7 +5,7 @@
   "description": "Create, search, select, and export brand image and video assets from the Assets app.",
   "hosted": {
     "url": "https://assets.agent-native.com",
-    "mcpUrl": "https://assets.agent-native.com/_agent-native/mcp"
+    "mcpUrl": "https://assets.agent-native.com/mcp"
   },
   "mcp": {
     "serverName": "agent-native-assets"

package/corpus/templates/brain/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/calendar/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/calendar/AGENTS.md

@@ -67,7 +67,8 @@ Detailed event, availability, booking, storage, and UI rules live in
 - Use `get-attendee-timezones` / `set-attendee-timezone` to read or save
   per-guest IANA timezone overrides (`attendee-timezones` user setting). The UI
   shows each guest's local event-start time when a timezone is known (self from
-  the event/browser zone; others from `attendee.timeZone` or the override map).
+  the browser zone; others from `attendee.timeZone` or the override map, with
+  the event zone as a fallback for the organizer).
 - Use `rsvp-event` for invitation responses. Pass `note` when the user wants a
   visible RSVP comment on a declined or tentative response; pass an empty note to
   clear an existing RSVP comment.

package/corpus/templates/calendar/app/components/calendar/EventDetailPopover.tsx

@@ -11,7 +11,6 @@ import {
   IconMapPin,
   IconUser,
   IconVideo,
-  IconGlobe,
   IconRefresh,
   IconBell,
   IconChevronRight,
@@ -86,7 +85,6 @@ import {
   dateTimeInTimezoneToIso,
   formatRecurrenceText,
   formatReminderText,
-  formatTimezoneLabel,
   getEventEndValidationMessage,
   getLocalTimezone,
   getRecurrencePreset,
@@ -1274,17 +1272,6 @@ export function EventDetailPopover({
     ? t("eventForm.loadingRepeat")
     : formatRecurrenceText(recurrenceRules) ||
       (isRecurringEvent ? t("eventForm.repeats") : null);
-  // Show the browser's local timezone offset (this is what the user sees times in)
-  const localOffsetMinutes = -new Date().getTimezoneOffset();
-  const localOffsetSign = localOffsetMinutes >= 0 ? "+" : "-";
-  const localOffsetH = Math.floor(Math.abs(localOffsetMinutes) / 60);
-  const localOffsetM = Math.abs(localOffsetMinutes) % 60;
-  const tzLabel = event.startTimeZone
-    ? formatTimezoneLabel(event.startTimeZone)
-    : localOffsetM
-      ? `GMT${localOffsetSign}${localOffsetH}:${String(localOffsetM).padStart(2, "0")}`
-      : `GMT${localOffsetSign}${localOffsetH}`;
-
   const handleOpenChange = useCallback(
     (newOpen: boolean) => {
       if (!newOpen && open) {
@@ -1726,12 +1713,6 @@ export function EventDetailPopover({
                 />
               )}
 
-              {/* Timezone */}
-              <div className="flex items-center gap-3 py-1.5">
-                <IconGlobe className="h-4 w-4 shrink-0 text-muted-foreground" />
-                <span className="text-sm text-muted-foreground">{tzLabel}</span>
-              </div>
-
               {/* Recurrence */}
               {editingField === "recurrence" ? (
                 <div className="flex items-start gap-3 py-1.5">

package/corpus/templates/calendar/app/lib/attendee-local-time.ts

@@ -3,9 +3,12 @@
  *
  * Resolution priority for an attendee's IANA timezone:
  * 1. Self attendee (`attendee.self` or email matches accountEmail) →
- *    event.startTimeZone, else the browser timezone
+ *    the browser timezone, so an event owner's timezone is never shown as
+ *    the signed-in user's local time
  * 2. Optional `attendee.timeZone` on the attendee object
  * 3. User-stored override from the `attendee-timezones` setting map
+ * 4. The event start timezone for the organizer when no more specific zone is
+ *    available
  *
  * When no timezone is known, returns null — never invent a zone.
  */
@@ -13,6 +16,7 @@
 export type AttendeeTimezoneSource = {
   email: string;
   self?: boolean;
+  organizer?: boolean;
   timeZone?: string;
 };
 
@@ -61,15 +65,16 @@ export function resolveAttendeeTimeZone(
   } = input;
 
   if (isSelfAttendee(attendee, accountEmail)) {
-    if (isValidIanaTimeZone(eventStartTimeZone)) {
-      return eventStartTimeZone!.trim();
-    }
     const browser =
       browserTimeZone?.trim() ||
       (typeof Intl !== "undefined"
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined);
-    return isValidIanaTimeZone(browser) ? browser!.trim() : null;
+    if (isValidIanaTimeZone(browser)) return browser!.trim();
+
+    return isValidIanaTimeZone(eventStartTimeZone)
+      ? eventStartTimeZone!.trim()
+      : null;
   }
 
   if (isValidIanaTimeZone(attendee.timeZone)) {
@@ -82,6 +87,10 @@ export function resolveAttendeeTimeZone(
     return override!.trim();
   }
 
+  if (attendee.organizer && isValidIanaTimeZone(eventStartTimeZone)) {
+    return eventStartTimeZone!.trim();
+  }
+
   return null;
 }
 

package/corpus/templates/calendar/changelog/2026-07-13-your-local-time-now-follows-your-browser-timezone-and-event-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Your local time now follows your browser timezone, and event details no longer show a redundant timezone row.

package/corpus/templates/chat/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/clips/.agents/skills/recording/SKILL.md

@@ -44,7 +44,7 @@ Raw `MediaRecorder` files are not friendly to progressive HTTP playback, which
 shows up as "clip takes minutes to load" and "re-buffers every time I seek"
 even though the file downloads fine:
 
-- **MP4** is written with the `moov` metadata atom *after* `mdat`, so a player
+- **MP4** is written with the `moov` metadata atom _after_ `mdat`, so a player
   must fetch the whole file before it can start or seek.
 - **WebM** is a live stream with no Cues (seek index) and an unknown Segment
   duration, so Chrome won't honor `currentTime = X` and has to scan/download.
@@ -116,7 +116,12 @@ different listing.
 
 ## Camera bubble
 
-When mode is `screen+camera`, we composite a circular camera feed in the corner. Render the bubble in a separate `<video>` element and record it into a second `MediaRecorder`; the server side stitches them with ffmpeg.wasm during `processing`. Do **not** try to pre-composite in the browser — that burns GPU and drops frames.
+When mode is `screen+camera`, "the bubble" is two different things:
+
+- **On-screen self-view.** `CameraBubble` renders a plain, unrecorded `<video>` element the user drags around to frame themselves during countdown/recording. It is never captured — it's just local framing UI.
+- **Recorded composite.** Display capture can't include that DOM element once the user records another window/app, so the saved video has to bake the camera circle in before `MediaRecorder` ever sees a frame. `createCameraCompositeStream` (`app/lib/camera-composite.ts`) draws the display video plus a clipped, mirrored camera circle onto an offscreen `<canvas>` and feeds `canvas.captureStream()` into a single `MediaRecorder`. There is **no** second `MediaRecorder` and **no** server-side ffmpeg stitching — the composite happens client-side, live, before upload.
+
+Because that draw loop runs continuously for the whole recording, keep its CPU/GPU cost bounded: a Worker-based timer drives the draw loop at the capture frame rate (`SCREEN_CAPTURE_FRAME_RATE`, 24fps — falling back to `requestAnimationFrame` only if Worker creation fails, e.g. under a strict CSP), the canvas is hard-capped to 1080p-class dimensions (1920px on its longest edge) even if the source display track is Retina/4K, and the bubble's drop shadow is pre-rendered into a small cached sprite (keyed by bubble size) instead of re-blurring with `shadowBlur` every frame.
 
 ## Error recovery
 

package/corpus/templates/clips/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/clips/AGENTS.md

@@ -36,6 +36,9 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   generation run in the durable post-finalize path; do not hide a usable native
   transcript behind failed metadata work, and keep heuristic titles replaceable
   until the agent refinement lands.
+- Desktop native transcripts merge microphone and system-audio streams while
+  removing overlapping duplicate speech and low-speech Whisper hallucinations;
+  keep system audio enabled when the meeting audio comes from another app.
 - Use `request-transcript --recordingId=<id> --force=true` to retry a failed
   transcript. Pass `--regenerate=true` to replace an existing ready transcript
   from the stored recording media; if regeneration fails, keep the prior ready
@@ -95,6 +98,10 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   (`connect-slack`, `/api/slack/oauth/callback`) so each Slack workspace gets
   its own encrypted bot token in `app_secrets`. `SLACK_BOT_TOKEN` is only a
   legacy single-workspace fallback and must remain behind the team allowlist.
+- Atlassian/Jira is available through the shared MCP integration catalog. It
+  uses Atlassian Rovo MCP OAuth; explain that an Atlassian organization admin
+  may need to allow the Clips app domain and enable the required Read, Write,
+  and Search permissions before the connection can complete.
 - Browser recordings can include redacted browser diagnostics captured during
   the recording session. `save-browser-diagnostics` is UI/internal and stores
   bounded console logs plus fetch/XHR method, URL path/query keys, status, and

package/corpus/templates/clips/actions/list-meetings.ts

@@ -14,6 +14,7 @@
  */
 
 import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
 import { accessFilter } from "@agent-native/core/sharing";
 import {
   and,
@@ -31,7 +32,7 @@ import {
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { isPersonalSoloCalendarEvent } from "../server/lib/calendar-event-classification.js";
+import { isSoloCalendarEvent } from "../server/lib/calendar-event-classification.js";
 import {
   calendarEventToMeetingView,
   eventEndIso,
@@ -86,12 +87,13 @@ export default defineAction({
     excludePersonalSoloEvents: booleanParam
       .default(false)
       .describe(
-        "Exclude obvious solo personal calendar blocks such as Gym or Dinner. Used by desktop meeting reminders.",
+        "Exclude calendar events with no active attendee besides the current user. Used by desktop meeting reminders.",
       ),
   }),
   http: { method: "GET" },
   run: async (args) => {
     const db = getDb();
+    const currentUserEmail = getRequestUserEmail();
     const now = new Date();
     const nowIso = now.toISOString();
 
@@ -188,6 +190,11 @@ export default defineAction({
     // event was emitted here — not merely because some other account returned
     // data or errored.
     const emittedLiveEventKeys = new Set<string>();
+    // Calendar events excluded from desktop reminders because they have no
+    // active attendee besides the current user. Keep the correlated
+    // persisted meeting ids here too, so materialized solo events cannot
+    // re-enter the reminder list through the fallback persisted-row merge.
+    const excludedLiveEventKeys = new Set<string>();
     // Map a persisted meeting's `calendarEventId` (calendar_events.id) to the
     // Google event externalId so we can match it against the emitted set.
     const calendarEventIdToExternalId = new Map<string, string>();
@@ -269,10 +276,15 @@ export default defineAction({
           for (const event of items) {
             if (!event.id || event.status === "cancelled") continue;
             if (!isTimedCalendarEvent(event)) continue;
+            const cached = cachedByExternalId.get(event.id);
             if (
               args.excludePersonalSoloEvents &&
-              isPersonalSoloCalendarEvent({ account, event })
+              isSoloCalendarEvent({ account, event, currentUserEmail })
             ) {
+              excludedLiveEventKeys.add(event.id);
+              if (cached?.meetingId) {
+                excludedLiveEventKeys.add(cached.meetingId);
+              }
               continue;
             }
             const startIso = eventStartIso(event);
@@ -301,7 +313,6 @@ export default defineAction({
               continue;
             }
 
-            const cached = cachedByExternalId.get(event.id);
             const persisted = cached?.meetingId
               ? persistedById.get(cached.meetingId)
               : null;
@@ -344,6 +355,10 @@ export default defineAction({
       const liveExternalId = meeting.calendarEventId
         ? calendarEventIdToExternalId.get(meeting.calendarEventId)
         : undefined;
+      const liveEventExcluded =
+        excludedLiveEventKeys.has(meeting.id) ||
+        (liveExternalId ? excludedLiveEventKeys.has(liveExternalId) : false);
+      if (liveEventExcluded) continue;
       const liveEventEmitted =
         emittedLiveEventKeys.has(meeting.id) ||
         (liveExternalId ? emittedLiveEventKeys.has(liveExternalId) : false);

package/corpus/templates/clips/actions/start-meeting-recording.ts

@@ -71,6 +71,7 @@ export default defineAction({
           recording: existing,
           meetingId,
           created: false,
+          scheduledEnd: meeting.scheduledEnd,
         };
       }
     }
@@ -117,6 +118,11 @@ export default defineAction({
       .where(eq(schema.recordings.id, recordingId))
       .limit(1);
 
-    return { recording, meetingId, created: true };
+    return {
+      recording,
+      meetingId,
+      created: true,
+      scheduledEnd: meeting.scheduledEnd,
+    };
   },
 });

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -13,7 +13,7 @@ import {
   IconAlertTriangle,
 } from "@tabler/icons-react";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { ViewedByPopover } from "@/components/sharing/viewed-by-popover";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -85,7 +85,6 @@ export function RecordingCard({
   onTrash,
   readOnly = false,
 }: RecordingCardProps) {
-  const navigate = useNavigate();
   const t = useT();
   const { formatDate, formatRelativeTime } = useFormatters();
   const [hovered, setHovered] = useState(false);
@@ -141,26 +140,23 @@ export function RecordingCard({
 
   const recordingPath = `/r/${recording.id}`;
 
-  const handleOpen = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      const shouldOpenNewTab =
-        event.button === 1 ||
-        (event.button === 0 && (event.metaKey || event.ctrlKey));
-
-      if (shouldOpenNewTab) {
-        event.preventDefault();
-        event.stopPropagation();
-        window.open(recordingPath, "_blank", "noopener,noreferrer");
+  const handleLinkClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        !selectionMode ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      ) {
         return;
       }
 
-      if (selectionMode) {
-        onToggleSelect?.(recording.id);
-      } else {
-        navigate(recordingPath);
-      }
+      event.preventDefault();
+      onToggleSelect?.(recording.id);
     },
-    [navigate, onToggleSelect, recording.id, recordingPath, selectionMode],
+    [onToggleSelect, recording.id, selectionMode],
   );
 
   const handleCheckbox = useCallback(
@@ -182,8 +178,6 @@ export function RecordingCard({
   return (
     <div
       role="article"
-      onClick={handleOpen}
-      onAuxClick={handleOpen}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       className={cn(
@@ -193,8 +187,15 @@ export function RecordingCard({
         selected && "ring-2 ring-primary border-primary",
       )}
     >
+      <Link
+        to={recordingPath}
+        aria-label={displayTitle}
+        onClick={handleLinkClick}
+        className="absolute inset-0 z-0 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+      />
+
       {/* Thumbnail */}
-      <div className="relative aspect-video bg-muted overflow-hidden">
+      <div className="relative z-10 aspect-video overflow-hidden bg-muted pointer-events-none">
         {displayThumbnail ? (
           // eslint-disable-next-line jsx-a11y/alt-text
           <img
@@ -229,7 +230,7 @@ export function RecordingCard({
         {canSelect && (selectionMode || hovered || selected) && (
           <div
             onClick={handleCheckbox}
-            className="absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
+            className="pointer-events-auto absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded border border-border bg-background/90"
           >
             <Checkbox
               checked={selected}
@@ -285,7 +286,7 @@ export function RecordingCard({
                 <button
                   type="button"
                   onClick={handleRemoveFailed}
-                  className="rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground hover:bg-accent"
+                  className="pointer-events-auto rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground hover:bg-accent"
                 >
                   {t("clipsFinalRaw.remove")}
                 </button>
@@ -296,7 +297,7 @@ export function RecordingCard({
       </div>
 
       {/* Body */}
-      <div className="flex-1 p-3 space-y-2">
+      <div className="relative z-10 flex-1 space-y-2 p-3 pointer-events-none">
         <div className="flex items-start gap-2">
           <div className="min-w-0 flex-1">
             {hasDefaultTitle ? (
@@ -319,7 +320,7 @@ export function RecordingCard({
               {recording.viewCount > 0 && !readOnly ? (
                 <ViewedByPopover
                   recordingId={recording.id}
-                  className="underline-offset-2 hover:underline hover:text-foreground"
+                  className="pointer-events-auto underline-offset-2 hover:underline hover:text-foreground"
                 >
                   {t("clipsFinalRaw.viewsCount", {
                     count: recording.viewCount,
@@ -341,7 +342,7 @@ export function RecordingCard({
             <DropdownMenu>
               <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                 <button
-                  className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  className="pointer-events-auto rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                   aria-label={t("clipsFinalRaw.recordingMenu")}
                 >
                   <IconDots className="h-4 w-4" />

package/corpus/templates/clips/app/components/library/space-card.tsx

@@ -1,5 +1,5 @@
 import { IconUsersGroup, IconVideo } from "@tabler/icons-react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { cn } from "@/lib/utils";
 
@@ -19,15 +19,13 @@ interface SpaceCardProps {
 }
 
 export function SpaceCard({ space, className }: SpaceCardProps) {
-  const navigate = useNavigate();
   const color = space.color || "hsl(var(--primary))";
   const members = space.memberEmails ?? [];
   const initial = (space.name.trim().slice(0, 1) || "S").toUpperCase();
 
   return (
-    <button
-      type="button"
-      onClick={() => navigate(`/spaces/${space.id}`)}
+    <Link
+      to={`/spaces/${space.id}`}
       className={cn(
         "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-start",
         "hover:border-primary/40",
@@ -92,6 +90,6 @@ export function SpaceCard({ space, className }: SpaceCardProps) {
           </div>
         )}
       </div>
-    </button>
+    </Link>
   );
 }