Commit graph

80 commits

Author SHA1 Message Date
Mario Zechner
2d5054e6c0 Add reload button to HTML artifact header
Adds a reload button with RefreshCw icon to HTML artifact header buttons.
Clicking the button clears logs and re-executes the HTML content, useful
for manually refreshing when developing HTML artifacts or testing changes.

Changes:
- Import Button, icon from mini-lit and RefreshCw from lucide
- Add reload button to getHeaderButtons() that clears logs and calls executeContent()
- Add "Reload HTML" i18n key in English and German translations
2025-10-18 00:13:16 +02:00
Mario Zechner
92ce5a342f Add auto-reload for HTML artifacts when dependencies change
HTML artifacts can read other artifacts via getArtifact() and attachments.
When any artifact is created, updated, rewritten, or deleted, all HTML
artifacts now automatically reload to reflect the latest data.

Changes:
- Add reloadAllHtmlArtifacts() method to ArtifactsPanel
- Call reload after all artifact mutations (create/update/rewrite/delete)
- Make HtmlArtifact.sandboxIframeRef and executeContent() public
- Update runtime providers before re-executing HTML content

This ensures HTML artifacts always display current data from their dependencies.
2025-10-18 00:10:23 +02:00
Mario Zechner
2a7ccf0fcb Updates to prompts 2025-10-17 22:44:03 +02:00
Mario Zechner
ffc9be8867 Agent package + coding agent WIP, refactored web-ui prompts 2025-10-17 11:47:01 +02:00
Mario Zechner
949cd4efd8 Fix console.log duplication bug in ConsoleRuntimeProvider
Issue:
Each browser_javascript execution wrapped console methods, but captured
the current (already wrapped) console as "original". This created a chain
of wrappers that accumulated across executions:
- Execution 1: 1x console.log (wrapper1 → real console)
- Execution 2: 2x console.log (wrapper2 → wrapper1 → real console)
- Execution 3: 3x console.log (wrapper3 → wrapper2 → wrapper1 → real console)
- Execution 4: 4x console.log (and so on...)

Fix:
Store the truly original console methods in window.__originalConsole on
first wrap only. All subsequent executions use these stored original methods
instead of capturing the current console. This prevents wrapper accumulation.

Changes:
- Check if window.__originalConsole exists before wrapping
- Store original console methods with .bind() to preserve context
- Always use window.__originalConsole for local logging
- Now each execution logs exactly 1x regardless of execution count
2025-10-13 00:20:23 +02:00
Mario Zechner
f66d577eb2 Add paste image support to MessageEditor
- Add handlePaste method to detect and process pasted images
- Automatically attach pasted images as attachments
- Support multiple images in single paste
- Prevent default paste behavior for images (text paste still works normally)
- Use same loadAttachment utility as drag-and-drop for consistency
2025-10-12 19:47:38 +02:00
Mario Zechner
4079bced36 Fix TypeScript errors and export UserMessageWithAttachments
- Export UserMessageWithAttachments type from web-ui index
- Remove unused i18n import from extract-document tool
- Update models.generated.ts (model order changes from API)

This fixes type errors when sitegeist uses custom user message renderer
2025-10-12 17:09:14 +02:00
Mario Zechner
f8b98f7dac Add extract_document tool and improve artifacts tab scrolling
- Add extract_document tool for extracting text from PDF/DOCX/XLSX/PPTX from URLs
- CORS proxy support from settings for fetching documents
- Proper error messages guiding users on CORS issues and manual file attachment
- Add scroll-into-view for active artifact tabs
- Export extract_document tool from web-ui package
2025-10-12 16:24:36 +02:00
Mario Zechner
f93e72a805 Committing manually like the monkey I am 2025-10-12 02:59:46 +02:00
Mario Zechner
26b774bb04 Add standalone mode for HTML artifact downloads
When downloading HTML artifacts, the generated HTML now works standalone
without requiring the extension runtime.

Changes:
- Add PrepareHtmlOptions config object to SandboxedIframe.prepareHtmlDocument()
- Add isStandalone flag to skip runtime bridge and navigation interceptor
- When isStandalone=true:
  - window.sendRuntimeMessage is NOT defined
  - Navigation interceptor is NOT injected
  - Artifact runtime providers fall back to embedded data
