Merge pull request #34 from menloresearch/justrach/new-settings-page

Justrach/new settings page

Author: justrach

PR.md

@@ -1,94 +1,81 @@
-Title: UX Improvements: @mention Tab Selection, LIFO Sorting, Full-Screen Overlay Menu + Jan API Default
+Title: Side Panel UX + Settings Page — Composer Refactor, Suggestion Pills, Theming, and New Components
 
 Summary
-- Fix @mention tab selection bug preventing tabs from being added to context via chat input
-- Implement LIFO (Last-In-First-Out) sorting for Add context popup to prioritize recent tabs
-- Redesign hamburger menu as full-screen overlay with animated slide-in panel
-- Set Jan API (https://api.jan.ai/v1) as default endpoint with jan-v1-4b model
-- Update documentation with new UX patterns and behavior
+- Introduces a dedicated Settings panel in the side panel UI to configure provider, model, and behavior without leaving the flow.
+- Adds Suggestion Pills for quick-start prompts and common actions in the composer.
+- Refactors Composer and ComposerInput for cleaner structure, better shortcuts, and more predictable behavior.
+- Adds Tooltip and ScrollArea UI components; standardizes global theming with new tokens and a Settings icon.
+- Tightens auto-follow active tab behavior in `App.jsx` and streamlines state management.
 
-What's included
-- **@mention Tab Selection Fix**
-  - Fixed undefined `insertMentionTab` references by wiring to existing `handleMentionSelect`
-  - Tab selection now adds to context AND keeps mention text in input with proper cursor positioning
-  - Supports multiple @mentions in single message
-- **LIFO Tab Sorting**
-  - Add context popup now shows unpinned tabs first, then by lastAccessed (desc), fallback to index (desc)
-  - Improves tab selection UX when working with many open tabs
-  - Enhanced search includes title, URL, and tab ID matching
-- **Full-Screen Overlay Menu**
-  - Hamburger menu opens as fixed overlay with semi-transparent scrim covering conversation area
-  - 320px animated slide-in panel with click-outside-to-close behavior
-  - Smooth motion animations and proper z-index layering
-- **Jan API as Default**
-  - Default provider changed from "custom" to "jan" 
-  - Default endpoint: https://api.jan.ai/v1 (was empty)
-  - Default model: jan-v1-4b (was empty)
-  - API key disabled by default (useApiKey: false)
-- **Documentation Updates**
-  - New ADR-003 documenting UX improvement decisions and implementation
-  - Updated behavior.md with @mention and overlay menu patterns
-  - Enhanced considerations.md with new UX scenarios
+What’s Included
+- Side Panel
+  - Settings panel UI (`ui/sidepanel/components/Settings.jsx`).
+  - Suggestion pills component (`ui/sidepanel/components/SuggestionPills.jsx`).
+  - Add Context modal (`ui/sidepanel/components/AddContextModal.jsx`).
+  - Composer refactors (`ui/sidepanel/components/composer/Composer.jsx`, `ui/sidepanel/components/ComposerInput.jsx`).
+  - App state/auto-follow adjustments (`ui/sidepanel/App.jsx`).
+- UI Components
+  - Tooltip (`ui/components/ui/tooltip.tsx`) and ScrollArea (`ui/components/ui/scroll-area.tsx`).
+  - Button and Input refinements (`ui/components/ui/button.jsx`, `ui/components/ui/input.jsx`).
+  - Settings icon (`ui/sidepanel/components/icons/SettingsIcon.jsx`).
+- Theming & Styles
+  - Theme tokens (`ui/themes.css`) and global tweaks (`ui/styles.css`).
 
 Rationale
-- **Productivity**: LIFO tab sorting reduces time to find relevant tabs in multi-tab workflows
-- **Functionality**: @mention tab selection was broken due to undefined function references
-- **Visual Hierarchy**: Full-screen overlay provides clear navigation context vs narrow sidebar
-- **Onboarding**: Jan API default eliminates initial setup friction for new users
-- **Consistency**: Maintains design system tokens and theme compatibility
+- Improve onboarding and control with an integrated Settings panel.
+- Speed common tasks with Suggestion Pills and better keyboard ergonomics.
+- Prepare for future UI scale with reusable Tooltip/ScrollArea primitives.
+- Consolidate theme tokens for consistent styling and easier iteration.
 
-Files changed
-- src/background.js (default settings, Jan API endpoints)
-- ui/sidepanel/App.jsx (mention fix, LIFO sorting, overlay menu)
-- docs/adr-003-ux-improvements.md (new ADR)
-- behavior.md (@mention and overlay documentation)
-- considerations.md (UX scenarios)
+How to Test
+1) Build and load the extension
+   - `npm run build` (or `bun run build`) and load `dist/` via `chrome://extensions` → Load unpacked.
+2) Settings Panel
+   - Open side panel → gear icon. Verify provider, model, and options render and persist.
+   - Toggle relevant options and confirm they affect new sessions where applicable.
+3) Suggestion Pills
+   - In the side panel composer, confirm pills render and insert text/context when clicked.
+   - Verify keyboard focus/selection works with Tab/Enter.
+4) Composer/ComposerInput
+   - Type, submit, and edit messages. Confirm shortcuts (Enter to send, Shift+Enter newline) behave consistently.
+   - Validate streaming, cancel, and retry work without focus loss.
+5) Auto-follow Active Tab
+   - Switch browser tabs with auto-follow enabled; confirm session follows active tab without losing state.
+6) Tooltip/ScrollArea
+   - Confirm tooltips render on hover/focus in updated UI. Validate long lists scroll smoothly.
+7) Theming/Styles
+   - Sanity-check themes and global styles; ensure contrast and spacing look consistent.
 
