@lightdash/cli 2.265.0 → 2.267.0

package/dist/vendor/template/.claude/skills/sdk-features/SKILL.md

@@ -117,14 +117,14 @@ order, `sortBy` describes result ordering, `totalColumnCount` exposes truncation
 - `external-fetch`: `client.externalFetch(alias, opts)` calls an external
   connection linked to this app. The connection must already be linked by the
   host; you cannot add one from app code.
-- `ai-insights`: `useInsights()` returns the host's AI analysis of the current
-  view (headline, summary, limitations, anomalies) plus `analyse()`;
-  `useInsights(result)` narrows to one chart and adds `matches(row)` so flagged
-  points can be marked, with `investigate(id)` / `continueInAskAi(id)` for the
-  action menu. Render a summary block and markers (only `high`, `medium`,
-  `positive`; never `info`); on line charts the marker must also be the
-  `activeDot` so hover does not cover it. Render nothing when
-  `status === 'unavailable'`. Full contract in `/app/references/ai-analysis.md`.
+- `ai-insights`: wire the shipped components in `src/components/insights/`
+  (`InsightsSummary`, `InsightMarker` / `insightCellProps`,
+  `InvestigateMenuItem`, `InvestigationCard`) rather than writing your own:
+  summary block at the top, markers on every query-bound chart (as both `dot`
+  and `activeDot`), Investigate in every point menu, the card under the chart.
+  A short ask ("add AI analysis") gets the whole set. They sit on
+  `useInsights()` / `useInsights(result)` and render nothing when the host has
+  no analysis. Full contract in `/app/references/ai-analysis.md`.
 - `ai-prompt`: `useAiPrompt()` returns `{ available, ask, loading, text, error }`;
   `ask({ prompt, sources: [{ result, label }], focus?: { row } })` sends an
   author-written question over loaded `useLightdash` results and resolves to

package/dist/vendor/template/references/ai-analysis.md

@@ -9,8 +9,26 @@ Two operations exist, both run by Lightdash:
 - **Detect** — reads the results the app already loaded and returns a headline, a summary, a list of notable data points (anomalies) with the query, field and row they refer to, and the limitations of the data (no comparison period, truncation, and so on).
 - **Investigate** — for one anomaly, an AI agent with read-only query tools looks for possible drivers using data beyond the page and returns a Markdown explanation with evidence and a confidence line. It runs asynchronously; the app shows progress from the pushed status.
 
+## Default build
+
+When the user asks for AI analysis, an executive summary, anomalies, "what changed", "flag anything unusual", or insights and gives no further detail, build **all** of this with the shipped components in `src/components/insights/` (never rewrite them):
+
+1. `<InsightsSummary />` near the top of the page.
+2. On every query-bound chart, `InsightMarker` as both `dot` and `activeDot` (lines/areas) or `insightCellProps` on each `Cell` (bars), one per series with its `dataKey` as `fieldId`, plus the finding text in the tooltip via `insightTooltipText`.
+3. `<InvestigateMenuItem />` in every data-point action menu, next to "Filter by …" and "View underlying data".
+4. `<InvestigationCard />` under the chart once an investigation starts.
+
+Narrower asks build only that part: "just an executive summary" is step 1 alone; "mark anomalies on the charts" is steps 2 to 4. All four components render nothing when the host has no analysis to offer, so nothing else needs gating.
+
 ```tsx
-import { useInsights } from '@lightdash/query-sdk';
+import { useInsights, useLightdash } from '@lightdash/query-sdk';
+import {
+    InsightMarker,
+    InsightsSummary,
+    InvestigateMenuItem,
+    InvestigationCard,
+    insightTooltipText,
+} from '@/components/insights';
 ```
 
 ## View-level: the executive summary block
