pi-design-deck 0.1.0

package/README.md

@@ -0,0 +1,329 @@
+<p>
+  <img src="banner.png" alt="pi-design-deck" width="1100">
+</p>
+
+# Design Deck
+
+A tool for [Pi coding agent](https://github.com/badlogic/pi-mono/) that presents multi-slide visual decision decks in the browser. Each slide shows 2-4 high-fidelity previews — code diffs, architecture diagrams, UI mockups — and you pick one per slide. The agent gets back a clean selection map and moves on to implementation.
+
+## Usage
+
+Just ask. The agent reaches for the design deck when visual comparison makes sense.
+
+```
+show me 3 architecture options for the backend
+present a few UI directions for the settings page
+what are my options for the auth flow? show me visually
+read the PRD at docs/api-plan.md and present the key decisions
+```
+
+Three slash commands are also available for more structured flows:
+
+- **`/deck`** — general purpose. Give it a topic or run it bare.
+- **`/deck-plan docs/plan.md`** — reads a plan or PRD, identifies decision points, builds slides for each.
+- **`/deck-discover`** — interviews you first to gather requirements, then builds a deck from what it learned.
+
+## Why
+
+The interview tool gathers structured input — you answer questions. The design deck is the other direction: the agent shows you visual options and you pick. They work together — interview discovers requirements, deck presents the resulting options — but they're distinct tools for distinct jobs.
+
+The persistent server architecture means the browser stays open across tool re-invocations. When you click "Generate another option," the agent creates it and pushes it into the live deck via SSE — no page reloads, no lost state.
+
+## Install
+
+```bash
+pi install npm:pi-design-deck
+```
+
+Restart pi to load the extension and the bundled `design-deck` skill.
+
+**Requirements:**
+- pi-agent v0.35.0 or later (extensions API)
+
+## Quick Start
+
+The agent builds slides as JSON. Each slide is one decision, each option is one approach:
+
+```json
+{
+  "title": "API Design",
+  "slides": [
+    {
+      "id": "auth",
+      "title": "Authentication Strategy",
+      "context": "Choose how users authenticate with the API.",
+      "columns": 2,
+      "options": [
+        {
+          "label": "JWT + Refresh Tokens",
+          "description": "Stateless, horizontally scalable",
+          "aside": "Tokens are self-contained — no session store needed.\nWatch for token size with many claims.",
+          "previewBlocks": [
+            { "type": "code", "code": "const token = jwt.sign({ sub: user.id }, SECRET, { expiresIn: '15m' });\nres.cookie('refresh', refreshToken, { httpOnly: true });", "lang": "ts" },
+            { "type": "mermaid", "content": "sequenceDiagram\n  Client->>API: POST /login\n  API->>Client: JWT + refresh cookie\n  Client->>API: GET /data (Bearer JWT)\n  API->>Client: 200 OK" }
+          ],
+          "recommended": true
+        },
+        {
+          "label": "Session Cookies",
+          "description": "Server-side sessions with Redis backing",
+          "aside": "Simple mental model. Session invalidation is instant.\nRequires sticky sessions or shared session store.",
+          "previewBlocks": [
+            { "type": "code", "code": "app.use(session({ store: new RedisStore({ client }), secret: SECRET }));", "lang": "ts" },
+            { "type": "mermaid", "content": "sequenceDiagram\n  Client->>API: POST /login\n  API->>Redis: Store session\n  API->>Client: Set-Cookie: sid=...\n  Client->>API: GET /data (Cookie)\n  API->>Redis: Lookup session" }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+The browser opens, the user picks "JWT + Refresh Tokens", and the agent receives:
+
+```
+{ "auth": "JWT + Refresh Tokens" }
+```
+
+## Features
+
+- **Preview blocks**: Four typed block types — `code` (Prism.js syntax highlighting), `mermaid` (Mermaid.js diagrams), `html` (raw HTML), and `image` (served from disk). Mix freely within one option.
+- **Raw HTML previews**: Full `previewHtml` support for custom UI mockups with inline styles. Use when blocks aren't enough.
+- **Generate-more loop**: Users click "Generate another option" and the agent pushes a new option into the live deck via SSE. No page reload.
+- **Model selector**: Dropdown to pick which model generates new options. Save as default, or override per-request.
+- **Thinking level**: Adjust reasoning effort for option generation when the selected model supports it.
+- **Slide columns**: `columns` property (1, 2, or 3) per slide. Auto-detected from option count if omitted.
+- **Smart rebalancing**: Grid layout recalculates after generate-more adds options to minimize orphans.
+- **Option aside**: Explanatory text rendered below the preview. Supports `\n` for line breaks.
+- **Save/load snapshots**: `Cmd+S` saves the deck to disk. Pass a file path to `slides` to reload a saved deck with selections pre-populated.
+- **Light/dark/auto theme**: Full theme toggle with `Cmd+Shift+L` (configurable). Persists in localStorage.
+- **Heartbeat watchdog**: Server detects lost browser connections (60s grace) and cleans up.
+- **Idle timeout**: 5-minute inactivity timer after generate-more. Closes the deck if the agent doesn't respond.
+- **Escape confirmation**: Pressing Escape with existing selections shows a confirmation bar before cancelling.
+- **ARIA / keyboard**: `role="radiogroup"` on options, arrow key navigation, Space/Enter to select, number keys for quick pick.
+
+## How It Works
+
+```
+┌─────────┐      ┌────────────────────────────────────────────┐      ┌─────────┐
+│  Agent   │      │             Browser Deck                   │      │  Agent   │
+│ invokes  ├─────►│                                            ├─────►│ receives │
+│design_   │      │  pick → pick → generate more → pick → submit     │selections│
+│  deck    │      │   ↑              ↑                         │      └─────────┘
+└─────────┘      │   │    SSE push ─┘   heartbeat ────────────┤
+                 └────────────────────────────────────────────┘
+```
+
+**Lifecycle:**
+1. Agent calls `design_deck()` with slides JSON — local HTTP server starts, browser opens
+2. User navigates slides, picks one option per slide
+3. Optionally clicks "Generate another option" — agent generates and pushes via `add-option`, deck stays open
+4. User submits — selections returned to agent as `{ slideId: "selected label" }`
+5. Tab auto-closes, thinking level restored to pre-deck value
+
+The server persists across tool re-invocations. When generate-more fires, the tool resolves with instructions for the agent to create a new option and call `design_deck({ action: "add-option", slideId: "...", option: "..." })`. The browser shows a skeleton placeholder with shimmer animation until the new option arrives via SSE.
+
+## Slides
+
+### previewBlocks vs previewHtml
+
+Every option needs exactly one of `previewBlocks` or `previewHtml` (not both, not neither).
+
+**previewBlocks** — structured array of typed blocks, rendered in order:
+
+| Block | Required Fields | Description |
+|-------|----------------|-------------|
+| `code` | `code`, `lang` | Syntax-highlighted code (Prism.js + autoloader) |
+| `mermaid` | `content` | Mermaid diagram. Optional `theme` object for per-block overrides |
+| `html` | `content` | Raw HTML snippet |
+| `image` | `src`, `alt` | Image from disk (absolute path). Optional `caption` |
+
+```json
+{
+  "previewBlocks": [
+    { "type": "mermaid", "content": "graph TD\n  A-->B-->C" },
+    { "type": "code", "code": "export default router;", "lang": "ts" },
+    { "type": "html", "content": "<div style='color:#888'>Implementation notes...</div>" }
+  ]
+}
+```
+
+**previewHtml** — raw HTML string injected directly into the preview container. Full control over styling:
+
+```json
+{
+  "previewHtml": "<div style='font-family: system-ui; padding: 16px'><h3>Dashboard Layout</h3><div style='display: grid; grid-template-columns: 200px 1fr'>...</div></div>"
+}
+```
+
+### Image Blocks
+
+Image blocks reference absolute file paths. The server copies each file into a temp directory and serves it via `/assets/` — the browser never sees the original path. Cleanup happens when the deck closes.
+
+### Columns
+
+Each slide supports `columns: 1 | 2 | 3` to control the grid layout. Omit it and the deck auto-detects based on option count. Use `columns: 1` for wide architecture diagrams, `columns: 2` for side-by-side comparisons.
+
+### Aside
+
+The `aside` field renders explanatory text below the preview with styled typography. Use `\n` for line breaks. Good for trade-off summaries, pros/cons, or implementation notes that complement the visual preview.
+
+### Reserved IDs
+
+The slide ID `"summary"` is reserved for the built-in summary slide that appears after all user slides. Don't use it.
+
+## Generate-More Loop
+
+When the user clicks "Generate another option," the tool resolves with a structured prompt telling the agent which slide needs a new option, what options already exist, and what format to use. The agent generates one new option and pushes it:
+
+```typescript
+design_deck({
+  action: "add-option",
+  slideId: "arch",
+  option: '{"label": "Serverless", "previewBlocks": [{"type": "code", "code": "...", "lang": "ts"}]}'
+})
+```
+
+The browser shows the new option with an entry animation. The tool blocks again, waiting for the next user action (submit, cancel, or another generate-more).
+
+### Model Override
+
+The deck shows a model dropdown when 2+ models are available. Users pick which model generates new options. When a model other than the current one is selected, the generate-more result instructs the agent to delegate to a subagent with that model.
+
+The default model can be set in the UI (saved to settings) or in `settings.json`:
+
+```json
+{
+  "designDeck": {
+    "generateModel": "google/gemini-3.1-pro"
+  }
+}
+```
+
+Priority: browser selection > settings default > current model.
+
+### Prompt Input
+
+An optional text input next to the generate button lets users provide instructions that flow through to the agent (e.g., "make it more minimal" or "use WebSockets instead").
+
+## Saving and Loading
+
+**Manual save:** Press `Cmd+S` (or `Ctrl+S`) at any time to save the current deck state to disk.
+
+**Auto-save on submit:** Enabled by default. Saves a snapshot after successful submission with a `-submitted` suffix.
+
+**Auto-save on cancel:** If you cancel a deck that has selections, it's automatically saved with a `-cancelled` suffix. This makes it easy to recover work if you accidentally close the tab or change your mind.
+
+**Loading a saved deck:**
+```typescript
+design_deck({ slides: "~/.pi/deck-snapshots/api-design-myapp-main-2026-02-22-143000/deck.json" })
+```
+
+The deck opens with selections pre-populated and image paths resolved relative to the snapshot directory.
+
+**Snapshot structure:**
+```
+~/.pi/deck-snapshots/
+  {title}-{project}-{branch}-{date}-{time}[-submitted|-cancelled]/
+    deck.json           # Config + selections + metadata
+    images/             # Copied image assets (relative paths in JSON)
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Arrow keys` | Navigate slides (left/right) or options within a slide (up/down) |
+| `Space` / `Enter` | Select focused option |
+| `1`-`9` | Quick-select option by number |
+| `Enter` (on last slide) | Submit |
+| `Cmd+S` | Save deck snapshot |
+| `Cmd+Shift+L` | Toggle theme (configurable) |
+| `Escape` | Cancel (confirmation bar if selections exist) |
+
+## Configuration
+
+Settings in `~/.pi/agent/settings.json` under the `designDeck` key:
+
+```json
+{
+  "designDeck": {
+    "port": 0,
+    "browser": "chrome",
+    "snapshotDir": "~/.pi/deck-snapshots",
+    "autoSaveOnSubmit": true,
+    "generateModel": "google/gemini-3.1-pro",
+    "theme": {
+      "mode": "dark",
+      "toggleHotkey": "mod+shift+l"
+    }
+  }
+}
+```
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| `port` | `0` (random) | Fixed port for the deck server |
+| `browser` | System default | Browser app to open (e.g., `"chrome"`, `"firefox"`) |
+| `snapshotDir` | `~/.pi/deck-snapshots` | Directory for saved deck snapshots |
+| `autoSaveOnSubmit` | `true` | Auto-save snapshot on successful submit |
+| `generateModel` | — | Default model for generate-more (e.g., `"google/gemini-3.1-pro"`) |
+| `theme.mode` | `"dark"` | `"dark"`, `"light"`, or `"auto"` (follows OS) |
+| `theme.toggleHotkey` | `"mod+shift+l"` | Hotkey string to toggle theme |
+
+**Migration:** If you previously had `deckGenerateModel` under the `interview` key, it's automatically migrated to `designDeck.generateModel` on first load.
+
+## Tool Parameters
+
+The agent handles these when you use the slash commands or ask in natural language. This documents the underlying tool API.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `slides` | string | JSON string of deck config, or file path to a saved deck |
+| `action` | `"add-option"` \| `"replace-options"` | Push or replace options in a running deck |
+| `slideId` | string | Target slide ID (required with actions) |
+| `option` | string | JSON string of one option (required with `add-option`) |
+| `options` | string | JSON string of option array (required with `replace-options`) |
+
+Three modes of invocation:
+1. **Start a new deck:** `design_deck({ slides: "<JSON>" })`
+2. **Add option to running deck:** `design_deck({ action: "add-option", slideId: "...", option: "<JSON>" })`
+3. **Replace all options on a slide:** `design_deck({ action: "replace-options", slideId: "...", options: "<JSON array>" })`
+
+## File Structure
+
+```
+pi-design-deck/
+├── index.ts             # Tool registration, module-level state, lifecycle
+├── generate-prompts.ts  # Prompt builders for generate-more / regenerate
+├── deck-schema.ts       # TypeScript types and validation (no dependencies)
+├── deck-server.ts       # HTTP server, SSE, asset serving, snapshots
+├── server-utils.ts      # Shared HTTP/session utilities
+├── settings.ts          # Settings with designDeck namespace + migration
+├── schema.test.ts       # 48 tests across 3 describe blocks
+├── form/
+│   ├── deck.html        # HTML template (loads CSS/JS, Prism, Mermaid)
+│   ├── css/             # Theme variables, layout, preview blocks, controls
+│   └── js/              # Client: state, rendering, interaction, session
+├── prompts/
+│   ├── deck.md          # /deck — general purpose
+│   ├── deck-plan.md     # /deck-plan — design from plan/PRD
+│   └── deck-discover.md # /deck-discover — interview then design
+└── skills/
+    └── design-deck/
+        └── SKILL.md     # Agent skill for on-demand loading
+```
+
+## Bundled Skill
+
+The extension includes a `design-deck` skill at `skills/design-deck/SKILL.md` that teaches the agent when and how to use the design deck effectively — discovery-first vs deck-direct, slide structure, previewBlocks vs previewHtml, the generate-more loop, and model override patterns.
+
+The skill is declared in `package.json` under `pi.skills` and is automatically discovered when the extension is installed. No manual copying needed.
+
+## Limitations
+
+- Only one deck can be active at a time. Complete or cancel before starting another.
+- Image blocks require absolute file paths on disk (no URLs).
+- The `summary` slide ID is reserved and cannot be used for custom slides.
+- Mermaid diagrams load from CDN — requires internet on first load.
+- macOS tested primarily; Linux and Windows support is best-effort.

package/deck-schema.ts

@@ -0,0 +1,262 @@
+export type PreviewBlock =
+	| { type: "html"; content: string }
+	| { type: "mermaid"; content: string; theme?: Record<string, string> }
+	| { type: "code"; code: string; lang: string }
+	| { type: "image"; src: string; alt: string; caption?: string };
+
+export interface DeckOption {
+	label: string;
+	description?: string;
+	aside?: string;
+	previewHtml?: string;
+	previewBlocks?: PreviewBlock[];
+	recommended?: boolean;
+}
+
+export interface DeckSlide {
+	id: string;
+	title: string;
+	context?: string;
+	columns?: 1 | 2 | 3;
+	options: DeckOption[];
+}
+
+export interface DeckConfig {
+	title?: string;
+	slides: DeckSlide[];
+}
+
+function validatePreviewBlock(block: unknown, slideId: string, label: string, index: number): PreviewBlock {
+	if (!block || typeof block !== "object") {
+		throw new Error(`Slide "${slideId}": option "${label}" previewBlocks[${index}] must be an object`);
+	}
+
+	const b = block as Record<string, unknown>;
+	const validTypes = ["html", "mermaid", "code", "image"];
+
+	if (typeof b.type !== "string" || !validTypes.includes(b.type)) {
+		throw new Error(`Slide "${slideId}": option "${label}" previewBlocks[${index}] type must be one of: ${validTypes.join(", ")}`);
+	}
+
+	if (b.type === "html") {
+		if (typeof b.content !== "string" || b.content.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" html block must have non-empty content`);
+		}
+	} else if (b.type === "mermaid") {
+		if (typeof b.content !== "string" || b.content.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" mermaid block must have non-empty content`);
+		}
+		if (b.theme !== undefined) {
+			if (!b.theme || typeof b.theme !== "object" || Array.isArray(b.theme)) {
+				throw new Error(`Slide "${slideId}": option "${label}" mermaid block theme must be an object of string values`);
+			}
+			for (const [key, val] of Object.entries(b.theme as Record<string, unknown>)) {
+				if (typeof val !== "string") {
+					throw new Error(`Slide "${slideId}": option "${label}" mermaid block theme.${key} must be a string`);
+				}
+			}
+		}
+	} else if (b.type === "code") {
+		if (typeof b.code !== "string" || b.code.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" code block must have non-empty code`);
+		}
+		if (typeof b.lang !== "string" || b.lang.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" code block must have non-empty lang`);
+		}
+	} else if (b.type === "image") {
+		if (typeof b.src !== "string" || b.src.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" image block must have non-empty src`);
+		}
+		if (typeof b.alt !== "string" || b.alt.trim() === "") {
+			throw new Error(`Slide "${slideId}": option "${label}" image block must have non-empty alt`);
+		}
+		if (b.caption !== undefined && typeof b.caption !== "string") {
+			throw new Error(`Slide "${slideId}": option "${label}" image block caption must be a string`);
+		}
+	}
+
+	return b as unknown as PreviewBlock;
+}
+
+function validateDeckOption(option: unknown, slideId: string, index: number): DeckOption {
+	if (!option || typeof option !== "object") {
+		throw new Error(`Slide "${slideId}": option at index ${index} must be an object`);
+	}
+
+	const obj = option as Record<string, unknown>;
+
+	if (typeof obj.label !== "string" || obj.label.trim() === "") {
+		throw new Error(`Slide "${slideId}": option at index ${index} must have a non-empty label`);
+	}
+
+	if (obj.previewHtml !== undefined && typeof obj.previewHtml !== "string") {
+		throw new Error(
+			`Slide "${slideId}": option "${obj.label}" previewHtml must be a string`
+		);
+	}
+
+	const hasHtml = typeof obj.previewHtml === "string" && obj.previewHtml.trim() !== "";
+	const hasBlocks = Array.isArray(obj.previewBlocks) && obj.previewBlocks.length > 0;
+
+	if (hasHtml && hasBlocks) {
+		throw new Error(
+			`Slide "${slideId}": option "${obj.label}" must have either previewHtml or previewBlocks, not both`
+		);
+	}
+
+	if (!hasHtml && !hasBlocks) {
+		throw new Error(
+			`Slide "${slideId}": option "${obj.label}" must have non-empty previewHtml or previewBlocks`
+		);
+	}
+
+	if (hasBlocks) {
+		for (let i = 0; i < (obj.previewBlocks as unknown[]).length; i++) {
+			validatePreviewBlock((obj.previewBlocks as unknown[])[i], slideId, obj.label as string, i);
+		}
+	}
+
+	if (obj.description !== undefined && typeof obj.description !== "string") {
+		throw new Error(`Slide "${slideId}": option "${obj.label}" description must be a string`);
+	}
+
+	if (obj.aside !== undefined && typeof obj.aside !== "string") {
+		throw new Error(`Slide "${slideId}": option "${obj.label}" aside must be a string`);
+	}
+
+	if (obj.recommended !== undefined && typeof obj.recommended !== "boolean") {
+		throw new Error(`Slide "${slideId}": option "${obj.label}" recommended must be boolean`);
+	}
+
+	return obj as unknown as DeckOption;
+}
+
+function validateDeckSlide(slide: unknown, index: number): DeckSlide {
+	if (!slide || typeof slide !== "object") {
+		throw new Error(`Slide at index ${index} must be an object`);
+	}
+
+	const obj = slide as Record<string, unknown>;
+
+	if (typeof obj.id !== "string" || obj.id.trim() === "") {
+		throw new Error(`Slide at index ${index} must have a non-empty id`);
+	}
+
+	if (obj.id === "summary") {
+		throw new Error(`Slide at index ${index}: id "summary" is reserved`);
+	}
+
+	if (typeof obj.title !== "string" || obj.title.trim() === "") {
+		throw new Error(`Slide "${obj.id}": title must be a non-empty string`);
+	}
+
+	if (obj.context !== undefined && typeof obj.context !== "string") {
+		throw new Error(`Slide "${obj.id}": context must be a string`);
+	}
+
+	if (obj.columns !== undefined) {
+		if (obj.columns !== 1 && obj.columns !== 2 && obj.columns !== 3) {
+			throw new Error(`Slide "${obj.id}": columns must be 1, 2, or 3`);
+		}
+	}
+
+	if (!Array.isArray(obj.options) || obj.options.length === 0) {
+		throw new Error(`Slide "${obj.id}": options must be a non-empty array`);
+	}
+
+	obj.options.forEach((option, optionIndex) => {
+		validateDeckOption(option, obj.id as string, optionIndex);
+	});
+
+	return obj as unknown as DeckSlide;
+}
+
+export function isDeckOption(value: unknown): value is DeckOption {
+	if (!value || typeof value !== "object") return false;
+	const obj = value as Record<string, unknown>;
+	if (typeof obj.label !== "string" || obj.label.trim() === "") return false;
+	if (obj.previewHtml !== undefined && typeof obj.previewHtml !== "string") return false;
+
+	const hasHtml = typeof obj.previewHtml === "string" && obj.previewHtml.trim() !== "";
+	const hasBlocks = Array.isArray(obj.previewBlocks) && obj.previewBlocks.length > 0;
+	if (!hasHtml && !hasBlocks) return false;
+	if (hasHtml && hasBlocks) return false;
+
+	if (hasBlocks) {
+		try {
+			for (let i = 0; i < (obj.previewBlocks as unknown[]).length; i++) {
+				validatePreviewBlock((obj.previewBlocks as unknown[])[i], "check", obj.label as string, i);
+			}
+		} catch {
+			return false;
+		}
+	}
+
+	if (obj.description !== undefined && typeof obj.description !== "string") return false;
+	if (obj.aside !== undefined && typeof obj.aside !== "string") return false;
+	if (obj.recommended !== undefined && typeof obj.recommended !== "boolean") return false;
+	return true;
+}
+
+export function validateDeckConfig(data: unknown): DeckConfig {
+	if (!data || typeof data !== "object" || Array.isArray(data)) {
+		throw new Error("Deck config must be an object");
+	}
+
+	const obj = data as Record<string, unknown>;
+
+	if (obj.title !== undefined && typeof obj.title !== "string") {
+		throw new Error("Deck config title must be a string");
+	}
+
+	if (!Array.isArray(obj.slides) || obj.slides.length === 0) {
+		throw new Error("Deck config slides must be a non-empty array");
+	}
+
+	const ids = new Set<string>();
+	obj.slides.forEach((slide, index) => {
+		const validated = validateDeckSlide(slide, index);
+		if (ids.has(validated.id)) {
+			throw new Error(`Duplicate slide id: "${validated.id}"`);
+		}
+		ids.add(validated.id);
+	});
+
+	return obj as unknown as DeckConfig;
+}
+
+export interface SavedDeckData {
+	config: DeckConfig;
+	selections: Record<string, string>;
+	savedAt: string;
+	savedFrom?: {
+		cwd: string;
+		branch: string | null;
+		sessionId: string;
+	};
+}
+
+export function validateSavedDeck(data: unknown): SavedDeckData {
+	if (!data || typeof data !== "object" || Array.isArray(data)) {
+		throw new Error("Invalid saved deck: must be an object");
+	}
+
+	const obj = data as Record<string, unknown>;
+	const config = validateDeckConfig(obj.config);
+
+	const selections: Record<string, string> = {};
+	if (obj.selections && typeof obj.selections === "object" && !Array.isArray(obj.selections)) {
+		for (const [key, val] of Object.entries(obj.selections as Record<string, unknown>)) {
+			if (typeof val === "string") selections[key] = val;
+		}
+	}
+
+	return {
+		config,
+		selections,
+		savedAt: typeof obj.savedAt === "string" ? obj.savedAt : new Date().toISOString(),
+		savedFrom: obj.savedFrom && typeof obj.savedFrom === "object"
+			? obj.savedFrom as SavedDeckData["savedFrom"]
+			: undefined,
+	};
+}