feat(insights): redesign insights as AI cockpit (DAT-100)

[izadoesdev]

Summary

• Redesigns the Insights page as an org-wide AI cockpit: KPI row, site health grid, dimension tiles, and narrative — all driven by the existing query pipeline with a unified overview-tab layout.
• Adds org-level KPI / dimension / narrative procedures in rpc/insights and a corresponding Elysia route (/v1/insights/org-narrative), with KPI caching and cleaned-up bounce/session filters.
• Refreshes the agent surface: restores the slash-command menu as prompt shortcuts, adds animated unicode thinking spinners with rotating phrases, and polishes reasoning UI and thinking-effort toggle.
• Misc: ungates insights/agent nav, applies 20% markup + web_search metering to billing, restores secondary button variant, and normalizes page/referrer dimension keys (including homepage).

Closes DAT-100.

Test plan

• Insights page loads for an org with multiple sites — KPIs, health grid, dimensions, and narrative all render
• Time range selector updates all cockpit sections
• Agent slash-command menu opens and inserts prompts correctly
• Thinking spinner + phrases animate during reasoning
• Billing meters web_search tool usage against agent credits

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dashboard	Ready	Preview, Comment	Apr 8, 2026 5:46pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
documentation	Skipped		Apr 8, 2026 5:46pm

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: d2226dfc-a852-4b19-ade3-fd774ce6c9c8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch izadoesdev/dat-100-redesign-insights-as-ai-cockpit

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[izadoesdev]

Automated First-Pass Review

What this PR does: Redesigns the Insights page from a flat signal list into a full AI cockpit with KPI stat cards, site health grid, dimension tables (pages/referrers/countries), and an LLM-generated narrative summary. Also threads billingCustomerId through the agent pipeline to meter web_search tool usage, applies a 20% pricing markup, restores the agent slash-command menu, and consolidates the insights data hooks into a shared useInsightsFeed.

PR description: ✅ Well-documented with summary sections and a test plan checklist.

---

Issues Found

🟡 Narrative DB query ignores time range — generateNarrativeCached fetches top insights by priority without filtering by creation date, so the "7d" narrative could include months-old signals. See inline comment.

🟡 Missing 401 status on unauthenticated /org-narrative — Returns 200 with an error body when userId is missing. See inline comment.

🟡 Unsafe type casts in cockpit page — Multiple as unknown as ColumnDef<...> double casts fully bypass TypeScript. See inline comment.

🔵 Removed cross-reference comment in cost probe — The // Matches creditSchema comment was a useful sync breadcrumb.

🔵 queries memo dependency may cause stale cockpit data — Only depends on granularity, but date range start/end also matter. See inline comment.

What looks good

• Auth + rate limiting on the new narrative endpoint is solid — org membership check, 30 req/hr per user+org, proper 403/429 responses.
• Graceful LLM fallback to deterministic narrative is a nice touch.
• Fire-and-forget billing tracking with proper .catch() won't block the tool response.
• The InsightCard compact variant and shared useInsightsFeed hook are a clean DRY refactor.
• No database schema/migration changes, no ClickHouse query changes.
• No hardcoded secrets or unsafe input handling detected.

Overall: Needs changes

The narrative date range bug is the main blocker — it'll show stale insights in the wrong time context. The missing 401 status is a quick fix. The rest are suggestions worth considering but non-blocking.

[izadoesdev]

🟡 Warning: Narrative query doesn't filter by time range

The DB query here fetches top insights by organizationId and priority, but never filters by date. When a user selects "30d" or "90d", this still returns the same insights regardless of their creation date. The range parameter only affects the LLM prompt text and cache key, so a "this week" narrative could surface a months-old insight.

Consider adding a date filter:

.where(
  and(
    eq(analyticsInsights.organizationId, organizationId),
    gte(analyticsInsights.createdAt, dayjs().subtract(days, "day").toDate())
  )
)

[izadoesdev]

🟡 Warning: Missing HTTP status code for unauthenticated requests

When userId is falsy, this returns { success: false, error: "User ID required" } with a 200 status. Should set set.status = 401 before returning, otherwise clients will parse this as a successful response.

[izadoesdev]

🔵 Suggestion: Removing the cross-reference comment

This comment was a helpful breadcrumb for keeping the cost probe in sync with apps/dashboard/autumn.config.ts. With the 20% markup change, it'd be worth keeping some reference so the next person modifying either file knows to check the other.

[izadoesdev]

🟡 Warning: Double as unknown as casts bypass TypeScript entirely

These triple-cast patterns (createPageColumns() as unknown as ColumnDef<...>) silence all type checking. If the column factories ever change their return shape, you won't get a compile error here. Consider typing the data rows to match what the columns actually expect, or at least adding a runtime assertion in dev mode.

[izadoesdev]

🔵 Suggestion: queries memo deps may cause stale data

This useMemo only depends on dateRange.granularity, but the batch query hook also uses start_date and end_date from the dateRange object. If useBatchDynamicQuery doesn't independently react to the date range prop, changing from "7d" to "30d" (same granularity) won't trigger a new query definition. Double-check that useBatchDynamicQuery watches the full dateRange object for refetching.

[greptile-apps]

Greptile Summary

This PR redesigns the Insights page into an AI cockpit with KPI cards, site-health grid, dimension tiles, and a narrative powered by a new /v1/insights/org-narrative endpoint. It also restores the agent slash-command menu, adds animated unicode thinking spinners, applies a 20 % billing markup to agent token rates, and meters web_search tool calls against Autumn.

• generateNarrativeCached ignores range in its database query — the time-range parameter is included in the cache key and injected into the LLM prompt, but the underlying DB query fetches the top 5 insights purely by priority with no date filter. Every range selection returns a narrative generated from the same data, so users see "This month: X" and "This week: X" derived from identical rows.