-How to test locally
-1) **@mention Tab Selection**
-   - Type `@` in chat input to trigger mention popup
-   - Verify tabs appear in LIFO order (unpinned first, then by lastAccessed desc)
-   - Use arrow keys to navigate, Enter/Tab/click to select
-   - Confirm tab is added to context AND mention text remains in input
-   
-2) **Add Context Popup LIFO Sorting**
-   - Click "Add context" button
-   - Verify tabs show unpinned first, then most recently accessed
-   - Search should match title, URL, and tab ID
-   
-3) **Full-Screen Overlay Menu**
-   - Click hamburger menu (☰)
-   - Verify full-screen overlay with scrim covers conversation area
-   - Test click-outside-to-close behavior
-   - Check smooth slide-in animation
-   
-4) **Jan API Default**
-   - Fresh install should default to Jan provider with https://api.jan.ai/v1
-   - Model should default to jan-v1-4b
-   - API key should be disabled by default
+Files Touched (high-level)
+- `ui/sidepanel/App.jsx`
+- `ui/sidepanel/components/ComposerInput.jsx`
+- `ui/sidepanel/components/composer/Composer.jsx`
+- `ui/sidepanel/components/SuggestionPills.jsx`
+- `ui/sidepanel/components/AddContextModal.jsx`
+- `ui/sidepanel/components/Settings.jsx`
+- `ui/components/ui/button.jsx`, `ui/components/ui/input.jsx`
+- `ui/components/ui/tooltip.tsx`, `ui/components/ui/scroll-area.tsx`
+- `ui/sidepanel/components/icons/SettingsIcon.jsx`
+- `ui/themes.css`, `ui/styles.css`
 
-5) **Build and Load Extension**
-   - `npm run build` then load `dist/` via `chrome://extensions` → Load unpacked
-   - Test all above functionality in browser
+Behavioral Notes
+- Auto-follow reads from `context.autoFollowActiveTab`; side panel re-registers active tab as needed.
+- Composer shortcuts and focus handling are more predictable; streaming remains cancellable.
 
-Behavioral Changes
-- **@mention**: Now functional - adds tabs to context while preserving mention text
-- **Tab Sorting**: LIFO ordering prioritizes recently accessed tabs for faster selection
-- **Menu UX**: Full-screen overlay provides better visual hierarchy than narrow sidebar
-- **Default Config**: Jan API eliminates setup friction for new users
-
-Technical Implementation
-- Fixed undefined function references in mention system
-- Added LIFO sort logic with unpinned-first priority
-- Implemented fixed-position overlay with scrim and animations
-- Updated default settings in background.js
-- Preserved theme system compatibility
+Screenshots
+- Add Settings panel, Suggestion Pills, and composer before/after screenshots (attach).
 
 Checklist
-- [x] @mention tab selection adds to context and keeps text in input
-- [x] Add context popup shows LIFO-sorted tabs
-- [x] Hamburger menu opens as full-screen overlay with animations
-- [x] Jan API set as default endpoint with jan-v1-4b model
-- [x] Documentation updated (ADR-003, behavior.md, considerations.md)
-- [x] Build succeeds without errors
+- [x] Builds cleanly and loads in Chromium.
+- [x] Settings persist and apply in new sessions.
+- [x] Suggestion pills insert as expected; accessible via keyboard.
+- [x] Composer shortcuts correct; streaming is responsive and cancellable.
+- [x] Tooltip/ScrollArea render and behave consistently.
+- [x] Theming tokens apply without regressions.
+
+Breaking Changes
+- None expected. UI-only additions and refactors; no storage schema changes.
+
+Release Notes
+- Side panel Settings, Suggestion Pills, and composer refactors improve UX and configurability. New Tooltip/ScrollArea primitives and theme tokens standardize UI going forward.
 

docs/AGENTS_GUIDE.md

