From 0b6a227dc328f93b4af3a93d1690a200f1eb9116 Mon Sep 17 00:00:00 2001
From: Kai <kai@itskai.dev>
Date: Mon, 9 Feb 2026 23:15:40 -0800
Subject: [PATCH] Wire studio page to persistent session data

---
 data/studio-sessions.json        |  146 ++++
 src/app/api/studio/[id]/route.ts |  103 +++
 src/app/api/studio/route.ts      |   82 +++
 src/app/studio/page.tsx          | 1064 ++++++++++--------------------
 src/lib/studioStore.ts           |   98 +++
 5 files changed, 793 insertions(+), 700 deletions(-)
 create mode 100644 data/studio-sessions.json
 create mode 100644 src/app/api/studio/[id]/route.ts
 create mode 100644 src/app/api/studio/route.ts
 create mode 100644 src/lib/studioStore.ts

diff --git a/data/studio-sessions.json b/data/studio-sessions.json
new file mode 100644
index 00000000..3ff42382
--- /dev/null
+++ b/data/studio-sessions.json
@@ -0,0 +1,146 @@
+[
+  {
+    "id": "studio_1001",
+    "skillSlug": "content-summarizer",
+    "skillName": "Content Summarizer",
+    "status": "completed",
+    "inputs": {
+      "source": "https://foragents.dev/docs/bootstrap",
+      "tone": "technical",
+      "maxBullets": 5
+    },
+    "outputs": {
+      "summary": "Bootstrap docs define setup flow, required files, and validation checks.",
+      "bullets": [
+        "Load bootstrap files first",
+        "Validate environment assumptions",
+        "Track run metadata"
+      ]
+    },
+    "logs": [
+      {
+        "timestamp": "2026-02-09T19:00:12.000Z",
+        "message": "Session queued"
+      },
+      {
+        "timestamp": "2026-02-09T19:00:14.000Z",
+        "message": "Fetched source content"
+      },
+      {
+        "timestamp": "2026-02-09T19:00:20.000Z",
+        "message": "Generated summary output"
+      }
+    ],
+    "startedAt": "2026-02-09T19:00:12.000Z",
+    "completedAt": "2026-02-09T19:00:21.000Z"
+  },
+  {
+    "id": "studio_1002",
+    "skillSlug": "dependency-scanner",
+    "skillName": "Dependency Scanner",
+    "status": "active",
+    "inputs": {
+      "repo": "reflectt/foragents.dev",
+      "depth": "full"
+    },
+    "outputs": {
+      "checkedPackages": 112,
+      "vulnerabilities": 0
+    },
+    "logs": [
+      {
+        "timestamp": "2026-02-09T21:10:02.000Z",
+        "message": "Scanning lockfile"
+      },
+      {
+        "timestamp": "2026-02-09T21:10:18.000Z",
+        "message": "Resolving transitive dependency graph"
+      }
+    ],
+    "startedAt": "2026-02-09T21:10:02.000Z",
+    "completedAt": null
+  },
+  {
+    "id": "studio_1003",
+    "skillSlug": "release-note-writer",
+    "skillName": "Release Note Writer",
+    "status": "error",
+    "inputs": {
+      "range": "v0.9.0..v1.0.0",
+      "includeBreaking": true
+    },
+    "outputs": {
+      "error": "No git tag found for v0.9.0"
+    },
+    "logs": [
+      {
+        "timestamp": "2026-02-08T15:42:00.000Z",
+        "message": "Collecting commits"
+      },
+      {
+        "timestamp": "2026-02-08T15:42:03.000Z",
+        "message": "Failed to resolve start tag v0.9.0"
+      }
+    ],
+    "startedAt": "2026-02-08T15:42:00.000Z",
+    "completedAt": "2026-02-08T15:42:03.000Z"
+  },
+  {
+    "id": "studio_1004",
+    "skillSlug": "api-schema-checker",
+    "skillName": "API Schema Checker",
+    "status": "completed",
+    "inputs": {
+      "endpoint": "/api/skill/[slug]",
+      "strict": false
+    },
+    "outputs": {
+      "warnings": [
+        "Missing example for 404 response"
+      ],
+      "status": "pass"
+    },
+    "logs": [
+      {
+        "timestamp": "2026-02-07T12:07:10.000Z",
+        "message": "Loaded route schema"
+      },
+      {
+        "timestamp": "2026-02-07T12:07:13.000Z",
+        "message": "Validated request and response shapes"
+      }
+    ],
+    "startedAt": "2026-02-07T12:07:10.000Z",
+    "completedAt": "2026-02-07T12:07:14.000Z"
+  },
+  {
+    "id": "studio_1005",
+    "skillSlug": "log-triage",
+    "skillName": "Log Triage",
+    "status": "completed",
+    "inputs": {
+      "window": "24h",
+      "severity": "warn"
+    },
+    "outputs": {
+      "clusters": 3,
+      "topIssue": "Missing auth header on /api/verify/start"
+    },
+    "logs": [
+      {
+        "timestamp": "2026-02-06T08:33:44.000Z",
+        "message": "Indexed 1,932 log lines"
+      },
+      {
+        "timestamp": "2026-02-06T08:34:01.000Z",
+        "message": "Ranked anomaly clusters"
+      },
+      {
+        "timestamp": "2026-02-06T08:34:09.000Z",
+        "message": "Exported triage report"
+      }
+    ],
+    "startedAt": "2026-02-06T08:33:44.000Z",
+    "completedAt": "2026-02-06T08:34:09.000Z"
+  }
+]
diff --git a/src/app/api/studio/[id]/route.ts b/src/app/api/studio/[id]/route.ts
new file mode 100644
index 00000000..c2503788
--- /dev/null
+++ b/src/app/api/studio/[id]/route.ts
@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  isStudioSessionStatus,
+  readStudioSessions,
+  sanitizeOutputs,
+  StudioSession,
+  writeStudioSessions,
+} from "@/lib/studioStore";
+
+type UpdateStudioSessionRequest = {
+  status?: unknown;
+  outputs?: unknown;
+  logMessage?: unknown;
+};
+
+export async function GET(
+  _request: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const { id } = await context.params;
+  const sessions = await readStudioSessions();
+  const session = sessions.find((item) => item.id === id);
+
+  if (!session) {
+    return NextResponse.json({ error: "Session not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    {
+      session,
+      updatedAt: new Date().toISOString(),
+    },
+    {
+      headers: {
+        "Cache-Control": "no-store",
+      },
+    }
+  );
+}
+
+export async function PATCH(
+  request: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const { id } = await context.params;
+
+  let payload: UpdateStudioSessionRequest;
+  try {
+    payload = (await request.json()) as UpdateStudioSessionRequest;
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const sessions = await readStudioSessions();
+  const targetIndex = sessions.findIndex((session) => session.id === id);
+
+  if (targetIndex === -1) {
+    return NextResponse.json({ error: "Session not found" }, { status: 404 });
+  }
+
+  const current = sessions[targetIndex] as StudioSession;
+  const now = new Date().toISOString();
+
+  const nextStatus = payload.status;
+  if (typeof nextStatus !== "undefined" && !isStudioSessionStatus(nextStatus)) {
+    return NextResponse.json({ error: "status must be active, completed, or error" }, { status: 400 });
+  }
+
+  const logMessage = typeof payload.logMessage === "string" ? payload.logMessage.trim() : "";
+
+  const updatedSession: StudioSession = {
+    ...current,
+    status: isStudioSessionStatus(nextStatus) ? nextStatus : current.status,
+    outputs:
+      typeof payload.outputs === "undefined"
+        ? current.outputs
+        : {
+            ...current.outputs,
+            ...sanitizeOutputs(payload.outputs),
+          },
+    logs: logMessage
+      ? [
+          ...current.logs,
+          {
+            timestamp: now,
+            message: logMessage,
+          },
+        ]
+      : current.logs,
+    completedAt:
+      isStudioSessionStatus(nextStatus) && nextStatus !== "active"
+        ? now
+        : isStudioSessionStatus(nextStatus) && nextStatus === "active"
+          ? null
+          : current.completedAt,
+  };
+
+  const nextSessions = [...sessions];
+  nextSessions[targetIndex] = updatedSession;
+  await writeStudioSessions(nextSessions);
+
+  return NextResponse.json({ session: updatedSession });
+}
diff --git a/src/app/api/studio/route.ts b/src/app/api/studio/route.ts
new file mode 100644
index 00000000..e598f853
--- /dev/null
+++ b/src/app/api/studio/route.ts
@@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  formatSkillNameFromSlug,
+  readStudioSessions,
+  sanitizeInputs,
+  StudioSession,
+  writeStudioSessions,
+} from "@/lib/studioStore";
+
+type StartStudioSessionRequest = {
+  skillSlug?: unknown;
+  skillName?: unknown;
+  inputs?: unknown;
+};
+
+export async function GET() {
+  const sessions = await readStudioSessions();
+
+  return NextResponse.json(
+    {
+      sessions,
+      count: sessions.length,
+      updatedAt: new Date().toISOString(),
+    },
+    {
+      headers: {
+        "Cache-Control": "no-store",
+      },
+    }
+  );
+}
+
+export async function POST(request: NextRequest) {
+  let payload: StartStudioSessionRequest;
+
+  try {
+    payload = (await request.json()) as StartStudioSessionRequest;
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const skillSlug = typeof payload.skillSlug === "string" ? payload.skillSlug.trim().toLowerCase() : "";
+
+  if (!skillSlug) {
+    return NextResponse.json({ error: "skillSlug is required" }, { status: 400 });
+  }
+
+  const skillName =
+    typeof payload.skillName === "string" && payload.skillName.trim()
+      ? payload.skillName.trim()
+      : formatSkillNameFromSlug(skillSlug);
+
+  const inputs = sanitizeInputs(payload.inputs);
+  const sessions = await readStudioSessions();
+  const now = new Date().toISOString();
+
+  const nextSession: StudioSession = {
+    id: `studio_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+    skillSlug,
+    skillName,
+    status: "active",
+    inputs,
+    outputs: {},
+    logs: [
+      {
+        timestamp: now,
+        message: `Started ${skillName}`,
+      },
+    ],
+    startedAt: now,
+    completedAt: null,
+  };
+
+  await writeStudioSessions([nextSession, ...sessions]);
+
+  return NextResponse.json(
+    {
+      session: nextSession,
+    },
+    { status: 201 }
+  );
+}
diff --git a/src/app/studio/page.tsx b/src/app/studio/page.tsx
index 86f098ad..8b884658 100644
--- a/src/app/studio/page.tsx
+++ b/src/app/studio/page.tsx
@@ -1,759 +1,423 @@
+/* eslint-disable react/no-unescaped-entities */
 "use client";
 
-import { useState, useEffect } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
-import templates from "@/data/studio-templates.json";
-
-type Parameter = {
-  name: string;
-  type: string;
-  description: string;
-  default: string | number;
-};
+import { Textarea } from "@/components/ui/textarea";
 
-type EnvVar = {
-  name: string;
-  description: string;
-  required: boolean;
+type StudioSessionStatus = "active" | "completed" | "error";
+
+type StudioLogEntry = {
+  timestamp: string;
+  message: string;
 };
 
-type Template = {
+type StudioSession = {
   id: string;
-  name: string;
-  description: string;
-  category: string;
-  tags: string[];
-  parameters: Parameter[];
-  dependencies: string[];
-  envVars: EnvVar[];
-  sampleInput: string;
-  sampleOutput: string;
-  validation: string;
-  skillTemplate: string;
+  skillSlug: string;
+  skillName: string;
+  status: StudioSessionStatus;
+  inputs: Record<string, unknown>;
+  outputs: Record<string, unknown>;
+  logs: StudioLogEntry[];
+  startedAt: string;
+  completedAt: string | null;
 };
 
-type SkillData = {
-  name: string;
-  description: string;
-  category: string;
-  tags: string[];
-  author: string;
-  install_cmd: string;
-  repo_url: string;
-  parameters: Parameter[];
-  dependencies: string[];
-  envVars: EnvVar[];
-  sampleInput: string;
-  sampleOutput: string;
-  validation: string;
+const SKILL_OPTIONS = [
+  { slug: "content-summarizer", name: "Content Summarizer" },
+  { slug: "dependency-scanner", name: "Dependency Scanner" },
+  { slug: "release-note-writer", name: "Release Note Writer" },
+  { slug: "api-schema-checker", name: "API Schema Checker" },
+  { slug: "log-triage", name: "Log Triage" },
+];
+
+const STATUS_BADGE_VARIANT: Record<StudioSessionStatus, "default" | "secondary" | "destructive"> = {
+  active: "default",
+  completed: "secondary",
+  error: "destructive",
 };
 
-const CATEGORIES = [
-  "Core Systems",
-  "Integration",
-  "Utilities",
-  "Communication",
-  "Automation",
-  "Observability",
-  "Security",
-  "Data",
-];
+function safeJsonParse(value: string): Record<string, unknown> {
+  if (!value.trim()) return {};
+
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    return parsed as Record<string, unknown>;
+  } catch {
+    return {};
+  }
+}
+
+function prettyJson(value: unknown): string {
+  return JSON.stringify(value, null, 2);
+}
 
 export default function StudioPage() {
-  const [step, setStep] = useState(0); // 0 = template picker, 1-4 = wizard steps
-  const [, setSelectedTemplate] = useState<Template | null>(null);
-  const [skillData, setSkillData] = useState<SkillData>({
-    name: "",
-    description: "",
-    category: "Core Systems",
-    tags: [],
-    author: "Team Reflectt",
-    install_cmd: "",
-    repo_url: "",
-    parameters: [],
-    dependencies: [],
-    envVars: [],
-    sampleInput: "",
-    sampleOutput: "",
-    validation: "",
-  });
-  const [tagInput, setTagInput] = useState("");
-  const [parameterInput, setParameterInput] = useState<Parameter>({
-    name: "",
-    type: "string",
-    description: "",
-    default: "",
-  });
-  const [envVarInput, setEnvVarInput] = useState<EnvVar>({
-    name: "",
-    description: "",
-    required: false,
-  });
-  const [dependencyInput, setDependencyInput] = useState("");
-  const [generatedSkillMd, setGeneratedSkillMd] = useState("");
-
-  // Generate SKILL.md preview whenever data changes
-  useEffect(() => {
-    if (step > 0) {
-      generateSkillMd();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [skillData, step]);
-
-  const selectTemplate = (template: Template) => {
-    setSelectedTemplate(template);
-    setSkillData({
-      ...skillData,
-      name: template.name,
-      description: template.description,
-      category: template.category,
-      tags: [...template.tags],
-      parameters: [...template.parameters],
-      dependencies: [...template.dependencies],
-      envVars: [...template.envVars],
-      sampleInput: template.sampleInput,
-      sampleOutput: template.sampleOutput,
-      validation: template.validation,
-    });
-    setStep(1);
-  };
-
-  const startFromScratch = () => {
-    setSelectedTemplate(null);
-    setStep(1);
-  };
-
-  const generateSkillMd = () => {
-    let md = `# ${skillData.name}\n\n${skillData.description}\n\n`;
-
-    md += `## Category\n\n${skillData.category}\n\n`;
-
-    if (skillData.tags.length > 0) {
-      md += `## Tags\n\n${skillData.tags.map(tag => `\`${tag}\``).join(", ")}\n\n`;
-    }
+  const [sessions, setSessions] = useState<StudioSession[]>([]);
+  const [selectedId, setSelectedId] = useState<string>("");
+  const [selectedSession, setSelectedSession] = useState<StudioSession | null>(null);
+  const [skillSlug, setSkillSlug] = useState(SKILL_OPTIONS[0]!.slug);
+  const [inputsText, setInputsText] = useState('{\n  "prompt": "Summarize this skill behavior",\n  "temperature": 0.3\n}');
+  const [logMessage, setLogMessage] = useState("");
+  const [outputPatchText, setOutputPatchText] = useState('{\n  "result": "Preview output"\n}');
+  const [statusMessage, setStatusMessage] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [loadingList, setLoadingList] = useState(false);
+  const [loadingSession, setLoadingSession] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const selectedSkill = useMemo(
+    () => SKILL_OPTIONS.find((option) => option.slug === skillSlug) ?? SKILL_OPTIONS[0],
+    [skillSlug]
+  );
 
-    md += `## Installation\n\n\`\`\`bash\n${skillData.install_cmd || "# Add your installation command"}\n\`\`\`\n\n`;
+  const loadSessions = useCallback(async () => {
+    setLoadingList(true);
+    setErrorMessage("");
 
-    if (skillData.repo_url) {
-      md += `## Repository\n\n${skillData.repo_url}\n\n`;
-    }
+    try {
+      const response = await fetch("/api/studio", { cache: "no-store" });
+      if (!response.ok) throw new Error(`Failed to fetch sessions (${response.status})`);
 
-    if (skillData.parameters.length > 0) {
-      md += `## Parameters\n\n`;
-      skillData.parameters.forEach(param => {
-        md += `### ${param.name}\n\n`;
-        md += `- **Type**: ${param.type}\n`;
-        md += `- **Description**: ${param.description}\n`;
-        md += `- **Default**: \`${param.default}\`\n\n`;
-      });
-    }
+      const data = (await response.json()) as { sessions?: StudioSession[] };
+      const nextSessions = Array.isArray(data.sessions) ? data.sessions : [];
+      setSessions(nextSessions);
 
-    if (skillData.dependencies.length > 0) {
-      md += `## Dependencies\n\n${skillData.dependencies.map(dep => `- ${dep}`).join("\n")}\n\n`;
+      if (!selectedId && nextSessions[0]) {
+        setSelectedId(nextSessions[0].id);
+      }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Could not load sessions");
+    } finally {
+      setLoadingList(false);
     }
+  }, [selectedId]);
 
-    if (skillData.envVars.length > 0) {
-      md += `## Environment Variables\n\n`;
-      skillData.envVars.forEach(env => {
-        md += `### ${env.name}\n\n`;
-        md += `- **Description**: ${env.description}\n`;
-        md += `- **Required**: ${env.required ? "Yes" : "No"}\n\n`;
-      });
-    }
+  const loadSession = useCallback(async (id: string) => {
+    if (!id) return;
 
-    if (skillData.sampleInput || skillData.sampleOutput) {
-      md += `## Testing\n\n`;
-      if (skillData.sampleInput) {
-        md += `### Sample Input\n\n\`\`\`\n${skillData.sampleInput}\n\`\`\`\n\n`;
-      }
-      if (skillData.sampleOutput) {
-        md += `### Sample Output\n\n\`\`\`\n${skillData.sampleOutput}\n\`\`\`\n\n`;
-      }
-      if (skillData.validation) {
-        md += `### Validation\n\n${skillData.validation}\n\n`;
+    setLoadingSession(true);
+    setErrorMessage("");
+
+    try {
+      const response = await fetch(`/api/studio/${id}`, { cache: "no-store" });
+      if (!response.ok) throw new Error(`Failed to fetch session (${response.status})`);
+
+      const data = (await response.json()) as { session?: StudioSession };
+      if (data.session) {
+        setSelectedSession(data.session);
       }
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Could not load session details");
+    } finally {
+      setLoadingSession(false);
     }
+  }, []);
 
-    md += `## Author\n\n${skillData.author}\n`;
-
-    setGeneratedSkillMd(md);
-  };
-
-  const generateAgentJson = () => {
-    return JSON.stringify({
-      name: skillData.name,
-      description: skillData.description,
-      category: skillData.category,
-      tags: skillData.tags,
-      author: skillData.author,
-      install_cmd: skillData.install_cmd,
-      repo_url: skillData.repo_url,
-    }, null, 2);
-  };
-
-  const addTag = () => {
-    if (tagInput && !skillData.tags.includes(tagInput)) {
-      setSkillData({ ...skillData, tags: [...skillData.tags, tagInput] });
-      setTagInput("");
-    }
-  };
+  useEffect(() => {
+    void loadSessions();
+    const intervalId = window.setInterval(() => {
+      void loadSessions();
+    }, 5000);
 
-  const removeTag = (tag: string) => {
-    setSkillData({ ...skillData, tags: skillData.tags.filter(t => t !== tag) });
-  };
+    return () => window.clearInterval(intervalId);
+  }, [loadSessions]);
 
-  const addParameter = () => {
-    if (parameterInput.name) {
-      setSkillData({ 
-        ...skillData, 
-        parameters: [...skillData.parameters, { ...parameterInput }] 
-      });
-      setParameterInput({ name: "", type: "string", description: "", default: "" });
-    }
-  };
-
-  const removeParameter = (index: number) => {
-    setSkillData({ 
-      ...skillData, 
-      parameters: skillData.parameters.filter((_, i) => i !== index) 
-    });
-  };
-
-  const addEnvVar = () => {
-    if (envVarInput.name) {
-      setSkillData({ 
-        ...skillData, 
-        envVars: [...skillData.envVars, { ...envVarInput }] 
+  useEffect(() => {
+    if (!selectedId) return;
+    void loadSession(selectedId);
+
+    const intervalId = window.setInterval(() => {
+      void loadSession(selectedId);
+    }, 2000);
+
+    return () => window.clearInterval(intervalId);
+  }, [selectedId, loadSession]);
+
+  async function startSession() {
+    setSubmitting(true);
+    setStatusMessage("");
+    setErrorMessage("");
+
+    try {
+      const response = await fetch("/api/studio", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          skillSlug,
+          skillName: selectedSkill?.name,
+          inputs: safeJsonParse(inputsText),
+        }),
       });
-      setEnvVarInput({ name: "", description: "", required: false });
+
+      if (!response.ok) {
+        const failure = (await response.json().catch(() => ({}))) as { error?: string };
+        throw new Error(failure.error || `Failed to start session (${response.status})`);
+      }
+
+      const data = (await response.json()) as { session: StudioSession };
+      setSelectedId(data.session.id);
+      setStatusMessage(`Started session ${data.session.id}`);
+      await loadSessions();
+      await loadSession(data.session.id);
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Failed to start session");
+    } finally {
+      setSubmitting(false);
     }
-  };
-
-  const removeEnvVar = (index: number) => {
-    setSkillData({ 
-      ...skillData, 
-      envVars: skillData.envVars.filter((_, i) => i !== index) 
-    });
-  };
-
-  const addDependency = () => {
-    if (dependencyInput && !skillData.dependencies.includes(dependencyInput)) {
-      setSkillData({ 
-        ...skillData, 
-        dependencies: [...skillData.dependencies, dependencyInput] 
+  }
+
+  async function patchSession(patch: { status?: StudioSessionStatus; logMessage?: string; outputs?: Record<string, unknown> }) {
+    if (!selectedId) return;
+
+    setSubmitting(true);
+    setStatusMessage("");
+    setErrorMessage("");
+
+    try {
+      const response = await fetch(`/api/studio/${selectedId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(patch),
       });
-      setDependencyInput("");
+
+      if (!response.ok) {
+        const failure = (await response.json().catch(() => ({}))) as { error?: string };
+        throw new Error(failure.error || `Failed to update session (${response.status})`);
+      }
+
+      const data = (await response.json()) as { session?: StudioSession };
+      if (data.session) {
+        setSelectedSession(data.session);
+        setStatusMessage(`Updated session ${data.session.id}`);
+      }
+
+      await loadSessions();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "Failed to update session");
+    } finally {
+      setSubmitting(false);
     }
-  };
-
-  const removeDependency = (dep: string) => {
-    setSkillData({ 
-      ...skillData, 
-      dependencies: skillData.dependencies.filter(d => d !== dep) 
-    });
-  };
-
-  const downloadSkill = () => {
-    const blob = new Blob([generatedSkillMd], { type: "text/markdown" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "SKILL.md";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(generatedSkillMd);
-    alert("Copied to clipboard!");
-  };
-
-  const progressPercentage = step === 0 ? 0 : ((step - 1) / 4) * 100;
-
-  // Template Picker (Step 0)
-  if (step === 0) {
-    return (
-      <div className="min-h-screen bg-background py-12 px-4">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <h1 className="text-4xl font-bold text-cyan mb-4">
-              Skill Authoring Studio
-            </h1>
-            <p className="text-muted-foreground text-lg">
-              Create production-ready agent skills in minutes
-            </p>
-          </div>
+  }
 
-          <div className="mb-8">
-            <Button 
-              onClick={startFromScratch}
-              className="w-full bg-cyan hover:bg-cyan/90 text-background font-semibold"
-              size="lg"
-            >
-              Start from Scratch
-            </Button>
-          </div>
+  async function addLogEntry() {
+    const message = logMessage.trim();
+    if (!message) return;
 
-          <Separator className="my-8" />
-
-          <h2 className="text-2xl font-bold mb-6">Or choose a template</h2>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {templates.map((template) => (
-              <Card 
-                key={template.id}
-                className="cursor-pointer hover:border-cyan transition-all"
-                onClick={() => selectTemplate(template as Template)}
-              >
-                <CardHeader>
-                  <CardTitle className="text-lg">{template.name}</CardTitle>
-                  <CardDescription>{template.description}</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-2 mb-3">
-                    {template.tags.map(tag => (
-                      <Badge key={tag} variant="secondary" className="text-xs">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                  <p className="text-sm text-muted-foreground">{template.category}</p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
+    await patchSession({ logMessage: message });
+    setLogMessage("");
+  }
+
+  async function applyOutputPatch() {
+    const outputs = safeJsonParse(outputPatchText);
+    await patchSession({ outputs, logMessage: "Output snapshot updated" });
   }
 
-  // Wizard Steps
   return (
-    <div className="min-h-screen bg-background">
-      {/* Progress Bar */}
-      <div className="bg-card border-b border-border">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between mb-2">
-            <h1 className="text-xl font-bold text-cyan">Skill Authoring Studio</h1>
-            <span className="text-sm text-muted-foreground">
-              Step {step} of 4
-            </span>
-          </div>
-          <div className="w-full bg-secondary rounded-full h-2">
-            <div 
-              className="bg-cyan h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progressPercentage}%` }}
-            />
-          </div>
+    <div className="min-h-screen bg-background py-10 px-4">
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div>
+          <h1 className="text-4xl font-bold text-cyan">Skill Studio</h1>
+          <p className="text-muted-foreground mt-2">
+            Run skill sessions against real persisted data, inspect output snapshots, and track logs live.
+          </p>
         </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="grid lg:grid-cols-2 gap-8">
-          {/* Left: Form */}
-          <div>
-            {step === 1 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Step 1: Basic Information</CardTitle>
-                  <CardDescription>
-                    Define your skill&apos;s identity and purpose
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <Label htmlFor="name">Skill Name</Label>
-                    <Input
-                      id="name"
-                      value={skillData.name}
-                      onChange={(e) => setSkillData({ ...skillData, name: e.target.value })}
-                      placeholder="Agent Memory Kit"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="description">Description</Label>
-                    <Textarea
-                      id="description"
-                      value={skillData.description}
-                      onChange={(e) => setSkillData({ ...skillData, description: e.target.value })}
-                      placeholder="A brief description of what your skill does..."
-                      rows={4}
-                    />
-                  </div>
 
-                  <div>
-                    <Label htmlFor="category">Category</Label>
-                    <select
-                      id="category"
-                      value={skillData.category}
-                      onChange={(e) => setSkillData({ ...skillData, category: e.target.value })}
-                      className="w-full px-3 py-2 bg-input border border-border rounded-md text-foreground"
-                    >
-                      {CATEGORIES.map(cat => (
-                        <option key={cat} value={cat}>{cat}</option>
-                      ))}
-                    </select>
+        {statusMessage && <p className="text-sm text-cyan">{statusMessage}</p>}
+        {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
+
+        <div className="grid lg:grid-cols-3 gap-6">
+          <Card className="lg:col-span-1">
+            <CardHeader>
+              <CardTitle>Sessions</CardTitle>
+              <CardDescription>Stored sessions from data/studio-sessions.json</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3 max-h-[38rem] overflow-y-auto">
+              {loadingList && <p className="text-sm text-muted-foreground">Refreshing sessions…</p>}
+              {sessions.map((session) => (
+                <button
+                  key={session.id}
+                  className={`w-full text-left border rounded-md p-3 transition-colors ${
+                    selectedId === session.id ? "border-cyan bg-cyan/10" : "border-border hover:border-cyan/70"
+                  }`}
+                  onClick={() => setSelectedId(session.id)}
+                  type="button"
+                >
+                  <div className="flex items-center justify-between gap-2 mb-2">
+                    <p className="font-medium text-sm truncate">{session.skillName}</p>
+                    <Badge variant={STATUS_BADGE_VARIANT[session.status]}>{session.status}</Badge>
                   </div>
+                  <p className="text-xs text-muted-foreground truncate">{session.id}</p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {new Date(session.startedAt).toLocaleString()}
+                  </p>
+                </button>
+              ))}
+              {!sessions.length && !loadingList && (
+                <p className="text-sm text-muted-foreground">No sessions yet.</p>
+              )}
+            </CardContent>
+          </Card>
 
-                  <div>
-                    <Label htmlFor="author">Author</Label>
-                    <Input
-                      id="author"
-                      value={skillData.author}
-                      onChange={(e) => setSkillData({ ...skillData, author: e.target.value })}
-                      placeholder="Team Reflectt"
-                    />
-                  </div>
+          <div className="lg:col-span-2 space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Start New Session</CardTitle>
+                <CardDescription>Choose a skill and pass JSON input payload.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <Label htmlFor="skill">Skill</Label>
+                  <select
+                    id="skill"
+                    className="w-full px-3 py-2 bg-input border border-border rounded-md text-foreground"
+                    value={skillSlug}
+                    onChange={(event) => setSkillSlug(event.target.value)}
+                  >
+                    {SKILL_OPTIONS.map((option) => (
+                      <option key={option.slug} value={option.slug}>
+                        {option.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <Label htmlFor="inputs">Inputs (JSON object)</Label>
+                  <Textarea
+                    id="inputs"
+                    value={inputsText}
+                    onChange={(event) => setInputsText(event.target.value)}
+                    rows={8}
+                  />
+                </div>
+                <Button
+                  className="bg-cyan hover:bg-cyan/90 text-background"
+                  onClick={startSession}
+                  disabled={submitting}
+                >
+                  {submitting ? "Starting…" : "Start Session"}
+                </Button>
+              </CardContent>
+            </Card>
 
-                  <div>
-                    <Label>Tags</Label>
-                    <div className="flex gap-2 mb-2">
-                      <Input
-                        value={tagInput}
-                        onChange={(e) => setTagInput(e.target.value)}
-                        onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
-                        placeholder="Add a tag..."
-                      />
-                      <Button onClick={addTag} variant="secondary">Add</Button>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      {skillData.tags.map(tag => (
-                        <Badge 
-                          key={tag} 
-                          variant="secondary"
-                          className="cursor-pointer"
-                          onClick={() => removeTag(tag)}
-                        >
-                          {tag} ×
-                        </Badge>
-                      ))}
+            <Card>
+              <CardHeader>
+                <CardTitle>Session Console</CardTitle>
+                <CardDescription>
+                  {selectedSession
+                    ? `Inspecting ${selectedSession.id}`
+                    : "Select a session to see details"}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {loadingSession && <p className="text-sm text-muted-foreground">Refreshing session logs…</p>}
+
+                {selectedSession ? (
+                  <>
+                    <div className="flex flex-wrap gap-2 items-center">
+                      <Badge variant="outline">{selectedSession.skillName}</Badge>
+                      <Badge variant={STATUS_BADGE_VARIANT[selectedSession.status]}>{selectedSession.status}</Badge>
+                      <span className="text-xs text-muted-foreground">Started {new Date(selectedSession.startedAt).toLocaleString()}</span>
                     </div>
-                  </div>
-
-                  <div>
-                    <Label htmlFor="install_cmd">Installation Command</Label>
-                    <Input
-                      id="install_cmd"
-                      value={skillData.install_cmd}
-                      onChange={(e) => setSkillData({ ...skillData, install_cmd: e.target.value })}
-                      placeholder="git clone https://github.com/..."
-                    />
-                  </div>
 
-                  <div>
-                    <Label htmlFor="repo_url">Repository URL</Label>
-                    <Input
-                      id="repo_url"
-                      value={skillData.repo_url}
-                      onChange={(e) => setSkillData({ ...skillData, repo_url: e.target.value })}
-                      placeholder="https://github.com/..."
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {step === 2 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Step 2: Configuration</CardTitle>
-                  <CardDescription>
-                    Define parameters, environment variables, and dependencies
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  {/* Parameters */}
-                  <div>
-                    <h3 className="font-semibold mb-3">Parameters</h3>
-                    <div className="space-y-2 mb-3">
-                      <Input
-                        placeholder="Parameter name"
-                        value={parameterInput.name}
-                        onChange={(e) => setParameterInput({ ...parameterInput, name: e.target.value })}
-                      />
-                      <select
-                        value={parameterInput.type}
-                        onChange={(e) => setParameterInput({ ...parameterInput, type: e.target.value })}
-                        className="w-full px-3 py-2 bg-input border border-border rounded-md text-foreground"
+                    <div className="flex gap-2 flex-wrap">
+                      <Button
+                        variant="secondary"
+                        disabled={submitting || selectedSession.status === "active"}
+                        onClick={() => patchSession({ status: "active", logMessage: "Session resumed" })}
                       >
-                        <option value="string">string</option>
-                        <option value="number">number</option>
-                        <option value="boolean">boolean</option>
-                      </select>
-                      <Input
-                        placeholder="Description"
-                        value={parameterInput.description}
-                        onChange={(e) => setParameterInput({ ...parameterInput, description: e.target.value })}
-                      />
-                      <Input
-                        placeholder="Default value"
-                        value={parameterInput.default}
-                        onChange={(e) => setParameterInput({ ...parameterInput, default: e.target.value })}
-                      />
-                      <Button onClick={addParameter} variant="secondary" className="w-full">
-                        Add Parameter
+                        Start
+                      </Button>
+                      <Button
+                        variant="outline"
+                        disabled={submitting || selectedSession.status !== "active"}
+                        onClick={() => patchSession({ status: "completed", logMessage: "Session stopped by user" })}
+                      >
+                        Stop
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        disabled={submitting}
+                        onClick={() => patchSession({ status: "error", logMessage: "Session marked as error" })}
+                      >
+                        Mark Error
                       </Button>
                     </div>
-                    <div className="space-y-2">
-                      {skillData.parameters.map((param, idx) => (
-                        <div key={idx} className="p-3 bg-secondary rounded-md flex justify-between items-start">
-                          <div>
-                            <div className="font-semibold">{param.name}</div>
-                            <div className="text-sm text-muted-foreground">{param.description}</div>
-                            <div className="text-xs text-muted-foreground">
-                              {param.type} · default: {param.default}
-                            </div>
-                          </div>
-                          <Button 
-                            size="sm" 
-                            variant="ghost"
-                            onClick={() => removeParameter(idx)}
-                          >
-                            ×
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
 
-                  <Separator />
+                    <Separator />
 
-                  {/* Environment Variables */}
-                  <div>
-                    <h3 className="font-semibold mb-3">Environment Variables</h3>
-                    <div className="space-y-2 mb-3">
-                      <Input
-                        placeholder="Variable name (e.g., API_KEY)"
-                        value={envVarInput.name}
-                        onChange={(e) => setEnvVarInput({ ...envVarInput, name: e.target.value })}
-                      />
-                      <Input
-                        placeholder="Description"
-                        value={envVarInput.description}
-                        onChange={(e) => setEnvVarInput({ ...envVarInput, description: e.target.value })}
-                      />
-                      <div className="flex items-center gap-2">
-                        <Checkbox
-                          id="required"
-                          checked={envVarInput.required}
-                          onCheckedChange={(checked) => 
-                            setEnvVarInput({ ...envVarInput, required: checked as boolean })
-                          }
-                        />
-                        <Label htmlFor="required">Required</Label>
-                      </div>
-                      <Button onClick={addEnvVar} variant="secondary" className="w-full">
-                        Add Environment Variable
-                      </Button>
-                    </div>
-                    <div className="space-y-2">
-                      {skillData.envVars.map((env, idx) => (
-                        <div key={idx} className="p-3 bg-secondary rounded-md flex justify-between items-start">
-                          <div>
-                            <div className="font-semibold">{env.name}</div>
-                            <div className="text-sm text-muted-foreground">{env.description}</div>
-                            <div className="text-xs text-muted-foreground">
-                              {env.required ? "Required" : "Optional"}
-                            </div>
-                          </div>
-                          <Button 
-                            size="sm" 
-                            variant="ghost"
-                            onClick={() => removeEnvVar(idx)}
-                          >
-                            ×
-                          </Button>
-                        </div>
-                      ))}
+                    <div>
+                      <Label>Inputs</Label>
+                      <pre className="mt-2 p-3 border border-border rounded-md bg-secondary text-xs overflow-x-auto">
+                        {prettyJson(selectedSession.inputs)}
+                      </pre>
                     </div>
-                  </div>
 
-                  <Separator />
-
-                  {/* Dependencies */}
-                  <div>
-                    <h3 className="font-semibold mb-3">Dependencies</h3>
-                    <div className="flex gap-2 mb-3">
-                      <Input
-                        placeholder="e.g., curl, jq, python"
-                        value={dependencyInput}
-                        onChange={(e) => setDependencyInput(e.target.value)}
-                        onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addDependency())}
+                    <div>
+                      <Label htmlFor="outputPatch">Output Patch (JSON object)</Label>
+                      <Textarea
+                        id="outputPatch"
+                        value={outputPatchText}
+                        onChange={(event) => setOutputPatchText(event.target.value)}
+                        rows={6}
                       />
-                      <Button onClick={addDependency} variant="secondary">Add</Button>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      {skillData.dependencies.map(dep => (
-                        <Badge 
-                          key={dep} 
-                          variant="secondary"
-                          className="cursor-pointer"
-                          onClick={() => removeDependency(dep)}
-                        >
-                          {dep} ×
-                        </Badge>
-                      ))}
+                      <Button className="mt-2" variant="secondary" onClick={applyOutputPatch} disabled={submitting}>
+                        Update Output
+                      </Button>
                     </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {step === 3 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Step 3: Testing</CardTitle>
-                  <CardDescription>
-                    Define sample inputs/outputs and validation rules
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div>
-                    <Label htmlFor="sampleInput">Sample Input</Label>
-                    <Textarea
-                      id="sampleInput"
-                      value={skillData.sampleInput}
-                      onChange={(e) => setSkillData({ ...skillData, sampleInput: e.target.value })}
-                      placeholder="Example input for your skill..."
-                      rows={4}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="sampleOutput">Sample Output</Label>
-                    <Textarea
-                      id="sampleOutput"
-                      value={skillData.sampleOutput}
-                      onChange={(e) => setSkillData({ ...skillData, sampleOutput: e.target.value })}
-                      placeholder="Expected output..."
-                      rows={4}
-                    />
-                  </div>
 
-                  <div>
-                    <Label htmlFor="validation">Validation Rules</Label>
-                    <Textarea
-                      id="validation"
-                      value={skillData.validation}
-                      onChange={(e) => setSkillData({ ...skillData, validation: e.target.value })}
-                      placeholder="How to validate that your skill works correctly..."
-                      rows={4}
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {step === 4 && (
-              <Card>
-                <CardHeader>
-                  <CardTitle>Step 4: Preview & Export</CardTitle>
-                  <CardDescription>
-                    Your skill is ready! Download or publish it.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="bg-secondary p-4 rounded-md">
-                    <h3 className="font-semibold mb-2">agent.json snippet</h3>
-                    <pre className="text-xs overflow-x-auto">
-                      <code>{generateAgentJson()}</code>
-                    </pre>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Button 
-                      onClick={downloadSkill}
-                      className="w-full bg-cyan hover:bg-cyan/90 text-background"
-                    >
-                      Download SKILL.md
-                    </Button>
-                    <Button 
-                      onClick={copyToClipboard}
-                      variant="secondary"
-                      className="w-full"
-                    >
-                      Copy to Clipboard
-                    </Button>
-                    <Button 
-                      variant="outline"
-                      className="w-full"
-                      onClick={() => window.open("https://foragents.dev/submit", "_blank")}
-                    >
-                      Publish to forAgents.dev
-                    </Button>
-                  </div>
+                    <div>
+                      <Label>Outputs</Label>
+                      <pre className="mt-2 p-3 border border-border rounded-md bg-secondary text-xs overflow-x-auto">
+                        {prettyJson(selectedSession.outputs)}
+                      </pre>
+                    </div>
 
-                  <Separator />
-
-                  <div className="text-sm text-muted-foreground">
-                    <p className="mb-2">
-                      💡 <strong>Next steps:</strong>
-                    </p>
-                    <ul className="list-disc list-inside space-y-1">
-                      <li>Test your skill with real agents</li>
-                      <li>Add it to your skill registry</li>
-                      <li>Share it with the community</li>
-                      <li>Gather feedback and iterate</li>
-                    </ul>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Navigation */}
-            <div className="flex gap-4 mt-6">
-              {step > 1 && (
-                <Button 
-                  onClick={() => setStep(step - 1)}
-                  variant="outline"
-                  className="flex-1"
-                >
-                  ← Previous
-                </Button>
-              )}
-              {step < 4 && (
-                <Button 
-                  onClick={() => setStep(step + 1)}
-                  className="flex-1 bg-cyan hover:bg-cyan/90 text-background"
-                >
-                  Next →
-                </Button>
-              )}
-              {step === 4 && (
-                <Button 
-                  onClick={() => setStep(0)}
-                  variant="outline"
-                  className="flex-1"
-                >
-                  Start New Skill
-                </Button>
-              )}
-            </div>
-          </div>
+                    <div>
+                      <Label htmlFor="logMessage">Add Log Entry</Label>
+                      <div className="mt-2 flex gap-2">
+                        <Input
+                          id="logMessage"
+                          value={logMessage}
+                          onChange={(event) => setLogMessage(event.target.value)}
+                          placeholder="e.g. Tool execution finished"
+                        />
+                        <Button variant="secondary" onClick={addLogEntry} disabled={submitting || !logMessage.trim()}>
+                          Add
+                        </Button>
+                      </div>
+                    </div>
 
-          {/* Right: Live Preview */}
-          <div className="lg:sticky lg:top-8 lg:self-start">
-            <Card className="max-h-[calc(100vh-8rem)] overflow-hidden flex flex-col">
-              <CardHeader>
-                <CardTitle className="text-cyan">Live Preview</CardTitle>
-                <CardDescription>SKILL.md</CardDescription>
-              </CardHeader>
-              <CardContent className="flex-1 overflow-y-auto">
-                <div className="prose prose-invert prose-sm max-w-none">
-                  <pre className="whitespace-pre-wrap text-xs bg-background p-4 rounded-md border border-border">
-                    {generatedSkillMd || "Fill in the form to see your SKILL.md preview..."}
-                  </pre>
-                </div>
+                    <div>
+                      <Label>Live Logs</Label>
+                      <div className="mt-2 border border-border rounded-md p-3 max-h-64 overflow-y-auto bg-secondary space-y-2">
+                        {selectedSession.logs.length ? (
+                          selectedSession.logs.map((entry, index) => (
+                            <div key={`${entry.timestamp}-${index}`} className="text-xs">
+                              <span className="text-muted-foreground">[{new Date(entry.timestamp).toLocaleTimeString()}]</span>{" "}
+                              <span>{entry.message}</span>
+                            </div>
+                          ))
+                        ) : (
+                          <p className="text-xs text-muted-foreground">No logs yet.</p>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <p className="text-sm text-muted-foreground">No session selected.</p>
+                )}
               </CardContent>
             </Card>
           </div>
diff --git a/src/lib/studioStore.ts b/src/lib/studioStore.ts
new file mode 100644
index 00000000..4c1e78f2
--- /dev/null
+++ b/src/lib/studioStore.ts
@@ -0,0 +1,98 @@
+import { promises as fs } from "fs";
+import path from "path";
+
+export type StudioSessionStatus = "active" | "completed" | "error";
+
+export type StudioLogEntry = {
+  timestamp: string;
+  message: string;
+};
+
+export type StudioSession = {
+  id: string;
+  skillSlug: string;
+  skillName: string;
+  status: StudioSessionStatus;
+  inputs: Record<string, unknown>;
+  outputs: Record<string, unknown>;
+  logs: StudioLogEntry[];
+  startedAt: string;
+  completedAt: string | null;
+};
+
+const STUDIO_SESSIONS_PATH = path.join(process.cwd(), "data", "studio-sessions.json");
+const VALID_STATUSES: StudioSessionStatus[] = ["active", "completed", "error"];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+function isStudioLogEntry(value: unknown): value is StudioLogEntry {
+  if (!isRecord(value)) return false;
+
+  return typeof value.timestamp === "string" && typeof value.message === "string";
+}
+
+function isStudioSession(value: unknown): value is StudioSession {
+  if (!isRecord(value)) return false;
+
+  const completedAtValid = value.completedAt === null || typeof value.completedAt === "string";
+
+  return (
+    typeof value.id === "string" &&
+    typeof value.skillSlug === "string" &&
+    typeof value.skillName === "string" &&
+    typeof value.status === "string" &&
+    VALID_STATUSES.includes(value.status as StudioSessionStatus) &&
+    isRecord(value.inputs) &&
+    isRecord(value.outputs) &&
+    Array.isArray(value.logs) &&
+    value.logs.every((entry) => isStudioLogEntry(entry)) &&
+    typeof value.startedAt === "string" &&
+    completedAtValid
+  );
+}
+
+export function isStudioSessionStatus(value: unknown): value is StudioSessionStatus {
+  return typeof value === "string" && VALID_STATUSES.includes(value as StudioSessionStatus);
+}
+
+export function sanitizeInputs(value: unknown): Record<string, unknown> {
+  if (!isRecord(value)) return {};
+  return value;
+}
+
+export function sanitizeOutputs(value: unknown): Record<string, unknown> {
+  if (!isRecord(value)) return {};
+  return value;
+}
+
+export async function readStudioSessions(): Promise<StudioSession[]> {
+  try {
+    const raw = await fs.readFile(STUDIO_SESSIONS_PATH, "utf-8");
+    const parsed = JSON.parse(raw) as unknown;
+
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed
+      .filter((item): item is StudioSession => isStudioSession(item))
+      .sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime());
+  } catch {
+    return [];
+  }
+}
+
+export async function writeStudioSessions(sessions: StudioSession[]): Promise<void> {
+  await fs.mkdir(path.dirname(STUDIO_SESSIONS_PATH), { recursive: true });
+  await fs.writeFile(STUDIO_SESSIONS_PATH, `${JSON.stringify(sessions, null, 2)}\n`, "utf-8");
+}
+
+export function formatSkillNameFromSlug(skillSlug: string): string {
+  return skillSlug
+    .split("-")
+    .filter(Boolean)
+    .map((token) => token.charAt(0).toUpperCase() + token.slice(1))
+    .join(" ");
+}