[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_480":481,"_482":483},"routes/_app.x.$handle.$name",{"_130":129,"_35":73,"_138":117,"_30":139,"_13":14,"_140":-5,"_11":141,"_142":143,"_144":145,"_146":147,"_148":149,"_23":-5,"_150":151,"_152":153,"_154":28,"_155":156,"_157":158,"_159":-5,"_160":-5,"_161":162},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_71":72,"_35":73,"_42":74,"_75":-5,"_76":28,"_77":78,"_79":80,"_81":82,"_83":-5,"_18":84,"_85":-5,"_86":28,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":-5,"_100":101,"_102":101,"_103":104,"_105":104,"_106":104,"_107":101,"_108":101,"_109":110,"_111":112,"_113":114,"_115":28},"version",282,"changes",[19,20,21,22],"aiChatInfo","userId",{"_23":63,"_25":64,"_27":28,"_29":28,"_30":65,"_32":65},{"_23":55,"_25":56,"_27":28,"_29":28,"_30":57,"_32":57},{"_23":47,"_25":48,"_27":28,"_29":28,"_30":49,"_32":49},{"_23":24,"_25":26,"_27":28,"_29":28,"_30":31,"_32":31},"file",{"_33":34,"_35":36,"_37":38,"_39":41,"_42":43,"_44":14,"_45":46,"_27":28},"previous",{"_33":34,"_35":36,"_37":38,"_39":40},"deleted",false,"deletedHere","path","screens/MasterPasswordScreen.tsx","latestPath","fileId","019b7b4a-dc1a-76da-b23b-06169c24a377","name","MasterPasswordScreen.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport type { MasterPasswordMode } from \"../types.ts\";\n\ntype Props = {\n mode: MasterPasswordMode;\n onUnlock: (password: string) => void;\n onCreate: (password: string) => void;\n error?: string | null;\n isLoading?: boolean;\n};\n\nexport function MasterPasswordScreen({\n mode,\n onUnlock,\n onCreate,\n error,\n isLoading,\n}: Props) {\n const [password, setPassword] = useState(\"\");\n const [validationError, setValidationError] = useState(\"\");\n\n // Check for WebGPU support\n const hasWebGPU = typeof navigator !== \"undefined\" && !!navigator.gpu;\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n\n if (password.length < 6) {\n setValidationError(\"Minimum 6 characters\");\n return;\n }\n\n setValidationError(\"\");\n if (mode === \"create\") {\n onCreate(password);\n } else {\n onUnlock(password);\n }\n };\n\n const displayError = error || validationError;\n\n return (\n

\n Locals AI\n

\n Learn More\n

\n Truly private processing in your browser\n

\n {!hasWebGPU && (\n

\n WebGPU not supported - need Chrome/Edge\n

\n This app requires WebGPU to run AI models in your browser. Please use Chrome or Edge.\n

\n )}\n

\n\n

\n \n {mode === \"create\"\n ? \"Create a conversation password to continue\"\n : \"Unlock your encrypted conversations\"}\n \n

\n {displayError && (\n

{displayError}

\n )}\n

\n {\n setPassword(e.target.value);\n setValidationError(\"\");\n }}\n placeholder=\"Minimum 6 characters\"\n disabled={isLoading}\n className=\"px-4 py-3 text-white placeholder-[#99978F] bg-transparent focus:outline-none focus:ring-1 focus:ring-transparent\"\n autoFocus\n />\n \n {isLoading\n ? \"Processing...\"\n : mode === \"create\"\n ? \"\"\n : \"Unlock\"}\n \n

\n {mode === \"create\"\n ? \"If you forget this password, your data will be permanently lost. There is no recovery option.\"\n : \"Your password never leaves your device. It's used to decrypt your conversations locally.\"}\n

\n \n Host your own on Val-Town →\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport type { MasterPasswordMode } from \"../types.ts\";\n\ntype Props = {\n mode: MasterPasswordMode;\n onUnlock: (password: string) => void;\n onCreate: (password: string) => void;\n error?: string | null;\n isLoading?: boolean;\n};\n\nexport function MasterPasswordScreen({\n mode,\n onUnlock,\n onCreate,\n error,\n isLoading,\n}: Props) {\n const [password, setPassword] = useState(\"\");\n const [validationError, setValidationError] = useState(\"\");\n const [hasWebGPU, setHasWebGPU] = useState(true); // Assume true initially\n\n // Check for WebGPU support on mount\n React.useEffect(() => {\n const checkWebGPU = async () => {\n if (typeof navigator === \"undefined\" || !navigator.gpu) {\n setHasWebGPU(false);\n return;\n }\n\n try {\n const adapter = await navigator.gpu.requestAdapter();\n setHasWebGPU(adapter !== null);\n } catch (e) {\n setHasWebGPU(false);\n }\n };\n\n checkWebGPU();\n }, []);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n\n if (password.length < 6) {\n setValidationError(\"Minimum 6 characters\");\n return;\n }\n\n setValidationError(\"\");\n if (mode === \"create\") {\n onCreate(password);\n } else {\n onUnlock(password);\n }\n };\n\n const displayError = error || validationError;\n\n return (\n

\n Locals AI\n

\n Learn More\n

\n Truly private processing in your browser\n

\n {!hasWebGPU && (\n

\n WebGPU not supported - need Chrome/Edge\n

\n This app requires WebGPU to run AI models in your browser. Please use Chrome or Edge.\n

\n )}\n

\n\n

\n \n {mode === \"create\"\n ? \"Create a conversation password to continue\"\n : \"Unlock your encrypted conversations\"}\n \n

\n {displayError && (\n

{displayError}

\n )}\n

\n \n Host your own on Val-Town →\n \n

\n );\n}\n","createdAt",["D",1767914342535],"branchVersion","branchId","2fb57f4c-e752-11f0-abdb-42dde27851f2",{"_33":50,"_35":51,"_37":38,"_39":53,"_42":54,"_44":14,"_45":46,"_27":28},{"_33":50,"_35":51,"_37":38,"_39":52},"screens/MainScreen.tsx","019b7b4a-dc1a-76da-b23b-012bee08e65c","MainScreen.tsx","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport type {\n ChatListItem,\n EncryptedPackage,\n Message,\n WebLLMStatus,\n TimerResponse,\n} from \"../types.ts\";\nimport {\n createChat,\n deleteAllChats,\n listChats,\n loadChat,\n renameChat,\n saveChat,\n startTimer,\n} from \"../lib/api.ts\";\nimport { ChatNameModal } from \"../components/ChatNameModal.tsx\";\nimport { OptionsMenu } from \"../components/OptionsMenu.tsx\";\nimport { StatusBadge } from \"../components/StatusBadge.tsx\";\nimport { MessageBubble } from \"../components/MessageBubble.tsx\";\nimport { EmptyState } from \"../components/EmptyState.tsx\";\nimport { ModelSelector } from \"../components/ModelSelector.tsx\";\n\ntype Props = {\n status: WebLLMStatus;\n isReady: boolean;\n onSendMessage: (messages: Message[]) => Promise;\n onEncryptMessages: (messages: Message[]) => Promise;\n onDecryptMessages: (data: EncryptedPackage) => Promise;\n onLock: () => void;\n selectedModel: string;\n onModelChange: (modelId: string) => void;\n};\n\nfunction generateChatId(): string {\n const array = new Uint8Array(8);\n crypto.getRandomValues(array);\n return Array.from(array).map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nexport function MainScreen({\n status,\n isReady,\n onSendMessage,\n onEncryptMessages,\n onDecryptMessages,\n onLock,\n selectedModel,\n onModelChange,\n}: Props) {\n const [chats, setChats] = useState([]);\n const [selectedChat, setSelectedChat] = useState(null);\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [isGenerating, setIsGenerating] = useState(false);\n const [saveStatus, setSaveStatus] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [timerStatus, setTimerStatus] = useState(null);\n const [timeRemaining, setTimeRemaining] = useState (null);\n const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n\n // Modal states\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [modalMode, setModalMode] = useState<\"create\" | \"rename\">(\"create\");\n const [modalLoading, setModalLoading] = useState(false);\n const [modalError, setModalError] = useState(null);\n\n const messagesEndRef = useRef(null);\n\n\n // lil helper function for the demo\n function formatTimeRemaining(ms: number | null): string { \n if (ms === null || ms <= 0) return \"0:00\"; \n\n const totalSeconds = Math.floor(ms / 1000); \n const minutes = Math.floor(totalSeconds / 60); \n const seconds = totalSeconds % 60; \n \n return `${minutes}:${seconds.toString().padStart(2, '0')}`; \n } \n\n\n // Load chats on mount\n useEffect(() => {\n async function initTimer(){ \n try { \n const result = await startTimer(); \n setTimerStatus(result); \n } catch (e) { \n console.error('Failed to get or set timer');\n }\n return;\n }\n\n async function fetchChats() {\n try {\n const list = await listChats();\n setChats(list);\n\n // Auto-select the most recent chat\n if (list.length > 0) {\n await handleSelectChat(list[0]);\n }\n } catch (e) {\n console.error(\"Failed to load chats:\", e);\n setError(\"Failed to load chats\");\n } finally {\n setLoading(false);\n }\n }\n fetchChats();\n initTimer(); \n }, []);\n\n // Demo timer\n useEffect(() => {\n if(!timerStatus) return;\n\n function updateRemaining(){\n const remaining = timerStatus?.expiresAt - Date.now();\n\n if (remaining <= 0) {\n setTimeRemaining(0);\n console.log('Timer expired, logging out...');\n onLock();\n } else {\n setTimeRemaining(remaining);\n }\n }\n updateRemaining(); // update instantly after a change\n\n // update every second\n const intervalId = setInterval(updateRemaining, 1000);\n\n return () => clearInterval(intervalId);\n }, [timerStatus, onLock]);\n\n // Auto-scroll to bottom when messages change\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSelectChat = async (chat: ChatListItem) => {\n setError(null);\n setLoading(true);\n setIsSidebarOpen(false);\n\n try {\n const existingData = await loadChat(chat.id);\n\n if (!existingData) {\n setError(\"Chat not found\");\n setLoading(false);\n return;\n }\n\n const decryptedMessages = await onDecryptMessages(existingData);\n setMessages(decryptedMessages);\n setSelectedChat(chat);\n } catch (e: any) {\n setError(\"Failed to decrypt chat: \" + e.message);\n }\n\n setLoading(false);\n };\n\n const handleNewChat = () => {\n setModalMode(\"create\");\n setModalError(null);\n setIsModalOpen(true);\n };\n\n const handleRenameChat = () => {\n if (!selectedChat) return;\n setModalMode(\"rename\");\n setModalError(null);\n setIsModalOpen(true);\n };\n\n const handleModalSave = async (name: string) => {\n setModalLoading(true);\n setModalError(null);\n\n try {\n if (modalMode === \"create\") {\n const id = generateChatId();\n const encrypted = await onEncryptMessages([]);\n await createChat(id, name, encrypted);\n\n const newChat: ChatListItem = {\n id,\n name,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n };\n\n setChats([newChat, ...chats]);\n setSelectedChat(newChat);\n setMessages([]);\n setIsModalOpen(false);\n } else if (modalMode === \"rename\" && selectedChat) {\n await renameChat(selectedChat.id, name);\n\n const updatedChat = { ...selectedChat, name };\n setSelectedChat(updatedChat);\n setChats(chats.map((c) => c.id === selectedChat.id ? updatedChat : c));\n setIsModalOpen(false);\n }\n } catch (e: any) {\n setModalError(e.message);\n }\n\n setModalLoading(false);\n };\n\n const handleDeleteData = async () => {\n try {\n await deleteAllChats();\n setChats([]);\n setSelectedChat(null);\n setMessages([]);\n } catch (e: any) {\n console.error(\"Failed to delete all chats:\", e);\n alert(\"Failed to delete chats: \" + e.message);\n }\n };\n\n const handleSend = async () => {\n if (!input.trim() || !isReady || isGenerating || !selectedChat) return;\n\n const userMessage: Message = { role: \"user\", content: input.trim() };\n const newMessages = [...messages, userMessage];\n\n setMessages(newMessages);\n setInput(\"\");\n setIsGenerating(true);\n\n try {\n const response = await onSendMessage(newMessages);\n const updatedMessages = [...newMessages, {\n role: \"assistant\" as const,\n content: response,\n }];\n setMessages(updatedMessages);\n await saveConversation(updatedMessages);\n } catch (err: any) {\n console.error(\"Chat error:\", err);\n setMessages([...newMessages, {\n role: \"assistant\",\n content: `Error: ${err.message}`,\n }]);\n }\n\n setIsGenerating(false);\n };\n\n const saveConversation = async (msgs: Message[]) => {\n if (!selectedChat) return;\n\n try {\n setSaveStatus(\"Saving...\");\n const encrypted = await onEncryptMessages(msgs);\n await saveChat(selectedChat.id, encrypted);\n setSaveStatus(\"Saved ✓\");\n setTimeout(() => setSaveStatus(null), 2000);\n\n // Update the chat's updatedAt timestamp in the list\n const updatedChats = chats.map((c) =>\n c.id === selectedChat.id\n ? { ...c, updatedAt: new Date().toISOString() }\n : c\n );\n setChats(\n updatedChats.sort((a, b) =>\n new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()\n ),\n );\n } catch (err: any) {\n console.error(\"Save error:\", err);\n setSaveStatus(\"Save failed\");\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n return (\n

\n {/* Left Panel - Conversation List */}\n

\n Locals AI\n

\n \n \n +\n {\" \"}\n New Chat\n \n

\n\n

\n {loading && chats.length === 0\n ?

\n : chats.length === 0\n ? (\n

\n {/*

No chats yet

*/}\n

\n )\n : (\n

\n Chats\n

\n {chats.map((chat) => (\n handleSelectChat(chat)}\n className={`w-[calc(100%-10px)] text-left px-[10px] py-1 hover:bg-vibe-300 rounded-xl ${\n selectedChat?.id === chat.id\n ? \"text-white\"\n : \"text-vibe-200 \"\n }`}\n >\n

\n {chat.name}\n

\n\n \n ))}\n

\n )}\n

Demo Reset

{formatTimeRemaining(timeRemaining)}

This is a demo of the the Locals-AI Repo. Chat history and data will reset with every countdown.

\n Create your own on Val-Town →\n

\n\n {/* Mobile backdrop */}\n {isSidebarOpen && (\n setIsSidebarOpen(false)}\n />\n )}\n\n {/* Right Panel - Chat View */}\n

\n {selectedChat\n ? (\n <>\n {/* Chat Header */}\n

\n setIsSidebarOpen(true)}\n className=\"lg:hidden p-2 text-white hover:bg-vibe-400 rounded-lg\"\n aria-label=\"Open menu\"\n >\n \n \n \n {selectedChat.name}\n \n

\n {saveStatus && (\n \n {saveStatus}\n \n )}\n \n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 && }\n {messages.map((m, i) => (\n \n ))}\n {isGenerating && (\n

\n Thinking...\n

\n )}\n

\n\n {/* Input */}\n \n \n )\n : (\n

\n setIsSidebarOpen(true)}\n className=\"lg:hidden absolute top-4 left-4 p-2 text-white hover:bg-vibe-400 rounded-lg\"\n aria-label=\"Open menu\"\n >\n \n \n \n \n +\n {\" \"}\n New Chat\n \n

\n )}\n

