@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/execution-comparison/TaskComparisonTable.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { memo, useMemo, useState, useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import { WorkflowTaskStatus } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { formatDuration, formatMicroUsd } from "../format-utils";
+import type { TaskComparison, ExecutionComparison } from "./types";
+
+/** Props for {@link TaskComparisonTable}. */
+export interface TaskComparisonTableProps {
+  readonly comparison: ExecutionComparison;
+  /** When `true`, only shows tasks with differences. @default false */
+  readonly changesOnly?: boolean;
+  readonly className?: string;
+}
+
+type FilterMode = "all" | "changed" | "failed";
+
+const BIGINT_ZERO = BigInt(0);
+
+/**
+ * Per-task comparison table showing status, duration, and cost
+ * differences between two executions.
+ *
+ * Tasks are ordered by execution position. Changed tasks are
+ * highlighted with a subtle background. The divergence point
+ * (first difference) is visually marked.
+ */
+export const TaskComparisonTable = memo(function TaskComparisonTable({
+  comparison,
+  changesOnly = false,
+  className,
+}: TaskComparisonTableProps) {
+  const [filter, setFilter] = useState<FilterMode>(changesOnly ? "changed" : "all");
+
+  const filtered = useMemo(() => {
+    switch (filter) {
+      case "changed":
+        return comparison.tasks.filter((t) => t.statusChanged);
+      case "failed":
+        return comparison.tasks.filter(
+          (t) =>
+            t.baseStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED ||
+            t.compareStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED,
+        );
+      default:
+        return comparison.tasks;
+    }
+  }, [comparison.tasks, filter]);
+
+  const handleFilterChange = useCallback((mode: FilterMode) => setFilter(mode), []);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {/* Filter controls */}
+      <div className="flex items-center gap-1" role="tablist" aria-label="Task filter">
+        <FilterChip
+          label="All"
+          count={comparison.tasks.length}
+          active={filter === "all"}
+          onClick={() => handleFilterChange("all")}
+        />
+        <FilterChip
+          label="Changed"
+          count={comparison.tasks.filter((t) => t.statusChanged).length}
+          active={filter === "changed"}
+          onClick={() => handleFilterChange("changed")}
+        />
+        <FilterChip
+          label="Failed"
+          count={comparison.tasks.filter(
+            (t) =>
+              t.baseStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED ||
+              t.compareStatus === WorkflowTaskStatus.WORKFLOW_TASK_FAILED,
+          ).length}
+          active={filter === "failed"}
+          onClick={() => handleFilterChange("failed")}
+        />
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto rounded-md border border-[var(--stgm-border,#e5e5e5)]">
+        <table className="w-full text-xs" aria-label="Task comparison">
+          <thead>
+            <tr className="border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)]">
+              <th className="px-3 py-2 text-left font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                Task
+              </th>
+              <th className="px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                Base Status
+              </th>
+              <th className="px-3 py-2 text-center font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                Compare Status
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                Duration
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                Cost
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-3 py-6 text-center text-[var(--stgm-muted-foreground,#737373)]">
+                  {filter === "all" ? "No tasks to compare." : "No matching tasks."}
+                </td>
+              </tr>
+            )}
+            {filtered.map((task) => (
+              <TaskRow
+                key={task.taskName}
+                task={task}
+                isDivergencePoint={task.taskName === comparison.divergencePoint}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Unmatched tasks */}
+      {(comparison.tasksOnlyInBase.length > 0 || comparison.tasksOnlyInCompare.length > 0) && (
+        <div className="mt-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+          {comparison.tasksOnlyInBase.length > 0 && (
+            <p>Only in base: {comparison.tasksOnlyInBase.join(", ")}</p>
+          )}
+          {comparison.tasksOnlyInCompare.length > 0 && (
+            <p>Only in compare: {comparison.tasksOnlyInCompare.join(", ")}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+const TaskRow = memo(function TaskRow({
+  task,
+  isDivergencePoint,
+}: {
+  task: TaskComparison;
+  isDivergencePoint: boolean;
+}) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-[var(--stgm-border,#e5e5e5)] last:border-b-0",
+        task.statusChanged && "bg-[var(--stgm-destructive,#dc2626)]/5",
+        isDivergencePoint && "ring-1 ring-inset ring-[var(--stgm-warning,#f59e0b)]/50",
+      )}
+    >
+      <td className="px-3 py-2">
+        <div className="flex items-center gap-1.5">
+          {isDivergencePoint && (
+            <span
+              className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--stgm-warning,#f59e0b)]"
+              title="First point of divergence"
+              aria-label="Divergence point"
+            />
+          )}
+          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+            {task.taskName}
+          </span>
+        </div>
+      </td>
+      <td className="px-3 py-2 text-center">
+        <TaskStatusBadge status={task.baseStatus} />
+      </td>
+      <td className="px-3 py-2 text-center">
+        <TaskStatusBadge status={task.compareStatus} />
+      </td>
+      <td className="px-3 py-2 text-right">
+        <DurationCell task={task} />
+      </td>
+      <td className="px-3 py-2 text-right">
+        <CostCell task={task} />
+      </td>
+    </tr>
+  );
+});
+
+function TaskStatusBadge({ status }: { status: WorkflowTaskStatus }) {
+  const config = TASK_STATUS_CONFIG.get(status) ?? { label: "Unknown", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" };
+  return (
+    <span className={cn("inline-flex items-center gap-1 text-[10px] font-medium", config.colorClass)}>
+      {config.label}
+    </span>
+  );
+}
+
+function DurationCell({ task }: { task: TaskComparison }) {
+  if (task.baseDurationMs == null && task.compareDurationMs == null) return <span>—</span>;
+
+  const baseStr = task.baseDurationMs != null ? formatDuration(task.baseDurationMs) : "—";
+  const compareStr = task.compareDurationMs != null ? formatDuration(task.compareDurationMs) : "—";
+
+  if (task.durationDeltaMs == null || task.durationDeltaMs === 0) {
+    return <span className="text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
+  }
+
+  const sign = task.durationDeltaMs > 0 ? "+" : "−";
+  const abs = Math.abs(task.durationDeltaMs);
+  const deltaColor = task.durationDeltaMs > 0
+    ? "text-[var(--stgm-destructive,#dc2626)]"
+    : "text-[var(--stgm-success,#16a34a)]";
+
+  return (
+    <span className="flex flex-col items-end">
+      <span className="text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
+      <span className={cn("text-[10px]", deltaColor)}>
+        {sign}{formatDuration(abs)}
+      </span>
+    </span>
+  );
+}
+
+function CostCell({ task }: { task: TaskComparison }) {
+  if (task.baseCostMicros === BIGINT_ZERO && task.compareCostMicros === BIGINT_ZERO) {
+    return <span className="text-[var(--stgm-muted-foreground,#737373)]">—</span>;
+  }
+
+  const baseStr = task.baseCostMicros > BIGINT_ZERO ? formatMicroUsd(task.baseCostMicros) : "—";
+  const compareStr = task.compareCostMicros > BIGINT_ZERO ? formatMicroUsd(task.compareCostMicros) : "—";
+  const delta = task.baseCostMicros - task.compareCostMicros;
+
+  if (delta === BIGINT_ZERO) {
+    return <span className="text-[var(--stgm-muted-foreground,#737373)]">{baseStr}</span>;
+  }
+
+  return (
+    <span className="text-[var(--stgm-foreground,#1a1a2e)]">{baseStr} / {compareStr}</span>
+  );
+}
+
+function FilterChip({
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={cn(
+        "rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors",
+        active
+          ? "bg-[var(--stgm-foreground,#1a1a2e)] text-[var(--stgm-background,#fff)]"
+          : "bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-border,#e5e5e5)]",
+      )}
+    >
+      {label} ({count})
+    </button>
+  );
+}
+
+const TASK_STATUS_CONFIG = new Map<WorkflowTaskStatus, { label: string; colorClass: string }>([
+  [WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED, { label: "—", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_PENDING, { label: "Pending", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_IN_PROGRESS, { label: "Running", colorClass: "text-[var(--stgm-foreground,#1a1a2e)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED, { label: "Completed", colorClass: "text-[var(--stgm-success,#16a34a)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_FAILED, { label: "Failed", colorClass: "text-[var(--stgm-destructive,#dc2626)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_SKIPPED, { label: "Skipped", colorClass: "text-[var(--stgm-muted-foreground,#737373)]" }],
+  [WorkflowTaskStatus.WORKFLOW_TASK_WAITING_APPROVAL, { label: "Waiting", colorClass: "text-[var(--stgm-warning,#f59e0b)]" }],
+]);

package/src/workflow/execution-comparison/__tests__/derive-execution-comparison.test.ts

@@ -0,0 +1,308 @@
+import { describe, it, expect } from "vitest";
+import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import type { WorkflowTask } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import {
+  ExecutionPhase,
+  WorkflowTaskStatus,
+} from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { deriveExecutionComparison } from "../derive-execution-comparison";
+
+function makeTask(overrides: Partial<WorkflowTask>): WorkflowTask {
+  return {
+    taskId: "",
+    taskName: "",
+    taskType: 0,
+    status: WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED,
+    startedAt: "",
+    completedAt: "",
+    error: "",
+    artifactIds: [],
+    costMicros: BigInt(0),
+    inputTokens: BigInt(0),
+    outputTokens: BigInt(0),
+    $typeName: "ai.stigmer.agentic.workflowexecution.v1.WorkflowTask",
+    $unknown: undefined,
+    ...overrides,
+  } as unknown as WorkflowTask;
+}
+
+function makeExecution(overrides: {
+  id?: string;
+  phase?: ExecutionPhase;
+  startedAt?: string;
+  completedAt?: string;
+  tasks?: WorkflowTask[];
+  totalCostMicros?: bigint | number;
+  totalInputTokens?: bigint | number;
+  totalOutputTokens?: bigint | number;
+  error?: string;
+}): WorkflowExecution {
+  return {
+    apiVersion: "agentic.stigmer.ai/v1",
+    kind: "WorkflowExecution",
+    metadata: {
+      id: overrides.id ?? "exec-1",
+      name: overrides.id ?? "exec-1",
+      slug: overrides.id ?? "exec-1",
+      $typeName: "ai.stigmer.commons.v1.ApiResourceMetadata",
+    },
+    spec: {
+      $typeName: "ai.stigmer.agentic.workflowexecution.v1.WorkflowExecutionSpec",
+    },
+    status: {
+      phase: overrides.phase ?? ExecutionPhase.EXECUTION_COMPLETED,
+      tasks: overrides.tasks ?? [],
+      startedAt: overrides.startedAt ?? "2026-05-24T10:00:00Z",
+      completedAt: overrides.completedAt ?? "2026-05-24T10:01:00Z",
+      totalCostMicros: BigInt(overrides.totalCostMicros ?? 0),
+      totalInputTokens: BigInt(overrides.totalInputTokens ?? 0),
+      totalOutputTokens: BigInt(overrides.totalOutputTokens ?? 0),
+      error: overrides.error ?? "",
+      $typeName: "ai.stigmer.agentic.workflowexecution.v1.WorkflowExecutionStatus",
+    },
+    $typeName: "ai.stigmer.agentic.workflowexecution.v1.WorkflowExecution",
+    $unknown: undefined,
+  } as unknown as WorkflowExecution;
+}
+
+describe("deriveExecutionComparison", () => {
+  it("returns zero deltas for identical successful runs", () => {
+    const tasks = [
+      makeTask({
+        taskName: "step_a",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:30Z",
+        costMicros: BigInt(500),
+        inputTokens: BigInt(100),
+        outputTokens: BigInt(200),
+      }),
+      makeTask({
+        taskName: "step_b",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:30Z",
+        completedAt: "2026-05-24T10:01:00Z",
+        costMicros: BigInt(300),
+      }),
+    ];
+
+    const base = makeExecution({ id: "exec-base", tasks, totalCostMicros: 800 });
+    const compare = makeExecution({ id: "exec-compare", tasks, totalCostMicros: 800 });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.durationDeltaMs).toBe(0);
+    expect(result.costDeltaMicros).toBe(BigInt(0));
+    expect(result.tokensDelta).toBe(BigInt(0));
+    expect(result.divergencePoint).toBeNull();
+    expect(result.tasks).toHaveLength(2);
+    expect(result.tasksOnlyInBase).toHaveLength(0);
+    expect(result.tasksOnlyInCompare).toHaveLength(0);
+
+    for (const task of result.tasks) {
+      expect(task.statusChanged).toBe(false);
+      expect(task.durationDeltaMs).toBe(0);
+    }
+  });
+
+  it("identifies divergence point when a task fails in base but succeeds in compare", () => {
+    const baseTasks = [
+      makeTask({
+        taskName: "fetch_data",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:10Z",
+      }),
+      makeTask({
+        taskName: "process_data",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_FAILED,
+        startedAt: "2026-05-24T10:00:10Z",
+        completedAt: "2026-05-24T10:00:15Z",
+        error: "NullPointerException at line 42",
+      }),
+      makeTask({
+        taskName: "send_result",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_STATUS_UNSPECIFIED,
+      }),
+    ];
+
+    const compareTasks = [
+      makeTask({
+        taskName: "fetch_data",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:10Z",
+      }),
+      makeTask({
+        taskName: "process_data",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:10Z",
+        completedAt: "2026-05-24T10:00:20Z",
+      }),
+      makeTask({
+        taskName: "send_result",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:20Z",
+        completedAt: "2026-05-24T10:00:25Z",
+      }),
+    ];
+
+    const base = makeExecution({
+      id: "failed-run",
+      phase: ExecutionPhase.EXECUTION_FAILED,
+      tasks: baseTasks,
+      completedAt: "2026-05-24T10:00:15Z",
+    });
+    const compare = makeExecution({
+      id: "successful-run",
+      tasks: compareTasks,
+      completedAt: "2026-05-24T10:00:25Z",
+    });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.divergencePoint).toBe("process_data");
+    expect(result.tasks[0].statusChanged).toBe(false);
+    expect(result.tasks[1].statusChanged).toBe(true);
+    expect(result.tasks[1].baseError).toBe("NullPointerException at line 42");
+    expect(result.tasks[1].compareError).toBeNull();
+  });
+
+  it("handles workflow version drift with unmatched tasks", () => {
+    const baseTasks = [
+      makeTask({ taskName: "old_step", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "shared_step", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+    ];
+    const compareTasks = [
+      makeTask({ taskName: "shared_step", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "new_step", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+    ];
+
+    const base = makeExecution({ id: "v1-run", tasks: baseTasks });
+    const compare = makeExecution({ id: "v2-run", tasks: compareTasks });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.tasksOnlyInBase).toEqual(["old_step"]);
+    expect(result.tasksOnlyInCompare).toEqual(["new_step"]);
+    expect(result.tasks).toHaveLength(1);
+    expect(result.tasks[0].taskName).toBe("shared_step");
+  });
+
+  it("computes duration and cost deltas correctly", () => {
+    const baseTasks = [
+      makeTask({
+        taskName: "slow_task",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:45Z",
+        costMicros: BigInt(1200),
+        inputTokens: BigInt(500),
+        outputTokens: BigInt(800),
+      }),
+    ];
+    const compareTasks = [
+      makeTask({
+        taskName: "slow_task",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:20Z",
+        costMicros: BigInt(600),
+        inputTokens: BigInt(300),
+        outputTokens: BigInt(400),
+      }),
+    ];
+
+    const base = makeExecution({
+      id: "slow",
+      tasks: baseTasks,
+      totalCostMicros: 1200,
+      totalInputTokens: 500,
+      totalOutputTokens: 800,
+      completedAt: "2026-05-24T10:00:45Z",
+    });
+    const compare = makeExecution({
+      id: "fast",
+      tasks: compareTasks,
+      totalCostMicros: 600,
+      totalInputTokens: 300,
+      totalOutputTokens: 400,
+      completedAt: "2026-05-24T10:00:20Z",
+    });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.tasks[0].durationDeltaMs).toBe(25000);
+    expect(result.tasks[0].baseCostMicros).toBe(BigInt(1200));
+    expect(result.tasks[0].compareCostMicros).toBe(BigInt(600));
+    expect(result.tasks[0].baseTokens).toBe(BigInt(1300));
+    expect(result.tasks[0].compareTokens).toBe(BigInt(700));
+    expect(result.durationDeltaMs).toBe(25000);
+    expect(result.costDeltaMicros).toBe(BigInt(600));
+    expect(result.tokensDelta).toBe(BigInt(600));
+  });
+
+  it("handles null durations gracefully", () => {
+    const baseTasks = [
+      makeTask({
+        taskName: "incomplete",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_IN_PROGRESS,
+        startedAt: "2026-05-24T10:00:00Z",
+      }),
+    ];
+    const compareTasks = [
+      makeTask({
+        taskName: "incomplete",
+        status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED,
+        startedAt: "2026-05-24T10:00:00Z",
+        completedAt: "2026-05-24T10:00:30Z",
+      }),
+    ];
+
+    const base = makeExecution({
+      id: "in-progress",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      tasks: baseTasks,
+      completedAt: "",
+    });
+    const compare = makeExecution({ id: "done", tasks: compareTasks });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.tasks[0].baseDurationMs).toBeNull();
+    expect(result.tasks[0].compareDurationMs).toBe(30000);
+    expect(result.tasks[0].durationDeltaMs).toBeNull();
+  });
+
+  it("handles empty task lists", () => {
+    const base = makeExecution({ id: "empty-1", tasks: [] });
+    const compare = makeExecution({ id: "empty-2", tasks: [] });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.tasks).toHaveLength(0);
+    expect(result.tasksOnlyInBase).toHaveLength(0);
+    expect(result.tasksOnlyInCompare).toHaveLength(0);
+    expect(result.divergencePoint).toBeNull();
+  });
+
+  it("preserves execution order from base run", () => {
+    const baseTasks = [
+      makeTask({ taskName: "first", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "second", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "third", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+    ];
+    const compareTasks = [
+      makeTask({ taskName: "third", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "first", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+      makeTask({ taskName: "second", status: WorkflowTaskStatus.WORKFLOW_TASK_COMPLETED }),
+    ];
+
+    const base = makeExecution({ id: "ordered", tasks: baseTasks });
+    const compare = makeExecution({ id: "reordered", tasks: compareTasks });
+
+    const result = deriveExecutionComparison(base, compare);
+
+    expect(result.tasks.map((t) => t.taskName)).toEqual(["first", "second", "third"]);
+  });
+});