@agent-native/core 0.153.0 → 0.153.2

package/corpus/templates/analytics/.agents/skills/adhoc-analysis/SKILL.md

@@ -101,25 +101,27 @@ Don't just dump raw data. Synthesize findings:
 
 ### Step 4: Generate Charts (when useful)
 
-When the analysis benefits from a visual — trends over time, distributions, comparisons between categories — call `generate-chart` before formatting the report. The action returns a `url` you embed directly in the markdown.
-
-```
-generate-chart
-  --title "Closed-lost deals by month"
-  --type bar
-  --labels '["Jan","Feb","Mar"]'
-  --data '[18, 22, 14]'
-```
-
-Embed the returned URL in `resultMarkdown` using standard markdown image syntax:
-
-```markdown
-![Closed-lost deals by month](/api/media/closed-lost-deals-by-month-1234567890.png?v=1234567890)
-```
-
-You can include multiple charts in one analysis. Reach for a chart when it communicates the finding faster than a table — don't force visuals on every analysis.
-
-Include the re-generation step in your saved `instructions` so re-runs produce fresh charts.
+When the analysis benefits from a visual — trends over time, distributions, or
+comparisons between categories — query the data first, then use the live
+`/chart` embed described in `data-querying` for an in-chat answer. Do not call
+`generate-chart` for a one-off chat result: it produces a static image for
+saved artifacts, requires pre-stringified JSON, and does not count as a real
+data query for the final response guard.
+
+For a stacked multi-series bar chart, keep the query in long form and emit a
+panel with `chartType: "bar"`, `config.pivot` containing `xKey`, `seriesKey`,
+and `valueKey`, plus `config.stacked: true`. The live chart route pivots the
+rows and renders one stack per x-axis category. See `data-querying`'s
+"Inline Charts In Chat" section for the exact `embed` fence and encoding.
+
+Only use `generate-chart` when a saved analysis artifact explicitly needs a
+static image. If it returns an error while answering in chat, switch to the
+live embed instead of retrying reformatted `labels` or `data` parameters.
+
+You can include multiple live charts in one analysis. Reach for a chart when it
+communicates the finding faster than a table - don't force visuals on every
+analysis. Include the query and embed configuration in saved `instructions` so
+re-runs produce fresh charts.
 
 ### Step 5: Format Results as Markdown
 

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