\n\n {/* Chat Name Modal */}\n setIsModalOpen(false)}\n isLoading={modalLoading}\n error={modalError}\n />\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport type {\n ChatListItem,\n EncryptedPackage,\n Message,\n WebLLMStatus,\n TimerResponse,\n} from \"../types.ts\";\nimport {\n createChat,\n deleteAllChats,\n listChats,\n loadChat,\n renameChat,\n saveChat,\n startTimer,\n} from \"../lib/api.ts\";\nimport { ChatNameModal } from \"../components/ChatNameModal.tsx\";\nimport { OptionsMenu } from \"../components/OptionsMenu.tsx\";\nimport { StatusBadge } from \"../components/StatusBadge.tsx\";\nimport { MessageBubble } from \"../components/MessageBubble.tsx\";\nimport { EmptyState } from \"../components/EmptyState.tsx\";\nimport { ModelSelector } from \"../components/ModelSelector.tsx\";\n\ntype Props = {\n status: WebLLMStatus;\n isReady: boolean;\n onSendMessage: (messages: Message[]) => Promise;\n onEncryptMessages: (messages: Message[]) => Promise;\n onDecryptMessages: (data: EncryptedPackage) => Promise;\n onLock: () => void;\n selectedModel: string;\n onModelChange: (modelId: string) => void;\n};\n\nfunction generateChatId(): string {\n const array = new Uint8Array(8);\n crypto.getRandomValues(array);\n return Array.from(array).map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nexport function MainScreen({\n status,\n isReady,\n onSendMessage,\n onEncryptMessages,\n onDecryptMessages,\n onLock,\n selectedModel,\n onModelChange,\n}: Props) {\n const [chats, setChats] = useState([]);\n const [selectedChat, setSelectedChat] = useState(null);\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [isGenerating, setIsGenerating] = useState(false);\n const [saveStatus, setSaveStatus] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [timerStatus, setTimerStatus] = useState(null);\n const [timeRemaining, setTimeRemaining] = useState (null);\n const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n\n // Modal states\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [modalMode, setModalMode] = useState<\"create\" | \"rename\">(\"create\");\n const [modalLoading, setModalLoading] = useState(false);\n const [modalError, setModalError] = useState(null);\n\n const messagesEndRef = useRef(null);\n\n\n // lil helper function for the demo\n function formatTimeRemaining(ms: number | null): string { \n if (ms === null || ms <= 0) return \"0:00\"; \n\n const totalSeconds = Math.floor(ms / 1000); \n const minutes = Math.floor(totalSeconds / 60); \n const seconds = totalSeconds % 60; \n \n return `${minutes}:${seconds.toString().padStart(2, '0')}`; \n } \n\n\n // Load chats on mount\n useEffect(() => {\n async function initTimer(){ \n try { \n const result = await startTimer(); \n setTimerStatus(result); \n } catch (e) { \n console.error('Failed to get or set timer');\n }\n return;\n }\n\n async function fetchChats() {\n try {\n const list = await listChats();\n setChats(list);\n\n // Auto-select the most recent chat\n if (list.length > 0) {\n await handleSelectChat(list[0]);\n }\n } catch (e) {\n console.error(\"Failed to load chats:\", e);\n setError(\"Failed to load chats\");\n } finally {\n setLoading(false);\n }\n }\n fetchChats();\n initTimer(); \n }, []);\n\n // Demo timer\n useEffect(() => {\n if(!timerStatus) return;\n\n function updateRemaining(){\n const remaining = timerStatus?.expiresAt - Date.now();\n\n if (remaining <= 0) {\n setTimeRemaining(0);\n console.log('Timer expired, logging out...');\n onLock();\n } else {\n setTimeRemaining(remaining);\n }\n }\n updateRemaining(); // update instantly after a change\n\n // update every second\n const intervalId = setInterval(updateRemaining, 1000);\n\n return () => clearInterval(intervalId);\n }, [timerStatus, onLock]);\n\n // Auto-scroll to bottom when messages change\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSelectChat = async (chat: ChatListItem) => {\n setError(null);\n setLoading(true);\n setIsSidebarOpen(false);\n\n try {\n const existingData = await loadChat(chat.id);\n\n if (!existingData) {\n setError(\"Chat not found\");\n setLoading(false);\n return;\n }\n\n const decryptedMessages = await onDecryptMessages(existingData);\n setMessages(decryptedMessages);\n setSelectedChat(chat);\n } catch (e: any) {\n setError(\"Failed to decrypt chat: \" + e.message);\n }\n\n setLoading(false);\n };\n\n const handleNewChat = () => {\n setModalMode(\"create\");\n setModalError(null);\n setIsModalOpen(true);\n };\n\n const handleRenameChat = () => {\n if (!selectedChat) return;\n setModalMode(\"rename\");\n setModalError(null);\n setIsModalOpen(true);\n };\n\n const handleModalSave = async (name: string) => {\n setModalLoading(true);\n setModalError(null);\n\n try {\n if (modalMode === \"create\") {\n const id = generateChatId();\n const encrypted = await onEncryptMessages([]);\n await createChat(id, name, encrypted);\n\n const newChat: ChatListItem = {\n id,\n name,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n };\n\n setChats([newChat, ...chats]);\n setSelectedChat(newChat);\n setMessages([]);\n setIsModalOpen(false);\n } else if (modalMode === \"rename\" && selectedChat) {\n await renameChat(selectedChat.id, name);\n\n const updatedChat = { ...selectedChat, name };\n setSelectedChat(updatedChat);\n setChats(chats.map((c) => c.id === selectedChat.id ? updatedChat : c));\n setIsModalOpen(false);\n }\n } catch (e: any) {\n setModalError(e.message);\n }\n\n setModalLoading(false);\n };\n\n const handleDeleteData = async () => {\n try {\n await deleteAllChats();\n setChats([]);\n setSelectedChat(null);\n setMessages([]);\n } catch (e: any) {\n console.error(\"Failed to delete all chats:\", e);\n alert(\"Failed to delete chats: \" + e.message);\n }\n };\n\n const handleSend = async () => {\n if (!input.trim() || !isReady || isGenerating || !selectedChat) return;\n\n const userMessage: Message = { role: \"user\", content: input.trim() };\n const newMessages = [...messages, userMessage];\n\n setMessages(newMessages);\n setInput(\"\");\n setIsGenerating(true);\n\n try {\n const response = await onSendMessage(newMessages);\n const updatedMessages = [...newMessages, {\n role: \"assistant\" as const,\n content: response,\n }];\n setMessages(updatedMessages);\n await saveConversation(updatedMessages);\n } catch (err: any) {\n console.error(\"Chat error:\", err);\n setMessages([...newMessages, {\n role: \"assistant\",\n content: `Error: ${err.message}`,\n }]);\n }\n\n setIsGenerating(false);\n };\n\n const saveConversation = async (msgs: Message[]) => {\n if (!selectedChat) return;\n\n try {\n setSaveStatus(\"Saving...\");\n const encrypted = await onEncryptMessages(msgs);\n await saveChat(selectedChat.id, encrypted);\n setSaveStatus(\"Saved ✓\");\n setTimeout(() => setSaveStatus(null), 2000);\n\n // Update the chat's updatedAt timestamp in the list\n const updatedChats = chats.map((c) =>\n c.id === selectedChat.id\n ? { ...c, updatedAt: new Date().toISOString() }\n : c\n );\n setChats(\n updatedChats.sort((a, b) =>\n new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()\n ),\n );\n } catch (err: any) {\n console.error(\"Save error:\", err);\n setSaveStatus(\"Save failed\");\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n };\n\n return (\n

\n {/* Left Panel - Conversation List */}\n

\n Locals AI\n

\n \n \n +\n {\" \"}\n New Chat\n \n

\n\n

\n {loading && chats.length === 0\n ?

\n : chats.length === 0\n ? (\n

\n {/*

No chats yet

*/}\n

\n )\n : (\n

\n Chats\n

\n {chat.name}\n

\n\n \n ))}\n

\n )}\n

Demo Reset

{formatTimeRemaining(timeRemaining)}

This is a demo of the the Locals-AI Repo. Chat history and data will reset with every countdown.

\n Create your own on Val-Town →\n

\n\n {/* Mobile backdrop */}\n {isSidebarOpen && (\n setIsSidebarOpen(false)}\n />\n )}\n\n {/* Right Panel - Chat View */}\n

\n {selectedChat\n ? (\n <>\n {/* Chat Header */}\n

\n setIsSidebarOpen(true)}\n className=\"lg:hidden p-2 text-white hover:bg-vibe-400 rounded-lg\"\n aria-label=\"Open menu\"\n >\n \n \n \n {selectedChat.name}\n \n

\n {saveStatus && (\n \n {saveStatus}\n \n )}\n \n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 && }\n {messages.map((m, i) => (\n \n ))}\n {isGenerating && (\n

\n Thinking...\n

\n )}\n

