diff --git a/apps/x/.claude/launch.json b/apps/x/.claude/launch.json new file mode 100644 index 00000000..3ba43066 --- /dev/null +++ b/apps/x/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "renderer-dev", + "runtimeExecutable": "/Users/tusharmagar/Rowboat/rowboat-V2/apps/x/apps/renderer/node_modules/.bin/vite", + "runtimeArgs": ["--port", "5173"], + "port": 5173 + } + ] +} diff --git a/apps/x/apps/main/entitlements.plist b/apps/x/apps/main/entitlements.plist new file mode 100644 index 00000000..c0899b9d --- /dev/null +++ b/apps/x/apps/main/entitlements.plist @@ -0,0 +1,12 @@ + + + + + com.apple.security.cs.allow-jit + + com.apple.security.device.audio-input + + com.apple.security.device.screen-capture + + + diff --git a/apps/x/apps/main/forge.config.cjs b/apps/x/apps/main/forge.config.cjs index 57f733f2..c79a8c43 100644 --- a/apps/x/apps/main/forge.config.cjs +++ b/apps/x/apps/main/forge.config.cjs @@ -13,6 +13,10 @@ module.exports = { appCategoryType: 'public.app-category.productivity', osxSign: { batchCodesignCalls: true, + optionsForFile: () => ({ + entitlements: path.join(__dirname, 'entitlements.plist'), + 'entitlements-inherit': path.join(__dirname, 'entitlements.plist'), + }), }, osxNotarize: { appleId: process.env.APPLE_ID, diff --git a/apps/x/apps/main/package.json b/apps/x/apps/main/package.json index c777a237..74cb1598 100644 --- a/apps/x/apps/main/package.json +++ b/apps/x/apps/main/package.json @@ -17,6 +17,7 @@ "@x/shared": "workspace:*", "chokidar": "^4.0.3", "electron-squirrel-startup": "^1.0.1", + "html-to-docx": "^1.8.0", "mammoth": "^1.11.0", "papaparse": "^5.5.3", "pdf-parse": "^2.4.5", diff --git a/apps/x/apps/main/src/composio-handler.ts b/apps/x/apps/main/src/composio-handler.ts index bbbb3597..c7449bcb 100644 --- a/apps/x/apps/main/src/composio-handler.ts +++ b/apps/x/apps/main/src/composio-handler.ts @@ -4,8 +4,11 @@ import * as composioClient from '@x/core/dist/composio/client.js'; import { composioAccountsRepo } from '@x/core/dist/composio/repo.js'; import { composioEnabledToolsRepo } from '@x/core/dist/composio/enabled-tools-repo.js'; import type { EnabledTool } from '@x/core/dist/composio/enabled-tools-repo.js'; -import type { LocalConnectedAccount } from '@x/core/dist/composio/types.js'; +import type { LocalConnectedAccount, ZExecuteActionResponse } from '@x/core/dist/composio/types.js'; import { refreshComposioTools } from '@x/core/dist/application/lib/builtin-tools.js'; +import { z } from 'zod'; +import { triggerSync as triggerGmailSync } from '@x/core/dist/knowledge/sync_gmail.js'; +import { triggerSync as triggerCalendarSync } from '@x/core/dist/knowledge/sync_calendar.js'; const REDIRECT_URI = 'http://localhost:8081/oauth/callback'; @@ -31,8 +34,8 @@ export function emitComposioEvent(event: { toolkitSlug: string; success: boolean /** * Check if Composio is configured with an API key */ -export function isConfigured(): { configured: boolean } { - return { configured: composioClient.isConfigured() }; +export async function isConfigured(): Promise<{ configured: boolean }> { + return { configured: await composioClient.isConfigured() }; } /** @@ -71,7 +74,7 @@ export async function initiateConnection(toolkitSlug: string): Promise<{ const toolkit = await composioClient.getToolkit(toolkitSlug); // Check for managed OAuth2 - if (!toolkit.composio_managed_auth_schemes.includes('OAUTH2')) { + if (!toolkit.composio_managed_auth_schemes?.includes('OAUTH2')) { return { success: false, error: `Toolkit ${toolkitSlug} does not support managed OAuth2`, @@ -146,7 +149,11 @@ export async function initiateConnection(toolkitSlug: string): Promise<{ // Set up callback server let cleanupTimeout: NodeJS.Timeout; + let callbackHandled = false; const { server } = await createAuthServer(8081, async (_code, _state) => { + // Guard against duplicate callbacks (browser may send multiple requests) + if (callbackHandled) return; + callbackHandled = true; // OAuth callback received - sync the account status try { const accountStatus = await composioClient.getConnectedAccount(connectedAccountId); @@ -154,6 +161,12 @@ export async function initiateConnection(toolkitSlug: string): Promise<{ if (accountStatus.status === 'ACTIVE') { emitComposioEvent({ toolkitSlug, success: true }); + if (toolkitSlug === 'gmail') { + triggerGmailSync(); + } + if (toolkitSlug === 'googlecalendar') { + triggerCalendarSync(); + } } else { emitComposioEvent({ toolkitSlug, @@ -273,6 +286,20 @@ export function listConnected(): { toolkits: string[] } { return { toolkits: composioAccountsRepo.getConnectedToolkits() }; } +/** + * Check if Composio should be used for Google services (Gmail, etc.) + */ +export async function useComposioForGoogle(): Promise<{ enabled: boolean }> { + return { enabled: await composioClient.useComposioForGoogle() }; +} + +/** + * Check if Composio should be used for Google Calendar + */ +export async function useComposioForGoogleCalendar(): Promise<{ enabled: boolean }> { + return { enabled: await composioClient.useComposioForGoogleCalendar() }; +} + /** * Execute a Composio action */ @@ -280,23 +307,28 @@ export async function executeAction( actionSlug: string, toolkitSlug: string, input: Record -): Promise<{ success: boolean; data: unknown; error?: string }> { +): Promise> { try { const account = composioAccountsRepo.getAccount(toolkitSlug); if (!account || account.status !== 'ACTIVE') { return { - success: false, data: null, + successful: false, error: `Toolkit ${toolkitSlug} is not connected`, }; } - const result = await composioClient.executeAction(actionSlug, account.id, input); + const result = await composioClient.executeAction(actionSlug, { + connected_account_id: account.id, + user_id: 'rowboat-user', + version: 'latest', + arguments: input, + }); return result; } catch (error) { console.error('[Composio] Action execution failed:', error); return { - success: false, + successful: false, data: null, error: error instanceof Error ? error.message : 'Unknown error', }; @@ -311,9 +343,9 @@ export async function listToolkits(cursor?: string): Promise<{ slug: string; name: string; meta: { description: string; logo: string; tools_count: number; triggers_count: number }; - no_auth: boolean; - auth_schemes: string[]; - composio_managed_auth_schemes: string[]; + no_auth?: boolean; + auth_schemes?: string[]; + composio_managed_auth_schemes?: string[]; }>; nextCursor: string | null; totalItems: number; diff --git a/apps/x/apps/main/src/html-to-docx.d.ts b/apps/x/apps/main/src/html-to-docx.d.ts new file mode 100644 index 00000000..24f298ef --- /dev/null +++ b/apps/x/apps/main/src/html-to-docx.d.ts @@ -0,0 +1,7 @@ +declare module 'html-to-docx' { + export default function htmlToDocx( + htmlString: string, + headerHTMLString?: string, + options?: Record, + ): Promise; +} diff --git a/apps/x/apps/main/src/ipc.ts b/apps/x/apps/main/src/ipc.ts index 8b8ebba8..1327500d 100644 --- a/apps/x/apps/main/src/ipc.ts +++ b/apps/x/apps/main/src/ipc.ts @@ -1,4 +1,4 @@ -import { ipcMain, BrowserWindow, shell } from 'electron'; +import { ipcMain, BrowserWindow, shell, dialog } from 'electron'; import { ipc } from '@x/shared'; import path from 'node:path'; import os from 'node:os'; @@ -15,23 +15,100 @@ import { bus } from '@x/core/dist/runs/bus.js'; import { serviceBus } from '@x/core/dist/services/service_bus.js'; import type { FSWatcher } from 'chokidar'; import fs from 'node:fs/promises'; +import { exec } from 'node:child_process'; +import { promisify } from 'node:util'; import z from 'zod'; + +const execAsync = promisify(exec); import { RunEvent } from '@x/shared/dist/runs.js'; import { ServiceEvent } from '@x/shared/dist/service-events.js'; import container from '@x/core/dist/di/container.js'; import { listOnboardingModels } from '@x/core/dist/models/models-dev.js'; import { testModelConnection } from '@x/core/dist/models/models.js'; +import { isSignedIn } from '@x/core/dist/account/account.js'; +import { listGatewayModels } from '@x/core/dist/models/gateway.js'; import type { IModelConfigRepo } from '@x/core/dist/models/repo.js'; import type { IOAuthRepo } from '@x/core/dist/auth/repo.js'; import { IGranolaConfigRepo } from '@x/core/dist/knowledge/granola/repo.js'; import { triggerSync as triggerGranolaSync } from '@x/core/dist/knowledge/granola/sync.js'; +import { ISlackConfigRepo } from '@x/core/dist/slack/repo.js'; import { isOnboardingComplete, markOnboardingComplete } from '@x/core/dist/config/note_creation_config.js'; import * as composioHandler from './composio-handler.js'; import { IAgentScheduleRepo } from '@x/core/dist/agent-schedule/repo.js'; import { IAgentScheduleStateRepo } from '@x/core/dist/agent-schedule/state-repo.js'; import { triggerRun as triggerAgentScheduleRun } from '@x/core/dist/agent-schedule/runner.js'; import { search } from '@x/core/dist/search/search.js'; -import { versionHistory } from '@x/core'; +import { versionHistory, voice } from '@x/core'; +import { classifySchedule, processRowboatInstruction } from '@x/core/dist/knowledge/inline_tasks.js'; +import { getBillingInfo } from '@x/core/dist/billing/billing.js'; +import { summarizeMeeting } from '@x/core/dist/knowledge/summarize_meeting.js'; +import { getAccessToken } from '@x/core/dist/auth/tokens.js'; +import { getRowboatConfig } from '@x/core/dist/config/rowboat.js'; + +/** + * Convert markdown to a styled HTML document for PDF/DOCX export. + */ +function markdownToHtml(markdown: string, title: string): string { + // Simple markdown to HTML conversion for export purposes + let html = markdown + // Resolve wiki links [[Folder/Note Name]] or [[Folder/Note Name|Display]] to plain text + .replace(/\[\[([^\]|]+)\|([^\]]+)\]\]/g, (_match, _path, display) => display.trim()) + .replace(/\[\[([^\]]+)\]\]/g, (_match, linkPath: string) => { + // Use the last segment (filename) as the display name + const segments = linkPath.trim().split('/') + return segments[segments.length - 1] + }) + // Escape HTML entities (but preserve markdown syntax) + .replace(/&/g, '&') + .replace(//g, '>') + + // Headings (must come before other processing) + html = html.replace(/^######\s+(.+)$/gm, '
$1
') + html = html.replace(/^#####\s+(.+)$/gm, '
$1
') + html = html.replace(/^####\s+(.+)$/gm, '

$1

') + html = html.replace(/^###\s+(.+)$/gm, '

$1

') + html = html.replace(/^##\s+(.+)$/gm, '

$1

') + html = html.replace(/^#\s+(.+)$/gm, '

$1

') + + // Bold and italic + html = html.replace(/\*\*\*(.+?)\*\*\*/g, '$1') + html = html.replace(/\*\*(.+?)\*\*/g, '$1') + html = html.replace(/\*(.+?)\*/g, '$1') + + // Inline code + html = html.replace(/`([^`]+)`/g, '$1') + + // Horizontal rules + html = html.replace(/^---$/gm, '
') + + // Unordered lists + html = html.replace(/^[-*]\s+(.+)$/gm, '
  • $1
    • ') + + // Links + html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1') + + // Blockquotes + html = html.replace(/^>\s+(.+)$/gm, '
    $1
    ') + + // Paragraphs: wrap remaining lines that aren't already wrapped in HTML tags + html = html.replace(/^(?!<[a-z/])((?!^\s*$).+)$/gm, '

    $1

    ') + + // Clean up consecutive list items into lists + html = html.replace(/(
  • .*<\/li>\n?)+/g, (match) => `
      ${match}
    `) + + return ` +${title} +${html}` +} type InvokeChannels = ipc.InvokeChannels; type IPCChannels = ipc.IPCChannels; @@ -69,10 +146,10 @@ export function registerIpcHandlers(handlers: InvokeHandlers) { ipcMain.handle(channel, async (event, rawArgs) => { // Validate request payload const args = ipc.validateRequest(channel, rawArgs); - + // Call handler const result = await handler(event, args); - + // Validate response payload return ipc.validateResponse(channel, result); }); @@ -344,7 +421,7 @@ export function setupIpcHandlers() { return runsCore.createRun(args); }, 'runs:createMessage': async (_event, args) => { - return { messageId: await runsCore.createMessage(args.runId, args.message) }; + return { messageId: await runsCore.createMessage(args.runId, args.message, args.voiceInput, args.voiceOutput, args.searchEnabled) }; }, 'runs:authorizePermission': async (_event, args) => { await runsCore.authorizePermission(args.runId, args.authorization); @@ -369,6 +446,9 @@ export function setupIpcHandlers() { return { success: true }; }, 'models:list': async () => { + if (await isSignedIn()) { + return await listGatewayModels(); + } return await listOnboardingModels(); }, 'models:test': async (_event, args) => { @@ -393,6 +473,21 @@ export function setupIpcHandlers() { const config = await repo.getClientFacingConfig(); return { config }; }, + 'account:getRowboat': async () => { + const signedIn = await isSignedIn(); + if (!signedIn) { + return { signedIn: false, accessToken: null, config: null }; + } + + const config = await getRowboatConfig(); + + try { + const accessToken = await getAccessToken(); + return { signedIn: true, accessToken, config }; + } catch { + return { signedIn: true, accessToken: null, config }; + } + }, 'granola:getConfig': async () => { const repo = container.resolve('granolaConfigRepo'); const config = await repo.getConfig(); @@ -409,6 +504,30 @@ export function setupIpcHandlers() { return { success: true }; }, + 'slack:getConfig': async () => { + const repo = container.resolve('slackConfigRepo'); + const config = await repo.getConfig(); + return { enabled: config.enabled, workspaces: config.workspaces }; + }, + 'slack:setConfig': async (_event, args) => { + const repo = container.resolve('slackConfigRepo'); + await repo.setConfig({ enabled: args.enabled, workspaces: args.workspaces }); + return { success: true }; + }, + 'slack:listWorkspaces': async () => { + try { + const { stdout } = await execAsync('agent-slack auth whoami', { timeout: 10000 }); + const parsed = JSON.parse(stdout); + const workspaces = (parsed.workspaces || []).map((w: { workspace_url?: string; workspace_name?: string }) => ({ + url: w.workspace_url || '', + name: w.workspace_name || '', + })); + return { workspaces }; + } catch (err: unknown) { + const message = err instanceof Error ? err.message : 'Failed to list Slack workspaces'; + return { workspaces: [], error: message }; + } + }, 'onboarding:getStatus': async () => { // Show onboarding if it hasn't been completed yet const complete = isOnboardingComplete(); @@ -459,6 +578,12 @@ export function setupIpcHandlers() { 'composio:disable-tools': async (_event, args) => { return composioHandler.disableTools(args.toolSlugs); }, + 'composio:use-composio-for-google': async () => { + return composioHandler.useComposioForGoogle(); + }, + 'composio:use-composio-for-google-calendar': async () => { + return composioHandler.useComposioForGoogleCalendar(); + }, // Agent schedule handlers 'agent-schedule:getConfig': async () => { const repo = container.resolve('agentScheduleRepo'); @@ -547,5 +672,89 @@ export function setupIpcHandlers() { 'search:query': async (_event, args) => { return search(args.query, args.limit, args.types); }, + // Inline task schedule classification + 'export:note': async (event, args) => { + const { markdown, format, title } = args; + const sanitizedTitle = title.replace(/[/\\?%*:|"<>]/g, '-').trim() || 'Untitled'; + + const filterMap: Record = { + md: [{ name: 'Markdown', extensions: ['md'] }], + pdf: [{ name: 'PDF', extensions: ['pdf'] }], + docx: [{ name: 'Word Document', extensions: ['docx'] }], + }; + + const win = BrowserWindow.fromWebContents(event.sender); + const result = await dialog.showSaveDialog(win!, { + defaultPath: `${sanitizedTitle}.${format}`, + filters: filterMap[format], + }); + + if (result.canceled || !result.filePath) { + return { success: false }; + } + + const filePath = result.filePath; + + if (format === 'md') { + await fs.writeFile(filePath, markdown, 'utf8'); + return { success: true }; + } + + if (format === 'pdf') { + // Render markdown as HTML in a hidden window, then print to PDF + const htmlContent = markdownToHtml(markdown, sanitizedTitle); + const hiddenWin = new BrowserWindow({ + show: false, + width: 800, + height: 600, + webPreferences: { offscreen: true }, + }); + await hiddenWin.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`); + // Small delay to ensure CSS/fonts render + await new Promise(resolve => setTimeout(resolve, 300)); + const pdfBuffer = await hiddenWin.webContents.printToPDF({ + printBackground: true, + pageSize: 'A4', + }); + hiddenWin.destroy(); + await fs.writeFile(filePath, pdfBuffer); + return { success: true }; + } + + if (format === 'docx') { + const htmlContent = markdownToHtml(markdown, sanitizedTitle); + const { default: htmlToDocx } = await import('html-to-docx'); + const docxBuffer = await htmlToDocx(htmlContent, undefined, { + table: { row: { cantSplit: true } }, + footer: false, + header: false, + }); + await fs.writeFile(filePath, Buffer.from(docxBuffer as ArrayBuffer)); + return { success: true }; + } + + return { success: false, error: 'Unknown format' }; + }, + 'meeting:summarize': async (_event, args) => { + const notes = await summarizeMeeting(args.transcript, args.meetingStartTime, args.calendarEventJson); + return { notes }; + }, + 'inline-task:classifySchedule': async (_event, args) => { + const schedule = await classifySchedule(args.instruction); + return { schedule }; + }, + 'inline-task:process': async (_event, args) => { + return await processRowboatInstruction(args.instruction, args.noteContent, args.notePath); + }, + 'voice:getConfig': async () => { + return voice.getVoiceConfig(); + }, + 'voice:synthesize': async (_event, args) => { + return voice.synthesizeSpeech(args.text); + }, + // Billing handler + 'billing:getInfo': async () => { + return await getBillingInfo(); + }, }); } diff --git a/apps/x/apps/main/src/main.ts b/apps/x/apps/main/src/main.ts index 34363b28..3b8b70c8 100644 --- a/apps/x/apps/main/src/main.ts +++ b/apps/x/apps/main/src/main.ts @@ -1,4 +1,4 @@ -import { app, BrowserWindow, protocol, net, shell } from "electron"; +import { app, BrowserWindow, desktopCapturer, protocol, net, shell, session } from "electron"; import path from "node:path"; import { setupIpcHandlers, @@ -17,9 +17,14 @@ import { init as initCalendarSync } from "@x/core/dist/knowledge/sync_calendar.j import { init as initFirefliesSync } from "@x/core/dist/knowledge/sync_fireflies.js"; import { init as initGranolaSync } from "@x/core/dist/knowledge/granola/sync.js"; import { init as initGraphBuilder } from "@x/core/dist/knowledge/build_graph.js"; +import { init as initEmailLabeling } from "@x/core/dist/knowledge/label_emails.js"; +import { init as initNoteTagging } from "@x/core/dist/knowledge/tag_notes.js"; +import { init as initInlineTasks } from "@x/core/dist/knowledge/inline_tasks.js"; import { init as initAgentRunner } from "@x/core/dist/agent-schedule/runner.js"; +import { init as initAgentNotes } from "@x/core/dist/knowledge/agent_notes.js"; import { initConfigs } from "@x/core/dist/config/initConfigs.js"; import started from "electron-squirrel-startup"; +import { execSync } from "node:child_process"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); @@ -27,6 +32,28 @@ const __dirname = dirname(__filename); // run this as early in the main process as possible if (started) app.quit(); +// Fix PATH for packaged Electron apps on macOS/Linux. +// Packaged apps inherit a minimal environment that doesn't include paths from +// the user's shell profile (nvm, Homebrew, etc.). Spawn the user's login shell +// to resolve the full PATH, using delimiters to safely extract it from any +// surrounding shell output (motd, greeting messages, etc.). +if (process.platform !== 'win32') { + try { + const userShell = process.env.SHELL || '/bin/zsh'; + const delimiter = '__ROWBOAT_PATH__'; + const output = execSync( + `${userShell} -lc 'echo -n "${delimiter}$PATH${delimiter}"'`, + { encoding: 'utf-8', timeout: 5000 }, + ); + const match = output.match(new RegExp(`${delimiter}(.+?)${delimiter}`)); + if (match?.[1]) { + process.env.PATH = match[1]; + } + } catch { + // Silently fall back to the existing PATH if shell resolution fails + } +} + // Path resolution differs between development and production: const preloadPath = app.isPackaged ? path.join(__dirname, "../preload/dist/preload.js") @@ -89,8 +116,30 @@ function createWindow() { }, }); + // Grant microphone and display-capture permissions + session.defaultSession.setPermissionRequestHandler((_webContents, permission, callback) => { + if (permission === 'media' || permission === 'display-capture') { + callback(true); + } else { + callback(false); + } + }); + + // Auto-approve display media requests and route system audio as loopback. + // Electron requires a video source in the callback even if we only want audio. + // We pass the first available screen source; the renderer discards the video track. + session.defaultSession.setDisplayMediaRequestHandler(async (_request, callback) => { + const sources = await desktopCapturer.getSources({ types: ['screen'] }); + if (sources.length === 0) { + callback({}); + return; + } + callback({ video: sources[0], audio: 'loopback' }); + }); + // Show window when content is ready to prevent blank screen win.once("ready-to-show", () => { + win.maximize(); win.show(); }); @@ -170,9 +219,21 @@ app.whenReady().then(async () => { // start knowledge graph builder initGraphBuilder(); + // start email labeling service + initEmailLabeling(); + + // start note tagging service + initNoteTagging(); + + // start inline task service (@rowboat: mentions) + initInlineTasks(); + // start background agent runner (scheduled agents) initAgentRunner(); + // start agent notes learning service + initAgentNotes(); + app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); diff --git a/apps/x/apps/main/src/oauth-handler.ts b/apps/x/apps/main/src/oauth-handler.ts index 2efc77c2..99865d8e 100644 --- a/apps/x/apps/main/src/oauth-handler.ts +++ b/apps/x/apps/main/src/oauth-handler.ts @@ -75,7 +75,7 @@ function getClientRegistrationRepo(): IClientRegistrationRepo { * Get or create OAuth configuration for a provider */ async function getProviderConfiguration(provider: string, clientIdOverride?: string): Promise { - const config = getProviderConfig(provider); + const config = await getProviderConfig(provider); const resolveClientId = async (): Promise => { if (config.client.mode === 'static' && config.client.clientId) { return config.client.clientId; @@ -156,7 +156,7 @@ export async function connectProvider(provider: string, clientId?: string): Prom cancelActiveFlow('new_flow_started'); const oauthRepo = getOAuthRepo(); - const providerConfig = getProviderConfig(provider); + const providerConfig = await getProviderConfig(provider); if (provider === 'google') { if (!clientId) { @@ -186,7 +186,11 @@ export async function connectProvider(provider: string, clientId?: string): Prom }); // Create callback server + let callbackHandled = false; const { server } = await createAuthServer(8080, async (code, receivedState) => { + // Guard against duplicate callbacks (browser may send multiple requests) + if (callbackHandled) return; + callbackHandled = true; // Validate state if (receivedState !== state) { throw new Error('Invalid state parameter - possible CSRF attack'); @@ -282,6 +286,8 @@ export async function disconnectProvider(provider: string): Promise<{ success: b try { const oauthRepo = getOAuthRepo(); await oauthRepo.delete(provider); + // Notify renderer so sidebar, voice, and billing re-check state + emitOAuthEvent({ provider, success: false }); return { success: true }; } catch (error) { console.error('OAuth disconnect failed:', error); diff --git a/apps/x/apps/renderer/package.json b/apps/x/apps/renderer/package.json index 1ff56246..ebf8a650 100644 --- a/apps/x/apps/renderer/package.json +++ b/apps/x/apps/renderer/package.json @@ -46,6 +46,7 @@ "radix-ui": "^1.4.3", "react": "^19.2.0", "react-dom": "^19.2.0", + "recharts": "^3.8.0", "sonner": "^2.0.7", "streamdown": "^1.6.10", "tailwind-merge": "^3.4.0", diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index 991236ea..5c1eabb2 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -49,6 +49,15 @@ color: #888; } +/* Onboarding dot grid background */ +.onboarding-dot-grid { + background-image: radial-gradient(circle, oklch(0.5 0 0 / 0.08) 1px, transparent 1px); + background-size: 24px 24px; +} +.dark .onboarding-dot-grid { + background-image: radial-gradient(circle, oklch(0.7 0 0 / 0.06) 1px, transparent 1px); +} + @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); @@ -293,3 +302,56 @@ pointer-events: none; user-select: none; } + +/* Upgrade button: grainy gradient sweep on hover */ +.upgrade-btn { + position: relative; + overflow: hidden; + isolation: isolate; +} + +.upgrade-btn::before { + content: ''; + position: absolute; + inset: 0; + background: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"), + linear-gradient( + 90deg, + transparent 0%, + rgba(168, 85, 247, 0.35) 20%, + rgba(236, 72, 153, 0.4) 40%, + rgba(251, 146, 60, 0.35) 60%, + rgba(168, 85, 247, 0.3) 80%, + transparent 100% + ); + background-size: 100px 100px, 100% 100%; + transform: translateX(-120%); + opacity: 0; + z-index: 1; + pointer-events: none; + border-radius: inherit; +} + +.upgrade-btn:hover::before { + animation: grain-sweep 2.4s ease-in-out infinite; +} + +@keyframes grain-sweep { + 0% { + opacity: 1; + transform: translateX(-120%); + } + 45% { + opacity: 1; + transform: translateX(120%); + } + 55% { + opacity: 1; + transform: translateX(120%); + } + 100% { + opacity: 1; + transform: translateX(-120%); + } +} diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx index 92f43577..591ef21e 100644 --- a/apps/x/apps/renderer/src/App.tsx +++ b/apps/x/apps/renderer/src/App.tsx @@ -5,13 +5,14 @@ import { RunEvent, ListRunsResponse } from '@x/shared/src/runs.js'; import type { LanguageModelUsage, ToolUIPart } from 'ai'; import './App.css' import z from 'zod'; -import { CheckIcon, LoaderIcon, PanelLeftIcon, Maximize2, Minimize2, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon, HistoryIcon } from 'lucide-react'; +import { CheckIcon, LoaderIcon, PanelLeftIcon, Maximize2, Minimize2, ChevronLeftIcon, ChevronRightIcon, SquarePen, SearchIcon, HistoryIcon, RadioIcon, SquareIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import { MarkdownEditor } from './components/markdown-editor'; import { ChatSidebar } from './components/chat-sidebar'; import { ChatInputWithMentions, type StagedAttachment } from './components/chat-input-with-mentions'; import { ChatMessageAttachments } from '@/components/chat-message-attachments' import { GraphView, type GraphEdge, type GraphNode } from '@/components/graph-view'; +import { BasesView, type BaseConfig, DEFAULT_BASE_CONFIG } from '@/components/bases-view'; import { useDebounce } from './hooks/use-debounce'; import { SidebarContentPanel } from '@/components/sidebar-content'; import { SidebarSectionProvider } from '@/contexts/sidebar-context'; @@ -34,6 +35,7 @@ import { import { Shimmer } from '@/components/ai-elements/shimmer'; import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from '@/components/ai-elements/tool'; import { WebSearchResult } from '@/components/ai-elements/web-search-result'; +import { AppActionCard } from '@/components/ai-elements/app-action-card'; import { PermissionRequest } from '@/components/ai-elements/permission-request'; import { AskHumanRequest } from '@/components/ai-elements/ask-human-request'; import { Suggestions } from '@/components/ai-elements/suggestions'; @@ -44,9 +46,12 @@ import { useSidebar, } from "@/components/ui/sidebar" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" import { Toaster } from "@/components/ui/sonner" import { stripKnowledgePrefix, toKnowledgePath, wikiLabel } from '@/lib/wiki-links' -import { OnboardingModal } from '@/components/onboarding-modal' +import { splitFrontmatter, joinFrontmatter } from '@/lib/frontmatter' +import { OnboardingModal } from '@/components/onboarding' import { SearchDialog } from '@/components/search-dialog' import { BackgroundTaskDetail } from '@/components/background-task-detail' import { VersionHistoryPanel } from '@/components/version-history-panel' @@ -60,6 +65,7 @@ import { type ToolCall, createEmptyChatTabViewState, getWebSearchCardData, + getAppActionCardData, inferRunTitleFromMessage, isChatMessage, isErrorMessage, @@ -72,6 +78,9 @@ import { import { AgentScheduleConfig } from '@x/shared/dist/agent-schedule.js' import { AgentScheduleState } from '@x/shared/dist/agent-schedule-state.js' import { toast } from "sonner" +import { useVoiceMode } from '@/hooks/useVoiceMode' +import { useVoiceTTS } from '@/hooks/useVoiceTTS' +import { useMeetingTranscription, type MeetingTranscriptionState, type CalendarEventMeta } from '@/hooks/useMeetingTranscription' type DirEntry = z.infer type RunEventType = z.infer @@ -105,6 +114,7 @@ const TITLEBAR_TOGGLE_MARGIN_LEFT_PX = 12 const TITLEBAR_BUTTONS_COLLAPSED = 5 const TITLEBAR_BUTTON_GAPS_COLLAPSED = 4 const GRAPH_TAB_PATH = '__rowboat_graph_view__' +const BASES_DEFAULT_TAB_PATH = '__rowboat_bases_default__' const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)) @@ -232,6 +242,7 @@ const getAncestorDirectoryPaths = (path: string): string[] => { } const isGraphTabPath = (path: string) => path === GRAPH_TAB_PATH +const isBaseFilePath = (path: string) => path.endsWith('.base') || path === BASES_DEFAULT_TAB_PATH const normalizeUsage = (usage?: Partial | null): LanguageModelUsage | null => { if (!usage) return null @@ -250,10 +261,18 @@ const normalizeUsage = (usage?: Partial | null): LanguageMod } } -// Sort nodes (dirs first, then alphabetically) +// Pinned folders appear first in the sidebar (in this order) +const PINNED_FOLDERS = ['Notes'] + +// Sort nodes (dirs first, pinned folders at top, then alphabetically) function sortNodes(nodes: TreeNode[]): TreeNode[] { return nodes.sort((a, b) => { if (a.kind !== b.kind) return a.kind === 'dir' ? -1 : 1 + const aPinned = PINNED_FOLDERS.indexOf(a.name) + const bPinned = PINNED_FOLDERS.indexOf(b.name) + if (aPinned !== -1 && bPinned !== -1) return aPinned - bPinned + if (aPinned !== -1) return -1 + if (bPinned !== -1) return 1 return a.name.localeCompare(b.name) }).map(node => { if (node.children) { @@ -263,6 +282,73 @@ function sortNodes(nodes: TreeNode[]): TreeNode[] { }) } +/** + * Organize Meetings/ source folders into date-grouped subfolders. + * + * - rowboat: rowboat/2026-03-20/meeting-xxx.md → keeps date folders as-is + * - granola: granola/2026/03/18/Title.md → collapses into "2026-03-18" folders + * - Files directly under a source folder (no date subfolder) are grouped + * by the date prefix in their filename (e.g. meeting-2026-03-17T...). + */ +function flattenMeetingsTree(nodes: TreeNode[]): TreeNode[] { + return nodes.flatMap(node => { + if (node.kind !== 'dir' || node.name !== 'Meetings') return [node] + + const flattenedSourceChildren = (node.children ?? []).flatMap(sourceNode => { + if (sourceNode.kind !== 'dir') return [sourceNode] + + // Collect all files with their date group label + const dateGroups = new Map() + + function collectFiles(n: TreeNode, dateParts: string[]) { + for (const child of n.children ?? []) { + if (child.kind === 'file') { + const dateStr = dateParts.join('-') + // If file is at root of source folder, try to extract date from filename + const groupKey = dateStr || extractDateFromFilename(child.name) || 'other' + const group = dateGroups.get(groupKey) ?? [] + group.push(child) + dateGroups.set(groupKey, group) + } else if (child.kind === 'dir') { + collectFiles(child, [...dateParts, child.name]) + } + } + } + collectFiles(sourceNode, []) + + if (dateGroups.size === 0) return [] + + // Build date folder nodes, sorted reverse chronologically + const dateFolderNodes: TreeNode[] = [...dateGroups.entries()] + .sort(([a], [b]) => b.localeCompare(a)) + .map(([dateKey, files]) => { + // Sort files within each date group reverse chronologically + files.sort((a, b) => b.name.localeCompare(a.name)) + return { + name: dateKey, + path: `${sourceNode.path}/${dateKey}`, + kind: 'dir' as const, + children: files, + loaded: true, + } + }) + + return [{ ...sourceNode, children: dateFolderNodes }] + }) + + // Hide Meetings folder entirely if no source folders have files + if (flattenedSourceChildren.length === 0) return [] + + return [{ ...node, children: flattenedSourceChildren }] + }) +} + +/** Extract YYYY-MM-DD from filenames like "meeting-2026-03-17T05-01-47.md" */ +function extractDateFromFilename(name: string): string | null { + const match = name.match(/(\d{4}-\d{2}-\d{2})/) + return match ? match[1] : null +} + // Build tree structure from flat entries function buildTree(entries: DirEntry[]): TreeNode[] { const treeMap = new Map() @@ -324,6 +410,10 @@ function FixedSidebarToggle({ canNavigateForward, onNewChat, onOpenSearch, + meetingState, + meetingSummarizing, + meetingAvailable, + onToggleMeeting, leftInsetPx, }: { onNavigateBack: () => void @@ -332,6 +422,10 @@ function FixedSidebarToggle({ canNavigateForward: boolean onNewChat: () => void onOpenSearch: () => void + meetingState: MeetingTranscriptionState + meetingSummarizing: boolean + meetingAvailable: boolean + onToggleMeeting: () => void leftInsetPx: number }) { const { toggleSidebar, state } = useSidebar() @@ -367,6 +461,37 @@ function FixedSidebarToggle({ > + {meetingAvailable && ( + + + + + + {meetingSummarizing ? 'Generating meeting notes...' : meetingState === 'recording' ? 'Stop meeting notes' : 'Take new meeting notes'} + + + )} {/* Back / Forward navigation */} {isCollapsed && ( <> @@ -469,6 +594,7 @@ function App() { const [recentWikiFiles, setRecentWikiFiles] = useState([]) const [isGraphOpen, setIsGraphOpen] = useState(false) const [expandedFrom, setExpandedFrom] = useState<{ path: string | null; graph: boolean } | null>(null) + const [baseConfigByPath, setBaseConfigByPath] = useState>({}) const [graphData, setGraphData] = useState<{ nodes: GraphNode[]; edges: GraphEdge[] }>({ nodes: [], edges: [], @@ -494,6 +620,9 @@ function App() { const recentLocalMarkdownWritesRef = useRef>(new Map()) const untitledRenameReadyPathsRef = useRef>(new Set()) + // Pending app-navigation result to process once navigation functions are ready + const pendingAppNavRef = useRef | null>(null) + // Global navigation history (back/forward) across views (chat/file/graph/task) const historyRef = useRef<{ back: ViewState[]; forward: ViewState[] }>({ back: [], forward: [] }) const [viewHistory, setViewHistory] = useState(historyRef.current) @@ -509,6 +638,9 @@ function App() { const initialContentRef = useRef('') const renameInProgressRef = useRef(false) + // Frontmatter state: store raw frontmatter per file path + const frontmatterByPathRef = useRef>(new Map()) + // Version history state const [versionHistoryPath, setVersionHistoryPath] = useState(null) const [viewingHistoricalVersion, setViewingHistoricalVersion] = useState<{ @@ -533,6 +665,104 @@ function App() { const [agentId] = useState('copilot') const [presetMessage, setPresetMessage] = useState(undefined) + // Voice mode state + const [voiceAvailable, setVoiceAvailable] = useState(false) + const [ttsAvailable, setTtsAvailable] = useState(false) + const [ttsEnabled, setTtsEnabled] = useState(false) + const ttsEnabledRef = useRef(false) + const [ttsMode, setTtsMode] = useState<'summary' | 'full'>('summary') + const ttsModeRef = useRef<'summary' | 'full'>('summary') + const [isRecording, setIsRecording] = useState(false) + const voiceTextBufferRef = useRef('') + const spokenIndexRef = useRef(0) + const isRecordingRef = useRef(false) + + const tts = useVoiceTTS() + const ttsRef = useRef(tts) + ttsRef.current = tts + + const voice = useVoiceMode() + const voiceRef = useRef(voice) + voiceRef.current = voice + + const handleToggleMeetingRef = useRef<(() => void) | undefined>(undefined) + const meetingTranscription = useMeetingTranscription(() => { + handleToggleMeetingRef.current?.() + }) + + // Check if voice is available on mount and when OAuth state changes + const refreshVoiceAvailability = useCallback(() => { + Promise.all([ + window.ipc.invoke('voice:getConfig', null), + window.ipc.invoke('oauth:getState', null), + ]).then(([config, oauthState]) => { + const rowboatConnected = oauthState.config?.rowboat?.connected ?? false + setVoiceAvailable(!!config.deepgram || rowboatConnected) + setTtsAvailable(!!config.elevenlabs || rowboatConnected) + }).catch(() => { + setVoiceAvailable(false) + setTtsAvailable(false) + }) + }, []) + + useEffect(() => { + refreshVoiceAvailability() + const cleanup = window.ipc.on('oauth:didConnect', () => { + refreshVoiceAvailability() + }) + return cleanup + }, [refreshVoiceAvailability]) + + const handleStartRecording = useCallback(() => { + setIsRecording(true) + isRecordingRef.current = true + voice.start() + }, [voice]) + + const handlePromptSubmitRef = useRef<((message: PromptInputMessage, mentions?: FileMention[], stagedAttachments?: StagedAttachment[], searchEnabled?: boolean) => Promise) | null>(null) + const pendingVoiceInputRef = useRef(false) + + const handleSubmitRecording = useCallback(() => { + const text = voice.submit() + setIsRecording(false) + isRecordingRef.current = false + if (text) { + pendingVoiceInputRef.current = true + handlePromptSubmitRef.current?.({ text, files: [] }) + } + }, [voice]) + + const handleToggleTts = useCallback(() => { + setTtsEnabled(prev => { + const next = !prev + ttsEnabledRef.current = next + if (!next) { + ttsRef.current.cancel() + } + return next + }) + }, []) + + const handleTtsModeChange = useCallback((mode: 'summary' | 'full') => { + setTtsMode(mode) + ttsModeRef.current = mode + }, []) + + const handleCancelRecording = useCallback(() => { + voice.cancel() + setIsRecording(false) + isRecordingRef.current = false + }, [voice]) + + // Helper to cancel recording from any navigation handler + const cancelRecordingIfActive = useCallback(() => { + if (isRecordingRef.current) { + voiceRef.current.cancel() + setIsRecording(false) + isRecordingRef.current = false + } + }, []) + // Runs history state type RunListItem = { id: string; title?: string; createdAt: string; agentId: string } const [runs, setRuns] = useState([]) @@ -616,6 +846,8 @@ function App() { const getFileTabTitle = useCallback((tab: FileTab) => { if (isGraphTabPath(tab.path)) return 'Graph View' + if (tab.path === BASES_DEFAULT_TAB_PATH) return 'Bases' + if (tab.path.endsWith('.base')) return tab.path.split('/').pop()?.replace(/\.base$/i, '') || 'Base' return tab.path.split('/').pop()?.replace(/\.md$/i, '') || tab.path }, []) @@ -813,20 +1045,47 @@ function App() { } }, [runId, processingRunIds]) - // Load directory tree + // Load directory tree (knowledge + bases) const loadDirectory = useCallback(async () => { try { - const result = await window.ipc.invoke('workspace:readdir', { - path: 'knowledge', - opts: { recursive: true, includeHidden: false } - }) - return buildTree(result) + const [knowledgeResult, basesResult] = await Promise.all([ + window.ipc.invoke('workspace:readdir', { + path: 'knowledge', + opts: { recursive: true, includeHidden: false, includeStats: true } + }), + window.ipc.invoke('workspace:readdir', { + path: 'bases', + opts: { recursive: false, includeHidden: false, includeStats: true } + }).catch(() => [] as DirEntry[]), + ]) + const knowledgeTree = flattenMeetingsTree(buildTree(knowledgeResult)) + const basesChildren: TreeNode[] = (basesResult as DirEntry[]) + .filter((e) => e.name.endsWith('.base')) + .map((e) => ({ ...e, kind: 'file' as const })) + if (basesChildren.length > 0) { + const basesFolder: TreeNode = { + name: 'Bases', + path: 'bases', + kind: 'dir', + children: basesChildren, + } + return [...knowledgeTree, basesFolder] + } + return knowledgeTree } catch (err) { console.error('Failed to load directory:', err) return [] } }, []) + // Ensure bases/ and knowledge/Notes/ directories exist on startup + useEffect(() => { + window.ipc.invoke('workspace:mkdir', { path: 'bases', recursive: true }) + .catch((err: unknown) => console.error('Failed to ensure bases directory:', err)) + window.ipc.invoke('workspace:mkdir', { path: 'knowledge/Notes', recursive: true }) + .catch((err: unknown) => console.error('Failed to ensure Notes directory:', err)) + }, []) + // Load initial tree useEffect(() => { loadDirectory().then(setTree) @@ -892,12 +1151,14 @@ function App() { const result = await window.ipc.invoke('workspace:readFile', { path: pathToReload }) if (selectedPathRef.current !== pathToReload) return setFileContent(result.data) - setEditorContent(result.data) - setEditorCacheForPath(pathToReload, result.data) - editorContentRef.current = result.data + const { raw: fm, body } = splitFrontmatter(result.data) + frontmatterByPathRef.current.set(pathToReload, fm) + setEditorContent(body) + setEditorCacheForPath(pathToReload, body) + editorContentRef.current = body editorPathRef.current = pathToReload - initialContentByPathRef.current.set(pathToReload, result.data) - initialContentRef.current = result.data + initialContentByPathRef.current.set(pathToReload, body) + initialContentRef.current = body } } }) @@ -915,6 +1176,31 @@ function App() { setLastSaved(null) return } + if (selectedPath === BASES_DEFAULT_TAB_PATH) { + // Virtual default base — no file to load, use DEFAULT_BASE_CONFIG + if (!baseConfigByPath[selectedPath]) { + setBaseConfigByPath((prev) => ({ ...prev, [selectedPath]: { ...DEFAULT_BASE_CONFIG } })) + } + return + } + if (selectedPath.endsWith('.base')) { + // Load base config from file only if not already cached + if (!baseConfigByPath[selectedPath]) { + window.ipc.invoke('workspace:readFile', { path: selectedPath, encoding: 'utf8' }) + .then((result: { data: string }) => { + try { + const parsed = JSON.parse(result.data) as BaseConfig + setBaseConfigByPath((prev) => ({ ...prev, [selectedPath]: parsed })) + } catch { + setBaseConfigByPath((prev) => ({ ...prev, [selectedPath]: { ...DEFAULT_BASE_CONFIG } })) + } + }) + .catch(() => { + setBaseConfigByPath((prev) => ({ ...prev, [selectedPath]: { ...DEFAULT_BASE_CONFIG } })) + }) + } + return + } if (selectedPath.endsWith('.md')) { const cachedContent = editorContentByPathRef.current.get(selectedPath) const hasBaseline = initialContentByPathRef.current.has(selectedPath) @@ -934,39 +1220,46 @@ function App() { let cancelled = false ;(async () => { try { - const stat = await window.ipc.invoke('workspace:stat', { path: pathToLoad }) - if (cancelled || fileLoadRequestIdRef.current !== requestId || selectedPathRef.current !== pathToLoad) return - if (stat.kind === 'file') { - const result = await window.ipc.invoke('workspace:readFile', { path: pathToLoad }) + // For .md files (from the knowledge tree), skip stat and read directly. + // For other file types, stat first to check if it's a file vs directory. + const isKnownFile = pathToLoad.endsWith('.md') + if (!isKnownFile) { + const stat = await window.ipc.invoke('workspace:stat', { path: pathToLoad }) if (cancelled || fileLoadRequestIdRef.current !== requestId || selectedPathRef.current !== pathToLoad) return - setFileContent(result.data) - const normalizeForCompare = (s: string) => s.split('\n').map(line => line.trimEnd()).join('\n').trim() - const isSameEditorFile = editorPathRef.current === pathToLoad - const knownBaseline = initialContentByPathRef.current.get(pathToLoad) - const hasKnownBaseline = knownBaseline !== undefined - const hasUnsavedEdits = - hasKnownBaseline - && normalizeForCompare(editorContentRef.current) !== normalizeForCompare(knownBaseline) - const shouldPreserveActiveDraft = isSameEditorFile && hasUnsavedEdits - if (!shouldPreserveActiveDraft) { - setEditorContent(result.data) - if (pathToLoad.endsWith('.md')) { - setEditorCacheForPath(pathToLoad, result.data) - } - editorContentRef.current = result.data - editorPathRef.current = pathToLoad - initialContentByPathRef.current.set(pathToLoad, result.data) - initialContentRef.current = result.data - setLastSaved(null) - } else { - // Still update the editor's path so subsequent autosaves write to the correct file. - editorPathRef.current = pathToLoad + if (stat.kind !== 'file') { + setFileContent('') + setEditorContent('') + editorContentRef.current = '' + initialContentRef.current = '' + return } + } + const result = await window.ipc.invoke('workspace:readFile', { path: pathToLoad }) + if (cancelled || fileLoadRequestIdRef.current !== requestId || selectedPathRef.current !== pathToLoad) return + setFileContent(result.data) + const { raw: fm, body } = splitFrontmatter(result.data) + frontmatterByPathRef.current.set(pathToLoad, fm) + const normalizeForCompare = (s: string) => s.split('\n').map(line => line.trimEnd()).join('\n').trim() + const isSameEditorFile = editorPathRef.current === pathToLoad + const knownBaseline = initialContentByPathRef.current.get(pathToLoad) + const hasKnownBaseline = knownBaseline !== undefined + const hasUnsavedEdits = + hasKnownBaseline + && normalizeForCompare(editorContentRef.current) !== normalizeForCompare(knownBaseline) + const shouldPreserveActiveDraft = isSameEditorFile && hasUnsavedEdits + if (!shouldPreserveActiveDraft) { + setEditorContent(body) + if (pathToLoad.endsWith('.md')) { + setEditorCacheForPath(pathToLoad, body) + } + editorContentRef.current = body + editorPathRef.current = pathToLoad + initialContentByPathRef.current.set(pathToLoad, body) + initialContentRef.current = body + setLastSaved(null) } else { - setFileContent('') - setEditorContent('') - editorContentRef.current = '' - initialContentRef.current = '' + // Still update the editor's path so subsequent autosaves write to the correct file. + editorPathRef.current = pathToLoad } } catch (err) { console.error('Failed to load file:', err) @@ -1006,7 +1299,7 @@ function App() { const wasActiveAtStart = selectedPathRef.current === pathAtStart if (wasActiveAtStart) setIsSaving(true) let pathToSave = pathAtStart - let contentToSave = debouncedContent + let contentToSave = joinFrontmatter(frontmatterByPathRef.current.get(pathAtStart) ?? null, debouncedContent) let renamedFrom: string | null = null let renamedTo: string | null = null try { @@ -1036,16 +1329,21 @@ function App() { renameInProgressRef.current = true await window.ipc.invoke('workspace:rename', { from: pathAtStart, to: targetPath }) pathToSave = targetPath - contentToSave = rewriteWikiLinksForRenamedFileInMarkdown( + const rewrittenBody = rewriteWikiLinksForRenamedFileInMarkdown( debouncedContent, pathAtStart, targetPath ) + contentToSave = joinFrontmatter(frontmatterByPathRef.current.get(pathAtStart) ?? null, rewrittenBody) renamedFrom = pathAtStart renamedTo = targetPath editorPathRef.current = targetPath untitledRenameReadyPathsRef.current.delete(pathAtStart) setFileTabs(prev => prev.map(tab => (tab.path === pathAtStart ? { ...tab, path: targetPath } : tab))) + // Migrate frontmatter entry + const fmEntry = frontmatterByPathRef.current.get(pathAtStart) + frontmatterByPathRef.current.delete(pathAtStart) + frontmatterByPathRef.current.set(targetPath, fmEntry ?? null) initialContentByPathRef.current.delete(pathAtStart) const cachedContent = editorContentByPathRef.current.get(pathAtStart) if (cachedContent !== undefined) { @@ -1070,8 +1368,9 @@ function App() { }) } if (selectedPathRef.current === pathAtStart) { - editorContentRef.current = contentToSave - setEditorContent(contentToSave) + const bodyForEditor = splitFrontmatter(contentToSave).body + editorContentRef.current = bodyForEditor + setEditorContent(bodyForEditor) } } } @@ -1083,7 +1382,8 @@ function App() { opts: { encoding: 'utf8' } }) markRecentLocalMarkdownWrite(pathToSave) - initialContentByPathRef.current.set(pathToSave, contentToSave) + // Store body-only baseline (matches what debouncedContent compares against) + initialContentByPathRef.current.set(pathToSave, splitFrontmatter(contentToSave).body) // If we renamed the active file, update state/history AFTER the write completes so the editor // doesn't reload stale on-disk content mid-typing (which can drop the latest character). @@ -1104,7 +1404,7 @@ function App() { // Only update "current file" UI state if we're still on this file if (selectedPathRef.current === pathAtStart || selectedPathRef.current === pathToSave) { - initialContentRef.current = contentToSave + initialContentRef.current = splitFrontmatter(contentToSave).body setLastSaved(new Date()) } } catch (err) { @@ -1415,6 +1715,9 @@ function App() { if (!isActiveRun) return setIsProcessing(true) setModelUsage(null) + // Reset voice buffer for new response + voiceTextBufferRef.current = '' + spokenIndexRef.current = 0 break case 'run-processing-end': @@ -1464,6 +1767,20 @@ function App() { if (llmEvent.type === 'text-delta' && llmEvent.delta) { appendStreamingBuffer(event.runId, llmEvent.delta) setCurrentAssistantMessage(prev => prev + llmEvent.delta) + + // Extract tags and send to TTS when enabled + voiceTextBufferRef.current += llmEvent.delta + const remaining = voiceTextBufferRef.current.substring(spokenIndexRef.current) + const voiceRegex = /([\s\S]*?)<\/voice>/g + let voiceMatch: RegExpExecArray | null + while ((voiceMatch = voiceRegex.exec(remaining)) !== null) { + const voiceContent = voiceMatch[1].trim() + console.log('[voice] extracted voice tag:', voiceContent) + if (voiceContent && ttsEnabledRef.current) { + ttsRef.current.speak(voiceContent) + } + spokenIndexRef.current += voiceMatch.index + voiceMatch[0].length + } } else if (llmEvent.type === 'tool-call') { setConversation(prev => [...prev, { id: llmEvent.toolCallId || `tool-${Date.now()}`, @@ -1503,6 +1820,7 @@ function App() { if (msg.role === 'assistant') { setCurrentAssistantMessage(currentMsg => { if (currentMsg) { + const cleanedContent = currentMsg.replace(/<\/?voice>/g, '') setConversation(prev => { const exists = prev.some(m => m.id === event.messageId && 'role' in m && m.role === 'assistant' @@ -1511,7 +1829,7 @@ function App() { return [...prev, { id: event.messageId, role: 'assistant', - content: currentMsg, + content: cleanedContent, timestamp: Date.now(), }] }) @@ -1584,6 +1902,15 @@ function App() { } return next }) + + // Handle app-navigation tool results — trigger UI side effects + if (event.toolName === 'app-navigation') { + const result = event.result as { success?: boolean; action?: string; [key: string]: unknown } | undefined + if (result?.success) { + pendingAppNavRef.current = result + } + } + break } @@ -1701,7 +2028,8 @@ function App() { const handlePromptSubmit = async ( message: PromptInputMessage, mentions?: FileMention[], - stagedAttachments: StagedAttachment[] = [] + stagedAttachments: StagedAttachment[] = [], + searchEnabled?: boolean, ) => { if (isProcessing) return @@ -1797,6 +2125,9 @@ function App() { await window.ipc.invoke('runs:createMessage', { runId: currentRunId, message: attachmentPayload, + voiceInput: pendingVoiceInputRef.current || undefined, + voiceOutput: ttsEnabledRef.current ? ttsModeRef.current : undefined, + searchEnabled: searchEnabled || undefined, }) } else { // Legacy path: plain string with optional XML-formatted @mentions. @@ -1825,11 +2156,16 @@ function App() { await window.ipc.invoke('runs:createMessage', { runId: currentRunId, message: formattedMessage, + voiceInput: pendingVoiceInputRef.current || undefined, + voiceOutput: ttsEnabledRef.current ? ttsModeRef.current : undefined, + searchEnabled: searchEnabled || undefined, }) titleSource = formattedMessage } + pendingVoiceInputRef.current = false + if (isNewRun) { const inferredTitle = inferRunTitleFromMessage(titleSource) setRuns((prev) => { @@ -1846,6 +2182,7 @@ function App() { console.error('Failed to send message:', error) } } + handlePromptSubmitRef.current = handlePromptSubmit const handleStop = useCallback(async () => { if (!runId) return @@ -1975,6 +2312,7 @@ function App() { }, []) const openChatInNewTab = useCallback((targetRunId: string) => { + cancelRecordingIfActive() const existingTab = chatTabs.find(t => t.runId === targetRunId) if (existingTab) { // Cancel stale in-flight loads from previously focused tabs. @@ -1990,12 +2328,18 @@ function App() { setChatTabs(prev => [...prev, { id, runId: targetRunId }]) setActiveChatTabId(id) loadRun(targetRunId) - }, [chatTabs, loadRun, restoreChatTabState]) + }, [chatTabs, loadRun, restoreChatTabState, cancelRecordingIfActive]) const switchChatTab = useCallback((tabId: string) => { const tab = chatTabs.find(t => t.id === tabId) if (!tab) return if (tabId === activeChatTabId) return + // Cancel any active recording when switching tabs + if (isRecordingRef.current) { + voiceRef.current.cancel() + setIsRecording(false) + isRecordingRef.current = false + } saveChatScrollForTab(activeChatTabId) // Cancel stale in-flight loads from previously focused tabs. loadRunRequestIdRef.current += 1 @@ -2158,21 +2502,29 @@ function App() { const closeFileTab = useCallback((tabId: string) => { const closingTab = fileTabs.find(t => t.id === tabId) - if (closingTab && !isGraphTabPath(closingTab.path)) { + if (closingTab && !isGraphTabPath(closingTab.path) && !isBaseFilePath(closingTab.path)) { removeEditorCacheForPath(closingTab.path) initialContentByPathRef.current.delete(closingTab.path) untitledRenameReadyPathsRef.current.delete(closingTab.path) + frontmatterByPathRef.current.delete(closingTab.path) if (editorPathRef.current === closingTab.path) { editorPathRef.current = null } } + if (closingTab && isBaseFilePath(closingTab.path)) { + setBaseConfigByPath((prev) => { + const next = { ...prev } + delete next[closingTab.path] + return next + }) + } setFileTabs(prev => { if (prev.length <= 1) { // Last file tab - close it and go back to chat setActiveFileTabId(null) setSelectedPath(null) setIsGraphOpen(false) - return [] + return [] } const idx = prev.findIndex(t => t.id === tabId) if (idx === -1) return prev @@ -2186,7 +2538,7 @@ function App() { setIsGraphOpen(true) } else { setIsGraphOpen(false) - setSelectedPath(newActiveTab.path) + setSelectedPath(newActiveTab.path) } } return next @@ -2294,7 +2646,7 @@ function App() { if (activeFileTabId) { const activeTab = fileTabs.find((tab) => tab.id === activeFileTabId) - if (activeTab && !isGraphTabPath(activeTab.path)) { + if (activeTab && !isGraphTabPath(activeTab.path) && !isBaseFilePath(activeTab.path)) { setFileTabs((prev) => prev.map((tab) => ( tab.id === activeFileTabId ? { ...tab, path } : tab ))) @@ -2373,13 +2725,14 @@ function App() { const current = currentViewState if (viewStatesEqual(current, nextView)) return + cancelRecordingIfActive() const nextHistory = { back: appendUnique(historyRef.current.back, current), forward: [] as ViewState[], } setHistory(nextHistory) await applyViewState(nextView) - }, [appendUnique, applyViewState, currentViewState, setHistory]) + }, [appendUnique, applyViewState, cancelRecordingIfActive, currentViewState, setHistory]) const navigateBack = useCallback(async () => { const { back, forward } = historyRef.current @@ -2439,6 +2792,146 @@ function App() { void navigateToView({ type: 'file', path }) }, [navigateToView]) + const handleBaseConfigChange = useCallback((path: string, config: BaseConfig) => { + setBaseConfigByPath((prev) => ({ ...prev, [path]: config })) + }, []) + + const handleBaseSave = useCallback(async (name: string | null) => { + if (!selectedPath) return + const isDefault = selectedPath === BASES_DEFAULT_TAB_PATH + const config = baseConfigByPath[selectedPath] ?? DEFAULT_BASE_CONFIG + + if (isDefault && name) { + // Save as new base file + const safeName = name.replace(/[\\/]/g, '-').trim() + const newPath = `bases/${safeName}.base` + const fileConfig = { ...config, name: safeName } + try { + await window.ipc.invoke('workspace:writeFile', { + path: newPath, + data: JSON.stringify(fileConfig, null, 2), + }) + setBaseConfigByPath((prev) => ({ ...prev, [newPath]: fileConfig })) + // Refresh tree then navigate to the new file + const newTree = await loadDirectory() + setTree(newTree) + void navigateToView({ type: 'file', path: newPath }) + } catch (err) { + console.error('Failed to save base:', err) + } + } else if (!isDefault) { + // Save in place + try { + await window.ipc.invoke('workspace:writeFile', { + path: selectedPath, + data: JSON.stringify(config, null, 2), + }) + } catch (err) { + console.error('Failed to save base:', err) + } + } + }, [selectedPath, baseConfigByPath, loadDirectory, navigateToView]) + + // External search set by app-navigation tool (passed to BasesView) + const [externalBaseSearch, setExternalBaseSearch] = useState(undefined) + + // Process pending app-navigation results + useEffect(() => { + const result = pendingAppNavRef.current + if (!result) return + pendingAppNavRef.current = null + + switch (result.action) { + case 'open-note': + navigateToFile(result.path as string) + break + case 'open-view': + if (result.view === 'graph') void navigateToView({ type: 'graph' }) + if (result.view === 'bases') { + void navigateToView({ type: 'file', path: BASES_DEFAULT_TAB_PATH }) + } + break + case 'update-base-view': { + // Navigate to bases if not already there + const targetPath = selectedPath && isBaseFilePath(selectedPath) ? selectedPath : BASES_DEFAULT_TAB_PATH + if (!selectedPath || !isBaseFilePath(selectedPath)) { + void navigateToView({ type: 'file', path: BASES_DEFAULT_TAB_PATH }) + } + + // Apply updates to the base config + const updates = result.updates as Record | undefined + if (updates) { + setBaseConfigByPath(prev => { + const current = prev[targetPath] ?? { ...DEFAULT_BASE_CONFIG } + const next = { ...current } + + // Apply filter updates + const filterUpdates = updates.filters as Record | undefined + if (filterUpdates) { + if (filterUpdates.clear) { + next.filters = [] + } + if (filterUpdates.set) { + next.filters = filterUpdates.set as Array<{ category: string; value: string }> + } + if (filterUpdates.add) { + const toAdd = filterUpdates.add as Array<{ category: string; value: string }> + const existing = next.filters + for (const f of toAdd) { + if (!existing.some(e => e.category === f.category && e.value === f.value)) { + existing.push(f) + } + } + } + if (filterUpdates.remove) { + const toRemove = filterUpdates.remove as Array<{ category: string; value: string }> + next.filters = next.filters.filter( + e => !toRemove.some(r => r.category === e.category && r.value === e.value) + ) + } + } + + // Apply column updates + const colUpdates = updates.columns as Record | undefined + if (colUpdates) { + if (colUpdates.set) { + next.visibleColumns = colUpdates.set as string[] + } + if (colUpdates.add) { + const toAdd = colUpdates.add as string[] + for (const col of toAdd) { + if (!next.visibleColumns.includes(col)) next.visibleColumns.push(col) + } + } + if (colUpdates.remove) { + const toRemove = new Set(colUpdates.remove as string[]) + next.visibleColumns = next.visibleColumns.filter(c => !toRemove.has(c)) + } + } + + // Apply sort + if (updates.sort) { + next.sort = updates.sort as { field: string; dir: 'asc' | 'desc' } + } + + return { ...prev, [targetPath]: next } + }) + + // Apply search externally + if (updates.search !== undefined) { + setExternalBaseSearch(updates.search as string || undefined) + } + } + break + } + case 'create-base': + if (result.path) { + navigateToFile(result.path as string) + } + break + } + }) + const navigateToFullScreenChat = useCallback(() => { // Only treat this as navigation when coming from another view if (currentViewState.type !== 'chat') { @@ -2709,7 +3202,7 @@ function App() { }, []) const knowledgeActions = React.useMemo(() => ({ - createNote: async (parentPath: string = 'knowledge') => { + createNote: async (parentPath: string = 'knowledge/Notes') => { try { let index = 0 let name = untitledBaseName @@ -2732,7 +3225,7 @@ function App() { throw err } }, - createFolder: async (parentPath: string = 'knowledge') => { + createFolder: async (parentPath: string = 'knowledge/Notes') => { try { await window.ipc.invoke('workspace:mkdir', { path: `${parentPath}/new-folder-${Date.now()}`, @@ -2751,6 +3244,13 @@ function App() { } void navigateToView({ type: 'graph' }) }, + openBases: () => { + if (!selectedPath && !isGraphOpen && !selectedBackgroundTask) { + setIsChatSidebarOpen(false) + setIsRightPaneMaximized(false) + } + void navigateToView({ type: 'file', path: BASES_DEFAULT_TAB_PATH }) + }, expandAll: () => setExpandedPaths(new Set(collectDirPaths(tree))), collapseAll: () => setExpandedPaths(new Set()), rename: async (oldPath: string, newName: string, isDir: boolean) => { @@ -2768,6 +3268,12 @@ function App() { if (editorPathRef.current === oldPath) { editorPathRef.current = newPath } + // Migrate frontmatter entry + const fmEntry = frontmatterByPathRef.current.get(oldPath) + if (fmEntry !== undefined) { + frontmatterByPathRef.current.delete(oldPath) + frontmatterByPathRef.current.set(newPath, fmEntry) + } const baseline = initialContentByPathRef.current.get(oldPath) if (baseline !== undefined) { initialContentByPathRef.current.delete(oldPath) @@ -2805,6 +3311,7 @@ function App() { removeEditorCacheForPath(path) initialContentByPathRef.current.delete(path) untitledRenameReadyPathsRef.current.delete(path) + frontmatterByPathRef.current.delete(path) } // Close any file tab showing the deleted file const tabForFile = fileTabs.find(t => t.path === path) @@ -2845,9 +3352,157 @@ function App() { return newSet }) - // Select the file to show it in the editor + // If tab already exists for this path (e.g. second call after transcription), + // force a content reload instead of creating a duplicate tab. + const existingTab = fileTabs.find(tab => tab.path === notePath) + if (existingTab) { + setActiveFileTabId(existingTab.id) + // Read fresh content from disk and update the editor + try { + const result = await window.ipc.invoke('workspace:readFile', { path: notePath, encoding: 'utf8' }) + const { raw: fm, body } = splitFrontmatter(result.data) + frontmatterByPathRef.current.set(notePath, fm) + setFileContent(body) + setEditorContent(body) + editorContentRef.current = body + editorPathRef.current = notePath + initialContentRef.current = body + initialContentByPathRef.current.set(notePath, body) + setEditorContentByPath(prev => ({ ...prev, [notePath]: body })) + editorContentByPathRef.current.set(notePath, body) + // Bump editor session to force TipTap to pick up the new content + setEditorSessionByTabId(prev => ({ + ...prev, + [existingTab.id]: (prev[existingTab.id] ?? 0) + 1, + })) + } catch { + // File read failed — ignore + } + return + } + + // First call — open the file in a tab navigateToFile(notePath) - }, [loadDirectory, navigateToFile]) + }, [loadDirectory, navigateToFile, fileTabs]) + + const meetingNotePathRef = useRef(null) + const pendingCalendarEventRef = useRef(undefined) + const [meetingSummarizing, setMeetingSummarizing] = useState(false) + const [showMeetingPermissions, setShowMeetingPermissions] = useState(false) + + const startMeetingAfterPermissions = useCallback(async () => { + setShowMeetingPermissions(false) + localStorage.setItem('meeting-permissions-acknowledged', '1') + const calEvent = pendingCalendarEventRef.current + pendingCalendarEventRef.current = undefined + const notePath = await meetingTranscription.start(calEvent) + if (notePath) { + meetingNotePathRef.current = notePath + await handleVoiceNoteCreated(notePath) + } + }, [meetingTranscription, handleVoiceNoteCreated]) + + const handleToggleMeeting = useCallback(async () => { + if (meetingTranscription.state === 'recording') { + await meetingTranscription.stop() + + // Read the final transcript and generate meeting notes via LLM + const notePath = meetingNotePathRef.current + if (notePath) { + setMeetingSummarizing(true) + try { + const result = await window.ipc.invoke('workspace:readFile', { path: notePath, encoding: 'utf8' }) + const fileContent = result.data + if (fileContent && fileContent.trim()) { + // Extract meeting start time and calendar event from frontmatter + const dateMatch = fileContent.match(/^date:\s*"(.+)"$/m) + const meetingStartTime = dateMatch?.[1] + // If a calendar event was linked, pass it directly so the summarizer + // skips scanning and uses this event for attendee/title info. + const calEventMatch = fileContent.match(/^calendar_event:\s*'(.+)'$/m) + const calendarEventJson = calEventMatch?.[1]?.replace(/''/g, "'") + const { notes } = await window.ipc.invoke('meeting:summarize', { transcript: fileContent, meetingStartTime, calendarEventJson }) + if (notes) { + // Prepend meeting notes below the title but above the transcript + const { raw: fm, body: transcriptBody } = splitFrontmatter(fileContent) + // Use frontmatter title as the heading (set from calendar event summary) + const fmTitleMatch = fileContent.match(/^title:\s*(.+)$/m) + const noteTitle = fmTitleMatch?.[1]?.trim() || 'Meeting note' + // Strip any existing top-level heading from body + const bodyWithoutTitle = transcriptBody.replace(/^#\s+.+\s*\n*/, '') + // Also strip any title/heading the LLM may have generated + const cleanedNotes = notes.replace(/^#{1,2}\s+.+\n+/, '') + const newBody = `# ${noteTitle}\n\n` + cleanedNotes + '\n\n---\n\n## Raw transcript\n\n' + bodyWithoutTitle + const newContent = fm ? `${fm}\n${newBody}` : newBody + await window.ipc.invoke('workspace:writeFile', { + path: notePath, + data: newContent, + opts: { encoding: 'utf8' }, + }) + // Refresh the file view + await handleVoiceNoteCreated(notePath) + } + } + } catch (err) { + console.error('[meeting] Failed to generate meeting notes:', err) + } + setMeetingSummarizing(false) + meetingNotePathRef.current = null + } + } else if (meetingTranscription.state === 'idle') { + // Show permissions modal on first use (macOS only — Windows works out of the box) + if (isMac && !localStorage.getItem('meeting-permissions-acknowledged')) { + setShowMeetingPermissions(true) + return + } + const calEvent = pendingCalendarEventRef.current + pendingCalendarEventRef.current = undefined + const notePath = await meetingTranscription.start(calEvent) + if (notePath) { + meetingNotePathRef.current = notePath + await handleVoiceNoteCreated(notePath) + } + } + }, [meetingTranscription, handleVoiceNoteCreated]) + handleToggleMeetingRef.current = handleToggleMeeting + + // Listen for calendar block "join meeting & take notes" events + useEffect(() => { + const handler = () => { + // Read calendar event data set by the calendar block on window + const pending = window.__pendingCalendarEvent + window.__pendingCalendarEvent = undefined + if (pending) { + pendingCalendarEventRef.current = { + summary: pending.summary, + start: pending.start, + end: pending.end, + location: pending.location, + htmlLink: pending.htmlLink, + conferenceLink: pending.conferenceLink, + source: pending.source, + } + } + // Use the same toggle flow — it will pick up pendingCalendarEventRef + handleToggleMeetingRef.current?.() + } + window.addEventListener('calendar-block:join-meeting', handler) + return () => window.removeEventListener('calendar-block:join-meeting', handler) + }, []) + + // Email block: draft with assistant + useEffect(() => { + const handler = () => { + const pending = window.__pendingEmailDraft + if (pending) { + setPresetMessage(pending.prompt) + setIsChatSidebarOpen(true) + window.__pendingEmailDraft = undefined + } + } + window.addEventListener('email-block:draft-with-assistant', handler) + return () => window.removeEventListener('email-block:draft-with-assistant', handler) + }, []) const ensureWikiFile = useCallback(async (wikiPath: string) => { const resolvedPath = toKnowledgePath(wikiPath) @@ -2901,12 +3556,17 @@ function App() { return } - const nodeSet = new Set(knowledgeFilePaths) + const graphFilePaths = knowledgeFilePaths.filter((p) => { + const normalized = stripKnowledgePrefix(p) + return !normalized.toLowerCase().startsWith('meetings/') + }) + + const nodeSet = new Set(graphFilePaths) const edges: GraphEdge[] = [] const edgeKeys = new Set() const contents = await Promise.all( - knowledgeFilePaths.map(async (path) => { + graphFilePaths.map(async (path) => { try { const result = await window.ipc.invoke('workspace:readFile', { path }) return { path, data: result.data as string } @@ -2965,7 +3625,7 @@ function App() { } } - const nodes = knowledgeFilePaths.map((path) => { + const nodes = graphFilePaths.map((path) => { const degree = degreeMap.get(path) ?? 0 const radius = 6 + Math.min(18, degree * 2) const { group, depth } = getNodeGroup(path) @@ -3046,6 +3706,10 @@ function App() { } if (isToolCall(item)) { + const appActionData = getAppActionCardData(item) + if (appActionData) { + return + } const webSearchData = getWebSearchCardData(item) if (webSearchData) { return ( @@ -3135,7 +3799,11 @@ function App() { return ( - + { + if (section === 'knowledge' && !selectedPath && !isGraphOpen) { + void navigateToView({ type: 'file', path: BASES_DEFAULT_TAB_PATH }) + } + }}>
    {/* Content sidebar with SidebarProvider for collapse functionality */} { + cancelRecordingIfActive() if (selectedPath || isGraphOpen) { setIsChatSidebarOpen(true) } @@ -3243,7 +3912,7 @@ function App() { getTabId={(t) => t.id} onSwitchTab={switchFileTab} onCloseTab={closeFileTab} - allowSingleTabClose={fileTabs.length === 1 && isGraphOpen} + allowSingleTabClose={fileTabs.length === 1 && (isGraphOpen || (selectedPath != null && isBaseFilePath(selectedPath)))} /> ) : ( )} - {selectedPath && ( + {selectedPath && selectedPath.endsWith('.md') && (
    {isSaving ? ( <> @@ -3345,7 +4014,20 @@ function App() { )} - {isGraphOpen ? ( + {selectedPath && isBaseFilePath(selectedPath) ? ( +
    + navigateToFile(path)} + config={baseConfigByPath[selectedPath] ?? DEFAULT_BASE_CONFIG} + onConfigChange={(cfg) => handleBaseConfigChange(selectedPath, cfg)} + isDefaultBase={selectedPath === BASES_DEFAULT_TAB_PATH} + onSave={(name) => void handleBaseSave(name)} + externalSearch={externalBaseSearch} + onExternalSearchConsumed={() => setExternalBaseSearch(undefined)} + /> +
    + ) : isGraphOpen ? (
    { if (!isViewingHistory) handleEditorChange(tab.path, markdown) }} onPrimaryHeadingCommit={() => { untitledRenameReadyPathsRef.current.add(tab.path) @@ -3391,6 +4074,20 @@ function App() { wikiLinks={wikiLinkConfig} onImageUpload={handleImageUpload} editorSessionKey={editorSessionByTabId[tab.id] ?? 0} + frontmatter={frontmatterByPathRef.current.get(tab.path) ?? null} + onFrontmatterChange={(newRaw) => { + frontmatterByPathRef.current.set(tab.path, newRaw) + // Write updated frontmatter to disk immediately + const currentBody = editorContentRef.current + const fullContent = joinFrontmatter(newRaw, currentBody) + initialContentByPathRef.current.set(tab.path, splitFrontmatter(fullContent).body) + initialContentRef.current = splitFrontmatter(fullContent).body + void window.ipc.invoke('workspace:writeFile', { + path: tab.path, + data: fullContent, + opts: { encoding: 'utf8' }, + }) + }} onHistoryHandlersChange={(handlers) => { if (handlers) { fileHistoryHandlersRef.current.set(tab.id, handlers) @@ -3399,6 +4096,15 @@ function App() { } }} editable={!isViewingHistory} + onExport={async (format) => { + const markdown = tabContent + const title = getBaseName(tab.path) + try { + await window.ipc.invoke('export:note', { markdown, format, title }) + } catch (err) { + console.error('Export failed:', err) + } + }} />
    ) @@ -3531,7 +4237,7 @@ function App() { {tabState.currentAssistantMessage && ( - {tabState.currentAssistantMessage} + {tabState.currentAssistantMessage.replace(/<\/?voice>/g, '')} )} @@ -3582,6 +4288,18 @@ function App() { runId={tabState.runId} initialDraft={chatDraftsRef.current.get(tab.id)} onDraftChange={(text) => setChatDraftForTab(tab.id, text)} + isRecording={isActive && isRecording} + recordingText={isActive ? voice.interimText : undefined} + recordingState={isActive ? (voice.state === 'connecting' ? 'connecting' : 'listening') : undefined} + onStartRecording={isActive ? handleStartRecording : undefined} + onSubmitRecording={isActive ? handleSubmitRecording : undefined} + onCancelRecording={isActive ? handleCancelRecording : undefined} + voiceAvailable={isActive && voiceAvailable} + ttsAvailable={isActive && ttsAvailable} + ttsEnabled={ttsEnabled} + ttsMode={ttsMode} + onToggleTts={isActive ? handleToggleTts : undefined} + onTtsModeChange={isActive ? handleTtsModeChange : undefined} />
    ) @@ -3631,6 +4349,18 @@ function App() { onToolOpenChangeForTab={setToolOpenForTab} onOpenKnowledgeFile={(path) => { navigateToFile(path) }} onActivate={() => setActiveShortcutPane('right')} + isRecording={isRecording} + recordingText={voice.interimText} + recordingState={voice.state === 'connecting' ? 'connecting' : 'listening'} + onStartRecording={handleStartRecording} + onSubmitRecording={handleSubmitRecording} + onCancelRecording={handleCancelRecording} + voiceAvailable={voiceAvailable} + ttsAvailable={ttsAvailable} + ttsEnabled={ttsEnabled} + ttsMode={ttsMode} + onToggleTts={handleToggleTts} + onTtsModeChange={handleTtsModeChange} /> )} {/* Rendered last so its no-drag region paints over the sidebar drag region */} @@ -3641,6 +4371,10 @@ function App() { canNavigateForward={canNavigateForward} onNewChat={handleNewChatTab} onOpenSearch={() => setIsSearchOpen(true)} + meetingState={meetingTranscription.state} + meetingSummarizing={meetingSummarizing} + meetingAvailable={voiceAvailable} + onToggleMeeting={() => { void handleToggleMeeting() }} leftInsetPx={isMac ? MACOS_TRAFFIC_LIGHTS_RESERVED_PX : 0} />     @@ -3657,6 +4391,29 @@ function App() { open={showOnboarding} onComplete={handleOnboardingComplete} /> + + + + Meeting transcription setup + + Rowboat needs Screen Recording permission to capture meeting audio from other apps (Zoom, Meet, etc.). + + +
    +

    To enable this:

    +
      +
    1. Open System Settings → Privacy & Security
      2. +
    2. Click Screen Recording
      3. +
    3. Toggle on Rowboat
      4. +
    4. You may need to restart the app after granting permission
      5. +
    +
    + + + + +     +     ) } diff --git a/apps/x/apps/renderer/src/components/ai-elements/app-action-card.tsx b/apps/x/apps/renderer/src/components/ai-elements/app-action-card.tsx new file mode 100644 index 00000000..35f605c5 --- /dev/null +++ b/apps/x/apps/renderer/src/components/ai-elements/app-action-card.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { + CheckCircleIcon, + FileTextIcon, + FilterIcon, + LayoutGridIcon, + LoaderIcon, + NetworkIcon, + PlusCircleIcon, +} from "lucide-react"; +import type { AppActionCardData } from "@/lib/chat-conversation"; + +interface AppActionCardProps { + data: AppActionCardData; + status: "pending" | "running" | "completed" | "error"; +} + +const actionIcons: Record = { + "open-note": , + "open-view": , + "update-base-view": , + "create-base": , +}; + +export function AppActionCard({ data, status }: AppActionCardProps) { + const isRunning = status === "pending" || status === "running"; + const isError = status === "error"; + + return ( +
    + + {actionIcons[data.action] || } + + {data.label} + {isRunning ? ( + + ) : isError ? ( + Failed + ) : ( + + )} +
    + ); +} diff --git a/apps/x/apps/renderer/src/components/bases-view.tsx b/apps/x/apps/renderer/src/components/bases-view.tsx new file mode 100644 index 00000000..cad6ccbf --- /dev/null +++ b/apps/x/apps/renderer/src/components/bases-view.tsx @@ -0,0 +1,830 @@ +import * as React from 'react' +import { useEffect, useState, useMemo, useCallback, useRef } from 'react' +import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, X, Check, ListFilter, Filter, Search, Save } from 'lucide-react' +import { Badge } from '@/components/ui/badge' +import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover' +import { Command, CommandInput, CommandList, CommandItem, CommandEmpty, CommandGroup } from '@/components/ui/command' +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog' +import { cn } from '@/lib/utils' +import { splitFrontmatter, extractAllFrontmatterValues } from '@/lib/frontmatter' +import { useDebounce } from '@/hooks/use-debounce' + +interface TreeNode { + path: string + name: string + kind: 'file' | 'dir' + children?: TreeNode[] + stat?: { size: number; mtimeMs: number } +} + +type NoteEntry = { + path: string + name: string + folder: string + fields: Record + mtimeMs: number +} + +type SortDir = 'asc' | 'desc' +type ActiveFilter = { category: string; value: string } + +export type BaseConfig = { + name: string + visibleColumns: string[] + columnWidths: Record + sort: { field: string; dir: SortDir } + filters: ActiveFilter[] +} + +export const DEFAULT_BASE_CONFIG: BaseConfig = { + name: 'All Notes', + visibleColumns: ['name', 'folder', 'relationship', 'topic', 'status', 'mtimeMs'], + columnWidths: {}, + sort: { field: 'mtimeMs', dir: 'desc' }, + filters: [], +} + +const PAGE_SIZE = 25 + +/** Built-in columns that don't come from frontmatter */ +const BUILTIN_COLUMNS = ['name', 'folder', 'mtimeMs'] as const +type BuiltinColumn = (typeof BUILTIN_COLUMNS)[number] + +const BUILTIN_LABELS: Record = { + name: 'Name', + folder: 'Folder', + mtimeMs: 'Last Modified', +} + +/** Default pixel widths for columns */ +const DEFAULT_WIDTHS: Record = { + name: 200, + folder: 140, + mtimeMs: 140, +} +const DEFAULT_FRONTMATTER_WIDTH = 150 + +/** Convert key to title case: `first_met` → `First Met` */ +function toTitleCase(key: string): string { + if (key in BUILTIN_LABELS) return BUILTIN_LABELS[key as BuiltinColumn] + return key + .split('_') + .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) + .join(' ') +} + +type BasesViewProps = { + tree: TreeNode[] + onSelectNote: (path: string) => void + config: BaseConfig + onConfigChange: (config: BaseConfig) => void + isDefaultBase: boolean + onSave: (name: string | null) => void + /** Search query set externally (e.g. by app-navigation tool). */ + externalSearch?: string + /** Called after the external search has been consumed (applied to internal state). */ + onExternalSearchConsumed?: () => void +} + +function collectFiles(nodes: TreeNode[]): { path: string; name: string; mtimeMs: number }[] { + return nodes.flatMap((n) => + n.kind === 'file' && n.name.endsWith('.md') + ? [{ path: n.path, name: n.name.replace(/\.md$/i, ''), mtimeMs: n.stat?.mtimeMs ?? 0 }] + : n.children + ? collectFiles(n.children) + : [], + ) +} + +function getFolder(path: string): string { + const parts = path.split('/') + if (parts.length >= 3) return parts[1] + return '' +} + +function formatDate(ms: number): string { + if (!ms) return '' + const d = new Date(ms) + return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) +} + +function filtersEqual(a: ActiveFilter, b: ActiveFilter): boolean { + return a.category === b.category && a.value === b.value +} + +function hasFilter(filters: ActiveFilter[], f: ActiveFilter): boolean { + return filters.some((x) => filtersEqual(x, f)) +} + +/** Get the string values for a column from a note */ +function getColumnValues(note: NoteEntry, column: string): string[] { + if (column === 'name') return [note.name] + if (column === 'folder') return [note.folder] + if (column === 'mtimeMs') return [] + const v = note.fields[column] + if (!v) return [] + return Array.isArray(v) ? v : [v] +} + +/** Get a single sortable string for a column */ +function getSortValue(note: NoteEntry, column: string): string | number { + if (column === 'name') return note.name + if (column === 'folder') return note.folder + if (column === 'mtimeMs') return note.mtimeMs + const v = note.fields[column] + if (!v) return '' + return Array.isArray(v) ? v[0] ?? '' : v +} + +export function BasesView({ tree, onSelectNote, config, onConfigChange, isDefaultBase, onSave, externalSearch, onExternalSearchConsumed }: BasesViewProps) { + // Build notes instantly from tree + const notes = useMemo(() => { + return collectFiles(tree).map((f) => ({ + path: f.path, + name: f.name, + folder: getFolder(f.path), + fields: {}, + mtimeMs: f.mtimeMs, + })) + }, [tree]) + + // Frontmatter fields loaded async, keyed by path + const [fieldsByPath, setFieldsByPath] = useState>>(new Map()) + const loadGenRef = useRef(0) + + // Load frontmatter in background batches + useEffect(() => { + const gen = ++loadGenRef.current + let cancelled = false + const paths = notes.map((n) => n.path) + + async function load() { + const BATCH = 30 + for (let i = 0; i < paths.length; i += BATCH) { + if (cancelled) return + const batch = paths.slice(i, i + BATCH) + const results = await Promise.all( + batch.map(async (p) => { + try { + const result = await window.ipc.invoke('workspace:readFile', { path: p, encoding: 'utf8' }) + const { raw } = splitFrontmatter(result.data) + return { path: p, fields: extractAllFrontmatterValues(raw) } + } catch { + return { path: p, fields: {} as Record } + } + }), + ) + if (cancelled || gen !== loadGenRef.current) return + setFieldsByPath((prev) => { + const next = new Map(prev) + for (const r of results) next.set(r.path, r.fields) + return next + }) + } + } + + load() + return () => { cancelled = true } + }, [notes]) + + // Merge tree-derived notes with async-loaded fields + const enrichedNotes = useMemo(() => { + if (fieldsByPath.size === 0) return notes + return notes.map((n) => { + const f = fieldsByPath.get(n.path) + return f ? { ...n, fields: f } : n + }) + }, [notes, fieldsByPath]) + + // Collect all unique frontmatter property keys across all notes + const allPropertyKeys = useMemo(() => { + const keys = new Set() + for (const fields of fieldsByPath.values()) { + for (const k of Object.keys(fields)) keys.add(k) + } + return Array.from(keys).sort() + }, [fieldsByPath]) + + // Filterable categories: "folder" + all frontmatter keys + const filterCategories = useMemo(() => { + return ['folder', ...allPropertyKeys] + }, [allPropertyKeys]) + + // All unique values per category, across all enriched notes + const valuesByCategory = useMemo>(() => { + const result: Record> = {} + for (const cat of filterCategories) result[cat] = new Set() + for (const note of enrichedNotes) { + for (const cat of filterCategories) { + for (const v of getColumnValues(note, cat)) { + if (v) result[cat]?.add(v) + } + } + } + const out: Record = {} + for (const [cat, set] of Object.entries(result)) { + out[cat] = Array.from(set).sort((a, b) => a.localeCompare(b)) + } + return out + }, [filterCategories, enrichedNotes]) + + const visibleColumns = config.visibleColumns + const columnWidths = config.columnWidths + const filters = config.filters + const sortField = config.sort.field + const sortDir = config.sort.dir + const [page, setPage] = useState(0) + const [saveDialogOpen, setSaveDialogOpen] = useState(false) + const [saveName, setSaveName] = useState('') + const saveInputRef = useRef(null) + const [filterCategory, setFilterCategory] = useState(null) + + const handleSaveClick = useCallback(() => { + if (isDefaultBase) { + setSaveName('') + setSaveDialogOpen(true) + } else { + onSave(null) + } + }, [isDefaultBase, onSave]) + + const handleSaveConfirm = useCallback(() => { + const name = saveName.trim() + if (!name) return + setSaveDialogOpen(false) + onSave(name) + }, [saveName, onSave]) + + const getColWidth = useCallback((col: string) => { + return columnWidths[col] ?? DEFAULT_WIDTHS[col] ?? DEFAULT_FRONTMATTER_WIDTH + }, [columnWidths]) + + // Column resize via drag + const resizingRef = useRef<{ col: string; startX: number; startW: number } | null>(null) + + const configRef = useRef(config) + configRef.current = config + + const onResizeStart = useCallback((col: string, e: React.MouseEvent) => { + e.preventDefault() + e.stopPropagation() + const startX = e.clientX + const startW = configRef.current.columnWidths[col] ?? DEFAULT_WIDTHS[col] ?? DEFAULT_FRONTMATTER_WIDTH + resizingRef.current = { col, startX, startW } + + const onMouseMove = (ev: MouseEvent) => { + if (!resizingRef.current) return + const delta = ev.clientX - resizingRef.current.startX + const newW = Math.max(60, resizingRef.current.startW + delta) + const c = configRef.current + const updated = { ...c, columnWidths: { ...c.columnWidths, [resizingRef.current!.col]: newW } } + onConfigChange(updated) + } + + const onMouseUp = () => { + resizingRef.current = null + document.removeEventListener('mousemove', onMouseMove) + document.removeEventListener('mouseup', onMouseUp) + } + + document.addEventListener('mousemove', onMouseMove) + document.addEventListener('mouseup', onMouseUp) + }, [onConfigChange]) + + // Search + const [searchOpen, setSearchOpen] = useState(false) + const [searchQuery, setSearchQuery] = useState('') + + // Apply external search from app-navigation tool + useEffect(() => { + if (externalSearch !== undefined) { + setSearchQuery(externalSearch) + setSearchOpen(true) + onExternalSearchConsumed?.() + } + }, [externalSearch, onExternalSearchConsumed]) + const debouncedSearch = useDebounce(searchQuery, 250) + const [searchMatchPaths, setSearchMatchPaths] = useState | null>(null) + const searchInputRef = useRef(null) + + useEffect(() => { + if (!debouncedSearch.trim()) { + setSearchMatchPaths(null) + return + } + let cancelled = false + window.ipc.invoke('search:query', { query: debouncedSearch, limit: 200, types: ['knowledge'] }) + .then((res: { results: { path: string }[] }) => { + if (!cancelled) { + setSearchMatchPaths(new Set(res.results.map((r) => r.path))) + } + }) + .catch(() => { + if (!cancelled) setSearchMatchPaths(new Set()) + }) + return () => { cancelled = true } + }, [debouncedSearch]) + + const toggleSearch = useCallback(() => { + setSearchOpen((prev) => { + if (prev) { + setSearchQuery('') + setSearchMatchPaths(null) + } + return !prev + }) + }, []) + + // Focus input when search opens + useEffect(() => { + if (searchOpen) searchInputRef.current?.focus() + }, [searchOpen]) + + // Reset page when filters or search change + useEffect(() => { setPage(0) }, [filters, searchMatchPaths]) + + // Filter (search + badge filters) + const filteredNotes = useMemo(() => { + let result = enrichedNotes + // Apply search filter + if (searchMatchPaths) { + result = result.filter((note) => searchMatchPaths.has(note.path)) + } + // Apply badge filters + if (filters.length > 0) { + const byCategory = new Map() + for (const f of filters) { + const vals = byCategory.get(f.category) ?? [] + vals.push(f.value) + byCategory.set(f.category, vals) + } + result = result.filter((note) => { + for (const [category, requiredValues] of byCategory) { + const noteValues = getColumnValues(note, category) + if (!requiredValues.some((v) => noteValues.includes(v))) return false + } + return true + }) + } + return result + }, [enrichedNotes, filters, searchMatchPaths]) + + // Sort + const sortedNotes = useMemo(() => { + return [...filteredNotes].sort((a, b) => { + const va = getSortValue(a, sortField) + const vb = getSortValue(b, sortField) + let cmp: number + if (typeof va === 'number' && typeof vb === 'number') { + cmp = va - vb + } else { + cmp = String(va).localeCompare(String(vb)) + } + return sortDir === 'asc' ? cmp : -cmp + }) + }, [filteredNotes, sortField, sortDir]) + + // Paginate + const totalPages = Math.max(1, Math.ceil(sortedNotes.length / PAGE_SIZE)) + const clampedPage = Math.min(page, totalPages - 1) + const pageNotes = useMemo( + () => sortedNotes.slice(clampedPage * PAGE_SIZE, (clampedPage + 1) * PAGE_SIZE), + [sortedNotes, clampedPage], + ) + + const toggleFilter = useCallback((category: string, value: string) => { + const c = configRef.current + const f: ActiveFilter = { category, value } + const next = hasFilter(c.filters, f) + ? c.filters.filter((x) => !filtersEqual(x, f)) + : [...c.filters, f] + onConfigChange({ ...c, filters: next }) + }, [onConfigChange]) + + const clearFilters = useCallback(() => { + onConfigChange({ ...configRef.current, filters: [] }) + }, [onConfigChange]) + + const handleSort = useCallback((field: string) => { + const c = configRef.current + if (field === c.sort.field) { + onConfigChange({ ...c, sort: { field, dir: c.sort.dir === 'asc' ? 'desc' : 'asc' } }) + } else { + onConfigChange({ ...c, sort: { field, dir: field === 'mtimeMs' ? 'desc' : 'asc' } }) + } + }, [onConfigChange]) + + const toggleColumn = useCallback((key: string) => { + const c = configRef.current + const next = c.visibleColumns.includes(key) + ? c.visibleColumns.filter((col) => col !== key) + : [...c.visibleColumns, key] + onConfigChange({ ...c, visibleColumns: next }) + }, [onConfigChange]) + + const SortIcon = ({ field }: { field: string }) => { + if (sortField !== field) return null + return sortDir === 'asc' + ? + : + } + + return ( +
    + {/* Toolbar */} +
    + + + + + + + + + No properties found. + + {BUILTIN_COLUMNS.map((col) => ( + toggleColumn(col)}> + + {BUILTIN_LABELS[col]} + + ))} + + + {allPropertyKeys.map((key) => ( + toggleColumn(key)}> + + {toTitleCase(key)} + + ))} + + + + + + + { if (!open) setFilterCategory(null) }}> + + + + +
    + {/* Left: categories */} +
    +
    + Attributes + {filters.length > 0 && ( + + )} +
    + {filterCategories.map((cat) => { + const activeCount = filters.filter((f) => f.category === cat).length + const isSelected = filterCategory === cat + return ( + + ) + })} +
    + {/* Right: values for selected category */} + {filterCategory && ( +
    + + + + No values found. + + {(valuesByCategory[filterCategory] ?? []).map((val) => { + const active = hasFilter(filters, { category: filterCategory, value: val }) + return ( + toggleFilter(filterCategory, val)}> + + {val} + + ) + })} + + + +
    + )} +
    +     +     + + + + {searchOpen && ( +
    + setSearchQuery(e.target.value)} + placeholder="Search notes..." + className="flex-1 min-w-0 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none" + /> + {searchQuery && ( + + {searchMatchPaths ? `${searchMatchPaths.size} matches` : '...'} + + )} + +
    + )} + +
    + + +
    + + {/* Filter bar */} + {filters.length > 0 && ( +
    +
    + + {sortedNotes.length} of {enrichedNotes.length} notes + + {filters.map((f) => ( + + ))} + +
    +
    + )} + + {/* Table */} +
    + + + {visibleColumns.map((col) => ( + + ))} + + + + {visibleColumns.map((col) => ( + + ))} + + + + {pageNotes.map((note) => ( + onSelectNote(note.path)} + > + {visibleColumns.map((col) => ( + + ))} + + ))} + {pageNotes.length === 0 && ( + + + + )} + +
    handleSort(col)} + > + {toTitleCase(col)} + {/* Resize handle */} +
    onResizeStart(col, e)} + onClick={(e) => e.stopPropagation()} + /> +
    + +
    + No notes found +
    +
    + + {/* Pagination */} +
    + + {sortedNotes.length === 0 + ? '0 notes' + : `${clampedPage * PAGE_SIZE + 1}\u2013${Math.min((clampedPage + 1) * PAGE_SIZE, sortedNotes.length)} of ${sortedNotes.length}`} + + {totalPages > 1 && ( +
    + + + Page {clampedPage + 1} of {totalPages} + + +
    + )} +
    + + {/* Save As dialog */} + + + + Save Base + Choose a name for this base view. + + setSaveName(e.target.value)} + onKeyDown={(e) => { if (e.key === 'Enter') handleSaveConfirm() }} + placeholder="e.g. Contacts, Projects..." + className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring" + autoFocus + /> + + + + + + +
    + ) +} + +/** Renders a single table cell based on the column type */ +function CellRenderer({ + note, + column, + filters, + toggleFilter, +}: { + note: NoteEntry + column: string + filters: ActiveFilter[] + toggleFilter: (category: string, value: string) => void +}) { + if (column === 'name') { + return {note.name} + } + if (column === 'folder') { + return {note.folder} + } + if (column === 'mtimeMs') { + return {formatDate(note.mtimeMs)} + } + + // Frontmatter column + const value = note.fields[column] + if (!value) return null + + if (Array.isArray(value)) { + return ( +
    + {value.map((v) => ( + + ))} +
    + ) + } + + // Single string value — render as badge for filterability + return ( + + ) +} + +function CategoryBadge({ + category, + value, + active, + onClick, +}: { + category: string + value: string + active: boolean + onClick: (category: string, value: string) => void +}) { + return ( + { + e.stopPropagation() + onClick(category, value) + }} + > + {value} + + ) +} diff --git a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx index 42ea45bb..0c041351 100644 --- a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx +++ b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useRef, useState } from 'react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import { ArrowUp, AudioLines, @@ -9,7 +10,10 @@ import { FileSpreadsheet, FileText, FileVideo, + Globe, + Headphones, LoaderIcon, + Mic, Plus, Square, X, @@ -53,6 +57,7 @@ export type StagedAttachment = { const MAX_ATTACHMENT_SIZE = 10 * 1024 * 1024 // 10MB + const providerDisplayNames: Record = { openai: 'OpenAI', anthropic: 'Anthropic', @@ -61,10 +66,11 @@ const providerDisplayNames: Record = { openrouter: 'OpenRouter', aigateway: 'AI Gateway', 'openai-compatible': 'OpenAI-Compatible', + rowboat: 'Rowboat', } interface ConfiguredModel { - flavor: string + flavor: "openai" | "anthropic" | "google" | "openrouter" | "aigateway" | "ollama" | "openai-compatible" | "rowboat" model: string apiKey?: string baseURL?: string @@ -92,7 +98,7 @@ function getAttachmentIcon(kind: AttachmentIconKind) { } interface ChatInputInnerProps { - onSubmit: (message: PromptInputMessage, mentions?: FileMention[], attachments?: StagedAttachment[]) => void + onSubmit: (message: PromptInputMessage, mentions?: FileMention[], attachments?: StagedAttachment[], searchEnabled?: boolean) => void onStop?: () => void isProcessing: boolean isStopping?: boolean @@ -102,6 +108,18 @@ interface ChatInputInnerProps { runId?: string | null initialDraft?: string onDraftChange?: (text: string) => void + isRecording?: boolean + recordingText?: string + recordingState?: 'connecting' | 'listening' + onStartRecording?: () => void + onSubmitRecording?: () => void + onCancelRecording?: () => void + voiceAvailable?: boolean + ttsAvailable?: boolean + ttsEnabled?: boolean + ttsMode?: 'summary' | 'full' + onToggleTts?: () => void + onTtsModeChange?: (mode: 'summary' | 'full') => void } function ChatInputInner({ @@ -115,6 +133,18 @@ function ChatInputInner({ runId, initialDraft, onDraftChange, + isRecording, + recordingText, + recordingState, + onStartRecording, + onSubmitRecording, + onCancelRecording, + voiceAvailable, + ttsAvailable, + ttsEnabled, + ttsMode, + onToggleTts, + onTtsModeChange, }: ChatInputInnerProps) { const controller = usePromptInputController() const message = controller.textInput.value @@ -125,51 +155,105 @@ function ChatInputInner({ const [configuredModels, setConfiguredModels] = useState([]) const [activeModelKey, setActiveModelKey] = useState('') + const [searchEnabled, setSearchEnabled] = useState(false) + const [searchAvailable, setSearchAvailable] = useState(false) + const [isRowboatConnected, setIsRowboatConnected] = useState(false) - // Load model config from disk (on mount and whenever tab becomes active) + // Check Rowboat sign-in state + useEffect(() => { + window.ipc.invoke('oauth:getState', null).then((result) => { + setIsRowboatConnected(result.config?.rowboat?.connected ?? false) + }).catch(() => setIsRowboatConnected(false)) + }, [isActive]) + + // Update sign-in state when OAuth events fire + useEffect(() => { + const cleanup = window.ipc.on('oauth:didConnect', () => { + window.ipc.invoke('oauth:getState', null).then((result) => { + setIsRowboatConnected(result.config?.rowboat?.connected ?? false) + }).catch(() => setIsRowboatConnected(false)) + }) + return cleanup + }, []) + + // Load model config (gateway when signed in, local config when BYOK) const loadModelConfig = useCallback(async () => { try { - const result = await window.ipc.invoke('workspace:readFile', { path: 'config/models.json' }) - const parsed = JSON.parse(result.data) - const models: ConfiguredModel[] = [] - if (parsed?.providers) { - for (const [flavor, entry] of Object.entries(parsed.providers)) { - const e = entry as Record - const modelList: string[] = Array.isArray(e.models) ? e.models as string[] : [] - const singleModel = typeof e.model === 'string' ? e.model : '' - const allModels = modelList.length > 0 ? modelList : singleModel ? [singleModel] : [] - for (const model of allModels) { - if (model) { - models.push({ - flavor, - model, - apiKey: (e.apiKey as string) || undefined, - baseURL: (e.baseURL as string) || undefined, - headers: (e.headers as Record) || undefined, - knowledgeGraphModel: (e.knowledgeGraphModel as string) || undefined, - }) + if (isRowboatConnected) { + // Fetch gateway models + const listResult = await window.ipc.invoke('models:list', null) + const rowboatProvider = listResult.providers?.find( + (p: { id: string }) => p.id === 'rowboat' + ) + const models: ConfiguredModel[] = (rowboatProvider?.models || []).map( + (m: { id: string }) => ({ flavor: 'rowboat', model: m.id }) + ) + + // Read current default from config + let defaultModel = '' + try { + const result = await window.ipc.invoke('workspace:readFile', { path: 'config/models.json' }) + const parsed = JSON.parse(result.data) + defaultModel = parsed?.model || '' + } catch { /* no config yet */ } + + if (defaultModel) { + models.sort((a, b) => { + if (a.model === defaultModel) return -1 + if (b.model === defaultModel) return 1 + return 0 + }) + } + + setConfiguredModels(models) + const activeKey = defaultModel + ? `rowboat/${defaultModel}` + : models[0] ? `rowboat/${models[0].model}` : '' + if (activeKey) setActiveModelKey(activeKey) + } else { + // BYOK: read from local models.json + const result = await window.ipc.invoke('workspace:readFile', { path: 'config/models.json' }) + const parsed = JSON.parse(result.data) + const models: ConfiguredModel[] = [] + if (parsed?.providers) { + for (const [flavor, entry] of Object.entries(parsed.providers)) { + const e = entry as Record + const modelList: string[] = Array.isArray(e.models) ? e.models as string[] : [] + const singleModel = typeof e.model === 'string' ? e.model : '' + const allModels = modelList.length > 0 ? modelList : singleModel ? [singleModel] : [] + for (const model of allModels) { + if (model) { + models.push({ + flavor: flavor as ConfiguredModel['flavor'], + model, + apiKey: (e.apiKey as string) || undefined, + baseURL: (e.baseURL as string) || undefined, + headers: (e.headers as Record) || undefined, + knowledgeGraphModel: (e.knowledgeGraphModel as string) || undefined, + }) + } } } } - } - const defaultKey = parsed?.provider?.flavor && parsed?.model - ? `${parsed.provider.flavor}/${parsed.model}` - : '' - models.sort((a, b) => { - const aKey = `${a.flavor}/${a.model}` - const bKey = `${b.flavor}/${b.model}` - if (aKey === defaultKey) return -1 - if (bKey === defaultKey) return 1 - return 0 - }) - setConfiguredModels(models) - if (defaultKey) { - setActiveModelKey(defaultKey) + const defaultKey = parsed?.provider?.flavor && parsed?.model + ? `${parsed.provider.flavor}/${parsed.model}` + : '' + models.sort((a, b) => { + const aKey = `${a.flavor}/${a.model}` + const bKey = `${b.flavor}/${b.model}` + if (aKey === defaultKey) return -1 + if (bKey === defaultKey) return 1 + return 0 + }) + setConfiguredModels(models) + if (defaultKey) { + setActiveModelKey(defaultKey) + } } } catch { // No config yet } - }, []) + }, [isRowboatConnected]) useEffect(() => { loadModelConfig() @@ -182,26 +266,61 @@ function ChatInputInner({ return () => window.removeEventListener('models-config-changed', handler) }, [loadModelConfig]) + // Check search tool availability (brave or exa, or signed-in via gateway) + useEffect(() => { + const checkSearch = async () => { + if (isRowboatConnected) { + setSearchAvailable(true) + return + } + let available = false + try { + const raw = await window.ipc.invoke('workspace:readFile', { path: 'config/brave-search.json' }) + const config = JSON.parse(raw.data) + if (config.apiKey) available = true + } catch { /* not configured */ } + if (!available) { + try { + const raw = await window.ipc.invoke('workspace:readFile', { path: 'config/exa-search.json' }) + const config = JSON.parse(raw.data) + if (config.apiKey) available = true + } catch { /* not configured */ } + } + setSearchAvailable(available) + } + checkSearch() + }, [isActive, isRowboatConnected]) + const handleModelChange = useCallback(async (key: string) => { const entry = configuredModels.find((m) => `${m.flavor}/${m.model}` === key) if (!entry) return setActiveModelKey(key) - // Collect all models for this provider so the full list is preserved - const providerModels = configuredModels - .filter((m) => m.flavor === entry.flavor) - .map((m) => m.model) + try { - await window.ipc.invoke('models:saveConfig', { - provider: { - flavor: entry.flavor, - apiKey: entry.apiKey, - baseURL: entry.baseURL, - headers: entry.headers, - }, - model: entry.model, - models: providerModels, - knowledgeGraphModel: entry.knowledgeGraphModel, - }) + if (entry.flavor === 'rowboat') { + // Gateway model — save with valid Zod flavor, no credentials + await window.ipc.invoke('models:saveConfig', { + provider: { flavor: 'openrouter' as const }, + model: entry.model, + knowledgeGraphModel: entry.knowledgeGraphModel, + }) + } else { + // BYOK — preserve full provider config + const providerModels = configuredModels + .filter((m) => m.flavor === entry.flavor) + .map((m) => m.model) + await window.ipc.invoke('models:saveConfig', { + provider: { + flavor: entry.flavor, + apiKey: entry.apiKey, + baseURL: entry.baseURL, + headers: entry.headers, + }, + model: entry.model, + models: providerModels, + knowledgeGraphModel: entry.knowledgeGraphModel, + }) + } } catch { toast.error('Failed to switch model') } @@ -263,11 +382,12 @@ function ChatInputInner({ const handleSubmit = useCallback(() => { if (!canSubmit) return - onSubmit({ text: message.trim(), files: [] }, controller.mentions.mentions, attachments) + onSubmit({ text: message.trim(), files: [] }, controller.mentions.mentions, attachments, searchEnabled || undefined) controller.textInput.clear() controller.mentions.clearMentions() setAttachments([]) - }, [attachments, canSubmit, controller, message, onSubmit]) + setSearchEnabled(false) + }, [attachments, canSubmit, controller, message, onSubmit, searchEnabled]) const handleKeyDown = useCallback((e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -367,6 +487,40 @@ function ChatInputInner({ e.target.value = '' }} /> + {isRecording ? ( + /* ── Recording bar ── */ +
    + +
    + + + {recordingState === 'connecting' ? 'Connecting...' : recordingText || 'Listening...'} + +
    + +
    + ) : ( + /* ── Normal input ── */ + <>
    + {searchAvailable && ( + searchEnabled ? ( + + ) : ( + + ) + )}
    {configuredModels.length > 0 && ( @@ -414,6 +590,63 @@ function ChatInputInner({ )} + {onToggleTts && ttsAvailable && ( +
    + + + + + + {ttsEnabled ? 'Voice output on' : 'Voice output off'} + + + {ttsEnabled && onTtsModeChange && ( + + + + + + onTtsModeChange(v as 'summary' | 'full')}> + Speak summary + Speak full response + + + + )} +
    + )} + {voiceAvailable && onStartRecording && ( + + )} {isProcessing ? (
    + + )} +
    + ) +} + +/** Animated waveform bars for the recording indicator */ +function VoiceWaveform() { + return ( +
    + {[0, 1, 2, 3, 4].map((i) => ( + + ))} +
    ) } @@ -466,6 +724,18 @@ export interface ChatInputWithMentionsProps { runId?: string | null initialDraft?: string onDraftChange?: (text: string) => void + isRecording?: boolean + recordingText?: string + recordingState?: 'connecting' | 'listening' + onStartRecording?: () => void + onSubmitRecording?: () => void + onCancelRecording?: () => void + voiceAvailable?: boolean + ttsAvailable?: boolean + ttsEnabled?: boolean + ttsMode?: 'summary' | 'full' + onToggleTts?: () => void + onTtsModeChange?: (mode: 'summary' | 'full') => void } export function ChatInputWithMentions({ @@ -482,6 +752,18 @@ export function ChatInputWithMentions({ runId, initialDraft, onDraftChange, + isRecording, + recordingText, + recordingState, + onStartRecording, + onSubmitRecording, + onCancelRecording, + voiceAvailable, + ttsAvailable, + ttsEnabled, + ttsMode, + onToggleTts, + onTtsModeChange, }: ChatInputWithMentionsProps) { return ( @@ -496,6 +778,18 @@ export function ChatInputWithMentions({ runId={runId} initialDraft={initialDraft} onDraftChange={onDraftChange} + isRecording={isRecording} + recordingText={recordingText} + recordingState={recordingState} + onStartRecording={onStartRecording} + onSubmitRecording={onSubmitRecording} + onCancelRecording={onCancelRecording} + voiceAvailable={voiceAvailable} + ttsAvailable={ttsAvailable} + ttsEnabled={ttsEnabled} + ttsMode={ttsMode} + onToggleTts={onToggleTts} + onTtsModeChange={onTtsModeChange} /> ) diff --git a/apps/x/apps/renderer/src/components/chat-sidebar.tsx b/apps/x/apps/renderer/src/components/chat-sidebar.tsx index f020cdae..ac7f23be 100644 --- a/apps/x/apps/renderer/src/components/chat-sidebar.tsx +++ b/apps/x/apps/renderer/src/components/chat-sidebar.tsx @@ -108,6 +108,19 @@ interface ChatSidebarProps { onToolOpenChangeForTab?: (tabId: string, toolId: string, open: boolean) => void onOpenKnowledgeFile?: (path: string) => void onActivate?: () => void + // Voice / TTS props + isRecording?: boolean + recordingText?: string + recordingState?: 'connecting' | 'listening' + onStartRecording?: () => void + onSubmitRecording?: () => void + onCancelRecording?: () => void + voiceAvailable?: boolean + ttsAvailable?: boolean + ttsEnabled?: boolean + ttsMode?: 'summary' | 'full' + onToggleTts?: () => void + onTtsModeChange?: (mode: 'summary' | 'full') => void } export function ChatSidebar({ @@ -146,6 +159,18 @@ export function ChatSidebar({ onToolOpenChangeForTab, onOpenKnowledgeFile, onActivate, + isRecording, + recordingText, + recordingState, + onStartRecording, + onSubmitRecording, + onCancelRecording, + voiceAvailable, + ttsAvailable, + ttsEnabled, + ttsMode, + onToggleTts, + onTtsModeChange, }: ChatSidebarProps) { const [width, setWidth] = useState(() => getInitialPaneWidth(defaultWidth)) const [isResizing, setIsResizing] = useState(false) @@ -542,6 +567,18 @@ export function ChatSidebar({ runId={tabState.runId} initialDraft={getInitialDraft?.(tab.id)} onDraftChange={onDraftChangeForTab ? (text) => onDraftChangeForTab(tab.id, text) : undefined} + isRecording={isActive && isRecording} + recordingText={isActive ? recordingText : undefined} + recordingState={isActive ? recordingState : undefined} + onStartRecording={isActive ? onStartRecording : undefined} + onSubmitRecording={isActive ? onSubmitRecording : undefined} + onCancelRecording={isActive ? onCancelRecording : undefined} + voiceAvailable={isActive && voiceAvailable} + ttsAvailable={isActive && ttsAvailable} + ttsEnabled={ttsEnabled} + ttsMode={ttsMode} + onToggleTts={isActive ? onToggleTts : undefined} + onTtsModeChange={isActive ? onTtsModeChange : undefined} />
    ) diff --git a/apps/x/apps/renderer/src/components/connectors-popover.tsx b/apps/x/apps/renderer/src/components/connectors-popover.tsx index ad2285a0..e28f662e 100644 --- a/apps/x/apps/renderer/src/components/connectors-popover.tsx +++ b/apps/x/apps/renderer/src/components/connectors-popover.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" -import { useState, useEffect, useCallback } from "react" -import { AlertTriangle, Loader2, Mic, Mail, MessageSquare } from "lucide-react" +import { useState } from "react" +import { AlertTriangle, Loader2, Mic, Mail, Calendar, MessageSquare, User } from "lucide-react" import { Popover, @@ -17,385 +17,41 @@ import { import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" -import { ComposioApiKeyModal } from "@/components/composio-api-key-modal" import { GoogleClientIdModal } from "@/components/google-client-id-modal" -import { getGoogleClientId, setGoogleClientId, clearGoogleClientId } from "@/lib/google-client-id-store" -import { toast } from "sonner" - -interface ProviderState { - isConnected: boolean - isLoading: boolean - isConnecting: boolean -} - -interface ProviderStatus { - error?: string -} +import { ComposioApiKeyModal } from "@/components/composio-api-key-modal" +import { useConnectors } from "@/hooks/useConnectors" interface ConnectorsPopoverProps { children: React.ReactNode tooltip?: string open?: boolean onOpenChange?: (open: boolean) => void + mode?: "all" | "unconnected" } -export function ConnectorsPopover({ children, tooltip, open: openProp, onOpenChange }: ConnectorsPopoverProps) { +export function ConnectorsPopover({ children, tooltip, open: openProp, onOpenChange, mode = "all" }: ConnectorsPopoverProps) { const [openInternal, setOpenInternal] = useState(false) const isControlled = typeof openProp === "boolean" const open = isControlled ? openProp : openInternal const setOpen = onOpenChange ?? setOpenInternal - const [providers, setProviders] = useState([]) - const [providersLoading, setProvidersLoading] = useState(true) - const [providerStates, setProviderStates] = useState>({}) - const [providerStatus, setProviderStatus] = useState>({}) - const [googleClientIdOpen, setGoogleClientIdOpen] = useState(false) - const [googleClientIdDescription, setGoogleClientIdDescription] = useState(undefined) - // Granola state - const [granolaEnabled, setGranolaEnabled] = useState(false) - const [granolaLoading, setGranolaLoading] = useState(true) + const c = useConnectors(open) - // Composio/Slack state - const [composioApiKeyOpen, setComposioApiKeyOpen] = useState(false) - const [slackConnected, setSlackConnected] = useState(false) - const [slackLoading, setSlackLoading] = useState(true) - const [slackConnecting, setSlackConnecting] = useState(false) - - // Load available providers on mount - useEffect(() => { - async function loadProviders() { - try { - setProvidersLoading(true) - const result = await window.ipc.invoke('oauth:list-providers', null) - setProviders(result.providers || []) - } catch (error) { - console.error('Failed to get available providers:', error) - setProviders([]) - } finally { - setProvidersLoading(false) - } - } - loadProviders() - }, []) - - // Load Granola config - const refreshGranolaConfig = useCallback(async () => { - try { - setGranolaLoading(true) - const result = await window.ipc.invoke('granola:getConfig', null) - setGranolaEnabled(result.enabled) - } catch (error) { - console.error('Failed to load Granola config:', error) - setGranolaEnabled(false) - } finally { - setGranolaLoading(false) - } - }, []) - - // Update Granola config - const handleGranolaToggle = useCallback(async (enabled: boolean) => { - try { - setGranolaLoading(true) - await window.ipc.invoke('granola:setConfig', { enabled }) - setGranolaEnabled(enabled) - toast.success(enabled ? 'Granola sync enabled' : 'Granola sync disabled') - } catch (error) { - console.error('Failed to update Granola config:', error) - toast.error('Failed to update Granola sync settings') - } finally { - setGranolaLoading(false) - } - }, []) - - // Load Slack connection status - const refreshSlackStatus = useCallback(async () => { - try { - setSlackLoading(true) - const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'slack' }) - setSlackConnected(result.isConnected) - } catch (error) { - console.error('Failed to load Slack status:', error) - setSlackConnected(false) - } finally { - setSlackLoading(false) - } - }, []) - - // Connect to Slack via Composio - const startSlackConnect = useCallback(async () => { - try { - setSlackConnecting(true) - const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'slack' }) - if (!result.success) { - toast.error(result.error || 'Failed to connect to Slack') - setSlackConnecting(false) - } - // Success will be handled by composio:didConnect event - } catch (error) { - console.error('Failed to connect to Slack:', error) - toast.error('Failed to connect to Slack') - setSlackConnecting(false) - } - }, []) - - // Handle Slack connect button click - const handleConnectSlack = useCallback(async () => { - // Check if Composio is configured - const configResult = await window.ipc.invoke('composio:is-configured', null) - if (!configResult.configured) { - setComposioApiKeyOpen(true) - return - } - await startSlackConnect() - }, [startSlackConnect]) - - // Handle Composio API key submission - const handleComposioApiKeySubmit = useCallback(async (apiKey: string) => { - try { - await window.ipc.invoke('composio:set-api-key', { apiKey }) - setComposioApiKeyOpen(false) - toast.success('Composio API key saved') - // Now start the Slack connection - await startSlackConnect() - } catch (error) { - console.error('Failed to save Composio API key:', error) - toast.error('Failed to save API key') - } - }, [startSlackConnect]) - - // Disconnect from Slack - const handleDisconnectSlack = useCallback(async () => { - try { - setSlackLoading(true) - const result = await window.ipc.invoke('composio:disconnect', { toolkitSlug: 'slack' }) - if (result.success) { - setSlackConnected(false) - toast.success('Disconnected from Slack') - } else { - toast.error('Failed to disconnect from Slack') - } - } catch (error) { - console.error('Failed to disconnect from Slack:', error) - toast.error('Failed to disconnect from Slack') - } finally { - setSlackLoading(false) - } - }, []) - - // Check connection status for all providers - const refreshAllStatuses = useCallback(async () => { - // Refresh Granola - refreshGranolaConfig() - - // Refresh Slack status - refreshSlackStatus() - - // Refresh OAuth providers - if (providers.length === 0) return - - const newStates: Record = {} - - try { - const result = await window.ipc.invoke('oauth:getState', null) - const config = result.config || {} - const statusMap: Record = {} - - for (const provider of providers) { - const providerConfig = config[provider] - newStates[provider] = { - isConnected: providerConfig?.connected ?? false, - isLoading: false, - isConnecting: false, - } - if (providerConfig?.error) { - statusMap[provider] = { error: providerConfig.error } - } - } - - setProviderStatus(statusMap) - } catch (error) { - console.error('Failed to check connection statuses:', error) - for (const provider of providers) { - newStates[provider] = { - isConnected: false, - isLoading: false, - isConnecting: false, - } - } - setProviderStatus({}) - } - - setProviderStates(newStates) - }, [providers, refreshGranolaConfig, refreshSlackStatus]) - - // Refresh statuses when popover opens or providers list changes - useEffect(() => { - if (open) { - refreshAllStatuses() - } - }, [open, providers, refreshAllStatuses]) - - // Listen for OAuth completion events - useEffect(() => { - const cleanup = window.ipc.on('oauth:didConnect', (event) => { - const { provider, success, error } = event - - setProviderStates(prev => ({ - ...prev, - [provider]: { - isConnected: success, - isLoading: false, - isConnecting: false, - } - })) - - if (success) { - const displayName = provider === 'fireflies-ai' ? 'Fireflies' : provider.charAt(0).toUpperCase() + provider.slice(1) - // Show detailed message for Google and Fireflies (includes sync info) - if (provider === 'google' || provider === 'fireflies-ai') { - toast.success(`Connected to ${displayName}`, { - description: 'Syncing your data in the background. This may take a few minutes before changes appear.', - duration: 8000, - }) - } else { - toast.success(`Connected to ${displayName}`) - } - // Refresh status to ensure consistency - refreshAllStatuses() - } else { - toast.error(error || `Failed to connect to ${provider}`) - } - }) - - return cleanup - }, [refreshAllStatuses]) - - // Listen for Composio connection events - useEffect(() => { - const cleanup = window.ipc.on('composio:didConnect', (event) => { - const { toolkitSlug, success, error } = event - - if (toolkitSlug === 'slack') { - setSlackConnected(success) - setSlackConnecting(false) - - if (success) { - toast.success('Connected to Slack') - } else { - toast.error(error || 'Failed to connect to Slack') - } - } - }) - - return cleanup - }, []) - - const startConnect = useCallback(async (provider: string, clientId?: string) => { - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isConnecting: true } - })) - - try { - const result = await window.ipc.invoke('oauth:connect', { provider, clientId }) - - if (result.success) { - // OAuth flow started - keep isConnecting state, wait for event - // Event listener will handle the actual completion - } else { - // Immediate failure (e.g., couldn't start flow) - toast.error(result.error || `Failed to connect to ${provider}`) - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isConnecting: false } - })) - } - } catch (error) { - console.error('Failed to connect:', error) - toast.error(`Failed to connect to ${provider}`) - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isConnecting: false } - })) - } - }, []) - - // Connect to a provider - const handleConnect = useCallback(async (provider: string) => { - if (provider === 'google') { - setGoogleClientIdDescription(undefined) - const existingClientId = getGoogleClientId() - if (!existingClientId) { - setGoogleClientIdOpen(true) - return - } - await startConnect(provider, existingClientId) - return - } - - await startConnect(provider) - }, [startConnect]) - - const handleGoogleClientIdSubmit = useCallback((clientId: string) => { - setGoogleClientId(clientId) - setGoogleClientIdOpen(false) - setGoogleClientIdDescription(undefined) - startConnect('google', clientId) - }, [startConnect]) - - // Disconnect from a provider - const handleDisconnect = useCallback(async (provider: string) => { - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isLoading: true } - })) - - try { - const result = await window.ipc.invoke('oauth:disconnect', { provider }) - - if (result.success) { - if (provider === 'google') { - clearGoogleClientId() - } - const displayName = provider === 'fireflies-ai' ? 'Fireflies' : provider.charAt(0).toUpperCase() + provider.slice(1) - toast.success(`Disconnected from ${displayName}`) - setProviderStates(prev => ({ - ...prev, - [provider]: { - isConnected: false, - isLoading: false, - isConnecting: false, - } - })) - } else { - toast.error(`Failed to disconnect from ${provider}`) - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isLoading: false } - })) - } - } catch (error) { - console.error('Failed to disconnect:', error) - toast.error(`Failed to disconnect from ${provider}`) - setProviderStates(prev => ({ - ...prev, - [provider]: { ...prev[provider], isLoading: false } - })) - } - }, []) - - const hasProviderError = Object.values(providerStatus).some( - (status) => Boolean(status?.error) - ) + const isUnconnectedMode = mode === "unconnected" // Helper to render an OAuth provider row const renderOAuthProvider = (provider: string, displayName: string, icon: React.ReactNode, description: string) => { - const state = providerStates[provider] || { + const state = c.providerStates[provider] || { isConnected: false, isLoading: true, isConnecting: false, } - const needsReconnect = Boolean(providerStatus[provider]?.error) + const needsReconnect = Boolean(c.providerStatus[provider]?.error) + + // In unconnected mode, skip connected providers (unless they need reconnect) + if (isUnconnectedMode && state.isConnected && !needsReconnect && !state.isLoading) { + return null + } return (
    { if (provider === 'google') { - setGoogleClientIdDescription( + c.setGoogleClientIdDescription( "To keep your Google account connected, please re-enter your client ID. You only need to do this once." ) - setGoogleClientIdOpen(true) + c.setGoogleClientIdOpen(true) return } - startConnect(provider) + c.startConnect(provider) }} className="h-7 px-2 text-xs" > @@ -442,23 +98,23 @@ export function ConnectorsPopover({ children, tooltip, open: openProp, onOpenCha ) : ( )} @@ -467,19 +123,57 @@ export function ConnectorsPopover({ children, tooltip, open: openProp, onOpenCha ) } + // Check if Gmail is unconnected (for filtering in unconnected mode) + const isGmailUnconnected = c.useComposioForGoogle ? !c.gmailConnected && !c.gmailLoading : true + const isGoogleCalendarUnconnected = c.useComposioForGoogleCalendar ? !c.googleCalendarConnected && !c.googleCalendarLoading : true + const isGranolaUnconnected = !c.granolaEnabled && !c.granolaLoading + const isSlackUnconnected = !c.slackEnabled && !c.slackLoading + + // For unconnected mode, check if there's anything to show + const hasUnconnectedEmailCalendar = (() => { + if (!isUnconnectedMode) return true + if (c.useComposioForGoogle && isGmailUnconnected) return true + if (c.useComposioForGoogleCalendar && isGoogleCalendarUnconnected) return true + if (!c.useComposioForGoogle && c.providers.includes('google')) { + const googleState = c.providerStates['google'] + if (!googleState?.isConnected || c.providerStatus['google']?.error) return true + } + return false + })() + + const hasUnconnectedMeetingNotes = (() => { + if (!isUnconnectedMode) return true + if (isGranolaUnconnected) return true + if (c.providers.includes('fireflies-ai')) { + const firefliesState = c.providerStates['fireflies-ai'] + if (!firefliesState?.isConnected || c.providerStatus['fireflies-ai']?.error) return true + } + return false + })() + + const hasUnconnectedSlack = !isUnconnectedMode || isSlackUnconnected + + const isRowboatUnconnected = (() => { + if (!c.providers.includes('rowboat')) return false + const rowboatState = c.providerStates['rowboat'] + return !rowboatState?.isConnected || rowboatState?.isLoading + })() + + const allConnected = isUnconnectedMode && !isRowboatUnconnected && !hasUnconnectedEmailCalendar && !hasUnconnectedMeetingNotes && !hasUnconnectedSlack + return ( <> { - setGoogleClientIdOpen(nextOpen) + c.setGoogleClientIdOpen(nextOpen) if (!nextOpen) { - setGoogleClientIdDescription(undefined) + c.setGoogleClientIdDescription(undefined) } }} - onSubmit={handleGoogleClientIdSubmit} - isSubmitting={providerStates.google?.isConnecting ?? false} - description={googleClientIdDescription} + onSubmit={c.handleGoogleClientIdSubmit} + isSubmitting={c.providerStates.google?.isConnecting ?? false} + description={c.googleClientIdDescription} /> {tooltip ? ( @@ -506,129 +200,295 @@ export function ConnectorsPopover({ children, tooltip, open: openProp, onOpenCha >

    - Connected accounts - {hasProviderError && ( + {isUnconnectedMode ? "Connect Accounts" : "Connected accounts"} + {!isUnconnectedMode && c.hasProviderError && ( )}

    - Connect accounts to sync data + {isUnconnectedMode ? "Add new account connections" : "Connect accounts to sync data"}

    - {providersLoading ? ( + {c.providersLoading ? (
    + ) : allConnected ? ( +
    +

    All accounts connected

    +

    + Manage your connections in Settings +

    +
    ) : ( <> - {/* Email & Calendar Section - Google */} - {providers.includes('google') && ( + {/* Rowboat Account - show in "all" mode always, or in "unconnected" mode only when not connected */} + {c.providers.includes('rowboat') && (() => { + const rowboatState = c.providerStates['rowboat'] + const isRowboatConnected = rowboatState?.isConnected && !rowboatState?.isLoading + if (isUnconnectedMode && isRowboatConnected) return null + return ( + <> +
    + Account +
    + {renderOAuthProvider('rowboat', 'Rowboat', , 'Log in to your Rowboat account')} + + + ) + })()} + + {/* Email & Calendar Section */} + {(c.useComposioForGoogle || c.useComposioForGoogleCalendar || c.providers.includes('google')) && hasUnconnectedEmailCalendar && ( <>
    - Email & Calendar + + Email & Calendar +
    - {renderOAuthProvider('google', 'Google', , 'Sync emails and calendar')} + {c.useComposioForGoogle ? ( + // In unconnected mode, only show if not connected + (!isUnconnectedMode || isGmailUnconnected) ? ( +
    +
    +
    + +
    +
    + Gmail + {c.gmailLoading ? ( + Checking... + ) : ( + + Sync emails + + )} +
    +
    +
    + {c.gmailLoading ? ( + + ) : c.gmailConnected ? ( + + ) : ( + + )} +
    +
    + ) : null + ) : ( + renderOAuthProvider('google', 'Google', , 'Sync emails and calendar') + )} + {c.useComposioForGoogleCalendar && (!isUnconnectedMode || isGoogleCalendarUnconnected) && ( +
    +
    +
    + +
    +
    + Google Calendar + {c.googleCalendarLoading ? ( + Checking... + ) : ( + + Sync calendar events + + )} +
    +
    +
    + {c.googleCalendarLoading ? ( + + ) : c.googleCalendarConnected ? ( + + ) : ( + + )} +
    +
    + )} )} - {/* Meeting Notes Section - Granola & Fireflies */} -
    - Meeting Notes -
    + {/* Meeting Notes Section */} + {hasUnconnectedMeetingNotes && ( + <> +
    + Meeting Notes +
    - {/* Granola */} -
    -
    -
    - -
    -
    - Granola - - Local meeting notes - -
    -
    -
    - {granolaLoading && ( - + {/* Granola - show in unconnected mode only if not enabled */} + {(!isUnconnectedMode || isGranolaUnconnected) && ( +
    +
    +
    + +
    +
    + Granola + + Local meeting notes + +
    +
    +
    + {c.granolaLoading && ( + + )} + +
    +
    )} - -
    -
    - {/* Fireflies */} - {providers.includes('fireflies-ai') && renderOAuthProvider('fireflies-ai', 'Fireflies', , 'AI meeting transcripts')} + {/* Fireflies */} + {c.providers.includes('fireflies-ai') && renderOAuthProvider('fireflies-ai', 'Fireflies', , 'AI meeting transcripts')} - + + + )} - {/* Team Communication Section - Slack */} -
    - Team Communication -
    - - {/* Slack */} -
    -
    -
    - + {/* Team Communication Section */} + {hasUnconnectedSlack && ( + <> +
    + Team Communication
    -
    - Slack - {slackLoading ? ( - Checking... - ) : ( - - Send messages and view channels - + +
    +
    +
    +
    + +
    +
    + Slack + {c.slackEnabled && c.slackWorkspaces.length > 0 ? ( + + {c.slackWorkspaces.map(w => w.name).join(', ')} + + ) : ( + + Send messages and view channels + + )} +
    +
    +
    + {(c.slackLoading || c.slackDiscovering) && ( + + )} + {c.slackEnabled ? ( + c.handleSlackDisable()} + disabled={c.slackLoading} + /> + ) : ( + + )} +
    +
    + {c.slackPickerOpen && ( +
    + {c.slackDiscoverError ? ( +

    {c.slackDiscoverError}

    + ) : ( + <> + {c.slackAvailableWorkspaces.map(w => ( + + ))} + + + )} +
    )}
    -
    -
    - {slackLoading ? ( - - ) : slackConnected ? ( - - ) : ( - - )} -
    -
    + + )} )}
    ) diff --git a/apps/x/apps/renderer/src/components/editor-toolbar.tsx b/apps/x/apps/renderer/src/components/editor-toolbar.tsx index bf258633..72b1cb35 100644 --- a/apps/x/apps/renderer/src/components/editor-toolbar.tsx +++ b/apps/x/apps/renderer/src/components/editor-toolbar.tsx @@ -25,18 +25,30 @@ import { ExternalLinkIcon, Trash2Icon, ImageIcon, + DownloadIcon, + FileTextIcon, + FileIcon, + FileTypeIcon, } from 'lucide-react' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu' interface EditorToolbarProps { editor: Editor | null onSelectionHighlight?: (range: { from: number; to: number } | null) => void onImageUpload?: (file: File) => Promise | void + onExport?: (format: 'md' | 'pdf' | 'docx') => void } export function EditorToolbar({ editor, onSelectionHighlight, onImageUpload, + onExport, }: EditorToolbarProps) { const [linkUrl, setLinkUrl] = useState('') const [isLinkPopoverOpen, setIsLinkPopoverOpen] = useState(false) @@ -341,6 +353,38 @@ export function EditorToolbar({ )} + + {/* Export */} + {onExport && ( + <> +
    + + + + + + onExport('md')}> + + Markdown (.md) + + onExport('pdf')}> + + PDF (.pdf) + + onExport('docx')}> + + Word (.docx) + + + + + )}
    ) } diff --git a/apps/x/apps/renderer/src/components/frontmatter-properties.tsx b/apps/x/apps/renderer/src/components/frontmatter-properties.tsx new file mode 100644 index 00000000..0ceb2c76 --- /dev/null +++ b/apps/x/apps/renderer/src/components/frontmatter-properties.tsx @@ -0,0 +1,252 @@ +import { useState, useCallback, useRef, useEffect } from 'react' +import { ChevronRight, X, Plus } from 'lucide-react' +import { extractAllFrontmatterValues, buildFrontmatter } from '@/lib/frontmatter' + +interface FrontmatterPropertiesProps { + raw: string | null + onRawChange: (raw: string | null) => void + editable?: boolean +} + +type FieldEntry = { key: string; value: string | string[] } + +function fieldsFromRaw(raw: string | null): FieldEntry[] { + const record = extractAllFrontmatterValues(raw) + return Object.entries(record).map(([key, value]) => ({ key, value })) +} + +function fieldsToRaw(fields: FieldEntry[]): string | null { + const record: Record = {} + for (const { key, value } of fields) { + if (key.trim()) record[key.trim()] = value + } + return buildFrontmatter(record) +} + +export function FrontmatterProperties({ raw, onRawChange, editable = true }: FrontmatterPropertiesProps) { + const [expanded, setExpanded] = useState(false) + const [fields, setFields] = useState(() => fieldsFromRaw(raw)) + const [editingNewKey, setEditingNewKey] = useState(false) + const newKeyRef = useRef(null) + const lastCommittedRaw = useRef(raw) + + // Sync local fields when raw changes externally (e.g. tab switch) + useEffect(() => { + if (raw !== lastCommittedRaw.current) { + setFields(fieldsFromRaw(raw)) + lastCommittedRaw.current = raw + } + }, [raw]) + + useEffect(() => { + if (editingNewKey && newKeyRef.current) { + newKeyRef.current.focus() + } + }, [editingNewKey]) + + const commit = useCallback((updated: FieldEntry[]) => { + const newRaw = fieldsToRaw(updated) + lastCommittedRaw.current = newRaw + onRawChange(newRaw) + }, [onRawChange]) + + // For scalar fields: update local state immediately, commit on blur + const updateLocalValue = useCallback((index: number, newValue: string) => { + setFields(prev => { + const next = [...prev] + next[index] = { ...next[index], value: newValue } + return next + }) + }, []) + + const commitField = useCallback((_index: number) => { + setFields(prev => { + commit(prev) + return prev + }) + }, [commit]) + + // For array fields and structural changes: update + commit immediately + const updateAndCommit = useCallback((updater: (prev: FieldEntry[]) => FieldEntry[]) => { + setFields(prev => { + const next = updater(prev) + commit(next) + return next + }) + }, [commit]) + + const removeField = useCallback((index: number) => { + updateAndCommit(prev => prev.filter((_, i) => i !== index)) + }, [updateAndCommit]) + + const addField = useCallback((key: string) => { + const trimmed = key.trim() + if (!trimmed) return + if (fields.some(f => f.key === trimmed)) return + updateAndCommit(prev => [...prev, { key: trimmed, value: '' }]) + setEditingNewKey(false) + }, [fields, updateAndCommit]) + + const count = fields.length + + return ( +
    + + + {expanded && ( +
    + {fields.map((field, index) => ( +
    + + {field.key} + +
    + {Array.isArray(field.value) ? ( + updateAndCommit(prev => { + const next = [...prev] + next[index] = { ...next[index], value: v } + return next + })} + /> + ) : ( + updateLocalValue(index, e.target.value)} + onBlur={() => commitField(index)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.currentTarget.blur() + } + }} + /> + )} +
    + {editable && ( + + )} +
    + ))} + + {editable && ( + editingNewKey ? ( +
    + { + if (e.key === 'Enter') { + addField(e.currentTarget.value) + } else if (e.key === 'Escape') { + setEditingNewKey(false) + } + }} + onBlur={(e) => { + if (e.currentTarget.value.trim()) { + addField(e.currentTarget.value) + } else { + setEditingNewKey(false) + } + }} + /> +
    + ) : ( + + ) + )} +
    + )} +
    + ) +} + +function ArrayField({ + value, + editable, + onChange, +}: { + value: string[] + editable: boolean + onChange: (v: string[]) => void +}) { + const removeItem = (index: number) => { + onChange(value.filter((_, i) => i !== index)) + } + + const addItem = (text: string) => { + const trimmed = text.trim() + if (!trimmed) return + onChange([...value, trimmed]) + } + + return ( +
    + {value.map((item, i) => ( + + {item} + {editable && ( + + )} + + ))} + {editable && ( + { + if (e.key === 'Enter' || e.key === ',') { + e.preventDefault() + addItem(e.currentTarget.value) + e.currentTarget.value = '' + } else if (e.key === 'Backspace' && !e.currentTarget.value && value.length > 0) { + removeItem(value.length - 1) + } + }} + onBlur={(e) => { + if (e.currentTarget.value.trim()) { + addItem(e.currentTarget.value) + e.currentTarget.value = '' + } + }} + /> + )} +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/google-client-id-modal.tsx b/apps/x/apps/renderer/src/components/google-client-id-modal.tsx index c4df07a2..3ef536d9 100644 --- a/apps/x/apps/renderer/src/components/google-client-id-modal.tsx +++ b/apps/x/apps/renderer/src/components/google-client-id-modal.tsx @@ -47,19 +47,37 @@ export function GoogleClientIdModal({ return ( - - - Enter Google Client ID - - {description ?? "Enter the client ID for your Google OAuth app to continue."} - - -
    - -
    - Need help setting this up?{" "} + +
    + + Google Client ID + + {description ?? "Enter the client ID for your Google OAuth app to connect."} + + +
    +
    +
    + + setClientId(event.target.value)} + onKeyDown={(event) => { + if (event.key === "Enter") { + event.preventDefault() + handleSubmit() + } + }} + className="font-mono text-xs" + autoFocus + /> +
    +

    + Need help?{" "} Read the setup guide - . -

    - setClientId(event.target.value)} - onKeyDown={(event) => { - if (event.key === "Enter") { - event.preventDefault() - handleSubmit() - } - }} - autoFocus - /> +

    -
    +
    -
    diff --git a/apps/x/apps/renderer/src/components/markdown-editor.tsx b/apps/x/apps/renderer/src/components/markdown-editor.tsx index 37a827cb..2592dec3 100644 --- a/apps/x/apps/renderer/src/components/markdown-editor.tsx +++ b/apps/x/apps/renderer/src/components/markdown-editor.tsx @@ -8,8 +8,16 @@ import Placeholder from '@tiptap/extension-placeholder' import TaskList from '@tiptap/extension-task-list' import TaskItem from '@tiptap/extension-task-item' import { ImageUploadPlaceholderExtension, createImageUploadHandler } from '@/extensions/image-upload' +import { TaskBlockExtension } from '@/extensions/task-block' +import { ImageBlockExtension } from '@/extensions/image-block' +import { EmbedBlockExtension } from '@/extensions/embed-block' +import { ChartBlockExtension } from '@/extensions/chart-block' +import { TableBlockExtension } from '@/extensions/table-block' +import { CalendarBlockExtension } from '@/extensions/calendar-block' +import { EmailBlockExtension } from '@/extensions/email-block' import { Markdown } from 'tiptap-markdown' import { useEffect, useCallback, useMemo, useRef, useState } from 'react' +import { Calendar, ChevronDown, ExternalLink } from 'lucide-react' // Zero-width space used as invisible marker for blank lines const BLANK_LINE_MARKER = '\u200B' @@ -133,6 +141,20 @@ function getMarkdownWithBlankLines(editor: Editor): string { }) }) blocks.push(listLines.join('\n')) + } else if (node.type === 'taskBlock') { + blocks.push('```task\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'imageBlock') { + blocks.push('```image\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'embedBlock') { + blocks.push('```embed\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'chartBlock') { + blocks.push('```chart\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'tableBlock') { + blocks.push('```table\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'calendarBlock') { + blocks.push('```calendar\n' + (node.attrs?.data as string || '{}') + '\n```') + } else if (node.type === 'emailBlock') { + blocks.push('```email\n' + (node.attrs?.data as string || '{}') + '\n```') } else if (node.type === 'codeBlock') { const lang = (node.attrs?.language as string) || '' blocks.push('```' + lang + '\n' + nodeToText(node) + '\n```') @@ -176,12 +198,26 @@ function getMarkdownWithBlankLines(editor: Editor): string { return result } import { EditorToolbar } from './editor-toolbar' +import { FrontmatterProperties } from './frontmatter-properties' import { WikiLink } from '@/extensions/wiki-link' import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover' import { Command, CommandEmpty, CommandItem, CommandList } from '@/components/ui/command' import { ensureMarkdownExtension, normalizeWikiPath, wikiLabel } from '@/lib/wiki-links' +import { extractAllFrontmatterValues, buildFrontmatter } from '@/lib/frontmatter' +import { RowboatMentionPopover } from './rowboat-mention-popover' import '@/styles/editor.css' +type RowboatMentionMatch = { + range: { from: number; to: number } +} + +type RowboatBlockEdit = { + /** ProseMirror position of the taskBlock node */ + nodePos: number + /** Existing instruction text */ + existingText: string +} + type WikiLinkConfig = { files: string[] recent: string[] @@ -189,6 +225,117 @@ type WikiLinkConfig = { onCreate: (path: string) => void | Promise } +// --- Meeting Event Banner --- + +interface ParsedCalendarEvent { + summary?: string + start?: string + end?: string + location?: string + htmlLink?: string + conferenceLink?: string + source?: string +} + +function parseCalendarEvent(raw: string | undefined): ParsedCalendarEvent | null { + if (!raw) return null + // Strip surrounding quotes if present (YAML single-quoted string) + let json = raw + if ((json.startsWith("'") && json.endsWith("'")) || (json.startsWith('"') && json.endsWith('"'))) { + json = json.slice(1, -1) + } + // Unescape doubled single quotes from YAML + json = json.replace(/''/g, "'") + try { + return JSON.parse(json) as ParsedCalendarEvent + } catch { + return null + } +} + +function formatEventTime(start?: string, end?: string): string { + if (!start) return '' + const s = new Date(start) + const startStr = s.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' }) + const startTime = s.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) + if (!end) return `${startStr} \u00b7 ${startTime}` + const e = new Date(end) + const endTime = e.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) + return `${startStr} \u00b7 ${startTime} \u2013 ${endTime}` +} + +function formatEventDate(start?: string): string { + if (!start) return '' + const s = new Date(start) + const today = new Date() + const yesterday = new Date(today) + yesterday.setDate(yesterday.getDate() - 1) + const tomorrow = new Date(today) + tomorrow.setDate(tomorrow.getDate() + 1) + + if (s.toDateString() === today.toDateString()) return 'Today' + if (s.toDateString() === yesterday.toDateString()) return 'Yesterday' + if (s.toDateString() === tomorrow.toDateString()) return 'Tomorrow' + return s.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' }) +} + +function MeetingEventBanner({ frontmatter }: { frontmatter: string | null | undefined }) { + const [open, setOpen] = useState(false) + const ref = useRef(null) + + useEffect(() => { + if (!open) return + const handler = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) + } + document.addEventListener('mousedown', handler) + return () => document.removeEventListener('mousedown', handler) + }, [open]) + + if (!frontmatter) return null + const fields = extractAllFrontmatterValues(frontmatter) + if (fields.type !== 'meeting') return null + + const calStr = typeof fields.calendar_event === 'string' ? fields.calendar_event : undefined + const cal = parseCalendarEvent(calStr) + if (!cal) return null + + return ( +
    + + {open && ( +
    +
    + +
    +
    {cal.summary || 'Meeting'}
    +
    {formatEventTime(cal.start, cal.end)}
    +
    +
    + {cal.htmlLink && ( + + )} +
    + )} +
    + ) +} + +// --- Editor --- + interface MarkdownEditorProps { content: string onChange: (markdown: string) => void @@ -200,6 +347,10 @@ interface MarkdownEditorProps { editorSessionKey?: number onHistoryHandlersChange?: (handlers: { undo: () => boolean; redo: () => boolean } | null) => void editable?: boolean + frontmatter?: string | null + onFrontmatterChange?: (raw: string | null) => void + onExport?: (format: 'md' | 'pdf' | 'docx') => void + notePath?: string } type WikiLinkMatch = { @@ -288,6 +439,10 @@ export function MarkdownEditor({ editorSessionKey = 0, onHistoryHandlersChange, editable = true, + frontmatter, + onFrontmatterChange, + onExport, + notePath, }: MarkdownEditorProps) { const isInternalUpdate = useRef(false) const wrapperRef = useRef(null) @@ -299,6 +454,17 @@ export function MarkdownEditor({ const onPrimaryHeadingCommitRef = useRef(onPrimaryHeadingCommit) const wikiKeyStateRef = useRef<{ open: boolean; options: string[]; value: string }>({ open: false, options: [], value: '' }) const handleSelectWikiLinkRef = useRef<(path: string) => void>(() => {}) + const [activeRowboatMention, setActiveRowboatMention] = useState(null) + const [rowboatBlockEdit, setRowboatBlockEdit] = useState(null) + const [rowboatAnchorTop, setRowboatAnchorTop] = useState<{ top: number; left: number; width: number } | null>(null) + const rowboatBlockEditRef = useRef(null) + + // @ mention autocomplete state (analogous to wiki-link state) + const [activeAtMention, setActiveAtMention] = useState<{ range: { from: number; to: number }; query: string } | null>(null) + const [atAnchorPosition, setAtAnchorPosition] = useState<{ left: number; top: number } | null>(null) + const [atCommandValue, setAtCommandValue] = useState('') + const atKeyStateRef = useRef<{ open: boolean; options: string[]; value: string }>({ open: false, options: [], value: '' }) + const handleSelectAtMentionRef = useRef<(value: string) => void>(() => {}) // Keep ref in sync with state for the plugin to access selectionHighlightRef.current = selectionHighlight @@ -394,6 +560,13 @@ export function MarkdownEditor({ }, }), ImageUploadPlaceholderExtension, + TaskBlockExtension, + ImageBlockExtension, + EmbedBlockExtension, + ChartBlockExtension, + TableBlockExtension, + CalendarBlockExtension, + EmailBlockExtension, WikiLink.configure({ onCreate: wikiLinks?.onCreate ? (path) => { @@ -466,6 +639,39 @@ export function MarkdownEditor({ } } + // @ mention autocomplete keyboard handling + const atState = atKeyStateRef.current + if (atState.open) { + if (event.key === 'Escape') { + event.preventDefault() + event.stopPropagation() + setActiveAtMention(null) + setAtAnchorPosition(null) + setAtCommandValue('') + return true + } + + if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { + if (atState.options.length === 0) return true + event.preventDefault() + event.stopPropagation() + const currentIndex = Math.max(0, atState.options.indexOf(atState.value)) + const delta = event.key === 'ArrowDown' ? 1 : -1 + const nextIndex = (currentIndex + delta + atState.options.length) % atState.options.length + setAtCommandValue(atState.options[nextIndex]) + return true + } + + if (event.key === 'Enter' || event.key === 'Tab') { + if (atState.options.length === 0) return true + event.preventDefault() + event.stopPropagation() + const selected = atState.options.includes(atState.value) ? atState.value : atState.options[0] + handleSelectAtMentionRef.current(selected) + return true + } + } + if (preventTitleHeadingDemotion(view, event)) { return true } @@ -570,6 +776,118 @@ export function MarkdownEditor({ }) }, [editor, wikiLinks]) + const updateRowboatMentionState = useCallback(() => { + if (!editor) return + const { selection } = editor.state + if (!selection.empty) { + setActiveRowboatMention(null) + setRowboatAnchorTop(null) + return + } + + const { $from } = selection + if ($from.parent.type.spec.code) { + setActiveRowboatMention(null) + setRowboatAnchorTop(null) + return + } + + const text = $from.parent.textBetween(0, $from.parent.content.size, '\n', '\n') + const textBefore = text.slice(0, $from.parentOffset) + + // Match @rowboat at a word boundary (preceded by nothing or whitespace) + const match = textBefore.match(/(^|\s)@rowboat$/) + if (!match) { + setActiveRowboatMention(null) + setRowboatAnchorTop(null) + return + } + + const triggerStart = textBefore.length - '@rowboat'.length + const from = selection.from - (textBefore.length - triggerStart) + const to = selection.from + setActiveRowboatMention({ range: { from, to } }) + + const wrapper = wrapperRef.current + if (!wrapper) { + setRowboatAnchorTop(null) + return + } + + const coords = editor.view.coordsAtPos(selection.from) + const wrapperRect = wrapper.getBoundingClientRect() + const proseMirrorEl = wrapper.querySelector('.ProseMirror') as HTMLElement | null + const pmRect = proseMirrorEl?.getBoundingClientRect() + setRowboatAnchorTop({ + top: coords.top - wrapperRect.top + wrapper.scrollTop, + left: pmRect ? pmRect.left - wrapperRect.left : 0, + width: pmRect ? pmRect.width : wrapperRect.width, + }) + }, [editor]) + + // Detect @ trigger for autocomplete popover (similar to [[ detection) + const updateAtMentionState = useCallback(() => { + if (!editor) return + const { selection } = editor.state + if (!selection.empty) { + setActiveAtMention(null) + setAtAnchorPosition(null) + return + } + + const { $from } = selection + // Skip code blocks + if ($from.parent.type.spec.code) { + setActiveAtMention(null) + setAtAnchorPosition(null) + return + } + // Skip inline code marks + if ($from.marks().some((mark) => mark.type.spec.code)) { + setActiveAtMention(null) + setAtAnchorPosition(null) + return + } + + const text = $from.parent.textBetween(0, $from.parent.content.size, '\n', '\n') + const textBefore = text.slice(0, $from.parentOffset) + + // Find @ at a word boundary (start of line or preceded by whitespace) + const atMatch = textBefore.match(/(^|[\s])@([a-zA-Z0-9]*)$/) + if (!atMatch) { + setActiveAtMention(null) + setAtAnchorPosition(null) + return + } + + const query = atMatch[2] // text after @ + + // If the full "@rowboat" is already typed, let updateRowboatMentionState handle it + if (query === 'rowboat') { + setActiveAtMention(null) + setAtAnchorPosition(null) + return + } + + const atSymbolOffset = textBefore.lastIndexOf('@') + const matchText = textBefore.slice(atSymbolOffset) + const range = { from: selection.from - matchText.length, to: selection.from } + setActiveAtMention({ range, query }) + + const wrapper = wrapperRef.current + if (!wrapper) { + setAtAnchorPosition(null) + return + } + + const coords = editor.view.coordsAtPos(selection.from) + const wrapperRect = wrapper.getBoundingClientRect() + setAtAnchorPosition({ + left: coords.left - wrapperRect.left, + top: coords.bottom - wrapperRect.top, + }) + }, [editor]) + useEffect(() => { if (!editor || !wikiLinks) return editor.on('update', updateWikiLinkState) @@ -580,6 +898,42 @@ export function MarkdownEditor({ } }, [editor, wikiLinks, updateWikiLinkState]) + useEffect(() => { + if (!editor) return + editor.on('update', updateRowboatMentionState) + editor.on('selectionUpdate', updateRowboatMentionState) + return () => { + editor.off('update', updateRowboatMentionState) + editor.off('selectionUpdate', updateRowboatMentionState) + } + }, [editor, updateRowboatMentionState]) + + useEffect(() => { + if (!editor) return + editor.on('update', updateAtMentionState) + editor.on('selectionUpdate', updateAtMentionState) + return () => { + editor.off('update', updateAtMentionState) + editor.off('selectionUpdate', updateAtMentionState) + } + }, [editor, updateAtMentionState]) + + // When a tell-rowboat block is clicked, compute anchor and open popover + useEffect(() => { + if (!rowboatBlockEdit || !editor) return + const wrapper = wrapperRef.current + if (!wrapper) return + const coords = editor.view.coordsAtPos(rowboatBlockEdit.nodePos) + const wrapperRect = wrapper.getBoundingClientRect() + const proseMirrorEl = wrapper.querySelector('.ProseMirror') as HTMLElement | null + const pmRect = proseMirrorEl?.getBoundingClientRect() + setRowboatAnchorTop({ + top: coords.top - wrapperRect.top + wrapper.scrollTop, + left: pmRect ? pmRect.left - wrapperRect.left : 0, + width: pmRect ? pmRect.width : wrapperRect.width, + }) + }, [editor, rowboatBlockEdit]) + // Update editor content when prop changes (e.g., file selection changes) useEffect(() => { if (editor && content !== undefined) { @@ -670,9 +1024,190 @@ export function MarkdownEditor({ handleSelectWikiLinkRef.current = handleSelectWikiLink }, [handleSelectWikiLink]) + const handleRowboatAdd = useCallback(async (instruction: string) => { + if (!editor) return + + if (rowboatBlockEdit) { + // Editing existing taskBlock — update its data attribute + const { nodePos } = rowboatBlockEdit + const node = editor.state.doc.nodeAt(nodePos) + if (node && node.type.name === 'taskBlock') { + // Preserve existing schedule data + let updated: Record = { instruction } + try { + const existing = JSON.parse(node.attrs.data || '{}') + updated = { ...existing, instruction } + } catch { + // Invalid JSON — just write new + } + const tr = editor.state.tr.setNodeMarkup(nodePos, undefined, { data: JSON.stringify(updated) }) + editor.view.dispatch(tr) + } + setRowboatBlockEdit(null) + rowboatBlockEditRef.current = null + setRowboatAnchorTop(null) + return + } + + if (activeRowboatMention) { + // Insert a temporary processing block + const blockData: Record = { instruction, processing: true } + + const insertFrom = activeRowboatMention.range.from + const insertTo = activeRowboatMention.range.to + + editor + .chain() + .focus() + .insertContentAt( + { from: insertFrom, to: insertTo }, + [ + { type: 'taskBlock', attrs: { data: JSON.stringify(blockData) } }, + { type: 'paragraph' }, + ], + ) + .run() + + setActiveRowboatMention(null) + setRowboatAnchorTop(null) + + // Get editor content for the agent + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const editorContent = (editor.storage as any).markdown?.getMarkdown?.() ?? '' + + // Helper to find the processing block + const findProcessingBlock = (): number | null => { + let pos: number | null = null + editor.state.doc.descendants((node, p) => { + if (pos !== null) return false + if (node.type.name === 'taskBlock') { + try { + const data = JSON.parse(node.attrs.data || '{}') + if (data.instruction === instruction && data.processing === true) { + pos = p + return false + } + } catch { /* skip */ } + } + }) + return pos + } + + try { + // Call the copilot assistant for both one-time and recurring tasks + const result = await window.ipc.invoke('inline-task:process', { + instruction, + noteContent: editorContent, + notePath: notePath ?? '', + }) + + const currentPos = findProcessingBlock() + if (currentPos === null) return + + const node = editor.state.doc.nodeAt(currentPos) + if (!node) return + + if (result.schedule) { + // Recurring/scheduled task: update block with schedule, write target tags to disk + const targetId = Math.random().toString(36).slice(2, 10) + const updatedData: Record = { + instruction: result.instruction, + schedule: result.schedule, + 'schedule-label': result.scheduleLabel, + targetId, + } + const tr = editor.state.tr.setNodeMarkup(currentPos, undefined, { + data: JSON.stringify(updatedData), + }) + editor.view.dispatch(tr) + + // Mark note as live + if (onFrontmatterChange) { + const fields = extractAllFrontmatterValues(frontmatter ?? null) + fields['live_note'] = 'true' + onFrontmatterChange(buildFrontmatter(fields)) + } + + // Write target tags directly to the file on disk after a short delay + // to let the editor save the updated content first + if (notePath) { + setTimeout(async () => { + try { + const file = await window.ipc.invoke('workspace:readFile', { path: notePath }) + const content = file.data + const openTag = `` + const closeTag = `` + + // Only add if not already present + if (content.includes(openTag)) return + + // Find the task block in the raw markdown and insert target tags after it + const blockJson = JSON.stringify(updatedData) + const blockStart = content.indexOf('```task\n' + blockJson) + if (blockStart !== -1) { + const blockEnd = content.indexOf('\n```', blockStart + 8) + if (blockEnd !== -1) { + const insertAt = blockEnd + 4 // after the closing ``` + const before = content.slice(0, insertAt) + const after = content.slice(insertAt) + const updated = before + '\n\n' + openTag + '\n' + closeTag + after + await window.ipc.invoke('workspace:writeFile', { + path: notePath, + data: updated, + opts: { encoding: 'utf8' }, + }) + } + } + } catch (err) { + console.error('[RowboatAdd] Failed to write target tags:', err) + } + }, 500) + } + } else { + // One-time task: remove the processing block, insert response in its place + const insertPos = currentPos + const deleteEnd = currentPos + node.nodeSize + editor.chain().focus().deleteRange({ from: insertPos, to: deleteEnd }).run() + + if (result.response) { + editor.chain().insertContentAt(insertPos, result.response).run() + } + } + } catch (error) { + console.error('[RowboatAdd] Processing failed:', error) + + // Remove the processing block on error + const currentPos = findProcessingBlock() + if (currentPos !== null) { + const node = editor.state.doc.nodeAt(currentPos) + if (node) { + editor.chain().focus().deleteRange({ from: currentPos, to: currentPos + node.nodeSize }).run() + } + } + } + } + }, [editor, activeRowboatMention, rowboatBlockEdit, frontmatter, onFrontmatterChange, notePath]) + + const handleRowboatRemove = useCallback(() => { + if (!editor || !rowboatBlockEdit) return + const { nodePos } = rowboatBlockEdit + const node = editor.state.doc.nodeAt(nodePos) + if (node) { + editor + .chain() + .focus() + .deleteRange({ from: nodePos, to: nodePos + node.nodeSize }) + .run() + } + setRowboatBlockEdit(null) + rowboatBlockEditRef.current = null + setRowboatAnchorTop(null) + }, [editor, rowboatBlockEdit]) + const handleScroll = useCallback(() => { updateWikiLinkState() - }, [updateWikiLinkState]) + updateAtMentionState() + }, [updateWikiLinkState, updateAtMentionState]) const showWikiPopover = Boolean(wikiLinks && activeWikiLink && anchorPosition) const wikiOptions = useMemo(() => { @@ -700,6 +1235,63 @@ export function MarkdownEditor({ setWikiCommandValue((prev) => (wikiOptions.includes(prev) ? prev : wikiOptions[0])) }, [showWikiPopover, wikiOptions]) + // @ mention autocomplete options + const atMentionOptions = useMemo(() => [ + { value: 'rowboat', label: '@rowboat', description: 'Research, schedule, or run tasks with AI' }, + ], []) + + const filteredAtOptions = useMemo(() => { + if (!activeAtMention) return [] + const q = activeAtMention.query.toLowerCase() + if (!q) return atMentionOptions + return atMentionOptions.filter((opt) => opt.value.toLowerCase().startsWith(q)) + }, [activeAtMention, atMentionOptions]) + + const atOptionValues = useMemo(() => filteredAtOptions.map((o) => o.value), [filteredAtOptions]) + const showAtPopover = Boolean(activeAtMention && atAnchorPosition && filteredAtOptions.length > 0) + + useEffect(() => { + atKeyStateRef.current = { open: showAtPopover, options: atOptionValues, value: atCommandValue } + }, [showAtPopover, atOptionValues, atCommandValue]) + + // Keep @ cmdk selection in sync + useEffect(() => { + if (!showAtPopover) { + setAtCommandValue('') + return + } + if (atOptionValues.length === 0) { + setAtCommandValue('') + return + } + setAtCommandValue((prev) => (atOptionValues.includes(prev) ? prev : atOptionValues[0])) + }, [showAtPopover, atOptionValues]) + + // @ mention selection handler + const handleSelectAtMention = useCallback((value: string) => { + if (!editor || !activeAtMention) return + + if (value === 'rowboat') { + // Replace "@" with "@rowboat" — this triggers updateRowboatMentionState + editor + .chain() + .focus() + .insertContentAt( + { from: activeAtMention.range.from, to: activeAtMention.range.to }, + '@rowboat' + ) + .run() + } + + setActiveAtMention(null) + setAtAnchorPosition(null) + setAtCommandValue('') + }, [editor, activeAtMention]) + + useEffect(() => { + handleSelectAtMentionRef.current = handleSelectAtMention + }, [handleSelectAtMention]) + // Handle keyboard shortcuts const handleKeyDown = useCallback((event: React.KeyboardEvent) => { if (event.key === 's' && (event.metaKey || event.ctrlKey)) { @@ -720,7 +1312,16 @@ export function MarkdownEditor({ editor={editor} onSelectionHighlight={setSelectionHighlight} onImageUpload={handleImageUploadWithPlaceholder} + onExport={onExport} /> + {(frontmatter !== undefined) && onFrontmatterChange && ( + + )} +
    {wikiLinks ? ( @@ -777,6 +1378,64 @@ export function MarkdownEditor({ ) : null} + {/* @ mention autocomplete popover */} + { + if (!open) { + setActiveAtMention(null) + setAtAnchorPosition(null) + setAtCommandValue('') + } + }} + > + + + + event.preventDefault()} + > + + + {filteredAtOptions.map((opt) => ( + handleSelectAtMention(opt.value)} + > +
    + {opt.label} + {opt.description} +
    +     + ))} +     +     +     +     + { + setActiveRowboatMention(null) + setRowboatBlockEdit(null) + rowboatBlockEditRef.current = null + setRowboatAnchorTop(null) + }} + />
    ) diff --git a/apps/x/apps/renderer/src/components/onboarding-modal.tsx b/apps/x/apps/renderer/src/components/onboarding-modal.tsx index 9398f2fe..82064205 100644 --- a/apps/x/apps/renderer/src/components/onboarding-modal.tsx +++ b/apps/x/apps/renderer/src/components/onboarding-modal.tsx @@ -2,8 +2,7 @@ import * as React from "react" import { useState, useEffect, useCallback } from "react" -import { Loader2, Mic, Mail, CheckCircle2 } from "lucide-react" -// import { MessageSquare } from "lucide-react" +import { Loader2, Mic, Mail, Calendar, CheckCircle2, ArrowLeft, MessageSquare } from "lucide-react" import { Dialog, @@ -23,10 +22,10 @@ import { SelectValue, } from "@/components/ui/select" import { cn } from "@/lib/utils" -import { ComposioApiKeyModal } from "@/components/composio-api-key-modal" import { GoogleClientIdModal } from "@/components/google-client-id-modal" import { getGoogleClientId, setGoogleClientId } from "@/lib/google-client-id-store" import { toast } from "sonner" +import { ComposioApiKeyModal } from "@/components/composio-api-key-modal" interface ProviderState { isConnected: boolean @@ -39,7 +38,9 @@ interface OnboardingModalProps { onComplete: () => void } -type Step = 0 | 1 | 2 +type Step = 0 | 1 | 2 | 3 | 4 + +type OnboardingPath = 'rowboat' | 'byok' | null type LlmProviderFlavor = "openai" | "anthropic" | "google" | "openrouter" | "aigateway" | "ollama" | "openai-compatible" @@ -51,6 +52,7 @@ interface LlmModelOption { export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { const [currentStep, setCurrentStep] = useState(0) + const [onboardingPath, setOnboardingPath] = useState(null) // LLM setup state const [llmProvider, setLlmProvider] = useState("openai") @@ -80,11 +82,31 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { const [granolaLoading, setGranolaLoading] = useState(true) const [showMoreProviders, setShowMoreProviders] = useState(false) - // Composio/Slack state + // Composio API key state const [composioApiKeyOpen, setComposioApiKeyOpen] = useState(false) - const [slackConnected, setSlackConnected] = useState(false) - // const [slackLoading, setSlackLoading] = useState(true) - const [slackConnecting, setSlackConnecting] = useState(false) + const [, setComposioApiKeyTarget] = useState<'slack' | 'gmail'>('gmail') + + // Slack state (agent-slack CLI) + const [slackEnabled, setSlackEnabled] = useState(false) + const [slackLoading, setSlackLoading] = useState(true) + const [slackWorkspaces, setSlackWorkspaces] = useState>([]) + const [slackAvailableWorkspaces, setSlackAvailableWorkspaces] = useState>([]) + const [slackSelectedUrls, setSlackSelectedUrls] = useState>(new Set()) + const [slackPickerOpen, setSlackPickerOpen] = useState(false) + const [slackDiscovering, setSlackDiscovering] = useState(false) + const [slackDiscoverError, setSlackDiscoverError] = useState(null) + + // Composio/Gmail state + const [useComposioForGoogle, setUseComposioForGoogle] = useState(false) + const [gmailConnected, setGmailConnected] = useState(false) + const [gmailLoading, setGmailLoading] = useState(true) + const [gmailConnecting, setGmailConnecting] = useState(false) + + // Composio/Google Calendar state + const [useComposioForGoogleCalendar, setUseComposioForGoogleCalendar] = useState(false) + const [googleCalendarConnected, setGoogleCalendarConnected] = useState(false) + const [googleCalendarLoading, setGoogleCalendarLoading] = useState(true) + const [googleCalendarConnecting, setGoogleCalendarConnecting] = useState(false) const updateProviderConfig = useCallback( (provider: LlmProviderFlavor, updates: Partial<{ apiKey: string; baseURL: string; model: string; knowledgeGraphModel: string }>) => { @@ -113,7 +135,7 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { .filter(([, state]) => state.isConnected) .map(([provider]) => provider) - // Load available providers on mount + // Load available providers and composio-for-google flag on mount useEffect(() => { if (!open) return @@ -129,7 +151,25 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { setProvidersLoading(false) } } + async function loadComposioForGoogleFlag() { + try { + const result = await window.ipc.invoke('composio:use-composio-for-google', null) + setUseComposioForGoogle(result.enabled) + } catch (error) { + console.error('Failed to check composio-for-google flag:', error) + } + } + async function loadComposioForGoogleCalendarFlag() { + try { + const result = await window.ipc.invoke('composio:use-composio-for-google-calendar', null) + setUseComposioForGoogleCalendar(result.enabled) + } catch (error) { + console.error('Failed to check composio-for-google-calendar flag:', error) + } + } loadProviders() + loadComposioForGoogleFlag() + loadComposioForGoogleCalendarFlag() }, [open]) // Load LLM models catalog on open @@ -212,49 +252,127 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { } }, []) - // Load Slack connection status - const refreshSlackStatus = useCallback(async () => { + // Load Slack config + const refreshSlackConfig = useCallback(async () => { try { - // setSlackLoading(true) - const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'slack' }) - setSlackConnected(result.isConnected) + setSlackLoading(true) + const result = await window.ipc.invoke('slack:getConfig', null) + setSlackEnabled(result.enabled) + setSlackWorkspaces(result.workspaces || []) } catch (error) { - console.error('Failed to load Slack status:', error) - setSlackConnected(false) + console.error('Failed to load Slack config:', error) + setSlackEnabled(false) + setSlackWorkspaces([]) } finally { - // setSlackLoading(false) + setSlackLoading(false) } }, []) - // Start Slack connection - const startSlackConnect = useCallback(async () => { + // Enable Slack: discover workspaces + const handleSlackEnable = useCallback(async () => { + setSlackDiscovering(true) + setSlackDiscoverError(null) try { - setSlackConnecting(true) - const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'slack' }) - if (!result.success) { - toast.error(result.error || 'Failed to connect to Slack') - setSlackConnecting(false) + const result = await window.ipc.invoke('slack:listWorkspaces', null) + if (result.error || result.workspaces.length === 0) { + setSlackDiscoverError(result.error || 'No Slack workspaces found. Set up with: agent-slack auth import-desktop') + setSlackAvailableWorkspaces([]) + setSlackPickerOpen(true) + } else { + setSlackAvailableWorkspaces(result.workspaces) + setSlackSelectedUrls(new Set(result.workspaces.map((w: { url: string }) => w.url))) + setSlackPickerOpen(true) } - // Success will be handled by composio:didConnect event } catch (error) { - console.error('Failed to connect to Slack:', error) - toast.error('Failed to connect to Slack') - setSlackConnecting(false) + console.error('Failed to discover Slack workspaces:', error) + setSlackDiscoverError('Failed to discover Slack workspaces') + setSlackPickerOpen(true) + } finally { + setSlackDiscovering(false) } }, []) - // Connect to Slack via Composio (checks if configured first) - /* - const handleConnectSlack = useCallback(async () => { - // Check if Composio is configured + // Load Gmail connection status + const refreshGmailStatus = useCallback(async () => { + try { + setGmailLoading(true) + const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'gmail' }) + setGmailConnected(result.isConnected) + } catch (error) { + console.error('Failed to load Gmail status:', error) + setGmailConnected(false) + } finally { + setGmailLoading(false) + } + }, []) + + // Load Google Calendar connection status + const refreshGoogleCalendarStatus = useCallback(async () => { + try { + setGoogleCalendarLoading(true) + const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'googlecalendar' }) + setGoogleCalendarConnected(result.isConnected) + } catch (error) { + console.error('Failed to load Google Calendar status:', error) + setGoogleCalendarConnected(false) + } finally { + setGoogleCalendarLoading(false) + } + }, []) + + // Connect to Gmail via Composio + const startGmailConnect = useCallback(async () => { + try { + setGmailConnecting(true) + const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'gmail' }) + if (!result.success) { + toast.error(result.error || 'Failed to connect to Gmail') + setGmailConnecting(false) + } + } catch (error) { + console.error('Failed to connect to Gmail:', error) + toast.error('Failed to connect to Gmail') + setGmailConnecting(false) + } + }, []) + + // Handle Gmail connect button click + const handleConnectGmail = useCallback(async () => { const configResult = await window.ipc.invoke('composio:is-configured', null) if (!configResult.configured) { + setComposioApiKeyTarget('gmail') setComposioApiKeyOpen(true) return } - await startSlackConnect() - }, [startSlackConnect]) - */ + await startGmailConnect() + }, [startGmailConnect]) + + // Connect to Google Calendar via Composio + const startGoogleCalendarConnect = useCallback(async () => { + try { + setGoogleCalendarConnecting(true) + const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'googlecalendar' }) + if (!result.success) { + toast.error(result.error || 'Failed to connect to Google Calendar') + setGoogleCalendarConnecting(false) + } + } catch (error) { + console.error('Failed to connect to Google Calendar:', error) + toast.error('Failed to connect to Google Calendar') + setGoogleCalendarConnecting(false) + } + }, []) + + // Handle Google Calendar connect button click + const handleConnectGoogleCalendar = useCallback(async () => { + const configResult = await window.ipc.invoke('composio:is-configured', null) + if (!configResult.configured) { + setComposioApiKeyTarget('gmail') + setComposioApiKeyOpen(true) + return + } + await startGoogleCalendarConnect() + }, [startGoogleCalendarConnect]) // Handle Composio API key submission const handleComposioApiKeySubmit = useCallback(async (apiKey: string) => { @@ -262,20 +380,72 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { await window.ipc.invoke('composio:set-api-key', { apiKey }) setComposioApiKeyOpen(false) toast.success('Composio API key saved') - // Now start the Slack connection - await startSlackConnect() + await startGmailConnect() } catch (error) { console.error('Failed to save Composio API key:', error) toast.error('Failed to save API key') } - }, [startSlackConnect]) + }, [startGmailConnect]) + + // Save selected Slack workspaces + const handleSlackSaveWorkspaces = useCallback(async () => { + const selected = slackAvailableWorkspaces.filter(w => slackSelectedUrls.has(w.url)) + try { + setSlackLoading(true) + await window.ipc.invoke('slack:setConfig', { enabled: true, workspaces: selected }) + setSlackEnabled(true) + setSlackWorkspaces(selected) + setSlackPickerOpen(false) + toast.success('Slack enabled') + } catch (error) { + console.error('Failed to save Slack config:', error) + toast.error('Failed to save Slack settings') + } finally { + setSlackLoading(false) + } + }, [slackAvailableWorkspaces, slackSelectedUrls]) + + // Disable Slack + const handleSlackDisable = useCallback(async () => { + try { + setSlackLoading(true) + await window.ipc.invoke('slack:setConfig', { enabled: false, workspaces: [] }) + setSlackEnabled(false) + setSlackWorkspaces([]) + setSlackPickerOpen(false) + toast.success('Slack disabled') + } catch (error) { + console.error('Failed to update Slack config:', error) + toast.error('Failed to update Slack settings') + } finally { + setSlackLoading(false) + } + }, []) const handleNext = () => { - if (currentStep < 2) { + if (currentStep < 4) { setCurrentStep((prev) => (prev + 1) as Step) } } + const handleBack = () => { + if (currentStep === 1) { + // BYOK upsell → back to sign-in page + setOnboardingPath(null) + setCurrentStep(0 as Step) + } else if (currentStep === 2) { + // LLM setup → back to BYOK upsell + setCurrentStep(1 as Step) + } else if (currentStep === 3) { + // Connect accounts → back depends on path + if (onboardingPath === 'rowboat') { + setCurrentStep(0 as Step) + } else { + setCurrentStep(2 as Step) + } + } + } + const handleComplete = () => { onComplete() } @@ -319,8 +489,18 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { // Refresh Granola refreshGranolaConfig() - // Refresh Slack status - refreshSlackStatus() + // Refresh Slack config + refreshSlackConfig() + + // Refresh Gmail Composio status if enabled + if (useComposioForGoogle) { + refreshGmailStatus() + } + + // Refresh Google Calendar Composio status if enabled + if (useComposioForGoogleCalendar) { + refreshGoogleCalendarStatus() + } // Refresh OAuth providers if (providers.length === 0) return @@ -349,7 +529,7 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { } setProviderStates(newStates) - }, [providers, refreshGranolaConfig, refreshSlackStatus]) + }, [providers, refreshGranolaConfig, refreshSlackConfig, refreshGmailStatus, useComposioForGoogle, refreshGoogleCalendarStatus, useComposioForGoogleCalendar]) // Refresh statuses when modal opens or providers list changes useEffect(() => { @@ -358,10 +538,10 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { } }, [open, providers, refreshAllStatuses]) - // Listen for OAuth completion events + // Listen for OAuth completion events (state updates only — toasts handled by ConnectorsPopover) useEffect(() => { const cleanup = window.ipc.on('oauth:didConnect', (event) => { - const { provider, success, error } = event + const { provider, success } = event setProviderStates(prev => ({ ...prev, @@ -371,38 +551,44 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { isConnecting: false, } })) - - if (success) { - const displayName = provider === 'fireflies-ai' ? 'Fireflies' : provider.charAt(0).toUpperCase() + provider.slice(1) - toast.success(`Connected to ${displayName}`) - } else { - toast.error(error || `Failed to connect to ${provider}`) - } }) return cleanup }, []) - // Listen for Composio connection events + // Auto-advance from Rowboat sign-in step when OAuth completes + useEffect(() => { + if (onboardingPath !== 'rowboat' || currentStep !== 0) return + + const cleanup = window.ipc.on('oauth:didConnect', (event) => { + if (event.provider === 'rowboat' && event.success) { + setCurrentStep(3 as Step) + } + }) + + return cleanup + }, [onboardingPath, currentStep]) + + // Listen for Composio connection events (state updates only — toasts handled by ConnectorsPopover) useEffect(() => { const cleanup = window.ipc.on('composio:didConnect', (event) => { - const { toolkitSlug, success, error } = event + const { toolkitSlug, success } = event - if (toolkitSlug === 'slack') { - setSlackConnected(success) - setSlackConnecting(false) + if (toolkitSlug === 'gmail') { + setGmailConnected(success) + setGmailConnecting(false) + } - if (success) { - toast.success('Connected to Slack') - } else { - toast.error(error || 'Failed to connect to Slack') - } + if (toolkitSlug === 'googlecalendar') { + setGoogleCalendarConnected(success) + setGoogleCalendarConnecting(false) } }) return cleanup }, []) + const startConnect = useCallback(async (provider: string, clientId?: string) => { setProviderStates(prev => ({ ...prev, @@ -450,20 +636,30 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { startConnect('google', clientId) }, [startConnect]) - // Step indicator - const renderStepIndicator = () => ( -
    - {[0, 1, 2].map((step) => ( -
    = step ? "bg-primary" : "bg-muted" - )} - /> - ))} -
    - ) + // Step indicator - dynamic based on path + const renderStepIndicator = () => { + // Rowboat path: Sign In (0), Connect (3), Done (4) = 3 dots + // BYOK path: Sign In (0), Upsell (1), Model (2), Connect (3), Done (4) = 5 dots + // Before path is chosen: show 3 dots (minimal) + const rowboatSteps = [0, 3, 4] + const byokSteps = [0, 1, 2, 3, 4] + const steps = onboardingPath === 'byok' ? byokSteps : rowboatSteps + const currentIndex = steps.indexOf(currentStep) + + return ( +
    + {steps.map((_, i) => ( +
    = i ? "bg-primary" : "bg-muted" + )} + /> + ))} +
    + ) + } // Helper to render an OAuth provider row const renderOAuthProvider = (provider: string, displayName: string, icon: React.ReactNode, description: string) => { @@ -545,29 +741,28 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) {
    ) - // Render Slack row - /* - const renderSlackRow = () => ( + // Render Gmail Composio row + const renderGmailRow = () => (
    - +
    - Slack - {slackLoading ? ( + Gmail + {gmailLoading ? ( Checking... ) : ( - Send messages and view channels + Sync emails )}
    - {slackLoading ? ( + {gmailLoading ? ( - ) : slackConnected ? ( + ) : gmailConnected ? (
    Connected @@ -576,10 +771,10 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) {
    ) - */ - // Step 0: LLM Setup + // Render Google Calendar Composio row + const renderGoogleCalendarRow = () => ( +
    +
    +
    + +
    +
    + Google Calendar + {googleCalendarLoading ? ( + Checking... + ) : ( + + Sync calendar events + + )} +
    +
    +
    + {googleCalendarLoading ? ( + + ) : googleCalendarConnected ? ( +
    + + Connected +
    + ) : ( + + )} +
    +
    + ) + + // Render Slack row + const renderSlackRow = () => ( +
    +
    +
    +
    + +
    +
    + Slack + {slackEnabled && slackWorkspaces.length > 0 ? ( + + {slackWorkspaces.map(w => w.name).join(', ')} + + ) : ( + + Send messages and view channels + + )} +
    +
    +
    + {(slackLoading || slackDiscovering) && ( + + )} + {slackEnabled ? ( + handleSlackDisable()} + disabled={slackLoading} + /> + ) : ( + + )} +
    +
    + {slackPickerOpen && ( +
    + {slackDiscoverError ? ( +

    {slackDiscoverError}

    + ) : ( + <> + {slackAvailableWorkspaces.map(w => ( + + ))} + + + )} +
    + )} +
    + ) + + // Step 0: Sign in to Rowboat (with BYOK option) + const renderSignInStep = () => { + const rowboatState = providerStates['rowboat'] || { isConnected: false, isLoading: false, isConnecting: false } + + return ( +
    +
    + Your AI coworker, with memory +
    + + Sign in to Rowboat + + Connect your Rowboat account for instant access to all models through our gateway — no API keys needed. + + + + {rowboatState.isConnected ? ( +
    +
    + + Connected to Rowboat +
    + +
    + ) : ( +
    + + {rowboatState.isConnecting && ( +

    + Complete sign in in your browser, then return here. +

    + )} +
    + )} + +
    + +
    +
    + ) + } + + // Step 1: BYOK upsell — explain benefits of Rowboat before continuing with BYOK + const renderByokUpsellStep = () => ( +
    + + Before you continue + + With a Rowboat account, you get: + + + +
    +
    + +
    +
    Instant access to all models
    +
    GPT, Claude, Gemini, and more — no separate API keys needed
    +
    +
    +
    + +
    +
    Simplified billing
    +
    One account for everything — no juggling multiple provider subscriptions
    +
    +
    +
    + +
    +
    Automatic updates
    +
    New models are available as soon as they launch, with no configuration changes
    +
    +
    +
    + +

    + By continuing, you'll set up your own API keys instead of using Rowboat's managed gateway. +

    + +
    + + +
    +
    + ) + + // Step 2 (BYOK path): LLM Setup const renderLlmSetupStep = () => { const primaryProviders: Array<{ id: LlmProviderFlavor; name: string; description: string }> = [ { id: "openai", name: "OpenAI", description: "Use your OpenAI API key" }, @@ -767,10 +1202,13 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) {
    )} -
    +
    +
    + {/* Team Communication Section */} +
    +
    + Team Communication +
    + {renderSlackRow()} +
    )}
    @@ -828,16 +1279,22 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { - +
    + + +
    ) - // Step 2: Completion + // Step 4: Completion const renderCompletionStep = () => { - const hasConnections = connectedProviders.length > 0 || granolaEnabled || slackConnected + const hasConnections = connectedProviders.length > 0 || granolaEnabled || slackEnabled || gmailConnected || googleCalendarConnected return (
    @@ -860,6 +1317,18 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) {

    Connected accounts:

    + {gmailConnected && ( +
    + + Gmail (Email) +
    + )} + {googleCalendarConnected && ( +
    + + Google Calendar +
    + )} {connectedProviders.includes('google') && (
    @@ -878,7 +1347,7 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { Granola (Local meeting notes)
    )} - {slackConnected && ( + {slackEnabled && (
    Slack (Team communication) @@ -908,7 +1377,7 @@ export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { open={composioApiKeyOpen} onOpenChange={setComposioApiKeyOpen} onSubmit={handleComposioApiKeySubmit} - isSubmitting={slackConnecting} + isSubmitting={gmailConnecting} /> {}}> e.preventDefault()} > {renderStepIndicator()} - {currentStep === 0 && renderLlmSetupStep()} - {currentStep === 1 && renderAccountConnectionStep()} - {currentStep === 2 && renderCompletionStep()} + {currentStep === 0 && renderSignInStep()} + {currentStep === 1 && renderByokUpsellStep()} + {currentStep === 2 && renderLlmSetupStep()} + {currentStep === 3 && renderAccountConnectionStep()} + {currentStep === 4 && renderCompletionStep()} diff --git a/apps/x/apps/renderer/src/components/onboarding/index.tsx b/apps/x/apps/renderer/src/components/onboarding/index.tsx new file mode 100644 index 00000000..d37cdf0f --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/index.tsx @@ -0,0 +1,83 @@ +"use client" + +import * as React from "react" +import { AnimatePresence, motion } from "motion/react" + +import { + Dialog, + DialogContent, +} from "@/components/ui/dialog" +import { GoogleClientIdModal } from "@/components/google-client-id-modal" +import { ComposioApiKeyModal } from "@/components/composio-api-key-modal" +import { useOnboardingState } from "./use-onboarding-state" +import { StepIndicator } from "./step-indicator" +import { WelcomeStep } from "./steps/welcome-step" +import { LlmSetupStep } from "./steps/llm-setup-step" +import { ConnectAccountsStep } from "./steps/connect-accounts-step" +import { CompletionStep } from "./steps/completion-step" + +interface OnboardingModalProps { + open: boolean + onComplete: () => void +} + +export function OnboardingModal({ open, onComplete }: OnboardingModalProps) { + const state = useOnboardingState(open, onComplete) + + const stepContent = React.useMemo(() => { + switch (state.currentStep) { + case 0: + return + case 1: + return + case 2: + return + case 3: + return + } + }, [state.currentStep, state]) + + return ( + <> + + + {}}> + e.preventDefault()} + onEscapeKeyDown={(e) => e.preventDefault()} + > +
    + + + + {stepContent} + + +
    +     +     + + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/provider-icons.tsx b/apps/x/apps/renderer/src/components/onboarding/provider-icons.tsx new file mode 100644 index 00000000..c58c7bf0 --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/provider-icons.tsx @@ -0,0 +1,107 @@ +import { cn } from "@/lib/utils" + +interface IconProps { + className?: string +} + +export function OpenAIIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function AnthropicIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function GoogleIcon({ className }: IconProps) { + return ( + + + + + + + ) +} + +export function OllamaIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function OpenRouterIcon({ className }: IconProps) { + return ( + + + + + ) +} + +export function VercelIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function GmailIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function SlackIcon({ className }: IconProps) { + return ( + + + + + + + ) +} + +export function FirefliesIcon({ className }: IconProps) { + return ( + + + + + + + + + + + ) +} + +export function GranolaIcon({ className }: IconProps) { + return ( + + + + ) +} + +export function GenericApiIcon({ className }: IconProps) { + return ( + + + + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx b/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx new file mode 100644 index 00000000..6fae6dbb --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx @@ -0,0 +1,68 @@ +import * as React from "react" +import { CheckCircle2 } from "lucide-react" +import { cn } from "@/lib/utils" +import type { Step, OnboardingPath } from "./use-onboarding-state" + +const ROWBOAT_STEPS = [ + { step: 0 as Step, label: "Welcome" }, + { step: 2 as Step, label: "Connect" }, + { step: 3 as Step, label: "Done" }, +] + +const BYOK_STEPS = [ + { step: 0 as Step, label: "Welcome" }, + { step: 1 as Step, label: "Model" }, + { step: 2 as Step, label: "Connect" }, + { step: 3 as Step, label: "Done" }, +] + +interface StepIndicatorProps { + currentStep: Step + path: OnboardingPath +} + +export function StepIndicator({ currentStep, path }: StepIndicatorProps) { + const steps = path === 'byok' ? BYOK_STEPS : ROWBOAT_STEPS + const currentIndex = steps.findIndex(s => s.step === currentStep) + + return ( +
    + {steps.map((s, i) => ( + + {i > 0 && ( +
    + )} +
    +
    currentIndex && "bg-muted text-muted-foreground" + )} + > + {i < currentIndex ? ( + + ) : ( + i + 1 + )} +
    + + {s.label} + +
    + + ))} +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx new file mode 100644 index 00000000..c01e42ea --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx @@ -0,0 +1,154 @@ +import { CheckCircle2 } from "lucide-react" +import { motion } from "motion/react" +import { Button } from "@/components/ui/button" +import type { OnboardingState } from "../use-onboarding-state" + +interface CompletionStepProps { + state: OnboardingState +} + +export function CompletionStep({ state }: CompletionStepProps) { + const { connectedProviders, granolaEnabled, slackEnabled, gmailConnected, googleCalendarConnected, handleComplete } = state + const hasConnections = connectedProviders.length > 0 || granolaEnabled || slackEnabled || gmailConnected || googleCalendarConnected + + return ( +
    + {/* Animated checkmark */} + + {/* Pulsing ring */} + +
    + +
    +     + + {/* Title */} + + You're All Set! + + + + {hasConnections ? ( + <>Give me 30 minutes to build your context graph. I can still help with other things on your computer. + ) : ( + <>You can connect your accounts anytime from the sidebar to start syncing data. + )} + + + {/* Connected accounts summary */} + {hasConnections && ( + +

    Connected

    +
    + {gmailConnected && ( + + + Gmail (Email) + + )} + {googleCalendarConnected && ( + + + Google Calendar + + )} + {connectedProviders.includes('google') && ( + + + Google (Email & Calendar) + + )} + {connectedProviders.includes('fireflies-ai') && ( + + + Fireflies (Meeting transcripts) + + )} + {granolaEnabled && ( + + + Granola (Local meeting notes) + + )} + {slackEnabled && ( + + + Slack (Team communication) + + )} +
    +     + )} + + {/* CTA */} + + + +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/connect-accounts-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/connect-accounts-step.tsx new file mode 100644 index 00000000..b152d567 --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/steps/connect-accounts-step.tsx @@ -0,0 +1,294 @@ +import { Loader2, CheckCircle2, ArrowLeft, Calendar } from "lucide-react" +import { motion } from "motion/react" +import { Button } from "@/components/ui/button" +import { Switch } from "@/components/ui/switch" +import { cn } from "@/lib/utils" +import { GmailIcon, SlackIcon, FirefliesIcon, GranolaIcon } from "../provider-icons" +import type { OnboardingState, ProviderState } from "../use-onboarding-state" + +interface ConnectAccountsStepProps { + state: OnboardingState +} + +function ProviderCard({ + name, + description, + icon, + iconBg, + iconColor, + providerState, + onConnect, + rightSlot, + index, +}: { + name: string + description: string + icon: React.ReactNode + iconBg: string + iconColor: string + providerState?: ProviderState + onConnect?: () => void + rightSlot?: React.ReactNode + index: number +}) { + const isConnected = providerState?.isConnected ?? false + + return ( + +
    +
    + {icon} +
    +
    +
    {name}
    +
    {description}
    +
    +
    +
    + {rightSlot ?? ( + providerState?.isLoading ? ( + + ) : isConnected ? ( +
    + + Connected +
    + ) : ( + + ) + )} +
    +     + ) +} + +export function ConnectAccountsStep({ state }: ConnectAccountsStepProps) { + const { + providers, providersLoading, providerStates, handleConnect, + granolaEnabled, granolaLoading, handleGranolaToggle, + slackEnabled, slackLoading, slackWorkspaces, slackAvailableWorkspaces, + slackSelectedUrls, setSlackSelectedUrls, slackPickerOpen, + slackDiscovering, slackDiscoverError, + handleSlackEnable, handleSlackSaveWorkspaces, handleSlackDisable, + useComposioForGoogle, gmailConnected, gmailLoading, gmailConnecting, handleConnectGmail, + useComposioForGoogleCalendar, googleCalendarConnected, googleCalendarLoading, googleCalendarConnecting, handleConnectGoogleCalendar, + handleNext, handleBack, + } = state + + let cardIndex = 0 + + return ( +
    + {/* Title */} +

    + Connect Your Accounts +

    +

    + Connect your accounts to give Rowboat context about your work. You can always add more later. +

    + + {providersLoading ? ( +
    + +
    + ) : ( +
    + {/* Email & Calendar */} + {(useComposioForGoogle || useComposioForGoogleCalendar || providers.includes('google')) && ( +
    + + Email & Calendar + + {useComposioForGoogle ? ( + } + iconBg="bg-red-500/10" + iconColor="text-red-500" + providerState={{ isConnected: gmailConnected, isLoading: gmailLoading, isConnecting: gmailConnecting }} + onConnect={handleConnectGmail} + index={cardIndex++} + /> + ) : ( + } + iconBg="bg-red-500/10" + iconColor="text-red-500" + providerState={providerStates['google']} + onConnect={() => handleConnect('google')} + index={cardIndex++} + /> + )} + {useComposioForGoogleCalendar && ( + } + iconBg="bg-blue-500/10" + iconColor="text-blue-500" + providerState={{ isConnected: googleCalendarConnected, isLoading: googleCalendarLoading, isConnecting: googleCalendarConnecting }} + onConnect={handleConnectGoogleCalendar} + index={cardIndex++} + /> + )} +
    + )} + + {/* Meeting Notes */} +
    + + Meeting Notes + + } + iconBg="bg-purple-500/10" + iconColor="text-purple-500" + providerState={{ isConnected: granolaEnabled, isLoading: false, isConnecting: false }} + rightSlot={ +
    + {granolaLoading && } + +
    + } + index={cardIndex++} + /> + {providers.includes('fireflies-ai') && ( + } + iconBg="bg-amber-500/10" + iconColor="text-amber-500" + providerState={providerStates['fireflies-ai']} + onConnect={() => handleConnect('fireflies-ai')} + index={cardIndex++} + /> + )} +
    + + {/* Team Communication */} +
    + + Team Communication + +
    + 0 + ? slackWorkspaces.map(w => w.name).join(', ') + : "Enable Rowboat to understand your team conversations and provide relevant context" + } + icon={} + iconBg="bg-emerald-500/10" + iconColor="text-emerald-500" + providerState={{ isConnected: slackEnabled, isLoading: false, isConnecting: false }} + rightSlot={ +
    + {(slackLoading || slackDiscovering) && } + {slackEnabled ? ( + handleSlackDisable()} + disabled={slackLoading} + /> + ) : ( + + )} +
    + } + index={cardIndex++} + /> + {slackPickerOpen && ( +
    + {slackDiscoverError ? ( +

    {slackDiscoverError}

    + ) : ( + <> + {slackAvailableWorkspaces.map(w => ( + + ))} + + + )} +
    + )} +
    +
    +
    + )} + + {/* Footer */} +
    + +
    + + +
    +
    +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/llm-setup-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/llm-setup-step.tsx new file mode 100644 index 00000000..534a67a8 --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/steps/llm-setup-step.tsx @@ -0,0 +1,300 @@ +import { Loader2, CheckCircle2, ArrowLeft, X, Lightbulb } from "lucide-react" +import { motion } from "motion/react" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { cn } from "@/lib/utils" +import { + OpenAIIcon, + AnthropicIcon, + GoogleIcon, + OllamaIcon, + OpenRouterIcon, + VercelIcon, + GenericApiIcon, +} from "../provider-icons" +import type { OnboardingState, LlmProviderFlavor } from "../use-onboarding-state" + +interface LlmSetupStepProps { + state: OnboardingState +} + +const primaryProviders: Array<{ id: LlmProviderFlavor; name: string; description: string; color: string; icon: React.ReactNode }> = [ + { id: "openai", name: "OpenAI", description: "GPT models", color: "bg-green-500/10 text-green-600 dark:text-green-400", icon: }, + { id: "anthropic", name: "Anthropic", description: "Claude models", color: "bg-orange-500/10 text-orange-600 dark:text-orange-400", icon: }, + { id: "google", name: "Gemini", description: "Google AI Studio", color: "bg-blue-500/10 text-blue-600 dark:text-blue-400", icon: }, + { id: "ollama", name: "Ollama", description: "Local models", color: "bg-purple-500/10 text-purple-600 dark:text-purple-400", icon: }, +] + +const moreProviders: Array<{ id: LlmProviderFlavor; name: string; description: string; color: string; icon: React.ReactNode }> = [ + { id: "openrouter", name: "OpenRouter", description: "Multiple models, one key", color: "bg-pink-500/10 text-pink-600 dark:text-pink-400", icon: }, + { id: "aigateway", name: "AI Gateway", description: "Vercel AI Gateway", color: "bg-sky-500/10 text-sky-600 dark:text-sky-400", icon: }, + { id: "openai-compatible", name: "OpenAI-Compatible", description: "Custom endpoint", color: "bg-gray-500/10 text-gray-600 dark:text-gray-400", icon: }, +] + +export function LlmSetupStep({ state }: LlmSetupStepProps) { + const { + llmProvider, setLlmProvider, modelsCatalog, modelsLoading, modelsError, + activeConfig, testState, setTestState, showApiKey, + showBaseURL, isLocalProvider, canTest, showMoreProviders, setShowMoreProviders, + updateProviderConfig, handleTestAndSaveLlmConfig, handleBack, + upsellDismissed, setUpsellDismissed, handleSwitchToRowboat, + } = state + + const isMoreProvider = moreProviders.some(p => p.id === llmProvider) + const modelsForProvider = modelsCatalog[llmProvider] || [] + const showModelInput = isLocalProvider || modelsForProvider.length === 0 + + const renderProviderCard = (provider: typeof primaryProviders[0], index: number) => { + const isSelected = llmProvider === provider.id + return ( + { + setLlmProvider(provider.id) + setTestState({ status: "idle" }) + }} + className={cn( + "rounded-xl border-2 p-4 text-left transition-all", + isSelected + ? "border-primary bg-primary/5 shadow-sm" + : "border-transparent bg-muted/50 hover:bg-muted" + )} + > +
    +
    + {provider.icon} +
    +
    +
    {provider.name}
    +
    {provider.description}
    +
    +
    +     + ) + } + + return ( +
    + {/* Title */} +

    + Choose your model +

    +

    + Select a provider and configure your API key +

    + + {/* Inline Rowboat upsell callout */} + {!upsellDismissed && ( + + +
    +

    + Tip: Sign in with Rowboat for instant access to all models — no API keys needed. +

    + +
    + +     + )} + + {/* Provider selection */} +
    + Provider +
    + {primaryProviders.map((p, i) => renderProviderCard(p, i))} +
    + {(showMoreProviders || isMoreProvider) ? ( +
    + {moreProviders.map((p, i) => renderProviderCard(p, i + 4))} +
    + ) : ( + + )} +
    + + {/* Separator */} +
    + + {/* Model configuration */} +
    +

    Model Configuration

    + +
    +
    + + {modelsLoading ? ( +
    + + Loading... +
    + ) : showModelInput ? ( + updateProviderConfig(llmProvider, { model: e.target.value })} + placeholder="Enter model" + /> + ) : ( + + )} + {modelsError && ( +
    {modelsError}
    + )} +
    + +
    + + {modelsLoading ? ( +
    + + Loading... +
    + ) : showModelInput ? ( + updateProviderConfig(llmProvider, { knowledgeGraphModel: e.target.value })} + placeholder={activeConfig.model || "Enter model"} + /> + ) : ( + + )} +
    +
    + + {showApiKey && ( +
    + + updateProviderConfig(llmProvider, { apiKey: e.target.value })} + placeholder="Paste your API key" + className="font-mono" + /> +
    + )} + + {showBaseURL && ( +
    + + updateProviderConfig(llmProvider, { baseURL: e.target.value })} + placeholder={ + llmProvider === "ollama" + ? "http://localhost:11434" + : llmProvider === "openai-compatible" + ? "http://localhost:1234/v1" + : "https://ai-gateway.vercel.sh/v1" + } + className="font-mono" + /> +
    + )} +
    + + {/* Footer */} +
    + + +
    + {testState.status === "success" && ( + + + Connected + + )} + {testState.status === "error" && ( + + {testState.error} + + )} + +
    +
    +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx new file mode 100644 index 00000000..9a660507 --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx @@ -0,0 +1,124 @@ +import { Loader2, CheckCircle2 } from "lucide-react" +import { motion } from "motion/react" +import { Button } from "@/components/ui/button" +import type { OnboardingState } from "../use-onboarding-state" + +interface WelcomeStepProps { + state: OnboardingState +} + +export function WelcomeStep({ state }: WelcomeStepProps) { + const rowboatState = state.providerStates['rowboat'] || { isConnected: false, isLoading: false, isConnecting: false } + + return ( +
    + {/* Logo with ambient glow */} + +
    + Rowboat + + + {/* Tagline badge */} + + + Your AI coworker, with memory + + + {/* Main heading */} + + Welcome to Rowboat + + + Rowboat connects to your work, builds a knowledge graph, and uses that context to help you get things done. Private and on your machine. + + + {/* Sign in / connected state */} + + {rowboatState.isConnected ? ( +
    +
    + + Connected to Rowboat +
    + +
    + ) : ( +
    + + {rowboatState.isConnecting && ( +

    + Complete sign in in your browser, then return here. +

    + )} +
    + )} +     + + {/* BYOK link */} + + + +
    + ) +} diff --git a/apps/x/apps/renderer/src/components/onboarding/use-onboarding-state.ts b/apps/x/apps/renderer/src/components/onboarding/use-onboarding-state.ts new file mode 100644 index 00000000..7cc50a90 --- /dev/null +++ b/apps/x/apps/renderer/src/components/onboarding/use-onboarding-state.ts @@ -0,0 +1,720 @@ +import { useState, useEffect, useCallback } from "react" +import { getGoogleClientId, setGoogleClientId } from "@/lib/google-client-id-store" +import { toast } from "sonner" + +export interface ProviderState { + isConnected: boolean + isLoading: boolean + isConnecting: boolean +} + +export type Step = 0 | 1 | 2 | 3 + +export type OnboardingPath = 'rowboat' | 'byok' | null + +export type LlmProviderFlavor = "openai" | "anthropic" | "google" | "openrouter" | "aigateway" | "ollama" | "openai-compatible" + +export interface LlmModelOption { + id: string + name?: string + release_date?: string +} + +export function useOnboardingState(open: boolean, onComplete: () => void) { + const [currentStep, setCurrentStep] = useState(0) + const [onboardingPath, setOnboardingPath] = useState(null) + + // LLM setup state + const [llmProvider, setLlmProvider] = useState("openai") + const [modelsCatalog, setModelsCatalog] = useState>({}) + const [modelsLoading, setModelsLoading] = useState(false) + const [modelsError, setModelsError] = useState(null) + const [providerConfigs, setProviderConfigs] = useState>({ + openai: { apiKey: "", baseURL: "", model: "", knowledgeGraphModel: "" }, + anthropic: { apiKey: "", baseURL: "", model: "", knowledgeGraphModel: "" }, + google: { apiKey: "", baseURL: "", model: "", knowledgeGraphModel: "" }, + openrouter: { apiKey: "", baseURL: "", model: "", knowledgeGraphModel: "" }, + aigateway: { apiKey: "", baseURL: "", model: "", knowledgeGraphModel: "" }, + ollama: { apiKey: "", baseURL: "http://localhost:11434", model: "", knowledgeGraphModel: "" }, + "openai-compatible": { apiKey: "", baseURL: "http://localhost:1234/v1", model: "", knowledgeGraphModel: "" }, + }) + const [testState, setTestState] = useState<{ status: "idle" | "testing" | "success" | "error"; error?: string }>({ + status: "idle", + }) + const [showMoreProviders, setShowMoreProviders] = useState(false) + + // OAuth provider states + const [providers, setProviders] = useState([]) + const [providersLoading, setProvidersLoading] = useState(true) + const [providerStates, setProviderStates] = useState>({}) + const [googleClientIdOpen, setGoogleClientIdOpen] = useState(false) + + // Granola state + const [granolaEnabled, setGranolaEnabled] = useState(false) + const [granolaLoading, setGranolaLoading] = useState(true) + + // Slack state (agent-slack CLI) + const [slackEnabled, setSlackEnabled] = useState(false) + const [slackLoading, setSlackLoading] = useState(true) + const [slackWorkspaces, setSlackWorkspaces] = useState>([]) + const [slackAvailableWorkspaces, setSlackAvailableWorkspaces] = useState>([]) + const [slackSelectedUrls, setSlackSelectedUrls] = useState>(new Set()) + const [slackPickerOpen, setSlackPickerOpen] = useState(false) + const [slackDiscovering, setSlackDiscovering] = useState(false) + const [slackDiscoverError, setSlackDiscoverError] = useState(null) + + // Inline upsell callout dismissed + const [upsellDismissed, setUpsellDismissed] = useState(false) + + // Composio/Gmail state (used when signed in with Rowboat account) + const [useComposioForGoogle, setUseComposioForGoogle] = useState(false) + const [gmailConnected, setGmailConnected] = useState(false) + const [gmailLoading, setGmailLoading] = useState(true) + const [gmailConnecting, setGmailConnecting] = useState(false) + const [composioApiKeyOpen, setComposioApiKeyOpen] = useState(false) + const [composioApiKeyTarget, setComposioApiKeyTarget] = useState<'slack' | 'gmail'>('gmail') + + // Composio/Google Calendar state + const [useComposioForGoogleCalendar, setUseComposioForGoogleCalendar] = useState(false) + const [googleCalendarConnected, setGoogleCalendarConnected] = useState(false) + const [googleCalendarLoading, setGoogleCalendarLoading] = useState(true) + const [googleCalendarConnecting, setGoogleCalendarConnecting] = useState(false) + + const updateProviderConfig = useCallback( + (provider: LlmProviderFlavor, updates: Partial<{ apiKey: string; baseURL: string; model: string; knowledgeGraphModel: string }>) => { + setProviderConfigs(prev => ({ + ...prev, + [provider]: { ...prev[provider], ...updates }, + })) + setTestState({ status: "idle" }) + }, + [] + ) + + const activeConfig = providerConfigs[llmProvider] + const showApiKey = llmProvider === "openai" || llmProvider === "anthropic" || llmProvider === "google" || llmProvider === "openrouter" || llmProvider === "aigateway" || llmProvider === "openai-compatible" + const requiresApiKey = llmProvider === "openai" || llmProvider === "anthropic" || llmProvider === "google" || llmProvider === "openrouter" || llmProvider === "aigateway" + const requiresBaseURL = llmProvider === "ollama" || llmProvider === "openai-compatible" + const showBaseURL = llmProvider === "ollama" || llmProvider === "openai-compatible" || llmProvider === "aigateway" + const isLocalProvider = llmProvider === "ollama" || llmProvider === "openai-compatible" + const canTest = + activeConfig.model.trim().length > 0 && + (!requiresApiKey || activeConfig.apiKey.trim().length > 0) && + (!requiresBaseURL || activeConfig.baseURL.trim().length > 0) + + // Track connected providers for the completion step + const connectedProviders = Object.entries(providerStates) + .filter(([, state]) => state.isConnected) + .map(([provider]) => provider) + + // Load available providers and composio-for-google flag on mount + useEffect(() => { + if (!open) return + + async function loadProviders() { + try { + setProvidersLoading(true) + const result = await window.ipc.invoke('oauth:list-providers', null) + setProviders(result.providers || []) + } catch (error) { + console.error('Failed to get available providers:', error) + setProviders([]) + } finally { + setProvidersLoading(false) + } + } + async function loadComposioForGoogleFlag() { + try { + const result = await window.ipc.invoke('composio:use-composio-for-google', null) + setUseComposioForGoogle(result.enabled) + } catch (error) { + console.error('Failed to check composio-for-google flag:', error) + } + } + async function loadComposioForGoogleCalendarFlag() { + try { + const result = await window.ipc.invoke('composio:use-composio-for-google-calendar', null) + setUseComposioForGoogleCalendar(result.enabled) + } catch (error) { + console.error('Failed to check composio-for-google-calendar flag:', error) + } + } + loadProviders() + loadComposioForGoogleFlag() + loadComposioForGoogleCalendarFlag() + }, [open]) + + // Load LLM models catalog on open + useEffect(() => { + if (!open) return + + async function loadModels() { + try { + setModelsLoading(true) + setModelsError(null) + const result = await window.ipc.invoke("models:list", null) + const catalog: Record = {} + for (const provider of result.providers || []) { + catalog[provider.id] = provider.models || [] + } + setModelsCatalog(catalog) + } catch (error) { + console.error("Failed to load models catalog:", error) + setModelsError("Failed to load models list") + setModelsCatalog({}) + } finally { + setModelsLoading(false) + } + } + + loadModels() + }, [open]) + + // Preferred default models for each provider + const preferredDefaults: Partial> = { + openai: "gpt-5.2", + anthropic: "claude-opus-4-6-20260202", + } + + // Initialize default models from catalog + useEffect(() => { + if (Object.keys(modelsCatalog).length === 0) return + setProviderConfigs(prev => { + const next = { ...prev } + const cloudProviders: LlmProviderFlavor[] = ["openai", "anthropic", "google"] + for (const provider of cloudProviders) { + const models = modelsCatalog[provider] + if (models?.length && !next[provider].model) { + const preferredModel = preferredDefaults[provider] + const hasPreferred = preferredModel && models.some(m => m.id === preferredModel) + next[provider] = { ...next[provider], model: hasPreferred ? preferredModel : (models[0]?.id || "") } + } + } + return next + }) + }, [modelsCatalog]) + + // Load Granola config + const refreshGranolaConfig = useCallback(async () => { + try { + setGranolaLoading(true) + const result = await window.ipc.invoke('granola:getConfig', null) + setGranolaEnabled(result.enabled) + } catch (error) { + console.error('Failed to load Granola config:', error) + setGranolaEnabled(false) + } finally { + setGranolaLoading(false) + } + }, []) + + // Update Granola config + const handleGranolaToggle = useCallback(async (enabled: boolean) => { + try { + setGranolaLoading(true) + await window.ipc.invoke('granola:setConfig', { enabled }) + setGranolaEnabled(enabled) + toast.success(enabled ? 'Granola sync enabled' : 'Granola sync disabled') + } catch (error) { + console.error('Failed to update Granola config:', error) + toast.error('Failed to update Granola sync settings') + } finally { + setGranolaLoading(false) + } + }, []) + + // Load Slack config + const refreshSlackConfig = useCallback(async () => { + try { + setSlackLoading(true) + const result = await window.ipc.invoke('slack:getConfig', null) + setSlackEnabled(result.enabled) + setSlackWorkspaces(result.workspaces || []) + } catch (error) { + console.error('Failed to load Slack config:', error) + setSlackEnabled(false) + setSlackWorkspaces([]) + } finally { + setSlackLoading(false) + } + }, []) + + // Enable Slack: discover workspaces + const handleSlackEnable = useCallback(async () => { + setSlackDiscovering(true) + setSlackDiscoverError(null) + try { + const result = await window.ipc.invoke('slack:listWorkspaces', null) + if (result.error || result.workspaces.length === 0) { + setSlackDiscoverError(result.error || 'No Slack workspaces found. Set up with: agent-slack auth import-desktop') + setSlackAvailableWorkspaces([]) + setSlackPickerOpen(true) + } else { + setSlackAvailableWorkspaces(result.workspaces) + setSlackSelectedUrls(new Set(result.workspaces.map((w: { url: string }) => w.url))) + setSlackPickerOpen(true) + } + } catch (error) { + console.error('Failed to discover Slack workspaces:', error) + setSlackDiscoverError('Failed to discover Slack workspaces') + setSlackPickerOpen(true) + } finally { + setSlackDiscovering(false) + } + }, []) + + // Save selected Slack workspaces + const handleSlackSaveWorkspaces = useCallback(async () => { + const selected = slackAvailableWorkspaces.filter(w => slackSelectedUrls.has(w.url)) + try { + setSlackLoading(true) + await window.ipc.invoke('slack:setConfig', { enabled: true, workspaces: selected }) + setSlackEnabled(true) + setSlackWorkspaces(selected) + setSlackPickerOpen(false) + toast.success('Slack enabled') + } catch (error) { + console.error('Failed to save Slack config:', error) + toast.error('Failed to save Slack settings') + } finally { + setSlackLoading(false) + } + }, [slackAvailableWorkspaces, slackSelectedUrls]) + + // Disable Slack + const handleSlackDisable = useCallback(async () => { + try { + setSlackLoading(true) + await window.ipc.invoke('slack:setConfig', { enabled: false, workspaces: [] }) + setSlackEnabled(false) + setSlackWorkspaces([]) + setSlackPickerOpen(false) + toast.success('Slack disabled') + } catch (error) { + console.error('Failed to update Slack config:', error) + toast.error('Failed to update Slack settings') + } finally { + setSlackLoading(false) + } + }, []) + + // Load Gmail connection status (Composio) + const refreshGmailStatus = useCallback(async () => { + try { + setGmailLoading(true) + const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'gmail' }) + setGmailConnected(result.isConnected) + } catch (error) { + console.error('Failed to load Gmail status:', error) + setGmailConnected(false) + } finally { + setGmailLoading(false) + } + }, []) + + // Connect to Gmail via Composio + const startGmailConnect = useCallback(async () => { + try { + setGmailConnecting(true) + const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'gmail' }) + if (!result.success) { + toast.error(result.error || 'Failed to connect to Gmail') + setGmailConnecting(false) + } + } catch (error) { + console.error('Failed to connect to Gmail:', error) + toast.error('Failed to connect to Gmail') + setGmailConnecting(false) + } + }, []) + + // Handle Gmail connect button click (checks Composio config first) + const handleConnectGmail = useCallback(async () => { + const configResult = await window.ipc.invoke('composio:is-configured', null) + if (!configResult.configured) { + setComposioApiKeyTarget('gmail') + setComposioApiKeyOpen(true) + return + } + await startGmailConnect() + }, [startGmailConnect]) + + // Handle Composio API key submission + const handleComposioApiKeySubmit = useCallback(async (apiKey: string) => { + try { + await window.ipc.invoke('composio:set-api-key', { apiKey }) + setComposioApiKeyOpen(false) + toast.success('Composio API key saved') + await startGmailConnect() + } catch (error) { + console.error('Failed to save Composio API key:', error) + toast.error('Failed to save API key') + } + }, [startGmailConnect]) + + // Load Google Calendar connection status (Composio) + const refreshGoogleCalendarStatus = useCallback(async () => { + try { + setGoogleCalendarLoading(true) + const result = await window.ipc.invoke('composio:get-connection-status', { toolkitSlug: 'googlecalendar' }) + setGoogleCalendarConnected(result.isConnected) + } catch (error) { + console.error('Failed to load Google Calendar status:', error) + setGoogleCalendarConnected(false) + } finally { + setGoogleCalendarLoading(false) + } + }, []) + + // Connect to Google Calendar via Composio + const startGoogleCalendarConnect = useCallback(async () => { + try { + setGoogleCalendarConnecting(true) + const result = await window.ipc.invoke('composio:initiate-connection', { toolkitSlug: 'googlecalendar' }) + if (!result.success) { + toast.error(result.error || 'Failed to connect to Google Calendar') + setGoogleCalendarConnecting(false) + } + } catch (error) { + console.error('Failed to connect to Google Calendar:', error) + toast.error('Failed to connect to Google Calendar') + setGoogleCalendarConnecting(false) + } + }, []) + + // Handle Google Calendar connect button click + const handleConnectGoogleCalendar = useCallback(async () => { + const configResult = await window.ipc.invoke('composio:is-configured', null) + if (!configResult.configured) { + setComposioApiKeyTarget('gmail') + setComposioApiKeyOpen(true) + return + } + await startGoogleCalendarConnect() + }, [startGoogleCalendarConnect]) + + // New step flow: + // Rowboat path: 0 (welcome) → 2 (connect) → 3 (done) + // BYOK path: 0 (welcome) → 1 (llm setup) → 2 (connect) → 3 (done) + const handleNext = useCallback(() => { + if (currentStep === 0) { + if (onboardingPath === 'byok') { + setCurrentStep(1) + } else { + setCurrentStep(2) + } + } else if (currentStep === 1) { + setCurrentStep(2) + } else if (currentStep === 2) { + setCurrentStep(3) + } + }, [currentStep, onboardingPath]) + + const handleBack = useCallback(() => { + if (currentStep === 1) { + setCurrentStep(0) + setOnboardingPath(null) + } else if (currentStep === 2) { + if (onboardingPath === 'rowboat') { + setCurrentStep(0) + } else { + setCurrentStep(1) + } + } + }, [currentStep, onboardingPath]) + + const handleComplete = useCallback(() => { + onComplete() + }, [onComplete]) + + const handleTestAndSaveLlmConfig = useCallback(async () => { + if (!canTest) return + setTestState({ status: "testing" }) + try { + const apiKey = activeConfig.apiKey.trim() || undefined + const baseURL = activeConfig.baseURL.trim() || undefined + const model = activeConfig.model.trim() + const knowledgeGraphModel = activeConfig.knowledgeGraphModel.trim() || undefined + const providerConfig = { + provider: { + flavor: llmProvider, + apiKey, + baseURL, + }, + model, + knowledgeGraphModel, + } + const result = await window.ipc.invoke("models:test", providerConfig) + if (result.success) { + setTestState({ status: "success" }) + await window.ipc.invoke("models:saveConfig", providerConfig) + window.dispatchEvent(new Event('models-config-changed')) + handleNext() + } else { + setTestState({ status: "error", error: result.error }) + toast.error(result.error || "Connection test failed") + } + } catch (error) { + console.error("Connection test failed:", error) + setTestState({ status: "error", error: "Connection test failed" }) + toast.error("Connection test failed") + } + }, [activeConfig.apiKey, activeConfig.baseURL, activeConfig.model, activeConfig.knowledgeGraphModel, canTest, llmProvider, handleNext]) + + // Check connection status for all providers + const refreshAllStatuses = useCallback(async () => { + refreshGranolaConfig() + refreshSlackConfig() + + // Refresh Gmail Composio status if enabled + if (useComposioForGoogle) { + refreshGmailStatus() + } + + // Refresh Google Calendar Composio status if enabled + if (useComposioForGoogleCalendar) { + refreshGoogleCalendarStatus() + } + + if (providers.length === 0) return + + const newStates: Record = {} + + try { + const result = await window.ipc.invoke('oauth:getState', null) + const config = result.config || {} + for (const provider of providers) { + newStates[provider] = { + isConnected: config[provider]?.connected ?? false, + isLoading: false, + isConnecting: false, + } + } + } catch (error) { + console.error('Failed to check connection status for providers:', error) + for (const provider of providers) { + newStates[provider] = { + isConnected: false, + isLoading: false, + isConnecting: false, + } + } + } + + setProviderStates(newStates) + }, [providers, refreshGranolaConfig, refreshSlackConfig, refreshGmailStatus, useComposioForGoogle, refreshGoogleCalendarStatus, useComposioForGoogleCalendar]) + + // Refresh statuses when modal opens or providers list changes + useEffect(() => { + if (open && providers.length > 0) { + refreshAllStatuses() + } + }, [open, providers, refreshAllStatuses]) + + // Listen for OAuth completion events (state updates only — toasts handled by ConnectorsPopover) + useEffect(() => { + const cleanup = window.ipc.on('oauth:didConnect', (event) => { + const { provider, success } = event + + setProviderStates(prev => ({ + ...prev, + [provider]: { + isConnected: success, + isLoading: false, + isConnecting: false, + } + })) + }) + + return cleanup + }, []) + + // Auto-advance from Rowboat sign-in step when OAuth completes + useEffect(() => { + if (onboardingPath !== 'rowboat' || currentStep !== 0) return + + const cleanup = window.ipc.on('oauth:didConnect', async (event) => { + if (event.provider === 'rowboat' && event.success) { + // Re-check composio flags now that the account is connected + try { + const [googleResult, calendarResult] = await Promise.all([ + window.ipc.invoke('composio:use-composio-for-google', null), + window.ipc.invoke('composio:use-composio-for-google-calendar', null), + ]) + setUseComposioForGoogle(googleResult.enabled) + setUseComposioForGoogleCalendar(calendarResult.enabled) + } catch (error) { + console.error('Failed to re-check composio flags:', error) + } + setCurrentStep(2) // Go to Connect Accounts + } + }) + + return cleanup + }, [onboardingPath, currentStep]) + + // Listen for Composio connection events (state updates only — toasts handled by ConnectorsPopover) + useEffect(() => { + const cleanup = window.ipc.on('composio:didConnect', (event) => { + const { toolkitSlug, success } = event + + if (toolkitSlug === 'slack') { + setSlackEnabled(success) + } + + if (toolkitSlug === 'gmail') { + setGmailConnected(success) + setGmailConnecting(false) + } + + if (toolkitSlug === 'googlecalendar') { + setGoogleCalendarConnected(success) + setGoogleCalendarConnecting(false) + } + }) + + return cleanup + }, []) + + const startConnect = useCallback(async (provider: string, clientId?: string) => { + setProviderStates(prev => ({ + ...prev, + [provider]: { ...prev[provider], isConnecting: true } + })) + + try { + const result = await window.ipc.invoke('oauth:connect', { provider, clientId }) + + if (!result.success) { + toast.error(result.error || `Failed to connect to ${provider}`) + setProviderStates(prev => ({ + ...prev, + [provider]: { ...prev[provider], isConnecting: false } + })) + } + } catch (error) { + console.error('Failed to connect:', error) + toast.error(`Failed to connect to ${provider}`) + setProviderStates(prev => ({ + ...prev, + [provider]: { ...prev[provider], isConnecting: false } + })) + } + }, []) + + // Connect to a provider + const handleConnect = useCallback(async (provider: string) => { + if (provider === 'google') { + const existingClientId = getGoogleClientId() + if (!existingClientId) { + setGoogleClientIdOpen(true) + return + } + await startConnect(provider, existingClientId) + return + } + + await startConnect(provider) + }, [startConnect]) + + const handleGoogleClientIdSubmit = useCallback((clientId: string) => { + setGoogleClientId(clientId) + setGoogleClientIdOpen(false) + startConnect('google', clientId) + }, [startConnect]) + + // Switch to rowboat path from BYOK inline callout + const handleSwitchToRowboat = useCallback(() => { + setOnboardingPath('rowboat') + setCurrentStep(0) + }, []) + + return { + // Step state + currentStep, + setCurrentStep, + onboardingPath, + setOnboardingPath, + + // LLM state + llmProvider, + setLlmProvider, + modelsCatalog, + modelsLoading, + modelsError, + providerConfigs, + activeConfig, + testState, + setTestState, + showApiKey, + requiresApiKey, + requiresBaseURL, + showBaseURL, + isLocalProvider, + canTest, + showMoreProviders, + setShowMoreProviders, + updateProviderConfig, + handleTestAndSaveLlmConfig, + + // OAuth state + providers, + providersLoading, + providerStates, + googleClientIdOpen, + setGoogleClientIdOpen, + connectedProviders, + handleConnect, + handleGoogleClientIdSubmit, + startConnect, + + // Granola state + granolaEnabled, + granolaLoading, + handleGranolaToggle, + + // Slack state + slackEnabled, + slackLoading, + slackWorkspaces, + slackAvailableWorkspaces, + slackSelectedUrls, + setSlackSelectedUrls, + slackPickerOpen, + slackDiscovering, + slackDiscoverError, + handleSlackEnable, + handleSlackSaveWorkspaces, + handleSlackDisable, + + // Upsell + upsellDismissed, + setUpsellDismissed, + + // Composio/Gmail state + useComposioForGoogle, + gmailConnected, + gmailLoading, + gmailConnecting, + composioApiKeyOpen, + setComposioApiKeyOpen, + composioApiKeyTarget, + handleConnectGmail, + handleComposioApiKeySubmit, + + // Composio/Google Calendar state + useComposioForGoogleCalendar, + googleCalendarConnected, + googleCalendarLoading, + googleCalendarConnecting, + handleConnectGoogleCalendar, + + // Navigation + handleNext, + handleBack, + handleComplete, + handleSwitchToRowboat, + } +} + +export type OnboardingState = ReturnType diff --git a/apps/x/apps/renderer/src/components/rowboat-mention-popover.tsx b/apps/x/apps/renderer/src/components/rowboat-mention-popover.tsx new file mode 100644 index 00000000..a5a63bc7 --- /dev/null +++ b/apps/x/apps/renderer/src/components/rowboat-mention-popover.tsx @@ -0,0 +1,109 @@ +import { useState, useRef, useEffect } from 'react' +import { Loader2 } from 'lucide-react' + +interface RowboatMentionPopoverProps { + open: boolean + anchor: { top: number; left: number; width: number } | null + initialText?: string + onAdd: (instruction: string) => void | Promise + onRemove?: () => void + onClose: () => void +} + +export function RowboatMentionPopover({ open, anchor, initialText = '', onAdd, onRemove, onClose }: RowboatMentionPopoverProps) { + const [text, setText] = useState('') + const [loading, setLoading] = useState(false) + const textareaRef = useRef(null) + const containerRef = useRef(null) + + useEffect(() => { + if (open) { + setText(initialText) + setLoading(false) + requestAnimationFrame(() => { + textareaRef.current?.focus() + }) + } + }, [open, initialText]) + + // Close on outside click + useEffect(() => { + if (!open) return + const handleMouseDown = (e: MouseEvent) => { + if (containerRef.current && !containerRef.current.contains(e.target as Node)) { + onClose() + } + } + document.addEventListener('mousedown', handleMouseDown) + return () => document.removeEventListener('mousedown', handleMouseDown) + }, [open, onClose]) + + if (!open || !anchor) return null + + const handleSubmit = async () => { + const trimmed = text.trim() + if (!trimmed || loading) return + setLoading(true) + try { + await onAdd(trimmed) + } finally { + setLoading(false) + } + setText('') + } + + return ( +
    +
    +
    + @rowboat +