kipclip - Find it, Kip it

\n Save from Anywhere\n

\n Add bookmarks to kipclip from any website with these tools\n

\n\n {/* Bookmarklet Section */}\n

\n \n \n \n

\n Browser Bookmarklet\n

\n Works on all desktop browsers (Chrome, Firefox, Safari, Edge)\n

\n\n {/* Draggable Bookmarklet */}\n

\n Drag this button to your bookmarks bar:\n

\n e.preventDefault()}\n className=\"inline-flex items-center gap-2 px-6 py-3 rounded-lg font-bold text-white shadow-lg hover:shadow-xl transition-shadow cursor-move select-none\"\n style={{ backgroundColor: \"var(--coral)\" }}\n draggable=\"true\"\n >\n \n \n \n Kip it\n \n

\n\n {/* Instructions */}\n

\n How to install:\n

\n 1.\n \n Make sure your bookmarks bar is visible (press{\" \"}\n \n Cmd+Shift+B\n {\" \"}\n or{\" \"}\n \n Ctrl+Shift+B\n )\n \n
\n 2.\n \n Drag the \"Kip it\" button above to your bookmarks bar\n \n
\n 3.\n \n When you're on a page you want to save, click the\n bookmarklet in your bookmarks bar\n \n

\n\n {/* Alternative Methods */}\n

\n Alternative installation methods:\n

\n Method 2:{\" \"}\n Right-click the button above and select \"Bookmark This Link\"\n or \"Add to Bookmarks\"\n

\n Method 3:{\" \"}\n Copy the code and create a bookmark manually:\n

\n \n {bookmarkletCode}\n \n \n {copied ? \"Copied!\" : \"Copy\"}\n \n

\n\n {/* Mobile Section */}\n

\n \n \n \n

\n Mobile Devices\n

\n Save bookmarks from your phone or tablet\n

\n\n

\n iOS Shortcut (Recommended):\n

\n Install the \"Kip it\" shortcut to save bookmarks from Safari's\n share menu with one tap.\n

\n \n \n \n \n Get iOS Shortcut\n \n

\n After installing, \"Kip it\" will appear in your share menu when\n viewing web pages in Safari.\n

\n\n

\n Android (Chrome):\n

\n 1.\n Open kipclip.com in Chrome\n
\n 2.\n \n Tap the menu (⋮), then \"Add to Home screen\"\n \n
\n 3.\n \n When sharing URLs from other apps, kipclip will appear as a\n share target\n \n

\n\n {/* Help Section */}\n

\n Need help?{\" \"}\n \n Contact us\n \n

\n Tags\n

\n {error}\n

\n No tags yet\n

\n {tags.map(renderTag)}\n

\n Clear filters\n \n )}\n setShowAddModal(true)}\n className=\"flex-shrink-0 ml-auto p-2 hover:bg-gray-100 rounded-lg transition text-gray-600\"\n title=\"Create tag\"\n >\n \n \n \n \n

Edit Tag

(bookmark.tags || []);\n const [tagInput, setTagInput] = useState(\"\");\n const [showSuggestions, setShowSuggestions] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n // Editable fields state\n const [title, setTitle] = useState(bookmark.title || \"\");\n const [url, setUrl] = useState(bookmark.subject);\n const [description, setDescription] = useState(bookmark.description || \"\");\n\n // Filter suggestions based on input\n const suggestions = availableTags\n .filter((tag) =>\n tag.value.toLowerCase().includes(tagInput.toLowerCase()) &&\n !tags.includes(tag.value)\n )\n .slice(0, 5);\n\n function handleAddTag(tagValue: string) {\n if (tagValue && !tags.includes(tagValue)) {\n setTags([...tags, tagValue]);\n setTagInput(\"\");\n setShowSuggestions(false);\n }\n }\n\n function handleRemoveTag(tagValue: string) {\n setTags(tags.filter((t) => t !== tagValue));\n }\n\n function handleTagInputKeyDown(e: React.KeyboardEvent) {\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (suggestions.length > 0) {\n handleAddTag(suggestions[0].value);\n } else if (tagInput.trim()) {\n handleAddTag(tagInput.trim());\n }\n } else if (e.key === \"Escape\") {\n setShowSuggestions(false);\n }\n }\n\n async function handleSave() {\n setLoading(true);\n setError(null);\n\n try {\n // Find new tags that don't exist in availableTags\n const existingTagValues = new Set(availableTags.map((t) => t.value));\n const newTags = tags.filter((tag) => !existingTagValues.has(tag));\n\n // Create tag records for new tags\n for (const tagValue of newTags) {\n try {\n await fetch(\"/api/tags\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ value: tagValue }),\n });\n } catch (err) {\n console.error(`Failed to create tag record for \"${tagValue}\":`, err);\n // Continue even if tag creation fails\n }\n }\n\n // Update bookmark with all editable fields\n const rkey = bookmark.uri.split(\"/\").pop();\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n tags,\n title,\n url,\n description,\n }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to update bookmark\");\n }\n\n const data = await response.json();\n\n // Refresh tag list if new tags were created\n if (newTags.length > 0 && onTagsChanged) {\n onTagsChanged();\n }\n\n onBookmarkUpdated(data.bookmark);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n async function handleDelete() {\n if (!confirm(\"Are you sure you want to delete this bookmark?\")) {\n return;\n }\n\n setLoading(true);\n setError(null);\n\n try {\n const rkey = bookmark.uri.split(\"/\").pop();\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete bookmark\");\n }\n\n onBookmarkDeleted(bookmark.uri);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n

Edit Bookmark

\n \n ×\n \n

\n\n

\n {/* Title - Editable */}\n

\n \n Title\n \n setTitle(e.target.value)}\n placeholder=\"Enter bookmark title\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n

\n\n {/* URL - Editable */}\n

\n \n URL\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n

\n\n {/* Description - Editable */}\n

\n \n Description\n \n setDescription(e.target.value)}\n placeholder=\"Enter bookmark description (optional)\"\n rows={3}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition resize-y\"\n disabled={loading}\n />\n

\n\n {/* Tags - Editable */}\n

\n \n Tags\n \n\n {/* Current tags */}\n {tags.length > 0 && (\n

\n {tags.map((tag) => (\n \n {tag}\n handleRemoveTag(tag)}\n className=\"text-gray-500 hover:text-red-600 ml-1\"\n disabled={loading}\n >\n ×\n \n \n ))}\n

\n )}\n\n {/* Add tag input */}\n

\n {\n setTagInput(e.target.value);\n setShowSuggestions(true);\n }}\n onKeyDown={handleTagInputKeyDown}\n onFocus={() => setShowSuggestions(true)}\n onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}\n placeholder=\"Add tags...\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n\n {/* Suggestions dropdown */}\n {showSuggestions && suggestions.length > 0 && (\n

\n {suggestions.map((tag) => (\n handleAddTag(tag.value)}\n className=\"w-full text-left px-4 py-2 hover:bg-gray-50 text-gray-700 text-sm\"\n >\n {tag.value}\n \n ))}\n

\n )}\n

\n\n

\n Type to search existing tags or press Enter to create a new one\n

\n\n {/* Created date */}\n

\n Created {new Date(bookmark.createdAt).toLocaleDateString()} at{\" \"}\n {new Date(bookmark.createdAt).toLocaleTimeString()}\n

\n\n {error && (\n

\n {error}\n

\n )}\n

\n\n {/* Footer with action buttons */}\n

\n \n Cancel\n \n \n {loading\n ? (\n \n

\n Saving...\n \n )\n : (\n \"Save Changes\"\n )}\n \n

\n\n \n Delete Bookmark\n \n

\n );\n}\n",[247,169,133],"b11e7f78-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport { AddBookmark } from \"./AddBookmark.tsx\";\nimport { EditBookmark } from \"./EditBookmark.tsx\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\nexport function BookmarkList() {\n const {\n filteredBookmarks: bookmarks,\n tags: availableTags,\n addBookmark,\n updateBookmark,\n deleteBookmark,\n loadBookmarks: loadBookmarksFromContext,\n loadTags,\n } = useApp();\n\n const [loading, setLoading] = useState(true);\n const [showAddModal, setShowAddModal] = useState(false);\n const [editingBookmark, setEditingBookmark] = useState(null);\n const [error, setError] = useState(null);\n const [dragOverBookmark, setDragOverBookmark] = useState(null);\n\n // Pull-to-refresh state\n const [pullDistance, setPullDistance] = useState(0);\n const [isPulling, setIsPulling] = useState(false);\n const [isRefreshing, setIsRefreshing] = useState(false);\n const touchStartY = useRef(0);\n\n useEffect(() => {\n loadBookmarks();\n }, []);\n\n // Pull-to-refresh touch handlers\n useEffect(() => {\n function isAtTop(): boolean {\n // Check both window scroll and main element scroll for PWA compatibility\n const mainElement = document.querySelector(\"main\");\n const windowAtTop = globalThis.scrollY === 0;\n const mainAtTop = !mainElement || mainElement.scrollTop === 0;\n return windowAtTop && mainAtTop;\n }\n\n function handleTouchStart(e: TouchEvent) {\n // Only start pull if scrolled to top\n if (isAtTop()) {\n touchStartY.current = e.touches[0].clientY;\n setIsPulling(true);\n }\n }\n\n function handleTouchMove(e: TouchEvent) {\n if (!isPulling || isRefreshing) return;\n\n const touchY = e.touches[0].clientY;\n const distance = touchY - touchStartY.current;\n\n // Only pull down, and limit distance\n if (distance > 0 && isAtTop()) {\n e.preventDefault();\n setPullDistance(Math.min(distance, 120));\n }\n }\n\n function handleTouchEnd() {\n if (!isPulling) return;\n\n setIsPulling(false);\n\n // Trigger refresh if pulled far enough\n if (pullDistance > 80) {\n setIsRefreshing(true);\n loadBookmarks().finally(() => {\n setIsRefreshing(false);\n setPullDistance(0);\n });\n } else {\n setPullDistance(0);\n }\n }\n\n // Listen on document level to catch all touch events\n document.addEventListener(\"touchstart\", handleTouchStart, {\n passive: true,\n });\n document.addEventListener(\"touchmove\", handleTouchMove, {\n passive: false,\n });\n document.addEventListener(\"touchend\", handleTouchEnd);\n\n return () => {\n document.removeEventListener(\"touchstart\", handleTouchStart);\n document.removeEventListener(\"touchmove\", handleTouchMove);\n document.removeEventListener(\"touchend\", handleTouchEnd);\n };\n }, [isPulling, pullDistance, isRefreshing]);\n\n async function loadBookmarks() {\n setLoading(true);\n setError(null);\n try {\n await loadBookmarksFromContext();\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n\n function handleBookmarkUpdated(bookmark: any) {\n updateBookmark(bookmark);\n setEditingBookmark(null);\n }\n\n function handleBookmarkDeleted(uri: string) {\n deleteBookmark(uri);\n setEditingBookmark(null);\n }\n\n function handleBookmarkAdded(bookmark: any) {\n addBookmark(bookmark);\n setShowAddModal(false);\n }\n\n async function handleDropTag(bookmarkUri: string, tagValue: string) {\n try {\n // Extract rkey from URI\n const rkey = bookmarkUri.split(\"/\").pop();\n if (!rkey) {\n throw new Error(\"Invalid bookmark URI\");\n }\n\n // Find the bookmark\n const bookmark = bookmarks.find((b) => b.uri === bookmarkUri);\n if (!bookmark) {\n throw new Error(\"Bookmark not found\");\n }\n\n // Check if tag already exists\n if (bookmark.tags?.includes(tagValue)) {\n return; // Skip if already tagged\n }\n\n // Add tag to existing tags\n const newTags = [...(bookmark.tags || []), tagValue];\n\n // Update via API\n const response = await fetch(`/api/bookmarks/${rkey}`, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ tags: newTags }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to update bookmark tags\");\n }\n\n const data = await response.json();\n\n // Update context state\n updateBookmark(data.bookmark);\n } catch (err: any) {\n console.error(\"Failed to add tag to bookmark:\", err);\n alert(`Failed to add tag: ${err.message}`);\n }\n }\n\n function handleVisit(e: React.MouseEvent, url: string) {\n e.stopPropagation();\n globalThis.open(url, \"_blank\", \"noopener,noreferrer\");\n }\n\n async function handleShare(e: React.MouseEvent, bookmark: any) {\n e.stopPropagation();\n\n const shareData = {\n title: bookmark.title || new URL(bookmark.subject).hostname,\n text: bookmark.description\n ? `${\n bookmark.title || new URL(bookmark.subject).hostname\n }\\n\\n${bookmark.description}`\n : bookmark.title || new URL(bookmark.subject).hostname,\n url: bookmark.subject,\n };\n\n // Check if Web Share API is supported\n if (navigator.share) {\n try {\n await navigator.share(shareData);\n } catch (err: any) {\n // User cancelled or share failed\n if (err.name !== \"AbortError\") {\n console.error(\"Share failed:\", err);\n }\n }\n } else {\n // Fallback: copy to clipboard\n try {\n const textToCopy =\n `${shareData.title}\\n${shareData.text}\\n${shareData.url}`;\n await navigator.clipboard.writeText(textToCopy);\n alert(\"Link copied to clipboard!\");\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n alert(\"Sharing not supported on this browser\");\n }\n }\n }\n\n if (loading) {\n return (\n

\n );\n }\n\n if (error) {\n return (\n

Error: {error}

\n \n

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

\n {/* Pull-to-refresh indicator */}\n 0 ? \"flex\" : \"none\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--coral)\",\n color: \"white\",\n zIndex: 40,\n transition: isPulling ? \"none\" : \"height 0.3s ease-out\",\n }}\n >\n {isRefreshing\n ? (\n \n

\n )\n : (\n \n {pullDistance > 80 ? \"↓\" : \"↑\"}\n \n )}\n \n\n

\n {/* Desktop: side-by-side layout */}\n

\n Your Bookmarks\n \n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n \n

\n setShowAddModal(true)}\n className=\"btn-primary\"\n >\n + Add Bookmark\n \n

\n\n {/* Mobile: stacked layout */}\n

\n Your Bookmarks\n

\n setShowAddModal(true)}\n className=\"px-3 py-2 text-sm rounded-md\"\n style={{ backgroundColor: \"var(--coral)\", color: \"white\" }}\n >\n + Add\n \n

\n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n

\n\n {bookmarks.length === 0\n ? (\n

\n 📚\n

\n No bookmarks yet\n

\n Start collecting your favorite links!\n

\n setShowAddModal(true)}\n className=\"btn-primary\"\n >\n Add Your First Bookmark\n \n

\n )\n : (\n

\n {bookmarks.map((bookmark) => (\n setEditingBookmark(bookmark)}\n onDragOver={(e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"copy\";\n }}\n onDragEnter={(e) => {\n e.preventDefault();\n setDragOverBookmark(bookmark.uri);\n }}\n onDragLeave={(e) => {\n e.preventDefault();\n // Only clear if we're leaving the card itself, not a child\n if (e.currentTarget === e.target) {\n setDragOverBookmark(null);\n }\n }}\n onDrop={(e) => {\n e.preventDefault();\n setDragOverBookmark(null);\n const tagValue = e.dataTransfer.getData(\"text/plain\");\n if (tagValue) {\n handleDropTag(bookmark.uri, tagValue);\n }\n }}\n >\n

\n {bookmark.title || new URL(bookmark.subject).hostname}\n

\n {bookmark.subject}\n

\n\n

\n {new Date(bookmark.createdAt).toLocaleDateString()}\n

\n\n {bookmark.tags && bookmark.tags.length > 0 && (\n

\n {bookmark.tags.map((tag, i) => (\n \n {tag}\n \n ))}\n

\n )}\n\n {/* Desktop: hover-reveal buttons (bottom-right) */}\n

\n handleVisit(e, bookmark.subject)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n \n \n \n \n handleShare(e, bookmark)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n \n \n \n \n

\n\n {/* Mobile: always-visible buttons (bottom-right) */}\n

\n handleVisit(e, bookmark.subject)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n \n \n \n \n handleShare(e, bookmark)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n \n \n \n \n

\n ))}\n \n )}\n\n {showAddModal && (\n setShowAddModal(false)}\n onBookmarkAdded={handleBookmarkAdded}\n />\n )}\n\n {editingBookmark && (\n setEditingBookmark(null)}\n onBookmarkUpdated={handleBookmarkUpdated}\n onBookmarkDeleted={handleBookmarkDeleted}\n onTagsChanged={loadTags}\n />\n )}\n \n );\n}\n",[247,169,140],"b11e7b68-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useEffect, useState } from \"https://esm.sh/react\";\nimport { Login } from \"./Login.tsx\";\nimport { BookmarkList } from \"./BookmarkList.tsx\";\nimport { UserMenu } from \"./UserMenu.tsx\";\nimport { TagSidebar } from \"./TagSidebar.tsx\";\nimport { Tools } from \"./Tools.tsx\";\nimport { About } from \"./About.tsx\";\nimport { Save } from \"./Save.tsx\";\nimport { useApp } from \"../context/AppContext.tsx\";\n\nexport function App() {\n const { session, setSession } = useApp();\n const [loading, setLoading] = useState(true);\n const [currentPath, setCurrentPath] = useState(globalThis.location.pathname);\n\n useEffect(() => {\n checkSession();\n\n // Listen for popstate events to update route\n const handlePopState = () => {\n setCurrentPath(globalThis.location.pathname);\n };\n globalThis.addEventListener(\"popstate\", handlePopState);\n return () => globalThis.removeEventListener(\"popstate\", handlePopState);\n }, []);\n\n async function checkSession() {\n try {\n const response = await fetch(\"/api/auth/session\");\n if (response.ok) {\n const data = await response.json();\n setSession({\n did: data.did,\n handle: data.handle,\n });\n }\n } catch (error) {\n console.error(\"Failed to check session:\", error);\n } finally {\n setLoading(false);\n }\n }\n\n async function handleLogout() {\n try {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n setSession(null);\n } catch (error) {\n console.error(\"Failed to logout:\", error);\n }\n }\n\n // Handle special routes that don't require session check\n if (currentPath === \"/tools\") {\n return ;\n }\n\n if (currentPath === \"/about\") {\n return ;\n }\n\n if (currentPath === \"/save\") {\n return ;\n }\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!session) {\n return ;\n }\n\n return (\n

