[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_360":361,"_362":363},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_110":88,"_27":54,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":60,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","shared/config.ts","latestPath","fileId","01a001de-e00b-7376-9430-79dcaf6f0bfc","name","config.ts","fileType","script","content","export const APP_CONFIG = {\n // Base URL for the application\n BASE_URL: \"https://book-browser.val.run\",\n\n // OAuth configuration\n CLIENT_ID: \"https://book-browser.val.run/client-metadata.json\",\n REDIRECT_URI: \"https://book-browser.val.run/oauth/callback\",\n COOKIE_SECRET: Deno.env.get(\"COOKIE_SECRET\") ||\n \"book-explorer-default-secret\",\n\n // App metadata\n APP_NAME: \"Book Explorer\",\n APP_DESCRIPTION: \"Browse and manage your Bluesky book collection\",\n\n // ATProto configuration\n ATPROTO_SERVICE: \"https://bsky.social\", // Default fallback for handle resolution\n PLC_DIRECTORY: \"https://plc.directory\",\n} as const;\n","export const APP_CONFIG = {\n // Base URL for the application\n BASE_URL: \"https://puf-bookhive.val.run\",\n\n // OAuth configuration\n CLIENT_ID: \"https://puf-bookhive.val.run/client-metadata.json\",\n REDIRECT_URI: \"https://puf-bookhive.val.run/oauth/callback\",\n COOKIE_SECRET: Deno.env.get(\"COOKIE_SECRET\") ||\n \"book-explorer-default-secret\",\n\n // App metadata\n APP_NAME: \"Book Explorer\",\n APP_DESCRIPTION: \"Browse and manage your Bluesky book collection\",\n\n // ATProto configuration\n ATPROTO_SERVICE: \"https://bsky.social\", // Default fallback for handle resolution\n PLC_DIRECTORY: \"https://plc.directory\",\n} as const;","createdAt",["D",1786738258898],"branchVersion","branchId","3c85d5e5-04a7-4e4e-a80e-4ead07d80b71","id","4a96eee3-533f-412b-8133-dd32795fc18d","book-explorer",["D",1786737778590],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","dbc2eaf5-6585-43f5-8eaa-f18c7e2c0249","pinnedFileId","01a001de-e00b-7376-9430-58b08610e2e9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e84da261-8841-4e35-8772-7604500a2ff8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":101,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":98,"_99":46,"_100":101},"isOwned",3,"main","projectId","forkedBranchId","b9acac30-705a-11f0-8062-0224a6c84d84","forkedBranchVersion",96,"forkedProjectPrivacy","forkedProjectId","b9ac3f66-705a-11f0-8062-0224a6c84d84","forkedProjectOrgId","c04d51b2-a7dc-46ca-ad6f-52f47c2906a8","projectName","userHandle","puf","handle","displayName","avatar","https://secure.gravatar.com/avatar/4df6cf8a2fa4219b0990c579e3f5cffd.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":356,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":357,"_82":358,"_84":359,"_86":25},"tree",[208,210,218,224,227,228,229,230],"files",[208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230],"counts",{"_198":64,"_199":153,"_200":64,"_201":202,"_203":204},"contents",[141,142,143,144,145,146,147,148],"upstreamProject",{"_44":96,"_32":46,"_53":54,"_55":-5,"_50":51,"_80":139},"upstreamBranch",{"_44":91,"_39":133,"_134":135,"_32":88,"_89":96,"_13":93,"_90":-5,"_92":-5,"_136":137,"_48":-5,"_86":25,"_50":51,"_100":138,"_65":98,"_99":46},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1754219541287],"updatedAt",["D",1759060888941],"lockfileKey","1759060943979-esm.town_v_tijs_book-explorer@96-main","tijs",{"_102":138,"_109":140},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd2Nod2N0bE1MWFdEUlRYd083ZE5pbXJ1bDAifQ",{"_44":193,"_32":194,"_30":195,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":196,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_27":197},{"_44":188,"_32":189,"_30":190,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":191,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_27":192},{"_44":183,"_32":184,"_30":185,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":186,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_27":187},{"_44":177,"_32":178,"_30":179,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":180,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_27":182},{"_44":171,"_32":172,"_30":173,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":174,"_13":64,"_34":20,"_36":175,"_24":25,"_157":-5,"_27":176},{"_44":165,"_32":166,"_30":167,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":168,"_13":64,"_34":20,"_36":169,"_24":25,"_157":-5,"_27":170},{"_44":159,"_32":160,"_30":161,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":162,"_13":64,"_34":20,"_36":163,"_24":25,"_157":-5,"_27":164},{"_44":149,"_32":150,"_30":151,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":155,"_13":64,"_34":20,"_36":156,"_24":25,"_157":-5,"_27":158},"06d1d52e-9e31-4730-84b0-1de2414624fb","deno.json","01a001de-e00b-7376-9430-93e08c576339","parentId",1,"latest",["D",1786737778590],"{\n \"tasks\": {\n \"quality\": \"deno fmt && deno lint --fix && deno check --allow-import **/*.ts **/*.tsx\",\n \"deploy\": \"deno task quality && vt push\",\n \"check\": \"deno check --allow-import **/*.ts **/*.tsx\",\n \"test\": \"deno test\",\n \"fmt\": \"deno fmt\",\n \"lint\": \"deno lint --fix\"\n },\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\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 \"include\": [\n \"**/*.ts\",\n \"**/*.tsx\"\n ],\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-import-prefix\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n","label",[150],"897e180f-0b1e-4c4d-8087-b0ef39c0450b","README.md","01a001de-e00b-7376-9430-8dc982f72c19",["D",1786737778590],"# Book Explorer 📚\n\nBook explorer is a very simple alternate UI for the\n[Bookhive.buzz](https://bookhive.buzz) social platform for book lovers. This\ntool allows you to edit the status of your bookhive collection books with a\nsimple dropdown per book, or by bulk editing multiple selected books at once.\n\nThe practical reason of making this was that i wanted to fix the read status for\na lot of books at once, but also try my hand at a full oauth implementation,\nincluding editing of your own records, not just viewing.\n\nBut the more high-minded reason (which i came up with after the fact) is that it\nshows off the power of atproto! I did not have to make an account for Bookhive,\ni could just login with Bluesky, upload my books and go. And then because\nbookhive stores my books on the atproto network as records i can make a tool to\nfetch those same records from my own pds (in this case bsky.social but works for\nany pds) and just edit them. And the changes show up in Bookhive! How cool is\nthat.\n\n## How to use\n\n### Quick Start on Val Town\n\n1. **Remix this project** on [Val Town](https://val.town)\n2. **Deploy it** - Val Town will provide you with a public URL\n3. **Visit your app** and enter your Bluesky handle (e.g.,\n `yourname.bsky.social`)\n4. **Authenticate** through the standard OAuth flow\n5. **Manage your books** - view and update your reading status\n\nThat's it! No configuration or setup required.\n\n### Local Development\n\n```bash\n# Clone the repository\ngit clone \ncd book-explorer\n\n# Run with Deno\ndeno task quality # Format, lint, and type check\ndeno run --allow-net --allow-env backend/index.ts\n```\n\n## Technical Details\n\n- **Frontend**: React with TypeScript\n- **Backend**: Hono framework on Deno\n- **Authentication**: OAuth 2.0 with DPoP (Demonstration of Proof-of-Possession)\n- **Database**: SQLite for session storage\n- **Protocol**: ATProto for decentralized data storage\n- **Deployment**: Optimized for Val Town and Deno environments\n\n## Architecture\n\nBook Explorer implements a complete OAuth 2.0 flow for ATProto with:\n\n- **Manual OAuth Implementation**: Built for Deno/Val Town compatibility\n- **DPoP Token Binding**: Secure authentication without bearer token\n vulnerabilities\n- **Session Persistence**: SQLite storage for OAuth sessions and DPoP keys\n- **Direct API Integration**: Raw ATProto XRPC calls for maximum compatibility\n\n## Made by\n\nCreated by **Tijs** ([@tijs.org](https://bsky.app/profile/tijs.org))\n\n## License\n\nMIT License - Feel free to fork, modify, and use this project for your own book\nmanagement needs.\n",[160],"cee654a5-ec7e-4b04-b23f-3545602bd71f",".vtignore","01a001de-e00b-7376-9430-89a26d4b0ef6",["D",1786737778590],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[166],"46f26a22-eba8-40ea-8216-09050a9c4360",".gitignore","01a001de-e00b-7376-9430-84898208b725",["D",1786737778590],".vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\n\n# valtown specific\n.vt",[172],"7add6eb3-7c2e-4c48-ad87-310756480381","shared","01a001de-e00b-7376-9430-8148885c8a6e",["D",1786737778590],"directory",[178],"5dc70f47-d6b9-4be0-9d07-82e1d8b8097e","frontend","01a001de-e00b-7376-9430-764644cdefc9",["D",1786737778590],[184],"4423fbb7-c1e3-4fcf-9240-9a6bd0d6df4c","backend","01a001de-e00b-7376-9430-5eed517d205c",["D",1786737778590],[189],"bc6c40ab-d752-45a3-8ea9-9e1510252a17",".claude","01a001de-e00b-7376-9430-3e47b7ffc11e",["D",1786737778590],[194],"pulls","branches","forks","envVars",{"_205":153,"_207":153},"connections",{"_205":64,"_206":64},"count","unfilledCount","emptyCount",{"_44":193,"_32":194,"_30":195,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":353,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":354,"_27":355},{"_44":346,"_32":347,"_30":348,"_152":195,"_42":43,"_41":153,"_154":60,"_39":349,"_13":64,"_34":20,"_36":350,"_24":25,"_157":-5,"_232":351,"_27":352},{"_44":188,"_32":189,"_30":190,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":343,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":344,"_27":345},{"_44":339,"_32":324,"_30":319,"_152":190,"_42":43,"_41":153,"_154":60,"_39":340,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":341,"_27":342},{"_44":332,"_32":333,"_30":334,"_152":319,"_42":43,"_41":153,"_154":60,"_39":335,"_13":64,"_34":35,"_36":336,"_24":25,"_157":-5,"_232":337,"_27":338},{"_44":325,"_32":326,"_30":327,"_152":319,"_42":43,"_41":153,"_154":60,"_39":328,"_13":64,"_34":35,"_36":329,"_24":25,"_157":-5,"_232":330,"_27":331},{"_44":316,"_32":317,"_30":318,"_152":319,"_42":43,"_41":153,"_154":60,"_39":320,"_13":64,"_34":35,"_36":321,"_24":25,"_157":-5,"_232":322,"_27":323},{"_44":312,"_32":311,"_30":306,"_152":190,"_42":43,"_41":153,"_154":60,"_39":313,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":314,"_27":315},{"_44":303,"_32":304,"_30":305,"_152":306,"_42":43,"_41":153,"_154":60,"_39":307,"_13":64,"_34":35,"_36":308,"_24":25,"_157":-5,"_232":309,"_27":310},{"_44":295,"_32":296,"_30":58,"_152":190,"_42":43,"_41":153,"_154":60,"_39":297,"_13":64,"_34":298,"_36":299,"_24":25,"_157":300,"_232":301,"_27":302},{"_44":183,"_32":184,"_30":185,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":292,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":293,"_27":294},{"_44":288,"_32":280,"_30":275,"_152":185,"_42":43,"_41":153,"_154":60,"_39":289,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":290,"_27":291},{"_44":281,"_32":282,"_30":283,"_152":275,"_42":43,"_41":153,"_154":60,"_39":284,"_13":64,"_34":35,"_36":285,"_24":25,"_157":-5,"_232":286,"_27":287},{"_44":272,"_32":273,"_30":274,"_152":275,"_42":43,"_41":153,"_154":60,"_39":276,"_13":64,"_34":35,"_36":277,"_24":25,"_157":-5,"_232":278,"_27":279},{"_44":265,"_32":266,"_30":267,"_152":185,"_42":43,"_41":153,"_154":60,"_39":268,"_13":64,"_34":20,"_36":269,"_24":25,"_157":-5,"_232":270,"_27":271},{"_44":258,"_32":259,"_30":260,"_152":185,"_42":43,"_41":153,"_154":60,"_39":261,"_13":64,"_34":35,"_36":262,"_24":25,"_157":-5,"_232":263,"_27":264},{"_44":177,"_32":178,"_30":179,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":255,"_13":64,"_34":181,"_36":-5,"_24":25,"_157":-5,"_232":256,"_27":257},{"_44":251,"_32":33,"_30":31,"_152":179,"_42":43,"_41":14,"_154":25,"_39":252,"_13":153,"_34":35,"_36":38,"_24":25,"_157":-5,"_232":253,"_27":254},{"_44":244,"_32":245,"_30":246,"_152":179,"_42":43,"_41":153,"_154":60,"_39":247,"_13":64,"_34":35,"_36":248,"_24":25,"_157":-5,"_232":249,"_27":250},{"_44":171,"_32":172,"_30":173,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":241,"_13":64,"_34":20,"_36":175,"_24":25,"_157":-5,"_232":242,"_27":243},{"_44":165,"_32":166,"_30":167,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":238,"_13":64,"_34":20,"_36":169,"_24":25,"_157":-5,"_232":239,"_27":240},{"_44":159,"_32":160,"_30":161,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":235,"_13":64,"_34":20,"_36":163,"_24":25,"_157":-5,"_232":236,"_27":237},{"_44":149,"_32":150,"_30":151,"_152":-5,"_42":43,"_41":153,"_154":60,"_39":231,"_13":64,"_34":20,"_36":156,"_24":25,"_157":-5,"_232":233,"_27":234},["D",1786737778590],"children",[],[150],["D",1786737778590],[],[160],["D",1786737778590],[],[166],["D",1786737778590],[],[172],"ee56580d-ab46-4ea2-8409-8aed16ae9274","types.ts","01a001de-e00b-7376-9430-7fa011c2d375",["D",1786737778590],"export interface BookRecord {\n $type: \"buzz.bookhive.book\";\n title: string;\n authors: string;\n hiveId: string;\n createdAt: string;\n status: string;\n cover?: {\n $type: \"blob\";\n ref: {\n $link: string;\n };\n mimeType: string;\n size: number;\n };\n startedAt?: string;\n finishedAt?: string;\n stars?: number;\n review?: string;\n}\n\nexport type BookStatus =\n | \"buzz.bookhive.defs#finished\"\n | \"buzz.bookhive.defs#reading\"\n | \"buzz.bookhive.defs#wantToRead\"\n | \"buzz.bookhive.defs#abandoned\"\n | \"buzz.bookhive.defs#owned\";\n\nexport const STATUS_LABELS: Record = {\n \"buzz.bookhive.defs#finished\": \"Finished\",\n \"buzz.bookhive.defs#reading\": \"Currently Reading\",\n \"buzz.bookhive.defs#wantToRead\": \"Want to Read\",\n \"buzz.bookhive.defs#abandoned\": \"Abandoned\",\n \"buzz.bookhive.defs#owned\": \"Owned\",\n};\n\nexport interface AtProtoRecord {\n uri: string;\n cid: string;\n value: BookRecord;\n}\n\nexport interface OAuthSession {\n did: string;\n handle: string;\n pdsUrl: string;\n accessToken: string;\n refreshToken: string;\n}\n\nexport interface OAuthState {\n state: string;\n codeVerifier: string;\n handle: string;\n}\n",[],[178,245],"cde52558-e474-46f1-9bfa-f230dfca4d42",["D",1786738258898],[],[178,33],["D",1786737778590],[225,226],[178],"4d0cfdaf-fc05-490a-94eb-3764eb725dc3","index.tsx","01a001de-e00b-7376-9430-70a43c93199c",["D",1786737778590],"/** @jsxImportSource https://esm.sh/react */\nimport React from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[184,259],"2a5f6946-7224-45ea-b630-72ad72379bf7","index.html","01a001de-e00b-7376-9430-6db0673394dd",["D",1786737778590],"\n\n \n \n \n Book Explorer\n \n \n \n \n

\n \n \n\n",[],[184,266],"f9fc947e-9111-438d-bba5-734775151edb","Login.tsx","01a001de-e00b-7376-9430-657618f20e05","01a001de-e00b-7376-9430-69e64d25a08e",["D",1786737778590],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nexport function Login() {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [handle, setHandle] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(null);\n\n if (!handle.trim()) {\n setError(\"Please enter your Bluesky handle\");\n setLoading(false);\n return;\n }\n\n try {\n // Direct redirect to OAuth package's login endpoint with handle parameter\n globalThis.location.href = `/login?handle=${\n encodeURIComponent(handle.trim())\n }`;\n } catch (error) {\n console.error(\"Login failed:\", error);\n setError(\"Failed to start login process\");\n setLoading(false);\n }\n };\n\n return (\n

\n Login to Book Explorer\n

\n\n

\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Bluesky Handle\n \n {\n const target = e.target as HTMLInputElement;\n setHandle(target.value);\n }}\n placeholder=\"your-handle.bsky.social\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={loading}\n required\n />\n

\n Enter your Bluesky handle (with or without .bsky.social)\n

\n\n \n {loading ? \"Authenticating...\" : \"Login with Bluesky\"}\n \n \n\n

\n 📚 Book Explorer - Manage your Bluesky book collection\n

\n Uses OAuth for secure authentication. Only you can access and modify\n your book records.\n

\n );\n}\n",[],[184,280,273],"components","683d25f3-5f9f-43dc-a8d4-d84311070549","App.tsx","01a001de-e00b-7376-9430-632b012af108",["D",1786737778590],"/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport type {\n AtProtoRecord,\n BookStatus,\n OAuthSession,\n} from \"../../shared/types.ts\";\nimport { STATUS_LABELS } from \"../../shared/types.ts\";\nimport { APP_CONFIG as _APP_CONFIG } from \"../../shared/config.ts\";\nimport { Login } from \"./Login.tsx\";\n\ninterface Toast {\n id: string;\n type: \"success\" | \"error\" | \"info\";\n message: string;\n timestamp: number;\n}\n\nexport function App() {\n const [books, setBooks] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [session, setSession] = useState(null);\n const [selectedBooks, setSelectedBooks] = useState>(new Set());\n const [currentPage, setCurrentPage] = useState(0);\n const [showBulkActions, setShowBulkActions] = useState(false);\n const [toasts, setToasts] = useState([]);\n const [statusFilter, setStatusFilter] = useState(null);\n const [currentView, setCurrentView] = useState<\"books\" | \"tools\">(\"books\");\n const [showUserDropdown, setShowUserDropdown] = useState(false);\n\n const BOOKS_PER_PAGE = 50;\n\n const showToast = (type: Toast[\"type\"], message: string) => {\n const id = Date.now().toString();\n const toast: Toast = { id, type, message, timestamp: Date.now() };\n setToasts((prev) => [...prev, toast]);\n\n // Auto-remove after 5 seconds\n setTimeout(() => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, 5000);\n };\n\n const removeToast = (id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n };\n\n const logRequest = (method: string, url: string, data?: any) => {\n console.group(`🔄 API ${method} ${url}`);\n console.log(\"Timestamp:\", new Date().toISOString());\n if (data) console.log(\"Request body:\", data);\n };\n\n const logResponse = (\n _method: string,\n _url: string,\n response: Response,\n data?: any,\n ) => {\n console.log(`📥 Response: ${response.status} ${response.statusText}`);\n if (data) console.log(\"Response data:\", data);\n console.groupEnd();\n };\n\n const logError = (method: string, url: string, error: any) => {\n console.error(`❌ Request failed: ${method} ${url}`, error);\n console.groupEnd();\n };\n\n // Check authentication status on mount\n useEffect(() => {\n const checkAuth = async () => {\n try {\n const response = await fetch(\"/api/auth/session\");\n const data = await response.json();\n if (data.valid && data.did) {\n setSession({\n did: data.did,\n handle: data.handle || \"\",\n accessToken: \"\", // Not needed for cookie-based auth\n refreshToken: \"\", // Not needed for cookie-based auth\n pdsUrl: data.pdsUrl || \"\",\n });\n } else {\n setSession(null);\n }\n } catch (error) {\n console.error(\"Failed to check auth status:\", error);\n setSession(null);\n }\n };\n\n checkAuth();\n }, []);\n\n // No need to manage localStorage with cookie-based auth\n\n const handleLogout = () => {\n setSession(null);\n setBooks([]);\n setError(null);\n };\n\n const fetchBooks = async () => {\n if (!session) return;\n\n setLoading(true);\n setError(null);\n\n const url = `/api/books`;\n logRequest(\"GET\", url);\n\n try {\n // With cookie-based auth, no need for custom headers\n const response = await fetch(url, {\n credentials: \"include\", // Include cookies for authentication\n });\n const data = await response.json();\n\n logResponse(\"GET\", url, response, data);\n\n if (response.ok) {\n setBooks(data.books);\n showToast(\n \"success\",\n `Found ${data.books.length} books in your collection`,\n );\n } else {\n const errorMsg = data.error || \"Failed to fetch books\";\n setError(errorMsg);\n showToast(\"error\", errorMsg);\n }\n } catch (err) {\n const errorMsg = \"Network error occurred\";\n logError(\"GET\", url, err);\n setError(errorMsg);\n showToast(\"error\", errorMsg);\n } finally {\n setLoading(false);\n }\n };\n\n const updateBookStatus = async (uri: string, newStatus: BookStatus) => {\n if (!session) {\n showToast(\"error\", \"Please login to update book status\");\n return;\n }\n\n const url = `/api/books/${encodeURIComponent(uri)}/status`;\n const requestData = { status: newStatus };\n logRequest(\"PUT\", url, requestData);\n\n try {\n const response = await fetch(url, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n credentials: \"include\", // Include cookies for authentication\n body: JSON.stringify(requestData),\n });\n\n const result = await response.json();\n logResponse(\"PUT\", url, response, result);\n\n if (response.ok) {\n // Update the local state\n setBooks((prevBooks) =>\n prevBooks.map((book) =>\n book.uri === uri\n ? { ...book, value: { ...book.value, status: newStatus } }\n : book\n )\n );\n\n // Find book title for better feedback\n const book = books.find((b) => b.uri === uri);\n const bookTitle = book?.value.title || \"Book\";\n showToast(\n \"success\",\n `Updated \"${bookTitle}\" to ${STATUS_LABELS[newStatus]}`,\n );\n } else {\n if (response.status === 401) {\n showToast(\"error\", \"Session expired. Please login again.\");\n handleLogout();\n } else {\n showToast(\n \"error\",\n `Failed to update status: ${result.error || \"Unknown error\"}`,\n );\n }\n }\n } catch (err) {\n logError(\"PUT\", url, err);\n showToast(\"error\", \"Failed to update book status - network error\");\n }\n };\n\n const updateBulkStatus = async (newStatus: BookStatus) => {\n if (!session || selectedBooks.size === 0) return;\n\n const count = selectedBooks.size;\n showToast(\"info\", `Updating ${count} book${count === 1 ? \"\" : \"s\"}...`);\n\n const uris = Array.from(selectedBooks);\n const results = await Promise.allSettled(\n uris.map((uri) => updateBookStatus(uri, newStatus)),\n );\n\n const successful = results.filter((r) => r.status === \"fulfilled\").length;\n const failed = results.filter((r) => r.status === \"rejected\").length;\n\n if (failed === 0) {\n showToast(\n \"success\",\n `Successfully updated ${successful} book${\n successful === 1 ? \"\" : \"s\"\n } to ${STATUS_LABELS[newStatus]}`,\n );\n } else if (successful === 0) {\n showToast(\n \"error\",\n `Failed to update all ${count} book${count === 1 ? \"\" : \"s\"}`,\n );\n } else {\n showToast(\n \"error\",\n `Updated ${successful} book${\n successful === 1 ? \"\" : \"s\"\n }, but ${failed} failed`,\n );\n }\n\n setSelectedBooks(new Set());\n setShowBulkActions(false);\n };\n\n const toggleBookSelection = (uri: string) => {\n const newSelected = new Set(selectedBooks);\n if (newSelected.has(uri)) {\n newSelected.delete(uri);\n } else {\n newSelected.add(uri);\n }\n setSelectedBooks(newSelected);\n setShowBulkActions(newSelected.size > 0);\n };\n\n const selectAllBooks = () => {\n const allUris = paginatedBooks.map((book) => book.uri);\n setSelectedBooks(new Set(allUris));\n setShowBulkActions(true);\n };\n\n const clearSelection = () => {\n setSelectedBooks(new Set());\n setShowBulkActions(false);\n };\n\n // Filter books based on status\n const filteredBooks = statusFilter\n ? books.filter((book) => book.value.status === statusFilter)\n : books;\n\n // Pagination logic\n const totalPages = Math.ceil(filteredBooks.length / BOOKS_PER_PAGE);\n const startIndex = currentPage * BOOKS_PER_PAGE;\n const paginatedBooks = filteredBooks.slice(\n startIndex,\n startIndex + BOOKS_PER_PAGE,\n );\n\n const goToPage = (page: number) => {\n setCurrentPage(Math.max(0, Math.min(page, totalPages - 1)));\n clearSelection(); // Clear selection when changing pages\n };\n\n const handleStatusFilterChange = (newStatusFilter: BookStatus | null) => {\n setStatusFilter(newStatusFilter);\n setCurrentPage(0); // Reset to first page when filter changes\n clearSelection(); // Clear selection when filter changes\n };\n\n // Auto-load books when session is available\n useEffect(() => {\n if (session) {\n fetchBooks();\n }\n }, [session]);\n\n // Show login screen if not authenticated\n if (!session) {\n return ;\n }\n\n return (\n