Confidence Score: 4/5

One P1 defect in the narrative endpoint should be fixed before merge — all other changes are clean.

The DB query inside generateNarrativeCached ignores the range parameter, so every time-range selection produces a narrative from the same underlying insight rows. The UX impact is immediate: the time-range selector on the Insights cockpit gives users confidence they're seeing range-specific summaries when they're not. All other additions (billing, spinner, slash commands, stat cards, signals grid) are well-implemented and pose no blocking concerns.

apps/api/src/routes/insights.ts — the generateNarrativeCached function needs a date-range filter added to its DB query.

Vulnerabilities

No security concerns identified. The new /v1/insights/org-narrative endpoint correctly checks org membership before serving data, applies rate limiting, and does not expose raw DB rows. The web_search tool sanitizes content before returning it to the agent to prevent indirect prompt injection, and billing tracking is fire-and-forget with logged errors. The billingCustomerId flows through AgentContext and is never logged or returned to the client.

Important Files Changed

Filename	Overview
apps/api/src/routes/insights.ts	Adds /org-narrative endpoint with rate limiting and caching; generateNarrativeCached ignores the range param in its DB query so all three time ranges return narratives built from the same data.
apps/dashboard/app/(main)/insights/_components/cockpit-narrative.tsx	New narrative card component; aria-label is hardcoded "Weekly summary" regardless of the selected range (30d/90d).
apps/dashboard/app/(main)/insights/_components/insights-page-content.tsx	Redesigned cockpit layout wiring KPI stat cards, dimension tables, CockpitNarrative, and CockpitSignals; looks clean with correct date-range handling for the stat cards.
apps/api/src/ai/tools/web-search.ts	Adds fire-and-forget Autumn billing tracking for web search calls; error is logged but never surfaced to caller, which is the correct approach.
apps/dashboard/app/(main)/websites/[id]/agent/_components/agent-input.tsx	Restores slash-command menu with keyboard navigation (ArrowUp/Down, Tab, Escape, Enter); dismiss/reset logic and command selection look correct.
apps/dashboard/components/ai-elements/unicode-spinner.tsx	New animated unicode spinner with prefers-reduced-motion guard and font-stack override for Braille characters; well-implemented.
apps/dashboard/autumn.config.ts	Adds agent_web_search_calls metered feature and updates token credit costs to reflect 20% markup; matches the probe script constants.
apps/dashboard/lib/insight-api.ts	Adds fetchInsightsOrgNarrative with a 30s timeout and typed discriminated-union response; error handling is non-throwing which matches the hook's usage.
apps/dashboard/app/(main)/insights/_components/cockpit-signals.tsx	New signal grid with severity/site filtering, sort modes, and pagination; logic is straightforward and the Jotai-backed dismiss/feedback state is correctly scoped per org.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant CockpitNarrative
    participant API as /v1/insights/org-narrative
    participant Cache as Redis (cacheable)
    participant DB as PostgreSQL
    participant LLM

    Browser->>CockpitNarrative: range change (7d / 30d / 90d)
    CockpitNarrative->>API: GET ?organizationId=X&range=7d
    API->>API: rate limit check
    API->>Cache: lookup key insights-narrative:[orgId,range]
    alt Cache hit
        Cache-->>API: { narrative }
    else Cache miss
        API->>DB: SELECT top 5 insights WHERE orgId=X ORDER BY priority DESC
        Note over DB,API: No date filter applied — same rows for all ranges
        DB-->>API: topInsights[]
        API->>LLM: prompt over the last 7d + topInsights
        LLM-->>API: narrative text
        API->>Cache: store with 1h TTL
    end
    API-->>Browser: { success, narrative, generatedAt }

Loading

_{Reviews (1): Last reviewed commit: "Update navigation-config.tsx" | Re-trigger Greptile}

[greptile-apps]

range parameter ignored in DB query

generateNarrativeCached accepts range and includes it in the cache key (via cacheable), so three distinct cache entries are created for "7d", "30d", and "90d". However, the DB query below fetches the top 5 insights purely by priority with no date filter. Every range selection hits different Redis keys but reads the same Postgres rows, so "This month: X" and "This week: X" are generated from identical data — only the LLM prompt framing changes.

To fix, add a date-range where clause using the insight's period columns, for example:

const daysBack = range === "7d" ? 7 : range === "30d" ? 30 : 90;
const cutoff = new Date();
cutoff.setDate(cutoff.getDate() - daysBack);

const topInsights = await db
    .select({ ... })
    .from(analyticsInsights)
    .innerJoin(websites, eq(analyticsInsights.websiteId, websites.id))
    .where(
        and(
            eq(analyticsInsights.organizationId, organizationId),
            gte(analyticsInsights.currentPeriodFrom, cutoff)
        )
    )
    .orderBy(desc(analyticsInsights.priority))
    .limit(NARRATIVE_INSIGHTS_LIMIT);

[greptile-apps]

Hardcoded aria-label doesn't match selected range

The aria-label is always "Weekly summary" even when the user has selected 30d or 90d. Screen-reader users will hear an incorrect label.

Suggested change

	return (
	<section
	aria-label="Weekly summary"
	className="overflow-hidden rounded border bg-card"
	>
	aria-label={range === "7d" ? "Weekly summary" : range === "30d" ? "Monthly summary" : "Quarterly summary"}

[greptile-apps]

Client-side staleTime aligned with server TTL — note for after the DB fix

staleTime: 60 * 60 * 1000 (1 hour) matches the server's NARRATIVE_CACHE_TTL_SECS = 3600, which is reasonable. Once the DB query bug is fixed and different ranges return different data, this alignment will matter: the client won't refetch within the hour even if a new narrative would be available.