feat: onboaring page fix it and other minor issues (#270)

* fix: use source files for agent-sdk during development

Export src/index.ts directly in workspace mode so the server can import
without requiring a build step. publishConfig overrides exports to use
dist/ when publishing to npm.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: onboarding try it

* fix: summarize current page

* fix: ask browser os opens in agent mode

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

apps/agent/entrypoints/newtab/index/SearchSuggestions.tsx

@@ -1,5 +1,5 @@
 import type { useCombobox } from 'downshift'
-import { Bot, Search, Sparkles } from 'lucide-react'
+import { Search, Sparkles } from 'lucide-react'
 import { motion } from 'motion/react'
 import type { FC } from 'react'
 import { cn } from '@/lib/utils'
@@ -64,14 +64,8 @@ const SuggestionItemRenderer: FC<{
     case 'browseros':
       return (
         <li className={baseClassName} {...getItemProps({ item, index })}>
-          {item.mode === 'chat' ? (
-            <Sparkles className="h-4 w-4 text-muted-foreground" />
-          ) : (
-            <Bot className="h-4 w-4 text-muted-foreground" />
-          )}
-          <span className="font-semibold">
-            {item.mode === 'chat' ? 'Ask BrowserOS:' : 'Run Agent:'}
-          </span>
+          <Sparkles className="h-4 w-4 text-muted-foreground" />
+          <span className="font-semibold">Ask BrowserOS:</span>
           {item.message || 'Type a message...'}
         </li>
       )

apps/agent/entrypoints/newtab/index/lib/browserOSSuggestions/useBrowserOSSuggestions.ts

@@ -16,13 +16,8 @@ export const useBrowserOSSuggestions = ({
 }): BrowserOSSuggestion[] => {
   return [
     {
-      mode: 'chat',
+      mode: 'agent',
       message: query,
     },
-    // TODO: Temporarily removed agent mode on search suggestions
-    // {
-    //   mode: 'agent',
-    //   message: query,
-    // },
   ]
 }

apps/agent/entrypoints/onboarding/steps/StepThree.tsx

@@ -2,76 +2,29 @@ import { ArrowRight, Sparkles, Zap } from 'lucide-react'
 import type { FC } from 'react'
 import { NavLink } from 'react-router'
 import { Button } from '@/components/ui/button'
-import { openSidePanel } from '@/lib/browseros/toggleSidePanel'
+import { openSidePanelWithSearch } from '@/lib/messaging/sidepanel/openSidepanelWithSearch'
 import { type StepDirection, StepTransition } from './StepTransition'
 
 interface StepThreeProps {
   direction: StepDirection
 }
 
-type ExampleMode = 'chat-mode' | 'agent-mode'
-
-const runExample = async ({
-  url,
-  mode,
-  query,
-}: {
-  url: string
-  mode: ExampleMode
-  query: string
-}) => {
-  try {
-    const newTab = await chrome.tabs.create({
-      url,
-      active: true,
-    })
-    if (!newTab.id) {
-      return
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, 1500))
-
-    const isChatMode = mode === 'chat-mode'
-
-    // TODO: Setup a typesafe messaging system
-    await chrome.runtime.sendMessage({
-      type: 'NEWTAB_EXECUTE_QUERY',
-      tabId: newTab.id,
-      query: query,
-      chatMode: isChatMode,
-      metadata: {
-        source: 'onboarding',
-        executionMode: 'dynamic',
-      },
-    })
-
-    await openSidePanel(newTab.id)
-
-    await new Promise((resolve) => setTimeout(resolve, 1500))
-
-    return
-  } catch (error) {
-    // TODO: Record error to error recording service
-    // biome-ignore lint/suspicious/noConsole: error recording service not setup yet
-    console.error('Error running example:', error)
-    return
-  }
-}
-
 export const StepThree: FC<StepThreeProps> = ({ direction }) => {
-  const runChatModeExample = () => {
-    runExample({
-      url: 'https://news.google.com',
-      mode: 'chat-mode',
-      query: "summarize today's news",
+  const runChatModeExample = async () => {
+    await chrome.tabs.create({ url: 'https://news.google.com', active: true })
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+    openSidePanelWithSearch('open', {
+      query: 'Summarize this page',
+      mode: 'chat',
     })
   }
 
-  const runAgentModeExample = () => {
-    runExample({
-      url: 'chrome://newtab/',
-      mode: 'agent-mode',
+  const runAgentModeExample = async () => {
+    await chrome.tabs.create({ url: 'about:blank', active: true })
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    openSidePanelWithSearch('open', {
       query: 'Navigate to amazon.com and order tide pods',
+      mode: 'agent',
     })
   }
 
@@ -113,7 +66,7 @@ export const StepThree: FC<StepThreeProps> = ({ direction }) => {
                 </p>
                 <div className="rounded-md border border-border/50 bg-background/60 p-2.5">
                   <code className="font-mono text-foreground text-xs">
-                    &quot;summarize today&apos;s news&quot;
+                    &quot;Summarize this page&quot;
                   </code>
                 </div>
               </div>

packages/agent-sdk/package.json

@@ -27,20 +27,29 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./api.json": "./dist/api.json"
   },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
+      },
+      "./api.json": "./dist/api.json"
+    }
+  },
   "dependencies": {
     "eventsource-parser": "^3.0.6",
     "zod-to-json-schema": "^3.24.1"