\n 📚 Book Explorer\n

\n setShowUserDropdown(!showUserDropdown)}\n className=\"flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors\"\n >\n Logged in as: {session.handle}\n \n \n \n \n {showUserDropdown && (\n

\n {\n setCurrentView(\"books\");\n setShowUserDropdown(false);\n }}\n className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${\n currentView === \"books\" ? \"bg-gray-50 font-medium\" : \"\"\n }`}\n >\n 📚 My Books\n \n {\n setCurrentView(\"tools\");\n setShowUserDropdown(false);\n }}\n className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${\n currentView === \"tools\" ? \"bg-gray-50 font-medium\" : \"\"\n }`}\n >\n 🔧 Tools\n \n

\n {\n handleLogout();\n setShowUserDropdown(false);\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50\"\n >\n Logout\n \n

\n )}\n

\n\n {currentView === \"tools\" ? : (\n <>\n {error && (\n

\n {error}\n

\n )}\n\n {books.length > 0 && (\n

\n My Books ({statusFilter\n ? `${filteredBooks.length} of ${books.length}`\n : books.length})\n

\n Page {currentPage + 1} of {totalPages} • Showing{\" \"}\n {paginatedBooks.length} books\n {statusFilter &&\n ` (filtered by ${STATUS_LABELS[statusFilter]})`}\n

\n\n \n\n {showBulkActions && (\n \n )}\n\n \n\n {totalPages > 1 && (\n \n )}\n

\n )}\n\n {!loading && books.length === 0 && (\n

📚

\n No books found\n

\n Your book collection will appear here once you add some books\n to your Bluesky profile.\n

\n )}\n \n )}\n

