@robosystems/core 0.3.0 → 0.4.0

package/README.md

@@ -1,18 +1,17 @@
 # @robosystems/core
 
-Shared React components, hooks, contexts, and utilities for the RoboSystems ecosystem apps, published as an npm package.
+[![npm version](https://badge.fury.io/js/@robosystems%2Fcore.svg)](https://www.npmjs.com/package/@robosystems/core)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-[![npm](https://img.shields.io/npm/v/%40robosystems%2Fcore)](https://www.npmjs.com/package/@robosystems/core)
+Shared React core for the RoboSystems ecosystem apps — authentication, platform contexts, task monitoring, and the common UI component set used by robosystems-app, roboledger-app, and roboinvestor-app. Built for the Next.js App Router (client/server components and Server Actions) and consumed as a versioned npm package.
 
-## Overview
+## Features
 
-This library contains the platform-coupled frontend core shared between:
-
-- **robosystems-app** — Graph database management interface
-- **roboledger-app** — Accounting and bookkeeping interface
-- **roboinvestor-app** — Investment management interface
-
-It is Next.js-specific by design (App Router client/server components, Server Actions, `next/headers` cookie helpers) and is intended to be consumed by Next.js applications only. The compiled output targets bundler resolution — it is not loadable by Node's native ESM resolver.
+- **Authentication** — sign-in/sign-up forms, `AuthProvider`/`AuthGuard`, JWT and SSO token handling
+- **Contexts** — graph, entity, organization, service-offerings, and sidebar state
+- **Task monitoring** — SSE-based operation monitoring with a polling fallback for long-running jobs
+- **UI components** — layout, chat, forms, settings, API keys, and the shared Flowbite/Tailwind theme
+- **Hooks & utilities** — user, limits, toast, and media-query hooks plus cookie persistence helpers
 
 ## Installation
 
@@ -20,233 +19,33 @@ It is Next.js-specific by design (App Router client/server components, Server Ac
 npm install @robosystems/core
 ```
 
-### Peer dependencies
-
-The consuming app provides:
-
-| Peer                  | Range      |
-| --------------------- | ---------- |
-| `react` / `react-dom` | >=18 <20   |
-| `next`                | >=15 <17   |
-| `flowbite-react`      | ^0.12.5    |
-| `react-icons`         | >=4 <6     |
-| `@robosystems/client` | >=0.3.2 <1 |
-
-### App wiring
-
-Two integration points beyond the install:
-
-1. **Tailwind content scan** — the package ships Tailwind utility classes in its compiled JS; add it to the app's `tailwind.config.ts`:
-
-   ```ts
-   content: [
-     // ...existing globs
-     'node_modules/@robosystems/core/**/*.js',
-   ]
-   ```
-
-2. **Vitest** (if the app tests components that render core) — the package is compiled ESM with directory imports and must be processed by vite, in `vitest.config.ts`:
-
-   ```ts
-   test: {
-     server: { deps: { inline: [/@robosystems\/core/] } },
-   }
-   ```
+`react`, `react-dom`, `next`, `flowbite-react`, `react-icons`, and `@robosystems/client` are peer dependencies provided by the consuming app. See [CLAUDE.md](CLAUDE.md) for app wiring (Tailwind content scan, vitest inlining), packaging notes, and the release flow.
 
 ## Usage
 
-Everything is importable from the root barrel, or from subpaths mirroring the folder structure:
+Import from the root barrel or from subpaths mirroring the folder structure:
 
-```typescript
-import {
-  AuthProvider,
-  useAuth,
-  useGraphContext,
-  customTheme,
-} from '@robosystems/core'
+```tsx
+import { AuthProvider, useGraphContext, customTheme } from '@robosystems/core'
 import { PageHeader, Spinner } from '@robosystems/core/ui-components'
 import { useToast } from '@robosystems/core/hooks/use-toast'
 ```
 
-> The root barrel has an import-time side effect: it configures the `@robosystems/client` SDK singleton (base URL from `NEXT_PUBLIC_ROBOSYSTEMS_API_URL`, Bearer-token request interceptor).
-
-## Structure
-
-```
-├── actions/                  # Next.js Server Actions
-│   ├── entity-actions.ts     # Entity creation and management
-│   └── graph-actions.ts      # Graph creation and lifecycle
-├── auth-components/          # Authentication UI components
-│   ├── AppSwitcher.tsx       # Cross-app navigation switcher
-│   ├── AuthGuard.tsx         # Route protection wrapper
-│   ├── AuthProvider.tsx      # Authentication context provider
-│   ├── SessionWarningDialog.tsx  # Session expiry warning
-│   ├── SignInForm.tsx        # Login form
-│   ├── SignUpForm.tsx        # Registration form
-│   └── TurnstileWidget.tsx   # Cloudflare Turnstile CAPTCHA
-├── auth-core/                # Authentication logic and types
-│   ├── cleanup.ts            # Session cleanup utilities
-│   ├── client.ts             # Authentication client
-│   ├── config.ts             # Auth configuration
-│   ├── hooks.ts              # useAuth and related hooks
-│   ├── sso.ts                # SSO/OAuth support
-│   ├── token-storage.ts      # JWT storage utilities
-│   └── types.ts              # Auth TypeScript types
-├── components/               # Shared UI components
-│   ├── console/              # Terminal-style output display
-│   ├── repositories/         # Repository browsing and subscriptions
-│   ├── search/               # Search UI
-│   ├── EntitySelector.tsx    # Entity picker component
-│   ├── GraphSelectorCore.tsx # Graph picker component
-│   ├── PageLayout.tsx        # Standard page layout
-│   └── RepositoryGuard.tsx   # Repository access protection
-├── contexts/                 # React contexts
-│   ├── entity-context.tsx    # Active entity state
-│   ├── graph-context.tsx     # Active graph state
-│   ├── org-context.tsx       # Organization state
-│   ├── service-offerings-context.tsx  # Available plans and tiers
-│   └── sidebar-context.tsx   # Sidebar collapsed/expanded state
-├── hooks/                    # Custom React hooks
-│   ├── use-api-error.ts      # API error normalization
-│   ├── use-media-query.ts    # Responsive breakpoint detection
-│   ├── use-streaming-query.ts  # SSE streaming data hook
-│   ├── use-toast.tsx         # Toast notification hook
-│   ├── use-user-limits.ts    # User quota and limit checks
-│   └── use-user.ts           # Current user data hook
-├── lib/                      # Utility libraries
-│   ├── entity-cookie.ts      # Entity selection persistence
-│   ├── graph-cookie.ts       # Graph selection persistence
-│   ├── graph-tiers.ts        # Tier display helpers
-│   └── sidebar-cookie.ts     # Sidebar state persistence
-├── library/                  # XBRL taxonomy browser
-├── research/                 # Research coverage components
-├── task-monitoring/          # Background job and operation tracking
-│   ├── hooks.ts              # useTaskMonitoring, useEntityCreationTask
-│   ├── operationErrors.ts    # Operation error types
-│   ├── operationHooks.ts     # useOperationMonitoring, useGraphCreation
-│   ├── operationMonitor.ts   # SSE-based operation monitor
-│   ├── operationTypes.ts     # Shared operation types
-│   ├── taskMonitor.ts        # Polling-based task monitor (fallback)
-│   └── types.ts              # Task and operation TypeScript types
-├── theme/                    # UI theming
-│   └── flowbite-theme.ts     # Flowbite React custom theme
-├── types/                    # Shared TypeScript definitions
-│   ├── entity.d.ts           # Entity type definitions
-│   └── user.d.ts             # User type definitions
-├── ui-components/            # Reusable UI components
-│   ├── api-keys/             # API key management
-│   ├── chat/                 # Chat UI (header, input, messages, deep research toggle)
-│   ├── forms/                # Form components and validation
-│   ├── layout/               # Navbar, sidebar, page containers
-│   ├── settings/             # Settings page components
-│   ├── support/              # Support modal
-│   ├── Logo.tsx              # RoboSystems logo component
-│   └── Spinner.tsx           # Loading spinner
-└── utils/                    # Utility functions
-    └── turnstile-config.ts   # Cloudflare Turnstile configuration
-```
-
-## Technology Stack
-
-- **React 18/19** with modern hooks and patterns
-- **TypeScript** for type safety
-- **Flowbite React** for UI components
-- **Tailwind CSS** for styling (classes compiled by the consuming app)
-- **Next.js 15/16** App Router
-- **Auto-generated SDK** (`@robosystems/client`) from OpenAPI specifications
-
-## Key Patterns
-
-### Task Monitoring
-
-Two monitors handle async operations:
-
-- **`operationMonitor`** — SSE-based, used for graph lifecycle ops (create, materialize, etc.) that return `OperationEnvelope` with an `operationId`
-- **`taskMonitor`** — Polling-based fallback for older task-style operations
-
-```typescript
-import { useOperationMonitoring, useGraphCreation } from '@robosystems/core/task-monitoring'
-
-// Monitor a graph operation via SSE
-const { startMonitoring, progress, result } = useOperationMonitoring()
-await startMonitoring(operationId)
-
-// Full graph creation with monitoring
-const { createGraph, isCreating } = useGraphCreation()
-await createGraph({ graph_type: 'entity', graph_name: 'Acme Corp', ... })
-```
-
-### Contexts
-
-```typescript
-import { useGraphContext, useOrgContext } from '@robosystems/core/contexts'
-
-function MyComponent() {
-  const { currentGraphId, setCurrentGraphId } = useGraphContext()
-  const { org } = useOrgContext()
-}
-```
-
-### Authentication
-
-```typescript
-import { useAuth, AuthProvider, AuthGuard } from '@robosystems/core/auth-core'
-import { SignInForm, SignUpForm } from '@robosystems/core/auth-components'
-```
-
-## Development
-
-```bash
-npm install          # Also wires .githooks via the prepare script
-npm run test         # Vitest suite (jsdom, app-equivalent mocks in test/__mocks__)
-npm run test:all     # format:check + lint + typecheck + test + build
-npm run build        # tsc → dist/ + prepare-package.mjs (publishable package root)
-npm run pack:local   # Build + npm pack ./dist → tarball for local app testing
-```
-
-To test changes in an app before releasing:
+## Resources
 
-```bash
-npm run pack:local
-cd ../roboledger-app && npm install ../robosystems-core/robosystems-core-<version>.tgz
-```
-
-### Packaging notes
-
-- The package is published **from `dist/`** so compiled files sit at the package root — the apps' directory-barrel and direct-file deep imports both resolve without an `exports` map.
-- The build is **per-file tsc** (not a bundler) so `'use client'` / `'use server'` directives survive at the top of each emitted file.
-- **No CommonJS**: the output is ESM — `require()` is not available at runtime. Use static or dynamic `import`.
-
-### Adding New Components
-
-1. Create component in the appropriate directory
-2. Add TypeScript types in `types/` if needed
-3. Export from the directory's `index.ts` (and the root `index.ts` if broadly useful)
-4. Add tests in the adjacent `__tests__/` directory
-5. Validate in an app with a `pack:local` tarball before releasing
+- [RoboSystems Platform](https://robosystems.ai)
+- [GitHub Repository](https://github.com/RoboFinSystems/robosystems-core)
+- [API Documentation](https://api.robosystems.ai/docs)
 
-### Naming Conventions
+## Support
 
-- **Components**: PascalCase (`SidebarProvider`)
-- **Hooks**: camelCase with `use` prefix (`useMediaQuery`)
-- **Types**: PascalCase (`SidebarCookie`)
-- **Utilities**: camelCase (`sidebarCookie`)
-
-## Releasing
-
-Releases run through GitHub Actions (same pipeline as `@robosystems/report-components`):
-
-1. Run the **Create Release & Publish** workflow (`gh workflow run create-release.yml --field version_type=patch|minor|major`, or `npm run release:create`)
-2. It bumps the version on `main`, cuts a `release/<version>` branch, tags `v<version>`, and creates a GitHub Release with an AI-generated changelog
-3. The `release/**` push triggers `publish.yml`, which builds and runs `npm publish ./dist --provenance` via npm OIDC Trusted Publishing
-
-## Security
-
-- Never commit secrets or API keys
-- Use environment variables for configuration
-- Follow authentication best practices
-- Validate all inputs and API responses
+- [Issues](https://github.com/RoboFinSystems/robosystems-core/issues)
+- [Wiki](https://github.com/RoboFinSystems/robosystems/wiki)
+- [Projects](https://github.com/orgs/RoboFinSystems/projects)
+- [Discussions](https://github.com/orgs/RoboFinSystems/discussions)
 
 ## License
 
-MIT
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+MIT © 2026 RFS LLC

package/components/console/ConsoleContent.js

@@ -87,6 +87,9 @@ export function ConsoleContent({ config }) {
             .join('\n');
         const builtInCommands = `  /query      - Execute a Cypher query\n` +
             `  /search     - Search documents\n` +
+            (config.enableRecall
+                ? `  /recall     - Recall semantic memories\n`
+                : '') +
             `  /mcp        - Show MCP connection setup\n` +
             `  /help       - Show this help message\n` +
             `  /clear      - Clear console history\n` +
@@ -451,7 +454,7 @@ export function ConsoleContent({ config }) {
         }
     };
     const handleCommand = async (command) => {
-        var _a;
+        var _a, _b;
         if (!command.trim())
             return;
         addUserMessage(command);
@@ -515,16 +518,70 @@ export function ConsoleContent({ config }) {
                     addErrorMessage('Search failed. Please try again.');
                 }
             }
-            catch (_b) {
+            catch (_c) {
                 addErrorMessage('An error occurred while searching.');
             }
             return;
         }
+        // Handle /recall command — built-in only when the target supports
+        // semantic memory (user graphs; shared repositories reject it). When
+        // disabled it falls through to the unknown-command branch below.
+        if (config.enableRecall && command.toLowerCase().startsWith('/recall')) {
+            const recallQuery = command.slice(7).trim();
+            if (!recallQuery) {
+                addErrorMessage('Usage: /recall <query>\n\nExamples:\n  /recall payment terms for Acme\n  /recall quarter close checklist');
+                return;
+            }
+            if (!graphId) {
+                addErrorMessage(config.noSelectionError);
+                return;
+            }
+            addSystemMessage(`Recalling memories for "${recallQuery}"...`);
+            try {
+                const res = await SDK.recallMemory({
+                    path: { graph_id: graphId },
+                    body: { query: recallQuery, k: 10 },
+                });
+                if (res.data) {
+                    const data = res.data;
+                    if (data.hits.length === 0) {
+                        addSystemMessage(`No memories found for "${recallQuery}".`);
+                    }
+                    else {
+                        const lines = data.hits.map((hit, idx) => {
+                            var _a;
+                            const tags = ((_a = hit.tags) === null || _a === void 0 ? void 0 : _a.length) ? ` [${hit.tags.join(', ')}]` : '';
+                            const text = hit.snippet
+                                ? `\n     ${hit.snippet.slice(0, 150)}${hit.snippet.length > 150 ? '...' : ''}`
+                                : '';
+                            return `  ${idx + 1}. [${hit.score.toFixed(2)}]${tags}${text}`;
+                        });
+                        addSystemMessage(`Recalled ${data.total} memor${data.total === 1 ? 'y' : 'ies'} for "${recallQuery}" (showing ${data.hits.length}):\n\n${lines.join('\n\n')}`, true);
+                    }
+                }
+                else {
+                    const status = (_a = res.response) === null || _a === void 0 ? void 0 : _a.status;
+                    if (status === 403) {
+                        addErrorMessage('Memory recall is not available for shared repositories.');
+                    }
+                    else if (status === 404 || status === 503) {
+                        addErrorMessage('Semantic memory is not enabled in this environment.');
+                    }
+                    else {
+                        addErrorMessage('Recall failed. Please try again.');
+                    }
+                }
+            }
+            catch (_d) {
+                addErrorMessage('An error occurred while recalling memories.');
+            }
+            return;
+        }
         // Handle slash commands
         if (command.startsWith('/')) {
             const cmd = command.toLowerCase().split(' ')[0];
             // Check extra commands first
-            const extra = (_a = config.extraCommands) === null || _a === void 0 ? void 0 : _a.find((ec) => ec.command.toLowerCase() === cmd);
+            const extra = (_b = config.extraCommands) === null || _b === void 0 ? void 0 : _b.find((ec) => ec.command.toLowerCase() === cmd);
             if (extra) {
                 await extra.handler({ addSystemMessage, addErrorMessage, graphId });
                 return;

package/components/console/graphAwareConfig.js

@@ -390,6 +390,8 @@ export function buildGraphAwareConsoleConfig(graph, branding) {
         sampleQueries: set.sampleQueries,
         examplesLabel: (_b = branding.examplesLabel) !== null && _b !== void 0 ? _b : 'Example Cypher Queries:',
         noSelectionError: (_c = branding.noSelectionError) !== null && _c !== void 0 ? _c : 'No graph selected. Please select a graph first.',
+        // Semantic memory is per-user-graph; shared repositories reject it.
+        enableRecall: !isRepository,
     };
 }
 /**

package/components/console/types.d.ts

@@ -56,6 +56,10 @@ export interface ConsoleConfig {
     examplesLabel: string;
     /** Error message when no graph/portfolio is selected */
     noSelectionError: string;
+    /** Enable the built-in /recall semantic-memory command. Off by default —
+     *  shared repositories don't support memory, so the graph-aware builder
+     *  enables it only for user graphs. */
+    enableRecall?: boolean;
     /** Extra slash commands beyond the built-in set */
     extraCommands?: ConsoleExtraCommand[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/research/ResearchArticle.d.ts

@@ -4,10 +4,11 @@ import type { CoverageItem } from './types';
  * "Listen" card right under the video), then the brief rendered from markdown (its own
  * leading H1 is stripped — we render the title above it), and the continuing-coverage
  * history. Works in a server component (SSR'd for SEO) or a client one.
- * Styled for a dark background — render inside a dark (`bg-black`/`.dark`) container.
- * The prose styling mirrors the blog article body so research reads consistently with it
- * (explicit `prose-invert` + element overrides rather than `dark:prose-invert`, which the
- * Tailwind v4 + typography-plugin setup in these apps does not resolve from a `.dark` class).
+ * Theme-aware: readable in both light and dark. The prose body sets an explicit
+ * light + `dark:` color for every element it renders (headings, p, strong, em, links,
+ * lists, code, blockquote, hr, tables) rather than relying on `prose-invert` /
+ * `dark:prose-invert` — the latter doesn't resolve from a `.dark` class in the
+ * Tailwind v4 + typography-plugin setup these apps use.
  */
 export declare function ResearchArticle({ item, briefMarkdown, }: {
     item: CoverageItem;

package/research/ResearchArticle.js

@@ -8,10 +8,11 @@ import { CoverageHistory } from './CoverageHistory';
  * "Listen" card right under the video), then the brief rendered from markdown (its own
  * leading H1 is stripped — we render the title above it), and the continuing-coverage
  * history. Works in a server component (SSR'd for SEO) or a client one.
- * Styled for a dark background — render inside a dark (`bg-black`/`.dark`) container.
- * The prose styling mirrors the blog article body so research reads consistently with it
- * (explicit `prose-invert` + element overrides rather than `dark:prose-invert`, which the
- * Tailwind v4 + typography-plugin setup in these apps does not resolve from a `.dark` class).
+ * Theme-aware: readable in both light and dark. The prose body sets an explicit
+ * light + `dark:` color for every element it renders (headings, p, strong, em, links,
+ * lists, code, blockquote, hr, tables) rather than relying on `prose-invert` /
+ * `dark:prose-invert` — the latter doesn't resolve from a `.dark` class in the
+ * Tailwind v4 + typography-plugin setup these apps use.
  */
 export function ResearchArticle({ item, briefMarkdown, }) {
     var _a;
@@ -20,7 +21,7 @@ export function ResearchArticle({ item, briefMarkdown, }) {
     const podcastYtId = youtubeId(item.podcast_youtube_url);
     return (_jsxs("article", { className: "mx-auto max-w-3xl", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [_jsxs("span", { className: "rounded bg-cyan-500/10 px-2 py-0.5 font-semibold text-cyan-600 dark:text-cyan-400", children: [item.company, " \u00B7 ", item.ticker] }), item.coverage_label && _jsx("span", { children: item.coverage_label }), _jsx("span", { children: (_a = item.date) === null || _a === void 0 ? void 0 : _a.slice(0, 10) })] }), _jsx("h1", { className: "mb-6 text-3xl font-bold text-gray-900 dark:text-white", children: item.title }), ytId ? (_jsx("div", { className: "mb-8 aspect-video w-full overflow-hidden rounded-xl bg-black", children: _jsx("iframe", { className: "h-full w-full", src: `https://www.youtube.com/embed/${ytId}`, title: item.title, loading: "lazy", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true }) })) : (item.assets.video && (
             // eslint-disable-next-line jsx-a11y/media-has-caption
-            _jsx("video", { controls: true, poster: item.assets.thumbnail, src: item.assets.video, className: "mb-8 aspect-video w-full rounded-xl bg-black" }))), (item.assets.podcast_mp3 || podcastYtId) && (_jsx("section", { className: "mb-8", children: item.assets.podcast_mp3 ? (_jsxs("div", { className: "rounded-xl border border-cyan-500/30 bg-gray-900/50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold text-cyan-600 dark:text-cyan-400", children: "\uD83C\uDF99 Listen \u2014 Q&A podcast" }), podcastYtId && (_jsx("a", { href: item.podcast_youtube_url, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-xs text-cyan-600 hover:underline dark:text-cyan-400", children: "Watch on YouTube \u2197" }))] }), _jsx("audio", { controls: true, preload: "none", src: item.assets.podcast_mp3, className: "w-full" })] })) : (
+            _jsx("video", { controls: true, poster: item.assets.thumbnail, src: item.assets.video, className: "mb-8 aspect-video w-full rounded-xl bg-black" }))), (item.assets.podcast_mp3 || podcastYtId) && (_jsx("section", { className: "mb-8", children: item.assets.podcast_mp3 ? (_jsxs("div", { className: "rounded-xl border border-cyan-500/30 bg-cyan-50/60 p-4 dark:bg-gray-900/50", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold text-cyan-600 dark:text-cyan-400", children: "\uD83C\uDF99 Listen \u2014 Q&A podcast" }), podcastYtId && (_jsx("a", { href: item.podcast_youtube_url, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-xs text-cyan-600 hover:underline dark:text-cyan-400", children: "Watch on YouTube \u2197" }))] }), _jsx("audio", { controls: true, preload: "none", src: item.assets.podcast_mp3, className: "w-full" })] })) : (
                 // no MP3 yet — fall back to the YouTube video player
-                _jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-3 text-xl font-bold text-gray-900 dark:text-white", children: "Listen \u2014 Q&A podcast" }), _jsx("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-black", children: _jsx("iframe", { className: "h-full w-full", src: `https://www.youtube.com/embed/${podcastYtId}`, title: `${item.title} — Q&A podcast`, loading: "lazy", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true }) })] })) })), body && (_jsx("div", { className: "prose prose-lg prose-invert prose-headings:font-heading prose-headings:font-bold prose-headings:text-white prose-p:text-gray-300 prose-p:leading-relaxed prose-a:text-cyan-400 prose-a:no-underline hover:prose-a:text-cyan-300 prose-strong:text-white prose-strong:font-semibold prose-code:text-cyan-400 prose-code:bg-gray-800 prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-800 prose-blockquote:border-l-cyan-500 prose-blockquote:text-gray-400 prose-blockquote:italic prose-ul:text-gray-300 prose-ol:text-gray-300 prose-li:marker:text-cyan-500 prose-table:border-gray-700 prose-th:bg-gray-900 prose-th:text-white prose-td:text-gray-300 max-w-none", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: body }) })), _jsx(CoverageHistory, { history: item.history }), _jsxs("footer", { className: "mt-12 border-t border-gray-200 pt-6 dark:border-gray-800", children: [_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Audio & music produced with ElevenLabs." }), _jsxs("a", { href: "https://elevenlabs.io/startup-grants", target: "_blank", rel: "noopener noreferrer", "aria-label": "Backed by the ElevenLabs Grants program", className: "mt-3 inline-block", children: [_jsx("img", { src: "/images/logos/elevenlabs-grants.webp", alt: "Backed by the ElevenLabs Grants program", width: 200, className: "h-auto dark:hidden" }), _jsx("img", { src: "/images/logos/elevenlabs-grants-white.webp", alt: "Backed by the ElevenLabs Grants program", width: 200, className: "hidden h-auto dark:block" })] }), _jsxs("p", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500", children: ["Using ElevenLabs yourself? Our", ' ', _jsx("a", { href: "https://try.elevenlabs.io/v9z3wzm97gk3", target: "_blank", rel: "noopener noreferrer", className: "hover:underline", children: "referral link" }), ' ', "costs you nothing extra and supports this research."] })] })] }));
+                _jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-3 text-xl font-bold text-gray-900 dark:text-white", children: "Listen \u2014 Q&A podcast" }), _jsx("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-black", children: _jsx("iframe", { className: "h-full w-full", src: `https://www.youtube.com/embed/${podcastYtId}`, title: `${item.title} — Q&A podcast`, loading: "lazy", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true }) })] })) })), body && (_jsx("div", { className: "prose prose-lg prose-headings:font-heading prose-headings:font-bold prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-a:text-cyan-600 dark:prose-a:text-cyan-400 prose-a:no-underline hover:prose-a:text-cyan-500 dark:hover:prose-a:text-cyan-300 prose-strong:text-gray-900 dark:prose-strong:text-white prose-strong:font-semibold prose-em:text-gray-700 dark:prose-em:text-gray-300 prose-code:text-cyan-700 dark:prose-code:text-cyan-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-800 prose-blockquote:border-l-cyan-500 prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-400 prose-blockquote:italic prose-ul:text-gray-700 dark:prose-ul:text-gray-300 prose-ol:text-gray-700 dark:prose-ol:text-gray-300 prose-li:marker:text-cyan-500 prose-hr:border-gray-200 dark:prose-hr:border-gray-800 prose-table:border-gray-300 dark:prose-table:border-gray-700 prose-th:bg-gray-100 dark:prose-th:bg-gray-900 prose-th:text-gray-900 dark:prose-th:text-white prose-td:text-gray-700 dark:prose-td:text-gray-300 max-w-none", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: body }) })), _jsx(CoverageHistory, { history: item.history }), _jsxs("footer", { className: "mt-12 border-t border-gray-200 pt-6 dark:border-gray-800", children: [_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Audio & music produced with ElevenLabs." }), _jsxs("a", { href: "https://elevenlabs.io/startup-grants", target: "_blank", rel: "noopener noreferrer", "aria-label": "Backed by the ElevenLabs Grants program", className: "mt-3 inline-block", children: [_jsx("img", { src: "/images/logos/elevenlabs-grants.webp", alt: "Backed by the ElevenLabs Grants program", width: 200, className: "h-auto dark:hidden" }), _jsx("img", { src: "/images/logos/elevenlabs-grants-white.webp", alt: "Backed by the ElevenLabs Grants program", width: 200, className: "hidden h-auto dark:block" })] }), _jsxs("p", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500", children: ["Using ElevenLabs yourself? Our", ' ', _jsx("a", { href: "https://try.elevenlabs.io/v9z3wzm97gk3", target: "_blank", rel: "noopener noreferrer", className: "hover:underline", children: "referral link" }), ' ', "costs you nothing extra and supports this research."] })] })] }));
 }