create-supyagent-app 0.1.13 → 0.1.14

package/templates/base/src/components/supyagent/tools/brevo.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { User, Mail, BarChart3 } from "lucide-react";
+
+interface BrevoContactData {
+  id?: number;
+  email?: string;
+  attributes?: { FIRSTNAME?: string; LASTNAME?: string; [key: string]: unknown };
+}
+
+interface BrevoCampaignData {
+  id?: number;
+  name?: string;
+  subject?: string;
+  status?: string;
+  statistics?: {
+    globalStats?: { opened?: number; clicked?: number; sent?: number };
+  };
+}
+
+interface BrevoRendererProps {
+  data: unknown;
+}
+
+function isBrevoContact(data: unknown): data is BrevoContactData {
+  return typeof data === "object" && data !== null && "email" in data && ("attributes" in data || "id" in data);
+}
+
+function isBrevoCampaign(data: unknown): data is BrevoCampaignData {
+  return typeof data === "object" && data !== null && "name" in data && ("subject" in data || "status" in data);
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  sent: "bg-green-500/10 text-green-500",
+  draft: "bg-muted text-muted-foreground",
+  queued: "bg-blue-500/10 text-blue-500",
+  suspended: "bg-yellow-500/10 text-yellow-600",
+  archive: "bg-muted text-muted-foreground",
+};
+
+function ContactCard({ contact }: { contact: BrevoContactData }) {
+  const name = contact.attributes
+    ? [contact.attributes.FIRSTNAME, contact.attributes.LASTNAME].filter(Boolean).join(" ")
+    : undefined;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3">
+      <div className="flex items-start gap-2">
+        <User className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          {name && <p className="text-sm font-medium text-foreground">{name}</p>}
+          <p className="text-xs text-muted-foreground flex items-center gap-1">
+            <Mail className="h-3 w-3" />
+            {contact.email}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CampaignCard({ campaign }: { campaign: BrevoCampaignData }) {
+  const stats = campaign.statistics?.globalStats;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Mail className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">{campaign.name}</p>
+          {campaign.subject && <p className="text-xs text-muted-foreground">{campaign.subject}</p>}
+        </div>
+        {campaign.status && (
+          <span className={`rounded-full px-2 py-0.5 text-xs ${STATUS_STYLES[campaign.status] || "bg-muted text-muted-foreground"}`}>
+            {campaign.status}
+          </span>
+        )}
+      </div>
+      {stats && (
+        <div className="flex items-center gap-4 pl-6">
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <BarChart3 className="h-3 w-3" />
+            {stats.sent ?? 0} sent
+          </span>
+          {stats.opened !== undefined && (
+            <span className="text-xs text-muted-foreground">{stats.opened} opened</span>
+          )}
+          {stats.clicked !== undefined && (
+            <span className="text-xs text-muted-foreground">{stats.clicked} clicked</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function BrevoRenderer({ data }: BrevoRendererProps) {
+  // {contacts: [...]}
+  if (typeof data === "object" && data !== null && "contacts" in data) {
+    const contacts = (data as any).contacts;
+    if (Array.isArray(contacts)) {
+      return (
+        <div className="space-y-1.5">
+          {contacts.filter(isBrevoContact).map((c, i) => <ContactCard key={c.id || i} contact={c} />)}
+        </div>
+      );
+    }
+  }
+
+  // {campaigns: [...]}
+  if (typeof data === "object" && data !== null && "campaigns" in data) {
+    const campaigns = (data as any).campaigns;
+    if (Array.isArray(campaigns)) {
+      return (
+        <div className="space-y-1.5">
+          {campaigns.filter(isBrevoCampaign).map((c, i) => <CampaignCard key={c.id || i} campaign={c} />)}
+        </div>
+      );
+    }
+  }
+
+  if (isBrevoContact(data)) return <ContactCard contact={data} />;
+  if (isBrevoCampaign(data)) return <CampaignCard campaign={data} />;
+
+  if (Array.isArray(data)) {
+    const contacts = data.filter(isBrevoContact);
+    if (contacts.length > 0) {
+      return <div className="space-y-1.5">{contacts.map((c, i) => <ContactCard key={c.id || i} contact={c} />)}</div>;
+    }
+    const campaigns = data.filter(isBrevoCampaign);
+    if (campaigns.length > 0) {
+      return <div className="space-y-1.5">{campaigns.map((c, i) => <CampaignCard key={c.id || i} campaign={c} />)}</div>;
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/calendar.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { Calendar, MapPin, Users, Check, X, HelpCircle } from "lucide-react";
+
+interface CalendarEventData {
+  id?: string;
+  summary?: string;
+  description?: string;
+  start?: { dateTime?: string; date?: string };
+  end?: { dateTime?: string; date?: string };
+  location?: string;
+  attendees?: Array<{
+    email?: string;
+    displayName?: string;
+    responseStatus?: string;
+  }>;
+  status?: string;
+}
+
+interface CalendarRendererProps {
+  data: unknown;
+}
+
+function isCalendarEvent(data: unknown): data is CalendarEventData {
+  return typeof data === "object" && data !== null && ("summary" in data || "start" in data);
+}
+
+function formatRelativeDateTime(dt?: { dateTime?: string; date?: string }): string {
+  if (!dt) return "";
+  const raw = dt.dateTime || dt.date;
+  if (!raw) return "";
+  try {
+    const date = new Date(raw);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    const timeStr = dt.dateTime
+      ? date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })
+      : "";
+
+    if (diffDays === 0) {
+      return timeStr ? `Today at ${timeStr}` : "Today";
+    }
+    if (diffDays === 1) {
+      return timeStr ? `Tomorrow at ${timeStr}` : "Tomorrow";
+    }
+    if (diffDays === -1) {
+      return timeStr ? `Yesterday at ${timeStr}` : "Yesterday";
+    }
+    if (diffDays > 1 && diffDays < 7) {
+      const dayName = date.toLocaleDateString(undefined, { weekday: "long" });
+      return timeStr ? `${dayName} at ${timeStr}` : dayName;
+    }
+
+    return dt.dateTime
+      ? date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })
+      : date.toLocaleDateString(undefined, { dateStyle: "medium" });
+  } catch {
+    return raw;
+  }
+}
+
+function ResponseStatusIcon({ status }: { status?: string }) {
+  switch (status) {
+    case "accepted":
+      return <Check className="h-3 w-3 text-green-500" />;
+    case "declined":
+      return <X className="h-3 w-3 text-destructive" />;
+    case "tentative":
+      return <HelpCircle className="h-3 w-3 text-yellow-500" />;
+    default:
+      return <HelpCircle className="h-3 w-3 text-muted-foreground" />;
+  }
+}
+
+function EventCard({ event }: { event: CalendarEventData }) {
+  const startStr = formatRelativeDateTime(event.start);
+  const endStr = formatRelativeDateTime(event.end);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-start gap-2">
+        <Calendar className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">
+            {event.summary || "Untitled event"}
+          </p>
+          {startStr && (
+            <p className="text-xs text-muted-foreground">
+              {startStr}
+              {endStr ? ` \u2192 ${endStr}` : ""}
+            </p>
+          )}
+        </div>
+      </div>
+      {event.location && (
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <MapPin className="h-3 w-3 shrink-0" />
+          <span className="truncate">{event.location}</span>
+        </div>
+      )}
+      {event.attendees && event.attendees.length > 0 && (
+        <div className="flex items-start gap-1.5 text-xs text-muted-foreground">
+          <Users className="h-3 w-3 shrink-0 mt-0.5" />
+          <div className="flex flex-wrap gap-x-3 gap-y-1">
+            {event.attendees.map((a, i) => (
+              <span key={i} className="inline-flex items-center gap-1">
+                <ResponseStatusIcon status={a.responseStatus} />
+                {a.displayName || a.email}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CalendarRenderer({ data }: CalendarRendererProps) {
+  if (isCalendarEvent(data)) {
+    return <EventCard event={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const events = data.filter(isCalendarEvent);
+    if (events.length > 0) {
+      return (
+        <div className="space-y-2">
+          {events.map((event, i) => (
+            <EventCard key={event.id || i} event={event} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "events" in data) {
+    const events = (data as { events: unknown[] }).events;
+    if (Array.isArray(events)) {
+      const calEvents = events.filter(isCalendarEvent);
+      if (calEvents.length > 0) {
+        return (
+          <div className="space-y-2">
+            {calEvents.map((event, i) => (
+              <EventCard key={event.id || i} event={event} />
+            ))}
+          </div>
+        );
+      }
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/calendly.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import { Calendar, Clock, MapPin } from "lucide-react";
+
+interface CalendlyEventData {
+  uri?: string;
+  name?: string;
+  status?: string;
+  start_time?: string;
+  end_time?: string;
+  location?: { type?: string; location?: string };
+  event_type?: string;
+}
+
+interface CalendlyEventTypeData {
+  uri?: string;
+  name?: string;
+  duration?: number;
+  active?: boolean;
+  slug?: string;
+  description_plain?: string;
+}
+
+interface CalendlyRendererProps {
+  data: unknown;
+}
+
+function isCalendlyEvent(data: unknown): data is CalendlyEventData {
+  return typeof data === "object" && data !== null && "name" in data && ("start_time" in data || "status" in data);
+}
+
+function isCalendlyEventType(data: unknown): data is CalendlyEventTypeData {
+  return typeof data === "object" && data !== null && "name" in data && ("duration" in data || "slug" in data || "active" in data);
+}
+
+function formatDateTime(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleString(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  active: "bg-green-500/10 text-green-500",
+  canceled: "bg-destructive/10 text-destructive",
+};
+
+function EventCard({ event }: { event: CalendlyEventData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-start gap-2">
+        <Calendar className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">{event.name}</p>
+          {event.start_time && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3" />
+              {formatDateTime(event.start_time)}
+              {event.end_time && ` - ${formatDateTime(event.end_time)}`}
+            </p>
+          )}
+          {event.location?.location && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <MapPin className="h-3 w-3" />
+              {event.location.location}
+            </p>
+          )}
+        </div>
+        {event.status && (
+          <span className={`rounded-full px-2 py-0.5 text-xs ${STATUS_STYLES[event.status] || "bg-muted text-muted-foreground"}`}>
+            {event.status}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EventTypeCard({ eventType }: { eventType: CalendlyEventTypeData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3">
+      <div className="flex items-start gap-2">
+        <Calendar className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">{eventType.name}</p>
+          {eventType.description_plain && (
+            <p className="text-xs text-muted-foreground line-clamp-2">{eventType.description_plain}</p>
+          )}
+          {eventType.duration !== undefined && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3" />
+              {eventType.duration} min
+            </p>
+          )}
+        </div>
+        {eventType.active !== undefined && (
+          <span className={`rounded-full px-2 py-0.5 text-xs ${eventType.active ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`}>
+            {eventType.active ? "Active" : "Inactive"}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CalendlyRenderer({ data }: CalendlyRendererProps) {
+  if (typeof data === "object" && data !== null) {
+    const d = data as Record<string, unknown>;
+
+    // {collection: [...]}
+    if (Array.isArray(d.collection)) {
+      const events = d.collection.filter(isCalendlyEvent);
+      const types = d.collection.filter(isCalendlyEventType);
+      if (types.length > 0 && events.length === 0) {
+        return <div className="space-y-1.5">{types.map((t, i) => <EventTypeCard key={t.uri || i} eventType={t} />)}</div>;
+      }
+      if (events.length > 0) {
+        return <div className="space-y-1.5">{events.map((e, i) => <EventCard key={e.uri || i} event={e} />)}</div>;
+      }
+    }
+
+    // {scheduled_events: [...]}
+    if (Array.isArray(d.scheduled_events)) {
+      return (
+        <div className="space-y-1.5">
+          {d.scheduled_events.filter(isCalendlyEvent).map((e: CalendlyEventData, i: number) => <EventCard key={e.uri || i} event={e} />)}
+        </div>
+      );
+    }
+
+    // {event_types: [...]}
+    if (Array.isArray(d.event_types)) {
+      return (
+        <div className="space-y-1.5">
+          {d.event_types.filter(isCalendlyEventType).map((t: CalendlyEventTypeData, i: number) => <EventTypeCard key={t.uri || i} eventType={t} />)}
+        </div>
+      );
+    }
+  }
+
+  if (isCalendlyEvent(data)) return <EventCard event={data} />;
+  if (isCalendlyEventType(data)) return <EventTypeCard eventType={data} />;
+
+  if (Array.isArray(data)) {
+    const events = data.filter(isCalendlyEvent);
+    if (events.length > 0) {
+      return <div className="space-y-1.5">{events.map((e, i) => <EventCard key={e.uri || i} event={e} />)}</div>;
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/compute.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Terminal, AlertTriangle, Check, X } from "lucide-react";
+
+interface ComputeData {
+  stdout?: string;
+  stderr?: string;
+  exit_code?: number;
+  exitCode?: number;
+  duration?: number;
+  duration_ms?: number;
+  output?: string;
+  error?: string;
+  url?: string;
+  files?: Array<{ name?: string; url?: string; size?: number }>;
+}
+
+interface ComputeRendererProps {
+  data: unknown;
+}
+
+function isComputeData(data: unknown): data is ComputeData {
+  if (typeof data !== "object" || data === null) return false;
+  return "stdout" in data || "stderr" in data || "exit_code" in data || "exitCode" in data || "output" in data;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+export function ComputeRenderer({ data }: ComputeRendererProps) {
+  if (!isComputeData(data)) {
+    return (
+      <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    );
+  }
+
+  const exitCode = data.exit_code ?? data.exitCode;
+  const duration = data.duration_ms ?? data.duration;
+  const stdout = data.stdout || data.output || "";
+  const stderr = data.stderr || data.error || "";
+  const success = exitCode === undefined || exitCode === 0;
+
+  return (
+    <div className="space-y-2">
+      <div className="rounded-lg border border-border bg-background overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-b border-border">
+          <Terminal className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground flex-1">Output</span>
+          <div className="flex items-center gap-2">
+            {duration !== undefined && (
+              <span className="text-xs text-muted-foreground">{formatDuration(duration)}</span>
+            )}
+            {exitCode !== undefined && (
+              <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs ${
+                success ? "text-green-500 bg-green-500/10" : "text-destructive bg-destructive/10"
+              }`}>
+                {success ? <Check className="h-3 w-3" /> : <X className="h-3 w-3" />}
+                exit {exitCode}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Stdout */}
+        {stdout && (
+          <pre className="p-3 text-xs text-foreground overflow-x-auto max-h-80 overflow-y-auto font-mono whitespace-pre-wrap">
+            {stdout}
+          </pre>
+        )}
+
+        {/* Stderr */}
+        {stderr && (
+          <div className="border-t border-border">
+            <div className="flex items-center gap-1.5 px-3 py-1 bg-destructive/5">
+              <AlertTriangle className="h-3 w-3 text-destructive" />
+              <span className="text-xs text-destructive">stderr</span>
+            </div>
+            <pre className="p-3 text-xs text-destructive overflow-x-auto max-h-40 overflow-y-auto font-mono whitespace-pre-wrap">
+              {stderr}
+            </pre>
+          </div>
+        )}
+
+        {!stdout && !stderr && (
+          <p className="p-3 text-xs text-muted-foreground italic">No output</p>
+        )}
+      </div>
+
+      {/* Output files */}
+      {data.files && data.files.length > 0 && (
+        <div className="space-y-1">
+          {data.files.map((file, i) => (
+            <div key={i} className="flex items-center gap-2 rounded-lg border border-border bg-card p-2">
+              <Terminal className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              {file.url ? (
+                <a href={file.url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline truncate">
+                  {file.name || file.url}
+                </a>
+              ) : (
+                <span className="text-xs text-foreground truncate">{file.name}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}