Compare commits

...

4 Commits

Author SHA1 Message Date
Felarof
00e9107bd1 chore: add .auctor entries to gitignore
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-16 17:59:12 -07:00
Felarof
7f2e387903 fix(agent): clarify upstream provider rate-limit errors (#734)
* fix(agent): clarify upstream provider rate-limit errors

When a non-BrowserOS provider (OpenAI, Anthropic, OpenRouter, etc.)
returned a 429, ChatError rendered the retry-wrapped message
"Failed after 3 attempts. Last error: The usage limit has been reached"
with a generic "Something went wrong" title, leading users to blame
BrowserOS for throttling imposed by their configured upstream.

Detect upstream 429s in parseErrorMessage, show the provider name in
the title ("OpenAI rate limit reached"), strip the retry prefix,
render the raw upstream message, and add clarifying subtext that
names the provider and explicitly excludes BrowserOS. Skip the
BrowserOS-specific ShareForCredits / survey / upgrade affordances on
this path — they do not apply.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix: address Greptile review comments

- Tighten 429 pattern to \b429\b so it only matches the standalone
  status code, not incidental substrings (model IDs, paths, etc.).
- Unwrap JSON-encoded provider error bodies on the upstream-rate-limit
  path so users see the human-readable message instead of raw JSON.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-16 16:14:45 -07:00
Felarof
fc00ed23bf feat(referral): show tweet share rules and lower default daily limit fallback (#731)
* feat(referral): show share rules and lower default daily limit fallback

Surface the three referral validation rules (must mention @browserOS_ai,
posted within last 30 minutes, single-use) directly in the ShareForCredits
UI so users understand submission requirements before pasting a tweet link.
Also align the UsagePage daily-limit fallback (used while credits load) with
the gateway default of 50.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(usage): handle credit balance exceeding daily limit

The "Credits used today" stat was computed as `dailyLimit - credits`,
which goes negative once a referral bonus pushes the balance above the
daily cap (e.g. balance 294 with cap 100 showed "-194 of 100"). Clamp
the math to zero and surface a separate "Bonus credits" stat when the
balance exceeds the daily allowance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-16 15:34:33 -07:00
Felarof
b6d6d4eb1d feat: Twitter share referral UI for credit rewards (#729)
* feat: add Twitter share referral UI and expose browserosId

When credits are exhausted, users now see a "Share on Twitter" CTA with
a pre-filled tweet URL and an input to paste their tweet link. Reusable
ShareForCredits component used in both ChatError and UsagePage. Server's
GET /credits now includes browserosId for the extension to pass to the
referral service.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: rebuild chat session on provider change

* fix: address Greptile review comments

- Move referral service URL to EXTERNAL_URLS
- Guard submitReferral on !response.ok
- Remove stale TODO comment

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

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 15:25:04 -07:00
11 changed files with 407 additions and 36 deletions

2
.gitignore vendored
View File

@@ -1,4 +1,6 @@
**/.DS_Store
**.auctor/**
.auctor.json
.gcs_entries
**/dmg
**/env

View File

@@ -0,0 +1,125 @@
import { ExternalLink, Loader2, Send } from 'lucide-react'
import type { FC } from 'react'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { useCredits, useInvalidateCredits } from '@/lib/credits/useCredits'
import {
getShareOnTwitterUrl,
submitReferral,
} from '@/lib/referral/submit-referral'
interface ShareForCreditsProps {
compact?: boolean
}
export const ShareForCredits: FC<ShareForCreditsProps> = ({ compact }) => {
const [tweetUrl, setTweetUrl] = useState('')
const [isSubmitting, setIsSubmitting] = useState(false)
const [result, setResult] = useState<{
success: boolean
message: string
} | null>(null)
const { data } = useCredits()
const invalidateCredits = useInvalidateCredits()
const handleSubmit = async () => {
if (!tweetUrl.trim() || !data?.browserosId) return
setIsSubmitting(true)
setResult(null)
try {
const res = await submitReferral(tweetUrl.trim(), data.browserosId)
if (res.success) {
setResult({
success: true,
message: `${res.creditsAdded ?? 200} credits added!`,
})
setTweetUrl('')
invalidateCredits()
} else {
setResult({
success: false,
message: res.reason ?? 'Submission failed. Please try again.',
})
}
} catch {
setResult({
success: false,
message: 'Network error. Please try again.',
})
} finally {
setIsSubmitting(false)
}
}
return (
<div className={compact ? 'space-y-2' : 'space-y-3'}>
<p className={compact ? 'text-muted-foreground text-xs' : 'text-sm'}>
Share BrowserOS on Twitter to earn 200 bonus credits!
</p>
<ul className="list-disc space-y-0.5 pl-4 text-muted-foreground text-xs">
<li>
Tweet must mention <span className="font-medium">@browserOS_ai</span>
</li>
<li>Tweet must be posted within the last 30 minutes</li>
<li>Each tweet can only be submitted once</li>
</ul>
<Button variant="outline" size="sm" className="w-full gap-2" asChild>
<a
href={getShareOnTwitterUrl()}
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="h-3.5 w-3.5" />
Share on Twitter
</a>
</Button>
<p className="text-muted-foreground text-xs">
Already shared? Paste your tweet link:
</p>
<div className="flex gap-2">
<Input
type="url"
placeholder="https://x.com/..."
value={tweetUrl}
onChange={(e) => setTweetUrl(e.target.value)}
className="h-8 text-xs"
disabled={isSubmitting}
/>
<Button
variant="default"
size="sm"
onClick={handleSubmit}
disabled={isSubmitting || !tweetUrl.trim()}
className="shrink-0 gap-1.5"
>
{isSubmitting ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
) : (
<Send className="h-3.5 w-3.5" />
)}
Submit
</Button>
</div>
{result && (
<p
className={
result.success
? 'text-green-600 text-xs dark:text-green-400'
: 'text-destructive text-xs'
}
>
{result.message}
</p>
)}
</div>
)
}

View File

@@ -1,5 +1,6 @@
import { AlertCircle, Clock, Coins, CreditCard, Zap } from 'lucide-react'
import { AlertCircle, Clock, Coins, Gift, Zap } from 'lucide-react'
import type { FC } from 'react'
import { ShareForCredits } from '@/components/referral/ShareForCredits'
import { Button } from '@/components/ui/button'
import {
getCreditBarColor,
@@ -43,8 +44,10 @@ export const UsagePage: FC = () => {
}
const credits = data?.credits ?? 0
const total = data?.dailyLimit ?? 100
const total = data?.dailyLimit ?? 50
const percentage = Math.min((credits / total) * 100, 100)
const bonusCredits = Math.max(0, credits - total)
const creditsUsed = Math.max(0, total - credits)
return (
<div className="space-y-6 p-6">
@@ -95,30 +98,32 @@ export const UsagePage: FC = () => {
<div className="flex items-center gap-2.5 rounded-lg bg-muted/50 px-3 py-2.5">
<Zap className="h-4 w-4 shrink-0 text-muted-foreground" />
<div>
<p className="font-medium text-xs">Credits used today</p>
<p className="text-muted-foreground text-xs">
{total - credits} of {total}
</p>
{bonusCredits > 0 ? (
<>
<p className="font-medium text-xs">Bonus credits</p>
<p className="text-muted-foreground text-xs">
+{bonusCredits} from referrals
</p>
</>
) : (
<>
<p className="font-medium text-xs">Credits used today</p>
<p className="text-muted-foreground text-xs">
{creditsUsed} of {total}
</p>
</>
)}
</div>
</div>
</div>
</div>
<div className="rounded-xl border p-5">
<div className="flex items-center gap-3">
<CreditCard className="h-5 w-5 text-muted-foreground" />
<div>
<p className="flex items-center gap-2 font-semibold text-sm">
Need more credits?
<span className="rounded-full bg-muted px-2 py-0.5 font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
Coming soon
</span>
</p>
<p className="text-muted-foreground text-xs">
Additional credit packages will be available soon
</p>
</div>
<div className="mb-4 flex items-center gap-2">
<Gift className="h-5 w-5 text-muted-foreground" />
<span className="font-semibold text-sm">Earn More Credits</span>
</div>
<ShareForCredits />
</div>
<div className="rounded-xl border border-[var(--accent-orange)]/30 bg-[var(--accent-orange)]/5 p-5">

View File

@@ -1,7 +1,9 @@
import { AlertCircle, RefreshCw } from 'lucide-react'
import type { FC } from 'react'
import { useMemo } from 'react'
import { ShareForCredits } from '@/components/referral/ShareForCredits'
import { Button } from '@/components/ui/button'
import type { ProviderType } from '@/lib/llm-providers/types'
const SURVEY_DIRECTIONS = [
'competitor',
@@ -14,6 +16,44 @@ function pickRandomDirection(): string {
return SURVEY_DIRECTIONS[Math.floor(Math.random() * SURVEY_DIRECTIONS.length)]
}
const PROVIDER_DISPLAY_NAMES: Record<ProviderType, string> = {
anthropic: 'Anthropic',
openai: 'OpenAI',
'openai-compatible': 'OpenAI-compatible',
google: 'Google',
openrouter: 'OpenRouter',
azure: 'Azure OpenAI',
ollama: 'Ollama',
lmstudio: 'LM Studio',
bedrock: 'AWS Bedrock',
browseros: 'BrowserOS',
moonshot: 'Moonshot',
'chatgpt-pro': 'ChatGPT Pro',
'github-copilot': 'GitHub Copilot',
'qwen-code': 'Qwen Code',
}
const UPSTREAM_RATE_LIMIT_PATTERNS: Array<string | RegExp> = [
'usage limit',
'rate limit',
'rate-limit',
'quota',
/\b429\b/,
'too many requests',
'insufficient_quota',
]
function getProviderDisplayName(providerType?: string): string {
if (providerType && providerType in PROVIDER_DISPLAY_NAMES) {
return PROVIDER_DISPLAY_NAMES[providerType as ProviderType]
}
return 'your provider'
}
function stripRetryPrefix(message: string): string {
return message.replace(/^Failed after \d+ attempts?\.\s*Last error:\s*/i, '')
}
interface ChatErrorProps {
error: Error
onRetry?: () => void
@@ -29,6 +69,8 @@ function parseErrorMessage(
isRateLimit?: boolean
isCreditsExhausted?: boolean
isConnectionError?: boolean
isUpstreamRateLimit?: boolean
providerName?: string
} {
const isBrowserosProvider = providerType === 'browseros'
@@ -69,6 +111,28 @@ function parseErrorMessage(
}
}
// Detect rate limits from non-BrowserOS upstream providers. Users were
// confused that a quota/429 from OpenAI/Anthropic/etc. looked like a
// BrowserOS-imposed limit.
if (!isBrowserosProvider && providerType) {
const lower = message.toLowerCase()
const matchesRateLimit = UPSTREAM_RATE_LIMIT_PATTERNS.some((p) =>
typeof p === 'string' ? lower.includes(p) : p.test(lower),
)
if (matchesRateLimit) {
let stripped = stripRetryPrefix(message).trim()
try {
const parsed = JSON.parse(stripped)
if (parsed?.error?.message) stripped = parsed.error.message
} catch {}
return {
text: stripped || message,
isUpstreamRateLimit: true,
providerName: getProviderDisplayName(providerType),
}
}
}
let text = message
try {
const parsed = JSON.parse(message)
@@ -90,8 +154,15 @@ export const ChatError: FC<ChatErrorProps> = ({
onRetry,
providerType,
}) => {
const { text, url, isRateLimit, isCreditsExhausted, isConnectionError } =
parseErrorMessage(error.message, providerType)
const {
text,
url,
isRateLimit,
isCreditsExhausted,
isConnectionError,
isUpstreamRateLimit,
providerName,
} = parseErrorMessage(error.message, providerType)
const surveyUrl = useMemo(
() =>
@@ -100,6 +171,11 @@ export const ChatError: FC<ChatErrorProps> = ({
)
const getTitle = () => {
if (isUpstreamRateLimit) {
return providerName && providerName !== 'your provider'
? `${providerName} rate limit reached`
: 'Upstream rate limit reached'
}
if (isRateLimit) return 'Daily limit reached'
if (isConnectionError) return 'Connection failed'
return 'Something went wrong'
@@ -112,6 +188,14 @@ export const ChatError: FC<ChatErrorProps> = ({
<span className="font-medium text-sm">{getTitle()}</span>
</div>
<p className="text-center text-destructive text-xs">{text}</p>
{isUpstreamRateLimit && (
<p className="text-center text-muted-foreground text-xs">
This is a limit from{' '}
<span className="font-medium">{providerName}</span>
{' — your configured model provider — not BrowserOS. Check your '}
provider's dashboard for quota, usage, or billing details.
</p>
)}
{isConnectionError && url && (
<a
href={url}
@@ -122,15 +206,22 @@ export const ChatError: FC<ChatErrorProps> = ({
View troubleshooting guide
</a>
)}
{isCreditsExhausted && url && (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground text-xs underline hover:text-foreground"
>
View Usage & Billing
</a>
{isCreditsExhausted && (
<>
<div className="w-full border-border/50 border-t pt-3">
<ShareForCredits compact />
</div>
{url && (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground text-xs underline hover:text-foreground"
>
View Usage & Billing
</a>
)}
</>
)}
{isRateLimit && !isCreditsExhausted && (
<p className="text-muted-foreground text-xs">

View File

@@ -5,6 +5,7 @@ export interface CreditsInfo {
credits: number
dailyLimit: number
lastResetAt?: string
browserosId?: string
}
const CREDITS_QUERY_KEY = ['credits']

View File

@@ -0,0 +1,33 @@
import { EXTERNAL_URLS } from '@browseros/shared/constants/urls'
interface ReferralResult {
success: boolean
creditsAdded?: number
reason?: string
}
export async function submitReferral(
tweetUrl: string,
browserosId: string,
): Promise<ReferralResult> {
const response = await fetch(
`${EXTERNAL_URLS.REFERRAL_SERVICE}/referral/submit`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ tweetUrl, browserosId }),
},
)
if (!response.ok) {
return {
success: false,
reason: `Request failed with status ${response.status}`,
}
}
return response.json()
}
export function getShareOnTwitterUrl(): string {
const text = 'I use @browseros_ai to browse the web with AI. Check it out!'
return `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`
}

View File

@@ -11,6 +11,8 @@ export interface AgentSession {
mcpServerKey?: string
/** Workspace directory when the session was created, for change detection. */
workingDir?: string
/** LLM config used when the session was created, for provider/model changes. */
llmConfigKey?: string
}
export class SessionStore {

View File

@@ -25,7 +25,7 @@ export function createCreditsRoutes(deps: CreditsDeps) {
return new Hono().get('/', async (c) => {
try {
const credits = await fetchCredits(gatewayBaseUrl, browserosId)
return c.json(credits)
return c.json({ ...credits, browserosId })
} catch (error) {
logger.error('Failed to fetch credits', {
error: error instanceof Error ? error.message : String(error),

View File

@@ -65,6 +65,7 @@ export class ChatService {
declinedApps: request.declinedApps,
browserosId: this.deps.browserosId,
}
const llmConfigKey = this.buildLlmConfigKey(agentConfig)
let session = sessionStore.get(request.conversationId)
let isNewSession = false
@@ -144,6 +145,24 @@ export class ChatService {
}
}
// Detect provider/model/auth change mid-conversation -> rebuild session.
// The AI SDK agent captures the language model at construction time, so a
// reused session would keep calling the previous provider.
if (session && session.llmConfigKey !== llmConfigKey) {
logger.info('LLM config changed mid-conversation, rebuilding session', {
conversationId: request.conversationId,
provider: agentConfig.provider,
model: agentConfig.model,
})
session = await this.rebuildSession(
session,
request,
agentConfig,
mcpServerKey,
llmConfigKey,
)
}
if (!session) {
isNewSession = true
let hiddenPageId: number | undefined
@@ -209,6 +228,7 @@ export class ChatService {
browserContext,
mcpServerKey,
workingDir: request.userWorkingDir,
llmConfigKey,
}
sessionStore.set(request.conversationId, session)
}
@@ -341,6 +361,7 @@ export class ChatService {
request: ChatRequest,
agentConfig: ResolvedAgentConfig,
mcpServerKey: string,
llmConfigKey = this.buildLlmConfigKey(agentConfig),
): Promise<AgentSession> {
const previousMessages = session.agent.messages
await session.agent.dispose()
@@ -365,6 +386,7 @@ export class ChatService {
browserContext,
mcpServerKey,
workingDir: request.userWorkingDir,
llmConfigKey,
}
newSession.agent.messages = sanitizeMessagesForToolset(
previousMessages,
@@ -374,6 +396,26 @@ export class ChatService {
return newSession
}
private buildLlmConfigKey(config: ResolvedAgentConfig): string {
return JSON.stringify({
provider: config.provider,
model: config.model,
apiKey: config.apiKey,
baseUrl: config.baseUrl,
upstreamProvider: config.upstreamProvider,
resourceName: config.resourceName,
region: config.region,
accessKeyId: config.accessKeyId,
secretAccessKey: config.secretAccessKey,
sessionToken: config.sessionToken,
accountId: config.accountId,
reasoningEffort: config.reasoningEffort,
reasoningSummary: config.reasoningSummary,
contextWindowSize: config.contextWindowSize,
supportsImages: config.supportsImages,
})
}
private buildMcpServerKey(browserContext?: BrowserContext): string {
const managed = browserContext?.enabledMcpServers?.slice().sort() ?? []
const custom =

View File

@@ -44,11 +44,19 @@ const createAgentUIStreamResponseSpy = mock(
},
)
const resolveLLMConfigSpy = mock(async () => ({
provider: 'openai',
model: 'gpt-5',
apiKey: 'test-key',
}))
const resolveLLMConfigSpy = mock(
async (config: {
provider?: string
model?: string
apiKey?: string
baseUrl?: string
}) => ({
provider: config.provider ?? 'openai',
model: config.model ?? 'gpt-5',
apiKey: config.apiKey ?? 'test-key',
baseUrl: config.baseUrl,
}),
)
mock.module('ai', () => ({
createAgentUIStreamResponse: createAgentUIStreamResponseSpy,
@@ -288,4 +296,65 @@ describe('ChatService scheduled task hidden page lifecycle', () => {
})
expect(browser.closePage).toHaveBeenCalledWith(88)
})
it('rebuilds an existing session when the LLM provider changes', async () => {
const firstAgent = createFakeAgent()
agentToReturn = firstAgent
streamResponseHandler = async ({ onFinish }) => {
await onFinish({ messages: agentToReturn?.messages ?? [] })
return new Response('ok')
}
const browser = {
resolveTabIds: mock(async () => new Map<number, number>()),
}
const sessionStore = createSessionStore()
const service = new ChatService({
sessionStore: sessionStore as never,
klavisClient: {} as never,
browser: browser as never,
registry: {} as never,
})
const conversationId = crypto.randomUUID()
const createCallsBefore = createAgentSpy.mock.calls.length
await service.processMessage(
{
conversationId,
message: 'First message',
provider: 'browseros',
model: 'browseros-auto',
mode: 'agent',
origin: 'sidepanel',
} as never,
new AbortController().signal,
)
const secondAgent = createFakeAgent()
agentToReturn = secondAgent
await service.processMessage(
{
conversationId,
message: 'Second message',
provider: 'chatgpt-pro',
model: 'gpt-5.3-codex',
mode: 'agent',
origin: 'sidepanel',
} as never,
new AbortController().signal,
)
expect(createAgentSpy.mock.calls.length).toBe(createCallsBefore + 2)
expect(firstAgent.dispose).toHaveBeenCalledTimes(1)
expect(sessionStore.get(conversationId)?.agent).toBe(secondAgent)
const latestCreateArgs = createAgentSpy.mock.calls.at(-1)?.[0] as {
resolvedConfig: { provider: string; model: string }
}
expect(latestCreateArgs.resolvedConfig).toMatchObject({
provider: 'chatgpt-pro',
model: 'gpt-5.3-codex',
})
})
})

View File

@@ -19,4 +19,5 @@ export const EXTERNAL_URLS = {
QWEN_DEVICE_CODE: 'https://chat.qwen.ai/api/v1/oauth2/device/code',
QWEN_OAUTH_TOKEN: 'https://chat.qwen.ai/api/v1/oauth2/token',
QWEN_CODE_API: 'https://portal.qwen.ai/v1',
REFERRAL_SERVICE: 'https://browseros-referral.fly.dev',
} as const