- HtmlArtifact download button now uses isStandalone: true

This fixes the issue where downloaded HTML artifacts would:
- Try to call window.sendRuntimeMessage (which would fail silently)
- Try to postMessage to non-existent parent window
- Not work when opened via file:// protocol

Now downloaded artifacts work completely standalone with embedded data.
2025-10-12 00:39:26 +02:00
Mario Zechner
63bfe95c18 Fix up context check 2025-10-11 21:41:24 +02:00
Mario Zechner
8a96741441 Revert: Fix extension context detection - original logic was correct
The negated approach broke browser_script which runs in page context.
browser_script injects into web pages (http://, https://) where
chrome.runtime.sendMessage doesn't work. The original whitelist
approach correctly identifies extension contexts only.

The real issue with artifacts in sandbox iframes needs a different fix.
2025-10-11 19:32:33 +02:00
Mario Zechner
372be18657 Fix module script validation and extension context detection
1. Skip JavaScript validation for <script type="module"> tags
   - new Function() cannot validate ES module syntax (import/export)
   - Module scripts now execute without validation errors
   - Fixes issue where HTML artifacts with modules would fail to load

2. Improve __isExtensionContext detection logic
   - Changed from whitelist (chrome-extension://, moz-extension://)
   - To blacklist approach: negate http://, https://, file://
   - More robust - handles all extension protocols (about:srcdoc, etc.)
   - Fixes "offline mode" errors when using browser_script artifacts

Resolves artifacts not working in extension context after document.write()
2025-10-11 19:19:19 +02:00
Mario Zechner
98ea763d64 Intercept iframe navigation and open links externally
- Add navigation interceptor script that prevents all iframe navigation
- Intercept link clicks, form submissions, and window.location changes
- Send open-external-url messages to parent window
- Use chrome.tabs.create() in extension context, window.open() fallback
- Fix font-size workaround to use 'initial' instead of hardcoded 16px
- Document Chrome extension font-size bug with Stack Overflow reference

This prevents HTML artifacts from navigating away when users click links,
which would break the sandbox message system. All links now open in new
Chrome tabs instead.
2025-10-11 19:13:04 +02:00
Mario Zechner
2a67556e5d Fix font-size inheritance in HTML artifact iframes
Set explicit font-size: 16px on the <html> element in sandboxed iframes
to prevent browser default inheritance quirks that can cause unexpected
font sizes (e.g., 75% shown in devtools).

This establishes a consistent base font size while still allowing user
HTML content to override it on body or specific elements as needed.

Fixes the issue where HTML artifacts displayed with inconsistent font
sizes due to iframe inheritance behavior.
2025-10-11 18:46:55 +02:00
Mario Zechner
b5648eaabd Fix extension context detection in runtime providers
Replace window.sendRuntimeMessage existence check with URL-based detection.
The sendRuntimeMessage function exists in both extension and non-extension
contexts (e.g., downloaded HTML artifacts), causing incorrect behavior.

Changes:
- Add window.__isExtensionContext() helper to RuntimeMessageBridge that checks:
  - chrome-extension:// URLs (Chrome)
  - moz-extension:// URLs (Firefox)
  - about:srcdoc (sandbox iframes)
- Update all runtime providers to use __isExtensionContext() instead:
  - FileDownloadRuntimeProvider: Correctly falls back to browser download
  - ConsoleRuntimeProvider: Only sends messages in extension context
  - ArtifactsRuntimeProvider: Properly detects offline/read-only mode

This fixes the issue where downloaded HTML artifacts incorrectly try to
communicate with the extension when opened from disk.
2025-10-11 18:39:45 +02:00
Mario Zechner
46c1da9826 Add getAllFromIndex method for efficient sorted queries
- Add getAllFromIndex to StorageBackend interface for index-based queries
- Implement getAllFromIndex in IndexedDBStorageBackend using cursor API
- Update SessionsStore.getAllMetadata to use lastModified index
- Enables database-native sorting instead of fetching all keys and sorting in JS

Benefits:
- Much faster for large datasets (uses IndexedDB cursor with direction)
- Reduces memory usage (no need to load all keys first)
- Leverages existing indices for optimal performance
2025-10-11 16:21:28 +02:00
Mario Zechner
b129154cc8 Add ToolRenderResult interface for custom tool rendering
- Changed ToolRenderer return type from TemplateResult to ToolRenderResult
- ToolRenderResult = { content: TemplateResult, isCustom: boolean }
- isCustom: true = no card wrapper, false = wrap in card
- Updated all existing tool renderers to return new format
- Updated Messages.ts to handle custom rendering

This enables tools to render without default card chrome when needed.
2025-10-11 04:40:42 +02:00
Mario Zechner
3db2a6fe2c Expose agent, agentInterface, and artifactsPanel as public in ChatPanel
Make these properties public so they can be accessed externally for
test automation and other programmatic control.

Changes:
- Change agent, agentInterface, artifactsPanel from private to public
2025-10-10 11:40:07 +02:00
Mario Zechner
2756f2a974 Refactor JavaScript REPL tool description with consistent pattern
Clean up and restructure JavaScript REPL description following consistent pattern:
- Purpose section
- When to Use section
- Environment section
- Common Libraries section
- Important Notes section
- Example section

Removed buildJavaScriptReplDescription() function - no longer dynamically
injecting runtime provider docs into tool description (will move to system prompt).

Changes:
- Replace JAVASCRIPT_REPL_BASE_DESCRIPTION with JAVASCRIPT_REPL_DESCRIPTION
- Remove JAVASCRIPT_REPL_CHART_EXAMPLE and JAVASCRIPT_REPL_FOOTER
- Remove buildJavaScriptReplDescription() function
- Update javascript-repl tool to use static description
- Simpler, more scannable structure with clear hierarchy
2025-10-10 11:31:11 +02:00
Mario Zechner
3337953b2a Improve artifacts tool description to emphasize update command
Add clear decision tree and anti-patterns to prevent LLMs from using
get + rewrite when they should use update for targeted edits.

Changes:
- Add CRITICAL workflow section at top with decision tree
- Emphasize 'update' as PREFERRED for edits (token efficient)
- Mark 'rewrite' as LAST RESORT only
- Add ANTI-PATTERNS section showing wrong approaches
- Clarify use cases for each command
- Add examples emphasizing surgical modifications
2025-10-10 02:32:19 +02:00
Mario Zechner
ab9137542c Clarify when to use artifacts runtime functions vs artifacts tool
Make it clear that runtime functions are ONLY for programmatically generated
content (by code), not for content the LLM authors directly.

Changes:
- Add WHEN TO USE and DO NOT USE sections to runtime provider description
- Emphasize that createOrUpdateArtifact is for code-generated content
- Point users to artifacts tool for LLM-authored content like summaries
2025-10-10 02:10:36 +02:00
Mario Zechner
2e56f77599 Replace hasArtifact with listArtifacts
LLMs don't need to check existence - they can just list all artifacts.
Simpler API that returns all filenames at once.

Changes:
- Replace hasArtifact(filename) with listArtifacts() returning string[]
- Add 'list' action handler that returns all artifact keys
- Update examples in prompt to use listArtifacts()
2025-10-10 01:49:03 +02:00
Mario Zechner
7a859cbe52 Merge createArtifact and updateArtifact into createOrUpdateArtifact
LLMs get confused about when to use create vs update. The single function
automatically detects if the artifact exists and chooses the right operation.

Changes:
- Replace createArtifact/updateArtifact with createOrUpdateArtifact in runtime
- Update handler to check existence and use appropriate command (create/rewrite)
- Simplify prompt documentation and examples
2025-10-10 01:43:36 +02:00
Mario Zechner
961112ff83 Fix abort detection to use message stopReason instead of global isStreaming
When abort happens during tool call streaming, the tool result should show as aborted.
Previously used global isStreaming state which would flip when new messages streamed in,
causing spinner to reappear incorrectly.

Changes:
- Use message.stopReason === "aborted" to detect aborted tool calls
- Create synthetic error result for aborted tool calls in ToolMessage component
- Fix Ollama provider key test to return true (can't know which model to test)
- Add newline before HTML execution logs in artifacts update
2025-10-10 01:40:59 +02:00
Mario Zechner
6bc098e57b HTML artifacts call window.complete() when page loads
- Inject <script>if (window.complete) window.complete();</script> before </html>
- HTML artifacts are long-running and don't time out
- Console logs are sent immediately, completion signals when page is ready
- Removes need for artificial timeout in HTML artifacts
2025-10-09 23:49:22 +02:00
Mario Zechner
695bcf9b6f Simplify ArtifactsRuntimeProvider constructor
- Take artifactsPanel and agent directly instead of 5 separate function parameters
- Define minimal ArtifactsPanelLike and AgentLike interfaces to avoid circular deps
- Update all call sites (ChatPanel, browser-javascript) to use simplified constructor
- Much cleaner and easier to use
2025-10-09 23:37:14 +02:00
Mario Zechner
c0ad46fa01 Fix javascript-repl to throw errors on execution failure
- Throw error instead of returning output when result.success is false
- Ensures tool call is marked as failed when code execution fails or is aborted
- Matches browser-javascript error handling pattern
2025-10-09 23:30:40 +02:00
Mario Zechner
4ac774cbbb Fix console logging and message routing
Console Logging Improvements:
- Changed ConsoleRuntimeProvider to send logs immediately instead of batching
- Track pending send promises and await them in onCompleted callback
- Ensures REPL gets all logs before execution-complete
- Enables real-time console logging for HTML artifacts

Message Routing Fixes:
- Remove "handled" concept from message routing - broadcast all messages to all providers/consumers
- Change handleMessage return type from Promise<boolean> to Promise<void>
- Add debug logging to RuntimeMessageRouter to trace message flow
- Fix duplicate error logging (window error handler now only tracks errors, doesn't log them)

Output Formatting Consistency:
- Remove [LOG], [ERROR] prefixes from console output in both tools
- Show console logs before error messages
- Use "=> value" format for return values in both javascript-repl and browser-javascript
- Remove duplicate "Error:" prefix and extra formatting

Bug Fixes:
- Fix race condition where execution-complete arrived before console logs
- Fix ConsoleRuntimeProvider blocking execution-complete from reaching consumers
- Remove duplicate console log collection from SandboxedIframe
- Fix return value capture by wrapping user code in async function
2025-10-09 23:20:14 +02:00
Mario Zechner
38aaaee968 Remove debug console.log statements causing duplicate error messages
- console.log('Reporting execution error:', finalError) was logging the error
- This caused duplicate error message in output
- Removed all debug console.log statements from window.complete()
- Error is only shown via execution-error message now
2025-10-09 20:53:32 +02:00
Mario Zechner
8747e01c31 Display return values and fix duplicate error messages in REPL
- javascript-repl now displays return values with => prefix
- Objects are JSON.stringify'd with formatting
- Removed console.error from wrapper to prevent duplicate error messages
- Error is already captured and sent via execution-error message
- Fixes missing return value display and duplicate error output
2025-10-09 20:51:25 +02:00
Mario Zechner
5fc3857666 Pass return value through execution-complete message instead of logging
- Return value now passed to window.complete(error, returnValue)
- execution-complete message includes returnValue field
- SandboxResult interface updated to include returnValue
- executionConsumer passes returnValue in resolved promise
- Return values properly captured and available to callers
2025-10-09 20:47:26 +02:00
Mario Zechner
9a3f01fcb8 Fix REPL timeout with return statements by wrapping user code in function
- User code with return statement was exiting the async IIFE early
- Completion callbacks and window.complete() were never reached
- Now wrap user code in userCodeFunc to capture return value
- Return statement returns from userCodeFunc, not outer IIFE
- Completion callbacks and window.complete() always execute
- Return value is logged to console output
- Fixes 30-second timeout when using return statements in REPL
2025-10-09 20:43:39 +02:00
Mario Zechner
fdd4e24246 Fix message routing by broadcasting to all providers and consumers
- Router was stopping propagation after first handler returned true
- This prevented consumers from seeing messages that providers handled
- executionConsumer never received execution-complete because ConsoleRuntimeProvider handled it first
- Now all providers and consumers receive all messages
- Fixes javascript_repl never completing
2025-10-09 20:41:22 +02:00
Mario Zechner
3f29ce9cb6 Fix ConsoleRuntimeProvider blocking execution-complete from reaching executionConsumer
- ConsoleRuntimeProvider was handling execution-complete and returning true
- This stopped message propagation before executionConsumer could handle it
- ExecutionConsumer never got execution-complete, so promise never resolved
- Now ConsoleRuntimeProvider responds but returns false to allow propagation
- Fixes javascript_repl never completing (30s timeout)
2025-10-09 20:39:04 +02:00
Mario Zechner
5dcb5ecc89 Fix race condition by making window.complete() async and awaiting it
- window.complete() was fire-and-forget, causing execution-complete to arrive before console messages
- This caused sandbox to unregister before console message responses arrived
- Made complete() async and await sendRuntimeMessage()
- SandboxedIframe wrapper now awaits window.complete()
- Ensures all messages are processed before cleanup/unregister
- Fixes 30-second timeout on javascript_repl
2025-10-09 20:31:48 +02:00
Mario Zechner
bb138307b1 Fix ConsoleRuntimeProvider hanging by calling respond()
- ConsoleRuntimeProvider.handleMessage() was not calling respond()
- This caused sendRuntimeMessage() to hang waiting for response (30s timeout)
- Now properly acknowledges console, execution-complete, and execution-error messages
- Fixes javascript_repl hanging on simple console.log() calls
2025-10-09 20:27:02 +02:00
Mario Zechner
33418d9dea Unify completion callback pattern across browser-javascript and javascript-repl
- Remove fallback timeout from ConsoleRuntimeProvider (was causing 2s delays)
- Add completion callback support to SandboxedIframe REPL wrapper
- Call completion callbacks before window.complete() in both success/error paths
- Both browser-javascript and javascript-repl now use identical completion pattern
- Ensures console logs are batched and sent before execution completes
2025-10-09 20:24:20 +02:00
Mario Zechner
6983ad4eaa Simplify ConsoleRuntimeProvider to batch-send logs at completion only 2025-10-09 20:16:32 +02:00
Mario Zechner
af0297cd16 Add onCompleted callback system for guaranteed console log delivery
- Add onCompleted() callback registration in RuntimeMessageBridge
- Modify wrapperFunction to call completion callbacks before returning
- Update ConsoleRuntimeProvider to immediate send + completion batch pattern
- Extract DOWNLOADABLE_FILE_RUNTIME_DESCRIPTION from ATTACHMENTS_RUNTIME_DESCRIPTION
- Logs sent immediately (fire-and-forget), unsent logs batched at completion
- Ensures all console logs arrive before tool execution completes
2025-10-09 20:10:20 +02:00
Mario Zechner
b288cd9448 Add debug logging to RuntimeMessageRouter and increase API key validation tokens
- Add console.log for user script messages in RuntimeMessageRouter
- Increase ProviderKeyInput maxTokens from 10 to 200 for better validation
2025-10-09 18:57:43 +02:00
Mario Zechner
c2793d8017 Add runtime bridge architecture and fix HTML escaping
Major refactoring to unify runtime providers across sandbox and user script contexts:

1. Runtime Bridge & Router
   - Add RuntimeMessageBridge for unified messaging abstraction
   - Rename SandboxMessageRouter → RuntimeMessageRouter
   - Router now handles both iframe and user script messages
   - Guard for non-extension environments

2. Provider Refactoring
   - ArtifactsRuntimeProvider: Add offline mode with snapshot fallback
   - AttachmentsRuntimeProvider: Remove returnDownloadableFile (moved to dedicated provider)
   - ConsoleRuntimeProvider: Add message collection, remove lifecycle logic
   - FileDownloadRuntimeProvider: New provider for file downloads

3. HTML Escaping Fix
   - Escape </script> in JSON.stringify output to prevent premature tag closure
   - Applies when injecting provider data into <script> tags
   - JavaScript engine automatically unescapes, no runtime changes needed

4. Function Renaming
   - listFiles → listAttachments
   - readTextFile → readTextAttachment
   - readBinaryFile → readBinaryAttachment
   - returnFile → returnDownloadableFile

5. Updated Exports
   - Export new RuntimeMessageBridge and RuntimeMessageRouter
   - Export FileDownloadRuntimeProvider
   - Update all cross-references

This sets the foundation for reusing providers in browser-javascript tool.
2025-10-09 17:32:45 +02:00
Mario Zechner
d7d79bd533 Add image artifact support with proper binary downloads
- Add ImageArtifact component for displaying images (.png, .jpg, .jpeg, .gif, .webp, .bmp, .ico)
- Images stored as base64, displayed via data URLs
- Download button properly decodes base64 to Uint8Array for valid binary downloads
- Fix Lit ChildPart error: use CSS rotation instead of innerHTML manipulation in collapsible headers

Changes:
- web-ui/src/tools/artifacts/ImageArtifact.ts: New image artifact component
- web-ui/src/tools/artifacts/artifacts.ts: Add "image" file type support
- web-ui/src/tools/renderer-registry.ts: Fix collapsible chevron to use CSS rotation
- web-ui/src/index.ts: Export ImageArtifact
2025-10-09 04:34:42 +02:00
Mario Zechner
9687551324 Don't access innerHTML like that or lit kills itself. 2025-10-09 04:26:03 +02:00
Mario Zechner
4d2ca6ab2a Add artifact message persistence for session reconstruction
- Add ArtifactMessage type as core part of AppMessage union (not CustomMessages)
- ArtifactsRuntimeProvider appends artifact messages on create/update/delete
- MessageList filters out artifact messages (UI display only)
- artifacts.ts reconstructFromMessages handles artifact messages
- Export ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION from main index
- Fix artifact creation bug: pass filename as title instead of mimeType

Changes:
- web-ui/src/components/Messages.ts: Add ArtifactMessage to BaseMessage union
- web-ui/src/components/MessageList.ts: Skip artifact messages in render
- web-ui/src/components/sandbox/ArtifactsRuntimeProvider.ts: Append messages, fix title parameter
- web-ui/src/ChatPanel.ts: Pass agent.appendMessage callback
- web-ui/src/tools/artifacts/artifacts.ts: Handle artifact messages in reconstructFromMessages
- web-ui/src/index.ts: Export ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION
- web-ui/example/src/custom-messages.ts: Update message transformer to filter artifacts
2025-10-09 04:07:59 +02:00
Mario Zechner
0eaa879d46 Fix various sandbox issues. 2025-10-08 22:51:32 +02:00
Mario Zechner
91c1dc6475 Add ollama dependency and dialog backdrop blur
- Add ollama package to web-ui dependencies for ModelSelector
- Add backdrop blur to SettingsDialog (bg-black/50 backdrop-blur-sm)
- Update mini-lit to 0.1.9 for backdropClassName prop support
- Fix TypeScript errors in ModelSelector (ollama import, parameter types)
- Add backward compatibility methods to SessionsStore (saveSession, loadSession, getLatestSessionId)
2025-10-08 17:49:56 +02:00
Mario Zechner
db34ef01bf Fix IndexedDB in-line vs out-of-line key handling
- Check if store has keyPath before calling put()
- If keyPath exists (in-line keys), only pass value: store.put(value)
- If no keyPath (out-of-line keys), pass both: store.put(value, key)
- Apply fix to both set() and transaction.set()
- Fixes DataError when saving sessions with keyPath: 'id'
2025-10-08 16:53:54 +02:00
Mario Zechner
0de89a750e Refactor to Store-based architecture
- Create base Store class with private backend and protected getBackend()
- Add SettingsStore, ProviderKeysStore, SessionsStore
- Each store defines its own schema via getConfig()
- AppStorage now takes stores + backend in constructor
- Remove SessionsRepository (logic moved to SessionsStore)
- Update all consumers to use store API (storage.settings.get/set, storage.providerKeys.get/set)
- Update example app to follow new pattern: create stores, gather configs, create backend, wire
- Benefits: stores own their schema, no circular deps, cleaner separation
2025-10-08 16:41:02 +02:00
Mario Zechner
bbbc232c7c Implement unified storage architecture
- Replace fragmented storage backends with single IndexedDBStorageBackend
- Create multi-store StorageBackend interface (storeName parameter)
- Remove old backends: IndexedDBBackend, LocalStorageBackend, SessionIndexedDBBackend, WebExtensionStorageBackend
- Remove old repositories: ProviderKeysRepository, SessionRepository, SettingsRepository
- Simplify AppStorage to directly expose storage methods (getSetting/setSetting, getProviderKey/setProviderKey)
- Create SessionsRepository for session-specific operations
- Update all consumers to use new simplified API
- Update example app to use new storage architecture
- Benefits: 10GB+ quota (vs 10MB chrome.storage), single database, consistent API
2025-10-08 16:14:29 +02:00