@@ -31,86 +49,14 @@ const view = useInsights();
 // view.analyse()    ask Lightdash to (re)run the analysis
 ```
 
-Render a block near the top of the page. It must handle every status:
-
-```tsx
-import { useInsights } from '@lightdash/query-sdk';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Loader2, RefreshCw, Sparkles } from 'lucide-react';
-
-function ExecutiveSummary() {
-    const view = useInsights();
-
-    // The org has not enabled AI analysis: render nothing, never a stub.
-    if (view.status === 'unavailable') return null;
-
-    return (
-        <Card>
-            <CardHeader className="flex flex-row items-center justify-between">
-                <CardTitle className="flex items-center gap-2">
-                    <Sparkles className="h-4 w-4" /> Executive summary
-                </CardTitle>
-                <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={view.analyse}
-                    disabled={view.status === 'analysing'}
-                >
-                    {view.status === 'analysing' ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : (
-                        <RefreshCw className="h-4 w-4" />
-                    )}
-                    {view.status === 'ready' ? 'Refresh' : 'Analyse'}
-                </Button>
-            </CardHeader>
-            <CardContent>
-                {view.status === 'idle' && (
-                    <p className="text-muted-foreground">
-                        Click Analyse for a summary of what is on this page.
-                    </p>
-                )}
-                {view.status === 'analysing' && (
-                    <p className="text-muted-foreground">Reading the data on this page…</p>
-                )}
-                {view.status === 'error' && (
-                    <p className="text-destructive">{view.error}</p>
-                )}
-                {view.status === 'ready' && (
-                    <>
-                        {view.stale && (
-                            <p className="text-sm text-muted-foreground">
-                                The view changed since this was generated. Refresh to update.
-                            </p>
-                        )}
-                        <h3 className="text-lg font-semibold">{view.headline}</h3>
-                        <p>{view.summary}</p>
-                        {view.limitations.length > 0 && (
-                            <ul className="text-sm text-muted-foreground">
-                                {view.limitations.map((l) => (
-                                    <li key={l}>{l}</li>
-                                ))}
-                            </ul>
-                        )}
-                        <p className="text-xs text-muted-foreground">
-                            AI-generated from the data on this page
-                            {view.dataAsOf ? ` · Data as of ${view.dataAsOf}` : ''}
-                        </p>
-                    </>
-                )}
-            </CardContent>
-        </Card>
-    );
-}
-```
+Render `<InsightsSummary />` near the top of the page. It handles every status (idle, analysing, ready, error, stale) and renders nothing when unavailable. Props: `title`, `idleText`, `className`. Write your own block only when the user asks for a layout the component cannot give, and then keep every status branch.
 
 Rules for the block:
 
 - Say "AI-generated" in the footer. Never name a model or provider.
 - Show the limitations; they are what keeps the summary honest.
 - Never mount it unconditionally in a modal or overlay; it is page content.
-- `analyse()` re-runs even when a result exists (that is the Refresh case). Do not call it in an effect on mount; the viewer clicks.
+- `analyse()` re-runs even when a result exists (that is the Regenerate case). Do not call it in an effect on mount; the viewer clicks. Lightdash reuses a stored analysis of identical rows on open by itself.
 
 ## Per-chart: anomalies on the data points
 
@@ -121,7 +67,7 @@ const orders = useLightdash(ordersQuery);
 const insights = useInsights(orders);
 // insights.status           same as the view
 // insights.anomalies        the anomalies that refer to this query
-// insights.matches(row)     the anomalies whose dimension values match this row
+// insights.matches(row, fieldId?)  the anomalies on this row; fieldId narrows to one metric
 // insights.canInvestigate   false when no agent is available
 // insights.canContinue      false when the org keeps viewers at the explanation
 // insights.investigate(id)  start an investigation of one anomaly
@@ -150,98 +96,77 @@ Each anomaly:
 }
 ```
 