\n\n {/* Input */}\n \n \n )\n : (\n

\n setIsSidebarOpen(true)}\n className=\"lg:hidden absolute top-4 left-4 p-2 text-white hover:bg-vibe-400 rounded-lg\"\n aria-label=\"Open menu\"\n >\n \n \n \n \n +\n {\" \"}\n New Chat\n \n

\n )}\n

\n\n {/* Chat Name Modal */}\n setIsModalOpen(false)}\n isLoading={modalLoading}\n error={modalError}\n />\n

\n );\n}\n",["D",1767914342535],{"_33":58,"_35":59,"_37":38,"_39":61,"_42":62,"_44":14,"_45":46,"_27":28},{"_33":58,"_35":59,"_37":38,"_39":60},"hooks/useWebLLM.ts","019b7b4a-dc1a-76da-b23a-e9a3af6de74a","useWebLLM.ts","/** @jsxImportSource https://esm.sh/react */\nimport { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react\";\nimport type { Message, WebLLMStatus } from \"../types.ts\";\nimport { getModelInfo } from \"../lib/models.ts\";\nimport { isModelCached, clearModelCache } from \"../lib/cacheManager.ts\";\n\nconst SYSTEM_PROMPT = `You are a helpful, friendly AI assistant. You are running entirely in the user's browser for privacy. Keep responses concise but helpful. You can see the full conversation history and should reference previous messages when relevant.`;\n\nexport function useWebLLM(selectedModel: string) {\n const [status, setStatus] = useState({\n state: \"idle\",\n message: \"Initializing...\"\n });\n const engineRef = useRef(null);\n\n useEffect(() => {\n let cancelled = false;\n let engineBeingLoaded: any = null;\n\n async function loadModel() {\n const modelInfo = getModelInfo(selectedModel);\n const modelName = modelInfo ? modelInfo.name : selectedModel;\n\n console.log(\"[useWebLLM] Starting with model:\", selectedModel);\n\n if (!navigator.gpu) {\n setStatus({ state: \"error\", message: \"WebGPU not supported - need Chrome/Edge\" });\n return;\n }\n\n try {\n // Check if model is already cached\n const isCached = await isModelCached(selectedModel);\n console.log(`[useWebLLM] Model ${modelName} is ${isCached ? 'cached' : 'not cached'}`);\n\n // Dispose of previous engine if it exists\n if (engineRef.current) {\n console.log(\"[useWebLLM] Disposing previous engine...\");\n try {\n await engineRef.current.unload();\n } catch (e) {\n console.warn(\"[useWebLLM] Error unloading previous engine:\", e);\n }\n engineRef.current = null;\n }\n\n setStatus({ state: \"loading\", message: \"Loading WebLLM library...\", progress: 0 });\n\n const webllm = await import(\"https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.78/+esm\");\n\n if (cancelled) return;\n\n // Set initial message based on cache state\n const initialMessage = isCached\n ? `Loading ${modelName} from cache...`\n : `Downloading ${modelName}...`;\n\n setStatus({\n state: \"loading\",\n message: initialMessage,\n progress: 0,\n isFromCache: isCached\n });\n\n engineBeingLoaded = await webllm.CreateMLCEngine(selectedModel, {\n initProgressCallback: (progress: any) => {\n if (cancelled) return;\n const pct = Math.round(progress.progress * 100);\n console.log(`[useWebLLM] Progress: ${pct}%`);\n\n // Use WebLLM's progress text if available, otherwise show custom message\n const defaultMessage = isCached\n ? `Loading ${modelName} from cache...`\n : `Downloading ${modelName}...`;\n\n setStatus({\n state: \"loading\",\n message: progress.text || defaultMessage,\n progress: pct,\n isFromCache: isCached\n });\n }\n });\n\n if (cancelled) {\n // Clean up if cancelled during load\n await engineBeingLoaded.unload?.();\n return;\n }\n\n console.log(\"[useWebLLM] Ready with\", modelName);\n engineRef.current = engineBeingLoaded;\n engineBeingLoaded = null;\n setStatus({ state: \"ready\", message: `${modelName} Ready`, progress: 100 });\n } catch (err: any) {\n console.error(\"[useWebLLM] Error:\", err);\n\n setStatus({\n state: \"error\",\n message: \"Failed to load model. Clearing cache, please try again.\"\n });\n\n // Always clear cache on any error - ensures clean state for next attempt\n try {\n await clearModelCache(selectedModel);\n console.log(\"[useWebLLM] Cleared cache for\", selectedModel);\n } catch (cacheErr) {\n console.warn(\"[useWebLLM] Could not clear cache:\", cacheErr);\n }\n }\n }\n\n loadModel();\n\n return () => {\n cancelled = true;\n\n // Try to unload any engine that was being loaded but not completed\n if (engineBeingLoaded && !engineRef.current) {\n console.log(\"[useWebLLM] Cancelling incomplete model load\");\n engineBeingLoaded.unload?.().catch((e: any) => {\n console.warn(\"[useWebLLM] Error during cancelled load cleanup:\", e);\n });\n }\n };\n }, [selectedModel]);\n\n const sendMessage = useCallback(async (messages: Message[]): Promise => {\n console.log(\"[useWebLLM] Sending messages:\", messages);\n \n if (!engineRef.current) {\n throw new Error(\"Engine not ready\");\n }\n\n // Build messages array with system prompt\n const chatMessages = [\n { role: \"system\", content: SYSTEM_PROMPT },\n ...messages.map(m => ({ role: m.role, content: m.content }))\n ];\n\n console.log(\"[useWebLLM] Full chat context:\", chatMessages);\n\n const response = await engineRef.current.chat.completions.create({\n messages: chatMessages,\n temperature: 0.7,\n max_tokens: 512\n });\n\n console.log(\"[useWebLLM] Response:\", response);\n\n return response.choices[0].message.content;\n }, []);\n\n return { status, isReady: status.state === \"ready\", sendMessage };\n}","/** @jsxImportSource https://esm.sh/react */\nimport { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react\";\nimport type { Message, WebLLMStatus } from \"../types.ts\";\nimport { getModelInfo } from \"../lib/models.ts\";\nimport { isModelCached, clearModelCache } from \"../lib/cacheManager.ts\";\n\nconst SYSTEM_PROMPT = `You are a helpful, friendly AI assistant. You are running entirely in the user's browser for privacy. Keep responses concise but helpful. You can see the full conversation history and should reference previous messages when relevant.`;\n\nexport function useWebLLM(selectedModel: string) {\n const [status, setStatus] = useState({\n state: \"idle\",\n message: \"Initializing...\"\n });\n const engineRef = useRef(null);\n\n useEffect(() => {\n let cancelled = false;\n let engineBeingLoaded: any = null;\n\n async function loadModel() {\n const modelInfo = getModelInfo(selectedModel);\n const modelName = modelInfo ? modelInfo.name : selectedModel;\n\n console.log(\"[useWebLLM] Starting with model:\", selectedModel);\n\n // Check for WebGPU support\n if (!navigator.gpu) {\n setStatus({ state: \"error\", message: \"WebGPU not supported - need Chrome/Edge\" });\n return;\n }\n\n try {\n const adapter = await navigator.gpu.requestAdapter();\n if (!adapter) {\n setStatus({ state: \"error\", message: \"WebGPU not supported - need Chrome/Edge\" });\n return;\n }\n } catch (e) {\n setStatus({ state: \"error\", message: \"WebGPU not supported - need Chrome/Edge\" });\n return;\n }\n\n try {\n // Check if model is already cached\n const isCached = await isModelCached(selectedModel);\n console.log(`[useWebLLM] Model ${modelName} is ${isCached ? 'cached' : 'not cached'}`);\n\n // Dispose of previous engine if it exists\n if (engineRef.current) {\n console.log(\"[useWebLLM] Disposing previous engine...\");\n try {\n await engineRef.current.unload();\n } catch (e) {\n console.warn(\"[useWebLLM] Error unloading previous engine:\", e);\n }\n engineRef.current = null;\n }\n\n setStatus({ state: \"loading\", message: \"Loading WebLLM library...\", progress: 0 });\n\n const webllm = await import(\"https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.78/+esm\");\n\n if (cancelled) return;\n\n // Set initial message based on cache state\n const initialMessage = isCached\n ? `Loading ${modelName} from cache...`\n : `Downloading ${modelName}...`;\n\n setStatus({\n state: \"loading\",\n message: initialMessage,\n progress: 0,\n isFromCache: isCached\n });\n\n engineBeingLoaded = await webllm.CreateMLCEngine(selectedModel, {\n initProgressCallback: (progress: any) => {\n if (cancelled) return;\n const pct = Math.round(progress.progress * 100);\n console.log(`[useWebLLM] Progress: ${pct}%`);\n\n // Use WebLLM's progress text if available, otherwise show custom message\n const defaultMessage = isCached\n ? `Loading ${modelName} from cache...`\n : `Downloading ${modelName}...`;\n\n setStatus({\n state: \"loading\",\n message: progress.text || defaultMessage,\n progress: pct,\n isFromCache: isCached\n });\n }\n });\n\n if (cancelled) {\n // Clean up if cancelled during load\n await engineBeingLoaded.unload?.();\n return;\n }\n\n console.log(\"[useWebLLM] Ready with\", modelName);\n engineRef.current = engineBeingLoaded;\n engineBeingLoaded = null;\n setStatus({ state: \"ready\", message: `${modelName} Ready`, progress: 100 });\n } catch (err: any) {\n console.error(\"[useWebLLM] Error:\", err);\n\n setStatus({\n state: \"error\",\n message: \"Failed to load model. Clearing cache, please try again.\"\n });\n\n // Always clear cache on any error - ensures clean state for next attempt\n try {\n await clearModelCache(selectedModel);\n console.log(\"[useWebLLM] Cleared cache for\", selectedModel);\n } catch (cacheErr) {\n console.warn(\"[useWebLLM] Could not clear cache:\", cacheErr);\n }\n }\n }\n\n loadModel();\n\n return () => {\n cancelled = true;\n\n // Try to unload any engine that was being loaded but not completed\n if (engineBeingLoaded && !engineRef.current) {\n console.log(\"[useWebLLM] Cancelling incomplete model load\");\n engineBeingLoaded.unload?.().catch((e: any) => {\n console.warn(\"[useWebLLM] Error during cancelled load cleanup:\", e);\n });\n }\n };\n }, [selectedModel]);\n\n const sendMessage = useCallback(async (messages: Message[]): Promise => {\n console.log(\"[useWebLLM] Sending messages:\", messages);\n \n if (!engineRef.current) {\n throw new Error(\"Engine not ready\");\n }\n\n // Build messages array with system prompt\n const chatMessages = [\n { role: \"system\", content: SYSTEM_PROMPT },\n ...messages.map(m => ({ role: m.role, content: m.content }))\n ];\n\n console.log(\"[useWebLLM] Full chat context:\", chatMessages);\n\n const response = await engineRef.current.chat.completions.create({\n messages: chatMessages,\n temperature: 0.7,\n max_tokens: 512\n });\n\n console.log(\"[useWebLLM] Response:\", response);\n\n return response.choices[0].message.content;\n }, []);\n\n return { status, isReady: status.state === \"ready\", sendMessage };\n}",["D",1767914342535],{"_33":66,"_35":67,"_37":38,"_39":69,"_42":70,"_44":14,"_45":46,"_27":28},{"_33":66,"_35":67,"_37":38,"_39":68},"components/OptionsMenu.tsx","019b7b4a-dc1a-76da-b23a-dbc61a42230b","OptionsMenu.tsx","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\n\ntype Props = {\n onLock: () => void;\n onDeleteData: () => void;\n};\n\nexport function OptionsMenu({ onLock, onDeleteData }: Props) {\n const [isOpen, setIsOpen] = useState(false);\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n const menuRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n setShowDeleteConfirm(false);\n }\n }\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n }, [isOpen]);\n\n const handleDeleteClick = () => {\n if (!showDeleteConfirm) {\n setShowDeleteConfirm(true);\n } else {\n onDeleteData();\n setIsOpen(false);\n setShowDeleteConfirm(false);\n }\n };\n\n const handleLockClick = () => {\n onLock();\n setIsOpen(false);\n };\n\n return (\n

\n setIsOpen(!isOpen)}\n className=\"w-10 h-10 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition-colors flex items-center justify-center shadow-lg\"\n title=\"Options\"\n >\n •••\n \n\n {isOpen && (\n

