import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { FileText, Settings, Calendar, Bug, Palette, Code, Play, Save, History, ChevronRight, Moon, Zap, Eye } from 'lucide-react'; const App = () => { const [activeTab, setActiveTab] = useState('tas'); const [selectedTas, setSelectedTas] = useState(1); const [logs, setLogs] = useState([ '[2024-01-15 14:32:45] INFO: DOKK initialization complete', '[2024-01-15 14:33:12] WARN: Cold start detected in neon-noir module', '[2024-01-15 14:34:01] ERROR: Metaphor cascade failure - E404:MOTIF' ]); const tasSteps = [ { id: 1, title: "Define Micro-Project Scope", description: "Core premise, protagonist profile, constraints", prompt: "Produce a 1,000-word 'Digital Nightmare' short story set in a cold neon-noir city. Protagonist: mid-30s backend engineer with a failing critical service and a moral choice. Constraints: 3 scenes, ~330 words each, keep technical references plausible but accessible. Tone: clinical, anxious, elegiac. Include one log snippet and one error code as motif." }, { id: 2, title: "Create Story Bible", description: "Setting rules, tech ecosystem, key artifacts", prompt: "Return a compact story bible (bulleted) with: city sensory rules, network/stack basics used, protagonist backstory, antagonist forces (corp, rogue AI, infrastructure), three artifacts (log, key, terminal). Keep items terse for use in prompts." }, { id: 3, title: "Break into Beats", description: "3 scenes: inciting glitch, cascade, reveal", prompt: "Output a scene-by-scene beat sheet with scene goals, stakes, physical location, emotional arc, key lines or images to include (max 6 bullets per scene)." }, { id: 4, title: "Draft Prompts/Templates", description: "Generation & revision templates", prompt: "Generate 3 reusable prompts/templates: seed draft prompt, tighten-and-clarify revision prompt, technical-accuracy check prompt. Each must include explicit instructions for length, tone, and placeholders for variables (e.g., {log_snippet})." }, { id: 5, title: "Design Minimal UI", description: "Editor, log view, versioning", prompt: "Describe a minimal editor UI for rapid drafting: main editor, split log/terminal pane, version history, quick-insert snippet palette. Provide keyboard shortcuts and accessible color contrast values (WCAG AA)." }, { id: 6, title: "Implement Generation Pipeline", description: "Prompt runner, temperature control, caching", prompt: "Provide implementation steps and CLI commands to run generation: script to call model API with temperature presets, caching strategy, prompt concatenation order, and example environment variables. Include error handling pseudocode." }, { id: 7, title: "Integrate Evaluation Loop", description: "Unit tests, rubrics, human-in-the-loop", prompt: "Create an evaluation rubric (10–50 pts) for automated checks: coherence, plausibility, emotional arc, jargon clarity, pacing, originality. Add unit-test-style examples to detect hallucinated tech facts." }, { id: 8, title: "Polish & Publish", description: "Tech check, copy edit, formatting", prompt: "Produce a final checklist for polish and publication: tech fact verification, log formatting, copyedit pass, metadata tags, and export templates (Markdown, HTML)." } ]; const carePlan = { water: "Short iterative feedback cycles (daily micro-revisions)", light: "High contrast visuals: deep indigo backgrounds, cyan/neon-pink accents", soil: "Dense, layered motifs — logs, cables, rain-slick streets; keep texture minimal", feeding: "Feed with real engineering artifacts: authentic log formats, concise error codes, 2–3 sensory anchors per scene" }; const seasonalCalendar = [ { week: 1, task: "Scope, story bible, and beat sheet" }, { week: 2, task: "Draft scene 1–3 (one per 1–2 days), gather log snippets" }, { week: 3, task: "Revise for tone, tech plausibility, and pacing" }, { week: 4, task: "Polish, accessibility checks, export + publish" } ]; const troubleshooting = [ { symptom: "Atmosphere feels flat", fix: "Increase neon contrasts, add weather (cold rain, steam) and log-motif repetitions" }, { symptom: "Engineer reader disengaged", fix: "Add concrete constraints (SLA, countdown, failing test) and precise tech terms" }, { symptom: "Story too technical", fix: "Add sensory anchors, shorten jargon lines, insert emotional beats" }, { symptom: "Color palette low contrast", fix: "Use #0B1020 (indigo) background with #00E5FF (cyan) and #FF2D95 (neon-pink) accents; ensure text ≥ AA" } ]; const milestones = [ { day: 1, task: "Confirm bible and beats" }, { day: 3, task: "Scene 1 draft" }, { day: 5, task: "Scene 2 draft" }, { day: 7, task: "Scene 3 draft" }, { day: 10, task: "Revision pass" }, { day: 14, task: "Final polish & publish" } ]; const addLog = (message) => { setLogs(prev => [...prev, `[${new Date().toISOString().slice(0, 19).replace('T', ' ')}] ${message}`]); }; useEffect(() => { addLog(`TAS-${selectedTas} activated`); }, [selectedTas]); return ( <div className="min-h-screen bg-gray-900 text-cyan-100 font-mono"> {/* Header */} <header className="border-b border-cyan-500/30 bg-gray-900/80 backdrop-blur-sm sticky top-0 z-10"> <div className="container mx-auto px-4 py-3 flex items-center justify-between"> <motion.div className="flex items-center space-x-2" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} > <div className="w-3 h-3 bg-pink-500 rounded-full animate-pulse"></div> <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-500"> DOKK — Digital Nightmare Toolkit </h1> </motion.div> <div className="flex space-x-4"> <button onClick={() => addLog("System status: Operational")} className="px-3 py-1 bg-cyan-900/50 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/50 transition-colors" > Status </button> </div> </div> </header> <div className="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> {/* Sidebar */} <motion.aside className="lg:w-64 flex-shrink-0" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.1 }} > <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4 mb-6"> <h2 className="text-lg font-semibold mb-3 flex items-center"> <Settings className="mr-2 w-5 h-5 text-pink-400" /> Navigation </h2> <nav className="space-y-2"> {[ { id: 'tas', label: 'TAS Steps', icon: FileText }, { id: 'care', label: 'Care Plan', icon: Palette }, { id: 'calendar', label: 'Calendar', icon: Calendar }, { id: 'troubleshoot', label: 'Troubleshoot', icon: Bug }, { id: 'milestones', label: 'Milestones', icon: Eye } ].map((item) => { const Icon = item.icon; return ( <button key={item.id} onClick={() => setActiveTab(item.id)} className={`w-full text-left px-3 py-2 rounded flex items-center transition-colors ${ activeTab === item.id ? 'bg-cyan-900/30 text-cyan-300 border border-cyan-500/30' : 'hover:bg-gray-700/50' }`} > <Icon className="mr-2 w-4 h-4" /> {item.label} </button> ); })} </nav> </div> {/* Live Log */} <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-4"> <h3 className="text-md font-semibold mb-3 flex items-center"> <Code className="mr-2 w-4 h-4 text-cyan-400" /> Live Log </h3> <div className="bg-black/50 border border-cyan-500/10 rounded p-3 h-48 overflow-y-auto text-xs font-mono"> {logs.map((log, index) => ( <div key={index} className="mb-1 last:mb-0"> <span className="text-cyan-300">$</span> {log} </div> ))} </div> <button onClick={() => addLog("Manual log entry added")} className="mt-3 w-full py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs hover:bg-cyan-800/30 transition-colors" > Add Entry </button> </div> </motion.aside> {/* Main Content */} <main className="flex-1"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} > {activeTab === 'tas' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <FileText className="mr-3 text-pink-400" /> TAS Steps </h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> {tasSteps.map((step) => ( <motion.div key={step.id} whileHover={{ scale: 1.02 }} className={`p-4 rounded-lg border cursor-pointer transition-all ${ selectedTas === step.id ? 'bg-cyan-900/20 border-cyan-500/50' : 'bg-gray-700/30 border-gray-600/30 hover:border-cyan-500/30' }`} onClick={() => setSelectedTas(step.id)} > <div className="flex justify-between items-start"> <div> <h3 className="font-bold text-cyan-300">TAS-{step.id}</h3> <h4 className="font-semibold mt-1">{step.title}</h4> <p className="text-sm text-gray-300 mt-2">{step.description}</p> </div> <ChevronRight className="w-5 h-5 text-cyan-400" /> </div> </motion.div> ))} </div> <div className="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> <div className="flex items-center justify-between mb-4"> <h3 className="text-lg font-semibold text-cyan-300"> Prompt for TAS-{selectedTas} </h3> <div className="flex space-x-2"> <button className="px-3 py-1 bg-cyan-900/30 border border-cyan-500/30 rounded text-xs flex items-center hover:bg-cyan-800/30 transition-colors"> <Play className="w-3 h-3 mr-1" /> Run </button> <button className="px-3 py-1 bg-gray-700/50 border border-gray-600/30 rounded text-xs flex items-center hover:bg-gray-600/50 transition-colors"> <Save className="w-3 h-3 mr-1" /> Save </button> </div> </div> <div className="bg-gray-900/50 border border-gray-700/30 rounded p-4 text-sm"> <pre className="whitespace-pre-wrap font-sans"> {tasSteps.find(t => t.id === selectedTas)?.prompt} </pre> </div> </div> </div> )} {activeTab === 'care' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Palette className="mr-3 text-pink-400" /> Care Plan </h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> {Object.entries(carePlan).map(([key, value]) => ( <motion.div key={key} whileHover={{ y: -5 }} className="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4" > <h3 className="font-bold text-cyan-300 capitalize mb-2">{key}</h3> <p className="text-sm text-gray-200">{value}</p> </motion.div> ))} </div> <div className="bg-black/30 border border-cyan-500/20 rounded-lg p-5"> <h3 className="text-lg font-semibold mb-4 text-cyan-300">Sustainability Tip</h3> <p className="text-gray-200"> Reuse concise real log formats (e.g., RFC-style timestamps, syslog) as motifs to save creative effort and increase authenticity. </p> </div> </div> )} {activeTab === 'calendar' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Calendar className="mr-3 text-pink-400" /> Seasonal Calendar </h2> <div className="space-y-4"> {seasonalCalendar.map((week, index) => ( <motion.div key={index} initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.1 }} className="flex items-start p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg" > <div className="mr-4"> <div className="w-10 h-10 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center"> <span className="font-bold text-cyan-300">W{week.week}</span> </div> </div> <div> <h3 className="font-semibold text-cyan-300">Week {week.week}</h3> <p className="text-gray-200">{week.task}</p> </div> </motion.div> ))} </div> </div> )} {activeTab === 'troubleshoot' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Bug className="mr-3 text-pink-400" /> Troubleshooting </h2> <div className="space-y-4"> {troubleshooting.map((item, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1 }} className="p-4 bg-gray-700/30 border border-gray-600/30 rounded-lg" > <h3 className="font-semibold text-cyan-300 mb-2">Symptom: {item.symptom}</h3> <p className="text-gray-200">Fix: {item.fix}</p> </motion.div> ))} </div> </div> )} {activeTab === 'milestones' && ( <div className="bg-gray-800/50 border border-cyan-500/20 rounded-lg p-6"> <h2 className="text-2xl font-bold mb-6 flex items-center"> <Eye className="mr-3 text-pink-400" /> Milestones & Checkpoints </h2> <div className="relative pl-8 border-l-2 border-cyan-500/30"> {milestones.map((milestone, index) => ( <motion.div key={milestone.day} initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: index * 0.1 }} className="mb-6 relative" > <div className="absolute -left-10 w-6 h-6 rounded-full bg-cyan-500 border-4 border-gray-900 flex items-center justify-center"> <Zap className="w-3 h-3 text-gray-900" /> </div> <div className="bg-gray-700/30 border border-gray-600/30 rounded-lg p-4"> <div className="flex justify-between items-start"> <div> <h3 className="font-bold text-cyan-300">Day {milestone.day}</h3> <p className="text-gray-200 mt-1">{milestone.task}</p> </div> <div className="flex space-x-2"> <button className="px-2 py-1 bg-gray-600/50 border border-gray-500/30 rounded text-xs hover:bg-gray-500/50 transition-colors"> Check </button> </div> </div> </div> </motion.div> ))} </div> </div> )} </motion.div> </main> </div> {/* Footer */} <footer className="border-t border-cyan-500/20 bg-gray-900/80 backdrop-blur-sm mt-12 py-6"> <div className="container mx-auto px-4 text-center text-gray-400 text-sm"> <p>DOKK — Digital Nightmare Toolkit | Cold Neon-Noir Project Management</p> <p className="mt-2">Proceeding with "metaphor" | Placebo pipes activated</p> </div> </footer> </div> ); }; export default App; - Initial Deployment