\n\n {/* Toast Container */}\n \n

\n );\n}\n\nconst statusOptions: BookStatus[] = [\n \"buzz.bookhive.defs#wantToRead\",\n \"buzz.bookhive.defs#reading\",\n \"buzz.bookhive.defs#finished\",\n \"buzz.bookhive.defs#abandoned\",\n \"buzz.bookhive.defs#owned\",\n];\n\nconst getStatusColor = (status: BookStatus) => {\n switch (status) {\n case \"buzz.bookhive.defs#finished\":\n return \"bg-green-100 text-green-800\";\n case \"buzz.bookhive.defs#reading\":\n return \"bg-blue-100 text-blue-800\";\n case \"buzz.bookhive.defs#wantToRead\":\n return \"bg-yellow-100 text-yellow-800\";\n case \"buzz.bookhive.defs#abandoned\":\n return \"bg-red-100 text-red-800\";\n case \"buzz.bookhive.defs#owned\":\n return \"bg-gray-100 text-gray-800\";\n default:\n return \"bg-gray-100 text-gray-800\";\n }\n};\n\ninterface BooksTableProps {\n books: AtProtoRecord[];\n selectedBooks: Set;\n onToggleSelection: (uri: string) => void;\n onSelectAll: () => void;\n onClearSelection: () => void;\n onStatusUpdate: (uri: string, status: BookStatus) => void;\n}\n\nfunction BooksTable({\n books,\n selectedBooks,\n onToggleSelection,\n onSelectAll,\n onClearSelection,\n onStatusUpdate,\n}: BooksTableProps) {\n const allSelected = books.length > 0 &&\n books.every((book) => selectedBooks.has(book.uri));\n const someSelected = selectedBooks.size > 0 && !allSelected;\n\n const handleSelectAll = () => {\n if (allSelected) {\n onClearSelection();\n } else {\n onSelectAll();\n }\n };\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {books.map((record) => (\n \n ))}\n \n

\n {\n if (input) (input as any).indeterminate = someSelected;\n }}\n onChange={handleSelectAll}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n	\n Title\n	\n Author\n	\n Status\n	\n Added\n	\n Technical\n	\n Actions\n