\n \n 🔒 Lock\n \n \n {showDeleteConfirm ? \"⚠️ Click to confirm\" : \"🗑️ Delete Data\"}\n \n

\n )}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\n\ntype Props = {\n onLock: () => void;\n onDeleteData: () => void;\n};\n\nexport function OptionsMenu({ onLock, onDeleteData }: Props) {\n const [isOpen, setIsOpen] = useState(false);\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n const menuRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n setShowDeleteConfirm(false);\n }\n }\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n }, [isOpen]);\n\n const handleDeleteClick = () => {\n if (!showDeleteConfirm) {\n setShowDeleteConfirm(true);\n } else {\n onDeleteData();\n setIsOpen(false);\n setShowDeleteConfirm(false);\n }\n };\n\n const handleLockClick = () => {\n onLock();\n setIsOpen(false);\n };\n\n return (\n

\n setIsOpen(!isOpen)}\n className=\"w-8 h-8 rounded-full bg-vibe-300 text-vibe-100 border border-vibe-300 hover:bg-vibe-250 hover:border-vibe-100 transition-colors flex items-center justify-center shadow-lg\"\n title=\"Options\"\n >\n •••\n \n\n {isOpen && (\n

\n \n Lock\n \n \n {showDeleteConfirm ? \"⚠️ Click to confirm\" : \"Delete Data\"}\n \n

\n )}\n

\n );\n}\n",["D",1767914342535],"id","2fb3bedc-e752-11f0-abdb-42dde27851f2","Demo-Locals-AI",["D",1767300062204],"deletedAt","legacyEnvVars","privacy","unlisted","httpPrivacy","public","description","A local, truly private, AI experiment in your browser","imageUrl","d9e531c4-c80e-4b2e-8e7a-81096deef219","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","108f00d1-525f-45b2-9b69-bb13738fd607","tursoName","2fb3bedce75211f0abdb42dde27851f2","tursoHostname","2fb3bedce75211f0abdb42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789448471428],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_130":129,"_137":133},"org",{"_130":129,"_131":-5,"_132":133,"_18":84,"_134":135,"_136":28},"branch",{"_13":116,"_35":117,"_71":46,"_118":72,"_119":120,"_121":122,"_123":80,"_124":125,"_126":92,"_127":73,"_128":129},"isOwned",284,"main","projectId","forkedBranchId","09b2a8d4-d7ac-11f0-842b-42dde27851f2","forkedBranchVersion",867,"forkedProjectPrivacy","forkedProjectId","09b24bb4-d7ac-11f0-842b-42dde27851f2","forkedProjectOrgId","projectName","userHandle","Prada","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybHI3S3lKQWFsVkJpMFlOMk9oTFNoSWQ5TnkifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_71":72,"_35":73,"_42":475,"_75":-5,"_76":28,"_77":78,"_79":80,"_81":82,"_83":-5,"_18":84,"_85":-5,"_86":28,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":94,"_95":96,"_97":476,"_99":-5,"_100":101,"_102":101,"_103":104,"_105":104,"_106":104,"_107":101,"_108":101,"_109":477,"_111":478,"_113":479,"_115":28},"tree",[283,286,293,295,298,303,306,307,308,309,310,311,312,313],"files",[283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313],"counts",{"_273":90,"_274":192,"_275":90,"_276":277,"_278":279},"contents",[171,172,173,174,175,176,177,178,179,180,181,182,183,184],"upstreamProject",{"_71":125,"_35":169,"_81":82,"_83":-5,"_77":80,"_109":170},"upstreamBranch",{"_71":120,"_42":163,"_164":165,"_35":117,"_118":125,"_13":166,"_119":-5,"_121":-5,"_167":168,"_75":-5,"_115":28,"_77":80,"_128":129,"_91":92,"_127":169},"emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},["D",1765579434547],"updatedAt",["D",1771628365083],1326,"lockfileKey","1771629687809-esm.town_v_Prada_Locals-AI@1326-main","Locals-AI",{"_130":129,"_137":133},{"_71":268,"_35":269,"_33":270,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":271,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":272},{"_71":263,"_35":264,"_33":265,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":266,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":267},{"_71":257,"_35":258,"_33":259,"_188":-5,"_45":46,"_44":260,"_190":158,"_42":261,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":262},{"_71":252,"_35":253,"_33":254,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":255,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":256},{"_71":247,"_35":248,"_33":249,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":250,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":251},{"_71":241,"_35":242,"_33":243,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":244,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_30":246},{"_71":235,"_35":236,"_33":237,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":238,"_13":90,"_37":23,"_39":239,"_27":28,"_194":-5,"_30":240},{"_71":229,"_35":230,"_33":231,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":232,"_13":90,"_37":23,"_39":233,"_27":28,"_194":-5,"_30":234},{"_71":223,"_35":224,"_33":225,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":226,"_13":90,"_37":38,"_39":227,"_27":28,"_194":-5,"_30":228},{"_71":216,"_35":217,"_33":218,"_188":-5,"_45":46,"_44":219,"_190":158,"_42":220,"_13":199,"_37":23,"_39":221,"_27":28,"_194":-5,"_30":222},{"_71":210,"_35":211,"_33":212,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":213,"_13":90,"_37":23,"_39":214,"_27":28,"_194":-5,"_30":215},{"_71":203,"_35":204,"_33":205,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":206,"_13":90,"_37":207,"_39":208,"_27":28,"_194":-5,"_30":209},{"_71":196,"_35":197,"_33":198,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":200,"_13":90,"_37":38,"_39":201,"_27":28,"_194":-5,"_30":202},{"_71":185,"_35":186,"_33":187,"_188":-5,"_45":46,"_44":189,"_190":158,"_42":191,"_13":192,"_37":38,"_39":193,"_27":28,"_194":-5,"_30":195},"02e105d0-ea82-11f0-8089-42dde27851f2","types.ts","019b7b4a-dc1a-76da-b23b-2ad99c17a6e2","parentId",281,"latest",["D",1767650456308],2,"export type Message = {\n role: \"user\" | \"assistant\";\n content: string;\n};\n\nexport type Screen = \"masterpassword\" | \"main\";\n\nexport type MasterPasswordMode = \"create\" | \"verify\";\n\nexport type MasterPasswordToken = {\n version: number;\n verificationData: EncryptedPackage;\n createdAt: string;\n};\n\nexport type WebLLMStatus = {\n state: \"idle\" | \"loading\" | \"ready\" | \"error\";\n message: string;\n progress?: number;\n isFromCache?: boolean;\n};\n\nexport type EncryptedPackage = {\n salt: number[];\n iv: number[];\n ciphertext: number[];\n};\n\nexport type ChatListItem = {\n id: string;\n name: string;\n createdAt: string;\n updatedAt: string;\n};\n\nexport type TimerResponse = {\n status: \"timer_started\" | \"timer_already_active\";\n expiresAt: number;\n remainingMs?: number;\n};","label",[186],"2fba1174-e752-11f0-abdb-42dde27851f2","tailwind.config.js","019b7b4a-dc1a-76da-b23b-26c1d43b4e47",1,["D",1767300062204],"/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./**/*.{ts,tsx,js,jsx}\",\n \"./screens/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: [\n \"Inter\",\n \"-apple-system\",\n \"BlinkMacSystemFont\",\n \"Segoe UI\",\n \"Roboto\",\n \"Helvetica Neue\",\n \"Arial\",\n \"sans-serif\",\n ],\n logo: [\"Baskervville\", \"Georgia\", \"serif\"],\n reading: [\"Lora\", \"Georgia\", \"Times New Roman\", \"serif\"],\n },\n colors: {\n primary: {\n 100: \"#79C5FC\",\n 200: \"#42B0FF\",\n 300: \"#3E95CF\",\n 400: \"#1D618F\",\n },\n vibe: {\n 100: \"#CCCCCC\",\n 200: \"#999999\",\n 250: \"#5D5C56\",\n 300: \"#30302E\",\n 400: \"#262624\",\n 500: \"#202124\",\n 600: \"#18191B\",\n 700: \"#141413\",\n },\n },\n },\n },\n plugins: [],\n};\n",[197],"2fba018e-e752-11f0-abdb-42dde27851f2","main.ts","019b7b4a-dc1a-76da-b23b-20b53c1895e4",["D",1767300062204],"http","/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { App } from \"./App.tsx\";\n\nif (typeof document !== \"undefined\") {\n console.log(\"[main] Hydrating...\");\n createRoot(document.getElementById(\"root\")).render();\n}\n\nexport default async function(req: Request): Promise {\n // Get or auto-generate API key (same logic as storage API)\n let storageApiKey = Deno.env.get(\"STORAGE_API_KEY\");\n if (!storageApiKey) {\n storageApiKey = crypto.randomUUID();\n console.warn(\"⚠️ STORAGE_API_KEY not set in main.ts! Auto-generated key:\", storageApiKey);\n console.warn(\"⚠️ Save this key to your STORAGE_API_KEY environment variable!\");\n }\n\n const html = `\n\n\n \n \n Private AI Chat\n \n \n \n \n \n \n \n\n\n

