[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69af667d61e0819183e26f65db00a3c1","versionInt","title","Productivity-2026-mission-app","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n FileText,\n KanbanSquare,\n Lightbulb,\n MessageSquare,\n Plus,\n Search,\n Sparkles,\n Upload,\n X,\n Brain,\n Clock3,\n Target,\n Wand2,\n ArrowUpRight,\n Filter,\n Star,\n FolderOpen,\n SendHorizonal,\n} from \"lucide-react\";\n\nconst defaultTasks = {\n task: [\n {\n id: \"t1\",\n title: \"Finalize weekly editorial roadmap\",\n owner: \"Nishant\",\n priority: \"High\",\n due: \"Today\",\n tags: [\"Content\", \"Planning\"],\n },\n {\n id: \"t2\",\n title: \"Prepare AI tools newsletter shortlist\",\n owner: \"Team\",\n priority: \"Medium\",\n due: \"Tomorrow\",\n tags: [\"Research\", \"Growth\"],\n },\n ],\n doing: [\n {\n id: \"d1\",\n title: \"Build launch page for feature campaign\",\n owner: \"Design\",\n priority: \"High\",\n due: \"2 days\",\n tags: [\"Web\", \"Launch\"],\n },\n ],\n done: [\n {\n id: \"dn1\",\n title: \"Publish trend report recap\",\n owner: \"Ops\",\n priority: \"Done\",\n due: \"Completed\",\n tags: [\"Report\"],\n },\n ],\n};\n\nconst defaultDocs = [\n { id: \"doc1\", name: \"Q1 Strategy.pdf\", type: \"PDF\", size: \"2.4 MB\" },\n { id: \"doc2\", name: \"Growth Ideas.docx\", type: \"DOC\", size: \"640 KB\" },\n { id: \"doc3\", name: \"Research Notes.txt\", type: \"TXT\", size: \"120 KB\" },\n];\n\nconst initialMessages = [\n {\n id: \"m1\",\n role: \"assistant\",\n text: \"Welcome to Mission Control. Drop in a PDF or doc, ask questions, brainstorm ideas, and turn insights into action.\",\n },\n {\n id: \"m2\",\n role: \"assistant\",\n text: \"Try: “Summarize Q1 Strategy.pdf” or “Give me 5 product launch angles.”\",\n },\n];\n\nconst promptIdeas = [\n \"Summarize this document into 5 key takeaways\",\n \"Find risks, blind spots, and missing assumptions\",\n \"Turn this into an action plan with owners and deadlines\",\n \"Brainstorm 10 bold campaign ideas from this research\",\n \"Compare the uploaded files and extract overlaps\",\n \"Rewrite this into an executive brief\",\n];\n\nconst colorMap = {\n task: {\n label: \"Task\",\n ring: \"ring-red-200/70\",\n chip: \"bg-red-100 text-red-700 border-red-200\",\n column: \"from-red-50 via-white to-red-100/70\",\n icon: \"text-red-500\",\n soft: \"bg-red-500\",\n },\n doing: {\n label: \"Doing\",\n ring: \"ring-blue-200/70\",\n chip: \"bg-blue-100 text-blue-700 border-blue-200\",\n column: \"from-blue-50 via-white to-sky-100/70\",\n icon: \"text-blue-500\",\n soft: \"bg-blue-500\",\n },\n done: {\n label: \"Done\",\n ring: \"ring-green-200/70\",\n chip: \"bg-green-100 text-green-700 border-green-200\",\n column: \"from-green-50 via-white to-emerald-100/70\",\n icon: \"text-green-500\",\n soft: \"bg-green-500\",\n },\n};\n\nfunction MetricCard({ icon: Icon, label, value, hint, className = \"\" }) {\n return (\n \n

{label}

{value}

{hint}

\n \n