@@ -232,6 +232,7 @@ const DayEventCard = memo(function DayEventCard({
   const li = layout.get(event.id) ?? {
     left: 0,
     width: 100,
+    indent: 0,
     col: 0,
     totalCols: 1,
     stackOrder: 0,
@@ -304,8 +305,8 @@ const DayEventCard = memo(function DayEventCard({
       }
       style={{
         ...posStyle,
-        left: `calc(${li.left}% + ${li.col > 0 ? 2 : 0}px)`,
-        width: `calc(${li.width}% - ${li.col > 0 ? 4 : 2}px)`,
+        left: `calc(${li.left}% + ${li.indent}px)`,
+        width: `calc(${li.width}% - ${li.indent * 2 + 2}px)`,
         zIndex:
           isBeingDragged && isDragging
             ? 100

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

@@ -274,6 +274,7 @@ const WeekEventCard = memo(function WeekEventCard({
   const li = layout.get(event.id) ?? {
     left: 0,
     width: 100,
+    indent: 0,
     col: 0,
     totalCols: 1,
     stackOrder: 0,
@@ -372,8 +373,8 @@ const WeekEventCard = memo(function WeekEventCard({
       }
       style={{
         ...style,
-        left: `calc(${li.left}% + ${li.col > 0 ? 2 : 0}px)`,
-        width: `calc(${li.width}% - ${li.col > 0 ? 4 : 2}px)`,
+        left: `calc(${li.left}% + ${li.indent}px)`,
+        width: `calc(${li.width}% - ${li.indent * 2 + 2}px)`,
         zIndex:
           isBeingDragged && isDragging
             ? 100

package/corpus/templates/calendar/app/lib/event-layout.ts

@@ -4,6 +4,7 @@ import { addDays, parseISO, startOfDay } from "date-fns";
 export interface TimedEventLayout {
   left: number;
   width: number;
+  indent: number;
   col: number;
   totalCols: number;
   stackOrder: number;
@@ -20,18 +21,16 @@ interface EventEntry {
   inputOrder: number;
 }
 
-const TEXT_REGION_MINUTES = 45;
 const MIN_VISIBLE_EVENT_MINUTES = 15;
+const OVERLAP_INDENT_PX = 16;
 
 function overlaps(a: EventBounds, b: EventBounds): boolean {
   return a.start < b.end && b.start < a.end;
 }
 
 /**
- * Pack timed events into columns while reserving horizontal space only when
- * the event labels can collide. An event may span unused columns when another
- * event is present there at a different time, which keeps long events readable
- * without wasting the column width needed for genuinely simultaneous labels.
+ * Pack timed events into shallow overlap layers. Later events stay wide enough
+ * to read while their inset exposes the boundary of the event underneath.
  */
 export function computeTimedEventLayout(
   dayEvents: readonly CalendarEvent[],
@@ -66,52 +65,34 @@ export function computeTimedEventLayout(
     return a.inputOrder - b.inputOrder;
   });
 
-  const textOverlaps = (a: EventBounds, b: EventBounds): boolean => {
-    const aTextEnd = Math.min(a.start + TEXT_REGION_MINUTES * 60 * 1000, a.end);
-    const bTextEnd = Math.min(b.start + TEXT_REGION_MINUTES * 60 * 1000, b.end);
-    return a.start < bTextEnd && b.start < aTextEnd;
-  };
-
-  // Place labels side by side only when their visible text regions overlap.
-  const columns: EventEntry[][] = [];
+  // Put overlapping events into the first layer that is free at their start.
+  // Reusing finished layers keeps chained overlaps from creating empty gaps.
+  const overlapLayers: EventEntry[][] = [];
   const eventColumns = new Map<CalendarEvent, number>();
 
   for (const entry of sorted) {
-    let column = columns.findIndex((columnEntries) =>
-      columnEntries.every(
-        (placed) => !textOverlaps(placed.bounds, entry.bounds),
-      ),
+    let column = overlapLayers.findIndex((layerEntries) =>
+      layerEntries.every((placed) => !overlaps(placed.bounds, entry.bounds)),
     );
 
     if (column === -1) {
-      column = columns.length;
-      columns.push([]);
+      column = overlapLayers.length;
+      overlapLayers.push([]);
     }
 
-    columns[column].push(entry);
+    overlapLayers[column].push(entry);
     eventColumns.set(entry.event, column);
   }
 
-  const totalCols = columns.length;
+  const totalCols = overlapLayers.length;
 
   for (const [stackOrder, entry] of sorted.entries()) {
     const col = eventColumns.get(entry.event)!;
-    let span = 1;
-
-    // A column to the right is available when it has no event that overlaps
-    // this card in time. Label-only collisions do not need to block expansion.
-    for (let candidate = col + 1; candidate < totalCols; candidate++) {
-      if (
-        columns[candidate].some((other) => overlaps(other.bounds, entry.bounds))
-      ) {
-        break;
-      }
-      span++;
-    }
 
     result.set(entry.event.id, {
-      left: (col / totalCols) * 100,
-      width: (span / totalCols) * 100,
+      left: 0,
+      width: 100,
+      indent: col * OVERLAP_INDENT_PX,
       col,
       totalCols,
       stackOrder,

package/corpus/templates/clips/app/components/meetings/share-meeting-dialog.tsx

@@ -4,7 +4,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconCheck, IconLink, IconMail } from "@tabler/icons-react";
+import { IconLink, IconMail } from "@tabler/icons-react";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
@@ -12,7 +12,6 @@ import {
   CopyField,
   GeneralAccessSelect,
   MakePublicCard,
-  ShareCardHeader,
   SharePeopleTab,
   copyToClipboard,
   useResourceVisibilityMutation,
@@ -30,7 +29,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export interface ShareMeetingPopoverProps {
   meetingId: string;
-  meetingTitle?: string;
   shareTranscript: boolean;
   transcriptReady: boolean;
   children: ReactNode;
@@ -38,7 +36,6 @@ export interface ShareMeetingPopoverProps {
 
 export function ShareMeetingPopover({
   meetingId,
-  meetingTitle,
   shareTranscript,
   transcriptReady,
   children,
@@ -52,7 +49,6 @@ export function ShareMeetingPopover({
       >
         <ShareMeetingContent
           meetingId={meetingId}
-          meetingTitle={meetingTitle}
           shareTranscript={shareTranscript}
           transcriptReady={transcriptReady}
         />
@@ -63,12 +59,10 @@ export function ShareMeetingPopover({
 
 function ShareMeetingContent({
   meetingId,
-  meetingTitle,
   shareTranscript,
   transcriptReady,
 }: {
   meetingId: string;
-  meetingTitle?: string;
   shareTranscript: boolean;
   transcriptReady: boolean;
 }) {
@@ -85,14 +79,9 @@ function ShareMeetingContent({
 
   const data = sharesQuery.data;
   const canManage = data?.role === "owner" || data?.role === "admin";
-  const titleText = meetingTitle
-    ? t("clipsFinalRaw.shareNamedMeeting", { title: meetingTitle })
-    : t("clipsFinalRaw.shareMeeting");
 
   return (
     <>
-      <ShareCardHeader title={titleText} ownerEmail={data?.ownerEmail} />
-
       <Tabs defaultValue="link" className="min-w-0 px-4 py-3">
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="link" className="gap-1.5">
@@ -192,57 +181,40 @@ function LinkTab({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <GeneralAccessSelect
         visibility={visibility}
         canManage={canManage}
         isPending={isPending}
         onChange={(next) => setResourceVisibility(next)}
+        showDescription={false}
       />
 
-      <div>
-        <div className="mb-2 text-xs font-semibold">
-          {t("shareMeeting.sharedContent")}
-        </div>
-        <div className="rounded-md border border-border">
-          <div className="flex items-center gap-3 border-b border-border px-3 py-2.5">
-            <span
-              aria-hidden
-              className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground"
-            >
-              <IconCheck size={12} strokeWidth={2.5} />
-            </span>
-            <span className="text-sm">{t("shareMeeting.summaryIncluded")}</span>
-          </div>
-          <div className="flex items-start justify-between gap-4 px-3 py-2.5">
-            <div className="min-w-0">
-              <label
-                htmlFor={`meeting-share-transcript-${meetingId}`}
-                className="text-sm font-medium"
-              >
-                {t("shareMeeting.includeTranscript")}
-              </label>
-              <p
-                id={`meeting-share-transcript-description-${meetingId}`}
-                className="mt-0.5 text-xs text-muted-foreground"
-              >
-                {transcriptReady
-                  ? t("shareMeeting.includeTranscriptDescription")
-                  : t("shareMeeting.transcriptUnavailable")}
-              </p>
-            </div>
-            <Switch
-              id={`meeting-share-transcript-${meetingId}`}
-              checked={includeTranscript}
-              onCheckedChange={handleTranscriptSharingChange}
-              disabled={
-                !canManage || !transcriptReady || updateMeeting.isPending
-              }
-              aria-describedby={`meeting-share-transcript-description-${meetingId}`}
-              className="mt-0.5 shrink-0"
-            />
-          </div>
+      <div className="flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2.5">
+        <div className="min-w-0">
+          <label
+            htmlFor={`meeting-share-transcript-${meetingId}`}
+            className="text-sm font-medium"
+          >
+            {t("shareMeeting.includeTranscript")}
+          </label>
+          <p
+            id={`meeting-share-transcript-description-${meetingId}`}
+            className="sr-only"
+          >
+            {transcriptReady
+              ? t("shareMeeting.includeTranscriptDescription")
+              : t("shareMeeting.transcriptUnavailable")}
+          </p>
         </div>
+        <Switch
+          id={`meeting-share-transcript-${meetingId}`}
+          checked={includeTranscript}
+          onCheckedChange={handleTranscriptSharingChange}
+          disabled={!canManage || !transcriptReady || updateMeeting.isPending}
+          aria-describedby={`meeting-share-transcript-description-${meetingId}`}
+          className="shrink-0"
+        />
       </div>
 
       <CopyField label={t("clipsFinalRaw.shareLink")} value={shareUrl} />

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
+  IconChevronDown,
   IconCode,
   IconExternalLink,
   IconLink,
@@ -26,7 +27,6 @@ import {
   CopyField,
   GeneralAccessSelect,
   MakePublicCard,
-  ShareCardHeader,
   SharePeopleTab,
   copyToClipboard,
   useResourceVisibilityMutation,
@@ -35,6 +35,11 @@ import {
   type Visibility,
 } from "@/components/sharing/share-ui";
 import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -45,6 +50,7 @@ import {
 } from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 
 import { buildEmailPreviewMarkup } from "../../../shared/email-preview";
 import { isLoomEmbedUrl } from "../../../shared/loom";
@@ -222,19 +228,12 @@ function ShareRecordingContent({
           absoluteAppUrl(`/share/${recordingId}`),
           ownerViaId,
         );
-  const titleText = recordingTitle
-    ? t("shareDialog.shareTitle", { title: recordingTitle })
-    : t("shareDialog.shareRecording");
-
   return (
     <>
-      <ShareCardHeader
-        title={titleText}
-        ownerEmail={data?.ownerEmail}
-        reserveCloseButton={reserveCloseButton}
-      />
-
-      <Tabs defaultValue="link" className="min-w-0 px-4 py-3">
+      <Tabs
+        defaultValue="link"
+        className={cn("min-w-0 px-4 py-3", reserveCloseButton && "pe-12")}
+      >
         <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="link" className="gap-1.5">
             <IconLink size={14} />
@@ -434,6 +433,30 @@ function LinkTab({
   const agentPrompt = agentLink
     ? t("shareDialog.agentPrompt", { agentContextUrl: agentLink })
     : "";
+  const [agentDetailsOpen, setAgentDetailsOpen] = useState(false);
+  const showMakePublic = sharesLoaded && !isPublic && canManage;
+  const downloadButton = videoUrl ? (
+    <Button
+      variant="outline"
+      size="sm"
+      className={isLoomRecording ? "gap-1.5" : undefined}
+      onClick={() => window.open(videoUrl, "_blank", "noopener,noreferrer")}
+    >
+      {isLoomRecording ? (
+        <>
+          <IconExternalLink className="h-4 w-4" />
+          {t("shareDialog.openPlayer")}
+        </>
+      ) : (
+        t("recordRoute.downloadRecording")
+      )}
+    </Button>
+  ) : null;
+  const moveDownloadIntoMakePublicRow = showMakePublic && Boolean(videoUrl);
+
+  useEffect(() => {
+    if (isPublic) setAgentDetailsOpen(false);
+  }, [isPublic]);
 
   return (
     <div className="space-y-4">
@@ -444,6 +467,7 @@ function LinkTab({
           isPending={visibilityPending}
           onChange={(next) => setResourceVisibility(next)}
           publicDescription={t("shareDialog.publicDescription")}
+          showDescription={false}
         />
       ) : (
         <div className="space-y-2" aria-hidden>
@@ -463,47 +487,77 @@ function LinkTab({
       />
 
       {!isPublic ? (
-        <div className="space-y-2">
-          <CopyField
-            label={t("shareDialog.shareWithAgents")}
-            value={agentLink}
-            disabled={agentShareDisabled}
-          />
-          {sharesLoaded ? (
-            <>
-              <p className="text-xs text-muted-foreground">
-                {t("shareDialog.agentTokenDescription")}
-              </p>
-              {agentLinkError ? (
-                <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
-                  <p className="text-xs text-muted-foreground">
-                    {t("shareDialog.agentLinkUnavailable")}
-                  </p>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="h-7"
-                    onClick={() => void loadAgentContextUrl()}
-                    disabled={createAgentLink.isPending}
-                  >
-                    {t("shareDialog.retryAgentLink")}
-                  </Button>
-                </div>
-              ) : null}
+        <Collapsible
+          open={agentDetailsOpen}
+          onOpenChange={setAgentDetailsOpen}
+          className="overflow-hidden rounded-md border border-border"
+        >
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex min-h-10 w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+            >
+              <span className="flex min-w-0 items-center gap-2 truncate">
+                <IconLink
+                  aria-hidden="true"
+                  className="size-3.5 shrink-0 text-muted-foreground"
+                  strokeWidth={1.8}
+                />
+                {t("shareDialog.shareWithAgents")}
+              </span>
+              <IconChevronDown
+                aria-hidden="true"
+                className={`size-4 shrink-0 text-muted-foreground transition-transform ${agentDetailsOpen ? "rotate-180" : ""}`}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="clips-collapsible-content border-t border-border px-3 py-3">
+            <div className="space-y-2">
               <CopyField
-                label={t("shareDialog.copyAgentPrompt")}
-                value={agentPrompt}
+                label={t("shareDialog.shareWithAgents")}
+                value={agentLink}
                 disabled={agentShareDisabled}
               />
-            </>
-          ) : null}
-        </div>
+              {sharesLoaded ? (
+                <>
+                  <p className="text-xs text-muted-foreground">
+                    {t("shareDialog.agentTokenDescription")}
+                  </p>
+                  {agentLinkError ? (
+                    <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
+                      <p className="text-xs text-muted-foreground">
+                        {t("shareDialog.agentLinkUnavailable")}
+                      </p>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7"
+                        onClick={() => void loadAgentContextUrl()}
+                        disabled={createAgentLink.isPending}
+                      >
+                        {t("shareDialog.retryAgentLink")}
+                      </Button>
+                    </div>
+                  ) : null}
+                  <CopyField
+                    label={t("shareDialog.copyAgentPrompt")}
+                    value={agentPrompt}
+                    disabled={agentShareDisabled}
+                  />
+                </>
+              ) : null}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       ) : null}
 
-      {sharesLoaded && !isPublic && canManage ? (
+      {showMakePublic ? (
         <MakePublicCard
           isPending={isPending}
+          secondaryAction={
+            moveDownloadIntoMakePublicRow ? downloadButton : undefined
+          }
           onMakePublic={() =>
             setResourceVisibility("public", {
               onSuccess: () => copyToClipboard(shareUrl),
@@ -512,7 +566,9 @@ function LinkTab({
         />
       ) : null}
 
-      {emailPreviewThumbnailUrl || videoUrl || animatedThumbnailUrl ? (
+      {emailPreviewThumbnailUrl ||
+      animatedThumbnailUrl ||
+      (videoUrl && !moveDownloadIntoMakePublicRow) ? (
         <div className="flex flex-wrap gap-2">
           {emailPreviewThumbnailUrl ? (
             <Button
@@ -532,25 +588,7 @@ function LinkTab({
               {t("shareDialog.gifPreview")}
             </Button>
           ) : null}
-          {videoUrl ? (
-            <Button
-              variant="outline"
-              size="sm"
-              className={isLoomRecording ? "gap-1.5" : undefined}
-              onClick={() =>
-                window.open(videoUrl, "_blank", "noopener,noreferrer")
-              }
-            >
-              {isLoomRecording ? (
-                <>
-                  <IconExternalLink className="h-4 w-4" />
-                  {t("shareDialog.openPlayer")}
-                </>
-              ) : (
-                t("recordRoute.downloadRecording")
-              )}
-            </Button>
-          ) : null}
+          {!moveDownloadIntoMakePublicRow ? downloadButton : null}
         </div>
       ) : null}
     </div>