\n \n\n`;\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",[204],"2fb9fc84-e752-11f0-abdb-42dde27851f2","deno.json","019b7b4a-dc1a-76da-b23b-1cc5a24a80d7",["D",1767300062204],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[211],"ae2a4bce-ea76-11f0-a57a-42dde27851f2","README.md","019b7b4a-dc1a-76da-b23b-19e241311bee",280,["D",1767645589589],"# Locals AI 🤖\n\nA private, encrypted AI chat application running entirely on Val Town. Your conversations are encrypted client-side before being stored, and your password never leaves your device.\n\n## Features\n\n- 🔒 **Client-side encryption** - All chats encrypted with AES-256-GCM before storage\n- 🔑 **Master password protection** - Single password protects all your conversations\n- 💾 **Self-hosted on Val Town** - Your data stays in your own Val Town SQLite database\n- 🚫 **No tracking** - No analytics, no third parties\n- 🧠 **Local AI** - Uses WebLLM to run AI models directly in your browser\n- 🎛️ **Multiple AI models** - Choose between light, medium, and large models\n- 🍴 **Fork-friendly** - Easy to remix and run your own instance\n\n## How It Works\n\n1. **Set a master password** on first use to protect all your chats\n2. **Create unlimited chats** with custom names\n3. **Your messages are encrypted** in the browser using your master password\n4. **Encrypted data is stored** in your Val Town SQLite database\n5. **Only you can decrypt** your chats with the correct password\n\nYour password is never sent to the server. Encryption happens entirely in your browser.\n\n## Quick Start: Remix This Val\n\n### Step 1: Fork the Val\n\n1. Click the \"Remix\" button on Val Town (or fork this repository)\n2. This creates your own private copy of the app\n\n### Step 2: Set Up Security\n\nWhen you first run your forked val, check the **console logs**. You'll see a message like:\n\n```\n⚠️ STORAGE_API_KEY not set! Auto-generated key: a1b2c3d4-e5f6-7890-abcd-ef1234567890\n⚠️ Save this key to your STORAGE_API_KEY environment variable!\n```\n\n**Important:** Save this API key! It protects your storage endpoint.\n\n#### To set the environment variable:\n\n1. Go to your Val Town settings\n2. Navigate to **Environment Variables**\n3. Add a new variable:\n - **Name:** `STORAGE_API_KEY`\n - **Value:** (paste the key from console logs)\n4. Save and restart your val\n\n### Step 3: Update the Storage URL\n\nIn `lib/api.ts`, update line 3 with your storage val URL:\n\n```typescript\nconst STORAGE_URL = \"https://your-username--your-storage-val-id.web.val.run\";\n```\n\nYou can find this URL from your forked storage val.\n\n### Step 4: Use Your App\n\nVisit your main val's URL:\n1. Set a strong master password on first visit\n2. Create your first chat with the \"+ New Chat\" button\n3. Select your preferred AI model from the dropdown\n4. Start chatting - all messages are automatically encrypted and saved!\n\n## Security Features\n\n### What's Protected\n\n✅ **SQL Injection Prevention** - All database queries use parameterized statements\n✅ **API Authentication** - Storage endpoint requires API key\n✅ **Client-side Encryption** - AES-256-GCM with PBKDF2 key derivation\n✅ **Master Password Protection** - Single password encrypts all conversations\n✅ **Session Management** - Password stored only in sessionStorage, cleared on lock\n\n### Encryption Details\n\n- **Algorithm:** AES-GCM (256-bit)\n- **Key Derivation:** PBKDF2 with 100,000 iterations\n- **Random Salt & IV:** Generated for each encryption\n- **Password:** Never leaves your device\n\n### What's Stored in the Database\n\nYour Val Town SQLite database stores:\n- Chat ID (random UUID)\n- Chat name (plain text)\n- Encrypted chat data (ciphertext + salt + IV)\n- Timestamps\n\n**Without your password, the encrypted data is unreadable.**\n\n## Environment Variables\n\n| Variable | Required | Description |\n|----------|----------|-------------|\n| `STORAGE_API_KEY` | **Yes** | Protects your storage API from unauthorized access |\n| `FRONTEND_URL` | No | Optional CORS restriction (e.g., `https://yourapp.val.run`) |\n\n## Architecture\n\n```\n┌─────────────────┐\n│ Browser │\n│ (React App) │\n│ │\n│ • WebLLM AI │\n│ • Encryption │\n│ • UI │\n└────────┬────────┘\n │\n │ HTTPS + API Key\n │\n┌────────▼────────┐\n│ Val Town │\n│ Storage API │\n│ │\n│ • SQLite DB │\n│ • Auth Check │\n└─────────────────┘\n```\n\n## File Structure\n\n```\n├── main.ts # Entry point, serves HTML\n├── App.tsx # Main app with master password flow\n├── api/\n│ └── storage.ts # Storage API with authentication\n├── lib/\n│ ├── api.ts # Client-side API calls\n│ ├── crypto.ts # Encryption/decryption logic\n│ └── models.ts # AI model definitions\n├── hooks/\n│ ├── useEncryption.ts # Encryption state management\n│ └── useWebLLM.ts # AI model integration\n├── screens/\n│ ├── MasterPasswordScreen.tsx # Password creation/verification\n│ └── MainScreen.tsx # Main chat interface with sidebar\n└── components/\n ├── MessageBubble.tsx # Message display\n ├── StatusBadge.tsx # AI status indicator\n ├── EmptyState.tsx # Empty state UI\n ├── ModelSelector.tsx # AI model selection dropdown\n ├── OptionsMenu.tsx # Lock/delete options menu\n └── ChatNameModal.tsx # Create/rename chat modal\n```\n\n## Usage Tips\n\n### Strong Master Password\n\nUse a strong, unique master password. Since encryption happens client-side, your master password is the only thing protecting ALL your data.\n\n### Password Recovery\n\n**There is no password recovery.** If you forget your master password, ALL your chat data is permanently inaccessible. This is by design - the server (in this case Val-Town) won't have access to your data or password.\n\n### AI Model Selection\n\nThe app offers three AI models:\n- **Phi-3 Mini (2.3GB)** - Fastest, best for quick responses\n- **Llama 3.2 3B (1.9GB)** - Balanced performance and quality (default)\n- **Llama 3.1 8B (4.7GB)** - Highest quality responses, slower\n\nModels download to your browser once and persist. You can switch models anytime in the chat interface.\n\n\n## Troubleshooting\n\n### \"Unauthorized\" Error\n\n**Problem:** API calls return 401 Unauthorized\n\n**Solution:**\n1. Check that `STORAGE_API_KEY` is set in environment variables\n2. Make sure the key matches in both your main val and storage val\n3. Restart both vals after setting the variable\n\n### \"Wrong Password\" Error\n\n**Problem:** Can't unlock the app\n\n**Solution:**\n- Double-check your master password (passwords are case-sensitive)\n- There is no password recovery - if you forgot it, all your chats are inaccessible\n\n### Chat List Empty\n\n**Problem:** No chats appear on home screen\n\n**Solution:**\n1. Check browser console for errors\n2. Verify `STORAGE_URL` in `lib/api.ts` points to your storage val\n3. Ensure storage val is running and accessible\n\n### AI Model Not Loading\n\n**Problem:** WebLLM status shows error\n\n**Solution:**\n- WebLLM downloads models to browser (can be 1-2 GB)\n- Check your internet connection\n- Try refreshing the page\n- Check browser console for specific errors\n\n## Advanced Configuration\n\n### Change PBKDF2 Iterations\n\nFor stronger encryption, increase iterations in `lib/crypto.ts` (line 25):\n\n```typescript\niterations: 600000, // Increased from 100,000\n```\n\n**Trade-off:** Higher security, slower encryption/decryption.\n\n### Restrict CORS\n\nTo only allow requests from your frontend:\n\n1. Set `FRONTEND_URL` environment variable\n2. Value: `https://your-main-val.val.run`\n3. Restart storage val\n\nThis prevents other websites from calling your API (browser-level protection).\n\n### Add More AI Models\n\nTo add additional AI models beyond the three included:\n\n1. Edit `lib/models.ts` to add model definitions\n2. Add to the `AVAILABLE_MODELS` array with model ID, name, size, and description\n3. Find compatible model IDs in the [WebLLM documentation](https://github.com/mlc-ai/web-llm)\n\n### Lock and Security Features\n\n- **Lock App**: Click the options menu (•••) in the bottom-right to lock the app. This clears your password from the session and returns to the master password screen.\n- **Delete All Data**: Use the options menu to permanently delete all chats from your database. This action cannot be undone.\n\n## Privacy & Data\n\n### What Data is Collected\n\n**None.** This app doesn't collect, track, or transmit any data beyond what's necessary for functionality:\n\n- Your chats are encrypted and stored in **your** Val Town SQLite database\n- Your password never leaves your browser\n- No analytics, no tracking, no third parties\n\n### Who Can Access Your Data\n\n**Only you.** When you fork this val:\n\n- You own the Val Town vals\n- You control the database\n- You set the API key\n- You hold the encryption passwords\n\nNo one else (including the original author) can access your chats.\n\n## Contributing\n\nFound a bug or want to improve the code? Feel free to:\n\n1. Fork this val\n2. Make your improvements\n3. Share your enhanced version!\n\nThis is open source - make it your own.\n\n## Security Considerations\n\nWhile this app implements strong encryption and security practices, please note:\n\n- ⚠️ This is a personal project, not audited by security professionals\n- ⚠️ API keys are visible in browser DevTools (use strong, unique keys)\n- ⚠️ Val Town is a public platform - keep your vals private if needed\n- ⚠️ No rate limiting implemented (could be added if needed)\n\nFor maximum security:\n- Use strong, unique passwords\n- Set a strong `STORAGE_API_KEY`\n- Keep your Val Town account secure\n- Consider enabling 2FA on your Val Town account\n\n## Credits\n\nBuilt with:\n- [Val Town](https://val.town) - Hosting & SQLite\n- [React](https://react.dev) - UI framework\n- [WebLLM](https://github.com/mlc-ai/web-llm) - Browser-based AI\n- [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) - Encryption\n- [Tailwind CSS](https://tailwindcss.com) - Styling\n\n## License\n\nMIT License - Feel free to fork, remix, and make it your own!\n\n---\n\n**Remember:** Your master password is your key. Keep it safe, keep it secret.\n",[217],"2fb9b4ae-e752-11f0-abdb-42dde27851f2","App.tsx","019b7b4a-dc1a-76da-b23b-1553a9a249ae",["D",1767300062204],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport type {\n MasterPasswordMode,\n Screen,\n} from \"./types.ts\";\nimport { useWebLLM } from \"./hooks/useWebLLM.ts\";\nimport { useEncryption } from \"./hooks/useEncryption.ts\";\nimport {\n createMasterPasswordToken,\n hasMasterPassword,\n verifyMasterPassword,\n} from \"./lib/crypto.ts\";\nimport { MainScreen } from \"./screens/MainScreen.tsx\";\nimport { MasterPasswordScreen } from \"./screens/MasterPasswordScreen.tsx\";\n\nexport function App() {\n const [screen, setScreen] = useState(() => {\n // Check if already unlocked in this session\n const storedPassword = sessionStorage.getItem(\"masterPassword\");\n return storedPassword ? \"main\" : \"masterpassword\";\n });\n const [masterPasswordMode, setMasterPasswordMode] = useState<\n MasterPasswordMode\n >(\n hasMasterPassword() ? \"verify\" : \"create\",\n );\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [selectedModel, setSelectedModel] = useState(() => {\n // Load saved model from localStorage or use default\n const savedModel = localStorage.getItem(\"selectedModel\");\n return savedModel || \"Llama-3.2-3B-Instruct-q4f16_1-MLC\"; // Medium default\n });\n\n const { status, isReady, sendMessage } = useWebLLM(selectedModel);\n const { unlock, lock, encryptMessages, decryptMessages } = useEncryption();\n\n // Save selected model to localStorage when it changes\n useEffect(() => {\n localStorage.setItem(\"selectedModel\", selectedModel);\n }, [selectedModel]);\n\n // Unlock with stored password on mount\n useEffect(() => {\n const storedPassword = sessionStorage.getItem(\"masterPassword\");\n if (storedPassword) {\n unlock(storedPassword);\n }\n }, [unlock]);\n\n // Handle master password creation (first time)\n const handleCreateMasterPassword = async (password: string) => {\n setError(null);\n setIsLoading(true);\n\n try {\n await createMasterPasswordToken(password);\n unlock(password);\n sessionStorage.setItem(\"masterPassword\", password);\n setScreen(\"main\");\n } catch (e: any) {\n setError(e.message);\n }\n\n setIsLoading(false);\n };\n\n // Handle master password verification (returning user)\n const handleVerifyMasterPassword = async (password: string) => {\n setError(null);\n setIsLoading(true);\n\n try {\n const isValid = await verifyMasterPassword(password);\n if (!isValid) {\n setError(\"Wrong password\");\n setIsLoading(false);\n return;\n }\n\n unlock(password);\n sessionStorage.setItem(\"masterPassword\", password);\n setScreen(\"main\");\n } catch (e: any) {\n setError(e.message);\n }\n\n setIsLoading(false);\n };\n\n // Handle lock app\n const handleLock = () => {\n lock();\n sessionStorage.removeItem(\"masterPassword\");\n setScreen(\"masterpassword\");\n setMasterPasswordMode(\"verify\");\n setError(null);\n };\n\n // Render master password screen\n if (screen === \"masterpassword\") {\n return (\n \n );\n }\n\n // Render main screen\n return (\n \n );\n}\n",[224],"2fb97dea-e752-11f0-abdb-42dde27851f2","AGENTS.md","019b7b4a-dc1a-76da-b23b-102342876941",["D",1767300062204],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[230],"2fb97c3c-e752-11f0-abdb-42dde27851f2",".vtignore","019b7b4a-dc1a-76da-b23b-0dbe413d73a3",["D",1767300062204],".git\n.vscode\n.cursorrules\n.DS_Store\n.claude\nnode_modules\nvendor",[236],"2fb97aca-e752-11f0-abdb-42dde27851f2","screens","019b7b4a-dc1a-76da-b23b-092379762ecf",["D",1767300062204],"directory",[242],"2fb922e6-e752-11f0-abdb-42dde27851f2","lib","019b7b4a-dc1a-76da-b23a-fcb3d64c6fd6",["D",1767300062204],[248],"2fb8fd5c-e752-11f0-abdb-42dde27851f2","hooks","019b7b4a-dc1a-76da-b23a-ee756130cf90",["D",1767300062204],[253],"3f4fe080-e808-11f0-96a3-42dde27851f2","cron","3f4fe12a-e808-11f0-96a3-42dde27851f2",39,["D",1767378256801],[258],"2fb8e3e4-e752-11f0-abdb-42dde27851f2","components","019b7b4a-dc1a-76da-b23a-e222d3b2b68a",["D",1767300062204],[264],"2fb8a3a2-e752-11f0-abdb-42dde27851f2","api","019b7b4a-dc1a-76da-b23a-c46b608f4a03",["D",1767300062204],[269],"pulls","branches","forks","envVars",{"_280":199,"_282":90},"connections",{"_280":90,"_281":90},"count","unfilledCount","emptyCount",{"_71":268,"_35":269,"_33":270,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":472,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":473,"_30":474},{"_71":463,"_35":464,"_33":465,"_188":270,"_45":46,"_44":466,"_190":158,"_42":467,"_13":468,"_37":207,"_39":469,"_27":28,"_194":-5,"_315":470,"_30":471},{"_71":454,"_35":455,"_33":456,"_188":270,"_45":46,"_44":457,"_190":158,"_42":458,"_13":459,"_37":207,"_39":460,"_27":28,"_194":-5,"_315":461,"_30":462},{"_71":263,"_35":264,"_33":265,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":451,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":452,"_30":453},{"_71":444,"_35":445,"_33":446,"_188":265,"_45":46,"_44":199,"_190":158,"_42":447,"_13":90,"_37":38,"_39":448,"_27":28,"_194":-5,"_315":449,"_30":450},{"_71":437,"_35":438,"_33":439,"_188":265,"_45":46,"_44":189,"_190":158,"_42":440,"_13":199,"_37":38,"_39":441,"_27":28,"_194":-5,"_315":442,"_30":443},{"_71":430,"_35":431,"_33":432,"_188":265,"_45":46,"_44":189,"_190":158,"_42":433,"_13":199,"_37":38,"_39":434,"_27":28,"_194":-5,"_315":435,"_30":436},{"_71":423,"_35":424,"_33":425,"_188":265,"_45":46,"_44":189,"_190":158,"_42":426,"_13":199,"_37":38,"_39":427,"_27":28,"_194":-5,"_315":428,"_30":429},{"_71":418,"_35":67,"_33":66,"_188":265,"_45":46,"_44":14,"_190":158,"_42":419,"_13":420,"_37":38,"_39":69,"_27":28,"_194":-5,"_315":421,"_30":422},{"_71":411,"_35":412,"_33":413,"_188":265,"_45":46,"_44":189,"_190":158,"_42":414,"_13":341,"_37":38,"_39":415,"_27":28,"_194":-5,"_315":416,"_30":417},{"_71":257,"_35":258,"_33":259,"_188":-5,"_45":46,"_44":260,"_190":158,"_42":408,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":409,"_30":410},{"_71":398,"_35":399,"_33":400,"_188":259,"_45":46,"_44":401,"_190":158,"_42":402,"_13":403,"_37":404,"_39":405,"_27":28,"_194":-5,"_315":406,"_30":407},{"_71":252,"_35":253,"_33":254,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":395,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":396,"_30":397},{"_71":388,"_35":389,"_33":390,"_188":254,"_45":46,"_44":199,"_190":158,"_42":391,"_13":90,"_37":38,"_39":392,"_27":28,"_194":-5,"_315":393,"_30":394},{"_71":384,"_35":59,"_33":58,"_188":254,"_45":46,"_44":14,"_190":158,"_42":385,"_13":192,"_37":38,"_39":61,"_27":28,"_194":-5,"_315":386,"_30":387},{"_71":247,"_35":248,"_33":249,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":381,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":382,"_30":383},{"_71":373,"_35":374,"_33":375,"_188":249,"_45":46,"_44":376,"_190":158,"_42":377,"_13":341,"_37":38,"_39":378,"_27":28,"_194":-5,"_315":379,"_30":380},{"_71":366,"_35":367,"_33":368,"_188":249,"_45":46,"_44":189,"_190":158,"_42":369,"_13":90,"_37":38,"_39":370,"_27":28,"_194":-5,"_315":371,"_30":372},{"_71":359,"_35":360,"_33":361,"_188":249,"_45":46,"_44":199,"_190":158,"_42":362,"_13":90,"_37":38,"_39":363,"_27":28,"_194":-5,"_315":364,"_30":365},{"_71":352,"_35":353,"_33":354,"_188":249,"_45":46,"_44":199,"_190":158,"_42":355,"_13":90,"_37":38,"_39":356,"_27":28,"_194":-5,"_315":357,"_30":358},{"_71":241,"_35":242,"_33":243,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":349,"_13":90,"_37":245,"_39":-5,"_27":28,"_194":-5,"_315":350,"_30":351},{"_71":344,"_35":51,"_33":50,"_188":243,"_45":46,"_44":14,"_190":158,"_42":345,"_13":346,"_37":38,"_39":53,"_27":28,"_194":-5,"_315":347,"_30":348},{"_71":339,"_35":36,"_33":34,"_188":243,"_45":46,"_44":14,"_190":28,"_42":340,"_13":341,"_37":38,"_39":41,"_27":28,"_194":-5,"_315":342,"_30":343},{"_71":235,"_35":236,"_33":237,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":336,"_13":90,"_37":23,"_39":239,"_27":28,"_194":-5,"_315":337,"_30":338},{"_71":229,"_35":230,"_33":231,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":333,"_13":90,"_37":23,"_39":233,"_27":28,"_194":-5,"_315":334,"_30":335},{"_71":223,"_35":224,"_33":225,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":330,"_13":90,"_37":38,"_39":227,"_27":28,"_194":-5,"_315":331,"_30":332},{"_71":216,"_35":217,"_33":218,"_188":-5,"_45":46,"_44":219,"_190":158,"_42":327,"_13":199,"_37":23,"_39":221,"_27":28,"_194":-5,"_315":328,"_30":329},{"_71":210,"_35":211,"_33":212,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":324,"_13":90,"_37":23,"_39":214,"_27":28,"_194":-5,"_315":325,"_30":326},{"_71":203,"_35":204,"_33":205,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":321,"_13":90,"_37":207,"_39":208,"_27":28,"_194":-5,"_315":322,"_30":323},{"_71":196,"_35":197,"_33":198,"_188":-5,"_45":46,"_44":199,"_190":158,"_42":318,"_13":90,"_37":38,"_39":201,"_27":28,"_194":-5,"_315":319,"_30":320},{"_71":185,"_35":186,"_33":187,"_188":-5,"_45":46,"_44":189,"_190":158,"_42":314,"_13":192,"_37":38,"_39":193,"_27":28,"_194":-5,"_315":316,"_30":317},["D",1767650456308],"children",[],[186],["D",1767300062204],[],[197],["D",1767300062204],[],[204],["D",1767300062204],[],[211],["D",1767645589589],[],[217],["D",1767300062204],[],[224],["D",1767300062204],[],[230],["D",1767300062204],[],[236],"6b507e8a-ece8-11f0-8087-42dde27851f2",["D",1767914342535],5,[],[242,36],"6b5032c2-ece8-11f0-8087-42dde27851f2",["D",1767914342535],179,[],[242,51],["D",1767300062204],[304,305],[242],"2fb91d28-e752-11f0-abdb-42dde27851f2","models.ts","019b7b4a-dc1a-76da-b23a-fa731dad28d4",["D",1767300062204],"export type ModelSize = \"light\" | \"medium\" | \"large\";\n\nexport interface ModelInfo {\n id: string;\n name: string;\n size: ModelSize;\n downloadSize: string;\n description: string;\n}\n\nexport const AVAILABLE_MODELS: ModelInfo[] = [\n {\n id: \"Phi-3-mini-4k-instruct-q4f16_1-MLC\",\n name: \"Phi-3 Mini\",\n size: \"light\",\n downloadSize: \"2.3GB\",\n description: \"Fast and efficient\",\n },\n {\n id: \"Llama-3.2-3B-Instruct-q4f16_1-MLC\",\n name: \"Llama 3.2 3B\",\n size: \"medium\",\n downloadSize: \"1.9GB\",\n description: \"Balanced performance\",\n },\n {\n id: \"Llama-3.1-8B-Instruct-q4f32_1-MLC\",\n name: \"Llama 3.1 8B\",\n size: \"large\",\n downloadSize: \"4.7GB\",\n description: \"Best quality\",\n },\n];\n\nexport function getModelInfo(modelId: string): ModelInfo | undefined {\n return AVAILABLE_MODELS.find((model) => model.id === modelId);\n}\n\nexport function getModelSizeLabel(size: ModelSize): string {\n const labels = {\n light: \"Light\",\n medium: \"Medium\",\n large: \"Large\",\n };\n return labels[size];\n}\n",[],[248,353],"2fb90c20-e752-11f0-abdb-42dde27851f2","crypto.ts","019b7b4a-dc1a-76da-b23a-f65ccc2d9e22",["D",1767300062204],"// Encode text to bytes\nfunction textToBytes(text: string): Uint8Array {\n return new TextEncoder().encode(text);\n}\n\n// Decode bytes to text\nfunction bytesToText(bytes: ArrayBuffer): string {\n return new TextDecoder().decode(bytes);\n}\n\n// Derive encryption key from password + salt\nasync function deriveKey(password: string, salt: Uint8Array): Promise {\n const keyMaterial = await crypto.subtle.importKey(\n \"raw\",\n textToBytes(password),\n \"PBKDF2\",\n false,\n [\"deriveKey\"]\n );\n\n return crypto.subtle.deriveKey(\n {\n name: \"PBKDF2\",\n salt,\n iterations: 100000,\n hash: \"SHA-256\"\n },\n keyMaterial,\n { name: \"AES-GCM\", length: 256 },\n false,\n [\"encrypt\", \"decrypt\"]\n );\n}\n\n// Encrypted package type\nexport type EncryptedPackage = {\n salt: number[];\n iv: number[];\n ciphertext: number[];\n};\n\n// Encrypt text with password\nexport async function encrypt(text: string, password: string): Promise {\n const salt = crypto.getRandomValues(new Uint8Array(16));\n const iv = crypto.getRandomValues(new Uint8Array(12));\n \n // Derive key from password FIRST\n const key = await deriveKey(password, salt);\n\n const encryptedBytes = await crypto.subtle.encrypt(\n { name: \"AES-GCM\", iv },\n key, // This must be a CryptoKey, not a string\n textToBytes(text)\n );\n\n return {\n salt: Array.from(salt),\n iv: Array.from(iv),\n ciphertext: Array.from(new Uint8Array(encryptedBytes))\n };\n}\n\n// Decrypt with password\nexport async function decrypt(pkg: EncryptedPackage, password: string): Promise {\n const salt = new Uint8Array(pkg.salt);\n const iv = new Uint8Array(pkg.iv);\n const ciphertext = new Uint8Array(pkg.ciphertext);\n\n // Derive the same key from password + stored salt\n const key = await deriveKey(password, salt);\n\n const decryptedBytes = await crypto.subtle.decrypt(\n { name: \"AES-GCM\", iv },\n key,\n ciphertext\n );\n\n return bytesToText(decryptedBytes);\n}\n\n// Master password verification\nconst PASSWORD_VERIFICATION_STRING = \"LOCALS_AI_VALID_PASSWORD_v1\";\nconst MASTER_PASSWORD_TOKEN_KEY = \"locals_ai_master_password_token\";\n\nexport type MasterPasswordToken = {\n version: number;\n verificationData: EncryptedPackage;\n createdAt: string;\n};\n\n// Create verification token for master password\nexport async function createMasterPasswordToken(password: string): Promise {\n const verificationData = await encrypt(PASSWORD_VERIFICATION_STRING, password);\n const token: MasterPasswordToken = {\n version: 1,\n verificationData,\n createdAt: new Date().toISOString()\n };\n localStorage.setItem(MASTER_PASSWORD_TOKEN_KEY, JSON.stringify(token));\n}\n\n// Verify master password against stored token\nexport async function verifyMasterPassword(password: string): Promise {\n const tokenJson = localStorage.getItem(MASTER_PASSWORD_TOKEN_KEY);\n if (!tokenJson) return false;\n\n try {\n const token: MasterPasswordToken = JSON.parse(tokenJson);\n const decrypted = await decrypt(token.verificationData, password);\n return decrypted === PASSWORD_VERIFICATION_STRING;\n } catch {\n return false; // Decryption failed = wrong password\n }\n}\n\n// Check if master password has been set\nexport function hasMasterPassword(): boolean {\n return localStorage.getItem(MASTER_PASSWORD_TOKEN_KEY) !== null;\n}",[],[248,360],"02e03f92-ea82-11f0-8089-42dde27851f2","cacheManager.ts","02e0403c-ea82-11f0-8089-42dde27851f2",["D",1767650456308],"/**\n * Cache management utilities for WebLLM models\n * Helps detect and manage browser cache for faster model switching\n */\n\n/**\n * Get the cache name used by WebLLM for storing models\n */\nexport function getCacheName(modelId: string): string {\n return `webllm/model`;\n}\n\n/**\n * Check if a model is already cached in the browser\n * @param modelId - The WebLLM model ID to check\n * @returns true if the model is found in cache, false otherwise\n */\nexport async function isModelCached(modelId: string): Promise {\n try {\n const cacheName = getCacheName(modelId);\n const cache = await caches.open(cacheName);\n const keys = await cache.keys();\n\n // Check if any cached URLs contain the model ID\n // WebLLM caches model files with URLs containing the model ID\n const isCached = keys.some(request => request.url.includes(modelId));\n\n console.log(`[CacheManager] Model ${modelId} cached:`, isCached);\n return isCached;\n } catch (err) {\n console.warn(\"[CacheManager] Error checking cache:\", err);\n // If cache API fails, assume not cached\n return false;\n }\n}\n\n/**\n * Clear cache for a specific model\n * Only call this when cache is confirmed to be corrupted\n * @param modelId - The WebLLM model ID to clear from cache\n */\nexport async function clearModelCache(modelId: string): Promise {\n try {\n const cacheName = getCacheName(modelId);\n const cache = await caches.open(cacheName);\n const keys = await cache.keys();\n\n // Delete all cache entries related to this model\n const deletions = keys\n .filter(request => request.url.includes(modelId))\n .map(request => cache.delete(request));\n\n await Promise.all(deletions);\n console.log(`[CacheManager] Cleared cache for model ${modelId}`);\n } catch (err) {\n console.warn(\"[CacheManager] Error clearing cache:\", err);\n }\n}\n",[],[248,367],"472def86-e82b-11f0-9fa3-42dde27851f2","api.ts","019b7b4a-dc1a-76da-b23a-f15c44dae798",131,["D",1767393302383],"import type { EncryptedPackage, ChatListItem, TimerResponse } from \"../types.ts\";\n\nconst STORAGE_URL = \"https://prada--019b7b4adc1a76dab23ac21db4a0e531.web.val.run\";\nconst TIMER_URL = \"https://prada--c3d08d4ee75611f0980542dde27851f2.web.val.run\"; // demo only URL\n\n// Get API key from window (injected by main.ts)\nfunction getApiKey(): string {\n return (window as any).STORAGE_API_KEY || \"\";\n}\n\n// Helper to create auth headers\nfunction getHeaders(includeContentType = false): HeadersInit {\n const headers: HeadersInit = {\n \"Authorization\": `Bearer ${getApiKey()}`\n };\n if (includeContentType) {\n headers[\"Content-Type\"] = \"application/json\";\n }\n return headers;\n}\n\nexport async function listChats(): Promise {\n const response = await fetch(`${STORAGE_URL}/list`, {\n headers: getHeaders()\n });\n if (!response.ok) throw new Error(\"Failed to load chat list\");\n const result = await response.json();\n return result.chats;\n}\n\nexport async function createChat(id: string, name: string, data: EncryptedPackage): Promise {\n const response = await fetch(`${STORAGE_URL}/create`, {\n method: \"POST\",\n headers: getHeaders(true),\n body: JSON.stringify({ id, name, data })\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Create failed\");\n }\n}\n\nexport async function saveChat(id: string, data: EncryptedPackage): Promise {\n const response = await fetch(`${STORAGE_URL}/save`, {\n method: \"POST\",\n headers: getHeaders(true),\n body: JSON.stringify({ id, data })\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Save failed\");\n }\n}\n\nexport async function renameChat(id: string, name: string): Promise {\n const response = await fetch(`${STORAGE_URL}/rename`, {\n method: \"POST\",\n headers: getHeaders(true),\n body: JSON.stringify({ id, name })\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Rename failed\");\n }\n}\n\nexport async function loadChat(id: string): Promise {\n const response = await fetch(`${STORAGE_URL}/load?id=${encodeURIComponent(id)}`, {\n headers: getHeaders()\n });\n if (response.status === 404) return null;\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Load failed\");\n }\n const result = await response.json();\n return result.data;\n}\n\nexport async function deleteChat(id: string): Promise {\n const response = await fetch(`${STORAGE_URL}/delete?id=${encodeURIComponent(id)}`, {\n method: \"DELETE\",\n headers: getHeaders()\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Delete failed\");\n }\n}\n\nexport async function deleteAllChats(): Promise {\n const response = await fetch(`${STORAGE_URL}/delete-all`, {\n method: \"DELETE\",\n headers: getHeaders()\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Delete all failed\");\n }\n}\n\nexport async function startTimer(): Promise {\n const response = await fetch(`${TIMER_URL}/timer/start`, {\n method: \"POST\",\n headers: getHeaders(true)\n });\n if (!response.ok) {\n const err = await response.json();\n throw new Error(err.error || \"Timer start failed\");\n }\n const result = await response.json();\n return result;\n}",[],[248,374],["D",1767300062204],[299,300,301,302],[248],"6b50121a-ece8-11f0-8087-42dde27851f2",["D",1767914342535],[],[253,59],"2fb8e524-e752-11f0-abdb-42dde27851f2","useEncryption.ts","019b7b4a-dc1a-76da-b23a-e560696b73b2",["D",1767300062204],"import { useState, useCallback } from \"https://esm.sh/react\";\nimport { encrypt, decrypt, type EncryptedPackage } from \"../lib/crypto.ts\";\nimport type { Message } from \"../types.ts\";\n\nexport function useEncryption() {\n const [password, setPassword] = useState(null);\n\n const encryptMessages = useCallback(async (messages: Message[]): Promise => {\n if (!password) throw new Error(\"No password set\");\n return encrypt(JSON.stringify(messages), password);\n }, [password]);\n\n const decryptMessages = useCallback(async (pkg: EncryptedPackage): Promise => {\n if (!password) throw new Error(\"No password set\");\n const json = await decrypt(pkg, password);\n return JSON.parse(json);\n }, [password]);\n\n const unlock = useCallback((pwd: string) => {\n setPassword(pwd);\n }, []);\n\n const lock = useCallback(() => {\n setPassword(null);\n }, []);\n\n const isUnlocked = password !== null;\n\n return {\n isUnlocked,\n unlock,\n lock,\n encryptMessages,\n decryptMessages\n };\n}",[],[253,389],["D",1767300062204],[296,297],[253],"eb2f2b22-e82b-11f0-b4da-42dde27851f2","cleanup.ts","9e52df7e-e808-11f0-b9ef-42dde27851f2",132,["D",1767393577539],25,"interval","import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nconst STORAGE_URL = \"https://prada--019b7b4adc1a76dab23ac21db4a0e531.web.val.run\";\nconst STORAGE_API_KEY = Deno.env.get(\"STORAGE_API_KEY\") || \"331431f8-f995-4da9-9f95-7dbbcb020eda\";\n\nexport default async function(){\n try {\n // Ensure table exists before querying\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS demo_locals_ai_timer_meta (\n key TEXT PRIMARY KEY,\n value TEXT\n )\n `);\n\n // grab the expiration time if it's there\n const result = await sqlite.execute(`\n SELECT value FROM demo_locals_ai_timer_meta WHERE key = 'expiresAt'\n `)\n\n // check if the expiration time has been set\n if (result.rows.length === 0) {\n console.log('No active timer set, skipping -->');\n return;\n }\n\n const expiresAt = parseInt(result.rows[0][0] as string);\n\n // if there's still time, log it and wait\n if( Date.now() < expiresAt ) {\n console.log(`Timer hasn't expired yet, ${Math.round((expiresAt - Date.now()) / 1000)}s remaining`)\n return;\n }\n\n // times up, delete the data via HTTP call to storage API\n console.log(\"Timer expired, calling storage API to delete data\");\n\n const response = await fetch(`${STORAGE_URL}/reset-all`, {\n method: \"DELETE\",\n headers: {\n \"Authorization\": `Bearer ${STORAGE_API_KEY}`\n }\n });\n\n if (response.ok) {\n console.log('✅ Successfully deleted chats table via storage API');\n } else {\n console.log(`⚠️ Storage API returned error: ${response.status}`);\n const error = await response.text();\n console.log('Error details:', error);\n }\n\n // Clear the expiration so we don't run again\n await sqlite.execute(`DELETE FROM demo_locals_ai_timer_meta WHERE key = 'expiresAt'`);\n\n console.log('Cleanup complete');\n } catch (error) {\n console.error('Cleanup job error:', error);\n // Don't throw - let the cron job continue running\n }\n}",[],[258,399],["D",1767378256801],[294],[258],"02e0973a-ea82-11f0-8089-42dde27851f2","StatusBadge.tsx","019b7b4a-dc1a-76da-b23a-df5bb90786cf",["D",1767650456308],"/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\nimport type { WebLLMStatus } from \"../types.ts\";\n\ntype Props = {\n status: WebLLMStatus;\n};\n\nexport function StatusBadge({ status }: Props) {\n const styles = {\n idle: \"bg-gray-100 text-gray-600\",\n loading: \"bg-amber-100 text-amber-800\",\n ready: \"bg-primary-400 text-white\",\n error: \"bg-red-100 text-red-800\"\n };\n\n // Use green tint for cache loading to indicate fast load\n const loadingStyle = status.isFromCache\n ? \"bg-green-100 text-green-800\"\n : styles.loading;\n\n const currentStyle = status.state === \"loading\" ? loadingStyle : styles[status.state];\n\n return (\n \n {status.state === \"loading\" && status.progress !== undefined\n ? `${status.isFromCache ? \"Cache\" : \"Download\"} ${status.progress}%`\n : status.message}\n \n );\n}",[],[264,412],"6b4fec22-ece8-11f0-8087-42dde27851f2",["D",1767914342535],4,[],[264,67],"02e071a6-ea82-11f0-8089-42dde27851f2","ModelSelector.tsx","019b7b4a-dc1a-76da-b23a-d6f4dfc2be28",["D",1767650456308],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport {\n AVAILABLE_MODELS,\n getModelInfo,\n getModelSizeLabel,\n} from \"../lib/models.ts\";\n\ntype Props = {\n selectedModel: string;\n onModelChange: (modelId: string) => void;\n disabled?: boolean;\n isReady?: boolean;\n};\n\nexport function ModelSelector(\n { selectedModel, onModelChange, disabled, isReady }: Props,\n) {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n const currentModel = getModelInfo(selectedModel);\n const displayLabel = currentModel ? `${currentModel.name}` : \"Select Model\";\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n\n const handleModelSelect = (modelId: string) => {\n onModelChange(modelId);\n setIsOpen(false);\n };\n\n return (\n

\n {/* Selector Button */}\n !disabled && setIsOpen(!isOpen)}\n disabled={disabled}\n className=\"flex items-center gap-2 px-4 py-2 text-sm text-white bg-vibe-300 rounded-[28px] hover:bg-vibe-250 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n type=\"button\"\n >\n {displayLabel}\n \n \n \n \n\n {/* Dropdown Menu */}\n {isOpen && (\n

