ai-parrot 0.17.2__cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl

crew-builder/src/lib/components/ConfigPanel.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import type { AgentNodeData } from '$lib/stores/crewStore';
+
+  // Svelte 5: Use callback props instead of createEventDispatcher
+  interface Props {
+    agent: AgentNodeData;
+    onClose?: () => void;
+    onUpdate?: (data: Partial<AgentNodeData>) => void;
+    onDelete?: () => void;
+  }
+
+  let { agent, onClose, onUpdate, onDelete }: Props = $props();
+
+  let editMode = $state<'form' | 'json'>('form');
+  let jsonError = $state<string | null>(null);
+
+  const models = [
+    'gemini-2.5-pro',
+    'gpt-4',
+    'gpt-3.5-turbo',
+    'claude-3-opus',
+    'claude-3-sonnet',
+    'claude-sonnet-4-5-20250929'
+  ];
+
+  const availableTools = [
+    'GoogleSearchTool',
+    'WebScraperTool',
+    'FileReaderTool',
+    'CalculatorTool',
+    'CodeInterpreterTool'
+  ];
+
+  const buildFormState = (source: AgentNodeData) => ({
+    agent_id: source.agent_id ?? '',
+    name: source.name ?? '',
+    agent_class: source.agent_class ?? 'Agent',
+    config: {
+      model: source.config?.model ?? 'gemini-2.5-pro',
+      temperature: source.config?.temperature ?? 0.7
+    },
+    tools: source.tools ? [...source.tools] : [],
+    system_prompt: source.system_prompt ?? ''
+  });
+
+  let formData = $state(buildFormState(agent));
+  let jsonText = $state(JSON.stringify(agent, null, 2));
+
+  $effect(() => {
+    if (agent && agent.agent_id !== formData.agent_id) {
+      formData = buildFormState(agent);
+      jsonText = JSON.stringify(agent, null, 2);
+      jsonError = null;
+    }
+  });
+
+  function toggleTool(tool: string) {
+    if (formData.tools.includes(tool)) {
+      formData = { ...formData, tools: formData.tools.filter((item) => item !== tool) };
+    } else {
+      formData = { ...formData, tools: [...formData.tools, tool] };
+    }
+  }
+
+  function handleSave() {
+    if (editMode === 'form') {
+      onUpdate?.(formData);
+      onClose?.();
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(jsonText);
+      jsonError = null;
+      onUpdate?.(parsed);
+      onClose?.();
+    } catch (error) {
+      jsonError = error instanceof Error ? error.message : 'Invalid JSON';
+    }
+  }
+
+  function handleFormSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    handleSave();
+  }
+
+  function switchMode(mode: 'form' | 'json') {
+    if (mode === editMode) return;
+    if (mode === 'json') {
+      jsonText = JSON.stringify(formData, null, 2);
+      jsonError = null;
+    } else {
+      try {
+        formData = buildFormState(JSON.parse(jsonText) as AgentNodeData);
+        jsonError = null;
+      } catch (error) {
+        jsonError = error instanceof Error ? error.message : 'Invalid JSON';
+        return;
+      }
+    }
+    editMode = mode;
+  }
+
+  function handleDeleteClick() {
+    if (confirm('Are you sure you want to delete this agent?')) {
+      onDelete?.();
+    }
+  }
+</script>
+
+<div class="fixed inset-0 z-40 flex justify-end">
+  <div
+    class="absolute inset-0 bg-base-content/40"
+    role="button"
+    tabindex="0"
+    onclick={() => onClose?.()}
+    onkeydown={(event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClose?.();
+      }
+    }}
+  ></div>
+  <aside class="relative z-10 flex h-full w-full max-w-md flex-col bg-base-100 shadow-2xl">
+    <header class="flex items-center justify-between border-b border-base-200 px-6 py-4">
+      <h2 class="text-lg font-semibold">Configure Agent</h2>
+      <button class="btn btn-circle btn-ghost btn-sm" onclick={() => onClose?.()} aria-label="Close">
+        ✕
+      </button>
+    </header>
+
+    <div class="flex items-center gap-2 border-b border-base-200 px-6 py-3">
+      <button
+        class={`btn btn-sm flex-1 ${editMode === 'form' ? 'btn-primary' : 'btn-outline'}`}
+        type="button"
+        onclick={() => switchMode('form')}
+      >
+        Form
+      </button>
+      <button
+        class={`btn btn-sm flex-1 ${editMode === 'json' ? 'btn-primary' : 'btn-outline'}`}
+        type="button"
+        onclick={() => switchMode('json')}
+      >
+        JSON
+      </button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto p-6">
+      {#if editMode === 'form'}
+        <form class="space-y-4" onsubmit={handleFormSubmit}>
+          <div class="form-control">
+            <label class="label" for="agent-id">
+              <span class="label-text">Agent ID</span>
+            </label>
+            <input
+              id="agent-id"
+              class="input input-bordered input-sm"
+              type="text"
+              bind:value={formData.agent_id}
+              placeholder="agent_1"
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="agent-name">
+              <span class="label-text">Name</span>
+            </label>
+            <input
+              id="agent-name"
+              class="input input-bordered input-sm"
+              type="text"
+              bind:value={formData.name}
+              placeholder="Agent 1"
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="agent-class">
+              <span class="label-text">Agent Class</span>
+            </label>
+            <input
+              id="agent-class"
+              class="input input-bordered input-sm"
+              type="text"
+              bind:value={formData.agent_class}
+              placeholder="Agent"
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="agent-model">
+              <span class="label-text">Model</span>
+            </label>
+            <select id="agent-model" class="select select-bordered select-sm" bind:value={formData.config.model}>
+              {#each models as model}
+                <option value={model}>{model}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="agent-temperature">
+              <span class="label-text">Temperature: {formData.config.temperature}</span>
+            </label>
+            <input
+              id="agent-temperature"
+              class="range range-primary range-sm"
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              bind:value={formData.config.temperature}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Tools</span>
+            </label>
+            <div class="space-y-2">
+              {#each availableTools as tool}
+                <label class="flex cursor-pointer items-center gap-2">
+                  <input
+                    type="checkbox"
+                    class="checkbox checkbox-sm"
+                    checked={formData.tools.includes(tool)}
+                    onchange={() => toggleTool(tool)}
+                  />
+                  <span class="text-sm">{tool}</span>
+                </label>
+              {/each}
+            </div>
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="agent-prompt">
+              <span class="label-text">System Prompt</span>
+            </label>
+            <textarea
+              id="agent-prompt"
+              class="textarea textarea-bordered h-32"
+              bind:value={formData.system_prompt}
+              placeholder="You are an expert AI agent."
+            ></textarea>
+          </div>
+        </form>
+      {:else}
+        <div class="space-y-4">
+          <textarea
+            class="textarea textarea-bordered h-96 w-full font-mono text-xs"
+            bind:value={jsonText}
+            placeholder="Edit JSON..."
+          ></textarea>
+          {#if jsonError}
+            <div class="alert alert-error">
+              <span>{jsonError}</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    <footer class="flex items-center justify-between border-t border-base-200 p-6">
+      <button class="btn btn-error btn-sm" type="button" onclick={handleDeleteClick}>
+        Delete Agent
+      </button>
+      <div class="flex gap-2">
+        <button class="btn btn-ghost btn-sm" type="button" onclick={() => onClose?.()}>
+          Cancel
+        </button>
+        <button class="btn btn-primary btn-sm" type="button" onclick={handleSave}>
+          Save Changes
+        </button>
+      </div>
+    </footer>
+  </aside>
+</div>

crew-builder/src/lib/components/JsonTreeNode.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export let label: string | null = null;
+  export let value: unknown;
+  export let depth = 0;
+
+  const isArray = Array.isArray(value);
+  const isObject = value !== null && typeof value === 'object' && !isArray;
+  const isExpandable = isArray || isObject;
+
+  $: entries = (() => {
+    if (isArray) {
+      return (value as unknown[]).map((item, index) => ({ key: `[${index}]`, value: item }));
+    }
+    if (isObject) {
+      return Object.entries(value as Record<string, unknown>).map(([key, entry]) => ({
+        key,
+        value: entry
+      }));
+    }
+    return [];
+  })();
+
+  function describeValue(): string {
+    if (isArray) {
+      return `Array(${entries.length})`;
+    }
+    if (isObject) {
+      return `Object(${entries.length})`;
+    }
+    if (value === null) {
+      return 'null';
+    }
+    return typeof value;
+  }
+
+  function formatPrimitive(data: unknown): string {
+    if (typeof data === 'string') {
+      return `"${data}"`;
+    }
+    if (typeof data === 'number' || typeof data === 'boolean') {
+      return String(data);
+    }
+    if (data === null) {
+      return 'null';
+    }
+    if (typeof data === 'undefined') {
+      return 'undefined';
+    }
+    return JSON.stringify(data);
+  }
+
+  const displayLabel = label ?? 'value';
+</script>
+
+<div class={`space-y-1 ${depth === 0 ? '' : 'border-l border-base-300 pl-3'}`}>
+  {#if isExpandable}
+    <details class="group space-y-1" open={depth < 1}>
+      <summary class="cursor-pointer select-none text-sm font-semibold text-base-content">
+        <span>{displayLabel}</span>
+        <span class="ml-2 text-xs font-normal text-base-content/60">{describeValue()}</span>
+      </summary>
+      <div class="ml-3 space-y-1">
+        {#each entries as entry (entry.key)}
+          <svelte:self label={entry.key} value={entry.value} depth={depth + 1} />
+        {/each}
+      </div>
+    </details>
+  {:else}
+    <div class="flex items-start gap-2 text-sm text-base-content">
+      <span class="font-semibold text-base-content/70">{displayLabel}:</span>
+      <code class="rounded bg-base-200 px-1 py-0.5 text-xs text-base-content">
+        {formatPrimitive(value)}
+      </code>
+    </div>
+  {/if}
+</div>

crew-builder/src/lib/components/JsonViewer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import JsonTreeNode from './JsonTreeNode.svelte';
+
+  export let data: unknown;
+  export let title = 'Advanced results';
+</script>
+
+<div class="space-y-3">
+  <div class="collapse collapse-arrow rounded-lg border border-base-300 bg-base-200">
+    <input type="checkbox" />
+    <div class="collapse-title text-sm font-semibold uppercase tracking-wide text-base-content/70">
+      {title}
+    </div>
+    <div class="collapse-content">
+      {#if data !== undefined}
+        <div class="overflow-x-auto">
+          <JsonTreeNode value={data} label="root" />
+        </div>
+      {:else}
+        <p class="text-sm text-base-content/60">No data available.</p>
+      {/if}
+    </div>
+  </div>
+</div>

crew-builder/src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { markdownToHtml } from '$lib/utils/markdown';
+
+  export let label = 'Question';
+  export let id: string | undefined;
+  export let value = '';
+  export let placeholder = 'Write your prompt using Markdown...';
+  export let helperText = '';
+  export let disabled = false;
+
+  const fallbackId = `markdown-editor-${Math.random().toString(36).slice(2, 10)}`;
+  $: textareaId = id && id.trim() ? id : fallbackId;
+  $: previewHtml = markdownToHtml(value ?? '');
+</script>
+
+<div class="space-y-2">
+  {#if label}
+    <label class="block text-sm font-semibold text-base-content/80" for={textareaId}>{label}</label>
+  {/if}
+
+  <div class="grid gap-4 md:grid-cols-2">
+    <textarea
+      bind:value
+      {disabled}
+      rows="12"
+      class="textarea textarea-bordered w-full resize-y"
+      placeholder={placeholder}
+      id={textareaId}
+    ></textarea>
+
+    <div class="rounded-lg border border-base-300 bg-base-200 p-4">
+      <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-base-content/60">
+        Preview
+      </div>
+      {#if previewHtml}
+        <div class="space-y-2 text-sm leading-relaxed text-base-content" aria-live="polite">
+          {@html previewHtml}
+        </div>
+      {:else}
+        <p class="text-sm text-base-content/60">The rendered Markdown will appear here.</p>
+      {/if}
+    </div>
+  </div>
+
+  {#if helperText}
+    <p class="text-xs text-base-content/60">{helperText}</p>
+  {/if}
+</div>

crew-builder/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { themeStore, THEMES } from '$lib/stores/theme.svelte.js';
+
+  const themeOptions = THEMES;
+  let selectedTheme = $state(themeStore.currentTheme);
+
+  $effect(() => {
+    selectedTheme = themeStore.currentTheme;
+  });
+
+  function handleChange(event) {
+    const target = event.target;
+    themeStore.setTheme(target.value);
+  }
+
+  function handleToggle() {
+    themeStore.toggleDarkMode();
+  }
+</script>
+
+<div class="flex items-center gap-2">
+  <button class="btn btn-sm btn-ghost" type="button" onclick={handleToggle} aria-label="Toggle theme">
+    <span class="hidden sm:inline">Toggle</span>
+    <span class="sm:hidden">🌓</span>
+  </button>
+  <select
+    class="select select-bordered select-sm"
+    bind:value={selectedTheme}
+    onchange={handleChange}
+    aria-label="Select theme"
+  >
+    {#each themeOptions as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </select>
+</div>

crew-builder/src/lib/components/Toast.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { toastStore } from '$lib/stores/toast.svelte';
+
+  function getAlertClass(type) {
+    switch (type) {
+      case 'success':
+        return 'alert-success';
+      case 'error':
+        return 'alert-error';
+      case 'warning':
+        return 'alert-warning';
+      case 'info':
+      default:
+        return 'alert-info';
+    }
+  }
+
+  function getIcon(type) {
+    switch (type) {
+      case 'success':
+        return `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        `;
+      case 'error':
+        return `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        `;
+      case 'warning':
+        return `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        `;
+      case 'info':
+      default:
+        return `
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        `;
+    }
+  }
+</script>
+
+<div class="toast toast-top toast-end z-50">
+  {#each toastStore.toasts as toast (toast.id)}
+    <div class="alert {getAlertClass(toast.type)} shadow-lg">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 shrink-0 stroke-current"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        {@html getIcon(toast.type)}
+      </svg>
+      <span>{toast.message}</span>
+      {#if toast.dismissible}
+        <button
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={() => toastStore.remove(toast.id)}
+        >
+          ✕
+        </button>
+      {/if}
+    </div>
+  {/each}
+</div>

crew-builder/src/lib/components/Toolbar.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { crew as crewApi } from '$lib/api';
+  import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+  import { crewStore } from '$lib/stores/crewStore';
+  import { toastStore } from '$lib/stores/toast.svelte';
+
+  // Svelte 5: Use callback props instead of createEventDispatcher
+  interface Props {
+    onAddAgent?: () => void;
+    onExport?: () => void;
+  }
+
+  let { onAddAgent, onExport }: Props = $props();
+
+  let crewName = $state('');
+  let crewDescription = $state('');
+  let executionMode = $state<'sequential' | 'parallel' | 'hierarchical'>('sequential');
+  let uploading = $state(false);
+  let uploadStatus = $state<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  const unsubscribe = crewStore.subscribe((value) => {
+    crewName = value.metadata.name;
+    crewDescription = value.metadata.description;
+    executionMode = value.metadata.execution_mode;
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+
+  function updateMetadata() {
+    crewStore.updateMetadata({
+      name: crewName,
+      description: crewDescription,
+      execution_mode: executionMode
+    });
+  }
+
+  function goHome() {
+    crewStore.reset();
+    goto('/');
+  }
+
+  async function uploadToAPI() {
+    try {
+      uploading = true;
+      const crewJSON = crewStore.exportToJSON();
+      const response = await crewApi.createCrew(crewJSON);
+      toastStore.success(`Crew "${response.name ?? crewJSON.name}" created successfully!`);
+    } catch (error) {
+      const responseMessage =
+        typeof error === 'object' &&
+        error !== null &&
+        'response' in error &&
+        typeof (error as { response?: { data?: { message?: string } } }).response?.data?.message === 'string'
+          ? (error as { response?: { data?: { message?: string } } }).response?.data?.message
+          : undefined;
+      const fallbackMessage =
+        error instanceof Error && typeof error.message === 'string'
+          ? error.message
+          : 'Failed to upload crew';
+      const message = responseMessage ?? fallbackMessage;
+      uploadStatus = {
+        type: 'error',
+        message
+      };
+    } finally {
+      uploading = false;
+    }
+  }
+</script>
+
+<div class="navbar border-b border-base-300 bg-base-100 px-4 shadow-sm">
+  <div class="flex flex-1 items-center gap-4">
+    <!-- Home Button -->
+    <button
+      class="btn btn-ghost btn-sm gap-2"
+      onclick={goHome}
+      aria-label="Go to home"
+      type="button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+        />
+      </svg>
+      <span class="hidden sm:inline">Home</span>
+    </button>
+
+    <div class="flex items-center gap-2 text-xl font-semibold">
+      <span class="text-2xl">🦜</span>
+      <span class="hidden sm:inline">AgentCrew Builder</span>
+      <span class="sm:hidden">Builder</span>
+    </div>
+
+    <div class="flex flex-1 flex-wrap items-center gap-3">
+      <label class="form-control w-full max-w-xs">
+        <span class="label-text">Crew name</span>
+        <input
+          class="input input-bordered input-sm"
+          type="text"
+          bind:value={crewName}
+          onchange={updateMetadata}
+          placeholder="Crew name..."
+        />
+      </label>
+      <label class="form-control w-full max-w-sm">
+        <span class="label-text">Description</span>
+        <input
+          class="input input-bordered input-sm"
+          type="text"
+          bind:value={crewDescription}
+          onchange={updateMetadata}
+          placeholder="Description..."
+        />
+      </label>
+      <label class="form-control w-full max-w-[160px]">
+        <span class="label-text">Execution mode</span>
+        <select class="select select-bordered select-sm" bind:value={executionMode} onchange={updateMetadata}>
+          <option value="sequential">Sequential</option>
+          <option value="parallel">Parallel (Coming Soon)</option>
+          <option value="hierarchical">Hierarchical (Coming Soon)</option>
+        </select>
+      </label>
+    </div>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <ThemeToggle />
+    <button class="btn btn-primary btn-sm" type="button" onclick={() => onAddAgent?.()}>
+      + Agent
+    </button>
+    <button class="btn btn-success btn-sm" type="button" onclick={uploadToAPI} disabled={uploading}>
+      {uploading ? 'Uploading…' : 'Upload'}
+    </button>
+    <button class="btn btn-info btn-sm" type="button" onclick={() => onExport?.()}>
+      Export JSON
+    </button>
+  </div>
+</div>
+
+{#if uploadStatus}
+  <div class={`alert fixed right-4 top-24 z-50 max-w-sm shadow-lg ${uploadStatus.type === 'success' ? 'alert-success' : 'alert-error'}`}>
+    <span>{uploadStatus.message}</span>
+  </div>
+{/if}