\n \n );\n}\n\nfunction TaskCard({ item, lane, onMoveLeft, onMoveRight, onDelete }) {\n const laneStyle = colorMap[lane];\n\n return (\n \n

\n {item.priority}\n

{item.title}

\n onDelete(item.id)}\n className=\"rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700\"\n aria-label=\"Delete task\"\n >\n \n \n

\n\n

\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n {item.owner}\n {item.due}\n

\n\n

\n onMoveLeft?.(item.id)}\n className=\"inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Back\n \n onMoveRight?.(item.id)}\n className=\"inline-flex items-center gap-1 rounded-full bg-slate-900 px-3 py-1.5 text-xs font-medium text-white transition hover:scale-[1.02] disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Next \n \n

\n \n );\n}\n\nfunction generateAssistantReply(input, docs, brainstormMode) {\n const normalized = input.toLowerCase();\n const docNames = docs.map((d) => d.name).join(\", \");\n\n if (normalized.includes(\"summarize\")) {\n return `Here’s a sharp summary direction: focus on goals, evidence, blockers, and action items. I’d convert ${docNames || \"your document\"} into an executive brief, a key insights list, and a next-step checklist.`;\n }\n\n if (normalized.includes(\"brainstorm\") || brainstormMode) {\n return \"Brainstorm mode activated: 1) audience pain points, 2) contrarian angles, 3) launch hooks, 4) low-effort experiments, and 5) one metric that proves success. I can expand any of these into a full strategy.\";\n }\n\n if (normalized.includes(\"compare\")) {\n return `I’d compare the files across themes, repeated ideas, contradictions, and opportunities. Current sources available: ${docNames || \"no files uploaded yet\"}.`;\n }\n\n if (normalized.includes(\"action\") || normalized.includes(\"plan\")) {\n return \"Recommended action plan: define the outcome, break work into 3 milestones, assign owners, set deadlines, and flag risks early. I can turn this into board-ready tasks instantly.\";\n }\n\n return \"I can help with summaries, question answering, brainstorming, and turning research into tasks. Ask me to extract takeaways, find risks, compare files, or create an action plan.\";\n}\n\nexport default function ProductivityMissionApp() {\n const [tasks, setTasks] = useState(defaultTasks);\n const [newTask, setNewTask] = useState(\"\");\n const [taskTag, setTaskTag] = useState(\"Strategy\");\n const [taskPriority, setTaskPriority] = useState(\"High\");\n const [docs, setDocs] = useState(defaultDocs);\n const [messages, setMessages] = useState(initialMessages);\n const [chatInput, setChatInput] = useState(\"\");\n const [isTyping, setIsTyping] = useState(false);\n const [brainstormMode, setBrainstormMode] = useState(true);\n const [search, setSearch] = useState(\"\");\n const [activeTab, setActiveTab] = useState(\"workspace\");\n\n useEffect(() => {\n const saved = localStorage.getItem(\"productivity-2026-mission-state\");\n if (saved) {\n try {\n const parsed = JSON.parse(saved);\n if (parsed.tasks) setTasks(parsed.tasks);\n if (parsed.docs) setDocs(parsed.docs);\n if (parsed.messages) setMessages(parsed.messages);\n } catch {}\n }\n }, []);\n\n useEffect(() => {\n localStorage.setItem(\n \"productivity-2026-mission-state\",\n JSON.stringify({ tasks, docs, messages })\n );\n }, [tasks, docs, messages]);\n\n const filteredTasks = useMemo(() => {\n if (!search.trim()) return tasks;\n const term = search.toLowerCase();\n return {\n task: tasks.task.filter((t) => t.title.toLowerCase().includes(term) || t.tags.join(\" \").toLowerCase().includes(term)),\n doing: tasks.doing.filter((t) => t.title.toLowerCase().includes(term) || t.tags.join(\" \").toLowerCase().includes(term)),\n done: tasks.done.filter((t) => t.title.toLowerCase().includes(term) || t.tags.join(\" \").toLowerCase().includes(term)),\n };\n }, [tasks, search]);\n\n const totalTasks = tasks.task.length + tasks.doing.length + tasks.done.length;\n const completionRate = totalTasks ? Math.round((tasks.done.length / totalTasks) * 100) : 0;\n\n const addTask = () => {\n if (!newTask.trim()) return;\n const item = {\n id: crypto.randomUUID(),\n title: newTask.trim(),\n owner: \"You\",\n priority: taskPriority,\n due: \"This week\",\n tags: [taskTag],\n };\n setTasks((prev) => ({ ...prev, task: [item, ...prev.task] }));\n setNewTask(\"\");\n };\n\n const moveTask = (from, to, id) => {\n let moved;\n setTasks((prev) => {\n const source = [...prev[from]];\n const target = [...prev[to]];\n const index = source.findIndex((item) => item.id === id);\n if (index === -1) return prev;\n moved = source.splice(index, 1)[0];\n target.unshift(moved);\n return { ...prev, [from]: source, [to]: target };\n });\n };\n\n const deleteTask = (lane, id) => {\n setTasks((prev) => ({\n ...prev,\n [lane]: prev[lane].filter((item) => item.id !== id),\n }));\n };\n\n const handleAddFiles = (files) => {\n const incoming = Array.from(files || []).map((file) => ({\n id: crypto.randomUUID(),\n name: file.name,\n type: file.name.split(\".\").pop()?.toUpperCase() || \"FILE\",\n size: `${Math.max(1, Math.round(file.size / 1024))} KB`,\n }));\n if (incoming.length) {\n setDocs((prev) => [...incoming, ...prev]);\n setMessages((prev) => [\n ...prev,\n {\n id: crypto.randomUUID(),\n role: \"assistant\",\n text: `Uploaded ${incoming.length} file${incoming.length > 1 ? \"s\" : \"\"}. Ask me to summarize, compare, brainstorm, or extract action items.`,\n },\n ]);\n }\n };\n\n const sendMessage = (text) => {\n const value = (text ?? chatInput).trim();\n if (!value) return;\n const userMessage = { id: crypto.randomUUID(), role: \"user\", text: value };\n setMessages((prev) => [...prev, userMessage]);\n setChatInput(\"\");\n setIsTyping(true);\n setTimeout(() => {\n setMessages((prev) => [\n ...prev,\n {\n id: crypto.randomUUID(),\n role: \"assistant\",\n text: generateAssistantReply(value, docs, brainstormMode),\n },\n ]);\n setIsTyping(false);\n }, 800);\n };\n\n const Column = ({ lane, left, right }) => {\n const style = colorMap[lane];\n return (\n \n

{style.label}

{filteredTasks[lane].length} items

\n {lane === \"task\" ? \"Queue\" : lane === \"doing\" ? \"In Motion\" : \"Completed\"}\n

\n\n

\n \n {filteredTasks[lane].map((item) => (\n moveTask(lane, left, item.id) : undefined}\n onMoveRight={right ? () => moveTask(lane, right, item.id) : undefined}\n onDelete={() => deleteTask(lane, item.id)}\n />\n ))}\n \n

\n \n );\n };\n\n return (\n

\n \n

\n\n

\n \n Productivity 2026 Mission\n

\n Enterprise productivity, research, and AI brainstorming in one playful workspace.\n

\n A polished mission-control dashboard inspired by your sketch: a colorful work management board on top, and a document-first AI research studio below.\n

\n\n

\n \n \n \n \n

\n\n

\n \n setSearch(e.target.value)}\n placeholder=\"Search tasks, tags, or priorities...\"\n className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400\"\n />\n

