@agent-native/core 0.135.1 → 0.135.2

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.135.1",
+  "version": "0.135.2",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/templates/clips/actions/add-comment.ts

@@ -67,6 +67,10 @@ export default defineAction({
 
     if (!rec) throw new Error(`Recording not found: ${args.recordingId}`);
 
+    // Floor to the nearest second so nearby comments land on the same
+    // timestamp bucket for scrubber grouping and the playback overlay.
+    const videoTimestampMs = Math.floor(args.videoTimestampMs / 1000) * 1000;
+
     await db.insert(schema.recordingComments).values({
       id,
       recordingId: args.recordingId,
@@ -76,7 +80,7 @@ export default defineAction({
       authorEmail,
       authorName: args.authorName ?? null,
       content: args.content,
-      videoTimestampMs: args.videoTimestampMs,
+      videoTimestampMs,
       createdAt: now,
       updatedAt: now,
     });
@@ -94,7 +98,7 @@ export default defineAction({
     await writeAppState("refresh-signal", { ts: Date.now() });
 
     console.log(
-      `Added comment to recording ${args.recordingId} @ ${args.videoTimestampMs}ms (thread: ${threadId})`,
+      `Added comment to recording ${args.recordingId} @ ${videoTimestampMs}ms (thread: ${threadId})`,
     );
 
     return { id, threadId, notified };

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -1,4 +1,7 @@
-import { useActionMutation } from "@agent-native/core/client/hooks";
+import {
+  useActionMutation,
+  useAvatarUrl,
+} from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconSend,
@@ -12,7 +15,7 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { type Ref, useEffect, useMemo, useRef, useState } from "react";
 
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -860,10 +863,14 @@ function CommentCard({
   }
 
   const commentContent = linkifyCommentContent(comment.content);
+  const avatarUrl = useAvatarUrl(comment.authorEmail);
 
   return (
     <div className={cn("flex gap-2", comment.resolved && "opacity-60")}>
       <Avatar className="h-7 w-7 shrink-0">
+        {avatarUrl ? (
+          <AvatarImage src={avatarUrl} alt={displayName(comment)} />
+        ) : null}
         <AvatarFallback className="text-[10px] bg-primary text-primary-foreground">
           {initials(displayName(comment))}
         </AvatarFallback>

package/corpus/templates/clips/app/components/player/playback-comment-overlay.tsx

@@ -1,4 +1,9 @@
-export const PLAYBACK_COMMENT_VISIBLE_MS = 4_000;
+import { useAvatarUrl } from "@agent-native/core/client/hooks";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+export const PLAYBACK_COMMENT_VISIBLE_MS = 1_000;
 
 export function getPlaybackCommentVisibleMs(playbackRate = 1): number {
   const safePlaybackRate =
@@ -50,50 +55,62 @@ export function PlaybackCommentOverlay({
   comments,
   currentMs,
   playbackRate = 1,
+  onClick,
 }: {
   comments: PlaybackComment[] | undefined;
   currentMs: number;
   playbackRate?: number;
+  onClick?: () => void;
 }) {
   const activeComments = getActivePlaybackComments(
     comments,
     currentMs,
     playbackRate,
   );
+  const avatarUrl = useAvatarUrl(activeComments[0]?.authorEmail);
   if (activeComments.length === 0) return null;
 
+  const [comment, ...rest] = activeComments;
+  const author = displayAuthor(comment);
+  const Card = (onClick ? "button" : "div") as "button" | "div";
+
   return (
     <div
       data-player-ui
       className="pointer-events-none absolute inset-x-3 bottom-[5.25rem] z-20 flex justify-center sm:inset-x-6"
       aria-live="polite"
     >
-      <div className="flex w-full max-w-xl flex-col items-center gap-2">
-        {activeComments.map((comment) => {
-          const author = displayAuthor(comment);
-          return (
-            <div
-              key={comment.id}
-              className="animate-in fade-in slide-in-from-bottom-2 flex max-w-full items-start gap-2.5 rounded-xl bg-black/85 px-3 py-2.5 text-white shadow-2xl ring-1 ring-white/15 backdrop-blur-md duration-200"
-            >
-              <span
-                aria-hidden="true"
-                className="flex size-7 shrink-0 items-center justify-center rounded-full bg-white/15 text-[10px] font-semibold text-white"
-              >
-                {initials(author)}
-              </span>
-              <div className="min-w-0">
-                <p className="truncate text-xs font-semibold text-white/80">
-                  {author}
-                </p>
-                <p className="line-clamp-3 break-words text-sm leading-5 text-white">
-                  {comment.content}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+      <Card
+        key={comment.id}
+        type={onClick ? "button" : undefined}
+        onClick={onClick}
+        className={cn(
+          "animate-in fade-in slide-in-from-bottom-2 flex w-full max-w-xl flex-col gap-1.5 rounded-xl bg-black/85 px-3 py-2.5 text-left text-white shadow-2xl ring-1 ring-white/15 backdrop-blur-md duration-200",
+          onClick && "pointer-events-auto cursor-pointer hover:bg-black/95",
+        )}
+      >
+        <div className="flex max-w-full items-start gap-2.5">
+          <Avatar aria-hidden="true" className="size-7 shrink-0">
+            {avatarUrl ? <AvatarImage src={avatarUrl} alt={author} /> : null}
+            <AvatarFallback className="bg-white/15 text-[10px] font-semibold text-white">
+              {initials(author)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <p className="truncate text-xs font-semibold text-white/80">
+              {author}
+            </p>
+            <p className="line-clamp-3 break-words text-sm leading-5 text-white">
+              {comment.content}
+            </p>
+          </div>
+        </div>
+        {rest.length > 0 && (
+          <p className="pl-[2.375rem] text-xs text-white/60">
+            +{rest.length} other comment{rest.length > 1 ? "s" : ""}
+          </p>
+        )}
+      </Card>
     </div>
   );
 }

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -1,3 +1,4 @@
+import { IconMessage2Filled } from "@tabler/icons-react";
 import { useMemo, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
@@ -225,10 +226,17 @@ export function Scrubber(props: ScrubberProps) {
               e.stopPropagation();
               onSeek(ms);
             }}
-            className="absolute -top-1 -translate-x-1/2 h-3.5 w-3.5 rounded-full bg-yellow-400 border-2 border-black/50 hover:scale-125 transition-transform"
+            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md ring-2 ring-background transition-transform hover:scale-125"
             style={{ left: (ms / Math.max(1, durationMs)) * 100 + "%" }}
             aria-label={`${list.length} comment${list.length > 1 ? "s" : ""}`}
-          />
+          >
+            <IconMessage2Filled className="h-2.5 w-2.5" />
+            {list.length > 1 && (
+              <span className="absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-bold leading-none text-primary-foreground ring-2 ring-background">
+                {list.length}
+              </span>
+            )}
+          </button>
         ))}
 
         {/* Reaction dots */}

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -218,6 +218,8 @@ export interface VideoPlayerProps {
    * lifecycle instead of polling an imperative-handle getter.
    */
   onVideoElementChange?: (video: HTMLVideoElement | null) => void;
+  /** Called when the viewer clicks the timestamped-comment overlay. */
+  onCommentClick?: () => void;
 }
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
@@ -255,6 +257,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       recordingId,
       role,
       onVideoElementChange,
+      onCommentClick,
     } = props;
 
     const resolvedVideoSrc = useMemo(
@@ -1651,6 +1654,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             comments={comments}
             currentMs={currentMs}
             playbackRate={speed}
+            onClick={onCommentClick}
           />
         ) : null}
 

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

@@ -261,15 +261,26 @@ export default function RecordingPage() {
   // The compact layout stacks the panel below the video, so switching tabs
   // alone leaves the user looking at the player. Desktop always renders the
   // side aside, so nothing to scroll there.
-  const openInsightsPanel = useCallback(() => {
-    setPanel("insights");
-    if (!isCompactLayout) return;
-    requestAnimationFrame(() => {
-      document
-        .getElementById("clip-activity-panel")
-        ?.scrollIntoView({ block: "start" });
-    });
-  }, [isCompactLayout]);
+  const openSidePanel = useCallback(
+    (next: SidePanel) => {
+      setPanel(next);
+      if (!isCompactLayout) return;
+      requestAnimationFrame(() => {
+        document
+          .getElementById("clip-activity-panel")
+          ?.scrollIntoView({ block: "start" });
+      });
+    },
+    [isCompactLayout],
+  );
+  const openInsightsPanel = useCallback(
+    () => openSidePanel("insights"),
+    [openSidePanel],
+  );
+  const openCommentsPanel = useCallback(
+    () => openSidePanel("comments"),
+    [openSidePanel],
+  );
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -1608,6 +1619,7 @@ export default function RecordingPage() {
                   cta={firstCta}
                   onCtaClick={() => tracking.reportCtaClick()}
                   onTimeUpdate={(ms) => setCurrentMs(ms)}
+                  onCommentClick={openCommentsPanel}
                   className="h-full w-full rounded-none sm:rounded-xl"
                 />
                 {commentOpen ? (
@@ -1667,12 +1679,7 @@ export default function RecordingPage() {
                       className="shrink-0"
                       onOpen={() => {
                         if (isCompactLayout) {
-                          setPanel("comments");
-                          requestAnimationFrame(() => {
-                            document
-                              .getElementById("clip-activity-panel")
-                              ?.scrollIntoView({ block: "start" });
-                          });
+                          openCommentsPanel();
                           return;
                         }
                         setCommentAtMs(resolvePlaybackMs());

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -997,6 +997,7 @@ export default function ShareRoute() {
               cta={firstCta}
               onCtaClick={() => tracking.reportCtaClick()}
               onTimeUpdate={(ms) => setCurrentMs(ms)}
+              onCommentClick={() => setPanel("comments")}
               className="h-full w-full rounded-none sm:rounded-xl"
             />
           </div>

package/dist/observability/routes.d.ts

@@ -41,16 +41,16 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     thumbsUpRate: number;
     avgEvalScore: number;
 } | {
-    error?: undefined;
     summary: import("./types.js").TraceSummary;
     spans: import("./types.js").TraceSpan[];
     id?: undefined;
+    error?: undefined;
     ok?: undefined;
 } | {
-    error?: undefined;
     summary?: undefined;
     spans?: undefined;
     id: string;
+    error?: undefined;
     ok?: undefined;
 } | {
     summary?: undefined;
@@ -59,10 +59,10 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     error: any;
     ok?: undefined;
 } | {
-    error?: undefined;
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
+    error?: undefined;
     ok: boolean;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/resources/handlers.d.ts

@@ -48,8 +48,8 @@ export declare function handleUpdateResource(event: any): Promise<import("./stor
 }>;
 /** DELETE /_agent-native/resources/:id — delete a resource */
 export declare function handleDeleteResource(event: any): Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/secrets/routes.d.ts

@@ -34,37 +34,37 @@ export declare function createListSecretsHandler(): import("h3").EventHandlerWit
 /** POST /_agent-native/secrets/:key — write a secret. */
 export declare function createWriteSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: string;
-    ok?: undefined;
     status?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     status: string;
+    error?: undefined;
 } | {
-    ok?: undefined;
     error: string;
     removed?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     removed: boolean;
+    error?: undefined;
 }>>;
 /**
  * POST /_agent-native/secrets/:key/test — re-run the validator against the
  * current stored value without changing anything. Useful for the "Test" button.
  */
 export declare function createTestSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
     note?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     note?: undefined;
-} | {
     error?: undefined;
+} | {
     ok: boolean;
     note: string;
+    error?: undefined;
 } | {
     note?: undefined;
     ok: boolean;
@@ -95,12 +95,12 @@ export interface AdHocSecretPayload {
 export declare function createAdHocSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<AdHocSecretPayload[] | {
     error: string;
 } | {
-    error?: undefined;
     ok: boolean;
     key: string;
-} | {
     error?: undefined;
+} | {
     ok: boolean;
     removed: boolean;
+    error?: undefined;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/server/transcribe-voice.d.ts

@@ -20,7 +20,7 @@ export declare function createTranscribeVoiceHandler(): import("h3").EventHandle
     error: string;
     text?: undefined;
 } | {
-    error?: undefined;
     text: string;
+    error?: undefined;
 }>>;
 //# sourceMappingURL=transcribe-voice.d.ts.map

package/docs/content/getting-started-actions.mdx

@@ -0,0 +1,235 @@
+---
+title: "Add an Action"
+description: "Define your first action and render its result as a UI component directly inside the chat transcript."
+---
+
+# Add an Action
+
+This is part two of the Getting Started series. In [Getting Started](/docs/getting-started) you created a Chat app and connected an AI engine. Here you'll define your first action and render its result inline in chat.
+
+## Add an action {#add-an-action}
+
+An action is a typed operation that both your agent and your UI can call. It's
+how the agent does things in your app. Actions live in the `actions/` directory
+and can be triggered from chat, from React components, from the CLI, or on a
+schedule. You define them once and call them from anywhere.
+
+### Try the starter action
+
+The Chat template includes a `hello` action at `actions/hello.ts`:
+
+```ts filename="actions/hello.ts"
+import { defineAction } from "@agent-native/core/action";
+import { z } from "zod";
+
+export default defineAction({
+  description: "Return a friendly greeting.",
+  schema: z.object({
+    name: z.string().default("world").describe("Name to greet"),
+  }),
+  http: { method: "GET" },
+  run: async ({ name }) => {
+    return { message: `Hello, ${name}!` };
+  },
+});
+```
+
+Run it from the terminal (inside your `my-app/` directory):
+
+```bash
+pnpm action hello --name Alice
+```
+
+Or open your app at `http://localhost:8080` and ask the agent in the chat there:
+
+> Use the hello action with the name Alice.
+
+### Add your own action
+
+Replace the starter action with the first real operation in your domain. This example
+counts words, sentences, and paragraphs in any text you pass it. It computes
+everything locally, so there's nothing to configure and no external service to connect.
+
+Create a new file called `analyze-text.ts` in your `actions/` directory:
+
+```ts filename="actions/analyze-text.ts"
+import { defineAction } from "@agent-native/core/action";
+import { z } from "zod";
+
+const textStatsSchema = z.object({
+  title: z.string(),
+  points: z.array(z.object({ label: z.string(), value: z.number() })),
+});
+
+export default defineAction({
+  description: "Count words, sentences, and paragraphs in a block of text.",
+  schema: z.object({
+    text: z
+      .string()
+      .default(
+        "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.",
+      ),
+  }),
+  outputSchema: textStatsSchema,
+  chatUI: {
+    renderer: "text.stats-chart",
+    title: "Text stats",
+  },
+  readOnly: true,
+  run: async ({ text }) => ({
+    title: "Text statistics",
+    points: [
+      { label: "Characters", value: text.length },
+      { label: "Words", value: text.split(/\s+/).filter(Boolean).length },
+      {
+        label: "Sentences",
+        value: text.split(/[.!?]+/).filter(Boolean).length,
+      },
+      {
+        label: "Paragraphs",
+        value: text.split(/\n\n+/).filter(Boolean).length,
+      },
+    ],
+  }),
+});
+```
+
+Try it from the terminal:
+
+```bash
+pnpm action analyze-text --text "Hello world. How are you today?"
+```
+
+Or open your app at `http://localhost:8080` and ask the agent in the chat there:
+
+> Run the analyze-text action on "Hello world. How are you today?"
+
+#### Define once, call from anywhere
+
+This action is now reachable from chat, React hooks, CLI, HTTP, MCP, A2A,
+scheduled jobs, and webhooks.
+
+TIP: Any time you want the agent to call a specific action without ambiguity, phrasing it as "Run the `<action-name>` action" is most reliable. Natural-language prompts work well once the agent has enough context about your app's domain. For a brand-new app with no data or context yet, explicit is safer.
+
+## Render the result inline {#render-inline}
+
+When the agent runs `analyze-text`, it returns structured data: a title and an
+array of counts. By default the agent will describe that data in prose: "The
+text has 9 words, 2 sentences..." and so on. That works, but you can
+also render the result as a real UI component (a bar chart, a table, a card)
+directly inside the chat transcript, right where the agent responded.
+
+This is what `chatUI.renderer` in the action does. It's a label that says "when
+this action's result appears in chat, hand it to this React component instead of
+summarizing it in text." The component receives the validated action output as
+props and renders whatever you want.
+
+In the next step, you'll create `app/chat-renderers.tsx`, but first, add one import line
+to `app/root.tsx` so it runs on startup:
+
+```ts filename="app/root.tsx"
+import "./chat-renderers";
+```
+
+Add it alongside your other imports at the top of the file. That's the only
+change to `root.tsx`. The import just ensures the file runs and registers the
+renderer. Now create the renderer file:
+
+```tsx filename="app/chat-renderers.tsx"
+import {
+  registerActionChatRenderer,
+  type ToolRendererProps,
+} from "@agent-native/core/client/chat";
+
+type TextStatsResult = {
+  title: string;
+  points: Array<{ label: string; value: number }>;
+};
+
+const MAX_BAR_PX = 80;
+
+function TextStatsChart({ context }: ToolRendererProps) {
+  const result = context.resultJson as TextStatsResult;
+  const max = Math.max(...result.points.map((point) => point.value), 1);
+  return (
+    <section className="rounded-lg border bg-card p-4">
+      <h3 className="text-sm font-medium">{result.title}</h3>
+      <div className="mt-4 flex items-end gap-2">
+        {result.points.map((point) => (
+          <div
+            key={point.label}
+            className="flex flex-1 flex-col items-center gap-2"
+          >
+            <div
+              className="w-full rounded-t bg-blue-500"
+              style={{
+                height: `${Math.max(Math.round((point.value / max) * MAX_BAR_PX), 2)}px`,
+              }}
+            />
+            <span className="text-xs text-muted-foreground">{point.label}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+registerActionChatRenderer({
+  id: "text.stats-chart",
+  renderer: "text.stats-chart",
+  Component: TextStatsChart,
+});
+```
+
+Once the renderer is registered, the agent's response looks like this. Instead
+of a paragraph of text, your React component renders directly inside the chat
+transcript:
+
+<WireframeBlock id="doc-block-inline-result-wireframe">
+  <Screen
+    surface="desktop"
+    html={
+      "<div style='min-height:340px;box-sizing:border-box;padding:24px;display:flex;justify-content:center;align-items:center;background:var(--wf-bg)'><div style='width:min(640px,100%);display:flex;flex-direction:column;gap:14px'><div class='wf-card' data-rough style='align-self:flex-end;max-width:70%;padding:12px 14px'><strong>User</strong><p style='margin:6px 0 0'>Run the analyze-text action on \"Hello world. How are you today?\"</p></div><div class='wf-card' data-rough style='align-self:flex-start;width:min(480px,100%);padding:14px'><strong>Agent</strong><p class='wf-muted' style='margin:6px 0 12px'>Rendered with text.stats-chart.</p><section class='wf-card' data-rough style='padding:14px'><h3 style='margin:0 0 12px;font-size:14px'>Text statistics</h3><div data-rough='line:bottom' style='height:104px;display:flex;align-items:end;gap:8px;border-bottom:1.4px solid var(--wf-line);padding-bottom:4px'><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:80px;width:100%;background:color-mix(in srgb, var(--wf-accent) 36%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Characters</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:18px;width:100%;background:color-mix(in srgb, var(--wf-accent) 30%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Words</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:2px;width:100%;background:color-mix(in srgb, var(--wf-accent) 24%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Sentences</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:2px;width:100%;background:color-mix(in srgb, var(--wf-accent) 24%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>Paragraphs</span></div></div></section></div></div></div>"
+    }
+  />
+</WireframeBlock>
+
+Use this step when the result belongs where the agent is speaking:
+
+- setup summaries
+- short reports
+- approvals
+- tables or charts small enough to inspect inline
+- links into durable app views
+
+For reusable generic outputs, the framework also ships built-in
+`data-chart` and `data-table` renderers, plus `data-insights` for combined
+summary/chart/table cards. See [Native Chat UI](/docs/native-chat-ui). For
+temporary controls the agent creates at runtime, see
+[Generative UI](/docs/generative-ui).
+
+## What's next {#next}
+
+<Cards>
+
+### [Persist Data in SQL](/docs/getting-started-database)
+
+Save action results to a database so the agent can reference them across
+conversations. Next in the series.
+
+### [Actions](/docs/actions)
+
+Schemas, auth, approvals, hooks, and transport — the full reference for what
+actions can do.
+
+### [Native Chat UI](/docs/native-chat-ui)
+
+Built-in renderers for tables, charts, and typed cards — beyond the custom
+renderer you just built.
+
+### [Key Concepts](/docs/key-concepts)
+
+The architecture underneath this tutorial: SQL, actions, live sync, and context
+awareness.
+
+</Cards>