\n );\n}\n\ninterface BookRowProps {\n record: AtProtoRecord;\n isSelected: boolean;\n onToggleSelection: (uri: string) => void;\n onStatusUpdate: (uri: string, status: BookStatus) => void;\n}\n\nfunction BookRow({\n record,\n isSelected,\n onToggleSelection,\n onStatusUpdate,\n}: BookRowProps) {\n const book = record.value;\n const currentStatus = book.status as BookStatus;\n const [showTechnical, setShowTechnical] = useState(false);\n\n return (\n \n \n onToggleSelection(record.uri)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n \n \n \n {book.title}\n \n {book.stars && (\n

\n {\"★\".repeat(book.stars)} ({book.stars}/10)\n

\n )}\n \n \n \n {book.authors}\n \n \n \n \n {STATUS_LABELS[currentStatus] || currentStatus}\n \n \n \n

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

\n {book.startedAt && (\n

\n Started: {new Date(book.startedAt).toLocaleDateString()}\n

\n )}\n {book.finishedAt && (\n

\n Finished: {new Date(book.finishedAt).toLocaleDateString()}\n

\n )}\n \n \n setShowTechnical(!showTechnical)}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n {showTechnical ? \"Hide\" : \"Show\"}\n \n {showTechnical && (\n

URI: {record.uri.slice(-20)}...

CID: {record.cid.slice(-20)}...

Hive: {book.hiveId}

\n )}\n \n \n

\n {\n const target = e.target as HTMLSelectElement;\n onStatusUpdate(record.uri, target.value as BookStatus);\n }}\n className=\"text-xs border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500\"\n >\n {statusOptions.map((status) => (\n \n ))}\n \n \n \n \n \n \n

