orquesta-embed 0.1.0

package/README.md

@@ -0,0 +1,97 @@
+# Orquesta Embed SDK
+
+Embed Orquesta AI-powered development UI into any production website.
+
+## Features
+
+- 🎯 **Element Selection** - Right-click any element to prompt about it
+- 📋 **Console Capture** - Auto-include console logs in prompts
+- 🌐 **Network Capture** - Include network errors for debugging
+- 📊 **Timeline** - View prompt history and status
+- 🚀 **Deployments** - See current deployment status
+- 🎨 **Customizable** - Position, theme, features
+
+## Installation
+
+### React
+
+```bash
+npm install orquesta-embed
+```
+
+```tsx
+import { OrquestaEmbed } from 'orquesta-embed'
+import 'orquesta-embed/styles.css'
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <OrquestaEmbed
+        token="oek_xxxxx"
+        position="bottom-right"
+        captureConsole={true}
+        captureNetwork={true}
+        onReady={() => console.log('Orquesta ready!')}
+      />
+    </>
+  )
+}
+```
+
+### Vanilla JavaScript
+
+```html
+<script src="https://cdn.orquesta.live/embed/v1/orquesta.min.js"></script>
+<script>
+  const widget = Orquesta.init({
+    token: 'oek_xxxxx',
+    position: 'bottom-right',
+    captureConsole: true,
+    captureNetwork: true,
+    onReady: () => console.log('Orquesta ready!')
+  });
+
+  // Programmatic API
+  widget.open();
+  widget.close();
+  widget.toggle();
+  widget.startElementSelection();
+  widget.submitPrompt('Fix this bug', { includeConsole: true });
+  widget.destroy();
+</script>
+```
+
+## Configuration
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `token` | `string` | *required* | Your embed token (oek_xxx) |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Panel position |
+| `defaultOpen` | `boolean` | `false` | Start with panel open |
+| `theme` | `'dark' \| 'light' \| 'auto'` | `'dark'` | Color theme |
+| `features` | `Feature[]` | All features | Enabled features |
+| `captureConsole` | `boolean` | `true` | Capture console.log/error |
+| `captureNetwork` | `boolean` | `true` | Capture fetch/XHR errors |
+| `hotkey` | `string` | `'ctrl+shift+o'` | Keyboard shortcut to toggle |
+| `onReady` | `() => void` | - | Called when connected |
+| `onPromptSubmit` | `(promptId: string) => void` | - | Called when prompt submitted |
+| `onError` | `(error: Error) => void` | - | Called on errors |
+
+## Getting Your Token
+
+1. Go to your project settings on [orquesta.live](https://orquesta.live)
+2. Navigate to **Settings > Embed**
+3. Click **Generate Token**
+4. (Optional) Add domain restrictions
+
+## Security
+
+- Embed tokens can be restricted to specific domains
+- Tokens only allow submitting prompts and viewing data
+- No access to credentials or sensitive settings
+- Rate limited to prevent abuse
+
+## License
+
+MIT

package/dist/components/Deployments.d.ts

@@ -0,0 +1,7 @@
+import type { Deployment } from '../core/config';
+interface DeploymentsProps {
+    deployments: Deployment[];
+    currentDeployment: Deployment | null;
+}
+export declare function Deployments({ deployments, currentDeployment }: DeploymentsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ElementInspector.d.ts

@@ -0,0 +1,6 @@
+interface ElementInspectorProps {
+    isActive: boolean;
+    onCancel: () => void;
+}
+export declare function ElementInspector({ isActive, onCancel }: ElementInspectorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/EmbedPanel.d.ts

@@ -0,0 +1,16 @@
+import type { EmbedState } from '../core/state';
+import type { Position } from '../core/config';
+interface EmbedPanelProps {
+    state: EmbedState;
+    position: Position;
+    onClose: () => void;
+    onMinimize: () => void;
+    onSubmitPrompt: (content: string) => void;
+    onSelectElement: () => void;
+    onClearElement: () => void;
+    onToggleConsole: () => void;
+    onToggleNetwork: () => void;
+    onTabChange: (tab: EmbedState['activeTab']) => void;
+}
+export declare function EmbedPanel({ state, position, onClose, onMinimize, onSubmitPrompt, onSelectElement, onClearElement, onToggleConsole, onToggleNetwork, onTabChange }: EmbedPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LogStream.d.ts

@@ -0,0 +1,7 @@
+import type { OutputLine } from '../core/state';
+interface LogStreamProps {
+    lines: OutputLine[];
+    isRunning: boolean;
+}
+export declare function LogStream({ lines, isRunning }: LogStreamProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/OrquestaEmbed.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OrquestaEmbedConfig } from '../core/config';
+interface OrquestaEmbedProps extends OrquestaEmbedConfig {
+    children?: React.ReactNode;
+}
+export declare function OrquestaEmbed(props: OrquestaEmbedProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PromptInput.d.ts

@@ -0,0 +1,15 @@
+import type { ElementContext } from '../core/config';
+interface PromptInputProps {
+    onSubmit: (content: string) => void;
+    isSubmitting: boolean;
+    selectedElement: ElementContext | null;
+    includeConsole: boolean;
+    includeNetwork: boolean;
+    onToggleConsole: () => void;
+    onToggleNetwork: () => void;
+    onSelectElement: () => void;
+    onClearElement: () => void;
+    agentOnline: boolean;
+}
+export declare function PromptInput({ onSubmit, isSubmitting, selectedElement, includeConsole, includeNetwork, onToggleConsole, onToggleNetwork, onSelectElement, onClearElement, agentOnline }: PromptInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Timeline.d.ts

@@ -0,0 +1,8 @@
+import type { Prompt } from '../core/config';
+interface TimelineProps {
+    prompts: Prompt[];
+    currentPromptId?: string;
+    onSelectPrompt?: (prompt: Prompt) => void;
+}
+export declare function Timeline({ prompts, currentPromptId, onSelectPrompt }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Badge.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface BadgeProps {
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md';
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Badge({ variant, size, children, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+interface StatusDotProps {
+    status: 'online' | 'offline' | 'pending' | 'running' | 'completed' | 'failed';
+    className?: string;
+}
+export declare function StatusDot({ status, className }: StatusDotProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    children: React.ReactNode;
+}
+export declare function Button({ variant, size, loading, disabled, className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+export declare function Input({ label, error, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/ui/Tabs.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Tabs({ defaultValue, value, onChange, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+interface TabsListProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function TabsList({ children, className }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function TabsTrigger({ value, children, className }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function TabsContent({ value, children, className }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ui/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export { Input, Textarea } from './Input';
+export { Badge, StatusDot } from './Badge';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';

package/dist/core/client.d.ts

@@ -0,0 +1,40 @@
+import type { OrquestaEmbedConfig, ElementContext } from './config';
+import { StateManager } from './state';
+import { ConsoleCapture } from './console-capture';
+import { NetworkCapture } from './network-capture';
+import { ElementSelector } from './element-selector';
+export declare class OrquestaEmbedClient {
+    private config;
+    private supabase;
+    private channel;
+    private projectId;
+    private state;
+    private consoleCapture;
+    private networkCapture;
+    private elementSelector;
+    private hotkeyHandler;
+    constructor(config: OrquestaEmbedConfig);
+    connect(): Promise<void>;
+    disconnect(): void;
+    private setupHotkey;
+    private removeHotkey;
+    private handleOutput;
+    private handleComplete;
+    private handleError;
+    submitPrompt(content: string, options?: {
+        includeConsole?: boolean;
+        includeNetwork?: boolean;
+        elementContext?: ElementContext;
+    }): Promise<string>;
+    private loadTimeline;
+    private loadDeployments;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    startElementSelection(): void;
+    getState(): ReturnType<StateManager['getState']>;
+    subscribe(listener: (state: ReturnType<StateManager['getState']>) => void): () => void;
+    getConsoleCapture(): ConsoleCapture;
+    getNetworkCapture(): NetworkCapture;
+    getElementSelector(): ElementSelector;
+}

package/dist/core/config.d.ts

@@ -0,0 +1,87 @@
+export type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export type Theme = 'dark' | 'light' | 'auto';
+export type Feature = 'prompts' | 'timeline' | 'deployments' | 'elements' | 'captures';
+export interface OrquestaEmbedConfig {
+    /** Embed token (oek_xxx) */
+    token: string;
+    /** Panel position on screen */
+    position?: Position;
+    /** Start with panel open */
+    defaultOpen?: boolean;
+    /** Color theme */
+    theme?: Theme;
+    /** Enabled features */
+    features?: Feature[];
+    /** Capture console.log/error */
+    captureConsole?: boolean;
+    /** Capture fetch/XHR errors */
+    captureNetwork?: boolean;
+    /** Keyboard shortcut to toggle panel */
+    hotkey?: string;
+    /** Callback when SDK is ready */
+    onReady?: () => void;
+    /** Callback when prompt is submitted */
+    onPromptSubmit?: (promptId: string) => void;
+    /** Callback on errors */
+    onError?: (error: Error) => void;
+    /** API base URL (defaults to https://orquesta.live) */
+    apiUrl?: string;
+}
+export declare const DEFAULT_CONFIG: Partial<OrquestaEmbedConfig>;
+export interface ElementContext {
+    selector: string;
+    tag: string;
+    id?: string;
+    className?: string;
+    textContent?: string;
+    boundingRect?: DOMRect;
+    attributes?: Record<string, string>;
+}
+export interface ConsoleEntry {
+    timestamp: number;
+    level: 'log' | 'info' | 'warn' | 'error';
+    message: string;
+    args?: unknown[];
+    stack?: string;
+}
+export interface NetworkEntry {
+    timestamp: number;
+    method: string;
+    url: string;
+    status?: number;
+    duration?: number;
+    error?: string;
+    requestBody?: unknown;
+    responseBody?: unknown;
+}
+export interface Prompt {
+    id: string;
+    content: string;
+    status: 'pending' | 'running' | 'completed' | 'failed';
+    created_at: string;
+    completed_at?: string;
+    user_id: string;
+    source: string;
+    element_context?: ElementContext;
+}
+export interface Deployment {
+    id: string;
+    status: string;
+    commit_sha?: string;
+    commit_message?: string;
+    branch?: string;
+    created_at: string;
+    deployed_at?: string;
+    url?: string;
+}
+export interface ValidationResponse {
+    valid: boolean;
+    projectId: string;
+    supabaseUrl: string;
+    supabaseAnonKey: string;
+    channelName: string;
+    project?: {
+        name: string;
+        agent_online: boolean;
+    };
+}

package/dist/core/console-capture.d.ts

@@ -0,0 +1,19 @@
+import type { ConsoleEntry } from './config';
+export declare class ConsoleCapture {
+    private buffer;
+    private maxSize;
+    private originalConsole;
+    private errorHandler;
+    private rejectionHandler;
+    private listeners;
+    start(): void;
+    stop(): void;
+    private createEntry;
+    private addEntry;
+    getAll(): ConsoleEntry[];
+    getRecent(count?: number): ConsoleEntry[];
+    getErrors(): ConsoleEntry[];
+    clear(): void;
+    subscribe(listener: (entry: ConsoleEntry) => void): () => void;
+    formatForPrompt(entries?: ConsoleEntry[]): string;
+}

package/dist/core/element-selector.d.ts

@@ -0,0 +1,23 @@
+import type { ElementContext } from './config';
+export declare class ElementSelector {
+    private overlay;
+    private highlight;
+    private contextMenu;
+    private selectedElement;
+    private isActive;
+    private onSelect;
+    private onCancel;
+    activate(onSelect: (context: ElementContext) => void, onCancel?: () => void): void;
+    deactivate(): void;
+    private createOverlay;
+    private removeOverlay;
+    private addListeners;
+    private removeListeners;
+    private handleMouseMove;
+    private handleClick;
+    private handleContextMenu;
+    private handleKeyDown;
+    private showContextMenu;
+    getElementContext(el: HTMLElement): ElementContext;
+    private generateSelector;
+}

package/dist/core/network-capture.d.ts

@@ -0,0 +1,20 @@
+import type { NetworkEntry } from './config';
+export declare class NetworkCapture {
+    private buffer;
+    private maxSize;
+    private originalFetch;
+    private originalXHROpen;
+    private originalXHRSend;
+    private listeners;
+    start(): void;
+    stop(): void;
+    private patchFetch;
+    private patchXHR;
+    private addEntry;
+    getAll(): NetworkEntry[];
+    getRecent(count?: number): NetworkEntry[];
+    getErrors(): NetworkEntry[];
+    clear(): void;
+    subscribe(listener: (entry: NetworkEntry) => void): () => void;
+    formatForPrompt(entries?: NetworkEntry[]): string;
+}

package/dist/core/state.d.ts

@@ -0,0 +1,59 @@
+import type { Prompt, Deployment, ElementContext, ConsoleEntry, NetworkEntry } from './config';
+export interface EmbedState {
+    isConnected: boolean;
+    isConnecting: boolean;
+    connectionError: string | null;
+    projectId: string | null;
+    projectName: string | null;
+    agentOnline: boolean;
+    isOpen: boolean;
+    activeTab: 'prompts' | 'timeline' | 'deployments';
+    isSelectingElement: boolean;
+    selectedElement: ElementContext | null;
+    currentPrompt: Prompt | null;
+    promptHistory: Prompt[];
+    isSubmitting: boolean;
+    outputLines: OutputLine[];
+    deployments: Deployment[];
+    currentDeployment: Deployment | null;
+    consoleLogs: ConsoleEntry[];
+    networkLogs: NetworkEntry[];
+    includeConsole: boolean;
+    includeNetwork: boolean;
+}
+export interface OutputLine {
+    id: string;
+    timestamp: number;
+    type: 'stdout' | 'stderr' | 'tool' | 'thinking' | 'system';
+    content: string;
+    details?: Record<string, unknown>;
+}
+export type StateListener = (state: EmbedState) => void;
+export declare class StateManager {
+    private state;
+    private listeners;
+    constructor();
+    private getInitialState;
+    getState(): EmbedState;
+    setState(partial: Partial<EmbedState>): void;
+    subscribe(listener: StateListener): () => void;
+    private notify;
+    setConnected(projectId: string, projectName: string, agentOnline: boolean): void;
+    setConnectionError(error: string): void;
+    setOpen(isOpen: boolean): void;
+    toggle(): void;
+    setActiveTab(tab: EmbedState['activeTab']): void;
+    setCurrentPrompt(prompt: Prompt | null): void;
+    updatePrompt(promptId: string, updates: Partial<Prompt>): void;
+    addOutputLine(line: Omit<OutputLine, 'id'>): void;
+    clearOutput(): void;
+    setSelectedElement(element: ElementContext | null): void;
+    startElementSelection(): void;
+    cancelElementSelection(): void;
+    setDeployments(deployments: Deployment[]): void;
+    addConsoleLogs(logs: ConsoleEntry[]): void;
+    addNetworkLogs(logs: NetworkEntry[]): void;
+    toggleIncludeConsole(): void;
+    toggleIncludeNetwork(): void;
+    reset(): void;
+}

package/dist/core/storage.d.ts

@@ -0,0 +1,25 @@
+export interface StoredState {
+    isOpen: boolean;
+    position: {
+        x: number;
+        y: number;
+    } | null;
+    size: {
+        width: number;
+        height: number;
+    } | null;
+    activeTab: string;
+    theme: 'dark' | 'light' | 'auto';
+}
+export declare class Storage {
+    private projectId;
+    setProjectId(projectId: string): void;
+    private getKey;
+    get<T>(key: keyof StoredState): T | null;
+    set<T>(key: keyof StoredState, value: T): void;
+    remove(key: keyof StoredState): void;
+    getState(): StoredState;
+    setState(state: Partial<StoredState>): void;
+    clear(): void;
+}
+export declare const storage: Storage;

package/dist/embed.css

@@ -0,0 +1 @@
+[class*=" orquesta-"],[class^=orquesta-]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.orquesta-embed-panel{--orq-bg:#18181b;--orq-bg-secondary:#27272a;--orq-border:#3f3f46;--orq-text:#fafafa;--orq-text-muted:#a1a1aa;--orq-primary:#3b82f6;--orq-success:#22c55e;--orq-warning:#eab308;--orq-error:#ef4444}.orquesta-embed-panel ::-webkit-scrollbar{height:6px;width:6px}.orquesta-embed-panel ::-webkit-scrollbar-track{background:transparent}.orquesta-embed-panel ::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:3px}.orquesta-embed-panel ::-webkit-scrollbar-thumb:hover{background:#52525b}@keyframes orquesta-spin{to{transform:rotate(1turn)}}@keyframes orquesta-pulse{0%,to{opacity:1}50%{opacity:.5}}.orquesta-embed-panel .animate-spin{animation:orquesta-spin 1s linear infinite}.orquesta-embed-panel .animate-pulse{animation:orquesta-pulse 2s ease-in-out infinite}.orquesta-embed-panel .line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.orquesta-embed-panel .line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.orquesta-embed-panel button:focus-visible,.orquesta-embed-panel input:focus-visible,.orquesta-embed-panel textarea:focus-visible{outline:2px solid var(--orq-primary);outline-offset:2px}#orquesta-element-highlight{animation:orquesta-highlight-pulse 1.5s ease-in-out infinite}@keyframes orquesta-highlight-pulse{0%,to{box-shadow:0 0 0 0 rgba(59,130,246,.4)}50%{box-shadow:0 0 0 4px rgba(59,130,246,.2)}}.orquesta-tooltip{background:#18181b;border:1px solid #3f3f46;border-radius:4px;color:#fafafa;font-size:12px;padding:4px 8px;pointer-events:none;position:absolute;white-space:nowrap;z-index:2147483647}.orquesta-embed-panel *{transition-duration:.15s;transition-property:color,background-color,border-color,opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.orquesta-embed-panel{animation:orquesta-panel-enter .2s ease-out}@keyframes orquesta-panel-enter{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.orquesta-embed-trigger{animation:orquesta-trigger-enter .3s ease-out}@keyframes orquesta-trigger-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.orquesta-log-stream{background:#0a0a0a;border:1px solid #27272a;border-radius:6px;padding:8px}.orquesta-timeline button:hover{transform:translateX(2px)}@media (max-width:480px){.orquesta-embed-panel{bottom:8px!important;left:8px!important;max-height:70vh!important;position:fixed!important;right:8px!important;top:auto!important;width:auto!important}}