@@ -0,0 +1,100 @@
+# Jan Extension — Agents Guide
+
+What powers the Jan Extension under the hood: agents, message flow, and how to extend it.
+
+## Goals
+
+- Unify page summarization, inline writing assist, and quick web search.
+- Support any OpenAI-compatible API (Jan Server/local, Cerebras, OpenAI, etc.).
+- Keep UX fast and predictable across content script, background, and side panel.
+
+## Mental Model
+
+- Background (service worker): the router/orchestrator. Hosts agents and tools.
+- Content script: runs in the page. Extracts text, shows inline tooltip UI, DOM ops.
+- Side panel UI: the app surface. Shows sessions, chat composer, and streaming output.
+
+These talk over a long‑lived port so streaming is smooth and cancellable.
+
+## Key Components
+
+- Side Panel UI (`ui/sidepanel/`)
+  - Shows session context + chat composer; renders streaming Markdown.
+  - Tracks active tab; auto-follows when enabled.
+- Background Service Worker (`src/background.js`)
+  - Central router for UI ↔ content scripts ↔ external services.
+  - Hosts agents/tools including Google Search + SERP scraping and the MCP bridge.
+- Content Script (`src/content.js`)
+  - Extracts page/selection text; presents Inline Assistant tooltip; DOM helpers.
+- Options UI (`ui/options/`)
+  - Configure provider base URL, API key, model presets (OpenAI‑compatible endpoints, including Jan and Cerebras).
+- MCP Search Bridge (`mcp/search-server/`)
+  - Optional local MCP server that exposes search/visit tools to LLM clients via a WebSocket bridge.
+
+## Agents
+
+- Page Summarizer (Side Panel)
+  - Goal: Summarize the current page or selection with clear, skimmable Markdown.
+  - Inputs: Page text, selection (optional), provider config, session settings.
+  - Output: Markdown with headings, bullets, and links.
+
+- Inline Assistant
+  - Goal: Improve selected text inline (rewrite, simplify, translate, adjust tone).
+  - Entrypoint: Tooltip near selection; keyboard shortcuts to apply/copy/regenerate.
+  - Messages are built by `buildInlineAssistMessages` in `src/background.js`.
+
+- Search (Google Search + Scrape)
+  - Goal: Run a quick web search, scrape the SERP for links/snippets.
+  - Entrypoint: `performGoogleSearchAndScrape(payload)` in `src/background.js`.
+  - Flow: Opens an inactive Google tab, waits for hydration, extracts structured results, optionally closes the tab.
+
+- MCP Bridge Agent
+  - Goal: Expose `search` and `visit_tool` over MCP so local tools are accessible from LLM apps.
+  - Lives in `mcp/search-server/` (TypeScript). Structured outputs are planned with Zod.
+
+## Message & Port Routing
+
+- Long‑lived port: Side panel registers a persistent port with background.
+  - On tab activation, the side panel re‑registers the active `tabId` via `{ type: 'REGISTER_PORT', tabId }` so streaming routes to the right place.
+- Session ↔ tab mapping: Background maintains a tab→session map; side panel switches sessions as the active tab changes.
+  - Recent fix: Auto‑follow reads from the target session’s `context.autoFollowActiveTab` (see `ui/sidepanel/App.jsx`).
+- Content script messaging: Background requests page/selection text; content script returns selection/caret details and hosts the inline UI.
+
+## Core Flows
+
+- Summarize Current Page (Side Panel)
+  1) Side panel asks content script for page/selection data.
+  2) Background builds the LLM prompt and streams to the provider.
+  3) Side panel renders streaming Markdown; user can copy/export.
+
+- Inline Assistant
+  1) User selects text; content script shows the tooltip.
+  2) Background builds messages (`buildInlineAssistMessages`) and calls the provider.
+  3) Content script previews the result; user Apply/Copy/Regenerate.
+
+- Google Search + Scrape
+  1) UI or an agent calls `performGoogleSearchAndScrape({ query, closeTab? })`.
+  2) Background opens an inactive Google tab, waits for load + hydration, then scrapes.
+  3) Returns structured JSON; URLs are also mirrored to `_meta.urls` for compatibility.
+
+## Extending Agents
+
+- Add a tool/agent in `src/background.js`.
+- Define a message type and handler; wire it from the side panel or content script.
+- Prefer streaming when supported; keep UI cancellable and responsive.
+
+## Permissions & Privacy
+
+- Manifest (`manifest.json`) requests `tabs`, `activeTab`, `sidePanel`, `storage`, and wide host permissions for dev.
+- For production, restrict host permissions and sanitize logs.
+- Do not persist secrets; users configure API keys in Options.
+
+## References
+
+- Background: `src/background.js`
+- Content: `src/content.js`
+- Side Panel: `ui/sidepanel/`
+- Options: `ui/options/`
+- MCP Server: `mcp/search-server/`
+
+Note: This guide mirrors the root-level `agents.md` for convenience and discoverability under `docs/`.

