[{"id":"app-presentation-creator","name":"Presentation Creator","icon":"📊","description":"Turn your rough notes into a polished, ready-to-share presentation in seconds. Describe changes in plain English and the AI drafts, refines, and exports a self-contained HTML slideshow.","badgeClass":"","type":"docops","path":"/presentation-creator","appId":"presentation-creator","readme":"# 🖥 Presentation Creator\n\n\u003e **Turn your simple notes into stunning, self-contained HTML slide decks in seconds!**\n\nWelcome to **Presentation Creator**—the fast, effortless way to transform rough outlines, meeting notes, or ideas into beautifully formatted presentation decks. Powered by smart AI models, Presentation Creator takes care of design, structure, and imagery so you can focus on telling your story.\n\n---\n\n## ✨ Why You\u0027ll Love Presentation Creator\n\n* **Effortless Slide Generation**: Turn plain text or bullet points into polished, interactive HTML slide decks.\n* **Iterative Refinement**: Refine content or request specific visual/design updates without starting from scratch.\n* **Custom Illustrations \u0026 Visuals**: Elevate your slides with custom imagery, icons, and inline SVG illustrations.\n* **Instant Live Preview**: See your presentation update in real time with built-in preview and side-by-side controls.\n* **Fully Standalone**: Download a single, portable HTML file that opens in any web browser—no extra software required!\n* **Auto-Save Convenience**: Never lose an idea; your notes automatically save as you type.\n\n---\n\n## 🚀 Getting Started\n\nCreating a presentation is simple! Follow the 3-step pipeline to build, update, and polish your deck.\n\n### Step 1: Draft Your Presentation\n1. In the **Pipeline** tab, navigate to **Step 1: Draft Presentation**.\n2. Type or paste your outline into the **Source notes** text area. You can use standard text or simple Markdown bullet points.\n3. Click **▶ Draft Presentation**.\n4. Once completed, your new presentation will instantly load in the **Preview** tab!\n\n### Step 2: Update Content \u0026 Design\nNeed to add a slide, modify numbers, or adjust the theme color?\n1. Go to **Step 2: Update Presentation**.\n2. Enter your requested changes in the **Update notes** field (e.g., *\"Add a slide about key team members\"* or *\"Use a dark theme with blue accents\"*).\n3. Click **▶ Update Presentation**.\n\n### Step 3: Add Visuals \u0026 Illustrations\nBring your slides to life with custom artwork and icons.\n1. Head to **Step 3: Illustrate Presentation**.\n2. Describe the visual style or specific slide imagery in the **Illustration notes** field (e.g., *\"Add clean line-art icons for key metrics\"* or *\"Include a title slide hero graphic\"*).\n3. Click **▶ Illustrate Presentation**.\n\n---\n\n## 👁 Previewing \u0026 Sharing Your Deck\n\nClick over to the **Preview** tab at any time to inspect your presentation:\n\n* **🔄 Refresh**: Instantly reloads the preview frame with the latest updates.\n* **↗ Open**: Opens the presentation in a full web browser tab—perfect for presenting live!\n* **⬇ Download**: Downloads `presentation.html` directly to your device so you can share it or present offline.\n\n---\n\n## 🛠 Settings \u0026 Customization\n\nCustomize how AI crafts your presentation in the **Settings** tab:\n\n* **Illustrated Draft Mode**: Toggle this option if you want initial draft generations to include background imagery and illustrations from step one.\n* **AI Model Selection**:\n  * **Smart Model**: Handles creative writing, complex layouts, and slide structuring.\n  * **Fast Model**: Quick edits, minor text revisions, and fast reformatting.\n  * **Image Model**: Generates custom artwork and slide visuals.\n\n---\n\n## 💡 Tips for Best Results\n\n* **Keep Notes Clear**: The clearer your source notes, the better structured your initial draft will be.\n* **Specific Design Requests**: When using Update or Illustrate notes, feel free to mention brand colors, font preferences, or layout styles.\n* **Use Preview Mode**: Always check the **Open in new tab** view before presenting to test full-screen layout and transitions.\n\nEnjoy creating effortless, engaging presentations! 🎉","category":"Create","tags":["Office","PDF"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"presentation-creator/background.png","videoUrl":"https://cognotik.com/tours/office/edit/presentation-creator.mp4","exampleSessions":{"Jurassic Jokes":"https://hosted.cognotik.com/presentation-creator/fileIndex/G-20260519-q8K076Q9/app.html","Business Review":"https://hosted.cognotik.com/presentation-creator/fileIndex/G-20260522-u9187Dil/app.html"}},{"id":"app-tex-wizard","name":"TeX Wizard","icon":"📝","description":"AI-powered LaTeX document authoring and PDF rendering tool. Describe your document in plain English and let the AI generate, compile, and iteratively refine a professional PDF — no LaTeX knowledge required.","badgeClass":"","type":"docops","path":"/tex-wizard","appId":"tex-wizard","readme":"# 📐 TeX Wizard\n\n\u003e **Transform your rough notes into publication-ready, beautifully typeset LaTeX documents effortlessly.**\n\nWelcome to **TeX Wizard**, your AI-powered companion for document creation and PDF rendering! Whether you need to craft an academic paper, a formal report, a resume, or detailed mathematical notes, TeX Wizard turns plain descriptions into professionally styled PDFs—without requiring you to master complex formatting code.\n\n---\n\n## ✨ Why TeX Wizard?\n\nCreating polished, professional documents usually means wrestling with typesetting rules, complex markup, and compiler setup. TeX Wizard bridges that gap:\n\n* **Plain Language to Professional PDF:** Describe what you want in simple notes, and let AI generate clean, valid LaTeX code for you.\n* **Intelligent Document Review:** Built-in AI vision checks your rendered PDF for visual flaws and automatically suggests targeted improvements.\n* **Full Creative Control:** Fine-tune style directives, tweak raw LaTeX directly if you prefer hands-on editing, or let the AI handle revisions automatically.\n* **Instant Feedback Loop:** Live PDF previews and interactive build logs ensure you always know exactly how your document looks and compiles.\n\n---\n\n## 🚀 Getting Started\n\nGetting started with TeX Wizard is easy! Follow these simple steps to build your first document:\n\n### Step 1: Set Up Your Inputs 📝\n1. **Notes:** In the **Notes** box, type or paste the text and structure you want in your document. Describe headings, equations, lists, tables, or key points.\n2. **Style Directives (Optional):** Want a specific document layout? Use the **Style Directives** box to specify preferences like font size, layout (e.g., article or report), color schemes, or specific packages.\n3. **Model Selection:** Choose your preferred AI models in the top toolbar (Smart Model for complex rendering, Fast Model for updates, and Image Model for visual OCR review).\n\n---\n\n### Step 2: Run the Magic Pipeline ⚙️\n\nFollow the numbered step-by-step pipeline to bring your document to life:\n\n1. **1 · Render TeX**  \n   Click **▶ Render** to generate your LaTeX code (`doc.tex`) directly from your notes and style directives.\n\n2. **2 · Build PDF**  \n   Click **🔨 Build** to compile your generated LaTeX into a high-quality `doc.pdf`. Once compiled, your document will appear in the **Output** preview panel.\n\n3. **4 · Review OCR (Automated Visual QA)**  \n   Click **🔍 Review** to have AI inspect the rendered PDF for formatting issues, layout misalignments, or structural improvements. It automatically generates detailed revision suggestions in your **Update Notes**.\n\n4. **3 · Update TeX**  \n   Click **✏️ Update** to apply the revision instructions from your **Update Notes** directly to your document source, then rebuild the PDF to see the improvements!\n\n---\n\n### Step 3: Inspect \u0026 Export Your Output 📄\n\n* **Direct Editing:** View and tweak the generated code in the **doc.tex** card at any time. Click **💾 Save** or press `Ctrl+S` (`Cmd+S` on Mac) to keep your changes.\n* **Download TeX:** Export the raw `.tex` file using the **⬇ Download** button for use in offline LaTeX editors or distribution.\n* **Preview \u0026 Open PDF:** Check out your live preview directly in the browser or click **⬇ Open** to open `doc.pdf` in a dedicated browser tab for printing or downloading.\n\n---\n\n## 💡 Pro Tips for Best Results\n\n* **Keyboard Shortcut:** Press `Ctrl+S` (or `Cmd+S` on Mac) anywhere in the application to instantly save all open text editors.\n* **Auto-Save:** Your notes and settings automatically save as you type, so you never have to worry about losing progress.\n* **Iterative Polish:** Run **Review OCR** and **Update TeX** repeatedly to continuously refine formatting and design aesthetics until your document looks perfect.\n* **Build Logs:** If a compilation encounters an issue, check the **📋 Build Log** card for helpful details and error diagnostics.\n\n---\n\nHappy typesetting with **TeX Wizard**! 📐✨","category":"Create","tags":["Office","PDF","Devs"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"tex-wizard/background.png","videoUrl":"https://cognotik.com/tours/office/edit/tex-wizard.mp4","exampleSessions":{"Project Polaris":"https://hosted.cognotik.com/tex-wizard/fileIndex/G-20260522-bgz8M0cN/app.html"}},{"id":"app-ocr-import","name":"OCR Import","icon":"📷","description":"AI-powered OCR tool that extracts text from images and scanned documents. Supports PNG, JPG, GIF, BMP, TIFF, WEBP, and PDF with drag-and-drop batch upload, live progress updates, and editable Markdown output.","badgeClass":"","type":"docops","path":"/ocr-import","appId":"ocr-import","readme":"# 📄 OCR Import — Cognotik DocOps\n\nTurn scanned documents, photos, and images into clean, editable text in seconds! **OCR Import** brings AI-powered Optical Character Recognition (OCR) directly into your workspace, taking the hassle out of manual retyping and document digitisation.\n\n---\n\n## ✨ Why You\u0027ll Love OCR Import\n\nWhether you\u0027re digitising paper invoices, archiving historical documents, or capturing notes from scanned PDFs and photos, **OCR Import** simplifies your workflow:\n\n- 🧠 **AI-Powered Precision**: Advanced AI models ensure accurate text recognition across complex layouts, multipage PDFs, and image files.\n- 🖼️ **Wide Format Support**: Drag and drop PDFs, PNGs, JPGs, GIFs, BMPs, TIFFs, or WEBP images effortlessly.\n- 👁️ **Live Markdown Preview \u0026 Editing**: Instantly preview rendered formatted text or tweak raw Markdown directly in your browser.\n- ⚡ **Automated Saving**: Edits are automatically saved as you type, ensuring your work is always preserved.\n- 💾 **Quick Exporting**: Copy all processed text to your clipboard with a single click or download your formatted results as Markdown files.\n\n---\n\n## 🚀 Getting Started in 4 Easy Steps\n\n### Step 1: ⚙️ Configure Your Models\nChoose the AI models that best fit your speed and detail needs:\n- **Smart model**: Handles primary OCR text extraction and complex document layouts.\n- **Fast model**: Delivers quick processing for standard text operations.\n- **Image model**: Optimises recognition for image-heavy documents.\n\n\u003e *Tip: Your model selections are remembered on your device for future sessions!*\n\n### Step 2: 📁 Upload Documents\n1. Drag and drop your files into the **Upload Documents** drop zone, or click **Browse Files**.\n2. Supported file types include **PDF, PNG, JPG, JPEG, GIF, BMP, TIFF, and WEBP**.\n3. Review your uploaded document list, inspect file sizes, or remove files before running OCR.\n\n### Step 3: 🚀 Run OCR\n1. Click **Run OCR** to start processing your uploaded documents.\n2. Watch live status updates and detailed progress in the **Processing Log**.\n3. Feel free to leave the tab open—if a job takes a few moments, the app will automatically keep track of progress for you.\n\n### Step 4: 📜 Review, Edit \u0026 Export Results\n1. **Switch Results**: Use the tabs at the top of the **Extracted Text** section to easily jump between converted files.\n2. **Toggle Raw View**: Switch between the rendered document view and raw Markdown text whenever you need to make quick edits.\n3. **Copy \u0026 Download**:\n   - Use **📋 Copy all** to grab the complete converted content.\n   - Use **💾 Download** to save your combined results as a `.md` Markdown file.\n4. **Save Results**: Click **💾 Save results** to commit your final text back to your session.\n\n---\n\n## 💡 Pro Tips\n\n- **High Quality Images**: For the best extraction results, ensure uploaded scans are legible and correctly oriented.\n- **Batch Uploads**: You can upload and process multiple documents at the same time to save time.\n- **Session Menubar**: Use the top menubar tools (such as Git integration and session downloads) to track changes or export session assets.","category":"Perform","tags":["Office","PDF"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"ocr-import/background.png","videoUrl":"https://cognotik.com/tours/office/edit/ocr-import.mp4","exampleSessions":{"Haymarket Flier":"https://hosted.cognotik.com/ocr-import/fileIndex/G-20260521-fCML2Sd4/app.html"}},{"id":"app-research-agent","name":"Web Crawler","icon":"🕷️","description":"Browser-based research agent that drives a configurable web crawler to fetch, follow, and summarize web pages into a single Markdown report.","badgeClass":"","type":"docops","path":"/research-agent","appId":"research-agent","readme":"# Web Crawler (`research-agent`)\n\nA single-step DocOps app that seeds a web crawl from a query or URL, runs the\n`CrawlerAgent` task with the current settings, and renders the summarised report.\n\n## Files\n\n| File        | Purpose                                                     |\n|-------------|-------------------------------------------------------------|\n| `app.html`  | Single entry point (no inline styles or scripts)            |\n| `app.js`    | ES-module entry point                                       |\n| `style.css` | All styling, token-driven, mobile-first                     |\n| `ops/`      | DocOp definitions and task config                           |\n| `README.md` | This file                                                   |\n\n## Pipeline\n\n| Step | Op file        | Output             | Badge         |\n|------|----------------|--------------------|---------------|\n| 1    | `ops/crawl.md` | `crawl_result.md`  | `badge-crawl` |\n\n### Op files\n\n* **`ops/crawl.md`** — invokes the `CrawlerAgent` task. Reads the seed from\n  `crawl_query.md` and the crawler tuning from `ops/crawl.json`; writes the\n  summarised crawl report to `crawl_result.md`.\n\n### Data files\n\n* **`crawl_query.md`** — user-editable seed query or URL (auto-saved after\n  800 ms of inactivity, and on explicit Save).\n* **`ops/crawl.json`** — crawler configuration. Fields are rendered dynamically\n  from the `CrawlerAgent` schema served by `GET /taskConfig/`; unknown fields\n  fall back to the defaults in `DEFAULT_CONFIGS` in `app.js`.\n\n## Behaviour notes\n\n* **Filesystem is the source of truth.** Badges are restored from\n  `docops.status.json` on load, falling back to reading `crawl_result.md`.\n* **Polling** is started only while a task is `RUNNING` and stopped when idle\n  and on `pagehide`.\n* **`respect_robots_txt` cannot be disabled** — attempting to uncheck it\n  re-checks the box and shows the `\u003cno-no-no\u003e` Nedry cameo, lazily imported\n  from `/app/nedry/no-no-no.js`.\n* **Global chrome** (usage, sessions, git, downloads) is owned by the shared\n  menubar (`/app/menu.js`). Only the app-specific **Help** action is\n  registered by this app. Inline per-step session links remain in the pipeline\n  card.\n* **Preferences** (model selections) are stored under the `crawler` namespace\n  via `/app/models.js`; no content is ever kept in `localStorage`.\n\n## Conformance\n\n| Axis            | Status | Note                                            |\n|-----------------|:------:|-------------------------------------------------|\n| 3-file layout   |   ✅   | plus `ops/` and this README                     |\n| Modern JS       |   ✅   | ES modules, `async/await`, `Map`, no IIFE/`var` |\n| Menubar         |   ✅   | `initMenu({ appName: \"Web Crawler\" })`          |\n| No dup. chrome  |   ✅   | usage/git modals removed                        |\n| Viewport        |   ✅   |                                                  |\n| Mobile          |   ✅   | verified at 360 / 768 / 1280 px                 |\n\nTheme: light tokens by default with a `prefers-color-scheme: dark` override of\nthe same token names — no duplicated component rules.","category":"Think","tags":["Research","Web"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"research-agent/background.png","videoUrl":"https://cognotik.com/tours/jobs/edit/research-agent.mp4","exampleSessions":{}},{"id":"app-svg-wizard","name":"SVG Wizard","icon":"🎨","description":"AI-powered SVG authoring and PNG rendering tool. Describe a logo, diagram, icon or poster in plain English and let the AI generate self-contained SVG markup, rasterize it in your browser, and iteratively refine it using real vision feedback — no design toolchain required.","badgeClass":"","type":"docops","path":"/svg-wizard","appId":"svg-wizard","readme":"# 🎨 SVG Wizard\n\n\u003e **Describe a graphic in plain words — get a clean, self-contained SVG plus a pixel-perfect PNG render, refined by AI vision.**\n\nSVG Wizard is the vector-graphics sibling of [TeX Wizard](../tex-wizard). Instead of compiling LaTeX to a PDF,\nit authors **`image.svg`** and rasterises it to **`render.png`** using a **100% browser-based rendering engine**\n(`\u003cimg\u003e` + `\u003ccanvas\u003e` → PNG). That PNG is then fed back to a vision model for an iterative\n*render → look → critique → fix* loop.\n\n---\n\n## ✨ Why SVG Wizard?\n\n* **Plain language → production SVG:** Describe a logo, diagram, icon, chart or poster; get valid, self-contained SVG markup.\n* **No toolchain required:** Rasterisation happens in your browser. No Inkscape, no `rsvg-convert`, no headless Chrome needed.\n* **Real vision feedback:** The AI reviews the actual *rendered pixels*, so it catches clipped text, overlapping shapes, invisible strokes and off-canvas elements that reading the markup alone would miss.\n* **Full manual control:** Edit the SVG source inline, tweak style directives, or hand-write the update notes yourself.\n\n---\n\n## 🚀 Getting Started\n\n### Step 1 · Set up your inputs 📝\n1. **Notes** — what the graphic should depict, its dimensions, contents and labels.\n2. **Style Directives** *(optional)* — palette, stroke weights, flat vs. gradient, font stack, `viewBox` size.\n3. **Reference Image** *(optional)* — click, drop or paste a picture (PNG/JPEG/WebP/SVG). It is normalised to\n   `reference.png` in the session and shown to the AI while **drafting** the SVG *and* during the\n   **vision/OCR comparison** in Review Render, so labels and layout are matched to the original.\n4. **Models** — pick a Smart model (authoring), Fast model (edits) and Image model (visual review).\n   Use vision-capable models when a reference image is attached.\n\n### Step 2 · Run the pipeline ⚙️\n\n| # | Step | What it does |\n|---|------|--------------|\n| 1 | **▶ Render SVG** | Generates `image.svg` from `notes.md` + `style.md` (+ `reference.png` if attached). |\n| 2 | **🧾 Describe SVG** | Writes `metadata.json` — animation flag, cycle duration and the timeline offsets to snapshot. **🔎 Auto-detect** does this locally, without a model call. |\n| 3 | **🖼 Rasterize** | Renders `image.svg` → `render.png` in the browser (plus `render.frame-NN.png` + `render.frames.png` for animations), writing `render.log.md`. |\n| 4 | **✏️ Update SVG** | Applies `update-notes.md` to `image.svg`. |\n| 5 | **🔍 Review Render** | Vision model inspects `render.png` and the frame contact sheet, OCR-diffs them against `reference.png` (when present) and rewrites `update-notes.md`. |\n\nThen loop **5 → 4 → 3** until it looks right. Tick **Auto-rasterize** and every SVG change re-renders instantly.\n\n### 🎞 Animated SVGs\n\nSMIL and CSS `@keyframes` animations are supported. The rasteriser cannot seek an\n`\u003cimg\u003e`-hosted SVG, so it **bakes the seek into the markup**: SMIL `begin` values are\nshifted backwards and CSS animations get a matching negative delay plus\n`animation-play-state: paused`. Every frame is therefore deterministic.\n\nMark the graphic as animated in the **metadata.json** card (or press **🔎 Auto-detect**),\nset the cycle duration and either a frame count (evenly spaced) or an explicit list of\ncapture times. Rasterizing then produces:\n\n* `render.png` — the poster frame (`animation.posterTimeMs`),\n* `render.frame-01.png` … — one PNG per capture time,\n* `render.frames.png` — a labelled contact sheet of the whole timeline, which the\n  vision review reads in a single pass.\n\nUse finite `dur` values and numeric `begin` offsets; event-based `begin`\n(`click`, `otherId.end`) cannot be seeked and is reported in the render log.\n\n### Step 3 · Inspect \u0026 export 📤\n* **Live SVG preview** re-renders as you type (scripts are stripped before rasterising).\n* **⬇ Download SVG** / **⬇ Download PNG** to grab the assets.\n* **Render Options** control the output scale (1×–4×) and background (transparent / white / dark).\n\n---\n\n## 🎛 Render Options\n\n| Option | Meaning |\n|--------|---------|\n| **Scale** | Output PNG is `intrinsic size × scale`. Total pixels are capped (~16 MP) and scaled down automatically if exceeded. |\n| **Background** | Transparent keeps alpha; White/Dark composites a flat backdrop first — useful for checking contrast. |\n| **Auto-rasterize** | Re-render the PNG automatically whenever `image.svg` is regenerated or updated. |\n\n---\n\n## 💡 Pro Tips\n\n* **Always set a `viewBox`.** If `width`/`height` are missing, SVG Wizard falls back to the `viewBox` (or 512×512) and notes it in the render log.\n* **Keep it self-contained.** External `\u003cimage href\u003d\"https://…\"\u003e` references taint the canvas and will fail the PNG export — inline data URIs instead.\n* **Fonts:** only fonts available to the browser render. Prefer generic stacks, or convert text to paths for exact fidelity.\n* `Ctrl/Cmd+S` saves every editor at once; autosave also runs as you type.\n* If your session\u0027s file API rejects binary uploads, the app falls back to writing `render.png.base64.txt` and you can press **🖥 Server** to rasterise with `rasterize.sh` instead.\n* **Reference images are downscaled** to a 1600 px longest edge and re-encoded as PNG so vision models can read them reliably. Paste from the clipboard anywhere outside a text box to attach one instantly.\n\n---\n\n## 📂 Session files\n\n| File | Role |\n|------|------|\n| `notes.md` | Your brief (input) |\n| `style.md` | Style directives (input) |\n| `reference.png` | Optional reference image used for drafting and OCR comparison (input) |\n| `update-notes.md` | Revision instructions (written by review, read by update) |\n| `image.svg` | The generated vector source |\n| `metadata.json` | Machine-readable description of the SVG — animation flag, duration, capture times (schema: `ops/metadata_schema.ts`) |\n| `render.png` | Browser-rendered raster used for vision review |\n| `render.frame-NN.png` | One raster per animation capture time |\n| `render.frames.png` | Labelled contact sheet of every captured frame |\n| `render.log.md` | Rasterisation report: sizes, scale, warnings |\n\nHappy vectoring with **SVG Wizard**! 🎨✨","category":"Create","tags":["Office","SVG","Image","Devs"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"svg-wizard/background.png","iconUrl":"svg-wizard/icon.png","exampleSessions":{}},{"id":"app-html-wizard","name":"HTML Wizard","icon":"🧩","description":"AI-powered factory for reusable HTML/CSS/JS components. Describe a widget in plain English and get a single self-contained envelope file — one inline stylesheet, one ES6 module, one #root mount point — rendered live in a sandboxed iframe, captured to PNG, and refined iteratively with real vision and console feedback.","badgeClass":"","type":"docops","path":"/html-wizard","appId":"html-wizard","readme":"# 🧩 HTML Wizard\n\n\u003e **Describe a widget in plain words — get one self-contained HTML file that actually runs, a PNG of how it looks, and a console log of how it behaves.**\n\nHTML Wizard is the component-shaped sibling of [SVG Wizard](../svg-wizard) and [TeX Wizard](../tex-wizard).\nInstead of compiling LaTeX or authoring vectors, it writes **`component.html`** — a strict\n*single-file envelope* — mounts it in a **sandboxed iframe** (so the JavaScript really executes),\ncaptures **`console.log.md`** from the live run, and rasterises the rendered DOM to **`render.png`**\nusing a 100 % browser-based snapshot (`\u003cforeignObject\u003e` → `\u003ccanvas\u003e` → PNG).\n\nBoth artefacts are fed back to a vision model for an iterative\n*mount → look → critique → fix* loop.\n\n---\n\n## 📦 The envelope format\n\nEvery component is **one file**, portable by copy-paste, with **no external resources**:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang\u003d\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset\u003d\"utf-8\" /\u003e\n    \u003cmeta name\u003d\"viewport\" content\u003d\"width\u003ddevice-width, initial-scale\u003d1\" /\u003e\n    \u003ctitle\u003eStar Rating\u003c/title\u003e\n    \u003cstyle\u003e\n      /* exactly ONE style block — tokens on :root, component styles scoped to #root */\n      :root { --brand: #5b8dff; }\n      body { margin: 0; font-family: system-ui, sans-serif; }\n      #root { display: inline-flex; gap: 4px; padding: 16px; }\n      #root .star { cursor: pointer; font-size: 28px; color: #444; }\n      #root .star[aria-checked\u003d\"true\"] { color: var(--brand); }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id\u003d\"root\" data-component\u003d\"star-rating\"\u003e\u003c/div\u003e\n    \u003cscript type\u003d\"module\"\u003e\n      // exactly ONE module block — modern ES6+, no imports, no external URLs\n      function mount(root, props \u003d {}) {\n        const { max \u003d 5, value \u003d 3, onChange \u003d () \u003d\u003e {} } \u003d props;\n        /* … build DOM, wire events … */\n        return { update(next) {/* … */}, destroy() {/* … */} };\n      }\n      globalThis.component \u003d { mount };          // reusable entry point\n      mount(document.getElementById(\"root\"));    // demo instance for the preview\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe built-in **linter** enforces this: exactly one `\u003cstyle\u003e`, exactly one\n`\u003cscript type\u003d\"module\"\u003e`, a `#root` element, a `mount(root, props)` entry point,\nno `http(s)://` `src`/`href`, no remote `import`, no inline `on*` handlers.\n\n---\n\n## 🚀 Getting Started\n\n### Step 1 · Set up your inputs 📝\n1. **Notes** — what the component does, its props, states, behaviour and a11y needs.\n2. **Design Directives** *(optional)* — palette, spacing scale, radii, typography, dark-mode rules.\n3. **Models** — Smart model (authoring), Fast model (edits), Image model (visual review).\n\n### Step 2 · Run the pipeline ⚙️\n\n| # | Step | What it does |\n|---|------|--------------|\n| 1 | **▶ Render HTML** | Generates `component.html` from `notes.md` + `style.md`. |\n| 2 | **📸 Mount \u0026 Capture** | Mounts the envelope in an iframe, records console output → `console.log.md`, snapshots the live DOM → `render.png`, writes `render.log.md`. |\n| 3 | **✏️ Update HTML** | Applies `update-notes.md` to `component.html`. |\n| 4 | **🔍 Review Render** | Vision model inspects `render.png` + `console.log.md` and rewrites `update-notes.md`. |\n\nThen loop **4 → 3 → 2** until it looks and behaves right. Tick **Auto-capture** and every code change re-renders instantly.\n\n### Step 3 · Inspect \u0026 export 📤\n* **Live preview** re-mounts as you type (debounced) — real DOM, real events, real JS.\n* **🔎 Lint** validates the envelope contract at any time.\n* **⬇ Download** / **📋 Copy** the HTML, **⬇ Download PNG** for the raster.\n\n---\n\n## 🎛 Capture Options\n\n| Option | Meaning |\n|--------|---------|\n| **Viewport** | Width of the preview iframe (360 – 1280 px). Height auto-grows to the content. |\n| **Scale** | PNG is `viewport × scale`. Total pixels capped (~16 MP) and clamped automatically. |\n| **Background** | Transparent keeps alpha; White/Dark composites a backdrop — useful for contrast checks. |\n| **Settle delay** | How long to wait after load before snapshotting (lets async JS finish). |\n| **Live preview** | Re-mount the iframe while you type. |\n| **Auto-capture** | Re-capture PNG + console whenever `component.html` changes. |\n\n---\n\n## 💡 Pro Tips\n\n* **Keep it self-contained.** External `\u003cimg src\u003d\"https://…\"\u003e` taints the canvas and breaks the PNG export — inline `data:` URIs instead.\n* **External references are stripped.** During capture any non-`data:` `src`/`href`/`url()` is inlined if fetchable, otherwise dropped (and reported in `render.log.md`) so the canvas stays exportable.\n* **Fonts:** only fonts already available to the browser render. Prefer generic stacks — `@font-face` with a remote URL is rejected by the linter.\n* **Snapshot limits:** the PNG is taken via `\u003cforeignObject\u003e`, so `\u003ccanvas\u003e` pixels, `\u003cvideo\u003e` frames and nested iframes are **not** captured. The linter warns when it sees them.\n* **Errors are gold:** anything thrown at mount time lands in `console.log.md` and the review step will fix it.\n* `Ctrl/Cmd+S` saves every editor at once; autosave also runs as you type.\n* If your session\u0027s file API rejects binary uploads, the app writes `render.png.base64.txt` instead and warns you in the capture log — use **⬇ Download PNG** to keep a copy.\n\n---\n\n## 📂 Session files\n\n| File | Role |\n|------|------|\n| `notes.md` | Your brief (input) |\n| `style.md` | Design directives (input) |\n| `update-notes.md` | Revision instructions (written by review, read by update) |\n| `component.html` | The generated single-file envelope |\n| `render.png` | Browser snapshot of the mounted component |\n| `render.log.md` | Capture report: envelope lint, sizes, scale, warnings |\n| `console.log.md` | Runtime console/error output from the live mount |\n\nHappy componentising with **HTML Wizard**! 🧩✨","category":"Create","tags":["Office","HTML","Components","Devs"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"html-wizard/background.png","iconUrl":"html-wizard/icon.png","videoUrl":"","exampleSessions":{}},{"id":"app-threejs-wizard","name":"Three.js Wizard","icon":"🧊","description":"AI-powered agentic 3D modeling. Describe an object in plain English and get a three.js scene module — mounted live in a sandboxed WebGL iframe, rendered from several labelled camera angles, exported as a self-contained HTML viewer, STL or GLB, and refined iteratively with real vision and console feedback.","badgeClass":"","type":"docops","path":"/threejs-wizard","appId":"threejs-wizard","readme":"# 🧊 Three.js Wizard\n\n\u003e **Describe an object in plain words — get a three.js scene that really renders, a set of labelled camera views, and an STL / GLB / HTML you can ship.**\n\nThree.js Wizard is the 3D sibling of [SVG Wizard](../svg-wizard) and [HTML Wizard](../html-wizard).\nInstead of authoring vectors or DOM components, the model writes **`scene.js`** — a tiny ES module\nthat builds geometry into a three.js scene. The app mounts it in a **sandboxed WebGL iframe**,\nmeasures it (meshes, triangles, bounding box), renders it from **several camera angles**\n(`render.png` + the contact sheet `render.views.png`), records `console.log.md`, and exports\n**`model.stl`**, **`model.glb`** and a stand-alone **`scene.html`** viewer with orbit controls.\n\nThe renders are fed back to a vision model for an iterative *build → look → critique → fix* loop.\n\n---\n\n## 📦 The module contract\n\n```js\nimport * as THREE from \"three\";               // only \"three\" and \"three/addons/*\" may be imported\n\nexport const meta \u003d { name: \"Coffee mug\", units: \"mm\" };\n\nexport function buildScene({ THREE, scene }) {\n  const body \u003d new THREE.Mesh(\n    new THREE.CylinderGeometry(40, 38, 95, 64),\n    new THREE.MeshStandardMaterial({ color: 0xf2f2f2, roughness: 0.4 }),\n  );\n  body.name \u003d \"body\";\n  body.position.y \u003d 47.5;                     // rests on the ground plane y \u003d 0\n  scene.add(body);\n\n  scene.add(new THREE.HemisphereLight(0xffffff, 0x445566, 1.1));\n  const sun \u003d new THREE.DirectionalLight(0xffffff, 1.6);\n  sun.position.set(120, 200, 160);\n  scene.add(sun);\n\n  return { update(dt, elapsed) { /* optional, preview only */ } };\n}\n```\n\nRules enforced by the built-in **linter**: a `buildScene` export, imports only from `three` /\n`three/addons/`, no external URLs (no textures, fonts or model files), no renderer / camera /\nDOM / animation-loop code (the harness owns all of that), lights present, meshes named.\n\nConventions the model is asked to follow: **millimetres, Y-up, resting on `y \u003d 0`, centred on the\norigin in X/Z, closed solids** so the STL is printable.\n\n---\n\n## 🚀 Getting Started\n\n### Step 1 · Set up your inputs 📝\n1. **Notes** — what the object is, its dimensions, parts, proportions, and what it is for (print? web viewer?).\n2. **Design Directives** *(optional)* — palette, materials, level of detail, units, tolerances.\n3. **Models** — Smart model (authoring), Fast model (edits), Image model (visual review).\n\n### Step 2 · Run the pipeline ⚙️\n\n| # | Step | What it does |\n|---|------|--------------|\n| 1 | **▶ Render Scene** | Generates `scene.js` from `notes.md` + `style.md`. |\n| 2 | **📸 Capture Views** | Mounts the scene, renders the selected views → `render.png` + `render.views.png`, exports `model.stl` and `scene.html`, writes `render.log.md` and `console.log.md`. |\n| 3 | **✏️ Update Scene** | Applies `update-notes.md` to `scene.js`. |\n| 4 | **🔍 Review Render** | Vision model inspects the views + logs and rewrites `update-notes.md`. |\n\nThen loop **4 → 3 → 2** until it looks right. Tick **Auto-capture** and every code change re-renders instantly.\n\n### Step 3 · Inspect \u0026 export 📤\n* **Live 3D preview** with orbit controls re-mounts as you type (debounced).\n* **🔎 Lint** validates the module contract at any time.\n* **⬇ HTML** — stand-alone viewer (`scene.html`), **⬇ STL** — binary STL for printing, **⬇ GLB** — for web/AR.\n\n---\n\n## 🎛 Capture Options\n\n| Option | Meaning |\n|--------|---------|\n| **Size** | Pixel size of each square view (512 / 768 / 1024). |\n| **Views** | *Isometric only*, *Standard* (iso + front + right + top) or *Full* (iso + six orthographic sides). |\n| **Background** | Transparent, white, dark or studio grey — also used by the exported `scene.html`. |\n| **Helpers** | Draw a grid on the ground plane and XYZ axes in the renders (not exported to STL/GLB). |\n| **Live preview** | Re-mount the iframe while you type. |\n| **Auto-capture** | Re-capture whenever `scene.js` changes. |\n\nAxis-aligned views (front, right, top, …) use **orthographic** cameras so proportions can be read\nlike a blueprint; the isometric hero shot is perspective. Every camera is framed automatically from\nthe scene\u0027s bounding box.\n\n---\n\n## 💡 Pro Tips\n\n* **three.js comes from a CDN** (`cdn.jsdelivr.net`, pinned version — see `threeRender.js`). The preview and `scene.html` need network access; STL/GLB files are fully offline.\n* **Procedural everything.** No `TextureLoader`, `GLTFLoader` or `FontLoader` — external assets taint the canvas and cannot be captured. Use `MeshStandardMaterial` colours, vertex colours or geometry detail instead.\n* **Printability:** prefer closed primitives (`BoxGeometry`, `CylinderGeometry`, `LatheGeometry`, `ExtrudeGeometry`) over `PlaneGeometry` and open shells; the STL exporter bakes each mesh\u0027s `position` / `rotation` / `scale`.\n* **Scale sanity:** `render.log.md` prints the bounding box in the units declared in `meta.units` — the reviewer compares that with the brief.\n* **Errors are gold:** anything thrown in `buildScene` lands in `console.log.md` and the review step will fix it.\n* `Ctrl/Cmd+S` saves every editor at once; autosave also runs as you type.\n* If your session\u0027s file API rejects binary uploads, the app writes `*.base64.txt` sidecars and warns you — use the download buttons to keep copies.\n\n---\n\n## 📂 Session files\n\n| File | Role |\n|------|------|\n| `notes.md` | Your brief (input) |\n| `style.md` | Design directives (input) |\n| `update-notes.md` | Revision instructions (written by review, read by update) |\n| `scene.js` | The generated three.js scene module |\n| `scene.html` | Stand-alone viewer with orbit controls (generated on capture / download) |\n| `model.stl` | Binary STL of every mesh (generated on capture) |\n| `model.glb` | glTF binary (generated on demand) |\n| `render.png` | Hero (isometric) render |\n| `render.views.png` | Labelled contact sheet of every captured view |\n| `render.log.md` | Capture report: lint, scene stats, bounds, views, exports, warnings |\n| `console.log.md` | Runtime console/error output from the live mount |\n\nHappy modelling with **Three.js Wizard**! 🧊✨","category":"Create","tags":["Office","3D","Three.js","STL","Devs"],"hasBackground":false,"hasIcon":false,"videoUrl":"","exampleSessions":{}},{"id":"app-goal-planner","name":"Goal Planner","icon":"🎯","description":"AI-powered goal planning companion: personalized intake questionnaire, five-perspective analysis (Coach, Strategist, Realist, Therapist, Data Analyst), targeted clarifying questions, plan synthesis, daily check-in form, and a live progress dashboard.","badgeClass":"","type":"docops","path":"/goal-planner","appId":"goal-planner","readme":"# 🎯 Goal Planner\n\n**Stop making generic to-do lists. Start building a plan that actually fits your life.**\n\nGoal Planner is an AI-powered planning companion that takes the time to *really*\nunderstand you — your goals, your constraints, your values, and what\u0027s tripped you\nup before — and then builds a concrete, personalized plan around what you\u0027ve shared.\nNo cookie-cutter templates. No overwhelming productivity systems. Just a thoughtful,\nstep-by-step process that meets you where you are.\n\n---\n\n## Why Goal Planner?\n\nMost goal-setting tools hand you a blank page or a rigid template and call it a plan.\nGoal Planner does something different: it *listens first*. Before generating anything,\nit gathers your context, runs your situation past five different expert lenses, asks\ntargeted follow-up questions, and *then* produces a plan — one that\u0027s grounded in\nwhat you actually said, not what a generic template assumes.\n\nThe result is a small, focused, realistic plan you\u0027ll actually follow, paired with a\nlightweight daily check-in habit and a live dashboard to keep you honest and motivated.\n\n---\n\n## What You Get\n\n- 📋 **A personalized intake questionnaire** — tailored to your situation, not a\n  one-size-fits-all form.\n- 🧠 **A five-perspective AI analysis** — your goals are reviewed by a Coach,\n  Strategist, Realist, Therapist, and Data Analyst, surfacing insights and blind\n  spots before the plan is written.\n- ❓ **Targeted clarifying questions** — a short follow-up that resolves the specific\n  tensions and open questions the analysis uncovered. Every question earns its place.\n- 📄 **Your personalized plan** — a concrete, measurable document written in your\n  voice, grounded in everything you\u0027ve shared. Three to five focused goals, clear\n  strategies, and honest obstacle planning.\n- ✅ **A daily check-in form** — a quick (under 3 minutes) mobile-friendly form to\n  log your energy, mood, progress, and priorities for tomorrow.\n- 📊 **A live progress dashboard** — charts, streaks, recent check-ins, and goal\n  status at a glance. Includes a simulated-data preview so you can see what it looks\n  like before you have weeks of real data.\n\n---\n\n## How to Use It\n\nGoal Planner guides you through five stages, each unlocking the next. Here\u0027s the\njourney:\n\n### Step 0 — Optional: Jot Down Some Notes *(recommended)*\n\nBefore anything else, you can type a free-form brain dump into the **Intake Notes**\nbox — your situation, constraints, aspirations, anything on your mind. This seeds\nevery stage that follows and helps the AI skip questions you\u0027ve already answered.\nClick **Save Notes** when you\u0027re done.\n\n### Step 1 — Fill Out Your Intake Form\n\nClick **Generate Form** under *Initial Intake*. In a moment, a personalized\nquestionnaire will appear — click **Open Form** to fill it out. It covers your goals,\ntimeframe, available time, obstacles, values, and more. Hit **Submit** when done.\n\n### Step 2 — Run the Multi-Perspective Analysis\n\nOnce your intake is submitted, click **Run Analysis**. Five AI experts review your\nanswers and produce a detailed analysis — surfacing insights, tensions, and open\nquestions. This usually takes a minute or two. You can watch the live status in the\n**Active Sessions** panel.\n\n### Step 3 — Answer the Clarifying Questions\n\nClick **Generate Form** under *Clarifying Questions*. This short follow-up (5–10\nquestions, under 5 minutes) is built directly from the tensions and gaps the analysis\nfound. Open the form, answer honestly, and submit.\n\n### Step 4 — Get Your Plan\n\nClick **Synthesize Plan**. The AI weaves together everything — your intake, the\nanalysis, and your clarifying answers — into a single, authoritative plan document.\nYou can preview it right on the main page once it\u0027s ready.\n\n### Step 5 — Set Up Daily Check-Ins \u0026 Your Dashboard\n\nClick **Generate Check-In Form** and **Generate Dashboard**. Then:\n\n- Use the **Daily Check-In** form each day to log your progress (bookmark it!).\n- Open the **Dashboard** anytime to review your trends, streaks, and goal status.\n\nBoth can be updated later — use the **Update Check-In Form** and **Update Dashboard**\npanels to describe changes you\u0027d like, and the AI will revise them for you.\n\n---\n\n## Tips for Getting the Most Out of It\n\n- **Be honest in your intake.** The more candid you are about constraints and past\n  struggles, the more realistic and useful your plan will be.\n- **Use the Intake Notes box.** Even a few sentences of context makes a noticeable\n  difference in how personalized the questions and plan feel.\n- **Don\u0027t skip the clarifying questions.** They\u0027re short by design, but they\u0027re where\n  the plan gets its specificity — vague aspirations become measurable targets here.\n- **Keep check-ins short.** The daily form is designed to take under 3 minutes. Don\u0027t\n  overthink it; a quick honest snapshot is more valuable than a perfect essay.\n- **Use the simulated data toggle** on the dashboard to preview what your progress\n  charts will look like before you have weeks of real check-ins.\n- **Re-run any step freely.** If you want to update your plan after a few weeks, you\n  can re-run the synthesis or update the forms at any time. Nothing is locked in.\n- **Hit Refresh (↻)** if the page seems out of date — it re-scans your files and\n  updates all the step statuses instantly.\n\n---\n\n## Troubleshooting\n\n| Problem | What to do |\n|---|---|\n| **\"Run Analysis\" button is greyed out** | You need to submit the intake form first. Open the form, fill it out, and hit Submit. |\n| **\"Synthesize Plan\" button is greyed out** | You need to submit the clarifying questions form first. Open it, answer the questions, and hit Submit. |\n| **\"Generate Check-In Form\" / \"Generate Dashboard\" are greyed out** | Your plan hasn\u0027t been generated yet. Complete Steps 1–4 first. |\n| **A step seems stuck on \"running\"** | The status updates every 15 seconds automatically. You can also click **Refresh** to check immediately. |\n| **The AI model dropdowns are empty** | The app couldn\u0027t reach the model provider. Check your connection and try refreshing the page. |\n| **I want to change my plan** | Use the **Update Check-In Form** or **Update Dashboard** panels to describe your changes, or re-run **Synthesize Plan** after updating your intake. |\n\n---\n\n## A Note on Philosophy\n\nGood planning is a conversation, not a form. Goal Planner is built on the belief that\nthe *quality of the questions* determines the quality of the plan. That\u0027s why it\ninvests real effort up front — listening carefully, examining your situation from\nmultiple angles, and asking only the follow-up questions that actually matter — before\nproducing anything.\n\nThe daily check-in is deliberately short. The plan is deliberately specific. The\ndashboard is deliberately honest. Because the goal isn\u0027t a beautiful document — it\u0027s\na life that\u0027s moving in the direction you actually want.","category":"Perform","tags":[],"hasBackground":true,"hasIcon":false,"backgroundUrl":"goal-planner/background.png","videoUrl":"https://cognotik.com/tours/home/edit/goal-planner.mp4","exampleSessions":{"Demo":"https://hosted.cognotik.com/goal-planner/fileIndex/G-20260522-b6W0hijU/app.html"}},{"id":"app-health-analysis","name":"Health Analysis","icon":"🏥","description":"Multi-round AI health analysis pipeline: symptom intake, differential brainstorming, four-perspective clinical analysis, medical literature research, follow-up questions, and four personalized final reports (clinical summary, personal action plan, lifestyle plan, inner development plan). Not a substitute for professional medical advice.","badge":"Medical","badgeClass":"accent","type":"docops","path":"/health-analysis","appId":"health-analysis","readme":"# 🏥 Medical AI Diagnostic Pipeline\n\n\u003e ⚠️ **Important Disclaimer:** This tool is **not a substitute for professional medical advice, diagnosis, or treatment.** Always consult a qualified healthcare provider for any medical concerns. This app is designed to help you *prepare* for those conversations — not replace them.\n\n---\n\n## What Is This?\n\nThe **Medical AI Diagnostic Pipeline** is an intelligent health analysis assistant that helps you make sense of your symptoms before (or between) doctor visits. Think of it as a knowledgeable research companion that listens carefully to what you\u0027re experiencing, considers many possible explanations, and helps you arrive at your appointment better informed and better prepared.\n\nRather than giving you a single rushed answer, it works the way a thoughtful medical team would — asking follow-up questions, looking at your situation from multiple angles, and refining its thinking as it learns more about you.\n\n---\n\n## What Can It Do For You?\n\n- 🔍 **Explore possible explanations** for your symptoms across a wide range of conditions\n- 👥 **See your case through multiple lenses** — from a primary care perspective, a specialist\u0027s view, an emergency medicine standpoint, and a patient advocate\u0027s voice\n- 📚 **Pull in relevant medical research** to back up the analysis with real clinical knowledge\n- ❓ **Ask smart follow-up questions** to help narrow things down and get more accurate results\n- 📄 **Generate four personalized reports** you can actually use:\n  - 🩺 A **clinical summary for your doctor** — professional, detailed, and ready to hand over\n  - 💚 A **personal action plan** — warm, supportive guidance written just for you\n  - 🏃 A **lifestyle plan** — practical diet, exercise, and habit recommendations\n  - 🧘 An **inner development plan** — emotional, motivational, and holistic wellbeing guidance\n\n---\n\n## How It Works\n\nThe pipeline runs in a series of rounds, each building on the last. You don\u0027t have to do everything at once — you can run each step individually or let the app handle entire rounds automatically.\n\n### Round 1 — First Look\nYou describe your symptoms and share some background about yourself. The AI then:\n1. Brainstorms a broad list of possible diagnoses\n2. Analyzes them from four different clinical perspectives\n3. Searches medical literature for supporting evidence\n4. Generates a set of targeted follow-up questions just for you\n\n### Round 2 — Deeper Dive\nYou answer the follow-up questions (via a simple online form), and the AI:\n1. Revisits and expands the list of possibilities with your new information\n2. Produces a refined, ranked set of likely diagnoses\n\n### Final Reports\nWith a full picture in hand, the app generates all four of your personalized reports — ready to read, share, or bring to your next appointment.\n\n---\n\n## Getting Started\n\n### 1. Enter Your Information\nHead to the **📝 Patient Input** tab and fill in two things:\n- **Symptoms** — Describe what you\u0027re experiencing in your own words. When did it start? What does it feel like? What makes it better or worse?\n- **Patient Notes** — A structured form covering your age, medical history, current medications, lifestyle, and other relevant background.\n\nHit **Save** when you\u0027re done.\n\n### 2. Run Round 1\nSwitch to the **⚙️ Pipeline** tab. You can run each step one at a time to review results as you go, or simply click **▶ Run All Round 1** to let the app handle everything automatically.\n\n### 3. Answer the Follow-Up Questions\nOnce Round 1 is complete, click **📝 Open Intake Form** to open a simple questionnaire in a new tab. Answer the questions and submit — your responses are saved automatically.\n\n### 4. Run Round 2\nClick **▶ Run All Round 2** to incorporate your answers and produce a refined analysis.\n\n### 5. Generate Your Reports\nClick **▶ Run All Final Reports**, then head to the **📊 Results** tab to read, review, and save your four personalized documents.\n\n---\n\n## Tips for Best Results\n\n- **Be specific about your symptoms.** The more detail you provide — timing, severity, what triggers or relieves them — the more accurate and useful the analysis will be.\n- **Answer the follow-up questions thoughtfully.** Round 2 is where the pipeline really shines, and your answers make a big difference.\n- **Bring the Doctor Report to your appointment.** It\u0027s written in clinical language that healthcare providers will find immediately useful.\n- **Read the Patient Plan for yourself.** It\u0027s written in plain, supportive language and is a great companion to the clinical report.\n- **Use the Lifestyle and Inner Development plans as ongoing guides.** These aren\u0027t one-time reads — they\u0027re meant to support your wellbeing over time.\n\n---\n\n## A Note on Safety\n\nThis tool is built with your safety in mind:\n\n- Every analysis round explicitly screens for **emergency warning signs** that require immediate medical attention.\n- Reports document not just what *is* present, but what *isn\u0027t* — helping rule out dangerous conditions.\n- The patient-facing report deliberately avoids recommending specific medications or clinical treatments.\n- All reports include clear reminders that they **do not replace professional medical advice**.\n\nIf at any point the analysis flags urgent or emergency symptoms, **please seek immediate medical care.**\n\n---\n\n*Built to help you become a more informed, empowered participant in your own healthcare journey.* 💙","category":"Think","tags":[],"hasBackground":true,"hasIcon":false,"backgroundUrl":"health-analysis/background.png","videoUrl":"https://cognotik.com/tours/home/edit/health-analysis.mp4","exampleSessions":{"Demo 1":"https://hosted.cognotik.com/health-analysis/fileIndex/G-20260522-PzGYI8MZ/app.html"}},{"id":"app-meal-planner","name":"Meal Planner","icon":"🍽️","description":"AI-powered weekly meal planning assistant: personalized intake questionnaire, brainstorm, five-perspective analysis (nutritionist, chef, budget analyst, lifestyle coach, behavioral scientist), clarifying questions, and four artifacts — plan summary, day-by-day menu, per-dish recipes, and categorized grocery list — with iterative update support.","badgeClass":"","type":"docops","path":"/meal-planner","appId":"meal-planner","category":"Think","tags":[],"hasBackground":true,"hasIcon":false,"backgroundUrl":"meal-planner/background.png","videoUrl":"https://cognotik.com/tours/home/edit/meal-planner.mp4","exampleSessions":{"Demo Household":"https://hosted.cognotik.com/meal-planner/fileIndex/G-20260522-EytVHBPm/app.html"}},{"id":"app-app-philosophical-calculator","name":"Philosophical Calculator","icon":"🧮","description":"Multi-perspective analysis through philosophical, rhetorical, and creative lenses.","badgeClass":"","type":"docops","path":"/philosophical-calculator","appId":"philosophical-calculator","readme":"# 🧮 Philosophical Calculator\n\n\u003e Transform your raw notes, transcripts, and messy ideas into polished, multi-dimensional articles—and refract them through rich analytical and creative lenses.\n\n---\n\n## ✨ What is Philosophical Calculator?\n\nHave you ever captured brilliant ideas, meeting transcripts, or rough notes, only to wonder how to turn them into something rich, compelling, and well-reasoned?\n\n**Philosophical Calculator** is your personal AI-powered thinking partner and publishing workbench. It goes far beyond simple summaries—it refracts your concepts through distinct intellectual angles. Whether you want to stress-test your arguments with Socratic questioning, analyze strategic tradeoffs with Game Theory, host a simulated debate between historical thinkers, or transform your work into storybooks, comic scripts, or interactive web pages, Philosophical Calculator helps you do it effortlessly.\n\n---\n\n## 💡 Why You\u0027ll Love Philosophical Calculator\n\n* **Turn Messy Ideas into Masterpieces**: Drop in unorganized voice transcripts, brainstorm lists, or meeting notes, and watch them become structured, high-impact articles.\n* **Explore Multi-Dimensional Thinking**: View your ideas through 10+ specialized intellectual lenses—from Socratic debate to game theory payoff matrices.\n* **Refine and Synthesize**: Feed insights from your analysis directly back into your core article with a single click.\n* **Publish in Any Format**: Convert your concepts into persuasive essays, visual narrative stories, comic scripts, technical tutorials, or publish-ready HTML webpages.\n* **Visual Previews \u0026 Zoom**: Effortlessly switch between rendered views and raw Markdown code, or open full-screen preview modes for comfortable reading.\n\n---\n\n## 🚀 How It Works: The 5-Stage Journey\n\nPhilosophical Calculator guides your work through a smooth, five-stage workflow:\n\n```\n📝 1. Input        ⚙️ 2. Pipeline      🔍 3. Analysis     🗂 4. Review       📦 5. Output\n┌───────────────┐  ┌───────────────┐  ┌───────────────┐  ┌───────────────┐  ┌───────────────┐\n│ Notes \u0026 Files │─▶│ Draft ⇄ Update│─▶│ Dialectical   │─▶│ Revisions     │─▶│ Persuasive    │\n│ Model Setup   │  │   Article     │  │ Socratic      │  │ Annotations   │  │ Narrative     │\n│ Instructions  │  │ Illustrate    │  │ Game Theory   │  │ Action Items  │  │ Comic · HTML  │\n│ Import Draft  │  │               │  │ Debate        │  └───────┬───────┘  │ LaTeX Source  │\n└───────────────┘  └───────────────┘  └───────────────┘          │          └───────────────┘\n                          ▲                                      │\n                          └──────── accepted items + notes ◀─────┘\n```\n\n---\n\n### Stage 1: 📝 Input — Set Your Foundation\nEvery transformation starts here.\n* **AI Models**: Choose your preferred AI models for complex reasoning, quick tasks, and image generation.\n* **Raw Notes \u0026 Files**: Drag and drop documents (`.txt`, `.md`, `.pdf`, `.docx`, and more) or type notes directly into the editor. Notes may be left blank, and once your article exists you can **🗑 Clear Notes** — the draft carries on without them. Your progress auto-saves automatically!\n* **Instructions (Optional)**: Add specific guidelines—like desired tone, target audience, or essay length.\n* **I Already Have a Draft**: Paste finished markdown to start at revision **v1** and skip straight to the lenses.\n\n---\n\n### Stage 2: ⚙️ Pipeline — Build \u0026 Refine Your Article\nConstruct your core draft through a simple 2-step pipeline:\n\n1. **Draft ⇄ Update Article**: One step, one pane. The first run turns your notes, files and instructions into a full-length, structured draft. As soon as `content.md` exists the step renames itself **Update Article** and every further run weaves accepted revision items, open annotations and fresh insights from your Analysis and Output lenses back into the article — appending a new revision each time.\n2. **Illustrate Article**: Generate inline visual AI artwork that brings your writing to life (shown in the same pane).\n\n---\n\n### Stage 3: 🔍 Analysis Lenses — Stress-Test Your Thinking\nExplore your ideas from unexpected intellectual angles:\n\n* 💡 **Brainstorm**: Divergent ideas, practical extensions, and unexpected applications.\n* ⚖️ **Dialectical**: Thesis, antithesis, and synthesis to expose hidden contradictions and resolve them.\n* 🏛️ **Socratic Dialogue**: Rigorous Q\u0026A debates that uncover underlying assumptions and sharpen core arguments.\n* 👥 **Perspectives**: Multi-stakeholder analysis highlighting conflicting priorities and shared interests.\n* 🎲 **Game Theory**: Strategic interaction models featuring players, payoff matrices, and equilibrium solutions.\n* 🗣️ **Historical Debate**: In-character discussions between legendary historical figures with moderator syntheses.\n* 🧬 **Unrunnable Protocol**: Conceptual pseudocode and algorithmic decision trees.\n\n---\n\n### Stage 4: 🗂 Review — Triage Everything in One Place\n* **🕓 Draft Revisions**: Every run appends an immutable revision. Diff any revision against the\n  current one — the diff highlights changed *segments* within a line, not whole lines, and can\n  ignore whitespace — read the changelog, and restore safely (restores append, never overwrite).\n* **💬 Annotations**: Select text in any rendered view to leave a comment, question, correction or\n  suggestion. Live annotations are highlighted inline in the article pane (rendered and Markdown\n  views); click a highlight to jump to it. Anchors survive rewrites; orphaned notes are surfaced\n  rather than dropped.\n* **✅ Revision Queue**: Analysis lens output is automatically ingested into uniform action items\n  (`add`, `clarify`, `evidence`, `counterargument`, …). Sort by priority, group by lens or section,\n  merge duplicates, then **Accept** the ones you want — *Update Article* applies exactly those and\n  records the provenance in the new revision.\n* **⤓ Export / ⤒ Import**: One JSON bundle with drafts, revisions, annotations and items.\n\n---\n\n### Stage 5: 📦 Output Lenses — Deliver Ready-to-Share Formats\nEvery output lens now lives on **its own workbench page** (linked from the 📦 Output tab), where it\nruns its own iterative loop:\n\n```\n① Generate ──► artifact ──► ② Build (PDF only) ──► ③ OCR Review (vision agent)\n      ▲                                                        │\n      └──────────── ④ Update ◄──── \u003clens\u003e-notes.md ◄────────────┘\n```\n\n`\u003clens\u003e-notes.md` has two halves: `## Author notes` (yours, never touched by the agent) and\n`## OCR review` (rewritten on every review pass). **Update** applies both to the artifact and\nappends an immutable artifact revision to the shared history.\n\n* 🎯 **Persuasive Essay**: High-impact, rhetorically structured arguments designed to convince.\n* 📖 **Narrative Story**: Dramatized storytelling enriched with inline narrative illustrations.\n* 💬 **Comic Book Script**: Visual panel-by-panel comic scripts complete with dialog and scene direction.\n* 🔧 **Technical Tutorial**: Step-by-step guides complete with mechanism breakdowns and code examples.\n* 🌐 **HTML Webpage**: A standalone responsive page — with review/update rounds against the live render.\n* 📚 **LaTeX / PDF**: `paper.tex` compiled to `paper.pdf` by `build.sh` (`tectonic` → `xelatex` →\n   `pdflatex`), with the full engine output captured in `build.log.md` and a page-by-page OCR review.\n\n---\n\n## 🛠️ Handy Tools \u0026 Features\n\n* **Rendered vs. Source View**: Toggle between formatted visual renders and underlying Markdown code anytime.\n* **🔍 Fullscreen Zoom**: Click Zoom on any viewer to expand your document into a distraction-free reader mode.\n* **🚀 Instant Web Preview**: Preview generated HTML pages in a new browser tab with one click.\n* **⚡ Live Status Updates**: Real-time progress badges keep you informed when operations are running, complete, or ready to view.\n* **🧾 Inline PDF \u0026 HTML Previews**: Lens pages embed the compiled `paper.pdf` / rendered `page.html`\n   right next to the editable source, plus the build log for LaTeX.\n* **💾 Ctrl/⌘+S**: Saves the notes and the artifact source on any lens page.\n\n---\n\n## 🏁 Quick Start Guide\n\n1. Navigate to the **📝 Input** tab.\n2. Select your preferred AI models and paste your raw notes or upload source files (or import an existing draft).\n3. Switch to the **⚙️ Pipeline** tab and click **▶ Draft** on **Draft Article**.\n4. Open the **🔍 Analysis** tab and run any lenses that pique your interest (e.g., *Socratic Dialogue* or *Game Theory*).\n5. Head back to **⚙️ Pipeline** — the step is now **Update Article** — and click **▶ Update** to blend those insights into your article!\n6. Visit **📦 Output** and open a lens page — e.g. **📚 LaTeX / PDF** — then run\n    **Generate → Build → Review → Update**, repeating the last two steps until the rendering is right.\n\n---\n\n*Enjoy thinking, refracting, and publishing with Philosophical Calculator!* 🚀","category":"Think","tags":["Teach"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"philosophical-calculator/background.png","videoUrl":"https://cognotik.com/tours/core/edit/philosophical-calculator.mp4","exampleSessions":{"The Ego Manifesto":"https://hosted.cognotik.com/philosophical-calculator/fileIndex/G-20260804-AwUaJHQh/app.html","The Algorithmic Crucible":"https://hosted.cognotik.com/philosophical-calculator/fileIndex/G-20260520-hBbPM5oP/app.html","The Ghost in the Assembly Line":"https://hosted.cognotik.com/philosophical-calculator/fileIndex/G-20260522-ZaaytZ8t/app.html"}},{"id":"app-app-hallucipedia","name":"Hallucipedia","icon":"📖","description":"An infinite, AI-hallucinated encyclopedia. Browse to any article path and it is written on demand, complete with Markdown, MathJax, Mermaid diagrams, and cross-links to pages that do not exist yet — until you visit them.","badgeClass":"","type":"docops","path":"/hallucipedia","appId":"hallucipedia","readme":"# 🪐 Hallucipedia\n\n\u003e **The encyclopedia that doesn\u0027t exist until you look at it.**\n\nWelcome to **Hallucipedia** — an infinite, self-generating encyclopedia built for worldbuilders, storytellers, gamers, dreamers, and the endlessly curious. \n\nImagine a Wikipedia where every article is waiting to be discovered. When you click an unwritten link, Hallucipedia writes the article for you on the spot — weaving rich history, technical details, culture, and lore that stay perfectly consistent with the rest of your world.\n\n---\n\n## ✨ What Makes Hallucipedia Special?\n\n* **🌌 Infinite World Creation:** Start with a single sentence like *\"A world where light travels slowly enough to be farmed\"* or *\"19th-century Europe, but mathematics is treated as an occult science.\"* Hallucipedia takes your idea and expands it into an entire world with its own rules, departments, and history.\n* **🔗 Dynamic Deep-Diving:** Click on blue links to read written pages, or click on red unwritten links to instantly generate new articles. Every new page respects the canon established before it.\n* **🔍 Search the Unwritten:** Search for concepts in your universe. If a page doesn\u0027t exist yet, Hallucipedia will construct a live search results page complete with snippets from unwritten lore.\n* **🎨 Rich Visuals \u0026 Diagrams:** Bring any page to life with the click of a button! Hallucipedia generates diagrams, mathematical equations, code snippets, and custom AI illustrations.\n* **🧠 Perfect Canon Consistency:** No matter how deep down the rabbit hole you go, Hallucipedia remembers the underlying rules, timeline, and vocabulary of your world so the lore never contradicts itself.\n\n---\n\n## 🚀 How to Get Started\n\n### 1. Define Your World\nWhen you first open Hallucipedia, you\u0027ll be prompted to describe a world in one or two sentences. You can type your own vision or pick one of the quick starter prompts. \n\nHallucipedia immediately generates:\n* **The Canon Bible** (`control/notes.md`) — the foundational laws, tone, and facts your world must follow.\n* **The Front Page** (`root.md`) — a main portal filled with intriguing, unwritten links to kickstart your journey.\n\n### 2. Start Exploring\n* **Follow Links:** Hover over any link. Blue links lead to existing articles. Red links point to pages waiting to be born. Click a red link, and Hallucipedia writes the page in real time.\n* **Navigate the Sidebar:** Use the sidebar on the right to see the page\u0027s Table of Contents, outgoing links, incoming backlinks, and the total count of written pages.\n\n### 3. Search \u0026 Discover\nUse the top search bar (or press `/`) to look up topics. You can jump directly to known pages or click **\"Search the unwritten\"** to simulate search results for topics nobody has explored yet.\n\n### 4. Illustrate \u0026 Refine\n* **🎨 Illustrate:** Click the **Illustrate** button in the top bar to add visual diagrams, flowcharts, and artwork to the current page.\n* **🔄 Regenerate:** Want a different angle on a topic? Click **Regenerate** to rewrite the page from scratch while maintaining world canon.\n* **🌱 Redefine World:** Click the setup plant icon in the top bar anytime you want to start a brand-new universe.\n\n---\n\n## ⌨️ Keyboard Shortcuts\n\n* `/` — Focus the search bar to search the encyclopedia.\n* `Ctrl + K` or `Cmd + K` — Jump directly to the path bar to type a specific article path.\n* `Esc` — Close search results or overlay windows.\n\n---\n\n## 💡 Great Ways to Use Hallucipedia\n\n* **For Writers \u0026 Novelists:** Brainstorm worlds, magic systems, futuristic technologies, and complex political factions without hitting writer\u0027s block.\n* **For Game Masters \u0026 TTRPG Creators:** Generate endless lore, locations, NPCs, and artifacts for your tabletop campaigns on the fly.\n* **For Fun \u0026 Creative Exploration:** Lose yourself in fascinating alternate histories and speculative sci-fi universes crafted entirely around your imagination.\n\n---\n\n*Step through the portal and start exploring the unwritten!*","category":"Imagine","tags":[],"hasBackground":true,"hasIcon":true,"backgroundUrl":"hallucipedia/background.png","iconUrl":"hallucipedia/icon.png","exampleSessions":{"Encyclopedia of Mathematics":"https://hosted.cognotik.com/hallucipedia/fileIndex/G-20260802-M58da7o2/app.html#/root.md"}},{"id":"app-app-empty-project","name":"Empty Project","icon":"🏗️","description":"Turn natural language descriptions into complete, runnable web apps with HTML, CSS, and JavaScript.","badgeClass":"","type":"docops","path":"/empty-project","appId":"empty-project","readme":"# Empty Project\n\nA blank Cognotik workspace. There is no source code here yet — just the **Dev Tools** catalog, a set of dependency-light\nHTML pages that drive Cognotik doc-op pipelines.\n\nStart from `app.html`. It is a thin shim that forwards to\n`cognotik-tools/index.html`, where the real catalog lives.\n\n## Layout\n\n    app.html                      redirect shim + no-JS fallback listing\n    cognotik-tools/\n      index.html                  the catalog UI (search, filters, README viewer)\n      apps.js                     the catalog *data* — meta, categories, tools\n      \u003ctool\u003e/index.html           one folder per registered tool\n      \u003ctool\u003e/README.md            rendered in place by the catalog\n\nEverything is served straight from this folder: no build step, no bundler, no `npm install`.\n\n## The tools\n\n| Tool                      | Category | What it does                                                                    |\n|---------------------------|----------|---------------------------------------------------------------------------------|\n| 🌱 Greenfield Implementer | Plan     | One paragraph of product idea → spec, stack, architecture, phases, build tasks. |\n| 🔍 Reviewer               | Review   | Focused code review: findings → follow-up tasks → generated doc-ops.            |\n| 🧭 Coder                  | Review   | Research an existing codebase, then drive changes from the answers.             |\n| 🔨 Builder                | Build    | Research how a repo builds, then generate and repair one standard `build.sh`.   |\n| 🗂️ Issues                 | Track    | A session-local issue tracker backed by a single `issues.json`.                 |\n\nSince this project starts empty, **Greenfield Implementer** is usually the right entry point: it plans a project from\nscratch and writes real source under the `target_root` chosen by its stack plan.\n\n## Using the catalog\n\n* `/` focuses the search box; `Enter` opens the first result.\n* Category chips and tag chips are cumulative filters; **Clear filters** resets them.\n* Filter state lives in the URL hash (`#q\u003d…\u0026cat\u003d…\u0026tags\u003d…`), so views are shareable.\n* **Grid** / **List** toggles the layout; the choice is remembered in `localStorage`.\n* **README** renders a tool\u0027s markdown docs in a modal instead of navigating away.\n* A card whose entry point returns 404 is dimmed and badged *not found* rather than hidden — the catalog is the source\n  of truth, a missing file is a deployment problem worth seeing.\n\n## Adding a tool\n\nAdding a tool is a data change. Drop the page under `cognotik-tools/\u003cid\u003e/`\nand append one object to the `tools` array in `cognotik-tools/apps.js`:\n\n    {\n        id: \u0027my-tool\u0027,                        // stable slug, used for deep links\n        name: \u0027My Tool\u0027,\n        icon: \u0027✨\u0027,                            // a single emoji\n        category: \u0027plan\u0027,                     // an id from `categories`\n        status: \u0027experimental\u0027,               // stable | beta | experimental\n        tagline: \u0027One line, shown under the title.\u0027,\n        description: \u0027One short paragraph, shown in the card body.\u0027,\n        entry: \u0027my-tool/index.html\u0027,          // relative to apps.js; null for op-only tools\n        docs: \u0027my-tool/README.md\u0027,            // optional, rendered in place\n        tags: [\u0027doc-ops\u0027, \u0027json-schema\u0027],\n        pipeline: [\u0027stage one\u0027, \u0027stage two\u0027], // optional\n        artifacts: [{path: \u0027my-tool/out/\u0027, note: \u0027what it generates\u0027}],\n        requires: [\u0027/app/docops.js\u0027, \u0027/app/fileIO.js\u0027],\n        storage: [\u0027myTool_state\u0027]\n    }\n\nIf it does not fit an existing bucket, add an object to `categories` first (`id`, `name`, `accent`, `blurb`). Nothing in\n`index.html` or `app.html`\nneeds to change.\n\n## Runtime dependencies\n\nMost tools expect the host to serve a few shared modules:\n\n* `/app/docops.js` — `runDocOp`, `waitForTask`, `createStatusPoller`\n* `/app/fileIO.js` — `readFile`, `writeFile`, `listFiles`, `deleteFile`\n* `/lib/marked.min.js` — markdown rendering (optional; falls back to `\u003cpre\u003e`)\n* `/lib/purify.min.js` — HTML sanitising (optional)\n\nDoc-op paths and status locations are derived from the page URL, so keep a tool\u0027s `folder:` front-matter and its\n`ROOT_HOPS` constant in sync if you move it to a different depth.\n\n## House rules\n\n* **Schema-first** — stages emit JSON conforming to a code-defined schema, never prose.\n* **One document per unit** — per file, per package, per phase; small contexts, parallel runs.\n* **Advisory, not authoritative** — dependencies and readiness are hints, never gatekeepers.\n* **Nothing implicit** — roots, status paths and generated op files are derived and displayed.\n* **Docs live beside the tool** — READMEs are markdown files rendered in place, not a wiki.","category":"Create","tags":["Devs"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"empty-project/background.png","iconUrl":"empty-project/icon.png","exampleSessions":{}},{"id":"app-app-interactive-stories","name":"Interactive Stories","icon":"📖","description":"Craft branching, AI-powered narratives. Write a premise, generate an opening scene, then explore a tree of story nodes by choosing one of three branches (A/B/C) at every step. Each path is saved to disk so you can revisit and continue any branch later.","badgeClass":"","type":"docops","path":"/interactive-stories","appId":"interactive-stories","readme":"# 📖 Interactive Stories\n\n\u003e **Transform your story ideas into immersive, branching adventures with AI-powered narration, illustrations, and music!**\n\nWelcome to **Interactive Stories**, an AI-driven \"Choose Your Own Adventure\" reader and story generator. Whether you want to explore a rain-soaked cyberpunk mystery, escape an enchanted labyrinth, or sail space winds in search of galactic treasures, Interactive Stories brings your imagination to life—complete with dynamic narrative paths, bespoke visual illustrations, spoken audio narration, and read-along text highlighting.\n\n---\n\n## ✨ Key Features\n\n- 🧠 **Endless Branching Narratives**  \n  Start with a simple prompt or premise, and watch the story unfold. Every decision you make crafts a new, unique branch in your adventure tree.\n\n- 🖼️ **AI-Generated Story Illustrations**  \n  Bring key story moments to life visually! Generate striking custom artwork for any scene or enable automatic generation as you explore.\n\n- 🎙️ **Narrated Audio \u0026 Ambient Sound**  \n  Listen to your adventure as audio narration and music ambiance are generated for each chapter.\n\n- 🔊 **Read Aloud with Synchronized Highlighting**  \n  Listen using built-in browser voice narration while watching the text highlight sentence-by-sentence in real time—perfect for relaxing or following along.\n\n- ⛶ **Immersive Reader Mode**  \n  Distraction-free reading at the push of a button. Focus entirely on the story and visuals with cinema-style immersive viewing.\n\n- 🎨 **On-Demand Visual Styling**  \n  Want a neon-glowing cyberpunk vibe, a classic parchment look, or larger buttons for mobile? Tell the style assistant how you want the app to look, and watch the theme transform!\n\n---\n\n## 🚀 How to Use Interactive Stories\n\n### 1. Pitch Your Premise\nIn the **Story Idea** section, enter a short prompt describing your setting, characters, or main conflict.  \n\u003e *Example: \"A weary space farer discovers a glowing, abandoned station orbiting a forgotten star...\"*\n\nClick **💾 Save Idea**, then hit **✨ Begin Story**!\n\n### 2. Read \u0026 Explore\nOnce your opening chapter is generated, read through the text and inspect the choices presented at the bottom:\n- Click **Choice A**, **Choice B**, or **Choice C** to forge ahead down a new path.\n- Look at the **Story Tree** on the left or top to revisit previously explored branches or jump back to key decision points anytime.\n\n### 3. Generate Media \u0026 Read Along\n- **Read Aloud:** Click the **🔊 Read Aloud** button to hear the chapter spoken aloud with real-time text highlighting. Turn on **Auto-read on load** so new scenes start reading automatically!\n- **Generate Image:** Click **🖼 Generate Image** to create a fresh illustration for the current node.\n- **Generate Audio:** Click **🎙 Generate Audio** to produce rich, atmospheric spoken narration and background audio.\n\n### 4. Dive Into Immersive Mode\nPress **F** on your keyboard or click the fullscreen icon (**⛶**) on the current node card to hide clutter and enjoy a full-screen storybook experience. Press **Esc** or click **✕** when you\u0027re ready to return.\n\n### 5. Customize the Visual Theme\nScroll down to **🎨 Update Stylesheet**, type a description of the design or look you want (e.g., *\"Use a dark, starry night background with glowing teal highlights and rounded cards\"*), and click **🖌 Update Stylesheet**. Reload the page to enjoy your personalized design!\n\n---\n\n## 🛠️ Helpful Tips \u0026 Shortcuts\n\n- **Keyboard Shortcut (`F`):** Toggle Immersive Reader mode instantly when viewing a story chapter.\n- **Auto-Image / Auto-Audio:** Enable these checkboxes in the chapter toolbar if you want new images and audio generated automatically whenever you unlock a new choice!\n- **AI Model Customization:** Advanced users can expand the **🤖 AI Models** section to select specific AI models for storytelling, speed, artwork generation, or voice audio.\n\n---\n\n*Happy storytelling! Where will your adventure take you today?*","category":"Imagine","tags":["Kids"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"interactive-stories/background.png","videoUrl":"https://cognotik.com/tours/core/edit/interactive-stories.mp4","exampleSessions":{"The Lighthouse at the Edge of Memory":"https://hosted.cognotik.com/interactive-stories/fileIndex/G-20260521-6p1PBuPB/app.html"}},{"id":"app-app-comic-serial","name":"Comic Serial","icon":"📚","description":"Transform story ideas into an ongoing comic book series with consistent characters and arcs.","badgeClass":"","type":"docops","path":"/comic-serial","appId":"comic-serial","readme":"# 📚 Comic Serial Generator\n\n\u003e **Turn your ideas into an ongoing visual comic series — one episode at a time!**\n\nWelcome to the **Comic Serial Generator**, the ultimate creative tool for storytellers, article creators, educators, and comic enthusiasts. Whether you have a short story concept, a blog post, or a grand sci-fi narrative, this application breathes visual life into your text by automatically transforming it into an illustrated, multi-episode comic book series.\n\n---\n\n## ✨ Why You\u0027ll Love Comic Serial Generator\n\n* 💡 **From Text to Panels in Seconds:** Simply write or paste your story idea, article, or narrative seed. The AI takes care of scriptwriting, panel formatting, and artwork creation.\n* ♾️ **Endless Sequential Storytelling:** Generate episode after episode! Each new sequel picks up where the previous one left off while staying true to your core story premise.\n* ⚡ **Batch Episode Generation:** Want to build an entire mini-series all at once? Fire off batch generation to produce multiple episodes in a single click.\n* 📕 **Self-Contained Comicbook Viewer:** Compile all your generated episodes into a sleek, standalone HTML comicbook with beautiful artwork layout and captions.\n* 🎨 **Tailored AI Models:** Fine-tune your creative direction by choosing specialized AI models for creative story writing, image artwork, and speedy parsing.\n\n---\n\n## 🚀 How It Works\n\nCreating your comic series is as easy as 1-2-3-4:\n\n### 1. 💡 Set Your Idea\nHead over to the **Idea** tab and type or paste your story summary, background article, or narrative pitch. \n\u003e *Example: \"A lone astronaut discovers an ancient alien library on Europa. Each book she opens reveals a chapter of Earth\u0027s forgotten history — but reading them slowly rewrites her own memories…\"*\n\nYour changes automatically save as you write!\n\n### 2. 🎨 Generate Episode #1\nSwitch to the **Pipeline** tab and click **Generate Comic #1**. The AI establishes the world, art style, main characters, and opening conflict. You can inspect the visual results right inside the built-in reader.\n\n### 3. 📖 Continue the Adventure (Sequels)\nKeep the narrative moving! Click **Generate Next Episode** whenever you\u0027re ready for the next chapter. Each episode automatically advances the plot and builds on previous story events. Need a full run fast? Use the **Batch Generation** tool to churn out up to 20 episodes sequentially.\n\n### 4. 📕 Compile Your HTML Comicbook\nWhen you\u0027re ready to share or read your complete run, click **Generate HTML Book**. This compiles every generated episode into a beautifully formatted digital comic book that you can open in any modern browser tab.\n\n---\n\n## 📖 Features Overview\n\n* **💡 Idea Tab:** Your dynamic creative hub where the foundational concept lives.\n* **⚙️ Pipeline Tab:** Your step-by-step control center to trigger Episode #1, generate ongoing sequels, run batch generations, or build the compiled HTML comicbook.\n* **📖 Series Tab:** An organized library view of all generated episodes. Easily expand individual episodes to review their panels or quickly compile the complete book.\n* **🤖 Models Tab:** Customize the AI powerhouses driving your comic creation — select specialized models for smart creative writing, rapid processing, and panel illustration.\n\n---\n\n## 💡 Tips for Great Comics\n\n1. **Start with strong world-building:** A clear setup with distinct characters and settings yields vivid comic panels.\n2. **Let sequels surprise you:** Each sequel logically builds on the previous episode, creating organic plot twists over time.\n3. **Use the Interactive Reader:** Use the built-in comic preview toolbar to adjust height or switch to full-screen mode for immersive reading.\n\n---\n\n*Happy visual storytelling!* 🎨✨","category":"Imagine","tags":["Kids"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"comic-serial/background.png","videoUrl":"https://cognotik.com/tours/core/edit/comic-serial.mp4","exampleSessions":{"The Silence of the Shard":"https://hosted.cognotik.com/comic-serial/fileIndex/G-20260520-mfufqTxG/app.html"}},{"id":"app-app-quiz-wiz","name":"Quiz Wiz","icon":"🧠","description":"Turn a plain-English quiz idea into a fully working, playable web-based quiz game through a multi-step AI pipeline that designs, generates data, and implements the code.","badgeClass":"","type":"docops","path":"/quiz-wiz","appId":"quiz-wiz","readme":"# 🧠 Quiz Wiz\n\n**Turn any idea into a playable quiz game — no coding required.**\n\nQuiz Wiz uses the power of AI to take a simple description of a quiz topic and transform it into a fully working,\nbrowser-based quiz game. Just describe what you want, click a few buttons, and watch your quiz come to life.\n\n---\n\n## ✨ What Can Quiz Wiz Do For You?\n\nEver wanted to create a fun quiz for your team, classroom, event, or just for laughs — but didn\u0027t know where to start?\nQuiz Wiz handles everything:\n\n- 🎯 **Designs** the structure and rules of your quiz automatically\n- 📝 **Writes** all the questions, answers, and explanations for you\n- 🎮 **Builds** a polished, playable web app — ready to share\n- 🧪 **Tests** the game to catch any issues before you do\n- 🔍 **Reviews** the results and flags anything that needs fixing\n- ♻️ **Refines** the game based on your feedback, as many times as you like\n\nNo design skills. No coding. No fuss.\n\n---\n\n## 🗺️ How It Works — The Six Steps\n\nQuiz Wiz walks you through a simple pipeline, one step at a time. Each step builds on the last.\n\n| Step | What Happens |\n|------|-------------|\n| **① Quiz Idea** | You describe your quiz in plain English |\n| **② Design** | AI designs the structure and game flow |\n| **③ Game Data** | AI writes all the questions and answers |\n| **④ Build Code** | AI assembles a working, playable web app |\n| **⑤ Test** | The game is automatically run and checked |\n| **⑥ Review** | AI reads the test results and notes any issues |\n| **⑦ Update** | You give feedback; AI applies your changes |\n\n---\n\n## 🚀 Getting Started\n\n1. **Open Quiz Wiz** using your session link.\n2. **Choose your AI models** at the top — the defaults work great if you\u0027re not sure.\n3. **Write your quiz idea** in the *Quiz Idea* box. A sentence or two is enough to get started!\n4. Hit **💾 Save Idea**, then work through each step by clicking the button in each card.\n5. When the **▶️ Open Game** button lights up, your quiz is ready to play!\n\nThat\u0027s it. The whole process typically takes just a few minutes.\n\n---\n\n## 💡 Writing a Great Quiz Idea\n\nThe more detail you give, the better your quiz will be. Try to mention:\n\n- **The topic** — What is the quiz about?\n- **Who it\u0027s for** — Kids? Trivia buffs? Work colleagues?\n- **How hard** — Easy, medium, hard, or a mix?\n- **How many questions** — 5, 10, 20?\n- **The style** — Multiple choice? True/false?\n- **Any extras** — Timers, themes, fun facts after each answer?\n\n### Example ideas that work well:\n\n\u003e *\"A 10-question multiple-choice quiz about classic 1980s arcade games, aimed at casual gamers. Include fun trivia and\n\u003e explanations for each answer.\"*\n\n\u003e *\"A 15-question true/false quiz about world geography for middle school students. Medium difficulty, with a fun fact\n\u003e after each question.\"*\n\n\u003e *\"A 20-question pub-style trivia quiz covering movies, music, and sport from the 1990s. Hard difficulty, mixed\n\u003e question styles.\"*\n\n---\n\n## ♻️ Refining Your Quiz\n\nNot quite right? No problem. Quiz Wiz makes it easy to tweak your game:\n\n1. Write your feedback in the **Update / Refine** box at the bottom of the page.\n2. Click **💾 Save Notes**, then **♻️ Apply Updates**.\n3. Your game will be rebuilt with your changes applied.\n\nYou can do this as many times as you like. Be as specific as you want — the more clearly you describe what to change,\nthe better the result.\n\n### Example feedback notes:\n\n```\n- The timer feels too short — give players 30 seconds per question instead of 15\n- Add a progress bar so players can see how far through the quiz they are\n- Use a dark colour theme\n- Show the correct answer and an explanation after each question\n- Fix the final score screen — it\u0027s not showing the total correctly\n```\n\n---\n\n## 🖥️ Reading the Screen\n\nThe Quiz Wiz interface is made up of simple cards, one per step. Here\u0027s what to look for:\n\n- **Status badges** — Each step shows a coloured badge: `pending` (not started), `running` (in progress), `done`\n  (finished), or `error` (something went wrong).\n- **▶️ Open Game** — Appears and becomes clickable once your game has been built successfully.\n- **📂 View Files** — Browse the files generated at each step.\n- **📡 Active Sessions** — Shows live progress for any AI tasks currently running.\n- **📜 Activity Log** — A running record of everything that\u0027s happened, useful if something goes wrong.\n\n---\n\n## 🤔 Frequently Asked Questions\n\n**Do I need to know how to code?**\nNot at all. Quiz Wiz handles all the technical work. You just describe what you want in plain English.\n\n**How long does each step take?**\nMost steps complete in under a minute. The Build step may take a little longer for complex quizzes.\n\n**Can I share my quiz with others?**\nYes! Once built, your quiz runs in any modern web browser. Use the **▶️ Open Game** link to play it, and share that\nlink with anyone you like.\n\n**What if a step fails?**\nCheck the **📜 Activity Log** for details. You can usually just try running the step again. If the problem persists,\ncheck the **📡 Active Sessions** panel for a monitor link to see exactly what happened.\n\n**Can I change the quiz topic completely?**\nYes — update your idea in Step ① and re-run the pipeline from Step ② onwards.\n\n**Will my changes in the Update step break anything?**\nQuiz Wiz is designed to apply only the changes you ask for, leaving everything else untouched. If something does break,\njust describe the issue in the Update box and run it again.\n\n---\n\n## ⚠️ Troubleshooting\n\n| Problem | What to do |\n|---------|-----------|\n| *\"Could not determine session from URL\"* | Make sure you\u0027re opening the app via its proper session link |\n| A step badge is stuck on `running` | Check the **📡 Active Sessions** panel and the **📜 Activity Log** |\n| The **▶️ Open Game** button isn\u0027t appearing | The Build step may not have finished — check the Activity Log and try again |\n| The quiz doesn\u0027t look right | Use the **⑦ Update / Refine** step to describe what needs fixing |\n| Models not loading | Check your internet connection and try refreshing the page |\n\n---\n\n*Quiz Wiz is part of the DocOps apps suite.*","category":"Create","tags":["Teach","Kids"],"hasBackground":true,"hasIcon":false,"backgroundUrl":"quiz-wiz/background.png"},{"id":"app-role-research","name":"Role Research","icon":"🎯","description":"Tailor your job application to a specific role. Starting from a job description and your personal data, it produces a fit analysis, a customized resume, a cover letter, and supporting portfolio talking points, then compiles the LaTeX outputs.","badgeClass":"","type":"docops","path":"/role-research","appId":"role-research","readme":"# 🎯 Role Research\n\n\u003e **Tailor your job application to every role — effortlessly.**\n\nLanding your dream job starts with standing out. **Role Research** is an AI-powered DocOps application that takes your background and automatically generates customized, role-tailored application materials for any job posting.\n\nInstead of spending hours rewriting your resume, drafting cover letters from scratch, or wondering how to prepare for interviews, Role Research handles the heavy lifting so you can focus on putting your best foot forward.\n\n---\n\n## ✨ Why You\u0027ll Love Role Research\n\n* **Enter Your Info Once, Reuse Everywhere:** Enter your master resume, portfolio links, writing style, and personal goals just once under **Personal Data**. Every new role you research automatically builds upon your unique story.\n* **In-Depth Fit Analysis:** Discover exactly how your experience matches the job description, which keywords to emphasize, and where your strengths shine.\n* **Custom-Tailored Resumes \u0026 Cover Letters:** Automatically generate polished, tailored resumes and cover letters crafted specifically for each target role.\n* **AI-Assisted Fine-Tuning:** Need a quick adjustment? Edit documents manually or give quick notes to let AI apply precise updates for you.\n* **Complete Interview Prep:** Get a personalized interview game plan with customized stories, key questions to ask, and potential interview flags to watch out for.\n* **One-Click Exports \u0026 Downloads:** Preview your generated PDFs right in the app, or download whole role packages as ZIP archives.\n\n---\n\n## 🚀 Getting Started\n\nUsing **Role Research** is simple and straightforward. Here is how to get the most out of it:\n\n### Step 1: Set Up Your Personal Data 👤\n\nBefore applying to specific roles, fill in your foundational details under the **Personal Data** tab.\n\n1. Navigate to **1 · Personal Data**.\n2. Fill out your details across the tabs:\n   * **Master Resume (LaTeX):** Your complete, comprehensive resume containing all past experience and accomplishments.\n   * **Personal Notes \u0026 Portfolio Sites:** Your live projects, open-source work, and key links.\n   * **Writing Style:** Guidance on tone and voice for generated cover letters.\n   * **Goals \u0026 Interview Response Bank (Optional):** Key motivations and reusable stories for interview preparation.\n3. Click **Save** on each tab. You only need to do this step once!\n\n---\n\n### Step 2: Add a Target Role 📁\n\nWhen you find a job you want to apply for:\n\n1. Switch to the **2 · Roles** tab.\n2. Under **New role slug**, enter a short nickname for the role (for example, `acme-senior-engineer` or `stripe-product-manager`).\n3. Click **Create role**.\n4. In the **Input** tab for your new role:\n   * Paste the posting link on Line 1 of `jd.md`, followed by the text of the job description.\n   * Add any personal notes or takeaways about the company in `notes.md`.\n   * Click **Save** for each file.\n\n---\n\n### Step 3: Run the AI Pipeline ⚙️\n\nLet AI do the work of crafting your tailored application package:\n\n1. Click **▶▶ Run all steps** at the bottom of the role workspace to run the entire pipeline automatically.\n2. Alternatively, explore each tab and run steps individually:\n   * **Analysis:** Generates an evidence-based fit analysis and ranks your relevant portfolio projects.\n   * **Resume:** Customizes a tailored ~3-page resume from your master resume.\n   * **Cover Letter:** Drafts a personalized cover letter matching your tone and the role\u0027s requirements.\n   * **Interview:** Generates a comprehensive interview preparation guide.\n\n---\n\n### Step 4: Review, Touch Up, and Export 📄\n\n1. **Review Outputs:** Preview Markdown text, JSON breakdowns, or generated PDFs directly inside each sub-tab.\n2. **Make Fine Edits:**\n   * Edit LaTeX or Markdown text directly in the built-in editor.\n   * Or write prompt notes in `resume_notes.md` / `coverletter_notes.md` and click **Apply manual edits** to let AI adjust the document for you.\n3. **Build \u0026 Download:** Click **Build PDF/DOCX** to compile final document PDFs, then download your finished materials or export a full role ZIP file.\n\n---\n\n## 💡 Tips for Best Results\n\n* **Keep your Master Resume detailed:** The more accomplishments and metrics in your master resume, the better AI can select relevant highlights for specific job roles.\n* **Add custom notes:** If you have internal referral information or key insights about the hiring manager, add them to `notes.md` before running the analysis step.\n* **Utilize AI edit notes:** Want to make a paragraph punchier or highlight a specific project? Write quick bullet points in the edit notes field and run the **Apply manual edits** step!\n\n---\n\n## 🛠️ Requirements \u0026 Model Options\n\n* **Model Selection:** Choose your preferred **Smart model** (for reasoning and drafting) and **Fast model** (for quick conversions) using the header dropdowns.\n* **Monaco Editor Support:** Rich text and syntax-highlighted code editing is provided automatically. Plain text fallback editors are available if offline.\n\n---\n\n*Ready to land your next position? Create your first role and let Role Research tailor your path to success!*","category":"Think","tags":["Jobs","Career","PDF","LaTeX"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"role-research/background.png","iconUrl":"role-research/icon.png","exampleSessions":{}},{"id":"app-skill-prep","name":"Skill Prep","icon":"📚","description":"Your personal study coach. Feed it a topic, your notes, and a little context — it builds a model of you as a learner, quizzes you to find the gaps, and produces a personalized LaTeX reference sheet tuned to exactly what you need to know.","badgeClass":"","type":"docops","path":"/skill-prep","appId":"skill-prep","readme":"# 📚 Skill Prep — Your Personal AI Study Coach\n\n**Skill Prep** is your ultimate study companion. Whether you\u0027re preparing for an upcoming exam, mastering a complex work topic, or picking up a new skill from scratch, Skill Prep transforms your raw notes and topics into an interactive, personalized learning journey.\n\nInstead of generic flashcards or static study guides, Skill Prep creates an active model of your current knowledge. It pinpoints your exact knowledge gaps through custom diagnostic quizzes, then builds a publication-quality reference sheet (PDF) designed specifically to reinforce what you need most.\n\n---\n\n## ✨ Why You\u0027ll Love Skill Prep\n\n* 🎯 **Study Smarter, Not Harder**: Skip re-reading material you\u0027ve already mastered. Focus 100% of your energy on bridging your actual knowledge gaps.\n* 🧠 **Personalized Profile**: Watch your learner profile evolve as you complete quizzes, showing your strengths, areas for growth, and learning style.\n* 📝 **Interactive Browser Quizzes**: Take tailored diagnostic quizzes directly in your browser with immediate feedback.\n* 📄 **Printable Cheat Sheets**: Get clean, beautifully styled PDF reference sheets loaded with key concepts, formulas, and tailored explanations.\n* 🔮 **AI-Powered Refinement**: Automatically critique and polish reference sheets until they are crystal clear and perfectly suited to your goals.\n\n---\n\n## 🚀 Getting Started in 5 Simple Steps\n\n### Step 1: Subject Inputs 📥\nEnter the core details about what you want to learn:\n* **Topic**: Name the subject or topic (e.g., *Linear Algebra — Eigenvalues \u0026 Eigenvectors* or *Python Async Programming*).\n* **Notes**: Paste existing notes, textbook summaries, or key concepts you\u0027re working with.\n* **Context**: Add background info, such as your prior experience level, learning goals, or exam format.\n\nClick **💾 Save Inputs**, then **▶️ Initialize Subject \u0026 Learner** to create your initial baseline profile.\n\n### Step 2: Learner Profile 🧠\nSkill Prep builds an initial snapshot of your starting knowledge. As you take quizzes and study, this profile tracks:\n* Topics you\u0027ve mastered\n* Concepts needing reinforcement\n* Personal study preferences\n\nClick **🔄 Refresh Profile** anytime to see where you stand.\n\n### Step 3: Diagnostic Quiz 📝\nReady to test your knowledge?\n* Click **▶️ Generate Quiz** to create an interactive test targeting your estimated knowledge gaps.\n* Click **📝 Take Quiz** to open the interactive quiz in a new tab.\n* Complete the quiz and review your score!\n* Return to the main app and click **🔄 Refresh Responses** to import your results.\n\n### Step 4: Update Profile 🔄\nClick **▶️ Update Learner Profile**. Skill Prep analyzes your quiz answers, recognizing your growth and pinpointing remaining weaknesses to refine your profile.\n\n### Step 5: Custom Reference Sheet 📕\nCreate a beautifully formatted reference sheet tuned to your unique learning needs:\n1. **▶️ Generate TeX**: Drafts a custom LaTeX reference document tailored to your updated profile.\n2. **🖨️ Render PDF**: Converts the document into a printable PDF cheat sheet.\n3. **🔍 Critique**: Evaluates the reference sheet for clarity, formatting, and content coverage.\n4. **✨ Apply Critique**: Refines and perfects the reference sheet based on feedback.\n5. **📕 Open PDF**: View, download, or print your custom study guide!\n\n---\n\n## ⚙️ Model Configuration\n\nAt the top of the app, choose your preferred AI models:\n* **Smart Model**: Used for deep reasoning, producing insightful quizzes, updating profiles, and authoring reference sheets.\n* **Fast Model**: Used for quick background processing tasks.\n\nYour model selections are remembered on your device, so you\u0027re ready to pick up right where you left off.\n\n---\n\n## 💡 Tips for Best Results\n\n* **Share Your Context**: The more background you provide in Step 1 (e.g., *\"I understand basic matrix operations, but struggle with geometric intuition\"*), the better your custom profile and quizzes will be.\n* **Embrace Mistakes**: Diagnostic quizzes are designed to find what you don\u0027t know yet. Wrong answers give the app valuable feedback on what to include on your cheat sheet.\n* **Iterate as You Learn**: Take multiple quiz rounds to refine your profile and upgrade your reference sheet as your mastery grows!\n\nHappy studying! 🚀","category":"Think","tags":["Jobs","Learning","Quiz","PDF","LaTeX"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"skill-prep/background.png","iconUrl":"skill-prep/icon.png","exampleSessions":{}},{"id":"app-code-assignment","name":"Code Assignment","icon":"🧩","description":"Author, validate, and publish auto-verifiable coding problems. Draft candidate ideas from a brief, expand a selected idea into a full problem package (statement, starter scaffold, verification harness), then validate it before it appears in the library.","badgeClass":"","type":"docops","path":"/code-assignment","appId":"code-assignment","readme":"# 🧩 Code Assignment\n\n**Turn a rough hiring idea into a polished, self-checking coding exercise — in minutes.**\n\nWriting a good take-home or interview coding problem is slow work. You have to invent something interesting, write a\nclear problem statement, build starter files, and then prove that the whole thing actually works before you put it in\nfront of a candidate.\n\nCode Assignment does the heavy lifting for you. Describe what you want, review a short list of candidate ideas, pick\nyour favorite, and let the app build and test the complete package for you.\n\n---\n\n## What you get\n\n- **Fresh ideas on demand** — a batch of candidate problems tailored to your language, topic, and difficulty level.\n- **Complete problem packages** — a written problem statement (README), starter files, and an automatic checker that can\n  tell whether a submitted solution is correct.\n- **Proof that it works** — every problem can be validated automatically, so you never hand out a broken or ambiguous\n  exercise.\n- **A searchable library** — everything you create is kept in one place, filterable by language, topic, difficulty,\n  tags, and review status.\n- **One-click downloads** — grab a whole batch or a single problem as a zip file.\n\n---\n\n## Getting started\n\n### Step 1 · Draft ideas\n\nOpen the **1 · Draft ideas** tab.\n\n1. Give your batch a short name (for example `2025-q1-python-graphs`). This just keeps your work organized.\n2. Fill in the brief:\n    - **Language (s)** — e.g. `python`, or `any`.\n    - **Domain / topic** — e.g. `graphs`, `string processing`, `concurrency`.\n    - **Difficulty target** — `easy`, `medium`, `hard`, or something descriptive like *\"45-minute interview screen\"*.\n    - **Constraints** — anything that must be true, such as \"no external packages\" or\n      \"must run offline\".\n    - **Reference context** *(optional)* — paste a job posting or a list of required skills, and the ideas will lean\n      toward that role.\n    - **How many ideas** — leave blank for a handful (around 5–8).\n3. Click **Draft ideas →**.\n\nIn a moment you\u0027ll see a set of idea cards, each with a title, a one-line summary, the skills it tests, why it\u0027s\ninteresting, and where candidates might get confused.\n\n\u003e 💡 Tip: You can come back to any earlier batch from the list on the left, tweak the\n\u003e brief, and draft again.\n\n### Step 2 · Pick an idea and expand it\n\nFound one you like? On that idea\u0027s card, adjust the suggested problem id if you wish and click **Use this idea →**.\n\nThe app writes the full problem package — statement, starter scaffold, and automatic checker — and then takes you\nstraight to the Library.\n\n### Step 3 · Review and validate\n\nIn the **2 · Library** tab you can browse everything you\u0027ve created.\n\n- Use the filters at the top (language, domain, difficulty, status, tags, or a text search) to narrow the list.\n- Click any card to open it. You\u0027ll see the problem details, the full README as a candidate would read it, the latest\n  test results, and any written feedback.\n- Click **▶ Validate this problem** to have the app solve and test the problem end-to-end. When it finishes you\u0027ll see a\n  pass/fail summary and per-test details.\n- Click **Generate report** for a written critique of the problem — clarity, difficulty, and anything worth fixing.\n- Click **Download problem (zip) ↓** when you\u0027re ready to share it.\n\n---\n\n## Understanding the status badges\n\n| Badge            | What it means                                                        |\n|------------------|----------------------------------------------------------------------|\n| **unexpanded**   | An idea has been chosen, but the full package hasn\u0027t been built yet. |\n| **draft**        | The package exists but hasn\u0027t been tested.                           |\n| **needs-review** | It was tested and something didn\u0027t pass — worth a look.              |\n| **validated**    | Tested and passing. Ready to use.                                    |\n\n---\n\n## Handy details\n\n- **Models**: The two dropdowns at the top let you choose which AI models to use — a\n  \"smart\" one for the heavier writing work and a \"fast\" one for lighter tasks. Your choices are remembered.\n- **Activity log**: At the bottom of the page you can watch what\u0027s happening in real time, including links to monitor a\n  running task live.\n- **Longer runs**: Drafting and validation can take a little while. That\u0027s normal — the app is genuinely writing and\n  running code. Just leave the tab open.\n- **Nothing is lost**: Batches live under `drafts/` and finished problems under\n  `problems/`, so you can always come back later or share the folders directly.\n\n---\n\n## A typical session\n\n\u003e *\"I need a medium-difficulty Python exercise about graphs for a backend screen.\"*\n\n1. Name the batch `backend-screen-graphs`, fill in the brief, click **Draft ideas**.\n2. Skim six ideas, pick the one about shortest paths in a road network.\n3. Click **Use this idea** — the full package is written for you.\n4. Click **Validate this problem** — all tests pass. ✅\n5. Click **Generate report**, read the notes, and download the zip.\n\nTotal effort: a few minutes of reading and three clicks.\n\n---\n\n**Ready?** Head to the **Draft ideas** tab and describe the problem you wish you had.\n","category":"Think","tags":["Jobs","Coding","Interview Prep","DocOps"],"hasBackground":true,"hasIcon":true,"backgroundUrl":"code-assignment/background.png","iconUrl":"code-assignment/icon.png","exampleSessions":{}}]