-Mark the flagged rows on the chart. `matches(row)` takes the raw result row, so call it per datum. Only `high`, `medium` and `positive` earn a marker; `info` is context for the summary (a gap, a partial period), so never paint it on the chart:
+Mark the flagged rows with the shipped helpers. Only `high`, `medium` and `positive` earn a marker; `info` is context for the summary and is never painted. Every helper takes the series' `dataKey` as `fieldId`, so on a chart plotting revenue and orders a revenue anomaly marks only the revenue series. The marker element must be both `dot` and `activeDot`, otherwise the hover dot covers it and takes the click:
 
 ```tsx
-import { Bar, BarChart, Cell } from 'recharts';
-
-const MARKED = new Set(['high', 'medium', 'positive']);
-const marker = (insights, row) =>
-    insights.matches(row).find((a) => MARKED.has(a.severity)) ?? null;
+import { Line, LineChart, Tooltip } from 'recharts';
+import { ChartTooltipSurface } from '@/lib/floating';
 
-function OrdersByStatus() {
-    const orders = useLightdash(ordersQuery);
-    const insights = useInsights(orders);
+function RevenueByMonth() {
+    const revenue = useLightdash(revenueQuery);
+    const insights = useInsights(revenue);
+    const [menu, setMenu] = useState(null);
+    const openMenu = (row, e, fieldId) =>
+        setMenu({ row, fieldId, x: e.clientX, y: e.clientY });
+    const dot = (
+        <InsightMarker insights={insights} fieldId="revenue" onOpenMenu={openMenu} />
+    );
 
     return (
-        <BarChart data={orders.data}>
-            <Bar dataKey="orders_count">
-                {orders.data.map((row) => {
-                    const flagged = marker(insights, row) !== null;
-                    return (
-                        <Cell
-                            key={row.orders_status}
-                            stroke={flagged ? 'var(--destructive)' : undefined}
-                            strokeWidth={flagged ? 2 : 0}
-                        />
-                    );
-                })}
-            </Bar>
-        </BarChart>
+        <LineChart data={revenue.data}>
+            <Tooltip
+                content={({ payload, label }) => {
+                    const row = payload?.[0]?.payload;
+                    const finding = insightTooltipText(insights, row, 'revenue');
+                    return row ? (
+                        <ChartTooltipSurface>
+                            <div className="font-semibold">{label}</div>
+                            <div>{revenue.format(row, 'revenue')}</div>
+                            {finding && <div className="text-destructive text-xs">{finding}</div>}
+                        </ChartTooltipSurface>
+                    ) : null;
+                }}
+            />
+            <Line dataKey="revenue" dot={dot} activeDot={dot} />
+        </LineChart>
     );
 }
 ```
 
-Keep the marker subtle (an outline, a dot, a badge in the tooltip), and show the anomaly `text` on hover so the viewer learns why the point is marked. Tint by severity: `positive` is not a warning.
-
-### Markers on line and area charts must stay clickable on hover
-
-Recharts draws `activeDot` on top of `dot` while the cursor is over a point. With the default `activeDot={{ r: 5 }}` the hover dot covers the marker and takes the click, so the action menu only opens from a one-pixel rim. Render the same marker component for both, with the same click handler, or turn the hover dot off:
+Bar charts use `insightCellProps` on each `Cell` and open the menu from the bar's `onClick`:
 
 ```tsx
-// Recharts clones the dot element and merges cx, cy and payload into its
-// props, so extra props like insights and onOpenMenu pass straight through.
-const Marker = ({ cx, cy, payload, insights, onOpenMenu }) => {
-    const anomaly = marker(insights, payload);
-    return (
-        <circle
-            cx={cx}
-            cy={cy}
-            r={anomaly ? 5 : 3}
-            fill={anomaly ? 'var(--destructive)' : 'var(--chart-1)'}
-            style={{ cursor: 'pointer' }}
-            onClick={(e) => onOpenMenu(payload, e)}
-        />
-    );
-};
-
-function OrdersOverTime() {
-    const orders = useLightdash(ordersQuery);
-    const insights = useInsights(orders);
-    const [menu, setMenu] = useState(null);
-    const openMenu = (row, e) => setMenu({ row, x: e.clientX, y: e.clientY });
-    const dot = <Marker insights={insights} onOpenMenu={openMenu} />;
-
-    return (
-        <LineChart data={orders.data}>
-            <Line dataKey="orders_count" dot={dot} activeDot={dot} />
-            {/* or: activeDot={false} */}
-        </LineChart>
-    );
-}
+<Bar dataKey="revenue" onClick={(d, _i, e) => openMenu(d.payload, e, 'revenue')}>
+    {rows.map((row) => (
+        <Cell key={row.status} {...insightCellProps(insights, row, 'revenue')} />
+    ))}
+</Bar>
 ```
 