\n \n \n kipclip\n \n

\n \n

\n\n

\n \n

\n );\n}\n",[247,169,147],"b11e77f8-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedTag } from \"../../shared/types.ts\";\n\ninterface AddTagProps {\n onClose: () => void;\n onTagAdded: (tag: EnrichedTag) => void;\n}\n\nexport function AddTag({ onClose, onTagAdded }: AddTagProps) {\n const [value, setValue] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!value.trim()) return;\n\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/tags\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ value: value.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to add tag\");\n }\n\n const data = await response.json();\n onTagAdded(data.tag);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n

Create Tag

\n \n ×\n \n

\n\n

\n \n Tag Name\n \n setValue(e.target.value)}\n placeholder=\"e.g., work, personal, reading\"\n maxLength={64}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n autoFocus\n required\n />\n

\n {value.length}/64 characters\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Cancel\n \n \n {loading\n ? (\n \n

\n Creating...\n \n )\n : (\n \"Create Tag\"\n )}\n \n

\n );\n}\n",[247,169,154],"b11e749c-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { useState } from \"https://esm.sh/react\";\nimport type { EnrichedBookmark } from \"../../shared/types.ts\";\n\ninterface AddBookmarkProps {\n onClose: () => void;\n onBookmarkAdded: (bookmark: EnrichedBookmark) => void;\n}\n\nexport function AddBookmark({ onClose, onBookmarkAdded }: AddBookmarkProps) {\n const [url, setUrl] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!url.trim()) return;\n\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/bookmarks\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ url: url.trim() }),\n });\n\n if (!response.ok) {\n const data = await response.json();\n throw new Error(data.error || \"Failed to add bookmark\");\n }\n\n const data = await response.json();\n onBookmarkAdded(data.bookmark);\n } catch (err: any) {\n setError(err.message);\n setLoading(false);\n }\n }\n\n return (\n

Add Bookmark

\n \n ×\n \n

