showpane 0.4.0 → 0.4.2

package/bundle/toolchain/skills/shared/preamble.md

@@ -0,0 +1,137 @@
+# Showpane Skill Preamble
+
+Before executing any skill, run the following setup in a Bash tool call:
+
+```bash
+# --- Showpane Preamble ---
+
+# 1. Read config (env vars override config.json)
+SHOWPANE_CONFIG="${HOME}/.showpane/config.json"
+if [ -f "$SHOWPANE_CONFIG" ]; then
+  _cfg_app_path=$(python3 -c "import json; d=json.load(open('$SHOWPANE_CONFIG')); print(d.get('app_path',''))" 2>/dev/null || true)
+  _cfg_deploy_mode=$(python3 -c "import json; d=json.load(open('$SHOWPANE_CONFIG')); print(d.get('deploy_mode',''))" 2>/dev/null || true)
+  _cfg_org_slug=$(python3 -c "import json; d=json.load(open('$SHOWPANE_CONFIG')); print(d.get('orgSlug','') or d.get('org_slug',''))" 2>/dev/null || true)
+fi
+
+export APP_PATH="${SHOWPANE_APP_PATH:-${_cfg_app_path:-}}"
+export DEPLOY_MODE="${_cfg_deploy_mode:-local}"
+export ORG_SLUG="${_cfg_org_slug:-}"
+
+if [ -z "$APP_PATH" ]; then
+  echo "ERROR: APP_PATH not set. Run: showpane-config set app_path /path/to/showpane-project" >&2
+  exit 1
+fi
+
+# 2. Source app .env
+if [ -f "$APP_PATH/.env" ]; then
+  set -a && source "$APP_PATH/.env" && set +a
+fi
+
+# Allow DATABASE_URL env override
+export DATABASE_URL="${DATABASE_URL:-}"
+
+# 3. Verify app installed
+if [ ! -d "$APP_PATH/node_modules/.prisma" ]; then
+  echo "ERROR: Prisma client not generated. Run: cd $APP_PATH && npm install && npx prisma generate" >&2
+  exit 1
+fi
+
+# 4. Version check
+SKILL_DIR="${SHOWPANE_TOOLCHAIN_DIR:-$HOME/.showpane/current}"
+SKILL_VERSION=$(head -1 "$SKILL_DIR/skills/VERSION" 2>/dev/null | cut -d' ' -f1 || echo "unknown")
+APP_VERSION=$(head -1 "$APP_PATH/VERSION" 2>/dev/null || echo "unknown")
+APP_REQUIRED=$(head -1 "$SKILL_DIR/skills/VERSION" 2>/dev/null | grep -oP '(?<=app >= )\S+' || echo "unknown")
+
+if [ "$APP_VERSION" != "unknown" ] && [ "$APP_REQUIRED" != "unknown" ]; then
+  if [ "$(printf '%s\n' "$APP_REQUIRED" "$APP_VERSION" | sort -V | head -1)" != "$APP_REQUIRED" ]; then
+    echo "WARNING: App version $APP_VERSION may not meet skills requirement (>= $APP_REQUIRED)" >&2
+  fi
+fi
+
+# 5. Load learnings count
+LEARNINGS_FILE="${HOME}/.showpane/learnings.jsonl"
+LEARNINGS_COUNT=0
+if [ -f "$LEARNINGS_FILE" ]; then
+  LEARNINGS_COUNT=$(wc -l < "$LEARNINGS_FILE" | tr -d ' ')
+fi
+
+# 5b. Predictive next-skill suggestion
+if [ -f "$HOME/.showpane/timeline.jsonl" ]; then
+  _RECENT=$(grep '"event":"completed"' "$HOME/.showpane/timeline.jsonl" 2>/dev/null | tail -3 | grep -o '"skill":"[^"]*"' | sed 's/"skill":"//;s/"//' | tr '\n' ',' | sed 's/,$//')
+  [ -n "$_RECENT" ] && echo "RECENT_SKILLS: $_RECENT"
+fi
+
+# 5c. Search relevant learnings
+LEARN_FILE="$HOME/.showpane/learnings.jsonl"
+if [ -f "$LEARN_FILE" ]; then
+  _LEARN_COUNT=$(wc -l < "$LEARN_FILE" 2>/dev/null | tr -d ' ')
+  echo "LEARNINGS: $_LEARN_COUNT entries"
+  if [ "$_LEARN_COUNT" -gt 0 ] 2>/dev/null; then
+    echo "RECENT_LEARNINGS:"
+    tail -5 "$LEARN_FILE" 2>/dev/null
+  fi
+fi
+
+# 5d. Checkpoint: save/resume state
+SHOWPANE_CHECKPOINTS="$HOME/.showpane/checkpoints"
+mkdir -p "$SHOWPANE_CHECKPOINTS"
+
+save_checkpoint() {
+  local skill="$1" step="$2" data="$3"
+  echo '{"skill":"'"$skill"'","step":"'"$step"'","data":'"$data"',"ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}' > "$SHOWPANE_CHECKPOINTS/${skill}.json"
+}
+
+load_checkpoint() {
+  local skill="$1"
+  local cp="$SHOWPANE_CHECKPOINTS/${skill}.json"
+  if [ -f "$cp" ]; then
+    cat "$cp"
+  fi
+}
+
+clear_checkpoint() {
+  local skill="$1"
+  rm -f "$SHOWPANE_CHECKPOINTS/${skill}.json"
+}
+
+# 6. Load telemetry setting
+TELEMETRY=$(python3 -c "import json; d=json.load(open('$SHOWPANE_CONFIG')); print(d.get('telemetry','off'))" 2>/dev/null || echo "off")
+
+# 7. Print status
+echo "SHOWPANE_VERSION: $SKILL_VERSION"
+echo "DEPLOY_MODE: $DEPLOY_MODE"
+echo "APP_PATH: $APP_PATH"
+echo "LEARNINGS: $LEARNINGS_COUNT entries"
+
+# --- End Preamble ---
+```
+
+If RECENT_SKILLS is shown, suggest the likely next skill:
+- After portal-create → suggest /portal-preview
+- After portal-preview → suggest /portal-deploy or /portal-share
+- After portal-deploy → suggest /portal-status or /portal-verify
+- After portal-setup → suggest /portal-create
+- After portal-credentials → suggest /portal-share
+- After portal-update → suggest /portal-deploy
+
+If RECENT_LEARNINGS is shown, review them before proceeding. Past learnings may contain
+relevant warnings or tips for this operation. Apply them where relevant but don't
+mention them unless they directly affect the current task.
+
+If `skills/shared/platform-constraints.md` exists, read it once near the start of the skill
+and apply only the constraints relevant to the current request. Mention them only when the
+user is about to do something unsupported or limited.
+
+## Checkpoint/Resume
+
+Skills can save progress with `save_checkpoint "skill-name" "step-name" '{"key":"value"}'`.
+On restart, `load_checkpoint "skill-name"` returns the saved state.
+After successful completion, `clear_checkpoint "skill-name"` cleans up.
+
+If a checkpoint exists when a skill starts, offer to resume:
+"Found a checkpoint from [timestamp]. Resume from step [step-name]?"
+
+All bin/ scripts run via:
+```bash
+cd "$APP_PATH" && NODE_PATH="$APP_PATH/node_modules" npx tsx --tsconfig "$APP_PATH/tsconfig.json" "$SKILL_DIR/bin/script.ts" [args]
+```