-Whatever element carries the click handler must be the topmost one at that position: render markers after the series, never under a hover overlay or a tooltip cursor.
+`markerFor(insights, row, fieldId)` returns the anomaly behind a marker when you need it directly, for example to open an `InvestigationCard`.
 
 ## Investigate from the action menu
 
-When a clicked data point has a matching anomaly, add **Investigate** to the point's action menu next to "Filter by …" and "View underlying data". Gate it on `insights.canInvestigate` and on the investigation not already running or ready:
+Add `<InvestigateMenuItem />` to the data-point action menu next to "Filter by …" and "View underlying data". It renders only when the clicked row has a flagged anomaly: **Investigate with AI** starts one when an agent is available, and **View investigation** reopens the card once one is running, done or failed, so a dismissed result is never lost:
 
 ```tsx
-const anomaly = insights.matches(row)[0];
-
-{anomaly && insights.canInvestigate && anomaly.investigation.status === 'idle' && (
-    <DropdownMenuItem onSelect={() => insights.investigate(anomaly.id)}>
-        Investigate with AI
+<DropdownMenuContent>
+    <DropdownMenuItem onSelect={() => addFilter(menu.row)}>
+        Filter by {value}
+    </DropdownMenuItem>
+    <DropdownMenuItem onSelect={() => showUnderlyingData(menu.row)}>
+        View underlying data
     </DropdownMenuItem>
-)}
+    <InvestigateMenuItem
+        insights={insights}
+        row={menu.row}
+        fieldId={menu.fieldId}
+        onOpen={(anomaly) => setOpenInvestigation(anomaly.id)}
+    />
+</DropdownMenuContent>
 ```
 
-Then render the investigation state wherever the anomaly is shown (a card under the chart, a side sheet):
-
-- `running` — a spinner and "Investigating…". It can take a minute.
-- `ready` — render `explanation` as Markdown (it contains a summary, a "Possible drivers" list with the evidence for each, an "Evidence" list, and a "Confidence: …" line). If `partial` is true, say the query budget ran out. When `insights.canContinue` is true, offer a **Continue in Ask AI** button that calls `insights.continueInAskAi(anomaly.id)`; Lightdash opens the thread. When it is false the organisation keeps viewers at the explanation: render no button.
-- `error` — show `error` and offer Investigate again.
+Then render `<InvestigationCard anomaly={anomaly} insights={insights} onDismiss={...} />` under the chart for the anomaly being investigated (find it with `insights.anomalies.find((a) => a.id === openInvestigation)`; re-read it on every render so the card follows the pushed status). The card shows the spinner while running, the explanation as Markdown when ready (a summary, a "Possible drivers" list with evidence, an "Evidence" list, a "Confidence: …" line), a note when `partial`, an "Investigate again" action on error, and **Continue in Ask AI** only when `insights.canContinue` is true. When it is false the organisation keeps viewers at the explanation and the card shows no button.
 
 Never open a dialog for the investigation yourself; the app renders state, Lightdash owns the run.
 