\n\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Cancel\n \n \n {loading\n ? (\n \n

\n Adding...\n \n )\n : (\n \"Add Bookmark\"\n )}\n \n

\n\n

\n The page title will be automatically fetched and saved with your\n bookmark\n

\n );\n}\n",[247,169,161],"b11e706e-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\n\nexport function About() {\n return (\n

\n \n \n \n kipclip\n \n \n \n Back to Bookmarks\n \n

\n\n

\n About kipclip\n

\n kipclip is a simple, open bookmarks app for the AT Protocol. Save\n links you care about, organize them with tags, and browse them from\n any device.\n

\n\n

How it works

\n Your bookmarks are saved as AT Protocol records in your own PDS\n (Personal Data Server) under your account.\n
\n kipclip uses a community lexicon (schema) so other AT Protocol\n apps can read these records too.\n
\n The app UI is a lightweight web client; the data lives with you in\n your PDS.\n

\n\n

\n Important note on privacy\n

\n AT Protocol records are public by default. That means bookmarks you\n save with kipclip are public and discoverable. Please don’t save\n anything sensitive or private.\n

\n\n

Links

\n \n \n \n \n GitHub Repository\n \n \n \n Support this project\n \n \n 🦋\n made bij tijs.org\n \n

\n );\n}\n",[247,169,167],"pulls","branches","forks","envVars",{"_162":316,"_317":26},"connections",{"_162":26,"_315":26},"unfilledCount",2,"emptyCount",{"_33":633,"_13":632,"_83":627,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":634,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":635,"_17":636},{"_33":624,"_13":625,"_83":626,"_43":627,"_35":36,"_241":40,"_242":24,"_37":628,"_39":26,"_86":21,"_244":629,"_88":30,"_245":-5,"_371":630,"_17":631},{"_33":620,"_13":552,"_83":545,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":621,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":622,"_17":623},{"_33":616,"_13":601,"_83":596,"_43":545,"_35":36,"_241":40,"_242":24,"_37":617,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":618,"_17":619},{"_33":609,"_13":610,"_83":611,"_43":596,"_35":36,"_241":40,"_242":24,"_37":612,"_39":26,"_86":87,"_244":613,"_88":30,"_245":-5,"_371":614,"_17":615},{"_33":602,"_13":603,"_83":604,"_43":596,"_35":36,"_241":40,"_242":24,"_37":605,"_39":26,"_86":87,"_244":606,"_88":30,"_245":-5,"_371":607,"_17":608},{"_33":593,"_13":594,"_83":595,"_43":596,"_35":36,"_241":40,"_242":24,"_37":597,"_39":26,"_86":87,"_244":598,"_88":30,"_245":-5,"_371":599,"_17":600},{"_33":589,"_13":574,"_83":569,"_43":545,"_35":36,"_241":40,"_242":24,"_37":590,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":591,"_17":592},{"_33":582,"_13":583,"_83":584,"_43":569,"_35":36,"_241":40,"_242":24,"_37":585,"_39":26,"_86":87,"_244":586,"_88":30,"_245":-5,"_371":587,"_17":588},{"_33":575,"_13":576,"_83":577,"_43":569,"_35":36,"_241":40,"_242":24,"_37":578,"_39":26,"_86":87,"_244":579,"_88":30,"_245":-5,"_371":580,"_17":581},{"_33":566,"_13":567,"_83":568,"_43":569,"_35":36,"_241":40,"_242":24,"_37":570,"_39":26,"_86":87,"_244":571,"_88":30,"_245":-5,"_371":572,"_17":573},{"_33":562,"_13":561,"_83":556,"_43":545,"_35":36,"_241":40,"_242":24,"_37":563,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":564,"_17":565},{"_33":553,"_13":554,"_83":555,"_43":556,"_35":36,"_241":40,"_242":24,"_37":557,"_39":26,"_86":87,"_244":558,"_88":30,"_245":-5,"_371":559,"_17":560},{"_33":543,"_13":544,"_83":181,"_43":545,"_35":36,"_241":40,"_242":24,"_37":546,"_39":26,"_86":547,"_244":548,"_88":30,"_245":549,"_371":550,"_17":551},{"_33":539,"_13":247,"_83":240,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":540,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":541,"_17":542},{"_33":239,"_13":169,"_83":168,"_43":240,"_35":36,"_241":40,"_242":24,"_37":536,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":537,"_17":538},{"_33":304,"_13":167,"_83":166,"_43":168,"_35":36,"_241":40,"_242":24,"_37":533,"_39":26,"_86":87,"_244":306,"_88":30,"_245":-5,"_371":534,"_17":535},{"_33":300,"_13":161,"_83":160,"_43":168,"_35":36,"_241":40,"_242":24,"_37":530,"_39":26,"_86":87,"_244":302,"_88":30,"_245":-5,"_371":531,"_17":532},{"_33":296,"_13":154,"_83":153,"_43":168,"_35":36,"_241":40,"_242":24,"_37":527,"_39":26,"_86":87,"_244":298,"_88":30,"_245":-5,"_371":528,"_17":529},{"_33":292,"_13":147,"_83":146,"_43":168,"_35":36,"_241":40,"_242":24,"_37":524,"_39":26,"_86":87,"_244":294,"_88":30,"_245":-5,"_371":525,"_17":526},{"_33":288,"_13":140,"_83":139,"_43":168,"_35":36,"_241":40,"_242":24,"_37":521,"_39":26,"_86":87,"_244":290,"_88":30,"_245":-5,"_371":522,"_17":523},{"_33":284,"_13":133,"_83":132,"_43":168,"_35":36,"_241":40,"_242":24,"_37":518,"_39":26,"_86":87,"_244":286,"_88":30,"_245":-5,"_371":519,"_17":520},{"_33":280,"_13":126,"_83":125,"_43":168,"_35":36,"_241":40,"_242":24,"_37":515,"_39":26,"_86":87,"_244":282,"_88":30,"_245":-5,"_371":516,"_17":517},{"_33":276,"_13":119,"_83":118,"_43":168,"_35":36,"_241":40,"_242":24,"_37":512,"_39":26,"_86":87,"_244":278,"_88":30,"_245":-5,"_371":513,"_17":514},{"_33":272,"_13":112,"_83":111,"_43":168,"_35":36,"_241":40,"_242":24,"_37":509,"_39":26,"_86":87,"_244":274,"_88":30,"_245":-5,"_371":510,"_17":511},{"_33":268,"_13":105,"_83":104,"_43":168,"_35":36,"_241":40,"_242":24,"_37":506,"_39":26,"_86":87,"_244":270,"_88":30,"_245":-5,"_371":507,"_17":508},{"_33":264,"_13":98,"_83":97,"_43":168,"_35":36,"_241":40,"_242":24,"_37":503,"_39":26,"_86":87,"_244":266,"_88":30,"_245":-5,"_371":504,"_17":505},{"_33":260,"_13":85,"_83":84,"_43":168,"_35":36,"_241":40,"_242":24,"_37":500,"_39":26,"_86":87,"_244":262,"_88":30,"_245":-5,"_371":501,"_17":502},{"_33":496,"_13":495,"_83":490,"_43":240,"_35":36,"_241":40,"_242":24,"_37":497,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":498,"_17":499},{"_33":487,"_13":488,"_83":489,"_43":490,"_35":36,"_241":40,"_242":24,"_37":491,"_39":26,"_86":87,"_244":492,"_88":30,"_245":-5,"_371":493,"_17":494},{"_33":480,"_13":481,"_83":482,"_43":240,"_35":36,"_241":40,"_242":24,"_37":483,"_39":26,"_86":21,"_244":484,"_88":30,"_245":-5,"_371":485,"_17":486},{"_33":473,"_13":474,"_83":475,"_43":240,"_35":36,"_241":40,"_242":24,"_37":476,"_39":26,"_86":87,"_244":477,"_88":30,"_245":-5,"_371":478,"_17":479},{"_33":466,"_13":467,"_83":468,"_43":240,"_35":36,"_241":40,"_242":24,"_37":469,"_39":26,"_86":21,"_244":470,"_88":30,"_245":-5,"_371":471,"_17":472},{"_33":462,"_13":449,"_83":458,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":463,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":464,"_17":465},{"_33":457,"_13":450,"_83":453,"_43":458,"_35":36,"_241":40,"_242":24,"_37":459,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":460,"_17":461},{"_33":452,"_13":451,"_83":444,"_43":453,"_35":36,"_241":40,"_242":24,"_37":454,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":455,"_17":456},{"_33":441,"_13":442,"_83":443,"_43":444,"_35":36,"_241":40,"_242":24,"_37":445,"_39":26,"_86":21,"_244":446,"_88":30,"_245":-5,"_371":447,"_17":448},{"_33":437,"_13":430,"_83":433,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":438,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":439,"_17":440},{"_33":432,"_13":431,"_83":425,"_43":433,"_35":36,"_241":40,"_242":24,"_37":434,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":435,"_17":436},{"_33":422,"_13":423,"_83":424,"_43":425,"_35":36,"_241":40,"_242":24,"_37":426,"_39":26,"_86":21,"_244":427,"_88":30,"_245":-5,"_371":428,"_17":429},{"_33":418,"_13":417,"_83":412,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":419,"_39":26,"_86":170,"_244":-5,"_88":30,"_245":-5,"_371":420,"_17":421},{"_33":409,"_13":410,"_83":411,"_43":412,"_35":36,"_241":40,"_242":24,"_37":413,"_39":26,"_86":87,"_244":414,"_88":30,"_245":-5,"_371":415,"_17":416},{"_33":402,"_13":403,"_83":404,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":405,"_39":26,"_86":21,"_244":406,"_88":30,"_245":-5,"_371":407,"_17":408},{"_33":395,"_13":396,"_83":397,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":398,"_39":26,"_86":21,"_244":399,"_88":30,"_245":-5,"_371":400,"_17":401},{"_33":388,"_13":389,"_83":390,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":391,"_39":26,"_86":21,"_244":392,"_88":30,"_245":-5,"_371":393,"_17":394},{"_33":381,"_13":382,"_83":383,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":384,"_39":26,"_86":21,"_244":385,"_88":30,"_245":-5,"_371":386,"_17":387},{"_33":374,"_13":375,"_83":376,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":377,"_39":26,"_86":21,"_244":378,"_88":30,"_245":-5,"_371":379,"_17":380},{"_33":366,"_13":367,"_83":368,"_43":-5,"_35":36,"_241":40,"_242":24,"_37":369,"_39":26,"_86":21,"_244":370,"_88":30,"_245":-5,"_371":372,"_17":373},"b11f10be-b1c1-11f0-9e9a-0224a6c84d84","deno.json","019a1c40-a7c9-77ff-b434-a71e03fab54f",["D",1761410590580],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react\",\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-import-prefix\"\n ]\n }\n },\n \"include\": [\n \"backend/\",\n \"frontend/\",\n \"shared/\"\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 \"tasks\": {\n \"quality\": \"deno fmt && deno lint\",\n \"deploy\": \"deno task quality && vt push\",\n \"check\": \"deno check --allow-import backend/index.ts frontend/index.tsx\",\n \"test\": \"deno test\",\n \"fmt\": \"deno fmt\",\n \"lint\": \"deno lint\"\n }\n}\n","children",[],[367],"b11f0d58-b1c1-11f0-9e9a-0224a6c84d84","README.md","019a1c40-a7c9-77ff-b434-a07f638db949",["D",1761410590580],"# kipclip\n\n[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/tijsteulings/tip)\n\nFind it, Kip it. Save and organize bookmarks using the AT Protocol community\nbookmark lexicon.\n\n## Features\n\n- AT Protocol OAuth authentication\n- Save bookmarks to your personal data server (PDS)\n- Automatic URL enrichment (title extraction)\n- View and manage your bookmarks\n- Uses\n [community.lexicon.bookmarks.bookmark](https://github.com/lexicon-community/lexicon/blob/main/community/lexicon/bookmarks/bookmark.json)\n schema\n\n## Architecture\n\n- **Frontend**: React + TypeScript + Tailwind CSS\n- **Backend**: Hono + AT Protocol OAuth\n- **Database**: Val.town SQLite for OAuth session storage\n- **Bookmark Storage**: User's PDS (not in appview database)\n\n## Project Structure\n\n```\nkipclip-appview/\n├── backend/\n│ ├── database/ # Drizzle schema & migrations\n│ ├── routes/ # API & static routes\n│ ├── services/ # URL enrichment\n│ └── index.ts # Main Hono app\n├── frontend/\n│ ├── components/ # React components\n│ ├── index.html # Bootstrap\n│ ├── index.tsx # React entry\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Setup\n\n### Prerequisites\n\n- Deno installed\n- Val Town account\n\n### Environment Variables\n\nCreate these in your Val.town environment:\n\n```bash\nBASE_URL=https://your-val.val.town\nCOOKIE_SECRET=your-random-secret-string-at-least-32-chars\n```\n\nVal.town provides SQLite automatically. The `COOKIE_SECRET` is required for\nencrypting OAuth session cookies.\n\n### Local Development\n\n```bash\n# Type check\ndeno task check\n\n# Run quality checks (format, lint, type check, test)\ndeno task quality\n\n# Deploy to Val.town\ndeno task deploy\n```\n\n## Mascot\n\nThe kipclip mascot is a friendly chicken carrying a bookmark bag. Replace the\nplaceholder image URL in `frontend/components/Login.tsx` with your\nCloudinary-hosted mascot image.\n\n## OAuth Flow\n\n1. User enters their AT Protocol handle\n2. App redirects to `/login?handle=user.bsky.social`\n3. OAuth package handles authentication with user's PDS\n4. Session stored in Val.town SQLite (30 days)\n5. User can now view/add bookmarks\n\n## API Endpoints\n\n- `GET /api/bookmarks` - List user's bookmarks from PDS\n- `POST /api/bookmarks` - Add new bookmark with URL enrichment\n- `DELETE /api/bookmarks/:rkey` - Delete a bookmark\n- `/api/auth/session` - Check current session\n- `/api/auth/logout` - Logout\n- `/login` - OAuth login flow\n- `/oauth/callback` - OAuth callback\n\n## Bookmark Schema\n\nBookmarks are stored using the community lexicon:\n\n```typescript\n{\n subject: string; // URL being bookmarked\n createdAt: string; // ISO 8601 datetime\n tags?: string[]; // Optional tags\n}\n```\n\nThe app enriches bookmarks with page titles by fetching and parsing HTML\nmetadata.\n\n## Development Guidelines\n\n- Keep code files under 500 lines\n- Write testable code with dependency injection\n- Test files go next to code: `service.ts` → `service.test.ts`\n- Follow SOLID principles\n- Use TypeScript for all code\n\n## License\n\nMIT\n",[],[375],"b11f0024-b1c1-11f0-9e9a-0224a6c84d84","CLAUDE.md","019a1c40-a7c9-77ff-b434-9e4485880502",["D",1761410590580],"# Val Town Development Guide\n\nYou are an advanced assistant that helps programmers code on Val Town.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Plan large refactors or big features before you start coding\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- Always prefer small, single purpose, single responsibility components over\n large files that do many things\n- If a section of code is getting too complex, consider refactoring it into\n subcomponents\n- **Frontend = React, Backend = Hono, Database = Drizzle** - This is the way\n- **Write testable code** - Use dependency injection, follow SOLID principles,\n mock external services, write fakes instead of testing dependencies\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\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n- **Every function must be testable** - Accept dependencies as parameters,\n return predictable outputs\n- **Write tests alongside code** - Place `.test.ts` files next to the code they\n test\n\n## Project Structure\n\n### Project Organization\n\nWhen organizing a Val Town project, consider separating deployable code from\nlocal resources:\n\n```text\n├── your-project-name/ # Deployable directory (what Val Town will see)\n│ ├── backend/\n│ │ ├── database/\n│ │ │ ├── schema.ts # All table definitions, relations, and types\n│ │ │ ├── db.ts # Database connection and Drizzle instance \n│ │ │ ├── migrations.ts # Schema migration logic\n│ │ │ └── queries.ts # Reusable query functions\n│ │ ├── routes/ # Route modules\n│ │ │ ├── [route].ts\n│ │ │ └── static.ts # Static file serving\n│ │ └── index.ts # Main entry point\n│ ├── frontend/\n│ │ ├── components/\n│ │ │ ├── App.tsx\n│ │ │ └── [Component].tsx\n│ │ ├── index.html # Minimal HTML bootstrap file\n│ │ ├── index.tsx # React entry point with createRoot\n│ │ └── style.css # Global styles (prefer Tailwind classes)\n│ ├── shared/\n│ │ └── utils.ts # Shared types and functions\n│ └── deno.json # Deno configuration (MUST be in the deployed directory)\n├── resources/ # Local-only resources (images, assets)\n├── docs/ # Local-only documentation\n├── README.md # Project documentation\n└── AGENTS.md # AI assistant instructions\n```\n\n**Key Points:**\n\n- Only the contents of your main project directory will be deployed to Val Town\n- The `deno.json` file MUST be inside the deployment directory\n- Keep non-deployable resources outside the deployment directory\n\n### Deno Configuration\n\nPlace your `deno.json` in the deployable directory with proper structure:\n\n```json\n{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react\",\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-import-prefix\"\n ]\n }\n },\n \"include\": [\n \"backend/\",\n \"frontend/\",\n \"shared/\"\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 \"tasks\": {\n \"quality\": \"deno fmt && deno lint\",\n \"deploy\": \"deno task quality && vt push\",\n \"check\": \"deno check --allow-import backend/index.ts\",\n \"test\": \"deno test --allow-all tests/\",\n \"fmt\": \"deno fmt\",\n \"lint\": \"deno lint\"\n }\n}\n```\n\n**Key Points:**\n\n- Use `\"include\"` at root level to specify which directories contain TypeScript\n files\n- Don't use glob patterns in lint/check commands - they fail silently\n- Type checking requires `--allow-import` flag for remote dependencies\n- Keep quality checks minimal for deployment (fmt + lint)\n- Separate `check` task for local type checking\n- Exclude `no-import-prefix` since Val.town uses URL imports exclusively\n\n## Frontend Architecture\n\n**Always use React** for Val Town frontends. Here's the opinionated approach:\n\n### Frontend Core Principles\n\n- **HTML is just a bootstrap file** - Keep it minimal, only load React\n- **No HTML fallbacks** - JavaScript is required, period\n- **Single Page Application** - Let React handle all rendering\n- **TypeScript everywhere** - Use `.tsx` files for all components\n- **Tailwind for styling** - Use the CDN version:\n ``\n\n### React Configuration\n\n- **Use latest versions** - Import React without version constraints\n- **JSX pragma required** - Start every `.tsx` file with\n `/** @jsxImportSource https://esm.sh/react */`\n- **No explicit React import needed** - With `react-jsx` transform, only import\n hooks/specific APIs\n- **No build step** - Import directly from ESM URLs\n- **Client-side only** - No SSR, inject initial data if needed\n- **Guard browser code** - Wrap DOM access with\n `typeof document !== \"undefined\"` to prevent server-side execution\n\n## Backend Architecture\n\n### Hono Framework\n\n- Main entry point should be `backend/index.ts`\n- Export with `export default app.fetch`\n- Do NOT use Hono's serveStatic middleware\n- Use Val Town's `serveFile` utility for static assets\n- Re-throw errors in error handler for full stack traces\n\n### API Design\n\n- Create RESTful routes for CRUD operations\n- Use TypeScript interfaces for request/response types\n- Bootstrap initial data by reading and modifying HTML\n- Let errors bubble up with full context\n\n## Database with Drizzle ORM\n\nVal Town uses Turso (SQLite) under the hood. Use Drizzle ORM for type safety.\n\n### Key Concepts\n\n- **Schema-first approach** - Define all tables in `schema.ts`\n- **Single database instance** - Create one connection in `db.ts`\n- **Type-safe queries** - Use Drizzle's query builder\n- **Migrations** - Track schema changes with versioned migrations\n\n### Database Best Practices\n\n- Use singular table names (e.g., `user` not `users`)\n- Define relations for efficient querying\n- Add indexes** on foreign keys and frequently queried columns\n- Use transactions** for multi-table operations\n- Handle SQLite limitations - No complex ALTER TABLE\n- Limited ALTER TABLE support\n- Change table names instead of altering\n- Always run migrations before queries\n\n### Common Patterns\n\n- **Simple CRUD**: Use Drizzle's select, insert, update, delete\n- **Relations**: Use `db.query` for nested data\n- **Complex joins**: Use select with join methods\n- **Raw SQL**: Use `db.run(sql`)`` when needed\n\n## Testing Strategy\n\n### Testing Core Principles\n\n- Write tests first or ensure code is testable\n- Place test files next to code: `user.ts` → `user.test.ts`\n- Mock all external dependencies\n- Test behavior, not implementation\n\n### Writing Testable Code\n\n```typescript\n// BAD: Hard to test\nexport async function getUser(id: string) {\n const user = await db.select().from(userTable).where(eq(userTable.id, id));\n return user[0];\n}\n\n// GOOD: Testable with dependency injection\nexport async function getUser(id: string, dbProvider = db) {\n const user = await dbProvider.select().from(userTable).where(\n eq(userTable.id, id),\n );\n return user[0];\n}\n```\n\n### SOLID Principles\n\n1. **Single Responsibility** - Each function does one thing\n2. **Open/Closed** - Use composition over modification\n3. **Liskov Substitution** - Interfaces should be substitutable\n4. **Interface Segregation** - Small, focused interfaces\n5. **Dependency Inversion** - Depend on abstractions\n\n### Running Tests\n\n```bash\ndeno test # Run all tests\ndeno test user.test.ts # Run specific test\ndeno task quality # Includes tests in quality check\n```\n\n## TypeScript Configuration\n\n### Type Checking\n\n- Use `deno check` before deployment\n- Add explicit types for function parameters and returns\n- Define interfaces for all data structures\n- External libraries from esm.sh include types automatically\n\n### TypesSript Best Practices\n\n- Leverage TypeScript's strict mode\n- Type API responses for client-side safety\n- Use type-only imports: `import type { SomeType }`\n- Ignore Bun-specific errors if they appear\n\n## Dependency Management\n\n### Import Strategy\n\n- **Use latest versions** - No version pinning needed\n- **Import from esm.sh**: `https://esm.sh/package`\n- **Trust CDN resolution** - esm.sh handles compatibility\n- **Central deps file** - Use `deps.ts` for complex projects\n\n### Common Imports\n\n```typescript\n// React (with pragma)\n/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\n\n// Drizzle ORM\nimport { drizzle } from \"https://esm.sh/drizzle-orm/libsql\";\n\n// Hono\nimport { Hono } from \"https://esm.sh/hono\";\n```\n\n## Development Workflow\n\n### Task Commands\n\n1. **During development**: `deno task check` - Catch type errors\n2. **Before committing**: `deno task quality` - Format, lint, type check, test\n3. **To deploy**: `deno task deploy` - Quality checks then deploy\n\n### Deployment Process\n\n```bash\ndeno task deploy # Runs quality checks first\n```\n\n- Fix any issues before deployment succeeds\n- Environment variables managed in Val Town interface\n- Only deployment directory contents are uploaded\n\n## Val Town APIs\n\n### Triggers\n\n1. **HTTP Trigger** - Web APIs and endpoints\n2. **Cron Triggers** - Scheduled tasks (1 min minimum on pro)\n3. **Email Triggers** - Process incoming emails\n\n### Standard Libraries\n\n- **Blob Storage**: `import { blob } from \"https://esm.town/v/std/blob\"`\n- **SQLite**: Use Drizzle ORM instead of raw SQL\n- **OpenAI**: `import { OpenAI } from \"https://esm.town/v/std/openai\"`\n- **Email**: `import { email } from \"https://esm.town/v/std/email\"`\n\n### Utility Functions\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\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## Platform Specifics\n\n### Important Limitations\n\n- **Redirects**: Use\n `new Response(null, { status: 302, headers: { Location: \"/path\" }})`\n- **No binary files** - Text files only\n- **No Deno KV** - Use SQLite instead\n- **No browser APIs** - No alert(), prompt(), confirm()\n- **Automatic CORS** - Don't import CORS middleware\n\n## Common Gotchas\n\n### Environment\n\n- Val Town runs on Deno, not Node.js\n- Shared code can't use Deno-specific APIs\n- Use esm.sh for browser/server compatibility\n\n### Hono Issues\n\n- NEVER import serveStatic middleware\n- NEVER import CORS middleware\n- Use Val Town's utilities instead\n- **ALWAYS import Val Town utilities directly** - Never create placeholder\n functions for `serveFile`, `blob`, `email`, etc. Import them from\n `https://esm.town/v/std/utils/index.ts` or their respective standard library\n modules from the start\n\n## Migration Strategy\n\n### Principles\n\n- Track migration history in dedicated table\n- Make migrations idempotent\n- Control with environment variables\n- Test thoroughly before deployment\n\n### Best Practices\n\n- Plan schema changes carefully\n- Consider performance impact\n- Backup before destructive changes\n- Remember SQLite limitations\n- Use emojis/unicode instead of images\n- Let errors bubble up with context\n- Prefer APIs without keys (e.g., open-meteo for weather)\n- Add error debugging script:\n ``\n- **Never create placeholder functions** for Val Town utilities - always import\n the real ones directly, even during development\n",[],[382],"b11efb06-b1c1-11f0-9e9a-0224a6c84d84",".vtignore","019a1c40-a7c9-77ff-b434-98d9e4ee3248",["D",1761410590580],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\nresources",[],[389],"b11ef9c6-b1c1-11f0-9e9a-0224a6c84d84",".gitignore","019a1c40-a7c9-77ff-b434-95aa30922ab0",["D",1761410590580],"# Environment variables\n.env\n.env.local\n.env.*.local\n\n# Deno\n.deno/\n\n# Val.town\n.vt/\n\n# Editor\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\n",[],[396],"b11ef8a4-b1c1-11f0-9e9a-0224a6c84d84",".env.example","019a1c40-a7c9-77ff-b434-924092335e02",["D",1761410590580],"# Val.town Base URL\nBASE_URL=https://your-val.val.town\n",[],[403],"b11ef5ac-b1c1-11f0-9e9a-0224a6c84d84","types.ts","019a1c40-a7c9-77ff-b434-88fc3384b079","019a1c40-a7c9-77ff-b434-8e315ec9358e",["D",1761410590580],"// Shared TypeScript types for kipclip\n\n// AT Protocol bookmark record type\nexport interface BookmarkRecord {\n subject: string; // URI of the bookmarked content\n createdAt: string; // ISO 8601 datetime\n tags?: string[]; // Optional tags\n}\n\n// Enriched bookmark with metadata\nexport interface EnrichedBookmark extends BookmarkRecord {\n uri: string; // AT Protocol URI for this record\n cid: string; // Content ID\n title?: string; // Extracted page title\n description?: string; // Extracted meta description (future)\n favicon?: string; // Extracted favicon URL (future)\n}\n\n// API request/response types\nexport interface AddBookmarkRequest {\n url: string;\n}\n\nexport interface AddBookmarkResponse {\n success: boolean;\n bookmark?: EnrichedBookmark;\n error?: string;\n}\n\nexport interface ListBookmarksResponse {\n bookmarks: EnrichedBookmark[];\n}\n\n// URL metadata extraction result\nexport interface UrlMetadata {\n title?: string;\n description?: string;\n favicon?: string;\n}\n\n// Session info\nexport interface SessionInfo {\n did: string;\n handle: string;\n}\n\n// AT Protocol tag record type\nexport interface TagRecord {\n value: string; // Tag text (max 64 chars)\n createdAt: string; // ISO 8601 datetime\n}\n\n// Enriched tag with metadata\nexport interface EnrichedTag extends TagRecord {\n uri: string; // AT Protocol URI for this record\n cid: string; // Content ID\n}\n\n// Tag API request/response types\nexport interface AddTagRequest {\n value: string;\n}\n\nexport interface AddTagResponse {\n success: boolean;\n tag?: EnrichedTag;\n error?: string;\n}\n\nexport interface ListTagsResponse {\n tags: EnrichedTag[];\n}\n\nexport interface UpdateTagRequest {\n value: string;\n}\n\nexport interface UpdateTagResponse {\n success: boolean;\n tag?: EnrichedTag;\n error?: string;\n}\n\nexport interface DeleteTagResponse {\n success: boolean;\n error?: string;\n}\n\n// Bookmark tag update request/response types\nexport interface UpdateBookmarkTagsRequest {\n tags: string[];\n title?: string;\n url?: string;\n description?: string;\n}\n\nexport interface UpdateBookmarkTagsResponse {\n success: boolean;\n bookmark?: EnrichedBookmark;\n error?: string;\n}\n",[],[417,410],"shared","b11ef796-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[359],[417],"b11ef0ac-b1c1-11f0-9e9a-0224a6c84d84","site.webmanifest","019a1c40-a7c9-77ff-b434-7d6d35ead8de","019a1c40-a7c9-77ff-b434-81c61c4aa9d4",["D",1761410590580],"{\"name\":\"\",\"short_name\":\"\",\"icons\":[{\"src\":\"/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"},{\"src\":\"/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],\"theme_color\":\"#ffffff\",\"background_color\":\"#ffffff\",\"display\":\"standalone\"}",[],[430,431,423],"resources","favicons","b11ef2fa-b1c1-11f0-9e9a-0224a6c84d84","019a1c40-a7c9-77ff-b434-848d450d7420",["D",1761410590580],[357],[430,431],"b11ef462-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[356],[430],"b11ed1a8-b1c1-11f0-9e9a-0224a6c84d84","tag.json","019a1c40-a7c9-77ff-b434-6c2b56477050","019a1c40-a7c9-77ff-b434-704b5b314bf7",["D",1761410590580],"{\n \"lexicon\": 1,\n \"id\": \"com.kipclip.tag\",\n \"description\": \"A user-defined tag for organizing bookmarks\",\n \"defs\": {\n \"main\": {\n \"type\": \"record\",\n \"key\": \"tid\",\n \"record\": {\n \"type\": \"object\",\n \"required\": [\"value\", \"createdAt\"],\n \"properties\": {\n \"value\": {\n \"type\": \"string\",\n \"maxLength\": 64,\n \"description\": \"The tag text\"\n },\n \"createdAt\": {\n \"type\": \"datetime\",\n \"description\": \"Timestamp when tag was created\"\n }\n }\n }\n }\n }\n}\n",[],[449,450,451,442],"lexicons","com","kipclip","b11ed338-b1c1-11f0-9e9a-0224a6c84d84","019a1c40-a7c9-77ff-b434-7619f8b6e9ae",["D",1761410590580],[354],[449,450,451],"b11ed43c-b1c1-11f0-9e9a-0224a6c84d84","019a1c40-a7c9-77ff-b434-78552cf1d13a",["D",1761410590580],[353],[449,450],"b11ed540-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[352],[449],"b11ecf50-b1c1-11f0-9e9a-0224a6c84d84","style.css","019a1c40-a7c9-77ff-b434-67a92ed6caf6",["D",1761410590580],"/* kipclip styles - matching the cute chicken mascot aesthetic */\n\n:root {\n --cream: #f5f1e8;\n --coral: #e66456;\n --teal: #5b8a8f;\n --orange: #f4a261;\n --dark-gray: #2d3748;\n --light-gray: #e2e8f0;\n --sidebar-bg: #f7f9fa;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n Arial, sans-serif;\n background: linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%);\n color: var(--dark-gray);\n min-height: 100vh;\n}\n\n#root {\n min-height: 100vh;\n}\n\n/* Utility classes to complement Tailwind */\n.btn-primary {\n background-color: var(--coral);\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary:hover {\n background-color: #d45546;\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background-color: var(--teal);\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n border: none;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n background-color: #4a7a7f;\n transform: translateY(-1px);\n}\n\n.card {\n background: white;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n padding: 1.5rem;\n transition: all 0.2s;\n}\n\n.card:hover {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* Loading spinner */\n.spinner {\n border: 3px solid var(--light-gray);\n border-top-color: var(--coral);\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Smooth page transitions */\n.fade-in {\n animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n",[],[247,467],"b11ece24-b1c1-11f0-9e9a-0224a6c84d84","index.tsx","019a1c40-a7c9-77ff-b434-6111b1d3a96d",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { App } from \"./components/App.tsx\";\nimport { AppProvider } from \"./context/AppContext.tsx\";\n\n// Only run in browser environment\nif (typeof document !== \"undefined\") {\n const root = createRoot(document.getElementById(\"root\")!);\n root.render(\n \n \n ,\n );\n}\n",[],[247,474],"b11ecbae-b1c1-11f0-9e9a-0224a6c84d84","index.html","019a1c40-a7c9-77ff-b434-5f9d9cbeac9b",["D",1761410590580],"\n\n \n \n \n kipclip - Find it, Kip it\n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n\n \n \n \n \n \n

\n \n \n\n",[],[247,481],"b11ec618-b1c1-11f0-9e9a-0224a6c84d84","AppContext.tsx","019a1c40-a7c9-77ff-b434-557d28c024c5","019a1c40-a7c9-77ff-b434-5b3a58251124",["D",1761410590580],"/** @jsxImportSource https://esm.sh/react */\nimport {\n createContext,\n type ReactNode,\n useContext,\n useState,\n} from \"https://esm.sh/react\";\nimport type {\n EnrichedBookmark,\n EnrichedTag,\n SessionInfo,\n} from \"../../shared/types.ts\";\n\ninterface AppState {\n session: SessionInfo | null;\n bookmarks: EnrichedBookmark[];\n tags: EnrichedTag[];\n selectedTags: Set;\n loading: boolean;\n}\n\ninterface AppContextValue extends AppState {\n // Session actions\n setSession: (session: SessionInfo | null) => void;\n\n // Bookmark actions\n setBookmarks: (bookmarks: EnrichedBookmark[]) => void;\n addBookmark: (bookmark: EnrichedBookmark) => void;\n updateBookmark: (bookmark: EnrichedBookmark) => void;\n deleteBookmark: (uri: string) => void;\n loadBookmarks: () => Promise;\n\n // Tag actions\n setTags: (tags: EnrichedTag[]) => void;\n addTag: (tag: EnrichedTag) => void;\n updateTag: (tag: EnrichedTag) => void;\n deleteTag: (uri: string) => void;\n loadTags: () => Promise;\n\n // Filter actions\n toggleTag: (tagValue: string) => void;\n clearFilters: () => void;\n\n // Computed values\n filteredBookmarks: EnrichedBookmark[];\n}\n\nconst AppContext = createContext(null);\n\nexport function AppProvider({ children }: { children: ReactNode }) {\n const [session, setSession] = useState(null);\n const [bookmarks, setBookmarks] = useState([]);\n const [tags, setTags] = useState([]);\n const [selectedTags, setSelectedTags] = useState>(new Set());\n const [loading, _setLoading] = useState(true);\n\n // Bookmark actions\n async function loadBookmarks() {\n try {\n const response = await fetch(\"/api/bookmarks\");\n if (!response.ok) {\n throw new Error(\"Failed to load bookmarks\");\n }\n const data = await response.json();\n setBookmarks(data.bookmarks);\n } catch (err) {\n console.error(\"Failed to load bookmarks:\", err);\n throw err;\n }\n }\n\n function addBookmark(bookmark: EnrichedBookmark) {\n setBookmarks((prev) => [bookmark, ...prev]);\n }\n\n function updateBookmark(bookmark: EnrichedBookmark) {\n setBookmarks((prev) =>\n prev.map((b) => b.uri === bookmark.uri ? bookmark : b)\n );\n }\n\n function deleteBookmark(uri: string) {\n setBookmarks((prev) => prev.filter((b) => b.uri !== uri));\n }\n\n // Tag actions\n async function loadTags() {\n try {\n const response = await fetch(\"/api/tags\");\n if (!response.ok) {\n throw new Error(\"Failed to load tags\");\n }\n const data = await response.json();\n setTags(data.tags);\n } catch (err) {\n console.error(\"Failed to load tags:\", err);\n throw err;\n }\n }\n\n function addTag(tag: EnrichedTag) {\n setTags((prev) => [tag, ...prev]);\n }\n\n function updateTag(tag: EnrichedTag) {\n setTags((prev) => prev.map((t) => t.uri === tag.uri ? tag : t));\n }\n\n function deleteTag(uri: string) {\n setTags((prev) => prev.filter((t) => t.uri !== uri));\n }\n\n // Filter actions\n function toggleTag(tagValue: string) {\n setSelectedTags((prev) => {\n const newSet = new Set(prev);\n if (newSet.has(tagValue)) {\n newSet.delete(tagValue);\n } else {\n newSet.add(tagValue);\n }\n return newSet;\n });\n }\n\n function clearFilters() {\n setSelectedTags(new Set());\n }\n\n // Computed values\n const filteredBookmarks = selectedTags.size === 0\n ? bookmarks\n : bookmarks.filter((bookmark) =>\n [...selectedTags].every((tag) => bookmark.tags?.includes(tag))\n );\n\n const value: AppContextValue = {\n // State\n session,\n bookmarks,\n tags,\n selectedTags,\n loading,\n\n // Session actions\n setSession,\n\n // Bookmark actions\n setBookmarks,\n addBookmark,\n updateBookmark,\n deleteBookmark,\n loadBookmarks,\n\n // Tag actions\n setTags,\n addTag,\n updateTag,\n deleteTag,\n loadTags,\n\n // Filter actions\n toggleTag,\n clearFilters,\n\n // Computed values\n filteredBookmarks,\n };\n\n return {children};\n}\n\nexport function useApp() {\n const context = useContext(AppContext);\n if (!context) {\n throw new Error(\"useApp must be used within AppProvider\");\n }\n return context;\n}\n",[],[247,495,488],"context","b11ec9a6-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[347],[247,495],["D",1761410590580],[],[247,169,85],["D",1761410590580],[],[247,169,98],["D",1761410590580],[],[247,169,105],["D",1761410590580],[],[247,169,112],["D",1761410590580],[],[247,169,119],["D",1761410590580],[],[247,169,126],["D",1761410590580],[],[247,169,133],["D",1761410590580],[],[247,169,140],["D",1761410590580],[],[247,169,147],["D",1761410590580],[],[247,169,154],["D",1761410590580],[],[247,169,161],["D",1761410590580],[],[247,169,167],["D",1761410590580],[334,335,336,337,338,339,340,341,342,343,344,345],[247,169],"b11ed090-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[333,346,348,349,350],[247],"b11e6ce0-b1c1-11f0-9e9a-0224a6c84d84","index.ts","019a1c40-a7c9-77ff-b434-1e7527909b4b",["D",1761410590580],"http","import { Hono } from \"https://esm.sh/hono\";\nimport { createATProtoOAuth } from \"jsr:@tijs/atproto-oauth-hono@^0.3.2\";\nimport { DrizzleStorage } from \"jsr:@tijs/atproto-oauth-hono@^0.3.2/drizzle\";\nimport { db, initializeTables } from \"./database/db.ts\";\nimport { staticRoutes } from \"./routes/static.ts\";\nimport { bookmarksApi } from \"./routes/bookmarks.ts\";\nimport { tagsApi } from \"./routes/tags.ts\";\n\n// Run database migrations on startup\nawait initializeTables();\n\n// Create the main app\nconst app = new Hono();\n\n// Get base URL and cookie secret from environment\nconst BASE_URL = Deno.env.get(\"BASE_URL\") ||\n \"https://kipclip-tijs.val.town\";\nconst COOKIE_SECRET = Deno.env.get(\"COOKIE_SECRET\");\n\nif (!COOKIE_SECRET) {\n throw new Error(\"COOKIE_SECRET environment variable is required\");\n}\n\n// Create OAuth integration with DrizzleStorage\nexport const oauth = createATProtoOAuth({\n baseUrl: BASE_URL,\n appName: \"kipclip\",\n cookieSecret: COOKIE_SECRET,\n sessionTtl: 60 * 60 * 24 * 30, // 30 days in seconds\n storage: new DrizzleStorage(db),\n});\n\n// Note: No canonical-host redirect; app runs purely as a standard website\n\n// Mount OAuth routes (provides /login, /oauth/callback, /api/auth/*)\n// @ts-expect-error TS2589: Hono's type inference hits TypeScript's recursion limit with complex nested route types\napp.route(\"/\", oauth.routes);\n\n// Mount bookmarks API (uses oauth.sessions internally)\napp.route(\"/api\", bookmarksApi);\n\n// Mount tags API\napp.route(\"/api\", tagsApi);\n\n// Static file serving and SPA routing\napp.route(\"/\", staticRoutes);\n\n// Error handler - let errors bubble up with full context\napp.onError((err, _c) => {\n console.error(\"Application error:\", err);\n throw err;\n});\n\nexport default app.fetch;\n","bkmrk",[],[552,544],"backend","b11e6740-b1c1-11f0-9e9a-0224a6c84d84","enrichment.ts","019a1c40-a7c9-77ff-b434-13dab18068c8","019a1c40-a7c9-77ff-b434-1475f5d4abaf",["D",1761410590580],"import type { UrlMetadata } from \"../../shared/types.ts\";\n\n/**\n * Extracts metadata from a URL by fetching and parsing the HTML\n */\nexport async function extractUrlMetadata(\n url: string,\n): Promise {\n try {\n // Validate URL\n const parsedUrl = new URL(url);\n if (!parsedUrl.protocol.startsWith(\"http\")) {\n throw new Error(\"Only HTTP(S) URLs are supported\");\n }\n\n // Fetch the URL with a timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout\n\n const response = await fetch(url, {\n signal: controller.signal,\n headers: {\n \"User-Agent\":\n \"kipclip-bot/1.0 (Bookmark enrichment; +https://kipclip.com)\",\n },\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n // Only process HTML content\n const contentType = response.headers.get(\"content-type\") || \"\";\n if (!contentType.includes(\"text/html\")) {\n // For non-HTML content, just return the URL as title\n return {\n title: parsedUrl.hostname,\n };\n }\n\n // Parse HTML\n const html = await response.text();\n return parseHtmlMetadata(html, parsedUrl);\n } catch (error) {\n console.error(`Failed to extract metadata from ${url}:`, error);\n // Return minimal metadata on error\n const parsedUrl = new URL(url);\n return {\n title: parsedUrl.hostname,\n };\n }\n}\n\n/**\n * Parses HTML to extract metadata\n */\nfunction parseHtmlMetadata(html: string, url: URL): UrlMetadata {\n const metadata: UrlMetadata = {};\n\n // Extract title - try tag first\n const titleMatch = html.match(/<title[^>]*>([^<]+)<\\/title>/i);\n if (titleMatch) {\n metadata.title = decodeHtmlEntities(titleMatch[1].trim());\n }\n\n // Try og:title as fallback\n if (!metadata.title) {\n const ogTitleMatch = html.match(\n /<meta[^>]+property=[\"']og:title[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (ogTitleMatch) {\n metadata.title = decodeHtmlEntities(ogTitleMatch[1].trim());\n }\n }\n\n // Extract description from meta tags\n const descMatch = html.match(\n /<meta[^>]+name=[\"']description[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (descMatch) {\n metadata.description = decodeHtmlEntities(descMatch[1].trim());\n }\n\n // Try og:description as fallback\n if (!metadata.description) {\n const ogDescMatch = html.match(\n /<meta[^>]+property=[\"']og:description[\"'][^>]+content=[\"']([^\"']+)[\"']/i,\n );\n if (ogDescMatch) {\n metadata.description = decodeHtmlEntities(ogDescMatch[1].trim());\n }\n }\n\n // Extract favicon\n const faviconMatch = html.match(\n /<link[^>]+rel=[\"'](?:icon|shortcut icon)[\"'][^>]+href=[\"']([^\"']+)[\"']/i,\n );\n if (faviconMatch) {\n const faviconUrl = faviconMatch[1];\n // Resolve relative URLs\n metadata.favicon = new URL(faviconUrl, url).href;\n }\n\n // Default to hostname/favicon.ico if no favicon found\n if (!metadata.favicon) {\n metadata.favicon = new URL(\"/favicon.ico\", url.origin).href;\n }\n\n // Use hostname as fallback title\n if (!metadata.title) {\n metadata.title = url.hostname;\n }\n\n return metadata;\n}\n\n/**\n * Decode common HTML entities\n */\nfunction decodeHtmlEntities(text: string): string {\n const entities: Record<string, string> = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n \""\": '\"',\n \"'\": \"'\",\n \"'\": \"'\",\n };\n\n return text.replace(/&[^;]+;/g, (entity) => entities[entity] || entity);\n}\n\n/**\n * Testable function for dependency injection\n */\nexport async function extractUrlMetadataWithFetcher(\n url: string,\n fetcher: typeof fetch = fetch,\n): Promise<UrlMetadata> {\n // This version accepts a custom fetcher for testing\n const originalFetch = globalThis.fetch;\n globalThis.fetch = fetcher;\n try {\n return await extractUrlMetadata(url);\n } finally {\n globalThis.fetch = originalFetch;\n }\n}\n",[],[552,561,554],"services","b11e6ba0-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[330],[552,561],"b11e550c-b1c1-11f0-9e9a-0224a6c84d84","tags.ts","019a1c40-a7c9-77ff-b434-0ae9708991b1","019a1c40-a7c9-77ff-b434-0e3d0b16b120",["D",1761410590580],"import { Hono } from \"https://esm.sh/hono\";\nimport type {\n AddTagRequest,\n AddTagResponse,\n DeleteTagResponse,\n EnrichedTag,\n ListTagsResponse,\n UpdateTagRequest,\n UpdateTagResponse,\n} from \"../../shared/types.ts\";\nimport { oauth } from \"../index.ts\";\n\nconst TAG_COLLECTION = \"com.kipclip.tag\";\n\nexport const tagsApi = new Hono();\n\n/**\n * Get authenticated user session from OAuth\n * Extracts session cookie and gets OAuth session from storage\n */\nasync function getAuthSession(req: Request) {\n // Extract session cookie\n const cookieHeader = req.headers.get(\"cookie\");\n if (!cookieHeader || !cookieHeader.includes(\"sid=\")) {\n throw new Error(\"Not authenticated\");\n }\n\n const sessionCookie = cookieHeader\n .split(\";\")\n .find((c) => c.trim().startsWith(\"sid=\"))\n ?.split(\"=\")[1];\n\n if (!sessionCookie) {\n throw new Error(\"Not authenticated\");\n }\n\n // Unseal session data to get DID - use the COOKIE_SECRET from env\n const { unsealData } = await import(\"npm:iron-session@8.0.4\");\n const COOKIE_SECRET = Deno.env.get(\"COOKIE_SECRET\");\n\n if (!COOKIE_SECRET) {\n console.error(\"COOKIE_SECRET environment variable not set\");\n throw new Error(\"Server configuration error\");\n }\n\n const sessionData = await unsealData(decodeURIComponent(sessionCookie), {\n password: COOKIE_SECRET,\n });\n\n const userDid = (sessionData as any)?.did || (sessionData as any)?.userId ||\n (sessionData as any)?.sub;\n\n if (!userDid) {\n console.error(\"No DID found in session data:\", sessionData);\n throw new Error(\"Not authenticated\");\n }\n\n // Get OAuth session using sessions manager\n const oauthSession = await oauth.sessions.getOAuthSession(userDid);\n\n if (!oauthSession) {\n console.error(\"No OAuth session found for DID:\", userDid);\n throw new Error(\"OAuth session not found\");\n }\n\n return oauthSession;\n}\n\n/**\n * List user's tags\n */\ntagsApi.get(\"/tags\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n\n // List records from the tag collection using makeRequest\n const params = new URLSearchParams({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n limit: \"100\",\n });\n const response = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords?${params}`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to list records: ${await response.text()}`);\n }\n\n const data = await response.json();\n\n // Map to enriched tags\n const tags: EnrichedTag[] = data.records.map(\n (record: any) => ({\n uri: record.uri,\n cid: record.cid,\n value: record.value.value,\n createdAt: record.value.createdAt,\n }),\n );\n\n const result: ListTagsResponse = { tags };\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error listing tags:\", error);\n\n // If collection doesn't exist yet, return empty array\n if (error.message?.includes(\"not found\") || error.status === 400) {\n return c.json({ tags: [] });\n }\n\n // If OAuth session temporarily unavailable, return 503 for client to retry\n if (\n error.message?.includes(\"OAuth session not found\") ||\n error.message?.includes(\"Not authenticated\")\n ) {\n return c.json({ error: \"Session temporarily unavailable\" }, 503);\n }\n\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Add a new tag\n */\ntagsApi.post(\"/tags\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const body: AddTagRequest = await c.req.json();\n\n if (!body.value || typeof body.value !== \"string\") {\n return c.json({ error: \"Tag value is required\" }, 400);\n }\n\n // Validate tag value\n const value = body.value.trim();\n if (value.length === 0) {\n return c.json({ error: \"Tag value cannot be empty\" }, 400);\n }\n if (value.length > 64) {\n return c.json({ error: \"Tag value must be 64 characters or less\" }, 400);\n }\n\n // Create tag record\n const record = {\n value: value,\n createdAt: new Date().toISOString(),\n };\n\n const response = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.createRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n record,\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to create record: ${await response.text()}`);\n }\n\n const data = await response.json();\n\n const tag: EnrichedTag = {\n uri: data.uri,\n cid: data.cid,\n value: value,\n createdAt: record.createdAt,\n };\n\n const result: AddTagResponse = {\n success: true,\n tag,\n };\n\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error creating tag:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Update a tag and rename it in all bookmarks\n */\ntagsApi.put(\"/tags/:rkey\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const rkey = c.req.param(\"rkey\");\n const body: UpdateTagRequest = await c.req.json();\n\n if (!body.value || typeof body.value !== \"string\") {\n return c.json({ error: \"Tag value is required\" }, 400);\n }\n\n // Validate tag value\n const newValue = body.value.trim();\n if (newValue.length === 0) {\n return c.json({ error: \"Tag value cannot be empty\" }, 400);\n }\n if (newValue.length > 64) {\n return c.json({ error: \"Tag value must be 64 characters or less\" }, 400);\n }\n\n // Get current record to get old value and preserve createdAt\n const getParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n rkey,\n });\n const getResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.getRecord?${getParams}`,\n );\n\n if (!getResponse.ok) {\n throw new Error(`Failed to get record: ${await getResponse.text()}`);\n }\n\n const currentRecord = await getResponse.json();\n const oldValue = currentRecord.value.value;\n\n // If value hasn't changed, just return success\n if (oldValue === newValue) {\n const tag: EnrichedTag = {\n uri: currentRecord.uri,\n cid: currentRecord.cid,\n value: newValue,\n createdAt: currentRecord.value.createdAt,\n };\n\n return c.json({\n success: true,\n tag,\n });\n }\n\n // Update all bookmarks that have the old tag value\n const BOOKMARK_COLLECTION = \"community.lexicon.bookmarks.bookmark\";\n const listParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n limit: \"100\",\n });\n const listResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords?${listParams}`,\n );\n\n if (listResponse.ok) {\n const bookmarksData = await listResponse.json();\n\n // Update each bookmark that has the old tag\n const updatePromises = bookmarksData.records\n .filter((record: any) => record.value.tags?.includes(oldValue))\n .map(async (record: any) => {\n const bookmarkRkey = record.uri.split(\"/\").pop();\n const updatedTags = record.value.tags.map((t: string) =>\n t === oldValue ? newValue : t\n );\n\n // Update the bookmark record with renamed tag\n const updateResponse = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.putRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n rkey: bookmarkRkey,\n record: {\n ...record.value,\n tags: updatedTags,\n },\n }),\n },\n );\n\n if (!updateResponse.ok) {\n console.error(\n `Failed to update bookmark ${bookmarkRkey}:`,\n await updateResponse.text(),\n );\n }\n\n return updateResponse.ok;\n });\n\n // Wait for all bookmark updates to complete\n await Promise.all(updatePromises);\n }\n\n // Now update the tag record\n const record = {\n value: newValue,\n createdAt: currentRecord.value.createdAt, // Preserve original createdAt\n };\n\n const updateResponse = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.putRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n rkey,\n record,\n }),\n },\n );\n\n if (!updateResponse.ok) {\n throw new Error(\n `Failed to update tag record: ${await updateResponse.text()}`,\n );\n }\n\n const data = await updateResponse.json();\n\n const tag: EnrichedTag = {\n uri: data.uri,\n cid: data.cid,\n value: newValue,\n createdAt: record.createdAt,\n };\n\n const result: UpdateTagResponse = {\n success: true,\n tag,\n };\n\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error updating tag:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Get tag usage (count of bookmarks using this tag)\n */\ntagsApi.get(\"/tags/:rkey/usage\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const rkey = c.req.param(\"rkey\");\n\n // First, get the tag to find its value\n const getParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n rkey,\n });\n const getResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.getRecord?${getParams}`,\n );\n\n if (!getResponse.ok) {\n throw new Error(`Failed to get tag: ${await getResponse.text()}`);\n }\n\n const tagData = await getResponse.json();\n const tagValue = tagData.value.value;\n\n // List all bookmarks\n const BOOKMARK_COLLECTION = \"community.lexicon.bookmarks.bookmark\";\n const listParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n limit: \"100\",\n });\n const listResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords?${listParams}`,\n );\n\n if (!listResponse.ok) {\n throw new Error(\n `Failed to list bookmarks: ${await listResponse.text()}`,\n );\n }\n\n const bookmarksData = await listResponse.json();\n\n // Count bookmarks that have this tag\n const count = bookmarksData.records.filter((record: any) =>\n record.value.tags?.includes(tagValue)\n ).length;\n\n return c.json({ count, tagValue });\n } catch (error: any) {\n console.error(\"Error getting tag usage:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Delete a tag and remove it from all bookmarks\n */\ntagsApi.delete(\"/tags/:rkey\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const rkey = c.req.param(\"rkey\");\n\n // First, get the tag to find its value\n const getParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n rkey,\n });\n const getResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.getRecord?${getParams}`,\n );\n\n if (!getResponse.ok) {\n throw new Error(`Failed to get tag: ${await getResponse.text()}`);\n }\n\n const tagData = await getResponse.json();\n const tagValue = tagData.value.value;\n\n // List all bookmarks to find which ones have this tag\n const BOOKMARK_COLLECTION = \"community.lexicon.bookmarks.bookmark\";\n const listParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n limit: \"100\",\n });\n const listResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords?${listParams}`,\n );\n\n if (listResponse.ok) {\n const bookmarksData = await listResponse.json();\n\n // Update each bookmark that has this tag\n const updatePromises = bookmarksData.records\n .filter((record: any) => record.value.tags?.includes(tagValue))\n .map(async (record: any) => {\n const bookmarkRkey = record.uri.split(\"/\").pop();\n const updatedTags = record.value.tags.filter(\n (t: string) => t !== tagValue,\n );\n\n // Update the bookmark record with tags removed\n const updateResponse = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.putRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n rkey: bookmarkRkey,\n record: {\n ...record.value,\n tags: updatedTags,\n },\n }),\n },\n );\n\n if (!updateResponse.ok) {\n console.error(\n `Failed to update bookmark ${bookmarkRkey}:`,\n await updateResponse.text(),\n );\n }\n\n return updateResponse.ok;\n });\n\n // Wait for all bookmark updates to complete\n await Promise.all(updatePromises);\n }\n\n // Now delete the tag record\n const deleteResponse = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.deleteRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: TAG_COLLECTION,\n rkey,\n }),\n },\n );\n\n if (!deleteResponse.ok) {\n throw new Error(\n `Failed to delete tag record: ${await deleteResponse.text()}`,\n );\n }\n\n const result: DeleteTagResponse = { success: true };\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error deleting tag:\", error);\n const result: DeleteTagResponse = {\n success: false,\n error: error.message,\n };\n return c.json(result, 500);\n }\n});\n",[],[552,574,567],"routes","b11e53b8-b1c1-11f0-9e9a-0224a6c84d84","static.ts","019a1c40-a7c9-77ff-b434-0571aca144b7",["D",1761410590580],"import { Hono } from \"https://esm.sh/hono\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport const staticRoutes = new Hono();\n\n// Serve frontend files\nstaticRoutes.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\nstaticRoutes.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve lexicon files\nstaticRoutes.get(\"/lexicons/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve lexicon at well-known location for AT Protocol discovery\nstaticRoutes.get(\"/.well-known/atproto/lexicons/*\", (c) => {\n // Map /.well-known/atproto/lexicons/com/kipclip/tag.json to /lexicons/com/kipclip/tag.json\n const path = c.req.path.replace(\"/.well-known/atproto/lexicons\", \"/lexicons\");\n return serveFile(path, import.meta.url);\n});\n\n// Serve index.html for root and SPA routes\nstaticRoutes.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Catch-all for SPA routing\nstaticRoutes.get(\"*\", async (c) => {\n // Don't catch API routes or static assets\n if (\n c.req.path.startsWith(\"/api\") || c.req.path.startsWith(\"/oauth\") ||\n c.req.path.startsWith(\"/login\")\n ) {\n return c.notFound();\n }\n\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n",[],[552,574,576],"b11e48b4-b1c1-11f0-9e9a-0224a6c84d84","bookmarks.ts","019a1c40-a7c9-77ff-b434-03eacf114d89",["D",1761410590580],"import { Hono } from \"https://esm.sh/hono\";\nimport type {\n AddBookmarkRequest,\n AddBookmarkResponse,\n EnrichedBookmark,\n ListBookmarksResponse,\n UpdateBookmarkTagsRequest,\n UpdateBookmarkTagsResponse,\n} from \"../../shared/types.ts\";\nimport { extractUrlMetadata } from \"../services/enrichment.ts\";\nimport { oauth } from \"../index.ts\";\n\nconst BOOKMARK_COLLECTION = \"community.lexicon.bookmarks.bookmark\";\n\nexport const bookmarksApi = new Hono();\n\n/**\n * Get authenticated user session from OAuth\n * Extracts session cookie and gets OAuth session from storage\n */\nasync function getAuthSession(req: Request) {\n // Extract session cookie\n const cookieHeader = req.headers.get(\"cookie\");\n if (!cookieHeader || !cookieHeader.includes(\"sid=\")) {\n throw new Error(\"Not authenticated\");\n }\n\n const sessionCookie = cookieHeader\n .split(\";\")\n .find((c) => c.trim().startsWith(\"sid=\"))\n ?.split(\"=\")[1];\n\n if (!sessionCookie) {\n throw new Error(\"Not authenticated\");\n }\n\n // Unseal session data to get DID - use the COOKIE_SECRET from env\n const { unsealData } = await import(\"npm:iron-session@8.0.4\");\n const COOKIE_SECRET = Deno.env.get(\"COOKIE_SECRET\");\n\n if (!COOKIE_SECRET) {\n console.error(\"COOKIE_SECRET environment variable not set\");\n throw new Error(\"Server configuration error\");\n }\n\n const sessionData = await unsealData(decodeURIComponent(sessionCookie), {\n password: COOKIE_SECRET,\n });\n\n const userDid = (sessionData as any)?.did || (sessionData as any)?.userId ||\n (sessionData as any)?.sub;\n\n if (!userDid) {\n console.error(\"No DID found in session data:\", sessionData);\n throw new Error(\"Not authenticated\");\n }\n\n // Get OAuth session using sessions manager\n const oauthSession = await oauth.sessions.getOAuthSession(userDid);\n\n if (!oauthSession) {\n console.error(\"No OAuth session found for DID:\", userDid);\n throw new Error(\"OAuth session not found\");\n }\n\n return oauthSession;\n}\n\n/**\n * List user's bookmarks\n */\nbookmarksApi.get(\"/bookmarks\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n\n // List records from the bookmark collection using makeRequest\n const params = new URLSearchParams({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n limit: \"100\",\n });\n const response = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords?${params}`,\n );\n\n if (!response.ok) {\n throw new Error(`Failed to list records: ${await response.text()}`);\n }\n\n const data = await response.json();\n\n // Enrich bookmarks with metadata\n const bookmarks: EnrichedBookmark[] = data.records.map(\n (record: any) => ({\n uri: record.uri,\n cid: record.cid,\n subject: record.value.subject,\n createdAt: record.value.createdAt,\n tags: record.value.tags || [],\n title: record.value.$enriched?.title || record.value.title,\n description: record.value.$enriched?.description,\n favicon: record.value.$enriched?.favicon,\n }),\n );\n\n const result: ListBookmarksResponse = { bookmarks };\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error listing bookmarks:\", error);\n\n // If collection doesn't exist yet, return empty array\n if (error.message?.includes(\"not found\") || error.status === 400) {\n return c.json({ bookmarks: [] });\n }\n\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Add a new bookmark\n */\nbookmarksApi.post(\"/bookmarks\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const body: AddBookmarkRequest = await c.req.json();\n\n if (!body.url) {\n return c.json({ error: \"URL is required\" }, 400);\n }\n\n // Validate URL\n let url: URL;\n try {\n url = new URL(body.url);\n if (!url.protocol.startsWith(\"http\")) {\n return c.json({ error: \"Only HTTP(S) URLs are supported\" }, 400);\n }\n } catch {\n return c.json({ error: \"Invalid URL format\" }, 400);\n }\n\n // Extract metadata\n const metadata = await extractUrlMetadata(body.url);\n\n // Create bookmark record\n const record = {\n subject: body.url,\n createdAt: new Date().toISOString(),\n tags: [],\n // Store enriched metadata as custom fields\n $enriched: {\n title: metadata.title,\n description: metadata.description,\n favicon: metadata.favicon,\n },\n };\n\n const response = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.createRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n record,\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to create record: ${await response.text()}`);\n }\n\n const data = await response.json();\n\n const bookmark: EnrichedBookmark = {\n uri: data.uri,\n cid: data.cid,\n subject: body.url,\n createdAt: record.createdAt,\n tags: [],\n title: metadata.title,\n description: metadata.description,\n favicon: metadata.favicon,\n };\n\n const result: AddBookmarkResponse = {\n success: true,\n bookmark,\n };\n\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error creating bookmark:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Update bookmark tags and other fields\n */\nbookmarksApi.patch(\"/bookmarks/:rkey\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const rkey = c.req.param(\"rkey\");\n const body: UpdateBookmarkTagsRequest = await c.req.json();\n\n if (!Array.isArray(body.tags)) {\n return c.json({ error: \"Tags must be an array\" }, 400);\n }\n\n // Validate URL if provided\n if (body.url) {\n try {\n const urlObj = new URL(body.url);\n if (!urlObj.protocol.startsWith(\"http\")) {\n return c.json({ error: \"Only HTTP(S) URLs are supported\" }, 400);\n }\n } catch {\n return c.json({ error: \"Invalid URL format\" }, 400);\n }\n }\n\n // Get current record to preserve all fields\n const getParams = new URLSearchParams({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n rkey,\n });\n const getResponse = await oauthSession.makeRequest(\n \"GET\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.getRecord?${getParams}`,\n );\n\n if (!getResponse.ok) {\n throw new Error(`Failed to get record: ${await getResponse.text()}`);\n }\n\n const currentRecord = await getResponse.json();\n\n // Update record with new fields\n const record = {\n ...currentRecord.value,\n subject: body.url || currentRecord.value.subject,\n tags: body.tags,\n $enriched: {\n ...currentRecord.value.$enriched,\n title: body.title !== undefined\n ? body.title\n : currentRecord.value.$enriched?.title,\n description: body.description !== undefined\n ? body.description\n : currentRecord.value.$enriched?.description,\n },\n };\n\n const response = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.putRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n rkey,\n record,\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to update record: ${await response.text()}`);\n }\n\n const data = await response.json();\n\n const bookmark: EnrichedBookmark = {\n uri: data.uri,\n cid: data.cid,\n subject: record.subject,\n createdAt: record.createdAt,\n tags: record.tags,\n title: record.$enriched?.title,\n description: record.$enriched?.description,\n favicon: record.$enriched?.favicon,\n };\n\n const result: UpdateBookmarkTagsResponse = {\n success: true,\n bookmark,\n };\n\n return c.json(result);\n } catch (error: any) {\n console.error(\"Error updating bookmark tags:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n\n/**\n * Delete a bookmark\n */\nbookmarksApi.delete(\"/bookmarks/:rkey\", async (c) => {\n try {\n const oauthSession = await getAuthSession(c.req.raw);\n const rkey = c.req.param(\"rkey\");\n\n const response = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.deleteRecord`,\n {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n repo: oauthSession.did,\n collection: BOOKMARK_COLLECTION,\n rkey,\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(`Failed to delete record: ${await response.text()}`);\n }\n\n return c.json({ success: true });\n } catch (error: any) {\n console.error(\"Error deleting bookmark:\", error);\n return c.json({ error: error.message }, 500);\n }\n});\n",[],[552,574,583],"b11e659c-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[326,327,328],[552,574],"b11e4684-b1c1-11f0-9e9a-0224a6c84d84","schema.ts","019a1c40-a7c9-77ff-b433-f9919d10dbbf","019a1c40-a7c9-77ff-b433-feff258a7376",["D",1761410590580],"import {\n integer,\n sqliteTable,\n text,\n} from \"https://esm.sh/drizzle-orm@0.44.5/sqlite-core\";\n\n// Iron session storage table (used by OAuth package)\nexport const ironSessionStorage = sqliteTable(\"iron_session_storage\", {\n key: text(\"key\").primaryKey(),\n value: text(\"value\").notNull(),\n expiresAt: integer(\"expires_at\"),\n createdAt: integer(\"created_at\").notNull(),\n updatedAt: integer(\"updated_at\").notNull(),\n});\n",[],[552,601,594],"database","b11e40bc-b1c1-11f0-9e9a-0224a6c84d84","migrations.ts","019a1c40-a7c9-77ff-b433-f7bdb8fa20d6",["D",1761410590580],"// Database migrations for kipclip\n// This provides proper schema versioning and safe migrations\n\nimport { rawDb } from \"./db.ts\";\n\n// Migration tracking table\nconst MIGRATIONS_TABLE = `\n CREATE TABLE IF NOT EXISTS migrations (\n id INTEGER PRIMARY KEY,\n version TEXT UNIQUE NOT NULL,\n description TEXT NOT NULL,\n executed_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n`;\n\n// List of all migrations in order\nconst MIGRATIONS = [\n {\n version: \"001_initial_schema\",\n description: \"Create initial OAuth session storage table\",\n sql: `\n -- Create iron_session_storage table for OAuth sessions\n CREATE TABLE IF NOT EXISTS iron_session_storage (\n key TEXT PRIMARY KEY,\n value TEXT NOT NULL,\n expires_at INTEGER,\n created_at INTEGER NOT NULL,\n updated_at INTEGER NOT NULL\n );\n\n -- Create index for efficient cleanup of expired sessions\n CREATE INDEX IF NOT EXISTS idx_iron_session_expires\n ON iron_session_storage(expires_at);\n `,\n },\n];\n\nexport async function runMigrations() {\n console.log(\"🔄 Running database migrations...\");\n\n try {\n // Create migrations table\n await rawDb.execute({\n sql: MIGRATIONS_TABLE,\n args: [],\n });\n\n // Get already executed migrations\n const executed = await rawDb.execute({\n sql: \"SELECT version FROM migrations ORDER BY id\",\n args: [],\n });\n\n // Get executed versions from row arrays (sqlite2 returns arrays, not objects)\n const executedVersions = new Set(\n executed.rows?.map((row) => row[0] as string) || [],\n );\n\n // Run pending migrations\n for (const migration of MIGRATIONS) {\n if (!executedVersions.has(migration.version)) {\n console.log(\n `📝 Running migration: ${migration.version} - ${migration.description}`,\n );\n\n // Split SQL into individual statements (SQLite limitation)\n const statements = migration.sql\n .split(\";\")\n .map((stmt) => stmt.trim())\n .filter((stmt) => stmt.length > 0);\n\n // Execute each statement\n for (const statement of statements) {\n try {\n await rawDb.execute({\n sql: statement,\n args: [],\n });\n } catch (error) {\n console.warn(\n `⚠️ Statement warning (likely table exists): ${error.message}`,\n );\n }\n }\n\n // Record migration as executed\n await rawDb.execute({\n sql: \"INSERT INTO migrations (version, description) VALUES (?, ?)\",\n args: [migration.version, migration.description],\n });\n\n console.log(`✅ Completed migration: ${migration.version}`);\n }\n }\n\n console.log(\"✅ All migrations completed successfully\");\n } catch (error) {\n console.error(\"❌ Migration failed:\", error);\n throw error;\n }\n}\n\nexport async function getMigrationStatus() {\n try {\n await rawDb.execute({\n sql: MIGRATIONS_TABLE,\n args: [],\n });\n const result = await rawDb.execute({\n sql:\n \"SELECT version, description, executed_at FROM migrations ORDER BY id\",\n args: [],\n });\n return result.rows || [];\n } catch (error) {\n console.error(\"Failed to get migration status:\", error);\n return [];\n }\n}\n",[],[552,601,603],"b11e3f7c-b1c1-11f0-9e9a-0224a6c84d84","db.ts","019a1c40-a7c9-77ff-b433-f26fef02cd5c",["D",1761410590580],"// Drizzle ORM database module using Val Town's sqlite\nimport { drizzle } from \"https://esm.sh/drizzle-orm@0.44.5/sqlite-proxy\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite2\";\nimport * as schema from \"./schema.ts\";\n\n// Create Drizzle database instance with schema using sqlite-proxy adapter\nexport const db = drizzle(\n async (sql, params) => {\n const result = await sqlite.execute({ sql, args: params || [] });\n return { rows: result.rows };\n },\n { schema },\n);\n\n// Export raw sqlite for migrations and schema operations\nexport const rawDb = sqlite;\n\n// Initialize all tables using Drizzle migrations\nexport async function initializeTables() {\n // Run proper Drizzle-based migrations\n const { runMigrations } = await import(\"./migrations.ts\");\n await runMigrations();\n}\n",[],[552,601,610],"b11e47a6-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[322,323,324],[552,601],"b11e6f42-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[321,325,329,331],[552],"b11e32d4-b1c1-11f0-9e9a-0224a6c84d84","settings.local.json","019a1c40-a7c9-77ff-b433-e979bfeb8bf7","019a1c40-a7c9-77ff-b433-efb77a0884c3",["D",1761410590580],"{\n \"permissions\": {\n \"allow\": [\n \"WebFetch(domain:github.com)\",\n \"WebFetch(domain:jsr.io)\",\n \"WebSearch\",\n \"Bash(deno check:*)\",\n \"Read(//Users/tijs/projects/atproto/anchor-appview/**)\",\n \"Bash(deno fmt:*)\",\n \"Bash(deno task:*)\",\n \"Bash(deno lint:*)\",\n \"Bash(vt push:*)\",\n \"WebFetch(domain:kipclip.val.run)\",\n \"WebFetch(domain:kip.val.run)\",\n \"Bash(find:*)\",\n \"Bash(cat:*)\",\n \"Bash(git add:*)\",\n \"Bash(git commit:*)\",\n \"Bash(git push:*)\",\n \"WebFetch(domain:atproto.com)\",\n \"Bash(python3:*)\",\n \"Read(//Users/tijs/Desktop/**)\",\n \"Read(//Users/tijs/projects/atproto/atproto-oauth-hono/**)\",\n \"Read(//Users/tijs/projects/atproto/**)\",\n \"Bash(deno test:*)\",\n \"Bash(git tag:*)\",\n \"WebFetch(domain:support.apple.com)\",\n \"Bash(git stash)\",\n \"Bash(git stash pop)\",\n \"WebFetch(domain:more.ko-fi.com)\",\n \"WebFetch(domain:www.svgrepo.com)\",\n \"WebFetch(domain:uxwing.com)\"\n ],\n \"deny\": [],\n \"ask\": []\n }\n}\n",[],[632,625],".claude","b11e3dc4-b1c1-11f0-9e9a-0224a6c84d84",["D",1761410590580],[319],[632],["D",1761410590580],{"_11":12,"_217":91},{"_11":12,"_213":-5,"_90":91,"_31":89,"_214":215,"_216":30},{"_39":40,"_13":16,"_33":36,"_205":172,"_206":-5,"_207":-5,"_208":-5,"_209":-5,"_210":-5,"_211":14,"_212":12},"ctx",{"_52":-5,"_236":674,"_675":676,"_677":678,"_679":30,"_680":30,"_681":30,"_682":24,"_683":-5,"_684":-7,"_685":-7,"_686":26,"_687":30,"_688":30,"_689":-5,"_690":30,"_691":30,"_692":30,"_693":-5},"ENV",{"_645":646,"_647":648,"_649":16,"_650":651,"_652":653,"_654":655,"_656":657,"_658":659,"_660":661,"_662":663,"_664":665,"_666":667,"_668":669,"_670":671,"_672":673},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"] </article></body></html>

\n Save from Anywhere\n

\n Browser Bookmarklet\n

\n How to install:\n

\n Alternative installation methods:\n

\n Mobile Devices\n

\n iOS Shortcut (Recommended):\n

\n Android (Chrome):\n

\n Tags\n

Tags

\n Login Required\n

\n Bookmark Saved!\n

Save Bookmark

Edit Tag

Edit Bookmark

\n Your Bookmarks\n \n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n \n

\n Your Bookmarks\n

\n No bookmarks yet\n

\n {bookmark.title || new URL(bookmark.subject).hostname}\n

Create Tag

Add Bookmark

\n About kipclip\n

How it works

\n Important note on privacy\n

Links

History · components