\n {AVAILABLE_MODELS.map((model) => (\n handleModelSelect(model.id)}\n className={`w-full px-4 py-3 text-left hover:bg-vibe-300 transition-colors ${\n model.id === selectedModel ? \"bg-vibe-300\" : \"\"\n }`}\n type=\"button\"\n >\n

\n {model.name}\n

\n {model.description}\n

\n \n {getModelSizeLabel(model.size)}\n \n \n {model.downloadSize}\n \n

\n \n ))}\n

\n )}\n

\n );\n}\n",[],[264,424],"02e06c1a-ea82-11f0-8089-42dde27851f2","MessageBubble.tsx","019b7b4a-dc1a-76da-b23a-d02969270ab4",["D",1767650456308],"/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\nimport type { Message } from \"../types.ts\";\n\ntype Props = {\n message: Message;\n};\n\nexport function MessageBubble({ message }: Props) {\n const isUser = message.role === \"user\";\n\n return (\n

\n \n {message.content}\n

\n \n );\n}\n",[],[264,431],"02e064fe-ea82-11f0-8089-42dde27851f2","EmptyState.tsx","019b7b4a-dc1a-76da-b23a-cdbd71b199b9",["D",1767650456308],"/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\n\ntype Props = {\n isReady: boolean;\n};\n\nexport function EmptyState({ isReady }: Props) {\n return (\n

{isReady ? \"Send a message to start\" : \"Loading AI...\"}

\n {!isReady && (\n

\n First load downloads takes a bit longer\n

\n )}\n

\n );\n}\n",[],[264,438],"2fb8a6ae-e752-11f0-abdb-42dde27851f2","ChatNameModal.tsx","019b7b4a-dc1a-76da-b23a-cb4f3522f044",["D",1767300062204],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\n\ntype Props = {\n isOpen: boolean;\n mode: \"create\" | \"rename\";\n initialName?: string;\n onSave: (name: string) => void;\n onCancel: () => void;\n isLoading?: boolean;\n error?: string | null;\n};\n\nexport function ChatNameModal({\n isOpen,\n mode,\n initialName = \"\",\n onSave,\n onCancel,\n isLoading = false,\n error = null,\n}: Props) {\n const [name, setName] = useState(initialName);\n const [validationError, setValidationError] = useState(\"\");\n\n useEffect(() => {\n if (isOpen) {\n setName(initialName);\n setValidationError(\"\");\n }\n }, [isOpen, initialName]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!name.trim()) {\n setValidationError(\"Please enter a chat name\");\n return;\n }\n\n setValidationError(\"\");\n onSave(name.trim());\n };\n\n const handleCancel = () => {\n setName(\"\");\n setValidationError(\"\");\n onCancel();\n };\n\n if (!isOpen) return null;\n\n const displayError = error || validationError;\n\n return (\n

\n {mode === \"create\" ? \"New Chat\" : \"Rename Chat\"}\n

\n\n

\n \n Chat Name\n \n {\n setName(e.target.value);\n setValidationError(\"\");\n }}\n placeholder=\"e.g., Work Ideas, Journal, Research...\"\n disabled={isLoading}\n className=\"w-full px-4 py-3 rounded-md bg-vibe-300 border border-vibe-250 text-white placeholder-vibe-200 focus:outline-none focus:ring-1 focus:ring-primary-300 disabled:opacity-50 transition-colors\"\n autoFocus\n />\n {displayError && (\n

{displayError}

\n )}\n

\n\n

\n \n Cancel\n \n \n {isLoading ? \"Saving...\" : \"Save\"}\n \n

\n );\n}\n",[],[264,445],["D",1767300062204],[287,288,289,290,291,292],[264],"66cabd5a-e82c-11f0-83b0-42dde27851f2","storage.ts","019b7b4a-dc1a-76da-b23a-c21db4a0e531",135,["D",1767393784907],14,"import { Hono } from \"https://esm.sh/hono@4\";\nimport { cors } from \"https://esm.sh/hono@4/cors\";\nimport { bearerAuth } from \"https://esm.sh/hono@4/bearer-auth\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n/* Uncomment to delete database\nawait sqlite.execute(`DROP TABLE demo_locals_ai_encrypted_chats`);\n*/\n\n// Initialize database table\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS demo_locals_ai_encrypted_chats (\n id TEXT PRIMARY KEY,\n name TEXT,\n data TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n updated_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n`);\n\n// Auto-generate API key if not set\nlet STORAGE_API_KEY = Deno.env.get(\"STORAGE_API_KEY\");\nif (!STORAGE_API_KEY) {\n STORAGE_API_KEY = crypto.randomUUID();\n console.warn(\n \"⚠️ STORAGE_API_KEY not set! Auto-generated key:\",\n STORAGE_API_KEY,\n );\n console.warn(\n \"⚠️ Save this key to your STORAGE_API_KEY environment variable!\",\n );\n}\n\n// Initialize Hono app\nconst app = new Hono();\n\n// CORS middleware - allow requests from your frontend\nconst allowedOrigin = Deno.env.get(\"FRONTEND_URL\") || \"*\";\napp.use(\n \"/*\",\n cors({\n origin: allowedOrigin,\n allowMethods: [\"GET\", \"POST\", \"DELETE\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\", \"Authorization\"],\n }),\n);\n\n// Authentication middleware - protect all routes except OPTIONS\napp.use(\"/*\", async (c, next) => {\n if (c.req.method === \"OPTIONS\") {\n return await next();\n }\n\n const auth = c.req.header(\"Authorization\");\n if (!auth || auth !== `Bearer ${STORAGE_API_KEY}`) {\n return c.json({ error: \"Unauthorized - Invalid or missing API key\" }, 401);\n }\n\n await next();\n});\n\n// Routes\n\n// GET /list - Get all chats (metadata only)\napp.get(\"/list\", async (c) => {\n const result = await sqlite.execute(\n `SELECT id, name, created_at, updated_at FROM demo_locals_ai_encrypted_chats ORDER BY updated_at DESC`,\n );\n\n const chats = result.rows.map((row) => ({\n id: row[0],\n name: row[1],\n createdAt: row[2],\n updatedAt: row[3],\n }));\n\n return c.json({ chats });\n});\n\n// POST /create - Create new chat\napp.post(\"/create\", async (c) => {\n const body = await c.req.json();\n const { id, name, data } = body;\n\n if (!id || !name) {\n return c.json({ error: \"Missing id or name\" }, 400);\n }\n\n await sqlite.execute({\n sql: `INSERT INTO demo_locals_ai_encrypted_chats (id, name, data) VALUES (?, ?, ?)`,\n args: [id, name, data ? JSON.stringify(data) : \"[]\"],\n });\n\n return c.json({ success: true, id });\n});\n\n// POST /save - Update chat data\napp.post(\"/save\", async (c) => {\n const body = await c.req.json();\n const { id, data } = body;\n\n if (!id || !data) {\n return c.json({ error: \"Missing id or data\" }, 400);\n }\n\n await sqlite.execute({\n sql:\n `UPDATE demo_locals_ai_encrypted_chats SET data = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?`,\n args: [JSON.stringify(data), id],\n });\n\n return c.json({ success: true, id });\n});\n\n// POST /rename - Rename a chat\napp.post(\"/rename\", async (c) => {\n const body = await c.req.json();\n const { id, name } = body;\n\n if (!id || !name) {\n return c.json({ error: \"Missing id or name\" }, 400);\n }\n\n await sqlite.execute({\n sql:\n `UPDATE demo_locals_ai_encrypted_chats SET name = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?`,\n args: [name, id],\n });\n\n return c.json({ success: true, id });\n});\n\n// GET /load - Load chat by ID\napp.get(\"/load\", async (c) => {\n const id = c.req.query(\"id\");\n\n if (!id) {\n return c.json({ error: \"Missing id\" }, 400);\n }\n\n const result = await sqlite.execute({\n sql: `SELECT data FROM demo_locals_ai_encrypted_chats WHERE id = ?`,\n args: [id],\n });\n\n if (result.rows.length === 0) {\n return c.json({ data: null }, 404);\n }\n\n const data = JSON.parse(result.rows[0][0] as string);\n return c.json({ success: true, data });\n});\n\n// DELETE /delete - Delete single chat\napp.delete(\"/delete\", async (c) => {\n const id = c.req.query(\"id\");\n\n if (!id) {\n return c.json({ error: \"Missing id\" }, 400);\n }\n\n await sqlite.execute({\n sql: `DELETE FROM demo_locals_ai_encrypted_chats WHERE id = ?`,\n args: [id],\n });\n\n return c.json({ success: true });\n});\n\n// DELETE /delete-all - Delete all chats\napp.delete(\"/delete-all\", async (c) => {\n await sqlite.execute(`DELETE FROM demo_locals_ai_encrypted_chats`);\n\n return c.json({ success: true, message: \"All chats deleted\" });\n});\n\n// DELETE EVERYTHING\napp.delete(\"/reset-all\", async (c) => {\n await sqlite.execute(`DROP TABLE IF EXISTS demo_locals_ai_encrypted_chats`);\n\n return c.json({ success: true, message: \"App has been reset\"});\n});\n\n// 404 handler\napp.notFound((c) => {\n return c.json({ error: \"Not found\" }, 404);\n});\n\n// Error handler\napp.onError((err, c) => {\n console.error(\"[storage] Error:\", err);\n return c.json({ error: err.message || \"Internal server error\" }, 500);\n});\n\nexport default app.fetch;\n",[],[269,455],"94718942-e830-11f0-9fbb-42dde27851f2","demo-timer.ts","c3d08d4e-e756-11f0-9805-42dde27851f2",162,["D",1767395579492],43,"import { Hono } from \"https://esm.sh/hono@4\";\nimport { cors } from \"https://esm.sh/hono@4/cors\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// init hono app\nconst app = new Hono(); \n\n// Auto-generate API key if not set\nlet STORAGE_API_KEY = Deno.env.get(\"STORAGE_API_KEY\");\nif (!STORAGE_API_KEY) {\n console.log('error: API Key is not set in the demo-timer level');\n}\n\n// CORS middleware - allow requests from your frontend\nconst allowedOrigin = Deno.env.get(\"FRONTEND_URL\") || \"*\";\napp.use(\n \"/*\",\n cors({\n origin: allowedOrigin,\n allowMethods: [\"GET\", \"POST\", \"DELETE\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\", \"Authorization\"],\n }),\n);\n\n// Authentication middleware - protect all routes except OPTIONS\napp.use(\"/*\", async (c, next) => {\n if (c.req.method === \"OPTIONS\") {\n return await next();\n }\n\n const auth = c.req.header(\"Authorization\");\n if (!auth || auth !== `Bearer ${STORAGE_API_KEY}`) {\n return c.json({ error: \"Unauthorized - Invalid or missing API key\" }, 401);\n }\n\n await next();\n});\n\n// Routes\napp.post(\"/timer/start\", async (c) => { \n\n // create the table if it doesn't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS demo_locals_ai_timer_meta (\n key TEXT PRIMARY KEY,\n value TEXT\n )\n `)\n\n // check for active timer\n const result = await sqlite.execute({\n sql: `SELECT value FROM demo_locals_ai_timer_meta WHERE key = ?`, \n args: ['expiresAt']\n });\n\n // check the result object to see if it exist\n if(result.rows.length > 0) { \n const existingExpiry = parseInt(result.rows[0][0] as string);\n \n\n // if timer is still active, return the existing expiration\n if(Date.now() < existingExpiry) { \n return c.json({ \n status: \"timer_already_active\", \n expiresAt: existingExpiry,\n remainingMs: existingExpiry - Date.now()\n })\n }\n }\n \n\n // No Active Timer - create a new one\n const expiresAt = Date.now() + 10 * 60 * 1000; \n\n await sqlite.execute({\n sql: `INSERT OR REPLACE INTO demo_locals_ai_timer_meta (key,value) VALUES ('expiresAt', ?)`, \n args: [expiresAt.toString()]\n });\n\n // return success\n return c.json({\n status: \"timer_started\", \n expiresAt \n })\n \n});\n\nexport default app.fetch;",[],[269,464],["D",1767300062204],[284,285],[269],["D",1767300062204],["D",1789448471428],{"_130":129,"_137":133},{"_130":129,"_131":-5,"_132":133,"_18":84,"_134":135,"_136":28},{"_13":116,"_35":117,"_71":46,"_118":72,"_119":120,"_121":122,"_123":80,"_124":125,"_126":92,"_127":73,"_128":129},"ctx",{"_109":-5,"_160":513,"_514":515,"_516":517,"_518":28,"_519":28,"_520":28,"_521":158,"_522":-5,"_523":-7,"_524":-7,"_525":90,"_526":28,"_527":28,"_528":-5,"_529":28,"_530":28,"_531":28,"_532":-5},"ENV",{"_484":485,"_486":487,"_488":117,"_489":490,"_491":492,"_493":494,"_495":496,"_497":498,"_499":500,"_501":502,"_503":504,"_505":506,"_507":508,"_509":510,"_511":512},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v282