sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/feedback/insights.tsx

@@ -0,0 +1,250 @@
+import { Container } from "@/components/header/container";
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import { detectFeedbackPatterns, getChatModel } from "@sea/core";
+import { getCorrectionsGroupedByItem, listCorrections } from "@sea/dal/feedback";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@sea/ui/components/ui/tabs";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { AlertTriangle, BarChart3, CheckCircle, TrendingUp } from "lucide-react";
+import { useState } from "react";
+
+const loadInsightsFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const corrections = await listCorrections({ member, limit: 200 });
+    const groupedCorrections = await getCorrectionsGroupedByItem({ member });
+
+    // Calculate basic statistics
+    const totalCorrections = corrections.length;
+    const pendingCorrections = corrections.filter((c) => c.status === "pending").length;
+    const addressedCorrections = corrections.filter((c) => c.status === "addressed").length;
+
+    // Group by field name
+    const fieldStats = corrections.reduce(
+      (acc, correction) => {
+        const fieldName = correction.submissionItem?.formField?.name || "unknown";
+        if (!acc[fieldName]) {
+          acc[fieldName] = { total: 0, pending: 0, addressed: 0 };
+        }
+        acc[fieldName].total++;
+        if (correction.status === "pending") {
+          acc[fieldName].pending++;
+        } else {
+          acc[fieldName].addressed++;
+        }
+        return acc;
+      },
+      {} as Record<string, { total: number; pending: number; addressed: number }>,
+    );
+
+    // Get most problematic fields
+    const problematicFields = Object.entries(fieldStats)
+      .sort(([, a], [, b]) => b.total - a.total)
+      .slice(0, 10);
+
+    return {
+      corrections,
+      groupedCorrections,
+      stats: {
+        totalCorrections,
+        pendingCorrections,
+        addressedCorrections,
+        fieldStats,
+        problematicFields,
+      },
+    };
+  });
+
+const generateFullAnalysisFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const corrections = await listCorrections({ member, limit: 100 });
+
+    if (corrections.length === 0) {
+      return { analysis: "No feedback data available for analysis." };
+    }
+
+    const config = getAppConfig();
+    const model = getChatModel({
+      aiGatewayApiKey: config.vercel.aiGatewayApiKey,
+      modelId: "gpt-4o",
+    });
+    const analysis = await detectFeedbackPatterns(model, member, corrections);
+    return { analysis };
+  });
+
+export const Route = createFileRoute("/_authed/_app/feedback/insights")({
+  component: InsightsDashboard,
+  loader: () => loadInsightsFn(),
+});
+
+function InsightsDashboard() {
+  const { corrections, stats } = Route.useLoaderData();
+  const [fullAnalysis, setFullAnalysis] = useState<string | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+
+  const handleGenerateFullAnalysis = async () => {
+    setIsAnalyzing(true);
+    try {
+      const result = await generateFullAnalysisFn();
+      setFullAnalysis(result.analysis);
+    } catch (error) {
+      console.error("Failed to generate full analysis:", error);
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  const addressedPercentage =
+    stats.totalCorrections > 0 ? (stats.addressedCorrections / stats.totalCorrections) * 100 : 0;
+
+  return (
+    <Container
+      crumbs={[
+        { href: "/feedback", label: "Feedback" },
+        { href: "/feedback/insights", label: "Insights" },
+      ]}
+    >
+      <div className="mb-6 flex items-center justify-between">
+        <H1>Feedback Insights</H1>
+        <div className="flex items-center gap-2"></div>
+      </div>
+
+      {/* Overview Cards */}
+      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Feedback</CardTitle>
+            <TrendingUp className="text-muted-foreground h-4 w-4" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.totalCorrections}</div>
+            <p className="text-muted-foreground text-xs">Correction submissions</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Pending</CardTitle>
+            <AlertTriangle className="h-4 w-4 text-orange-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-orange-600">{stats.pendingCorrections}</div>
+            <p className="text-muted-foreground text-xs">Need attention</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Addressed</CardTitle>
+            <CheckCircle className="h-4 w-4 text-green-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">{stats.addressedCorrections}</div>
+            <p className="text-muted-foreground text-xs">Completed</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Resolution Rate</CardTitle>
+            <BarChart3 className="text-muted-foreground h-4 w-4" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{addressedPercentage.toFixed(1)}%</div>
+            <div className="bg-muted mt-2 h-2 w-full overflow-hidden rounded-full">
+              <div
+                className="h-full bg-green-500 transition-all duration-300"
+                style={{ width: `${addressedPercentage}%` }}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="fields" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="fields">Problematic Fields</TabsTrigger>
+          <TabsTrigger value="analysis">AI Analysis</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="fields" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Fields with Most Feedback</CardTitle>
+              <CardDescription>Fields that users correct most frequently</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {stats.problematicFields.map(([fieldName, stats]) => (
+                  <div key={fieldName} className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <span className="font-medium">{fieldName}</span>
+                      <span className="text-muted-foreground text-sm">
+                        {stats.total} corrections
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge variant="secondary">{stats.pending} pending</Badge>
+                      <Badge variant="green">{stats.addressed} addressed</Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="analysis" className="space-y-4">
+          {fullAnalysis ? (
+            <Card>
+              <CardHeader>
+                <CardTitle>AI-Generated Analysis</CardTitle>
+                <CardDescription>Patterns and insights from your feedback data</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="prose prose-sm max-w-none">
+                  <pre className="bg-background text-foreground rounded-md border p-4 text-sm whitespace-pre-wrap">
+                    {fullAnalysis}
+                  </pre>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>AI Analysis</CardTitle>
+                <CardDescription>Generate insights about your feedback patterns</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-muted-foreground mb-4">
+                  Click "Generate Analysis" above to get AI-powered insights about your feedback
+                  data.
+                </p>
+                <Button
+                  onClick={handleGenerateFullAnalysis}
+                  disabled={isAnalyzing || corrections.length === 0}
+                  className="flex items-center gap-2"
+                >
+                  <BarChart3 className="h-4 w-4" />
+                  {isAnalyzing ? "Analyzing..." : "Generate Analysis"}
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </Container>
+  );
+}

package/apps/main/src/routes/_authed/_app/pipelines/$pipelineId/$runId/-components/blockers-panel.tsx

@@ -0,0 +1,260 @@
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  ClockIcon,
+  SettingsIcon,
+  UploadIcon,
+  XCircleIcon,
+} from "lucide-react";
+
+type BlockerType =
+  | "missing_upload"
+  | "parent_incomplete"
+  | "missing_config"
+  | "missing_manual_input";
+
+type Blocker = {
+  id: string;
+  blockerType: BlockerType;
+  blockerDetails: Record<string, unknown>;
+  resolved: boolean;
+  resolvedAt: Date | null;
+  createdAt: Date;
+};
+
+type StepWithBlockers = {
+  id: string;
+  stepId: string;
+  stepName: string;
+  status: "pending" | "running" | "completed" | "failed";
+  blockers: Blocker[];
+  hasUnresolvedBlockers: boolean;
+};
+
+type BlockersPanelProps = {
+  steps: StepWithBlockers[];
+  onResolveBlocker?: (blockerId: string, blockerType: BlockerType, stepId: string) => void;
+};
+
+const blockerTypeLabels: Record<BlockerType, string> = {
+  missing_upload: "Missing Documents",
+  parent_incomplete: "Parent Not Complete",
+  missing_config: "Missing Configuration",
+  missing_manual_input: "Missing Manual Input",
+};
+
+const blockerTypeDescriptions: Record<BlockerType, string> = {
+  missing_upload: "This step requires documents to be uploaded before it can execute",
+  parent_incomplete: "This step is waiting for parent steps to complete",
+  missing_config:
+    "This step is missing required configuration (e.g., integration URL, output form)",
+  missing_manual_input: "This step requires manual input data to be provided",
+};
+
+function BlockerIcon({ blockerType }: { blockerType: BlockerType }) {
+  const iconClass = "size-4";
+  switch (blockerType) {
+    case "missing_upload":
+      return <AlertCircleIcon className={`${iconClass} text-orange-500`} />;
+    case "parent_incomplete":
+      return <ClockIcon className={`${iconClass} text-blue-500`} />;
+    case "missing_config":
+      return <XCircleIcon className={`${iconClass} text-red-500`} />;
+    case "missing_manual_input":
+      return <AlertCircleIcon className={`${iconClass} text-yellow-500`} />;
+    default:
+      return <AlertCircleIcon className={iconClass} />;
+  }
+}
+
+function BlockerCard({
+  blocker,
+  stepId,
+  onResolve,
+}: {
+  blocker: Blocker;
+  stepId: string;
+  onResolve?: (blockerId: string, blockerType: BlockerType, stepId: string) => void;
+}) {
+  const handleResolve = () => {
+    if (onResolve && !blocker.resolved) {
+      onResolve(blocker.id, blocker.blockerType, stepId);
+    }
+  };
+
+  return (
+    <div
+      className={`rounded-md border p-3 ${
+        blocker.resolved ? "border-green-200 bg-green-50" : "border-amber-200 bg-amber-50"
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5">
+          {blocker.resolved ? (
+            <CheckCircle2Icon className="size-4 text-green-600" />
+          ) : (
+            <BlockerIcon blockerType={blocker.blockerType} />
+          )}
+        </div>
+        <div className="flex-1 space-y-1">
+          <div className="flex items-center justify-between">
+            <div className="text-sm font-medium">{blockerTypeLabels[blocker.blockerType]}</div>
+            <Badge variant={blocker.resolved ? "default" : "secondary"} className="text-xs">
+              {blocker.resolved ? "Resolved" : "Unresolved"}
+            </Badge>
+          </div>
+          <p className="text-muted-foreground text-xs">
+            {blocker.blockerType === "missing_manual_input" &&
+            blocker.blockerDetails.requiredFormName
+              ? `This step requires a submission from form: ${blocker.blockerDetails.requiredFormName}`
+              : blockerTypeDescriptions[blocker.blockerType]}
+          </p>
+          {blocker.resolved && blocker.resolvedAt && (
+            <p className="text-xs text-green-700">
+              Resolved at {new Date(blocker.resolvedAt).toLocaleString()}
+            </p>
+          )}
+          {/* Resolution actions for unresolved blockers */}
+          {!blocker.resolved && onResolve && (
+            <div className="mt-2">
+              {blocker.blockerType === "missing_upload" && (
+                <Button size="sm" variant="outline" onClick={handleResolve} className="h-7 text-xs">
+                  <UploadIcon className="mr-1.5 size-3" />
+                  Upload Documents
+                </Button>
+              )}
+              {blocker.blockerType === "missing_manual_input" && (
+                <Button size="sm" variant="outline" onClick={handleResolve} className="h-7 text-xs">
+                  <SettingsIcon className="mr-1.5 size-3" />
+                  Add Manual Input
+                </Button>
+              )}
+              {blocker.blockerType === "missing_config" && (
+                <Button size="sm" variant="outline" onClick={handleResolve} className="h-7 text-xs">
+                  <SettingsIcon className="mr-1.5 size-3" />
+                  Configure Step
+                </Button>
+              )}
+              {blocker.blockerType === "parent_incomplete" && (
+                <p className="text-muted-foreground text-xs italic">
+                  Waiting for parent steps to complete
+                </p>
+              )}
+            </div>
+          )}
+          {/* Show blocker details if available */}
+          {Object.keys(blocker.blockerDetails).length > 0 && (
+            <details className="text-xs">
+              <summary className="text-muted-foreground hover:text-foreground cursor-pointer">
+                Details
+              </summary>
+              <pre className="mt-1 overflow-x-auto rounded bg-white p-2 text-xs">
+                {JSON.stringify(blocker.blockerDetails, null, 2)}
+              </pre>
+            </details>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StepBlockersCard({
+  step,
+  onResolveBlocker,
+}: {
+  step: StepWithBlockers;
+  onResolveBlocker?: (blockerId: string, blockerType: BlockerType, stepId: string) => void;
+}) {
+  const statusColors = {
+    pending: "bg-gray-100 text-gray-700",
+    running: "bg-blue-100 text-blue-700",
+    completed: "bg-green-100 text-green-700",
+    failed: "bg-red-100 text-red-700",
+  };
+
+  const totalBlockers = step.blockers.length;
+  const unresolvedBlockers = step.blockers.filter((b) => !b.resolved).length;
+  const isReady = !step.hasUnresolvedBlockers && step.status === "pending";
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="space-y-1">
+            <CardTitle className="text-base">{step.stepName}</CardTitle>
+            <CardDescription className="flex items-center gap-2">
+              <Badge variant="outline" className={statusColors[step.status]}>
+                {step.status}
+              </Badge>
+              {isReady && (
+                <Badge variant="default" className="bg-green-600">
+                  <CheckCircle2Icon className="mr-1 size-3" />
+                  Ready
+                </Badge>
+              )}
+            </CardDescription>
+          </div>
+          <div className="text-right text-sm">
+            {totalBlockers > 0 ? (
+              <div className="space-y-1">
+                <div className="font-medium">
+                  {unresolvedBlockers} / {totalBlockers} blockers
+                </div>
+                <div className="text-muted-foreground text-xs">
+                  {unresolvedBlockers === 0 ? "All resolved" : "unresolved"}
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground">No blockers</div>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      {step.blockers.length > 0 && (
+        <CardContent className="space-y-2">
+          {step.blockers.map((blocker) => (
+            <BlockerCard
+              key={blocker.id}
+              blocker={blocker}
+              stepId={step.stepId}
+              onResolve={onResolveBlocker}
+            />
+          ))}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+export function BlockersPanel({ steps, onResolveBlocker }: BlockersPanelProps) {
+  const stepsWithBlockers = steps.filter((s) => s.blockers.length > 0);
+  return (
+    <div className="space-y-4">
+      {stepsWithBlockers.length > 0 ? (
+        <div className="space-y-3">
+          {stepsWithBlockers.map((step) => (
+            <StepBlockersCard key={step.id} step={step} onResolveBlocker={onResolveBlocker} />
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="text-muted-foreground py-8 text-center">
+            <CheckCircle2Icon className="mx-auto mb-3 size-12 text-green-500" />
+            <div className="text-lg font-medium">No blockers found</div>
+            <div className="text-sm">All steps are ready to execute</div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}