Commit graph

25 commits

Author SHA1 Message Date
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
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
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
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
b3cce7b400 Fix spinner showing on aborted tool calls in javascript-repl and artifacts renderers
When isStreaming is false and there's no result (aborted state), show 'complete' state instead of 'inprogress' to avoid showing the spinner.
2025-10-08 14:43:23 +02:00
Mario Zechner
46b1abff1d Add cursor-pointer to collapsible header button 2025-10-08 14:17:48 +02:00
Mario Zechner
9a57aa7e1a Prevent default and stop propagation when clicking artifact pill
This prevents the collapsible header from toggling when the pill is clicked.
2025-10-08 14:17:04 +02:00
Mario Zechner
3adc8357b1 Make openArtifact public and remove type cast in ArtifactPill 2025-10-08 14:12:52 +02:00
Mario Zechner
58b9c36268 Make renderHeader and renderCollapsibleHeader accept string | TemplateResult
- Update renderHeader and renderCollapsibleHeader in renderer-registry.ts to accept `text: string | TemplateResult`
- Remove duplicated renderCollapsibleHeaderWithPill helper in artifacts-tool-renderer.ts
- Update all artifact renderer calls to use renderHeaderWithPill() inline
- Remove all separate pill rendering below headers

This allows artifact pills to be rendered inline with header text without code duplication.
2025-10-08 14:12:02 +02:00
Mario Zechner
547be7ce37 Add clickable artifact pills to tool renderer
- Create ArtifactPill component (similar to SkillPill)
- Renders filename as clickable pill with FileCode2 icon
- Clicking pill opens artifacts panel and selects that artifact
- Update ArtifactsToolRenderer to accept artifactsPanel reference
- Pass artifactsPanel from ChatPanel to renderer on initialization
- Display artifact pill below header for all commands
- Pill only clickable when artifactsPanel reference is available
2025-10-08 14:01:25 +02:00
Mario Zechner
b3efac4591 Update artifacts-tool-renderer to use collapsible headers
- All actions except DELETE now use collapsible headers
- CREATE/UPDATE/REWRITE/GET/LOGS: code/output collapsed by default
- DELETE: keeps simple non-collapsible header
- Fix isStreaming parameter usage for proper spinner state
- Add smooth 300ms animation on expand/collapse
- Full header is clickable to toggle collapse state
2025-10-08 13:46:52 +02:00
Mario Zechner
1405c47b50 Make entire collapsible header clickable
- Changed outer div to button element
- Added w-full and text-left classes
- Now click anywhere on header (icon, text, chevron) to expand/collapse
2025-10-08 13:44:59 +02:00
Mario Zechner
f646a29d1a Add collapsible tool renderers with animated expand/collapse
- Add renderCollapsibleHeader() to renderer-registry
  - Places chevron on right, spinner on left
  - Toggles between ChevronRight (collapsed) and ChevronDown (expanded)
  - Uses max-h-0/max-h-[2000px] with transition-all for smooth animation
  - Dynamically adds/removes mt-3 to avoid margin when collapsed

- Update javascript-repl renderer to use collapsible sections
  - Code and console output hidden by default
  - Only file attachments remain visible
  - 300ms smooth animation on expand/collapse

- Export renderCollapsibleHeader from web-ui index
2025-10-08 13:38:45 +02:00
Mario Zechner
8ec9805112 Refactor artifacts renderer and add Console component
- Extract ArtifactsToolRenderer from ArtifactsPanel into standalone renderer
- Fix ChatPanel to register ArtifactsToolRenderer instead of panel
- Implement command-specific rendering logic (create/update/rewrite/get/logs/delete)
- Create reusable Console component with copy button and autoscroll toggle
- Replace custom console implementation with ExpandableSection and Console
- Fix Lit reactivity for HtmlArtifact logs using spread operator
- Add Lucide icons (FileCode2, ChevronsDown, Lock) for UI consistency
- Follow skill.ts patterns with renderHeader and state handling
- Add i18n strings for all artifact actions and console features
2025-10-08 01:54:50 +02:00
Mario Zechner
aaea0f4600 Integrate JailJS for CSP-restricted execution in browser extension
Major changes:
- Migrate browser-extension to use web-ui package (85% code reduction)
- Add JailJS content script with ES6+ transform support
- Expose DOM constructors (Event, KeyboardEvent, etc.) to JailJS
- Support top-level await by wrapping code in async IIFE
- Add returnFile() support in JailJS execution
- Refactor KeyStore into pluggable storage-adapter pattern
- Make ChatPanel configurable with sandboxUrlProvider and additionalTools
- Update jailjs to 0.1.1

Files deleted (33 duplicate files):
- All browser-extension components, dialogs, state, tools, utils
- Now using web-ui versions via @mariozechner/pi-web-ui

Files added:
- packages/browser-extension/src/content.ts (JailJS content script)
- packages/web-ui/src/state/storage-adapter.ts
- packages/web-ui/src/state/key-store.ts

Browser extension now has only 5 source files (down from 38).
2025-10-05 16:58:31 +02:00
Mario Zechner
f2eecb78d2 web-ui package 2025-10-05 13:30:08 +02:00
Mario Zechner
7159c9734e Update web-ui example to use javascript-repl instead of calculate/getCurrentTime tools 2025-10-04 21:52:30 +02:00
Mario Zechner
9d6267a915 Fix javascript-repl renderer to use console-block component 2025-10-04 21:44:23 +02:00
Mario Zechner
8212623af0 Add JavaScript REPL tool to web-ui package
- Created javascript-repl.ts tool with SandboxedIframe for code execution
- Integrated into ChatPanel replacing calculate and getCurrentTime tools
- REPL provides full browser API access with external library support
- Auto-registers renderer for tool output display
- Uses srcdoc instead of sandbox.html (no CSP restrictions in web apps)
2025-10-04 19:12:38 +02:00