\n \n \n );\n}\n\ninterface BulkActionsProps {\n selectedCount: number;\n onStatusUpdate: (status: BookStatus) => void;\n onClearSelection: () => void;\n}\n\nfunction BulkActions(\n { selectedCount, onStatusUpdate, onClearSelection }: BulkActionsProps,\n) {\n return (\n

\n {selectedCount} book{selectedCount === 1 ? \"\" : \"s\"} selected\n

\n Change status to:\n {statusOptions.map((status) => (\n onStatusUpdate(status)}\n className={`px-2 py-1 rounded text-xs ${\n getStatusColor(status)\n } hover:opacity-80`}\n >\n {STATUS_LABELS[status]}\n \n ))}\n \n Clear\n \n

\n );\n}\n\ninterface PaginationProps {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n}\n\nfunction Pagination(\n { currentPage, totalPages, onPageChange }: PaginationProps,\n) {\n const pages = [];\n const showPages = 5;\n let startPage = Math.max(0, currentPage - Math.floor(showPages / 2));\n const endPage = Math.min(totalPages - 1, startPage + showPages - 1);\n\n if (endPage - startPage < showPages - 1) {\n startPage = Math.max(0, endPage - showPages + 1);\n }\n\n for (let i = startPage; i <= endPage; i++) {\n pages.push(i);\n }\n\n return (\n

\n onPageChange(currentPage - 1)}\n disabled={currentPage === 0}\n className=\"px-3 py-1 border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n ← Prev\n \n\n {startPage > 0 && (\n <>\n onPageChange(0)}\n className=\"px-3 py-1 border border-gray-300 rounded hover:bg-gray-50\"\n >\n 1\n \n {startPage > 1 && ...}\n \n )}\n\n {pages.map((page) => (\n onPageChange(page)}\n className={`px-3 py-1 border rounded ${\n page === currentPage\n ? \"bg-blue-600 text-white border-blue-600\"\n : \"border-gray-300 hover:bg-gray-50\"\n }`}\n >\n {page + 1}\n \n ))}\n\n {endPage < totalPages - 1 && (\n <>\n {endPage < totalPages - 2 && (\n ...\n )}\n onPageChange(totalPages - 1)}\n className=\"px-3 py-1 border border-gray-300 rounded hover:bg-gray-50\"\n >\n {totalPages}\n \n \n )}\n\n onPageChange(currentPage + 1)}\n disabled={currentPage === totalPages - 1}\n className=\"px-3 py-1 border border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50\"\n >\n Next →\n \n

\n );\n}\n\ninterface ToastContainerProps {\n toasts: Toast[];\n onRemoveToast: (id: string) => void;\n}\n\nfunction ToastContainer({ toasts, onRemoveToast }: ToastContainerProps) {\n if (toasts.length === 0) return null;\n\n return (\n

\n {toasts.map((toast) => (\n \n ))}\n

\n );\n}\n\ninterface ToastMessageProps {\n toast: Toast;\n onRemove: (id: string) => void;\n}\n\nfunction ToastMessage({ toast, onRemove }: ToastMessageProps) {\n const getToastStyles = (type: Toast[\"type\"]) => {\n switch (type) {\n case \"success\":\n return \"bg-green-500 text-white\";\n case \"error\":\n return \"bg-red-500 text-white\";\n case \"info\":\n return \"bg-blue-500 text-white\";\n default:\n return \"bg-gray-500 text-white\";\n }\n };\n\n const getIcon = (type: Toast[\"type\"]) => {\n switch (type) {\n case \"success\":\n return \"✅\";\n case \"error\":\n return \"❌\";\n case \"info\":\n return \"ℹ️\";\n default:\n return \"📝\";\n }\n };\n\n return (\n \n

\n {getIcon(toast.type)}\n

{toast.message}

\n onRemove(toast.id)}\n className=\"text-white/80 hover:text-white ml-2 shrink-0\"\n >\n ✕\n \n \n );\n}\n\ninterface BookFilterProps {\n currentFilter: BookStatus | null;\n onFilterChange: (filter: BookStatus | null) => void;\n}\n\nfunction BookFilter({ currentFilter, onFilterChange }: BookFilterProps) {\n return (\n

\n \n Filter by status:\n \n {\n const target = e.target as HTMLSelectElement;\n onFilterChange(target.value as BookStatus || null);\n }}\n className=\"border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n {statusOptions.map((status) => (\n \n ))}\n \n

\n\n {currentFilter && (\n onFilterChange(null)}\n className=\"px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 self-start sm:self-auto\"\n >\n Clear Filter\n \n )}\n\n {currentFilter && (\n

\n Showing books with status:{\" \"}\n \n {STATUS_LABELS[currentFilter]}\n \n

\n )}\n

\n );\n}\n\ninterface ToolsViewProps {\n showToast: (type: Toast[\"type\"], message: string) => void;\n}\n\nfunction ToolsView({ showToast }: ToolsViewProps) {\n const [csvFile, setCsvFile] = useState(null);\n const [processing, setProcessing] = useState(false);\n const [processingStatus, setProcessingStatus] = useState(\"\");\n const [results, setResults] = useState<\n {\n total: number;\n updated: number;\n failed: number;\n books: Array<{ title: string; status: string; success: boolean }>;\n } | null\n >(null);\n\n const handleFileChange = (e: React.ChangeEvent) => {\n const target = e.target as HTMLInputElement;\n if (target.files && target.files[0]) {\n setCsvFile(target.files[0]);\n setResults(null);\n }\n };\n\n const parseCsvFile = async (file: File): Promise => {\n const text = await file.text();\n const lines = text.split(\"\\n\");\n const headers = lines[0].split(\",\").map((h) => h.trim().replace(/\"/g, \"\"));\n\n const records = [];\n for (let i = 1; i < lines.length; i++) {\n if (!lines[i].trim()) continue;\n\n // Parse CSV line handling quoted values\n const values: string[] = [];\n let current = \"\";\n let inQuotes = false;\n\n for (let j = 0; j < lines[i].length; j++) {\n const char = lines[i][j];\n if (char === '\"') {\n inQuotes = !inQuotes;\n } else if (char === \",\" && !inQuotes) {\n values.push(current.trim());\n current = \"\";\n } else {\n current += char;\n }\n }\n values.push(current.trim());\n\n const record: any = {};\n headers.forEach((header, index) => {\n record[header] = values[index] || \"\";\n });\n records.push(record);\n }\n\n return records;\n };\n\n const processImport = async () => {\n if (!csvFile) {\n showToast(\"error\", \"Please select a CSV file first\");\n return;\n }\n\n setProcessing(true);\n setProcessingStatus(\"Parsing CSV file...\");\n\n try {\n // Parse CSV\n const csvRecords = await parseCsvFile(csvFile);\n\n // Filter for books with \"to-read\" status\n const toReadBooks = csvRecords.filter(\n (record) => record[\"Read Status\"] === \"to-read\",\n );\n\n if (toReadBooks.length === 0) {\n showToast(\"info\", \"No books with 'to-read' status found in the CSV\");\n setProcessing(false);\n return;\n }\n\n setProcessingStatus(\n `Found ${toReadBooks.length} books to update. Fetching your AT Protocol books...`,\n );\n\n // Fetch current books from AT Protocol\n const response = await fetch(\"/api/books\", {\n credentials: \"include\", // Include cookies for authentication\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch your books\");\n }\n\n const { books } = await response.json();\n\n // Match books by title and find those with \"wantToRead\" status\n const booksToUpdate = [];\n for (const csvBook of toReadBooks) {\n const csvTitle = csvBook.Title.toLowerCase().trim();\n const atProtoBook = books.find((b: AtProtoRecord) => {\n const bookTitle = b.value.title.toLowerCase().trim();\n return (\n bookTitle === csvTitle &&\n b.value.status === \"buzz.bookhive.defs#wantToRead\"\n );\n });\n\n if (atProtoBook) {\n booksToUpdate.push({\n uri: atProtoBook.uri,\n title: atProtoBook.value.title,\n csvTitle: csvBook.Title,\n });\n }\n }\n\n if (booksToUpdate.length === 0) {\n showToast(\n \"info\",\n \"No matching books found with 'Want to Read' status in your AT Protocol records\",\n );\n setProcessing(false);\n return;\n }\n\n setProcessingStatus(\n `Updating ${booksToUpdate.length} books to 'Finished' status...`,\n );\n\n // Update each book\n const updateResults = [];\n let successCount = 0;\n let failCount = 0;\n\n for (const book of booksToUpdate) {\n try {\n const updateResponse = await fetch(\n `/api/books/${encodeURIComponent(book.uri)}/status`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n credentials: \"include\", // Include cookies for authentication\n body: JSON.stringify({ status: \"buzz.bookhive.defs#finished\" }),\n },\n );\n\n if (updateResponse.ok) {\n successCount++;\n updateResults.push({\n title: book.title,\n status: \"Updated to Finished\",\n success: true,\n });\n } else {\n failCount++;\n updateResults.push({\n title: book.title,\n status: \"Failed to update\",\n success: false,\n });\n }\n } catch {\n failCount++;\n updateResults.push({\n title: book.title,\n status: \"Network error\",\n success: false,\n });\n }\n\n setProcessingStatus(\n `Processing: ${successCount + failCount} of ${booksToUpdate.length}`,\n );\n }\n\n setResults({\n total: booksToUpdate.length,\n updated: successCount,\n failed: failCount,\n books: updateResults,\n });\n\n if (successCount > 0) {\n showToast(\n \"success\",\n `Successfully updated ${successCount} book${\n successCount === 1 ? \"\" : \"s\"\n } to Finished status`,\n );\n }\n\n if (failCount > 0) {\n showToast(\n \"error\",\n `Failed to update ${failCount} book${failCount === 1 ? \"\" : \"s\"}`,\n );\n }\n } catch (error) {\n showToast(\n \"error\",\n `Import failed: ${\n error instanceof Error ? error.message : \"Unknown error\"\n }`,\n );\n } finally {\n setProcessing(false);\n setProcessingStatus(\"\");\n }\n };\n\n return (\n

\n 📚 StoryGraph Import Tool\n

\n This tool allows you to sync your StoryGraph reading status with\n your AT Protocol book records. It will:\n

Parse your StoryGraph export CSV file
Find books with \"to-read\" status in the CSV
\n Match them with books in your AT Protocol records that have \"Want\n to Read\" status\n
Update those matched books to \"Finished\" status

\n This is useful if you've been tracking your reading in StoryGraph\n and want to update your Bluesky/AT Protocol book statuses\n accordingly.\n

\n\n

\n \n Upload StoryGraph Export CSV\n \n \n {csvFile && (\n

\n Selected: {csvFile.name}\n

\n )}\n

\n\n \n {processing ? \"Processing...\" : \"Import and Update Books\"}\n \n\n {processingStatus && (\n

\n {processingStatus}\n

\n )}\n

\n\n {results && (\n

\n Import Results\n

\n {results.total}\n

Total Books

\n {results.updated}\n

Updated

\n {results.failed}\n

Failed

\n\n {results.books.length > 0 && (\n

\n Processed Books:\n

\n \n \n \n \n \n \n \n \n {results.books.map((book, index) => (\n \n \n \n \n ))}\n \n

\n Title\n	\n Status\n
\n {book.title}\n	\n \n {book.status}\n \n

\n )}\n

\n );\n}\n",[],[184,280,282],"0d198f15-b4d1-4583-b692-fa0b87feabe8",["D",1786737778590],[220,221],[184,280],["D",1786737778590],[219,222,223],[184],"62fd22a0-3d11-4fee-8660-741c3e47895b","index.ts",["D",1786737778590],"http","import { Hono } from \"https://esm.sh/hono\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createATProtoOAuth } from \"jsr:@tijs/atproto-oauth-hono@^0.2.6\";\nimport type { BookStatus } from \"../shared/types.ts\";\nimport { APP_CONFIG } from \"../shared/config.ts\";\nimport { initializeTables } from \"./database/db.ts\";\nimport { storage } from \"./oauth/storage-adapter.ts\";\n\nconst app = new Hono();\n\n// Initialize database on startup\nawait initializeTables();\n\n// Create OAuth instance using the package\nconst oauth = createATProtoOAuth({\n baseUrl: APP_CONFIG.BASE_URL,\n cookieSecret: APP_CONFIG.COOKIE_SECRET || \"book-explorer-secret\",\n appName: APP_CONFIG.APP_NAME,\n sessionTtl: 60 * 60 * 24, // 24 hours for session validity\n storage,\n});\n\n// OAuth client metadata endpoint\napp.get(\"/client-metadata.json\", (c) => {\n const metadata = {\n \"client_id\": APP_CONFIG.CLIENT_ID,\n \"client_name\": APP_CONFIG.APP_NAME,\n \"client_uri\": APP_CONFIG.BASE_URL,\n \"redirect_uris\": [APP_CONFIG.REDIRECT_URI],\n \"scope\": \"atproto transition:generic\",\n \"grant_types\": [\"authorization_code\", \"refresh_token\"],\n \"response_types\": [\"code\"],\n \"application_type\": \"web\",\n \"token_endpoint_auth_method\": \"none\",\n \"dpop_bound_access_tokens\": true,\n };\n return c.json(metadata);\n});\n\n// Mount OAuth routes - workaround for type instantiation issue\ntry {\n // @ts-ignore - Type instantiation too deep but works at runtime\n app.route(\"/\", oauth.routes);\n console.log(\"✅ OAuth routes mounted successfully\");\n} catch (error) {\n console.error(\"❌ Failed to mount OAuth routes:\", error);\n console.error(\"Error details:\", error.message, error.stack);\n throw error; // Re-throw so we know about OAuth setup issues\n}\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Test endpoint to verify server is working\napp.get(\"/api/health\", (c) => {\n return c.json({\n status: \"ok\",\n timestamp: new Date().toISOString(),\n oauth: !!oauth,\n routes: !!oauth.routes,\n });\n});\n\n// Serve the main HTML file for the root path\napp.get(\"/\", async (_c) => {\n const html = await serveFile(\"/frontend/index.html\", import.meta.url);\n return html;\n});\n\n// Helper function to get authenticated user DID from session\nasync function getAuthenticatedUserDid(\n c: any,\n): Promise<{ did: string; oauthSession: any } | null> {\n try {\n const { getIronSession, unsealData } = await import(\n \"npm:iron-session@8.0.4\"\n );\n\n const COOKIE_SECRET = APP_CONFIG.COOKIE_SECRET;\n let userDid: string | null = null;\n\n // Try Bearer token first (mobile)\n const authHeader = c.req.header(\"Authorization\");\n if (authHeader?.startsWith(\"Bearer \")) {\n try {\n const sealedToken = authHeader.slice(7);\n const sessionData = await unsealData(sealedToken, {\n password: COOKIE_SECRET,\n }) as { did: string };\n userDid = sessionData.did;\n } catch (err) {\n console.log(\"Bearer token authentication failed:\", err);\n }\n }\n\n // Fallback to cookie authentication (web)\n if (!userDid) {\n try {\n interface Session {\n did: string;\n }\n const session = await getIronSession(c.req.raw, c.res, {\n cookieName: \"sid\",\n password: COOKIE_SECRET,\n });\n userDid = session.did;\n\n // Extend session TTL if valid (sliding expiration)\n if (userDid) {\n await session.save();\n }\n } catch (err) {\n console.log(\"Cookie authentication failed:\", err);\n }\n }\n\n if (!userDid) {\n return null;\n }\n\n // Get OAuth session data using the sessions API\n const oauthSession = await oauth.sessions.getOAuthSession(userDid);\n if (!oauthSession) {\n return null;\n }\n\n return { did: userDid, oauthSession };\n } catch (error) {\n console.error(\"Failed to get authenticated user:\", error);\n return null;\n }\n}\n\n// API endpoint to fetch book records for the authorized user\napp.get(\"/api/books\", async (c) => {\n try {\n // Get the authenticated user's DID and OAuth session\n const authResult = await getAuthenticatedUserDid(c);\n\n if (!authResult) {\n return c.json({ error: \"Authentication required\" }, 401);\n }\n\n const { did: userDid, oauthSession } = authResult;\n\n // Fetch all book records using cursor pagination\n const allRecords = [];\n let cursor = undefined;\n\n do {\n const url = new URL(\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.listRecords`,\n );\n url.searchParams.set(\"repo\", userDid);\n url.searchParams.set(\"collection\", \"buzz.bookhive.book\");\n url.searchParams.set(\"limit\", \"100\");\n if (cursor) {\n url.searchParams.set(\"cursor\", cursor);\n }\n\n // Use the OAuth session to make authenticated requests\n const response = await oauthSession.makeRequest(\"GET\", url.toString());\n\n if (!response.ok) {\n console.error(\"Failed to fetch book records:\", {\n status: response.status,\n statusText: response.statusText,\n url: url.toString(),\n });\n const errorText = await response.text();\n console.error(\"Error response body:\", errorText);\n break;\n }\n\n const data = await response.json();\n console.log(\"Fetched records batch:\", {\n count: data.records?.length || 0,\n cursor: data.cursor,\n });\n allRecords.push(...(data.records || []));\n cursor = data.cursor;\n\n if (!cursor || (data.records?.length || 0) === 0) {\n break;\n }\n } while (cursor);\n\n console.log(\"Total records found:\", allRecords.length);\n return c.json({ books: allRecords });\n } catch (error) {\n console.error(\"Failed to fetch books:\", error);\n return c.json({ error: \"Failed to fetch books\" }, 500);\n }\n});\n\n// API endpoint to update book status using OAuth authentication\napp.put(\"/api/books/:uri/status\", async (c) => {\n const uri = decodeURIComponent(c.req.param(\"uri\"));\n const { status }: { status: BookStatus } = await c.req.json();\n\n try {\n // Get the authenticated user's DID and OAuth session\n const authResult = await getAuthenticatedUserDid(c);\n\n if (!authResult) {\n return c.json({ error: \"Authentication required\" }, 401);\n }\n\n const { did: userDid, oauthSession } = authResult;\n\n // Parse the AT URI to get repo, collection, and rkey\n const uriMatch = uri.match(/at:\\/\\/([^\\/]+)\\/([^\\/]+)\\/(.+)/);\n if (!uriMatch) {\n return c.json({ error: \"Invalid AT URI format\" }, 400);\n }\n\n const [, repo, collection, rkey] = uriMatch;\n\n // Verify that the repo matches the authenticated user's DID\n if (repo !== userDid) {\n return c.json({\n error: \"Access denied\",\n message: \"You can only modify your own records\",\n }, 403);\n }\n\n console.log(\n `Updating record ${rkey} in collection ${collection} for ${repo}`,\n );\n\n try {\n // Get the current record\n const getUrl =\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`;\n\n const getResponse = await oauthSession.makeRequest(\"GET\", getUrl);\n\n if (!getResponse.ok) {\n const errorText = await getResponse.text();\n console.error(\"Failed to get current record:\", {\n status: getResponse.status,\n statusText: getResponse.statusText,\n error: errorText,\n });\n return c.json(\n { error: \"Failed to fetch current record\" },\n getResponse.status as 400 | 401 | 403 | 404 | 500,\n );\n }\n\n const currentRecord = await getResponse.json();\n\n // Update the record with new status\n const updatedValue = {\n ...currentRecord.value,\n status: status,\n };\n\n // Update the record using authenticated fetch\n const updateResponse = await oauthSession.makeRequest(\n \"POST\",\n `${oauthSession.pdsUrl}/xrpc/com.atproto.repo.putRecord`,\n {\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n repo,\n collection,\n rkey,\n record: updatedValue,\n swapRecord: currentRecord.cid,\n }),\n },\n );\n\n if (!updateResponse.ok) {\n const errorText = await updateResponse.text();\n console.error(\"Update failed:\", {\n status: updateResponse.status,\n statusText: updateResponse.statusText,\n error: errorText,\n });\n\n // Handle specific OAuth errors\n if (updateResponse.status === 401) {\n return c.json({\n error: \"Authentication failed\",\n message: \"OAuth session expired. Please login again.\",\n }, 401);\n }\n\n return c.json({\n error: \"Failed to update record\",\n message: errorText,\n }, updateResponse.status as 400 | 401 | 403 | 404 | 500);\n }\n\n const result = await updateResponse.json();\n console.log(`Successfully updated record ${rkey} to status ${status}`);\n\n return c.json({\n success: true,\n message: `Status updated to ${status}`,\n uri: result.uri,\n cid: result.cid,\n newStatus: status,\n });\n } catch (repoError: any) {\n console.error(\"Repository operation failed:\", {\n error: repoError,\n repo,\n collection,\n rkey,\n });\n\n // Handle specific ATProto errors\n if (repoError.message?.includes(\"RecordNotFound\")) {\n return c.json({ error: \"Record not found\" }, 404);\n }\n\n if (repoError.message?.includes(\"InvalidSwap\")) {\n return c.json({\n error: \"Record was modified by another process\",\n message: \"Please refresh and try again\",\n }, 409);\n }\n\n // Check if it's an authentication error\n if (\n repoError.status === 401 || repoError.message?.includes(\"Unauthorized\")\n ) {\n return c.json({\n error: \"Authentication failed\",\n message: \"OAuth session expired. Please login again.\",\n }, 401);\n }\n\n return c.json({\n error: \"Failed to update record\",\n message: repoError.message || \"Unknown repository error\",\n }, 500);\n }\n } catch (error) {\n console.error(\"Update error:\", error);\n\n if (error instanceof Error) {\n return c.json({\n error: \"Failed to update book status\",\n message: error.message,\n }, 500);\n }\n\n return c.json({ error: \"Failed to update book status\" }, 500);\n }\n});\n\napp.onError((err, _c) => {\n console.error(\"Error:\", err);\n throw err;\n});\n\nexport default app.fetch;\n","puf-bookhive",[],[189,296],"43d14a28-513a-4b05-b5bd-9b765149df66","storage-adapter.ts","01a001de-e00b-7376-9430-53c552d32b3f","01a001de-e00b-7376-9430-54ae9e9b6177",["D",1786737778590],"/**\n * Storage adapter using Drizzle ORM for @tijs/atproto-oauth-hono\n */\n\nimport { DrizzleStorage } from \"jsr:@tijs/atproto-oauth-hono@^0.2.6/drizzle\";\nimport { db } from \"../database/db.ts\";\n\n// Create singleton instance using Drizzle storage with our database\nexport const storage = new DrizzleStorage(db);\n",[],[189,311,304],"oauth","2428ed7e-1021-4771-b190-5c761072a844",["D",1786737778590],[216],[189,311],"286cb47a-6de9-4c18-bd5b-286ceb83f3fd","schema.ts","01a001de-e00b-7376-9430-48660d88eb16","01a001de-e00b-7376-9430-4f95c845f58e",["D",1786737778590],"// Drizzle schema definitions for Book Explorer\nimport {\n integer,\n sqliteTable,\n text,\n} from \"https://esm.sh/drizzle-orm@0.44.5/sqlite-core\";\n\n// User sessions table for OAuth data\nexport const userSessionsTable = sqliteTable(\"user_sessions\", {\n did: text(\"did\").primaryKey(),\n handle: text(\"handle\").notNull(),\n accessToken: text(\"access_token\").notNull(),\n refreshToken: text(\"refresh_token\").notNull(),\n pdsUrl: text(\"pds_url\"),\n createdAt: integer(\"created_at\").notNull(),\n});\n\n// Iron Session storage for encrypted session cookies (required by atproto-oauth-hono)\nexport const ironSessionStorageTable = 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\n// Export types\nexport type UserSessionInsert = typeof userSessionsTable.$inferInsert;\nexport type UserSessionSelect = typeof userSessionsTable.$inferSelect;\nexport type IronSessionInsert = typeof ironSessionStorageTable.$inferInsert;\nexport type IronSessionSelect = typeof ironSessionStorageTable.$inferSelect;\n",[],[189,324,317],"database","d5b8b43c-615c-4767-af09-520e0e44d02f","migrations.ts","01a001de-e00b-7376-9430-44b41f8a3c27",["D",1786737778590],"// Database migrations for Book Explorer\nimport { rawDb } from \"./db.ts\";\n\nexport async function runMigrations() {\n try {\n // Create user_sessions table\n await rawDb.execute({\n sql: `\n CREATE TABLE IF NOT EXISTS user_sessions (\n did TEXT PRIMARY KEY,\n handle TEXT NOT NULL,\n access_token TEXT NOT NULL,\n refresh_token TEXT NOT NULL,\n pds_url TEXT,\n created_at INTEGER NOT NULL\n )\n `,\n args: [],\n });\n\n // Create iron_session_storage table (required by atproto-oauth-hono)\n await rawDb.execute({\n sql: `\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 args: [],\n });\n\n console.log(\"Database migrations completed successfully\");\n } catch (error) {\n console.error(\"Migration failed:\", error);\n throw error;\n }\n}\n",[],[189,324,326],"07d94cef-1648-4599-8089-767e38f5b0bc","db.ts","01a001de-e00b-7376-9430-416b33e2ebd3",["D",1786737778590],"// Drizzle ORM database module using Val Town's sqlite2\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",[],[189,324,333],"728b0489-e130-49bb-97b4-fc7ee772f5af",["D",1786737778590],[212,213,214],[189,324],["D",1786737778590],[211,215,217],[189],"fd74d727-ca13-4940-adc5-bc1d26ca9d48","settings.local.json","01a001de-e00b-7376-9430-3864f8682872",["D",1786737778590],"{\n \"permissions\": {\n \"allow\": [\n \"mcp__sequential-thinking__process_thought\",\n \"WebFetch(domain:jsr.io)\",\n \"WebFetch(domain:github.com)\",\n \"Bash(deno check:*)\",\n \"Bash(deno task:*)\",\n \"Read(/Users/tijs/projects/Anchor/location-feed-generator/**)\",\n \"Read(/Users/tijs/projects/Anchor/location-feed-generator/**)\",\n \"Read(/Users/tijs/projects/Anchor/location-feed-generator/backend/oauth/**)\",\n \"WebSearch\",\n \"Bash(deno repl:*)\",\n \"Read(//Users/tijs/projects/atproto/atproto-oauth-hono/**)\",\n \"Bash(find:*)\",\n \"Read(//Users/tijs/projects/atproto/**)\"\n ],\n \"deny\": [],\n \"ask\": []\n }\n}\n",[],[194,347],["D",1786737778590],[209],[194],["D",1786737778590],{"_102":101,"_109":105},{"_102":101,"_103":101,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":98,"_99":46,"_100":101},"ctx",{"_80":-5,"_130":393,"_394":395,"_396":397,"_398":25,"_399":25,"_400":25,"_401":60,"_402":-5,"_403":-7,"_404":-7,"_405":64,"_406":25,"_407":25,"_408":-5,"_409":25,"_410":25,"_411":25,"_412":-5},"ENV",{"_364":365,"_366":367,"_368":88,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392},"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"]

Diff · v2