@happyvertical/smrt-agents 0.30.0

package/dist/svelte/components/AgentScheduleForm.svelte

@@ -0,0 +1,381 @@
+<script lang="ts">
+/**
+ * AgentScheduleForm - Create or edit an agent schedule
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button, Card } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import type { ScheduleFormData } from '../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Initial form data (for editing) */
+  initialData?: Partial<ScheduleFormData>;
+  /** Available agent types */
+  agentTypes?: string[];
+  /** Submit callback */
+  onSubmit?: (data: ScheduleFormData) => void;
+  /** Cancel callback */
+  onCancel?: () => void;
+  /** Loading state */
+  loading?: boolean;
+  /** Edit mode */
+  editMode?: boolean;
+}
+
+let {
+  initialData = {},
+  agentTypes = [],
+  onSubmit,
+  onCancel,
+  loading = false,
+  editMode = false,
+}: Props = $props();
+
+function getInitialFormState(data: Partial<ScheduleFormData> = {}) {
+  return {
+    agentType: data.agentType ?? '',
+    agentId: data.agentId ?? '',
+    cron: data.cron ?? '',
+    timezone: data.timezone ?? 'UTC',
+    enabled: data.enabled ?? true,
+    maxConcurrent: data.maxConcurrent ?? 1,
+    timeout: data.timeout ?? 3600000,
+    method: data.method ?? 'run',
+  };
+}
+
+let agentType = $state('');
+let agentId = $state('');
+let cron = $state('');
+let timezone = $state('UTC');
+let enabled = $state(true);
+let maxConcurrent = $state(1);
+let timeout = $state(3600000);
+let method = $state('run');
+let appliedInitialData: Partial<ScheduleFormData> | undefined;
+
+$effect(() => {
+  if (appliedInitialData === initialData) {
+    return;
+  }
+
+  appliedInitialData = initialData;
+
+  const next = getInitialFormState(initialData);
+  agentType = next.agentType;
+  agentId = next.agentId;
+  cron = next.cron;
+  timezone = next.timezone;
+  enabled = next.enabled;
+  maxConcurrent = next.maxConcurrent;
+  timeout = next.timeout;
+  method = next.method;
+});
+
+// Common cron presets
+const cronPresets = [
+  { label: 'Every hour', value: '0 * * * *' },
+  { label: 'Every 15 minutes', value: '*/15 * * * *' },
+  { label: 'Daily at midnight', value: '0 0 * * *' },
+  { label: 'Daily at 2 AM', value: '0 2 * * *' },
+  { label: 'Weekly on Sunday', value: '0 0 * * 0' },
+  { label: 'Monthly on 1st', value: '0 0 1 * *' },
+];
+
+// Common timezones
+const timezones = [
+  'UTC',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/London',
+  'Europe/Paris',
+  'Asia/Tokyo',
+  'Australia/Sydney',
+];
+
+// Validation
+const isValid = $derived(agentType.trim() !== '' && cron.trim() !== '');
+
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  if (!isValid || loading) return;
+
+  const data: ScheduleFormData = {
+    agentType: agentType.trim(),
+    cron: cron.trim(),
+    timezone,
+    enabled,
+    maxConcurrent,
+    timeout,
+    method: method.trim() || 'run',
+  };
+
+  if (agentId.trim()) {
+    data.agentId = agentId.trim();
+  }
+
+  onSubmit?.(data);
+}
+
+function handleCronPreset(preset: string) {
+  cron = preset;
+}
+</script>
+
+<Card>
+  {#snippet header()}
+    <h2>{editMode ? 'Edit Schedule' : 'Create Schedule'}</h2>
+  {/snippet}
+
+  <form class="schedule-form" onsubmit={handleSubmit}>
+    <div class="form-grid">
+      <!-- Agent Type -->
+      <div class="form-field">
+        <label for="agentType">{t(M['agents.schedule_form.agent_type'])}</label>
+        {#if agentTypes.length > 0}
+          <select id="agentType" bind:value={agentType} required disabled={loading}>
+            <option value="">{t(M['agents.schedule_form.select_agent_type'])}</option>
+            {#each agentTypes as type}
+              <option value={type}>{type}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            type="text"
+            id="agentType"
+            bind:value={agentType}
+            placeholder={t(M['agents.schedule_form.agent_type_placeholder'])}
+            required
+            disabled={loading}
+          />
+        {/if}
+      </div>
+
+      <!-- Agent ID (optional) -->
+      <div class="form-field">
+        <label for="agentId">{t(M['agents.schedule_form.agent_id'])}</label>
+        <input
+          type="text"
+          id="agentId"
+          bind:value={agentId}
+          placeholder={t(M['agents.schedule_form.agent_id_placeholder'])}
+          disabled={loading}
+        />
+        <small>{t(M['agents.schedule_form.agent_id_hint'])}</small>
+      </div>
+
+      <!-- Method -->
+      <div class="form-field">
+        <label for="method">Method</label>
+        <input
+          type="text"
+          id="method"
+          bind:value={method}
+          placeholder={t(M['agents.schedule_form.method_placeholder'])}
+          disabled={loading}
+        />
+        <small>{t(M['agents.schedule_form.method_hint'])}</small>
+      </div>
+
+      <!-- Cron Expression -->
+      <div class="form-field form-field--full">
+        <label for="cron">{t(M['agents.schedule_form.cron_schedule'])}</label>
+        <input
+          type="text"
+          id="cron"
+          bind:value={cron}
+          placeholder="0 2 * * *"
+          required
+          disabled={loading}
+        />
+        <div class="cron-presets">
+          {#each cronPresets as preset}
+            <button
+              type="button"
+              class="preset-btn"
+              onclick={() => handleCronPreset(preset.value)}
+              disabled={loading}
+            >
+              {preset.label}
+            </button>
+          {/each}
+        </div>
+        <small>{t(M['agents.schedule_form.cron_hint'])}</small>
+      </div>
+
+      <!-- Timezone -->
+      <div class="form-field">
+        <label for="timezone">Timezone</label>
+        <select id="timezone" bind:value={timezone} disabled={loading}>
+          {#each timezones as tz}
+            <option value={tz}>{tz}</option>
+          {/each}
+        </select>
+      </div>
+
+      <!-- Max Concurrent -->
+      <div class="form-field">
+        <label for="maxConcurrent">{t(M['agents.schedule_form.max_concurrent'])}</label>
+        <input
+          type="number"
+          id="maxConcurrent"
+          bind:value={maxConcurrent}
+          min="1"
+          max="10"
+          disabled={loading}
+        />
+        <small>{t(M['agents.schedule_form.max_concurrent_hint'])}</small>
+      </div>
+
+      <!-- Timeout -->
+      <div class="form-field">
+        <label for="timeout">Timeout (ms)</label>
+        <input
+          type="number"
+          id="timeout"
+          bind:value={timeout}
+          min="60000"
+          step="60000"
+          disabled={loading}
+        />
+        <small>{(timeout / 60000).toFixed(0)} minutes</small>
+      </div>
+
+      <!-- Enabled -->
+      <div class="form-field form-field--checkbox">
+        <label>
+          <input type="checkbox" bind:checked={enabled} disabled={loading} />
+          {t(M['agents.schedule_form.enable_schedule_immediately'])}
+        </label>
+      </div>
+    </div>
+
+    <div class="form-actions">
+      {#if onCancel}
+        <Button variant="secondary" onclick={onCancel} disabled={loading}>
+          Cancel
+        </Button>
+      {/if}
+      <Button type="submit" disabled={!isValid || loading}>
+        {loading ? 'Saving...' : editMode ? 'Update Schedule' : 'Create Schedule'}
+      </Button>
+    </div>
+  </form>
+</Card>
+
+<style>
+  .schedule-form {
+    padding: var(--smrt-spacing-sm, 0.5rem) 0;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-xs, 0.25rem);
+  }
+
+  .form-field--full {
+    grid-column: 1 / -1;
+  }
+
+  .form-field--checkbox {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  .form-field--checkbox label {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+    cursor: pointer;
+  }
+
+  .form-field label {
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .form-field input,
+  .form-field select {
+    padding: var(--smrt-spacing-sm, 0.5rem);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    transition: border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .form-field input:focus,
+  .form-field select:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
+  }
+
+  .form-field input:disabled,
+  .form-field select:disabled {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    cursor: not-allowed;
+  }
+
+  .form-field small {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .cron-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-xs, 0.25rem);
+    margin-top: var(--smrt-spacing-xs, 0.25rem);
+  }
+
+  .preset-btn {
+    padding: 0.125rem var(--smrt-spacing-sm, 0.5rem);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface, #ffffff);
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+    cursor: pointer;
+    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .preset-btn:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .preset-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+    margin-top: var(--smrt-spacing-lg, 1.5rem);
+    padding-top: var(--smrt-spacing-md, 1rem);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .form-field input,
+    .form-field select,
+    .preset-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/AgentScheduleForm.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ScheduleFormData } from '../types.js';
+export interface Props {
+    /** Initial form data (for editing) */
+    initialData?: Partial<ScheduleFormData>;
+    /** Available agent types */
+    agentTypes?: string[];
+    /** Submit callback */
+    onSubmit?: (data: ScheduleFormData) => void;
+    /** Cancel callback */
+    onCancel?: () => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Edit mode */
+    editMode?: boolean;
+}
+declare const AgentScheduleForm: import("svelte").Component<Props, {}, "">;
+type AgentScheduleForm = ReturnType<typeof AgentScheduleForm>;
+export default AgentScheduleForm;
+//# sourceMappingURL=AgentScheduleForm.svelte.d.ts.map

package/dist/svelte/components/AgentScheduleForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentScheduleForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AgentScheduleForm.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsND,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}