ui/components/ui/button.jsx

@@ -3,12 +3,13 @@ import { cn } from '../../lib/utils'
 
 export function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
   const Comp = asChild ? 'span' : 'button'
-  const base = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--brand-blue] disabled:pointer-events-none disabled:opacity-50'
+  const base = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50'
+  const focusRing = 'focus-visible:ring-[--theme-primary]'
   const variants = {
-    default: 'bg-[--brand-amber] text-white hover:bg-[--brand-amber-2]',
-    secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-200',
-    ghost: 'bg-transparent hover:bg-black/5',
-    outline: 'border border-neutral-300 hover:bg-black/5',
+    default: 'text-white hover:opacity-90',
+    secondary: 'hover:opacity-90',
+    ghost: 'bg-transparent hover:opacity-80',
+    outline: 'border hover:opacity-90',
     pastel: 'btn-pastel border border-transparent',
     pastelReverse: 'btn-pastel-rev border border-transparent',
   }
@@ -18,5 +19,24 @@ export function Button({ className, variant = 'default', size = 'default', asChi
     lg: 'h-10 px-4',
     icon: 'h-8 w-8 p-0',
   }
-  return <Comp className={cn(base, variants[variant] || variants.default, sizes[size] || sizes.default, className)} {...props} />
+  const getVariantStyles = (variant) => {
+    switch (variant) {
+      case 'default':
+        return { backgroundColor: 'var(--theme-primary)', color: 'var(--theme-primary-fg)' }
+      case 'secondary':
+        return { backgroundColor: 'var(--theme-secondary)', color: 'var(--theme-secondary-fg)' }
+      case 'ghost':
+        return { backgroundColor: 'transparent', color: 'var(--theme-high-em-text)' }
+      case 'outline':
+        return { backgroundColor: 'var(--theme-tertiary)', color: 'var(--theme-tertiary-fg)', borderColor: 'var(--theme-border-interactive)' }
+      default:
+        return { backgroundColor: 'var(--theme-primary)', color: 'var(--theme-primary-fg)' }
+    }
+  }
+  
+  return <Comp 
+    className={cn(base, focusRing, variants[variant] || variants.default, sizes[size] || sizes.default, className)} 
+    style={getVariantStyles(variant)}
+    {...props} 
+  />
 }

ui/components/ui/input.jsx

@@ -10,11 +10,24 @@ export const Input = React.forwardRef(function Input(
       ref={ref}
       type={type}
       className={cn(
-        'flex h-9 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
-        'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        'disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full rounded-md border px-3 py-2 text-sm',
+        'focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
+      style={{
+        backgroundColor: 'var(--theme-field)',
+        borderColor: 'var(--theme-border-interactive)',
+        color: 'var(--theme-high-em-text)',
+        '--placeholder-color': 'var(--theme-field-fg)'
+      }}
+      onFocus={(e) => {
+        e.target.style.backgroundColor = 'var(--theme-field-active)'
+        e.target.style.borderColor = 'var(--theme-primary)'
+      }}
+      onBlur={(e) => {
+        e.target.style.backgroundColor = 'var(--theme-field)'
+        e.target.style.borderColor = 'var(--theme-border-interactive)'
+      }}
       {...props}
     />
   )

ui/components/ui/scroll-area.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+// Simple scroll area components - basic implementations for the extension
+export const ScrollArea = {
+  Root: ({ children, className, ...props }) => (
+    <div className={`relative overflow-hidden ${className || ''}`} {...props}>
+      {children}
+    </div>
+  ),
+  
+  Viewport: ({ children, className, ...props }) => (
+    <div className={`h-full w-full overflow-auto ${className || ''}`} {...props}>
+      {children}
+    </div>
+  ),
+  
+  Scrollbar: ({ children, className, orientation = 'vertical', ...props }) => (
+    <div 
+      className={`flex select-none touch-none bg-transparent ${className || ''}`} 
+      data-orientation={orientation}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+  
+  Thumb: ({ className, ...props }) => (
+    <div className={`flex-1 rounded-full ${className || ''}`} {...props} />
+  )
+}

ui/components/ui/tooltip.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+// Simple tooltip components - basic implementations for the extension
+export const Root = ({ children }) => <div>{children}</div>
+
+export const Trigger = ({ children, asChild, ...props }) => {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, props)
+  }
+  return <div {...props}>{children}</div>
+}
+
+export const Content = ({ children, className, sideOffset, ...props }) => (
+  <div 
+    className={`z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 ${className || ''}`}
+    {...props}
+  >
+    {children}
+  </div>
+)