@@ -292,7 +217,7 @@ function RevenueTakeaway() {
 - Do not send rows or field values anywhere. The hooks expose results; Lightdash already has the data.
 - Do not add an external connection to a model provider for summaries or explanations. Use this hook.
 - Do not fabricate insights when the status is `idle` or `unavailable`; render the state.
-- Do not render `explanation` as HTML. It is Markdown; render it as text or through a Markdown component.
+- Do not render `explanation` as HTML. `InvestigationCard` renders its Markdown safely; if you must render it elsewhere, use the shipped `Markdown` component from `@/components/insights/Markdown`.
 - Do not call `analyse()` on mount or on a timer.
 
 ## When nothing is notable

package/dist/vendor/template/skill.md

@@ -693,7 +693,7 @@ For any external HTTP API call, read `/app/references/external-apis.md` and use
 
 ### AI analysis — executive summary and anomalies
 
-When the user asks for an executive summary, "what changed and why", anomaly callouts, or any AI-generated insight about the data on the page, read `/app/references/ai-analysis.md` and use `useInsights` from the SDK. Lightdash runs the analysis over the queries the app already loaded and pushes the result in; the app renders it (a summary block, markers on flagged points, an Investigate action) and never sends rows or keys. Render nothing when `status === 'unavailable'`. For an author-written question over loaded results (a takeaway under a chart, "explain this row"), use `useAiPrompt` from the same reference.
+When the user asks for AI analysis, an executive summary, "what changed and why", anomaly callouts, or any AI-generated insight about the data on the page, read `/app/references/ai-analysis.md` and build its **Default build** with the shipped components in `src/components/insights/` (`InsightsSummary`, `InsightMarker` / `insightCellProps`, `InvestigateMenuItem`, `InvestigationCard`): summary block at the top, markers on every query-bound chart, Investigate in every point menu, the investigation card under the chart. A short ask gets the whole set; only a narrower ask ("just a summary") gets a subset. Never rewrite those components. Lightdash runs the analysis over the queries the app already loaded and pushes the result in; the app renders it and never sends rows or keys. The components render nothing when the host has no analysis to offer. For an author-written question over loaded results (a takeaway under a chart, "explain this row"), use `useAiPrompt` from the same reference.
 
 ## Visual Design
 

package/dist/vendor/template/src/components/insights/InsightsSummary.tsx

@@ -0,0 +1,96 @@
+/**
+ * The view-level analysis block. Renders nothing when the host has no
+ * analysis to offer (embeds, tiles, org not rolled out).
+ */
+import { useInsights } from '@lightdash/query-sdk';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Loader2, RefreshCw, Sparkles } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+type Props = {
+    title?: ReactNode;
+    /** Shown before the first run. */
+    idleText?: string;
+    className?: string;
+};
+
+export function InsightsSummary({
+    title = 'Executive summary',
+    idleText = 'Click Analyse for an AI-generated read of everything on this page.',
+    className,
+}: Props) {
+    const view = useInsights();
+    if (view.status === 'unavailable') return null;
+    const busy = view.status === 'analysing';
+
+    return (
+        <Card className={className}>
+            <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0">
+                <CardTitle className="flex items-center gap-2 text-base">
+                    <Sparkles className="h-4 w-4 text-muted-foreground" />
+                    {title}
+                </CardTitle>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={view.analyse}
+                    disabled={busy}
+                >
+                    {busy ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                        <RefreshCw className="h-4 w-4" />
+                    )}
+                    {view.status === 'ready' ? 'Regenerate' : 'Analyse'}
+                </Button>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {view.status === 'idle' && (
+                    <p className="text-sm text-muted-foreground">{idleText}</p>
+                )}
+                {busy && (
+                    <p className="text-sm text-muted-foreground">
+                        Reading the data on this page…
+                    </p>
+                )}
+                {view.status === 'error' && (
+                    <p className="text-sm text-destructive">
+                        {view.error ?? 'The analysis failed. Try again.'}
+                    </p>
+                )}
+                {view.status === 'ready' && (
+                    <>
+                        {view.stale && (
+                            <p className="text-xs text-muted-foreground">
+                                The view changed since this was generated.
+                                Regenerate to update.
+                            </p>
+                        )}
+                        {view.headline && (
+                            <p className="font-semibold leading-snug">
+                                {view.headline}
+                            </p>
+                        )}
+                        {view.summary && (
+                            <p className="text-sm leading-relaxed">
+                                {view.summary}
+                            </p>
+                        )}
+                        {view.limitations.length > 0 && (
+                            <ul className="list-disc space-y-1 pl-5 text-xs text-muted-foreground">
+                                {view.limitations.map((limitation) => (
+                                    <li key={limitation}>{limitation}</li>
+                                ))}
+                            </ul>
+                        )}
+                        <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                            AI-generated from the data on this page
+                            {view.dataAsOf ? ` · Data as of ${view.dataAsOf}` : ''}
+                        </p>
+                    </>
+                )}
+            </CardContent>
+        </Card>
+    );
+}

