[{"id":"xo6k2dz","name":"D1","pinned":false,"avatar":"","url":"gh://sune-org/store/cloudflare-utilities/d1.sune","updatedAt":1757416303249,"settings":{"model":"g:gemini-2.5-flash","temperature":"","top_p":"","top_k":"","frequency_penalty":"","repetition_penalty":"","min_p":"","top_a":"","verbosity":"","reasoning_effort":"default","system_prompt":"You are Cloudflare D1 GPT. Create queries for the user to quickly operate on their db.","html":"<div x-data=\"d1Manager()\" x-init=\"init()\" class=\"bg-gray-50 text-gray-800 rounded-lg border border-gray-200 m-2 sm:m-4 p-4 max-w-2xl mx-auto text-sm font-sans shadow-md not-prose\">\n  <!-- Header -->\n  <div class=\"flex justify-between items-center pb-3 border-b border-gray-200 mb-4\">\n    <div class=\"flex items-center gap-3\">\n      <i data-lucide=\"database\" class=\"text-gray-600\"></i>\n      <h2 class=\"font-semibold text-lg text-gray-900\">D1 Database Master</h2>\n    </div>\n    <span class=\"text-xs text-gray-400 font-mono\">v1.2.0</span>\n  </div>\n\n  <!-- Loading State -->\n  <template x-if=\"isLoading.initial\">\n    <div class=\"flex flex-col items-center justify-center p-8 text-gray-500\">\n      <i data-lucide=\"loader-circle\" class=\"h-8 w-8 animate-spin mb-2\"></i>\n      <span>Connecting to Cloudflare...</span>\n    </div>\n  </template>\n\n  <!-- Error State -->\n  <template x-if=\"error\">\n    <div @click=\"error=''\" class=\"bg-red-100 border border-red-300 text-red-800 rounded-lg p-3 text-center cursor-pointer\">\n      <p class=\"font-semibold\">An Error Occurred</p>\n      <p x-text=\"error\" class=\"text-xs mt-1\"></p>\n    </div>\n  </template>\n\n  <!-- Main Content -->\n  <div x-show=\"!isLoading.initial && !error\" x-cloak>\n    <!-- Database List View -->\n    <div x-show=\"view === 'list'\">\n      <div class=\"flex justify-between items-center mb-3\">\n        <h3 class=\"font-medium text-gray-700\" x-text=\"accountId ? `Account: ${accountId.substring(0, 8)}...` : 'Databases'\"></h3>\n        <div>\n          <button @click=\"createDb()\" class=\"p-2 rounded-md hover:bg-gray-100 active:scale-95 transition\" title=\"New Database\"><i data-lucide=\"plus\" class=\"h-4 w-4\"></i></button>\n          <button @click=\"fetchDatabases(true)\" class=\"p-2 rounded-md hover:bg-gray-100 active:scale-95 transition\" title=\"Refresh List\"><i data-lucide=\"refresh-cw\" class=\"h-4 w-4\" :class=\"{'animate-spin': isLoading.dbs}\"></i></button>\n        </div>\n      </div>\n      <div class=\"space-y-2\">\n        <template x-for=\"db in databases\" :key=\"db.uuid\">\n          <button @click=\"selectDb(db)\" class=\"w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-300 transition flex items-center justify-between\">\n            <div>\n              <p class=\"font-semibold\" x-text=\"db.name\"></p>\n              <p class=\"text-xs text-gray-500 font-mono\" x-text=\"db.uuid\"></p>\n            </div>\n            <i data-lucide=\"chevron-right\" class=\"h-5 w-5 text-gray-400\"></i>\n          </button>\n        </template>\n        <template x-if=\"!databases.length && !isLoading.dbs\">\n          <p class=\"text-center text-gray-500 py-6\">No D1 databases found.</p>\n        </template>\n      </div>\n    </div>\n\n    <!-- Single Database View -->\n    <div x-show=\"view === 'db'\" x-cloak>\n      <div class=\"flex items-center gap-2 mb-4\">\n        <button @click=\"goBack()\" class=\"p-2 rounded-md hover:bg-gray-100 active:scale-95 transition\" title=\"Back to list\"><i data-lucide=\"arrow-left\" class=\"h-5 w-5\"></i></button>\n        <div>\n          <h3 class=\"font-semibold text-base leading-tight\" x-text=\"selectedDb.name\"></h3>\n          <p class=\"text-xs text-gray-500 font-mono\" x-text=\"selectedDb.uuid\"></p>\n        </div>\n      </div>\n      \n      <!-- Tabs -->\n      <div class=\"border-b border-gray-200 mb-4\">\n          <nav class=\"-mb-px flex gap-4 text-xs font-medium\">\n              <button @click=\"activeTab='query'\" :class=\"{'border-blue-500 text-blue-600': activeTab==='query', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab!=='query'}\" class=\"whitespace-nowrap py-2 px-1 border-b-2\">Query</button>\n              <button @click=\"activeTab='schema'\" :class=\"{'border-blue-500 text-blue-600': activeTab==='schema', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab!=='schema'}\" class=\"whitespace-nowrap py-2 px-1 border-b-2\">Schema</button>\n              <button @click=\"activeTab='actions'\" :class=\"{'border-blue-500 text-blue-600': activeTab==='actions', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab!=='actions'}\" class=\"whitespace-nowrap py-2 px-1 border-b-2\">Actions</button>\n          </nav>\n      </div>\n\n      <!-- Query Tab -->\n      <div x-show=\"activeTab === 'query'\" class=\"space-y-3\">\n        <div>\n          <div class=\"flex justify-between items-center mb-1\">\n            <label for=\"d1-query\" class=\"font-medium text-gray-800\">SQL Query <span class=\"text-gray-400 font-normal text-xs\">(Ctrl+Enter)</span></label>\n            <div class=\"flex items-center gap-1\">\n                <button @click=\"pasteQuery()\" class=\"p-1.5 rounded hover:bg-gray-200 transition\" title=\"Paste\"><i data-lucide=\"clipboard-paste\" class=\"h-3.5 w-3.5\"></i></button>\n                <button @click=\"clearQuery()\" class=\"p-1.5 rounded hover:bg-gray-200 transition\" title=\"Clear\"><i data-lucide=\"x\" class=\"h-3.5 w-3.5\"></i></button>\n            </div>\n          </div>\n          <textarea id=\"d1-query\" x-ref=\"queryTextarea\" x-model=\"query\" rows=\"5\" class=\"w-full p-2 border border-gray-300 rounded-md bg-white font-mono text-[13px] focus:ring-2 focus:ring-blue-400 focus:border-blue-400\" placeholder=\"SELECT * FROM users LIMIT 5;\"></textarea>\n        </div>\n        <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs\">\n            <button @click=\"useSnippet('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT);')\" class=\"p-2 bg-white border rounded-md hover:bg-gray-100 transition truncate\">CREATE TABLE</button>\n            <button @click=\"useSnippet('INSERT INTO users (name, email) VALUES (\\'Master\\', \\'master@sune.dev\\');')\" class=\"p-2 bg-white border rounded-md hover:bg-gray-100 transition truncate\">INSERT INTO</button>\n            <button @click=\"useSnippet('SELECT * FROM users;')\" class=\"p-2 bg-white border rounded-md hover:bg-gray-100 transition truncate\">SELECT *</button>\n            <button @click=\"useSnippet('DROP TABLE users;')\" class=\"p-2 bg-white border rounded-md hover:bg-gray-100 transition truncate\">DROP TABLE</button>\n        </div>\n        <div class=\"flex gap-2\">\n            <button @click=\"runQuery()\" :disabled=\"isLoading.query\" class=\"flex-1 flex items-center justify-center gap-2 bg-black text-white font-semibold px-4 py-2.5 rounded-lg hover:bg-gray-800 active:scale-[.98] transition disabled:opacity-60\">\n                <i data-lucide=\"play\" class=\"h-4 w-4\"></i>\n                <span x-text=\"isLoading.query ? 'Executing...' : 'Run Query'\"></span>\n            </button>\n            <div class=\"relative\" x-data=\"{ open: false }\" @click.outside=\"open = false\">\n                <button @click=\"open = !open\" :disabled=\"!queryHistory.length\" class=\"h-full px-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50\" title=\"Query History\"><i data-lucide=\"history\" class=\"h-4 w-4\"></i></button>\n                <div x-show=\"open\" x-transition class=\"absolute bottom-full right-0 mb-2 w-72 bg-white border rounded-lg shadow-lg max-h-60 overflow-y-auto z-10\">\n                    <template x-for=\"(h, i) in queryHistory\" :key=\"i\"><button @click=\"useSnippet(h); open=false\" class=\"w-full text-left text-xs p-2 hover:bg-gray-100 font-mono truncate\" x-text=\"h\"></button></template>\n                </div>\n            </div>\n        </div>\n        <div x-show=\"results\" class=\"pt-2\" x-cloak x-html=\"renderResults()\"></div>\n      </div>\n      \n      <!-- Schema Tab -->\n      <div x-show=\"activeTab === 'schema'\" class=\"space-y-3\">\n        <div class=\"flex justify-between items-center\">\n            <h4 class=\"font-medium\">Database Schema</h4>\n            <div class=\"flex items-center\">\n              <button @click=\"copySchema()\" :disabled=\"!tables.length\" class=\"p-2 rounded-md hover:bg-gray-100 active:scale-95 transition disabled:opacity-50\" :title=\"copiedSchema ? 'Copied!' : 'Copy Schema'\">\n                  <i data-lucide=\"check\" class=\"h-4 w-4 text-green-600\" x-show=\"copiedSchema\" x-transition></i>\n                  <i data-lucide=\"clipboard-copy\" class=\"h-4 w-4\" x-show=\"!copiedSchema\"></i>\n              </button>\n              <button @click=\"fetchTables(true)\" class=\"p-2 rounded-md hover:bg-gray-100 active:scale-95 transition\" title=\"Refresh Schema\"><i data-lucide=\"refresh-cw\" class=\"h-4 w-4\" :class=\"{'animate-spin':isLoading.tables}\"></i></button>\n            </div>\n        </div>\n        <div class=\"bg-white p-3 border rounded-md text-gray-600\">\n            The schema is the blueprint of your database, defining its tables and columns from the `CREATE TABLE` statements. This view is empty if no tables exist.\n        </div>\n        <pre class=\"text-xs bg-gray-900 text-white p-3 rounded-md overflow-auto max-h-80\" x-text=\"tables.length ? tables.map(t => t.sql).join(';\\n\\n') + ';' : 'No tables found.'\"></pre>\n      </div>\n\n      <!-- Actions Tab -->\n      <div x-show=\"activeTab === 'actions'\" class=\"space-y-4\">\n          <div>\n            <h4 class=\"font-medium mb-2\">Backup</h4>\n            <p class=\"mb-2 text-gray-600\">Create and download a `.sql` file containing the commands to recreate your database.</p>\n            <button @click=\"createBackup(selectedDb)\" :disabled=\"isLoading.backup\" class=\"inline-flex items-center justify-center gap-1.5 p-2 bg-white border rounded-md hover:bg-gray-100 transition disabled:opacity-50\">\n              <i data-lucide=\"download\" class=\"h-3.5 w-3.5\"></i>\n              <span x-text=\"isLoading.backup?'Backing up...':'Download Backup'\"></span>\n            </button>\n          </div>\n          <div>\n            <h4 class=\"font-medium mb-2 text-red-700\">Danger Zone</h4>\n            <div class=\"bg-white border border-red-200 p-3 rounded-lg\">\n                <p class=\"mb-2 text-gray-600\">Permanently delete this database. This action is irreversible and will delete all data within it.</p>\n                <button @click=\"deleteDb(selectedDb)\" class=\"inline-flex items-center justify-center gap-1.5 p-2 bg-white border border-red-300 text-red-600 rounded-md hover:bg-red-50 transition\">\n                    <i data-lucide=\"trash-2\" class=\"h-3.5 w-3.5\"></i>\n                    <span>Delete this Database</span>\n                </button>\n            </div>\n          </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\nfunction d1Manager() {\n  const esc=s=>String(s).replace(/[&<>'\"`]/g,c=>({\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",\"\\\"\":\"&quot;\",\"'\":\"&#39;\",\"`\":\"&#96;\"}[c]));\n  return {\n    isLoading: { initial: true, dbs: false, query: false, backup: false, tables: false },\n    error: '', accountId: '', databases: [], selectedDb: null, tables: [],\n    query: 'SELECT name, sql FROM sqlite_master WHERE type=\\'table\\';',\n    queryHistory: [], results: null, view: 'list', activeTab: 'query', copiedSchema: false,\n    cacheKey: `sune_${window.SUNE.id}_d1_cache`,\n    historyKey: `sune_${window.SUNE.id}_d1_history`,\n\n    init() {\n      this.$watch('query', val => this.saveState());\n      this.loadState(); this.fetchAccountId();\n      this.$nextTick(() => { this.$refs.queryTextarea?.addEventListener('keydown', e => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); this.runQuery(); } }); });\n    },\n    async cfApi(endpoint, options = {}) {\n      this.error = '';\n      const headers = { ...options.headers, 'Authorization': `Bearer ${window.USER.apiKeyCF}`, 'Content-Type': 'application/json' };\n      try {\n        const res = options.raw ? await fetch(`https://apip.awww.workers.dev/client/v4${endpoint}`, { ...options, headers }) : await fetch(`https://apip.awww.workers.dev/client/v4${endpoint}`, { ...options, headers }).then(r => r.json());\n        if (res.success === false || res.ok === false) throw new Error(res.errors?.[0]?.message || `HTTP error! Status: ${res.status}`);\n        return res;\n      } catch (e) { this.error = e.message; console.error('D1 API Error:', e); Object.keys(this.isLoading).forEach(k => this.isLoading[k] = false); }\n    },\n    saveState() {\n      try { localStorage.setItem(this.cacheKey, JSON.stringify({ selectedDbUuid: this.selectedDb?.uuid })); localStorage.setItem(this.historyKey, JSON.stringify(this.queryHistory)); } catch (e) { console.warn('Failed to save state', e) }\n    },\n    loadState() {\n      try { this.initialDbUuid = JSON.parse(localStorage.getItem(this.cacheKey))?.selectedDbUuid || null; this.queryHistory = JSON.parse(localStorage.getItem(this.historyKey)) || []; } catch (e) { console.warn('Failed to load state', e) }\n    },\n    addToHistory(q) { if (!q || q === this.queryHistory[0]) return; this.queryHistory.unshift(q); if (this.queryHistory.length > 20) this.queryHistory.pop(); this.saveState(); },\n    async fetchAccountId() {\n      if (!window.USER.apiKeyCF) { this.error = \"Cloudflare API Token not set.\"; this.isLoading.initial = false; return; }\n      const data = await this.cfApi('/accounts'); if (data?.result?.[0]?.id) { this.accountId = data.result[0].id; await this.fetchDatabases(); } this.isLoading.initial = false;\n    },\n    async fetchDatabases(force = false) {\n      if (!this.accountId) return; this.isLoading.dbs = true;\n      const data = await this.cfApi(`/accounts/${this.accountId}/d1/database`);\n      if (data?.result) { this.databases = data.result.sort((a,b) => a.name.localeCompare(b.name)); if (this.initialDbUuid && !force) { const db = this.databases.find(db => db.uuid === this.initialDbUuid); if (db) this.selectDb(db); this.initialDbUuid = null; } }\n      this.isLoading.dbs = false;\n    },\n    async selectDb(db) { this.selectedDb = db; this.results = null; this.view = 'db'; this.activeTab='query'; await this.fetchTables(); this.saveState(); },\n    async fetchTables(force = false) {\n      if (!this.selectedDb) return; this.isLoading.tables = true;\n      const res = await this.cfApi(`/accounts/${this.accountId}/d1/database/${this.selectedDb.uuid}/query`, { method: 'POST', body: JSON.stringify({ sql: `SELECT name, sql FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' AND name NOT LIKE '_cf_%';` }), });\n      if (res?.result?.[0]?.results) this.tables = res.result[0].results; this.isLoading.tables = false;\n    },\n    async runQuery() {\n      const q = this.query.trim(); if (!q || !this.selectedDb) return;\n      this.isLoading.query = true; this.addToHistory(q);\n      this.results = await this.cfApi(`/accounts/${this.accountId}/d1/database/${this.selectedDb.uuid}/query`, { method: 'POST', body: JSON.stringify({ sql: q }), }).then(d => d?.result?.[0] || d);\n      this.isLoading.query = false;\n    },\n    async createDb() {\n      const name = prompt(\"Enter new database name:\"); if (!name?.trim()) return;\n      this.isLoading.dbs = true; await this.cfApi(`/accounts/${this.accountId}/d1/database`, { method: 'POST', body: JSON.stringify({ name: name.trim() }), }); await this.fetchDatabases(true);\n    },\n    async deleteDb(db) {\n      if (!confirm(`PERMANENTLY DELETE \"${db.name}\"?\\nThis cannot be undone.`)) return;\n      this.isLoading.dbs = true; await this.cfApi(`/accounts/${this.accountId}/d1/database/${db.uuid}`, { method: 'DELETE' }); this.goBack(); await this.fetchDatabases(true);\n    },\n    async createBackup(db) {\n      if (!confirm(`Create and download a backup for \"${db.name}\"?`)) return; this.isLoading.backup = true;\n      const res = await this.cfApi(`/accounts/${this.accountId}/d1/database/${db.uuid}/backup`, { raw: true });\n      if (res?.ok) {\n        const blob=await res.blob(),url=URL.createObjectURL(blob),a=Object.assign(document.createElement('a'),{href:url,download:`${db.name}-${new Date().toISOString().split('T')[0]}.sql`});\n        document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);\n      } this.isLoading.backup = false;\n    },\n    async copySchema() {\n      if (!this.tables.length) return;\n      try { await navigator.clipboard.writeText(this.tables.map(t=>t.sql).join(';\\n\\n')+';'); this.copiedSchema=true; setTimeout(()=>this.copiedSchema=false, 2000); }\n      catch(e){console.error('Failed to copy schema',e)}\n    },\n    async pasteQuery() { try { this.query = await navigator.clipboard.readText(); } catch (e) { console.error('Paste failed', e); } },\n    clearQuery() { this.query = ''; },\n    useSnippet(text) { this.query = text; },\n    goBack() { this.selectedDb = null; this.tables = []; this.view = 'list'; this.results = null; this.saveState(); },\n    renderResults() {\n      if (!this.results) return '';\n      if (this.results.success) {\n        const r=this.results.results||[],info=`<p class=\"font-semibold text-green-800\">Success</p><p class=\"text-xs text-green-700\">Duration: ${this.results.meta.duration.toFixed(2)}ms. ${r.length} rows returned.</p>`;\n        if(!r.length)return `<div class=\"bg-green-50 border border-green-200 p-3 rounded-lg\">${info}</div>`;\n        const h=Object.keys(r[0]).map(k=>`<th class=\"p-1.5 font-medium border-b border-green-200\">${esc(k)}</th>`).join(''),b=r.map(row=>`<tr class=\"border-b border-green-100 last:border-b-0\">${Object.values(row).map(v=>`<td class=\"p-1.5 align-top\">${esc(v)}</td>`).join('')}</tr>`).join('');\n        return `<div class=\"bg-green-50 border border-green-200 p-3 rounded-lg\">${info}<div class=\"mt-3 overflow-x-auto border-t border-green-200 pt-2\"><table class=\"w-full text-left text-xs\"><thead><tr>${h}</tr></thead><tbody>${b}</tbody></table></div></div>`;\n      }return `<div class=\"bg-red-50 border border-red-200 p-3 rounded-lg\"><p class=\"font-semibold text-red-800\">Query Failed</p><pre class=\"text-xs text-red-700 whitespace-pre-wrap font-mono mt-1\">${esc(this.results.errors[0].message)}</pre></div>`;\n    }\n  }\n}\n</script>\n","extension_html":"<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private />","hide_composer":false},"storage":{}}]