create-supyagent-app 0.1.13 → 0.1.14

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

@@ -0,0 +1,196 @@
+import React from "react";
+import { CircleDot, FolderKanban } from "lucide-react";
+
+interface LinearIssueData {
+  id?: string;
+  title?: string;
+  identifier?: string;
+  state?: { name?: string; color?: string; type?: string };
+  priority?: number;
+  priorityLabel?: string;
+  assignee?: { name?: string; displayName?: string; email?: string };
+  url?: string;
+  description?: string;
+}
+
+interface LinearProjectData {
+  id?: string;
+  name?: string;
+  state?: string;
+  progress?: number;
+  url?: string;
+  description?: string;
+}
+
+interface LinearRendererProps {
+  data: unknown;
+}
+
+function isLinearIssue(data: unknown): data is LinearIssueData {
+  if (typeof data !== "object" || data === null) return false;
+  return ("title" in data && ("identifier" in data || "state" in data || "priority" in data));
+}
+
+function isLinearProject(data: unknown): data is LinearProjectData {
+  if (typeof data !== "object" || data === null) return false;
+  return "name" in data && ("progress" in data || ("state" in data && typeof (data as any).state === "string"));
+}
+
+const PRIORITY_LABELS: Record<number, { label: string; style: string }> = {
+  0: { label: "No priority", style: "text-muted-foreground" },
+  1: { label: "Urgent", style: "text-destructive" },
+  2: { label: "High", style: "text-orange-500" },
+  3: { label: "Medium", style: "text-yellow-500" },
+  4: { label: "Low", style: "text-muted-foreground" },
+};
+
+function IssueCard({ issue }: { issue: LinearIssueData }) {
+  const priorityInfo = issue.priority !== undefined ? PRIORITY_LABELS[issue.priority] : null;
+  const assigneeName = issue.assignee?.displayName || issue.assignee?.name;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <CircleDot
+          className="h-4 w-4 mt-0.5 shrink-0"
+          style={issue.state?.color ? { color: issue.state.color } : undefined}
+        />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">
+            {issue.url ? (
+              <a href={issue.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {issue.title}
+              </a>
+            ) : (
+              issue.title
+            )}
+            {issue.identifier && (
+              <span className="text-muted-foreground font-normal"> {issue.identifier}</span>
+            )}
+          </p>
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+            {issue.state?.name && (
+              <span
+                className="rounded-full bg-muted px-2 py-0.5 text-xs"
+                style={issue.state.color ? { color: issue.state.color } : undefined}
+              >
+                {issue.state.name}
+              </span>
+            )}
+            {priorityInfo && (
+              <span className={`text-xs ${priorityInfo.style}`}>
+                {issue.priorityLabel || priorityInfo.label}
+              </span>
+            )}
+            {assigneeName && (
+              <span className="text-xs text-muted-foreground">{assigneeName}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProjectCard({ project }: { project: LinearProjectData }) {
+  const progressPercent = project.progress !== undefined ? Math.round(project.progress * 100) : null;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-start gap-2">
+        <FolderKanban 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">
+            {project.url ? (
+              <a href={project.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {project.name}
+              </a>
+            ) : (
+              project.name
+            )}
+          </p>
+          {project.state && (
+            <span className="text-xs text-muted-foreground">{project.state}</span>
+          )}
+        </div>
+      </div>
+      {progressPercent !== null && (
+        <div className="space-y-1">
+          <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-primary transition-all"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground text-right">{progressPercent}%</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LinearRenderer({ data }: LinearRendererProps) {
+  if (isLinearIssue(data)) {
+    return <IssueCard issue={data} />;
+  }
+
+  if (isLinearProject(data)) {
+    return <ProjectCard project={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const issues = data.filter(isLinearIssue);
+    if (issues.length > 0) {
+      return (
+        <div className="space-y-2">
+          {issues.map((issue, i) => (
+            <IssueCard key={issue.id || i} issue={issue} />
+          ))}
+        </div>
+      );
+    }
+    const projects = data.filter(isLinearProject);
+    if (projects.length > 0) {
+      return (
+        <div className="space-y-2">
+          {projects.map((project, i) => (
+            <ProjectCard key={project.id || i} project={project} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  // Object with nodes/issues array (Linear API pattern)
+  if (typeof data === "object" && data !== null) {
+    const arr = (data as any).nodes || (data as any).issues || (data as any).projects;
+    if (Array.isArray(arr)) {
+      const issues = arr.filter(isLinearIssue);
+      if (issues.length > 0) {
+        return (
+          <div className="space-y-2">
+            {issues.map((issue, i) => (
+              <IssueCard key={issue.id || i} issue={issue} />
+            ))}
+          </div>
+        );
+      }
+      const projects = arr.filter(isLinearProject);
+      if (projects.length > 0) {
+        return (
+          <div className="space-y-2">
+            {projects.map((project, i) => (
+              <ProjectCard key={project.id || i} project={project} />
+            ))}
+          </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/linkedin.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import { User, FileText, ExternalLink, Clock } from "lucide-react";
+
+interface LinkedInProfileData {
+  id?: string;
+  localizedFirstName?: string;
+  localizedLastName?: string;
+  firstName?: string;
+  lastName?: string;
+  name?: string;
+  headline?: string;
+  vanityName?: string;
+  profilePicture?: unknown;
+}
+
+interface LinkedInPostData {
+  id?: string;
+  text?: string;
+  commentary?: string;
+  created?: { time?: number };
+  timestamp?: string;
+  author?: string;
+}
+
+interface LinkedInRendererProps {
+  data: unknown;
+}
+
+function isProfile(data: unknown): data is LinkedInProfileData {
+  if (typeof data !== "object" || data === null) return false;
+  return "localizedFirstName" in data || "firstName" in data || ("name" in data && "headline" in data);
+}
+
+function isPost(data: unknown): data is LinkedInPostData {
+  if (typeof data !== "object" || data === null) return false;
+  return ("text" in data || "commentary" in data) && !("localizedFirstName" in data);
+}
+
+function formatRelativeDate(dateStr: string | number): string {
+  try {
+    const date = typeof dateStr === "number" ? new Date(dateStr) : new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffDays === 0) return "today";
+    if (diffDays === 1) return "yesterday";
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return String(dateStr);
+  }
+}
+
+function ProfileCard({ profile }: { profile: LinkedInProfileData }) {
+  const name = profile.name ||
+    [profile.localizedFirstName || profile.firstName, profile.localizedLastName || profile.lastName]
+      .filter(Boolean)
+      .join(" ");
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <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">
+          <p className="text-sm font-medium text-foreground">{name || "LinkedIn Profile"}</p>
+          {profile.headline && (
+            <p className="text-xs text-muted-foreground line-clamp-2">{profile.headline}</p>
+          )}
+          {profile.vanityName && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <ExternalLink className="h-3 w-3" />
+              linkedin.com/in/{profile.vanityName}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PostCard({ post }: { post: LinkedInPostData }) {
+  const content = post.text || post.commentary;
+  const time = post.created?.time || post.timestamp;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-center gap-2">
+        <FileText className="h-4 w-4 text-muted-foreground shrink-0" />
+        {post.author && (
+          <span className="text-xs font-medium text-foreground">{post.author}</span>
+        )}
+        {time && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
+            <Clock className="h-3 w-3" />
+            {formatRelativeDate(time)}
+          </span>
+        )}
+      </div>
+      {content && (
+        <p className="text-sm text-foreground line-clamp-4">{content}</p>
+      )}
+    </div>
+  );
+}
+
+export function LinkedInRenderer({ data }: LinkedInRendererProps) {
+  // Profile
+  if (isProfile(data)) return <ProfileCard profile={data} />;
+
+  // {posts: [...]}
+  if (typeof data === "object" && data !== null && "posts" in data) {
+    const posts = (data as any).posts;
+    if (Array.isArray(posts)) {
+      return (
+        <div className="space-y-1.5">
+          {posts.filter(isPost).map((p, i) => <PostCard key={p.id || i} post={p} />)}
+        </div>
+      );
+    }
+  }
+
+  // {elements: [...]}
+  if (typeof data === "object" && data !== null && "elements" in data) {
+    const elements = (data as any).elements;
+    if (Array.isArray(elements)) {
+      const posts = elements.filter(isPost);
+      if (posts.length > 0) {
+        return (
+          <div className="space-y-1.5">
+            {posts.map((p, i) => <PostCard key={p.id || i} post={p} />)}
+          </div>
+        );
+      }
+    }
+  }
+
+  if (isPost(data)) return <PostCard post={data} />;
+
+  if (Array.isArray(data)) {
+    const posts = data.filter(isPost);
+    if (posts.length > 0) {
+      return <div className="space-y-1.5">{posts.map((p, i) => <PostCard key={p.id || i} post={p} />)}</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/notion.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+import { FileText, Database, ExternalLink, Clock } from "lucide-react";
+
+interface NotionPageData {
+  id?: string;
+  url?: string;
+  last_edited_time?: string;
+  lastEditedTime?: string;
+  properties?: Record<string, unknown>;
+  title?: string;
+}
+
+interface NotionDatabaseData {
+  id?: string;
+  title?: string | Array<{ plain_text?: string }>;
+  description?: string | Array<{ plain_text?: string }>;
+  url?: string;
+  lastEditedTime?: string;
+}
+
+interface NotionRendererProps {
+  data: unknown;
+}
+
+function isNotionPage(data: unknown): data is NotionPageData {
+  if (typeof data !== "object" || data === null) return false;
+  // Raw Notion shape with properties
+  if ("properties" in data) return true;
+  // Notion URL-based detection
+  if ("id" in data && "url" in data && String((data as any).url || "").includes("notion")) return true;
+  // Normalized Supyagent shape: has title + id + parentType (distinguishes from database)
+  if ("title" in data && "id" in data && "parentType" in data) return true;
+  return false;
+}
+
+function isNotionDatabase(data: unknown): data is NotionDatabaseData {
+  if (typeof data !== "object" || data === null) return false;
+  // Raw Notion shape: title is an array
+  if ("title" in data && Array.isArray((data as any).title) && "id" in data) return true;
+  // Normalized Supyagent shape: has propertyCount (distinguishes from pages)
+  if ("title" in data && "id" in data && "propertyCount" in data) return true;
+  return false;
+}
+
+function extractPageTitle(page: NotionPageData): string {
+  if (page.title) return page.title;
+  if (page.properties) {
+    for (const val of Object.values(page.properties)) {
+      if (typeof val === "object" && val !== null && "title" in val) {
+        const titles = (val as any).title;
+        if (Array.isArray(titles) && titles.length > 0) {
+          return titles.map((t: any) => t.plain_text || t.text?.content || "").join("");
+        }
+      }
+    }
+    // Check Name property (common)
+    const name = page.properties.Name || page.properties.name;
+    if (typeof name === "object" && name !== null && "title" in name) {
+      const titles = (name as any).title;
+      if (Array.isArray(titles) && titles.length > 0) {
+        return titles.map((t: any) => t.plain_text || "").join("");
+      }
+    }
+  }
+  return "Untitled";
+}
+
+function formatRelativeDate(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffDays === 0) return "today";
+    if (diffDays === 1) return "yesterday";
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+
+function PageCard({ page }: { page: NotionPageData }) {
+  const title = extractPageTitle(page);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-start gap-2">
+        <FileText 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 truncate">
+            {page.url ? (
+              <a href={page.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {title}
+              </a>
+            ) : (
+              title
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {(page.last_edited_time || page.lastEditedTime) && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3" />
+              {formatRelativeDate((page.last_edited_time || page.lastEditedTime)!)}
+            </span>
+          )}
+          {page.url && (
+            <a href={page.url} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground">
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DatabaseCard({ db }: { db: NotionDatabaseData }) {
+  const title = typeof db.title === "string"
+    ? db.title
+    : Array.isArray(db.title) && db.title.length > 0
+      ? db.title.map((t) => t.plain_text || "").join("")
+      : "Untitled database";
+  const desc = typeof db.description === "string"
+    ? db.description
+    : Array.isArray(db.description) && db.description.length > 0
+      ? db.description.map((d) => d.plain_text || "").join("")
+      : null;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-start gap-2">
+        <Database 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 truncate">
+            {db.url ? (
+              <a href={db.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {title}
+              </a>
+            ) : (
+              title
+            )}
+          </p>
+          {desc && <p className="text-xs text-muted-foreground line-clamp-2">{desc}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function NotionRenderer({ data }: NotionRendererProps) {
+  // Pages array
+  if (typeof data === "object" && data !== null && "pages" in data) {
+    const pages = (data as any).pages;
+    if (Array.isArray(pages)) {
+      return (
+        <div className="space-y-1.5">
+          {pages.filter(isNotionPage).map((p, i) => <PageCard key={p.id || i} page={p} />)}
+        </div>
+      );
+    }
+  }
+
+  // Databases array
+  if (typeof data === "object" && data !== null && "databases" in data) {
+    const dbs = (data as any).databases;
+    if (Array.isArray(dbs)) {
+      return (
+        <div className="space-y-1.5">
+          {dbs.filter(isNotionDatabase).map((d, i) => <DatabaseCard key={d.id || i} db={d} />)}
+        </div>
+      );
+    }
+  }
+
+  // Results array (query response)
+  if (typeof data === "object" && data !== null && "results" in data) {
+    const results = (data as any).results;
+    if (Array.isArray(results)) {
+      const pages = results.filter(isNotionPage);
+      if (pages.length > 0) {
+        return (
+          <div className="space-y-1.5">
+            {pages.map((p, i) => <PageCard key={p.id || i} page={p} />)}
+          </div>
+        );
+      }
+      const dbs = results.filter(isNotionDatabase);
+      if (dbs.length > 0) {
+        return (
+          <div className="space-y-1.5">
+            {dbs.map((d, i) => <DatabaseCard key={d.id || i} db={d} />)}
+          </div>
+        );
+      }
+    }
+  }
+
+  // Single page
+  if (isNotionPage(data)) return <PageCard page={data} />;
+
+  // Single database
+  if (isNotionDatabase(data)) return <DatabaseCard db={data} />;
+
+  // Array
+  if (Array.isArray(data)) {
+    const pages = data.filter(isNotionPage);
+    if (pages.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {pages.map((p, i) => <PageCard key={p.id || i} page={p} />)}
+        </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>
+  );
+}