@polpo-ai/dashboard 0.1.0

package/app/(dashboard)/projects/[id]/missions/view.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import { RefreshCw, X, ListFilter, Search } from "lucide-react";
+// Use SDK-bundled types so we're aligned with what `polpo.getMissions()` returns.
+// `@polpo-ai/core` and `@polpo-ai/sdk` types should match but the SDK 0.7.9
+// build ships a degraded copy (e.g. NotificationRule.condition: unknown vs
+// NotificationCondition). Track in OSS issue: SDK should re-export from core.
+import type { Mission } from "@polpo-ai/sdk";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { Button } from "#/components/ui/button";
+import { Badge } from "#/components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger } from "#/components/ui/popover";
+import {
+  Command, CommandInput, CommandList, CommandEmpty,
+  CommandGroup, CommandItem,
+} from "#/components/ui/command";
+
+const ALL_STATUSES = [
+  "draft", "scheduled", "recurring", "active", "paused", "completed", "failed", "cancelled",
+] as const;
+
+const statusColor: Record<string, string> = {
+  completed: "bg-brand",
+  active: "bg-foreground animate-pulse",
+  scheduled: "bg-blue-500/50",
+  recurring: "bg-blue-500",
+  failed: "bg-destructive",
+  paused: "bg-yellow-500",
+  cancelled: "bg-muted-foreground/30",
+  draft: "bg-muted-foreground/20",
+};
+
+const LIVE_STATUSES = new Set(["active", "paused"]);
+
+function getMissionType(m: Mission): string {
+  if (m.status === "recurring" || (m.schedule && /^[\d*\/,-]+\s/.test(m.schedule))) return "recurring";
+  if (m.schedule) return "one-shot";
+  return "on-demand";
+}
+
+const typeBadge: Record<string, { label: string; className: string }> = {
+  recurring: { label: "Recurring", className: "bg-blue-500/10 text-blue-400" },
+  "one-shot": { label: "One-shot", className: "bg-amber-500/10 text-amber-400" },
+  "on-demand": { label: "On-demand", className: "bg-muted-foreground/10 text-muted-foreground" },
+};
+
+function timeAgo(date?: string) {
+  if (!date) return "\u2014";
+  const diff = Date.now() - new Date(date).getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 60) return `${min}m ago`;
+  const hours = Math.floor(min / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+export default function MissionsView({ initialMissions }: { initialMissions: Mission[] }) {
+  const { id } = useParams<{ id: string }>();
+  const [filterStatus, setFilterStatus] = useState<string | null>(null);
+  const [filterType, setFilterType] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [statusOpen, setStatusOpen] = useState(false);
+
+  const polpo = usePolpoClient(id);
+  const { data: missions = [], isFetching, refetch } = useQuery({
+    queryKey: ["missions", id],
+    queryFn: () => polpo.getMissions(),
+    initialData: initialMissions,
+    refetchInterval: (query) => {
+      const rows = query.state.data ?? [];
+      return rows.some((mission) => LIVE_STATUSES.has(mission.status)) ? 5000 : false;
+    },
+  });
+
+  const activeStatuses = useMemo(
+    () => [...new Set(missions.map(m => m.status).filter(Boolean))].sort(
+      (a, b) => ALL_STATUSES.indexOf(a as typeof ALL_STATUSES[number]) - ALL_STATUSES.indexOf(b as typeof ALL_STATUSES[number])
+    ),
+    [missions]
+  );
+
+  const filtered = useMemo(() => {
+    let result = missions;
+    if (filterStatus) result = result.filter(m => m.status === filterStatus);
+    if (filterType) result = result.filter(m => getMissionType(m) === filterType);
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(m =>
+        m.name?.toLowerCase().includes(q) || m.prompt?.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [missions, filterStatus, filterType, search]);
+
+  const hasFilters = filterStatus !== null || filterType !== null || search !== "";
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold tracking-tight">Missions</h2>
+          <p className="mt-1 text-xs text-muted-foreground">{missions.length} total</p>
+        </div>
+        <button
+          onClick={() => refetch()}
+          disabled={isFetching}
+          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`h-3 w-3 ${isFetching ? "animate-spin" : ""}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Filters */}
+      {missions.length > 0 && (
+        <div className="mt-3 flex items-center gap-2 flex-wrap">
+          {/* Type tabs */}
+          <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-1">
+            {(["all", "recurring", "one-shot", "on-demand"] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() => setFilterType(t === "all" ? null : t)}
+                className={`rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+                  (t === "all" && !filterType) || filterType === t
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {t === "all" ? "All" : t === "one-shot" ? "One-shot" : t === "on-demand" ? "On-demand" : "Recurring"}
+              </button>
+            ))}
+          </div>
+
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search missions..."
+              className="h-8 w-48 rounded-md border border-border bg-transparent pl-8 pr-3 text-xs focus:border-foreground/30 focus:outline-none transition-colors"
+            />
+          </div>
+
+          {/* Status filter */}
+          <Popover open={statusOpen} onOpenChange={setStatusOpen}>
+            <PopoverTrigger
+              render={
+                <Button variant="outline" size="sm">
+                  <ListFilter className="h-3 w-3" />
+                  {filterStatus ? (
+                    <>
+                      Status: <Badge variant="secondary" className="ml-1 font-normal">{filterStatus}</Badge>
+                    </>
+                  ) : (
+                    "Status"
+                  )}
+                </Button>
+              }
+            />
+            <PopoverContent className="w-52 p-0" align="start">
+              <Command>
+                <CommandInput placeholder="Search status..." />
+                <CommandList>
+                  <CommandEmpty>No status found.</CommandEmpty>
+                  <CommandGroup>
+                    {activeStatuses.map(s => (
+                      <CommandItem
+                        key={s}
+                        value={s}
+                        data-checked={filterStatus === s || undefined}
+                        onSelect={() => {
+                          setFilterStatus(filterStatus === s ? null : s);
+                          setStatusOpen(false);
+                        }}
+                      >
+                        <span className={`h-2 w-2 rounded-full shrink-0 ${statusColor[s]}`} />
+                        {s}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          {/* Clear */}
+          {hasFilters && (
+            <>
+              <span className="text-xs text-muted-foreground">
+                {filtered.length} of {missions.length}
+              </span>
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => { setFilterStatus(null); setFilterType(null); setSearch(""); }}
+              >
+                <X className="h-3 w-3" />
+                Clear
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Table */}
+      {filtered.length > 0 ? (
+        <div className="mt-4 border border-border overflow-hidden overflow-x-auto">
+          <table className="w-full text-sm min-w-[700px]">
+            <thead>
+              <tr className="border-b border-border bg-secondary/50">
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-24">Status</th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Mission</th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-24">Type</th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-24">Schedule</th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-16">Runs</th>
+                <th className="px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-20">Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((mission) => {
+                const type = getMissionType(mission);
+                const badge = typeBadge[type];
+                return (
+                  <tr key={mission.id} className="border-b border-border last:border-0">
+                    <td colSpan={6} className="p-0">
+                      <Link
+                        href={`/projects/${id}/missions/${mission.id}`}
+                        className="flex items-center hover:bg-secondary/30 transition-colors"
+                      >
+                        <span className="px-4 py-3 w-24">
+                          <span className="inline-flex items-center gap-1.5">
+                            <span className={`h-2 w-2 rounded-full ${statusColor[mission.status ?? "draft"]}`} />
+                            <span className="text-xs text-muted-foreground">{mission.status}</span>
+                          </span>
+                        </span>
+                        <span className="px-4 py-3 flex-1">
+                          <span className="font-mono text-xs font-medium block">{mission.name}</span>
+                          {mission.prompt && (
+                            <span className="mt-0.5 text-[11px] text-muted-foreground/60 truncate max-w-xs block">{mission.prompt}</span>
+                          )}
+                        </span>
+                        <span className="px-4 py-3 w-24">
+                          <span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${badge.className}`}>
+                            {badge.label}
+                          </span>
+                        </span>
+                        <span className="px-4 py-3 w-24 font-mono text-xs text-muted-foreground">
+                          {mission.schedule ?? "\u2014"}
+                        </span>
+                        <span className="px-4 py-3 w-16 text-xs text-muted-foreground">
+                          {mission.executionCount ?? 0}
+                        </span>
+                        <span className="px-4 py-3 w-20 text-right text-xs text-muted-foreground">
+                          {timeAgo(mission.updatedAt)}
+                        </span>
+                      </Link>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : missions.length > 0 ? (
+        <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+          No missions match the current filters.
+        </div>
+      ) : (
+        <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+          No missions yet.
+        </div>
+      )}
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/onboarding-checklist.tsx

@@ -0,0 +1,359 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Check, Copy, MessageSquare, BookMarked, Brain, ListChecks, Rocket } from "lucide-react";
+import { CopyCard } from "#/components/dashboard/copy-card";
+import { SdkSnippetPanel } from "#/components/dashboard/sdk-snippet-panel";
+import { TabToggle } from "#/components/dashboard/tab-toggle";
+
+export interface ChecklistStep {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  icon: React.ReactNode;
+  detail?: React.ReactNode;
+}
+
+interface Props {
+  steps: ChecklistStep[];
+  projectId: string;
+}
+
+// Per-project localStorage key — skip is scoped to this project so a
+// fresh project still shows the checklist for first-time setup.
+const skipKey = (projectId: string) => `polpo:next-steps-skipped:${projectId}`;
+
+function PromptBlock({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div className="space-y-2">
+      <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Ask your coding agent</p>
+      <div className="flex flex-col gap-2 border border-border bg-background p-3">
+        <span className="inline-flex h-5 w-fit items-center rounded bg-secondary px-2 text-[11px] font-medium text-muted-foreground">
+          prompt
+        </span>
+        <p className="text-sm text-foreground leading-relaxed">{value}</p>
+      </div>
+      <button
+        type="button"
+        onClick={async () => {
+          await navigator.clipboard.writeText(value);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        }}
+        className="flex items-center gap-1.5 border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-secondary transition-colors"
+      >
+        {copied ? <Check className="h-3.5 w-3.5 text-brand" /> : <Copy className="h-3.5 w-3.5" />}
+        {copied ? "Copied" : "Copy prompt"}
+      </button>
+    </div>
+  );
+}
+
+function SkillStepDetail({ endpoint, agent }: { endpoint: string; agent: string }) {
+  const [tab, setTab] = useState<"github" | "create">("github");
+
+  const prompts = {
+    github: `Use Polpo skills and install the "frontend-design" skill from anthropics/skills on GitHub for my agent "${agent}". Assign it in agents.json and deploy.`,
+    create: `Use Polpo skills and create a custom skill for my agent "${agent}" about REST API best practices: proper HTTP status codes, pagination patterns, error response format, and versioning conventions. Save it in .polpo/skills/, assign it, and deploy.`,
+  };
+
+  return (
+    <div className="space-y-4">
+      <TabToggle
+        value={tab}
+        onChange={setTab}
+        options={[
+          { value: "github", label: "From GitHub" },
+          { value: "create", label: "Custom skill" },
+        ]}
+      />
+
+      <PromptBlock value={prompts[tab]} />
+
+      <div className="space-y-2">
+        <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Or via API</p>
+
+        {tab === "github" && (
+          <div className="space-y-3">
+            <p className="text-xs text-muted-foreground">
+              Install from any GitHub repository. Compatible with the{" "}
+              <a href="https://skills.sh" target="_blank" rel="noopener noreferrer" className="text-foreground hover:underline underline-offset-4">skills.sh</a>{" "}
+              format.
+            </p>
+            <CopyCard
+              label="curl"
+              lang="curl"
+              value={`curl -X POST ${endpoint}/v1/skills/add \\\n  -H "Authorization: Bearer $POLPO_API_KEY" \\\n  -H "Content-Type: application/json" \\\n  -d '{"source": "anthropics/skills", "skillNames": ["frontend-design"]}'`}
+            />
+            <a
+              href="https://skills.sh"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-xs font-medium text-foreground hover:underline underline-offset-4"
+            >
+              Browse skills on skills.sh →
+            </a>
+          </div>
+        )}
+
+        {tab === "create" && (
+          <div className="space-y-3">
+            <CopyCard
+              label=".polpo/skills/my-skill/SKILL.md"
+              value={`---\nname: my-skill\ndescription: Domain knowledge for my project\n---\n\n# My Skill\n\nAdd your domain knowledge, conventions, and instructions here.`}
+            />
+            <CopyCard label="agents.json" value={`"skills": ["my-skill"]`} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function deriveChecklistSteps({
+  hasSession,
+  hasSkill,
+  hasMemory,
+  hasTask,
+  hasDeployed,
+  projectSlug,
+  projectId,
+  apiUrl,
+  agentName,
+  agentNames,
+  agentConfigs,
+}: {
+  hasSession: boolean;
+  hasSkill: boolean;
+  hasMemory: boolean;
+  hasTask: boolean;
+  hasDeployed: boolean;
+  projectSlug?: string;
+  projectId?: string;
+  apiUrl?: string;
+  agentName?: string;
+  agentNames?: string[] | null;
+  agentConfigs?: import("@polpo-ai/core").AgentConfig[];
+}): ChecklistStep[] {
+  const endpoint = projectSlug
+    ? `https://${projectSlug}.polpo.cloud`
+    : "https://{slug}.polpo.cloud";
+  const agent = agentName ?? "assistant";
+
+  return [
+    {
+      id: "chat",
+      title: "Chat with your agent",
+      description: "Send your first message",
+      completed: hasSession,
+      icon: <MessageSquare className="h-4 w-4" />,
+      detail: (
+        <SdkSnippetPanel
+          baseUrl={endpoint}
+          agents={agentNames ?? null}
+          agentConfigs={agentConfigs}
+          defaultAgent={agent}
+          projectId={projectId}
+          apiUrl={apiUrl}
+        />
+      ),
+    },
+    {
+      id: "skill",
+      title: "Add skill to your agent",
+      description: "Teach your agent domain knowledge",
+      completed: hasSkill,
+      icon: <BookMarked className="h-4 w-4" />,
+      detail: <SkillStepDetail endpoint={endpoint} agent={agent} />,
+    },
+    {
+      id: "memory",
+      title: "Set agent memory",
+      description: "Persistent context across sessions",
+      completed: hasMemory,
+      icon: <Brain className="h-4 w-4" />,
+      detail: (
+        <div className="space-y-4">
+          <PromptBlock value={`Save a memory for my agent "${agent}": remember that I prefer concise code examples and that my stack is Next.js + TypeScript. Then ask the agent what it remembers about me.`} />
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Or via API</p>
+            <CopyCard
+              label="curl"
+              lang="curl"
+              value={`curl -X PUT ${endpoint}/v1/memory/agent/${encodeURIComponent(agent)} \\\n  -H "Authorization: Bearer $POLPO_API_KEY" \\\n  -H "Content-Type: application/json" \\\n  -d '{"content": "I prefer concise code examples. My stack is Next.js + TypeScript."}'`}
+            />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "task",
+      title: "Create a task",
+      description: "Assign autonomous work to an agent",
+      completed: hasTask,
+      icon: <ListChecks className="h-4 w-4" />,
+      detail: (
+        <div className="space-y-4">
+          <PromptBlock value={`Use Polpo skills and create a task for my agent "${agent}" to write a hello.txt file with a greeting message. The agent should complete this autonomously.`} />
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Or via API</p>
+            <CopyCard
+              label="curl"
+              lang="curl"
+              value={`curl -X POST ${endpoint}/v1/tasks \\\n  -H "Authorization: Bearer $POLPO_API_KEY" \\\n  -H "Content-Type: application/json" \\\n  -d '{\n    "title": "Create hello.txt",\n    "description": "Write a hello.txt file with a greeting message",\n    "assignTo": "${agent}"\n  }'`}
+            />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "deploy",
+      title: "Deploy from your codebase",
+      description: "Push local config to cloud",
+      completed: hasDeployed,
+      icon: <Rocket className="h-4 w-4" />,
+      detail: (
+        <div className="space-y-4">
+          <PromptBlock value={`Use Polpo skills and deploy my project to the cloud. Run polpo deploy from the terminal.`} />
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Or via CLI</p>
+            <CopyCard label="terminal" value="polpo deploy" />
+            <p className="text-[11px] text-muted-foreground/60">
+              Syncs agents, teams, skills, memory, missions, and playbooks.
+            </p>
+          </div>
+        </div>
+      ),
+    },
+  ];
+}
+
+/** Detect deploy: any agent with updatedAt different from createdAt means a PUT happened (deploy pushes updates) */
+export function hasDeployedCheck(agents: Array<{ createdAt?: string; updatedAt?: string }>): boolean {
+  for (const agent of agents) {
+    if (agent.updatedAt && agent.createdAt && agent.updatedAt !== agent.createdAt) return true;
+  }
+  return false;
+}
+
+
+export default function OnboardingChecklist({ steps, projectId }: Props) {
+  const firstIncomplete = steps.find((s) => !s.completed);
+  const [selectedId, setSelectedId] = useState<string>(firstIncomplete?.id ?? steps[0]?.id ?? "");
+  const [dismissed, setDismissed] = useState(false);
+
+  // Honour the persistent skip on mount. Render null while the
+  // effect resolves to avoid a flash before the localStorage check.
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined" && localStorage.getItem(skipKey(projectId))) {
+      setDismissed(true);
+    }
+    setHydrated(true);
+  }, [projectId]);
+
+  function handleSkipForever() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(skipKey(projectId), "1");
+    }
+    setDismissed(true);
+  }
+
+  const completedCount = steps.filter((s) => s.completed).length;
+  const selected = steps.find((s) => s.id === selectedId);
+
+  if (!hydrated || dismissed) return null;
+
+  return (
+    <div className="border border-border bg-card">
+      {/* Banner header — inside the card, same feel as Get Started */}
+      <div className="flex items-center justify-between p-6 pb-4">
+        <div>
+          <h2 className="text-2xl tracking-tight text-foreground">Next Steps</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Complete these steps to get the most out of Polpo.
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-[11px] font-mono text-muted-foreground">
+            {completedCount}/{steps.length}
+          </span>
+          <div className="w-20 h-1 bg-secondary overflow-hidden">
+            <div
+              className="h-full bg-brand transition-all duration-500"
+              style={{ width: `${(completedCount / steps.length) * 100}%` }}
+            />
+          </div>
+          <button
+            type="button"
+            onClick={handleSkipForever}
+            data-testid="next-steps-skip-forever"
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Skip
+          </button>
+        </div>
+      </div>
+
+      {/* Two-column: steps left, detail right */}
+      <div className="flex">
+        {/* Left: step list */}
+        <div className="w-[280px] shrink-0">
+          {steps.map((step) => {
+            const isSelected = step.id === selectedId;
+            return (
+              <button
+                key={step.id}
+                onClick={() => setSelectedId(step.id)}
+                className={`w-full flex items-center gap-3 px-6 py-4 text-left border-b border-border last:border-0 transition-colors ${
+                  isSelected
+                    ? "bg-secondary/50"
+                    : "hover:bg-secondary/20"
+                } ${step.completed ? "opacity-50" : ""}`}
+              >
+                <div className="flex-shrink-0">
+                  {step.completed ? (
+                    <div className="flex h-5 w-5 items-center justify-center bg-brand/15">
+                      <Check className="h-3 w-3 text-brand" />
+                    </div>
+                  ) : (
+                    <div className={`h-2 w-2 rounded-full ${
+                      isSelected ? "bg-foreground" : "bg-muted-foreground/30"
+                    }`} />
+                  )}
+                </div>
+                <div className="min-w-0">
+                  <p className={`text-sm ${
+                    step.completed
+                      ? "text-muted-foreground line-through"
+                      : isSelected
+                        ? "text-foreground font-medium"
+                        : "text-muted-foreground"
+                  }`}>
+                    {step.title}
+                  </p>
+                  <p className="text-[11px] text-muted-foreground/60 mt-0.5">
+                    {step.description}
+                  </p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Right: detail panel — always shares bg with selected step for continuity */}
+        <div className={`flex-1 p-6 transition-colors ${
+          selected ? "bg-secondary/50" : ""
+        }`}>
+          {selected?.detail ?? (
+            <p className="text-sm text-muted-foreground">
+              Select a step to see instructions.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}