Merge pull request #228 from browseros-ai/feat/graph-mode-fixes-2

chore: refactor JTBD agent to have follow naming conventions and add conventions to claude.md

apps/agent/CLAUDE.md

@@ -6,6 +6,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 - Write minimal code comments. Only add comments for non-obvious logic, complex algorithms, or critical warnings. Skip comments for self-explanatory code, obvious function names, and simple operations.
 
+## File Naming Convention
+
+| Type | Convention | Example |
+|------|------------|---------|
+| Folders | kebab-case | `ai-settings/`, `jtbd-popup/`, `llm-hub/` |
+| React components (.tsx) | PascalCase | `AISettingsPage.tsx`, `SurveyHeader.tsx` |
+| Hooks (.ts) | camelCase with `use` prefix | `useRunWorkflow.ts`, `useVoiceInput.ts` |
+| Non-component files (.ts) | lowercase | `types.ts`, `models.ts`, `storage.ts` |
+
 ## Project Overview
 
 **BrowserOS Agent Chrome Extension** - This project contains the official chrome extension for BrowserOS Agent, enabling users to interact with the core functionalities of BrowserOS.

apps/agent/entrypoints/options/App.tsx

@@ -4,7 +4,7 @@ import { AISettingsPage } from './ai-settings/AISettingsPage'
 import { ConnectMCP } from './connect-mcp/ConnectMCP'
 import { CreateGraph } from './create-graph/CreateGraph'
 import { CustomizationPage } from './customization/CustomizationPage'
-import { SurveyPage } from './jtbd-agent'
+import { SurveyPage } from './jtbd-agent/SurveyPage'
 import { DashboardLayout } from './layout/DashboardLayout'
 import { LlmHubPage } from './llm-hub/LlmHubPage'
 import { MCPSettingsPage } from './mcp-settings/MCPSettingsPage'

apps/agent/entrypoints/options/create-graph/GraphChat.tsx

@@ -9,7 +9,7 @@ import {
   GRAPH_MESSAGE_DISLIKE_EVENT,
   GRAPH_MESSAGE_LIKE_EVENT,
 } from '@/lib/constants/analyticsEvents'
-import { useJtbdPopup } from '@/lib/jtbd-popup/use-jtbd-popup'
+import { useJtbdPopup } from '@/lib/jtbd-popup/useJtbdPopup'
 import { track } from '@/lib/metrics/track'
 import { cn } from '@/lib/utils'
 

apps/agent/entrypoints/options/jtbd-agent/SurveyChat.tsx

@@ -4,9 +4,9 @@ import { MessageResponse } from '@/components/ai-elements/message'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
-import type { Message } from './use-chat'
-import { useVoiceInput } from './use-voice-input'
-import { VoiceInputButton } from './voice-input-button'
+import type { Message } from './useSurveyChat'
+import { useVoiceInput } from './useVoiceInput'
+import { VoiceInputButton } from './VoiceInputButton'
 
 interface Props {
   messages: Message[]

apps/agent/entrypoints/options/jtbd-agent/SurveyPage.tsx

@@ -2,10 +2,10 @@ import { AlertCircle, CheckCircle2, RotateCcw } from 'lucide-react'
 import type { FC } from 'react'
 import { Button } from '@/components/ui/button'
 import { jtbdPopupStorage } from '@/lib/jtbd-popup/storage'
-import { Chat } from './chat'
-import { Header } from './header'
-import { useChat } from './use-chat'
-import { Welcome } from './welcome'
+import { Chat } from './SurveyChat'
+import { Header } from './SurveyHeader'
+import { Welcome } from './SurveyWelcome'
+import { useChat } from './useSurveyChat'
 
 const ThankYouCard: FC<{ onReset: () => void }> = ({ onReset }) => (
   <div className="rounded-xl border border-border bg-card p-8 text-center shadow-sm">

apps/agent/entrypoints/sidepanel/index/Chat.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { createBrowserOSAction } from '@/lib/chat-actions/types'
 import { SIDEPANEL_AI_TRIGGERED_EVENT } from '@/lib/constants/analyticsEvents'
-import { useJtbdPopup } from '@/lib/jtbd-popup/use-jtbd-popup'
+import { useJtbdPopup } from '@/lib/jtbd-popup/useJtbdPopup'
 import { track } from '@/lib/metrics/track'
 import { ChatEmptyState } from './ChatEmptyState'
 import { ChatError } from './ChatError'