package/dist/vendor/template/src/components/insights/InvestigateMenuItem.tsx

@@ -0,0 +1,51 @@
+/**
+ * The investigation entry for a data point's action menu. Starts an
+ * investigation for an idle anomaly, reopens the card for one that is
+ * running, done or failed, and renders nothing when the row has no flagged
+ * anomaly.
+ */
+import type { Insight, QueryInsights } from '@lightdash/query-sdk';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Sparkles } from 'lucide-react';
+import { markerFor } from './markers';
+
+type Props = {
+    insights: QueryInsights;
+    row: Record<string, unknown> | null | undefined;
+    /** The clicked series' `dataKey`, from the marker's `onOpenMenu`. */
+    fieldId?: string;
+    /** Called with the anomaly whose card should be shown. */
+    onOpen: (anomaly: Insight) => void;
+};
+
+export function InvestigateMenuItem({
+    insights,
+    row,
+    fieldId,
+    onOpen,
+}: Props) {
+    const anomaly = markerFor(insights, row, fieldId);
+    if (!anomaly) return null;
+
+    if (anomaly.investigation.status === 'idle') {
+        if (!insights.canInvestigate) return null;
+        return (
+            <DropdownMenuItem
+                onSelect={() => {
+                    insights.investigate(anomaly.id);
+                    onOpen(anomaly);
+                }}
+            >
+                <Sparkles className="mr-2 h-4 w-4" />
+                Investigate with AI
+            </DropdownMenuItem>
+        );
+    }
+
+    return (
+        <DropdownMenuItem onSelect={() => onOpen(anomaly)}>
+            <Sparkles className="mr-2 h-4 w-4" />
+            View investigation
+        </DropdownMenuItem>
+    );
+}

package/dist/vendor/template/src/components/insights/InvestigationCard.tsx

@@ -0,0 +1,93 @@
+/**
+ * Renders one anomaly's investigation state under its chart. The app owns
+ * where it appears; Lightdash owns the run.
+ */
+import type { Insight, QueryInsights } from '@lightdash/query-sdk';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Loader2, MessageSquare, X } from 'lucide-react';
+import { Markdown } from './Markdown';
+
+type Props = {
+    anomaly: Insight;
+    insights: QueryInsights;
+    onDismiss?: () => void;
+    className?: string;
+};
+
+export function InvestigationCard({
+    anomaly,
+    insights,
+    onDismiss,
+    className,
+}: Props) {
+    const { investigation } = anomaly;
+    if (investigation.status === 'idle') return null;
+
+    return (
+        <Card className={className}>
+            <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0">
+                <CardTitle className="text-sm font-medium leading-snug">
+                    Investigation · {anomaly.text}
+                </CardTitle>
+                {onDismiss && (
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        aria-label="Dismiss"
+                        onClick={onDismiss}
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                )}
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+                {investigation.status === 'running' && (
+                    <p className="flex items-center gap-2 text-muted-foreground">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Investigating… this can take a minute.
+                    </p>
+                )}
+                {investigation.status === 'error' && (
+                    <>
+                        <p className="text-destructive">
+                            {investigation.error ?? 'The investigation failed.'}
+                        </p>
+                        {insights.canInvestigate && (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => insights.investigate(anomaly.id)}
+                            >
+                                Investigate again
+                            </Button>
+                        )}
+                    </>
+                )}
+                {investigation.status === 'ready' && (
+                    <>
+                        <Markdown text={investigation.explanation ?? ''} />
+                        {investigation.partial && (
+                            <p className="text-xs text-muted-foreground">
+                                The query budget ran out; this is a partial
+                                answer.
+                            </p>
+                        )}
+                        {insights.canContinue && (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() =>
+                                    insights.continueInAskAi(anomaly.id)
+                                }
+                            >
+                                <MessageSquare className="h-4 w-4" />
+                                Continue in Ask AI
+                            </Button>
+                        )}
+                    </>
+                )}
+            </CardContent>
+        </Card>
+    );
+}