package/bundle/toolchain/templates/consulting/consulting-client.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+/**
+ * TEMPLATE: Consulting Engagement Portal
+ *
+ * Use for ongoing consulting/advisory engagements.
+ * Structure: Project Overview → Deliverables & Timeline → Documents → Meetings
+ *
+ * This file is READ by Claude Code as a reference, not used directly.
+ */
+
+import { type ReactNode } from "react";
+import {
+  CalendarDays,
+  CheckCircle2,
+  ChevronDown,
+  Clock,
+  Download,
+  FileText,
+  LayoutDashboard,
+  ListChecks,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { PortalShell } from "@/components/portal-shell";
+
+// ─── Tab 1: Project Overview ──────────────────────────────────
+// High-level summary: what the engagement covers, current phase,
+// key contacts, and engagement terms.
+function ProjectOverviewTab() {
+  return (
+    <>
+      <div className="mb-6 rounded-2xl border bg-white p-5 shadow-sm sm:p-6">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-bold tracking-tight text-gray-900">
+            Engagement summary
+          </h3>
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-green-50 px-2 py-0.5 text-[11px] font-medium text-green-700">
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400" />
+            Active
+          </span>
+        </div>
+        <p className="mt-3 text-sm leading-relaxed text-gray-600">
+          [Brief description of the consulting engagement: what problem you are
+          solving, the approach, and expected outcomes. 2-3 sentences.]
+        </p>
+        <div className="mt-4 grid gap-3 sm:grid-cols-3">
+          {[
+            { label: "Started", value: "[Start Date]" },
+            { label: "Phase", value: "[Current Phase]" },
+            { label: "Next milestone", value: "[Milestone]" },
+          ].map((item) => (
+            <div
+              key={item.label}
+              className="rounded-xl border border-gray-100 p-3"
+            >
+              <p className="text-xs text-gray-500">{item.label}</p>
+              <p className="mt-0.5 text-sm font-semibold text-gray-900">
+                {item.value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-2xl border bg-white p-5 shadow-sm sm:p-6">
+        <h3 className="mb-3 text-base font-bold tracking-tight text-gray-900">
+          Scope of work
+        </h3>
+        <ul className="space-y-2">
+          {[
+            "[Workstream 1: description]",
+            "[Workstream 2: description]",
+            "[Workstream 3: description]",
+          ].map((item) => (
+            <li key={item} className="flex items-start gap-2.5 text-sm text-gray-600">
+              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-gray-300" />
+              {item}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+// ─── Tab 2: Deliverables & Timeline ───────────────────────────
+// Phase-based timeline showing what has been delivered and what is
+// coming next. Each phase has status (complete/in-progress/upcoming).
+function DeliverablesTab() {
+  const phases = [
+    {
+      name: "Phase 1: Discovery",
+      status: "complete" as const,
+      items: ["Stakeholder interviews", "Current state assessment", "Gap analysis report"],
+    },
+    {
+      name: "Phase 2: Recommendations",
+      status: "in-progress" as const,
+      items: ["Strategy document", "Implementation roadmap", "Cost-benefit analysis"],
+    },
+    {
+      name: "Phase 3: Implementation Support",
+      status: "upcoming" as const,
+      items: ["Vendor selection", "Migration plan", "Go-live support"],
+    },
+  ];
+
+  const statusConfig = {
+    complete: { bg: "bg-green-50", text: "text-green-700", dot: "bg-green-400", label: "Complete" },
+    "in-progress": { bg: "bg-blue-50", text: "text-blue-700", dot: "bg-blue-400", label: "In progress" },
+    upcoming: { bg: "bg-gray-50", text: "text-gray-500", dot: "bg-gray-300", label: "Upcoming" },
+  };
+
+  return (
+    <div className="w-full space-y-4">
+      <h3 className="text-base font-bold tracking-tight text-gray-900">
+        Deliverables & timeline
+      </h3>
+      {phases.map((phase) => {
+        const config = statusConfig[phase.status];
+        return (
+          <div key={phase.name} className="rounded-2xl border bg-white p-5 shadow-sm sm:p-6">
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-semibold text-gray-900">{phase.name}</h4>
+              <span className={cn("inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", config.bg, config.text)}>
+                <span className={cn("h-1.5 w-1.5 rounded-full", config.dot)} />
+                {config.label}
+              </span>
+            </div>
+            <ul className="mt-3 space-y-1.5">
+              {phase.items.map((item) => (
+                <li key={item} className="flex items-center gap-2 text-sm text-gray-600">
+                  {phase.status === "complete" ? (
+                    <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-green-500" />
+                  ) : (
+                    <Clock className="h-3.5 w-3.5 shrink-0 text-gray-300" />
+                  )}
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Tab 3: Documents ─────────────────────────────────────────
+function DocumentsTab() {
+  const docs = [
+    { name: "[Deliverable 1]", type: "PDF", date: "[Date]" },
+    { name: "[Deliverable 2]", type: "PDF", date: "[Date]" },
+  ];
+
+  return (
+    <div className="w-full">
+      <h3 className="mb-4 text-base font-bold tracking-tight text-gray-900">
+        Documents
+      </h3>
+      <div className="space-y-3">
+        {docs.map((doc) => (
+          <div key={doc.name} className="flex items-center justify-between rounded-2xl border bg-white p-4 shadow-sm sm:p-5">
+            <div className="flex items-center gap-3">
+              <FileText className="h-5 w-5 shrink-0 text-gray-400" />
+              <div>
+                <p className="text-sm font-medium text-gray-900">{doc.name}</p>
+                <p className="text-xs text-gray-500">{doc.type} - {doc.date}</p>
+              </div>
+            </div>
+            <button type="button" className="flex items-center gap-1.5 rounded-lg bg-gray-900 px-4 py-1.5 text-xs font-semibold text-white hover:bg-gray-800">
+              <Download className="h-3.5 w-3.5" />
+              Download
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Assembled Portal ─────────────────────────────────────────
+export function ConsultingClient() {
+  return (
+    <PortalShell
+      companyName="[Your Company]"
+      companyLogo={<span className="text-xs font-bold text-white">C</span>}
+      clientName="[Client Company]"
+      clientLogoSrc="/client-logo.svg"
+      clientLogoAlt="[Client Company]"
+      lastUpdated="[Date]"
+      contact={{
+        name: "[Consultant Name]",
+        title: "[Title]",
+        avatarSrc: "/avatar.svg",
+        email: "[email]",
+      }}
+      tabs={[
+        { id: "overview", label: "Project overview", icon: LayoutDashboard, content: <ProjectOverviewTab /> },
+        { id: "deliverables", label: "Deliverables", icon: ListChecks, content: <DeliverablesTab /> },
+        { id: "documents", label: "Documents", icon: FileText, content: <DocumentsTab /> },
+      ]}
+    />
+  );
+}

package/bundle/toolchain/templates/onboarding/onboarding-client.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+/**
+ * TEMPLATE: Client Onboarding Portal
+ *
+ * Use when onboarding a new client to your service/product.
+ * Structure: Welcome & Setup → Getting Started Steps → Resources → Support
+ *
+ * This file is READ by Claude Code as a reference, not used directly.
+ */
+
+import {
+  BookOpen,
+  CheckCircle2,
+  ExternalLink,
+  HelpCircle,
+  LifeBuoy,
+  Rocket,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { PortalShell } from "@/components/portal-shell";
+
+// ─── Tab 1: Welcome ──────────────────────────────────────────
+// Hero welcome with overview of what the client can expect.
+function WelcomeTab() {
+  return (
+    <>
+      <div className="rounded-2xl border bg-white p-5 shadow-sm sm:p-6">
+        <h3 className="text-base font-bold tracking-tight text-gray-900">
+          Welcome to [Your Company]
+        </h3>
+        <p className="mt-3 text-sm leading-relaxed text-gray-600">
+          We&apos;re excited to have [Client Company] on board. This portal is
+          your central hub for getting started. Here you&apos;ll find setup
+          steps, resources, and a direct line to your account team.
+        </p>
+        <div className="mt-5 grid gap-3 sm:grid-cols-2">
+          {[
+            {
+              title: "Your account manager",
+              desc: "[Name] — [email]",
+            },
+            {
+              title: "Plan",
+              desc: "[Plan name / tier]",
+            },
+            {
+              title: "Onboarding started",
+              desc: "[Date]",
+            },
+            {
+              title: "Target go-live",
+              desc: "[Date]",
+            },
+          ].map((item) => (
+            <div
+              key={item.title}
+              className="rounded-xl border border-gray-100 p-4"
+            >
+              <p className="text-xs text-gray-500">{item.title}</p>
+              <p className="mt-0.5 text-sm font-semibold text-gray-900">
+                {item.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ─── Tab 2: Getting Started ───────────────────────────────────
+// Step-by-step setup checklist. Each step has a status and instructions.
+function GettingStartedTab() {
+  const steps = [
+    {
+      done: true,
+      label: "Account created",
+      desc: "Your account is active and ready to use.",
+    },
+    {
+      done: false,
+      label: "Complete your profile",
+      desc: "Add your team members and set up your organization details.",
+    },
+    {
+      done: false,
+      label: "Connect your data",
+      desc: "Follow our integration guide to connect your existing systems.",
+    },
+    {
+      done: false,
+      label: "Review the setup with us",
+      desc: "Book a 30-minute call with your account manager to walk through everything.",
+    },
+    {
+      done: false,
+      label: "Go live",
+      desc: "Once you're comfortable, switch to production mode.",
+    },
+  ];
+
+  return (
+    <div className="w-full">
+      <h3 className="mb-4 text-base font-bold tracking-tight text-gray-900">
+        Setup checklist
+      </h3>
+      <div className="rounded-2xl border bg-white p-5 shadow-sm sm:p-6">
+        <div className="space-y-0">
+          {steps.map((step, index, items) => (
+            <div key={step.label} className="flex items-stretch gap-3 sm:gap-4">
+              <div className="flex flex-col items-center">
+                <span
+                  className={cn(
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold",
+                    step.done
+                      ? "bg-green-500 text-white"
+                      : "bg-gray-200 text-gray-600"
+                  )}
+                >
+                  {step.done ? (
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                  ) : (
+                    index + 1
+                  )}
+                </span>
+                {index < items.length - 1 ? (
+                  <div className="w-px flex-1 bg-gray-100" />
+                ) : null}
+              </div>
+              <div className="pb-5">
+                <p
+                  className={cn(
+                    "text-sm font-semibold",
+                    step.done ? "text-green-700" : "text-gray-900"
+                  )}
+                >
+                  {step.label}
+                </p>
+                <p className="mt-0.5 text-sm leading-relaxed text-gray-500">
+                  {step.desc}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 border-t border-gray-100 pt-4">
+          <p className="text-xs text-gray-400">
+            1 of 5 steps complete. Your account manager will follow up on
+            remaining items.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Tab 3: Resources ─────────────────────────────────────────
+// Links to documentation, guides, and helpful resources.
+function ResourcesTab() {
+  const resources = [
+    {
+      title: "Getting Started Guide",
+      desc: "Step-by-step walkthrough for new users",
+      url: "#",
+    },
+    {
+      title: "API Documentation",
+      desc: "Technical reference for integrations",
+      url: "#",
+    },
+    {
+      title: "Best Practices",
+      desc: "Tips and recommendations from our team",
+      url: "#",
+    },
+    {
+      title: "FAQ",
+      desc: "Answers to common questions",
+      url: "#",
+    },
+  ];
+
+  return (
+    <div className="w-full">
+      <h3 className="mb-4 text-base font-bold tracking-tight text-gray-900">
+        Resources
+      </h3>
+      <div className="space-y-3">
+        {resources.map((resource) => (
+          <a
+            key={resource.title}
+            href={resource.url}
+            className="flex items-center justify-between rounded-2xl border bg-white p-4 shadow-sm transition-colors hover:border-gray-300 sm:p-5"
+          >
+            <div className="flex items-center gap-3">
+              <BookOpen className="h-5 w-5 shrink-0 text-gray-400" />
+              <div>
+                <p className="text-sm font-medium text-gray-900">
+                  {resource.title}
+                </p>
+                <p className="text-xs text-gray-500">{resource.desc}</p>
+              </div>
+            </div>
+            <ExternalLink className="h-4 w-4 shrink-0 text-gray-300" />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Assembled Portal ─────────────────────────────────────────
+export function OnboardingClient() {
+  return (
+    <PortalShell
+      companyName="[Your Company]"
+      companyLogo={<span className="text-xs font-bold text-white">C</span>}
+      clientName="[Client Company]"
+      clientLogoSrc="/client-logo.svg"
+      clientLogoAlt="[Client Company]"
+      lastUpdated="[Date]"
+      contact={{
+        name: "[Account Manager Name]",
+        title: "[Title]",
+        avatarSrc: "/avatar.svg",
+        email: "[email]",
+      }}
+      tabs={[
+        { id: "welcome", label: "Welcome", icon: Rocket, content: <WelcomeTab /> },
+        { id: "getting-started", label: "Getting started", icon: CheckCircle2, content: <GettingStartedTab /> },
+        { id: "resources", label: "Resources", icon: BookOpen, content: <ResourcesTab /> },
+        { id: "support", label: "Support", icon: LifeBuoy, content: <div className="rounded-2xl border bg-white p-5 shadow-sm sm:p-6"><p className="text-sm text-gray-600">Need help? Contact your account manager at <span className="font-medium text-gray-900">[email]</span> or book a call.</p></div> },
+      ]}
+    />
+  );
+}