\n\n

\n \n setTaskTag(e.target.value)}\n className=\"bg-transparent text-sm outline-none\"\n >\n \n \n \n \n \n \n

\n \n setTaskPriority(e.target.value)}\n className=\"bg-transparent text-sm outline-none\"\n >\n \n \n \n \n

\n \n setNewTask(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addTask()}\n placeholder=\"Add a new task...\"\n className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400\"\n />\n

\n \n Add\n \n

\n\n

Work Management

Red for Task, blue for Doing, green for Done — refined into a clean executive board.

\n \n Click cards to manage flow instantly\n

\n\n

\n \n \n \n

\n\n

\n \n Research + AI Studio\n

Chat with documents, brainstorm with AI, and turn ideas into action.

\n A light purple, pink, and blue workspace designed for reading, questioning, synthesizing, and ideating — without losing momentum.\n

\n\n

\n {[\n { id: \"workspace\", label: \"Workspace\" },\n { id: \"sources\", label: \"Sources\" },\n { id: \"ideas\", label: \"Brainstorm\" },\n ].map((tab) => (\n setActiveTab(tab.id)}\n className={`rounded-full px-4 py-2 text-sm font-semibold transition ${\n activeTab === tab.id\n ? \"bg-slate-900 text-white shadow-lg\"\n : \"bg-white/80 text-slate-700 hover:bg-white\"\n }`}\n >\n {tab.label}\n \n ))}\n

\n\n

\n \n

Drop PDFs, docs, or notes here

Build a smart workspace that can summarize, compare, extract action items, and spark new ideas.

\n \n \n Upload files\n handleAddFiles(e.target.files)}\n />\n \n

\n\n

Source Library

\n {docs.length} files\n

\n\n

\n {docs.map((doc) => (\n \n

\n \n

{doc.name}

{doc.type} · {doc.size}

\n \n \n ))}\n

\n\n

AI Mode

{brainstormMode ? \"Brainstorming\" : \"Focused Analysis\"}

\n setBrainstormMode((v) => !v)}\n className=\"rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-white/20\"\n >\n Toggle\n \n

\n {brainstormMode\n ? \"Great for idea generation, creative angles, and rapid exploration.\"\n : \"Best for summaries, extraction, comparison, and structured reasoning.\"}\n

\n \n\n \n

AI Conversation

Ask questions, request summaries, brainstorm campaigns, or turn insights into tasks.

\n {promptIdeas.slice(0, 3).map((idea) => (\n sendMessage(idea)}\n className=\"rounded-full border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:bg-slate-50\"\n >\n {idea}\n \n ))}\n

\n\n

\n \n {messages.map((message) => (\n \n \n {message.text}\n

\n \n ))}\n \n\n {isTyping && (\n \n \n \n \n \n \n AI is thinking...\n \n )}\n

\n\n

\n \n setChatInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && sendMessage()}\n placeholder=\"Ask a question, compare files, brainstorm ideas, or request a summary...\"\n className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400\"\n />\n

\n sendMessage()}\n className=\"inline-flex items-center justify-center gap-2 rounded-[24px] bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5\"\n >\n \n Ask AI\n \n

\n\n

\n \n

Idea Burst

Tap a creative direction to instantly start exploring.

\n {promptIdeas.map((idea) => (\n sendMessage(idea)}\n className=\"rounded-2xl border border-pink-100 bg-gradient-to-br from-white to-pink-50 px-3 py-3 text-left text-sm font-medium text-slate-700 transition hover:-translate-y-0.5 hover:shadow-md\"\n >\n {idea}\n \n ))}\n

\n \n\n \n

\n \n

Next Best Actions

A focused panel to turn insights into decisions.

\n {[\n \"Convert the best research insight into a high-priority task\",\n \"Create a one-paragraph executive summary for leadership\",\n \"Extract blockers and assign them to the Doing lane\",\n \"Generate 3 growth experiments from uploaded docs\",\n ].map((action) => (\n \n

{action}

\n sendMessage(action)}\n className=\"rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white\"\n >\n Run\n \n

\n ))}\n

\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","490190389352154272","traceTime",1777600219774]