{"version":3,"file":"static/js/pyspace.js?sha=9c425a058460","sources":["webpack://ide/webpack/runtime/create_fake_namespace_object","webpack://ide/webpack/runtime/load_script","webpack://ide/webpack/runtime/on_chunk_loaded","webpack://ide/webpack/runtime/jsonp_chunk_loading","webpack://ide/./src/analysis/completions.ts","webpack://ide/./src/code_mirror/autocompletions/analysis-status.ts","webpack://ide/./src/analysis/diagnostics.ts","webpack://ide/./src/code_mirror/autocompletions/diagnostics.ts","webpack://ide/./src/code_mirror/autocompletions/info.tsx","webpack://ide/./src/code_mirror/autocompletions/paramater_tooltip.tsx","webpack://ide/./src/code_mirror/editors/index.ts","webpack://ide/./src/code_mirror/utils/conflict_actions.tsx","webpack://ide/./src/code_mirror/utils/create_event_handler_widget.ts","webpack://ide/./src/code_mirror/utils/jump_to_definition.ts","webpack://ide/./src/code_mirror/utils/server_panels.tsx","webpack://ide/./src/components/Runner.tsx","webpack://ide/./src/components/bottom_panel/REPL.tsx","webpack://ide/./src/components/modals/PipAudit.tsx","webpack://ide/./src/components/modals/SaveConflict.tsx","webpack://ide/./src/components/modals/ScheduledTaskModal.tsx","webpack://ide/./src/components/modals/UpgradePrompts.tsx","webpack://ide/./src/components/modals/UriUploader.tsx","webpack://ide/./src/components/modals/index.tsx","webpack://ide/./src/components/modals/names/common-modals.ts","webpack://ide/./src/components/reusable/ButtonGroup.tsx","webpack://ide/./src/components/reusable/ErrorBoundary.tsx","webpack://ide/./src/components/reusable/ZenModeButtons.tsx","webpack://ide/./src/components/sidebar/SecondaryNavSection.tsx","webpack://ide/./src/controllers/secrets.ts","webpack://ide/./src/components/tabs/SecretsTab.tsx","webpack://ide/./src/components/tabs/TabToolbar.tsx","webpack://ide/./src/components/tabs/scheduled_tasks/ScheduledTaskLastRunInfo.tsx","webpack://ide/./src/components/tabs/settings/PythonAndPackagesConfig.tsx","webpack://ide/./src/controllers/app/saving.ts","webpack://ide/./src/instance-globals.ts","webpack://ide/./src/pyspace/common/components/Button.tsx","webpack://ide/./src/pyspace/common/components/TextArea.tsx","webpack://ide/./src/pyspace/common/components/TextInput.tsx","webpack://ide/./src/pyspace/common/modals/ReportAbuse.tsx","webpack://ide/./src/pyspace/common/modals/UploadFile.tsx","webpack://ide/./src/pyspace/gadget_editor/modals/names/pyspace-gadget-editor-modals.ts","webpack://ide/./src/pyspace/gadget_editor/components/GadgetCrud.tsx","webpack://ide/./src/pyspace/gadget_editor/modals/EditGadgetDetailsModal.tsx","webpack://ide/./src/pyspace/gadget_editor/modals/ScheduleScriptModal.tsx","webpack://ide/./src/pyspace/gadget_editor/modals/CloneReadOnlyGadgetModal.tsx","webpack://ide/./src/pyspace/gadget_editor/modals/ShareGadgetModal.tsx","webpack://ide/./src/pyspace/gadget_editor/store/gadget-store.ts","webpack://ide/./src/pyspace/utils/hooks/use-runner.ts","webpack://ide/./src/pyspace/gadget_editor/components/Footer.tsx","webpack://ide/./src/pyspace/gadget_editor/components/GadgetEditor.tsx","webpack://ide/./src/pyspace/utils/hooks/use-pyspace-keybindings.ts","webpack://ide/./src/pyspace/gadget_editor/controllers/gadget.ts","webpack://ide/./src/pyspace/pyspace-api.ts","webpack://ide/./src/pyspace/common/components/PySpaceToggle.tsx","webpack://ide/./src/pyspace/site/ComponentsExpo.tsx","webpack://ide/./src/pyspace/site/components/AccountSettings.tsx","webpack://ide/./src/pyspace/site/controllers/space.ts","webpack://ide/./src/pyspace/site/controllers/profile.ts","webpack://ide/./src/pyspace/site/components/GadgetList.tsx","webpack://ide/./src/pyspace/site/components/Spaces.tsx","webpack://ide/./src/pyspace/site/components/GlobalSearch.tsx","webpack://ide/./src/pyspace/site/components/UserProfileEditor.tsx","webpack://ide/./src/pyspace/pyspace.tsx","webpack://ide/./src/router/gadget-navigation.ts","webpack://ide/./src/pyspace/site/components/PopoutEditor.tsx","webpack://ide/./src/pyspace/site/components/SiteProvider.tsx","webpack://ide/./src/pyspace/site/components/UserMenu.tsx","webpack://ide/./src/pyspace/site/controllers/my-gadgets.ts","webpack://ide/./src/pyspace/site/modals/Notifications.tsx","webpack://ide/./src/pyspace/site/modals/names/pyspace-site-modals.ts","webpack://ide/./src/pyspace/site/modals/EditUserProfileModal.tsx","webpack://ide/./src/pyspace/site/modals/TestSiteMediumModal.tsx","webpack://ide/./src/pyspace/site/modals/Following.tsx","webpack://ide/./src/pyspace/site/store/pyspace-site-store.ts","webpack://ide/./src/pyspace/utils/hooks/use-root-elements.ts","webpack://ide/./src/pyspace/utils/hooks/use-screenshot/index.tsx","webpack://ide/./src/router/navigation.ts","webpack://ide/./src/store/editor-store.ts","webpack://ide/./src/theme/ThemeProvider.tsx","webpack://ide/./src/theme/styles.ts","webpack://ide/./src/util/TabPanelRefContext.tsx","webpack://ide/./src/util/hooks/index.ts","webpack://ide/./src/util/hooks/use-media-query.ts","webpack://ide/webpack/runtime/css loading","webpack://ide/webpack/runtime/compat_get_default_export","webpack://ide/webpack/runtime/define_property_getters","webpack://ide/webpack/runtime/ensure_chunk","webpack://ide/webpack/runtime/get javascript chunk filename","webpack://ide/webpack/runtime/get mini-css chunk filename","webpack://ide/webpack/runtime/global","webpack://ide/webpack/runtime/has_own_property","webpack://ide/webpack/runtime/make_namespace_object","webpack://ide/webpack/runtime/node_module_decorator","webpack://ide/webpack/runtime/nonce","webpack://ide/webpack/runtime/public_path"],"sourcesContent":["var getProto = Object.getPrototypeOf ? function(obj) { return Object.getPrototypeOf(obj); } : function(obj) { return obj.__proto__; };\nvar leafPrototypes;\n// create a fake namespace object\n// mode & 1: value is a module id, require it\n// mode & 2: merge all properties of value into the ns\n// mode & 4: return value when already ns object\n// mode & 16: return value when it's Promise-like\n// mode & 8|1: behave like require\n__webpack_require__.t = function(value, mode) {\n\tif(mode & 1) value = this(value);\n\tif(mode & 8) return value;\n\tif(typeof value === 'object' && value) {\n\t\tif((mode & 4) && value.__esModule) return value;\n\t\tif((mode & 16) && typeof value.then === 'function') return value;\n\t}\n\tvar ns = Object.create(null);\n __webpack_require__.r(ns);\n\tvar def = {};\n\tleafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];\n\tfor(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {\n\t\tObject.getOwnPropertyNames(current).forEach(function(key) { def[key] = function() { return value[key]; } });\n\t}\n\tdef['default'] = function() { return value; };\n\t__webpack_require__.d(ns, def);\n\treturn ns;\n};","var inProgress = {};\n\nvar dataWebpackPrefix = \"ide:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = function (url, done, key, chunkId) {\n\tif (inProgress[url]) {\n\t\tinProgress[url].push(done);\n\t\treturn;\n\t}\n\tvar script, needAttach;\n\tif (key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor (var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif (s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) {\n\t\t\t\tscript = s;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\tif (!script) {\n\t\tneedAttach = true;\n\t\t\n script = document.createElement('script');\n \n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\t\t\n\t\tscript.src = url;\n\t\t\n \n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = function (prev, event) {\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns &&\n\t\t\tdoneFns.forEach(function (fn) {\n\t\t\t\treturn fn(event);\n\t\t\t});\n\t\tif (prev) return prev(event);\n\t};\n\tvar timeout = setTimeout(\n\t\tonScriptComplete.bind(null, undefined, {\n\t\t\ttype: 'timeout',\n\t\t\ttarget: script\n\t\t}),\n\t\t120000\n\t);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif (chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor (var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--)\n\t\t\tdeferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\nvar fn = deferred[i][1];\nvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif (\n\t\t\t\t(priority & (1 === 0) || notFulfilled >= priority) &&\n\t\t\t\tObject.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })\n\t\t\t) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif (priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif (fulfilled) {\n\t\t\tdeferred.splice(i--, 1);\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};\n","__webpack_require__.b = document.baseURI || self.location.href;\n\n // object to store loaded and loading chunks\n // undefined = chunk not loaded, null = chunk preloaded/prefetched\n // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\n var installedChunks = {\"2560\": 0,};\n \n __webpack_require__.f.j = function (chunkId, promises) {\n // JSONP chunk loading for javascript\nvar installedChunkData = __webpack_require__.o(installedChunks, chunkId)\n\t? installedChunks[chunkId]\n\t: undefined;\nif (installedChunkData !== 0) {\n\t// 0 means \"already installed\".\n\n\t// a Promise means \"currently loading\".\n\tif (installedChunkData) {\n\t\tpromises.push(installedChunkData[2]);\n\t} else {\n\t\tif (2935 != chunkId) {\n\t\t\t// setup Promise in chunk cache\n\t\t\tvar promise = new Promise(function(resolve, reject) { installedChunkData = installedChunks[chunkId] = [resolve, reject]; });\n\t\t\tpromises.push((installedChunkData[2] = promise));\n\n\t\t\t// start chunk loading\n\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\tvar error = new Error();\n\t\t\tvar loadingEnded = function (event) {\n\t\t\t\tif (__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\tif (installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\tif (installedChunkData) {\n\t\t\t\t\t\tvar errorType =\n\t\t\t\t\t\t\tevent && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\terror.message =\n\t\t\t\t\t\t\t'Loading chunk ' +\n\t\t\t\t\t\t\tchunkId +\n\t\t\t\t\t\t\t' failed.\\n(' +\n\t\t\t\t\t\t\terrorType +\n\t\t\t\t\t\t\t': ' +\n\t\t\t\t\t\t\trealSrc +\n\t\t\t\t\t\t\t')';\n\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t} else installedChunks[chunkId] = 0;\n\n\t}\n}\n\n }\n __webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\nvar moreModules = data[1];\nvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif (chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor (moduleId in moreModules) {\n\t\t\tif (__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif (runtime) var result = runtime(__webpack_require__);\n\t}\n\tif (parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor (; i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif (\n\t\t\t__webpack_require__.o(installedChunks, chunkId) &&\n\t\t\tinstalledChunks[chunkId]\n\t\t) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n};\n\nvar chunkLoadingGlobal = self[\"webpackChunkide\"] = self[\"webpackChunkide\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));\n","import {\n type Completion,\n type CompletionContext,\n type CompletionResult,\n type CompletionSource,\n pickedCompletion,\n snippet,\n startCompletion,\n} from \"@codemirror/autocomplete\";\nimport { isolateHistory } from \"@codemirror/commands\";\nimport { syntaxTree } from \"@codemirror/language\";\nimport { forceLinting } from \"@codemirror/lint\";\nimport { StateEffect, Transaction, type TransactionSpec } from \"@codemirror/state\";\nimport type { EditorView } from \"@codemirror/view\";\nimport type { SyntaxNode } from \"@lezer/common\";\nimport { pythonCompletionAllowed } from \"@/code_mirror/autocompletions/completion-extension\";\nimport { pythonDocumentationElement } from \"@/code_mirror/autocompletions/info\";\nimport { type LspRange, lspRangeToOffsets } from \"./positions\";\n\nexport type { LspRange } from \"./positions\";\n\nexport interface LspCompletion {\n label: string;\n labelDetails?: { detail?: string; description?: string };\n kind?: number;\n detail?: string;\n documentation?: string | { kind: string; value: string };\n sortText?: string;\n filterText?: string;\n insertText?: string;\n insertTextFormat?: number;\n textEdit?: { newText: string; range: LspRange } | { newText: string; insert: LspRange; replace: LspRange };\n additionalTextEdits?: { range: LspRange; newText: string }[];\n data?: unknown;\n}\nexport interface LspCompletionList {\n items: LspCompletion[];\n isIncomplete?: boolean;\n}\nexport type PythonCompletionRequest = (options: {\n method: \"textDocument/completion\" | \"completionItem/resolve\";\n offset: number;\n signal: AbortSignal;\n item?: LspCompletion;\n autoImport?: false | \"only\";\n}) => Promise<{ result: LspCompletionList | LspCompletion | null; isCurrent(): boolean } | undefined>;\n\nconst kinds: Record = {\n 1: \"text\",\n 2: \"method\",\n 3: \"function\",\n 4: \"function\",\n 5: \"property\",\n 6: \"variable\",\n 7: \"class\",\n 8: \"interface\",\n 9: \"namespace\",\n 10: \"property\",\n 12: \"constant\",\n 13: \"enum\",\n 14: \"keyword\",\n 15: \"text\",\n 21: \"constant\",\n 22: \"constant\",\n};\n\nfunction insertCallParentheses(context: CompletionContext, item: LspCompletion, to: number) {\n if (![2, 3, 4, 7].includes(item.kind ?? 0) || item.insertTextFormat === 2) return false;\n // Semantic exceptions come from the adapter; syntax decisions use the\n // editor's existing Python tree and run only when accepting a suggestion.\n const preference =\n typeof item.data === \"object\" && item.data !== null && \"insertParentheses\" in item.data\n ? item.data.insertParentheses\n : undefined;\n if (preference === false || /^\\s*\\(/.test(context.state.sliceDoc(to, context.state.doc.lineAt(to).to)))\n return false;\n let insideArguments = false;\n for (\n let node: SyntaxNode | null = syntaxTree(context.state).resolveInner(context.pos, -1);\n node;\n node = node.parent\n ) {\n if (node.name === \"ImportStatement\" || node.name === \"TypeDef\") return false;\n if (node.name === \"Decorator\" && !insideArguments && preference !== true) return false;\n if (node.name === \"ArgList\") {\n if (node.parent?.name === \"ClassDefinition\" && item.kind === 7) return false;\n insideArguments = true;\n }\n if (node.parent?.name === \"TryStatement\" && node.prevSibling?.name === \"except\") return false;\n }\n return true;\n}\n\n// A content-only literal edit should finish after the existing closing quotes,\n// just as the original completer did when replacing the whole string token.\nfunction completionCursor(context: CompletionContext, primary: { from: number; to: number }) {\n const node = syntaxTree(context.state).resolveInner(primary.to, -1);\n if (node.name !== \"String\") return primary.to;\n const text = context.state.sliceDoc(node.from, node.to);\n const opening = text.match(/^[rub]*(\"\"\"|'''|\"|')/i);\n const quote = opening?.[1];\n if (\n !quote ||\n text.length < opening[0].length + quote.length ||\n !text.endsWith(quote) ||\n primary.from < node.from + opening[0].length ||\n primary.to !== node.to - quote.length\n )\n return primary.to;\n const escapes = text.slice(0, -quote.length).match(/\\\\*$/)?.[0].length ?? 0;\n return escapes % 2 === 0 ? node.to : primary.to;\n}\n\n/** Apply Ty's complete edits immediately; resolve documentation separately. */\nexport function pythonCompletionSource(\n request: PythonCompletionRequest,\n options: { onError?(error: unknown): void } = {}\n): CompletionSource {\n return async (context) => {\n if (!pythonCompletionAllowed(context)) return null;\n const controller = new AbortController();\n context.addEventListener(\"abort\", () => controller.abort(), { onDocChange: true });\n const answer = await request({\n method: \"textDocument/completion\",\n offset: context.pos,\n signal: controller.signal,\n });\n if (!answer || context.aborted || !answer.isCurrent() || !answer.result || !(\"items\" in answer.result))\n return null;\n const doc = context.state.doc;\n const from = context.matchBefore(/[\\p{ID_Continue}]*$/u)?.from ?? context.pos;\n const to = context.pos;\n let inAnnotation = false;\n for (\n let node: SyntaxNode | null = syntaxTree(context.state).resolveInner(context.pos, -1);\n node;\n node = node.parent\n ) {\n if ([\"TypeDef\", \"TypeDefinition\"].includes(node.name)) {\n inAnnotation = true;\n break;\n }\n }\n const showPrivate =\n doc.sliceString(from, context.pos).startsWith(\"_\") ||\n syntaxTree(context.state).resolveInner(context.pos, -1).name === \"String\";\n const completions: Completion[] = [...answer.result.items]\n .filter((item) => {\n const requiresTypeChecking =\n typeof item.data === \"object\" &&\n item.data !== null &&\n \"requiresTypeChecking\" in item.data &&\n item.data.requiresTypeChecking === true;\n return (\n (!requiresTypeChecking || inAnnotation) &&\n (showPrivate ||\n !item.label.split(\".\").at(-1)?.startsWith(\"_\") ||\n /^[\"']/.test(item.textEdit?.newText ?? item.insertText ?? \"\"))\n );\n })\n .sort((a, b) => (a.sortText ?? a.label).localeCompare(b.sortText ?? b.label))\n .map((item) => ({\n label: item.label,\n displayLabel:\n item.kind === 9 && item.additionalTextEdits?.length ? item.label.split(\".\").at(-1) : item.label,\n detail: item.additionalTextEdits?.length ? \"auto import\" : item.labelDetails?.detail,\n type: item.kind ? kinds[item.kind] : undefined,\n apply: (view, completion) => {\n if (view.state.doc !== doc || !answer.isCurrent()) return;\n try {\n const edit = item.textEdit;\n const primary = edit\n ? lspRangeToOffsets(view.state, \"range\" in edit ? edit.range : edit.replace)\n : { from, to };\n let text = edit?.newText ?? item.insertText ?? item.label;\n const call = text === item.label && insertCallParentheses(context, item, primary.to);\n if (call) text += \"()\";\n const edits = [\n { ...primary, insert: text },\n ...(item.additionalTextEdits ?? []).map((edit) => ({\n ...lspRangeToOffsets(view.state, edit.range),\n insert: edit.newText,\n })),\n ].sort((a, b) => a.from - b.from || a.to - b.to);\n for (let index = 1; index < edits.length; index++) {\n if (edits[index - 1].to > edits[index].from)\n throw new Error(\"Overlapping completion edits\");\n }\n if (item.insertTextFormat === 2) {\n // LSP snippets use numbered placeholders and a final $0. CodeMirror\n // numbers all fields in order, so put the final field last.\n const template = text.replace(/\\$\\{0(?=[:}])|\\$(\\d+)/g, (match, number) =>\n number ? `\\${${number === \"0\" ? \"999\" : number}}` : \"${999\"\n );\n // Capture CodeMirror's snippet transaction before committing it.\n // This keeps placeholder state, indentation and auto-imports in\n // one view update, with no partially applied intermediate edit.\n let primaryTransaction: Transaction | undefined;\n snippet(template)(\n {\n state: view.state,\n dispatch: (spec: TransactionSpec) => {\n primaryTransaction = view.state.update(spec, {\n annotations: isolateHistory.of(\"before\"),\n });\n },\n } as EditorView,\n completion,\n primary.from,\n primary.to\n );\n if (!primaryTransaction) throw new Error(\"Missing snippet transaction\");\n const extraChanges = view.state\n .changes(\n (item.additionalTextEdits ?? []).map((edit) => ({\n ...lspRangeToOffsets(view.state, edit.range),\n insert: edit.newText,\n }))\n )\n .map(primaryTransaction.changes);\n view.dispatch({\n changes: primaryTransaction.changes.compose(extraChanges),\n selection: primaryTransaction.newSelection.map(extraChanges),\n effects: StateEffect.mapEffects(primaryTransaction.effects, extraChanges),\n annotations: [\n Transaction.userEvent.of(\"input.complete\"),\n pickedCompletion.of(completion),\n isolateHistory.of(\"full\"),\n ],\n scrollIntoView: true,\n });\n } else {\n const changes = view.state.changes(edits);\n view.dispatch({\n changes,\n selection: {\n anchor: changes.mapPos(completionCursor(context, primary), 1) - Number(call),\n },\n annotations: [\n Transaction.userEvent.of(\"input.complete\"),\n pickedCompletion.of(completion),\n isolateHistory.of(\"full\"),\n ],\n });\n }\n // Recheck added imports immediately, just as Ruff's own fixes do.\n if (item.additionalTextEdits?.length) forceLinting(view);\n if (call) startCompletion(view);\n } catch (error) {\n if (options.onError) options.onError(error);\n else console.error(error);\n }\n },\n info: async () => {\n const resolved = await request({\n method: \"completionItem/resolve\",\n offset: context.pos,\n signal: new AbortController().signal,\n item,\n });\n const result = resolved?.result;\n if (!result || \"items\" in result || !resolved.isCurrent()) return null;\n const autoImport = item.additionalTextEdits?.length\n ? { module: item.labelDetails?.description }\n : undefined;\n return result.detail || result.documentation || autoImport\n ? pythonDocumentationElement({ ...result, state: context.state, autoImport })\n : null;\n },\n }));\n return { from, to, filter: false, options: completions };\n };\n}\n\n/** Keep ordinary suggestions independent of the slower, automatic import search. */\nexport function pythonCompletionSources(\n request: PythonCompletionRequest,\n options: { onError?(error: unknown): void } = {}\n): [CompletionSource, CompletionSource] {\n const ordinary = pythonCompletionSource(\n (query) => request({ ...query, autoImport: query.method === \"textDocument/completion\" ? false : undefined }),\n options\n );\n const imports = pythonCompletionSource(\n (query) => request({ ...query, autoImport: query.method === \"textDocument/completion\" ? \"only\" : undefined }),\n options\n );\n let current:\n | {\n doc: CompletionContext[\"state\"][\"doc\"];\n pos: number;\n answer: Promise;\n }\n | undefined;\n return [\n (context) => {\n const answer = Promise.resolve(ordinary(context));\n current = { doc: context.state.doc, pos: context.pos, answer };\n return answer;\n },\n async (context) => {\n if (!context.matchBefore(/[\\p{ID_Continue}]+$/u)) return null;\n for (\n let node: SyntaxNode | null = syntaxTree(context.state).resolveInner(context.pos, -1);\n node;\n node = node.parent\n ) {\n if (node.name === \"ImportStatement\" || node.name === \"PropertyName\" || node.name === \"String\")\n return null;\n }\n const scoped = current;\n if (!scoped || scoped.doc !== context.state.doc || scoped.pos !== context.pos) return null;\n const paused = await new Promise((resolve) => {\n const timer = setTimeout(() => resolve(true), 100);\n context.addEventListener(\n \"abort\",\n () => {\n clearTimeout(timer);\n resolve(false);\n },\n { onDocChange: true }\n );\n });\n // Besides avoiding stale results, this ensures REPL/binding projections\n // have been opened by the ordinary request before imports use them.\n if (!paused || context.aborted || current !== scoped || !(await scoped.answer)) return null;\n return imports(context);\n },\n ];\n}\n","import { StateEffect, StateField } from \"@codemirror/state\";\nimport type { AnalysisFailure } from \"./types\";\n\nexport const setAnalysisFailures = StateEffect.define();\nconst NO_FAILURES: AnalysisFailure[] = [];\n\nexport const analysisFailuresField = StateField.define({\n create: () => NO_FAILURES,\n update(value, transaction) {\n // Keep the last completed result visible while the next request is in flight.\n for (const effect of transaction.effects) {\n if (effect.is(setAnalysisFailures)) value = effect.value;\n }\n return value;\n },\n});\n","import { type Diagnostic, type LintSource, forEachDiagnostic } from \"@codemirror/lint\";\nimport { StateEffect } from \"@codemirror/state\";\nimport type { EditorView } from \"@codemirror/view\";\nimport { type LspRange, lspRangeToOffsets } from \"./positions\";\nimport { type PythonQuickFix, applyPythonQuickFix } from \"./quick-fixes\";\n\nexport const refreshPythonDiagnostics = StateEffect.define();\n\nexport interface DiagnosticReport {\n kind: \"full\";\n items: { code?: string; range: LspRange; message: string; severity?: number; source?: string }[];\n}\n\nexport type DiagnosticRequest = (\n view: EditorView,\n signal: AbortSignal\n) => Promise<\n | {\n result: DiagnosticReport;\n isCurrent(): boolean;\n effects?: readonly StateEffect[];\n publishMetadata?(): void;\n quickFixes?: { uri: string; actions: PythonQuickFix[] };\n }\n | undefined\n>;\n\n/** Publish only after both the Python report and accompanying metadata are current. */\nexport function pythonDiagnosticSource(\n request: DiagnosticRequest,\n { syntaxDiagnostics = true }: { syntaxDiagnostics?: boolean } = {}\n): LintSource {\n let pending: AbortController | undefined;\n return async (view) => {\n pending?.abort();\n const controller = (pending = new AbortController());\n const doc = view.state.doc;\n const discard = () => {\n // CodeMirror only checks document identity. A superseded same-document\n // pull must preserve diagnostics already published by the newer pull.\n const current: Diagnostic[] = [];\n forEachDiagnostic(view.state, (diagnostic, from, to) => current.push({ ...diagnostic, from, to }));\n return current;\n };\n try {\n const answer = await request(view, controller.signal);\n if (!answer || controller.signal.aborted || view.state.doc !== doc || !answer.isCurrent()) return discard();\n const diagnostics = answer.result.items\n .filter((item) => syntaxDiagnostics || item.source !== \"ty\" || item.code !== \"invalid-syntax\")\n .map(\n (item): Diagnostic => ({\n ...lspRangeToOffsets(view.state, item.range),\n message: item.message,\n severity:\n item.severity === 2\n ? \"warning\"\n : item.severity === 3 || item.severity === 4\n ? \"info\"\n : \"error\",\n source: item.source,\n actions: answer.quickFixes?.actions\n .filter((action) =>\n action.diagnostics.some(\n (diagnostic) =>\n diagnostic.code === item.code &&\n JSON.stringify(diagnostic.range) === JSON.stringify(item.range)\n )\n )\n .map((action) => ({\n name: action.title,\n apply: (editor) => {\n if (editor === view)\n applyPythonQuickFix(editor, {\n uri: answer.quickFixes!.uri,\n action,\n isCurrent: answer.isCurrent,\n });\n },\n })),\n })\n );\n // Designer's handler/endpoint store must observe the same freshness\n // decision as the editor widgets and diagnostics.\n answer.publishMetadata?.();\n if (answer.effects) view.dispatch({ effects: answer.effects });\n return diagnostics;\n } catch (error) {\n if (controller.signal.aborted) return discard();\n throw error;\n }\n };\n}\n","import { useEffect, useMemo } from \"react\";\nimport { shallowEqual, useSelector } from \"react-redux\";\nimport { Diagnostic, LintSource, linter, openLintPanel } from \"@codemirror/lint\";\nimport { EditorView, keymap } from \"@codemirror/view\";\nimport { type DiagnosticRequest, pythonDiagnosticSource, refreshPythonDiagnostics } from \"@/analysis/diagnostics\";\nimport { getAnalysisInputs, getTyAnalysisEnabled } from \"@/analysis/ide-analysis\";\nimport { setFormClassBodyEndLine } from \"@/code_mirror/utils/create_event_handler_widget\";\nimport { updateReferences } from \"@/code_mirror/utils/jump_to_definition\";\nimport { updateEndpoints } from \"@/code_mirror/utils/server_panels\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { setAnalysisFailures } from \"./analysis-status\";\nimport type { DoAnalysisFunc, Message } from \"./types\";\nimport type { Analysis } from \"./types\";\n\nexport const metadataEffects = ({\n references = {},\n httpEndpoints,\n emailEndpoints,\n routes,\n formClassBodyEndLine,\n}: Pick &\n Partial>) => [\n updateReferences.of(references),\n updateEndpoints.of({ httpEndpoints, emailEndpoints, routes }),\n setFormClassBodyEndLine.of(formClassBodyEndLine ?? null),\n];\n\nexport function messagesToDiagnostics(view: EditorView, messages: Message[] | undefined, all = false) {\n messages ??= [];\n const state = view.state;\n const { doc, selection } = state;\n const { length: docLen, lines: maxLine } = state.doc;\n const cursorPos = selection.main.head;\n const cursorLine = doc.lineAt(cursorPos).number;\n const otherDiagnostics: Diagnostic[] = [];\n const allDiagnostics: Diagnostic[] = [];\n for (const { message, line, severity = \"error\", between } of messages) {\n let from: number, to: number;\n if (between) {\n const [[lineno, offset], [linenoEnd, offsetEnd]] = between;\n from = state.doc.line(lineno).from + offset;\n to = state.doc.line(linenoEnd).from + offsetEnd;\n } else {\n ({ from, to } = state.doc.line(Math.min(line, maxLine)));\n }\n if (to > docLen) {\n continue;\n }\n\n const diagnostic = { message, from, to, severity };\n if (line !== cursorLine) {\n otherDiagnostics.push(diagnostic);\n }\n allDiagnostics.push(diagnostic);\n }\n return all ? allDiagnostics : otherDiagnostics;\n}\n\nexport function useDiagnostics(\n view: EditorView,\n doAnalysis: DoAnalysisFunc | undefined,\n options?: { request: DiagnosticRequest }\n) {\n const inputs = useSelector(getAnalysisInputs, shallowEqual);\n const analysisEnabled = useSelector(getTyAnalysisEnabled);\n const hasRequest = !!options?.request;\n useEffect(() => {\n if (hasRequest && analysisEnabled) view.dispatch({ effects: refreshPythonDiagnostics.of(null) });\n }, [view, inputs, hasRequest, analysisEnabled]);\n const request: DiagnosticRequest = useEvent((view: EditorView, signal: AbortSignal) =>\n options!.request(view, signal)\n );\n // ModuleEditor also installs Ruff, which owns syntax diagnostics.\n const pythonSource = useMemo(() => pythonDiagnosticSource(request, { syntaxDiagnostics: false }), []);\n const lintSource: LintSource = useEvent(async (view) => {\n if (options?.request && analysisEnabled) return pythonSource(view);\n if (!doAnalysis) return [];\n const doc = view.state.doc;\n const metadata = await doAnalysis(false);\n // CodeMirror discards stale diagnostics, but not the state effects below.\n if (view.state.doc !== doc) return [];\n view.dispatch({\n effects: [\n ...metadataEffects(metadata),\n // Clean lint clears a previous warning; lint never introduces one while typing.\n ...(metadata.analysisFailures?.length === 0 ? [setAnalysisFailures.of(metadata.analysisFailures)] : []),\n ],\n });\n return messagesToDiagnostics(view, metadata.messages, true);\n });\n const diagnosticLinter = useMemo(\n () =>\n linter(lintSource, {\n delay: 1000,\n needsRefresh: (update) =>\n update.transactions.some((transaction) =>\n transaction.effects.some((effect) => effect.is(refreshPythonDiagnostics))\n ),\n }),\n []\n );\n\n return doAnalysis || options?.request\n ? [\n diagnosticLinter,\n keymap.of([{ key: \"Alt-Enter\", run: (editor) => (analysisEnabled ? openLintPanel(editor) : false) }]),\n ]\n : [];\n}\n","import React from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { type Root, createRoot } from \"react-dom/client\";\nimport Markdown from \"react-markdown\";\nimport { pythonLanguage } from \"@codemirror/lang-python\";\nimport { highlightingFor } from \"@codemirror/language\";\nimport type { EditorState } from \"@codemirror/state\";\nimport { highlightCode } from \"@lezer/highlight\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport type { CallableArg, Popup } from \"./types\";\n\nexport type PythonDocumentation = string | { kind: string; value: string };\n\nfunction pythonCode(code: string, state: EditorState) {\n const parts: React.ReactNode[] = [];\n highlightCode(\n code,\n pythonLanguage.parser.parse(code),\n { style: (tags) => highlightingFor(state, tags) },\n (text, classes) =>\n parts.push(\n \n {text}\n \n ),\n () => parts.push(\"\\n\")\n );\n return parts;\n}\n\nexport function pythonDocumentationElement({\n state,\n detail,\n documentation,\n autoImport,\n onFindReferences,\n onGoToDefinition,\n onGoToTypeDefinition,\n onRename,\n}: {\n state: EditorState;\n detail?: string;\n documentation?: PythonDocumentation;\n autoImport?: { module?: string };\n onFindReferences?(): void;\n onGoToDefinition?(): void;\n onGoToTypeDefinition?(): void;\n onRename?(): void;\n}) {\n const dom = document.createElement(\"div\");\n dom.className =\n \"cm-python-documentation flex max-h-[min(36rem,calc(100vh-4rem))] max-w-[min(52rem,calc(100vw-2rem))] flex-col overflow-hidden p-3 text-[1.2rem] leading-normal whitespace-normal text-light-fg1 select-text dark:text-dark-fg1\";\n const content = typeof documentation === \"string\" ? documentation : documentation?.value;\n const plain = typeof documentation !== \"string\" && documentation?.kind === \"plaintext\";\n const preClass =\n \"m-0! max-h-[18rem] overflow-auto rounded-none! border-0! bg-transparent! p-0! font-mono text-[1.2rem]! leading-relaxed whitespace-pre-wrap! text-inherit! break-words\";\n const inner = (\n
event.stopPropagation()}>\n
\n {detail && 
{pythonCode(detail, state)}
}\n {autoImport && (\n

\n Accepting this suggestion also updates this file’s imports.\n {autoImport.module && (\n <>\n
\n From{\" \"}\n \n {autoImport.module}\n \n .\n \n )}\n

\n )}\n {plain ? (\n

{content}

\n ) : (\n 
{children}
,\n code: ({ children, className }) => (\n \n {/\\blanguage-(python|py|python3)\\b/.test(className ?? \"\")\n ? pythonCode(String(children).replace(/\\n$/, \"\"), state)\n : children}\n \n ),\n img: ({ src, alt }) => (\n \n {alt || \"View image\"}\n \n ),\n a: ({ node, children, ...props }) => (\n \n {children === \"Anvil Docs\" ? \"View docs…\" : children}\n \n ),\n }}>\n {content}\n \n )}\n
\n {(onFindReferences || onGoToDefinition || onGoToTypeDefinition || onRename) && (\n
\n {[\n [\"Go to definition\", \"F12\", onGoToDefinition],\n [\"Go to type definition\", \"Ctrl+Alt+F12\", onGoToTypeDefinition],\n [\"Find references\", \"Shift+F12\", onFindReferences],\n [\"Rename…\", \"F2\", onRename],\n ].map(\n ([label, shortcut, run]) =>\n typeof run === \"function\" && (\n {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n run();\n }\n }}>\n {String(label)}\n \n )\n )}\n
\n )}\n
\n );\n let root: Root | undefined;\n return {\n get dom() {\n // CodeMirror can discard async completion info before reading its DOM.\n if (!root) {\n root = createRoot(dom);\n // Finish before CodeMirror measures the tooltip, so it appears in its final position.\n flushSync(() => root!.render(inner));\n }\n return dom;\n },\n destroy: () => root?.unmount(),\n };\n}\n\nconst infoRoot = document.createElement(\"div\");\nconst codeFont = \"Source Code Pro, monospace\";\nconst root = createRoot(infoRoot);\n\nexport const CompletionInfoElement = (popup: Popup) => {\n // N.B. The style of the actual tooltip itself is defined in common.scss, because we can't target it here.\n const inner = InfoInner(popup);\n root.render(inner);\n return infoRoot;\n};\n\nconst CallSig = (args: CallableArg[]) => (\n \n (\n {args.map(({ name, type, optional, defaultVal, annotation }, i) => (\n
\n {i !== 0 && \", \"}\n \n {optional && \"[\"}\n \n {type === \"kwargs\" ? \"**\" : type === \"varargs\" ? \"*\" : \"\"}\n {name ?? \"\"}\n {annotation && `:${annotation}`}\n {type === \"keyword\" ? \"=\" + (defaultVal ?? \"\") : \"\"}\n \n {optional && \"]\"}\n \n
\n ))}\n )\n \n);\n\nconst InfoInner = ({ name, callable, type, helpText, helpLink, tableCols }: Popup) => {\n let callSig: null | React.ReactNode = null;\n let returns: null | string = null;\n let options: null | string = null;\n if (callable) {\n const args = [...(callable.args || [])];\n if (callable.kwargsFromTableCols) {\n for (const k in tableCols) {\n args.push({ name: tableCols[k].name, type: \"keyword\" });\n }\n }\n callSig = CallSig(args);\n if (callable.returns?.name && callable.returns.name !== \"None\") {\n returns = \" → \" + callable.returns.name;\n }\n } else if (type && type.name) {\n returns = \" - \" + type.name;\n if (type.name === \"enum\" && type.options) {\n options = type.options.map((s) => '\"' + s + '\"').join(\", \");\n }\n }\n\n helpLink ??= type?.helpLink;\n\n return (\n // because codemirror closes the info tooltip on mousedown and we probably don't want that\n
e.preventDefault()}>\n {name}\n {callSig}\n {returns}\n {options && [{options}]}\n
\n {helpText && {helpText}}\n {helpLink && (\n <>\n
\n \n View docs...\n \n \n )}\n
\n );\n};\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { StateEffect, StateField } from \"@codemirror/state\";\nimport { EditorView, Tooltip, showTooltip } from \"@codemirror/view\";\nimport type { ParameterHelper } from \"./types\";\n\nexport function setParamaterHelper(\n view: EditorView,\n parameterHelper: ParameterHelper | undefined,\n { pos, from, to }: { pos: number; from: number; to: number }\n) {\n if (!parameterHelper) {\n clearParamaterHelper(view);\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const create = (_view: EditorView) => ({ dom: ParamTooltipElement(parameterHelper!) });\n view.dispatch({\n effects: [setParamaterTooltip.of([{ pos, create, above: true, from, to }])],\n });\n}\n\nexport function clearParamaterHelper(view: EditorView) {\n view.dispatch({\n effects: [setParamaterTooltip.of(null)],\n });\n}\n\nexport interface ParamTooltip extends Tooltip {\n from: number;\n to: number;\n}\n\n// this code is mostly taken from the CodeMirror tooltip example\nexport const paramaterTooltipField = StateField.define({\n create: () => [],\n update(tooltips, tr) {\n for (const effect of tr.effects) {\n if (effect.is(setParamaterTooltip)) {\n return effect.value ?? [];\n }\n }\n\n const tooltip = tooltips[0];\n if (!tooltip) {\n return [];\n }\n const { pos, from: tooltipFrom, to: tooltipTo } = tooltip;\n const from = tr.changes.mapPos(tooltipFrom),\n to = tr.changes.mapPos(tooltipTo, 1);\n // did the changes take us outside of the tooltip pos?\n // e.g. deleting the entire word.\n if (pos < from || pos > to) {\n return [];\n }\n /**\n * This is taken from how codemirror autocomplete decides whether to recall the autocomplete\n * based on the .span argument\n */\n if (!(from === to || /['\"]?\\w*['\"]?$/.test(tr.state.sliceDoc(from, to)))) {\n return [];\n }\n // Is our cursor actually in the right place?\n const isValid = tr.state.selection.ranges.filter(\n (range) => range.empty && range.head >= from && range.head <= to\n );\n if (!isValid.length) {\n return [];\n }\n return [{ ...tooltip, from, to }];\n },\n\n provide: (f) => showTooltip.computeN([f], (state) => state.field(f)),\n});\n\nconst setParamaterTooltip = StateEffect.define();\n\nconst paramTooltipInner = ({ currentParam, fn, params }: ParameterHelper) => {\n return (\n <>\n {fn}(\n {params.map(({ name, type, optional, defaultVal }, i) => {\n const sig = (\n <>\n {optional && \"[\"}\n {type === \"kwargs\" ? \"**\" : type === \"varargs\" ? \"*\" : \"\"}\n {name}\n {defaultVal ? \"=\" + defaultVal : type == \"keyword\" ? \"=\" : \"\"}\n {optional && \"]\"}\n \n );\n return (\n
\n {i !== 0 && \", \"}\n {currentParam === i ? {sig} : sig}\n
\n );\n })}\n )
{params[currentParam]?.docString}
\n \n );\n};\n\nconst ParamTooltipElement = (paramHelper: ParameterHelper) => {\n // using the same root doesn't seem to work\n const inner = paramTooltipInner(paramHelper);\n const container = document.createElement(\"div\");\n container.className = \"cm-tooltip-cursor cm-tooltip-parameterhelper\";\n const root = createRoot(container);\n root.render(inner);\n return container;\n};\n","import { lazyComponent } from \"@/util/lazy\";\nimport type { default as TAssetEditor } from \"./asset_editor\";\nimport type { default as TDataBindingEditor } from \"./data_binding_editor\";\nimport type { default as TExtraFileEditor } from \"./extra-file-editor\";\nimport type { default as THtmlFormTemplateEditor } from \"./html_form_template_editor\";\nimport type { default as THtmlPropertyEditor } from \"./html_property_editor\";\nimport type { default as TImportMapEditor } from \"./import-map-editor\";\nimport type { default as TLazyAssetEditor } from \"./lazy-asset-editor\";\nimport type { default as TModuleEditor } from \"./module_editor\";\nimport type { default as TNativeLibrariesEditor } from \"./native_libraries\";\nimport type { default as TStylePropertyEditor } from \"./style_property_editor\";\nimport type { default as THtmlBodyEditor } from \"./user-email-editor\";\n\nexport const ExtraFilePythonEditor = lazyComponent(\n () => import(\"./extra-file-python-editor\")\n);\n\nexport const ModuleEditor = lazyComponent(() => import(\"./module_editor\"));\n\nexport const AssetEditor = lazyComponent(() => import(\"./asset_editor\"));\n\nexport const ExtraFileEditor = lazyComponent(() => import(\"./extra-file-editor\"));\n\nexport const DataBindingEditor = lazyComponent(() => import(\"./data_binding_editor\"));\n\nexport const HtmlFormTemplateEditor = lazyComponent(\n () => import(\"./html_form_template_editor\")\n);\n\nexport const HtmlPropertyEditor = lazyComponent(() => import(\"./html_property_editor\"));\n\nexport const ImportMapEditor = lazyComponent(() => import(\"./import-map-editor\"));\n\nexport const LazyAssetEditor = lazyComponent(() => import(\"./lazy-asset-editor\"));\n\nexport const NativeLibrariesEditor = lazyComponent(() => import(\"./native_libraries\"));\n\nexport const StylePropertyEditor = lazyComponent(() => import(\"./style_property_editor\"));\n\nexport const HtmlBodyEditor = lazyComponent(() => import(\"./user-email-editor\"));\n","import { EditorView } from \"@codemirror/view\";\nimport { Button } from \"@/components/reusable/Button\";\nimport type { Conflicts } from \"@/types\";\nimport { ConflictChoice, resolveConflict } from \"./conflict_state\";\n\ntype TextChunk = NonNullable[number];\n\nconst choices: [string, ConflictChoice, string][] = [\n [\"Keep your version\", \"yours\", \"Keep your version of this conflict and remove the other version.\"],\n [\"Keep other version\", \"incoming\", \"Keep the version you're merging and remove your version of this conflict.\"],\n [\"Keep both\", \"both\", \"Keep both highlighted versions in the order shown and remove this conflict marker.\"],\n [\"Mark resolved\", \"edited\", \"Keep the code as you've edited it and remove this conflict marker.\"],\n];\n\nexport function ConflictActions({ view, textChunk }: { view: EditorView; textChunk: TextChunk }) {\n const [yours, incoming] = textChunk.alternatives;\n const shareLine =\n yours.n > 0 && incoming.n > 0 && yours.l < incoming.l + incoming.n && incoming.l < yours.l + yours.n;\n const onResolve = (choice: ConflictChoice) => {\n view.dispatch(resolveConflict(view.state, textChunk, choice));\n view.focus();\n };\n\n return choices.map(([label, choice, explanation]) => {\n const disabled = view.state.readOnly || (shareLine && (choice === \"yours\" || choice === \"incoming\"));\n return (\n \n {view.state.readOnly\n ? \"This app is read-only.\"\n : disabled\n ? \"The alternatives share a line. Edit the code, then click Mark resolved.\"\n : explanation}\n \n }\n titleDelay\n titlePosition=\"bottom\"\n onClick={() => onResolve(choice)}\n onKeyDown={(event) => {\n if (event.key !== \"Enter\" && event.key !== \" \") return;\n event.preventDefault();\n event.stopPropagation();\n if (!disabled) onResolve(choice);\n }}>\n {label}\n \n );\n });\n}\n","import { StateEffect, StateField } from \"@codemirror/state\";\nimport { Decoration, EditorView, WidgetType } from \"@codemirror/view\";\nimport { useConstant } from \"@/util/hooks\";\nimport { useExtension } from \"./hooks\";\n\n/**\n * Places the \"Create Event Handler\" widget at the end of the form class body.\n *\n * The anchor line comes from the active Python analyzer about a second after the user stops\n * typing, and arrives here as a StateEffect\n * on that same tick. We hold it as a *document position* rather than a line number so it can be\n * mapped through subsequent edits — otherwise the widget would sit in the wrong place for the second\n * or so between an edit and the next analysis.\n */\n\n/** 1-based line reported by the worker, or null when there's no form class to anchor to. */\nexport const setFormClassBodyEndLine = StateEffect.define();\n\n/** Document position to hang the widget off: the end of the last line of the form class body. */\nexport const classBodyAnchorField = StateField.define({\n create: () => null,\n update(value, tr) {\n for (const effect of tr.effects) {\n if (!effect.is(setFormClassBodyEndLine)) continue;\n const line = effect.value;\n // The worker analysed a snapshot of the document; it may since have shrunk past that line.\n if (line === null || line < 1 || line > tr.state.doc.lines) return null;\n return tr.state.doc.line(line).to;\n }\n if (value !== null && tr.docChanged) {\n // assoc=1: text typed at the anchor pushes it along, so the widget stays below the user's code.\n return tr.changes.mapPos(value, 1);\n }\n return value;\n },\n});\n\n/**\n * CodeMirror owns *where* this sits; React owns what's inside it. The host element is created once per\n * editor and simply re-parented as the decoration comes and goes, so the React tree portalled into it\n * survives scrolling and re-anchoring.\n */\nclass CreateEventHandlerWidget extends WidgetType {\n constructor(readonly host: HTMLElement) {\n super();\n }\n eq(other: CreateEventHandlerWidget) {\n return other.host === this.host;\n }\n toDOM() {\n return this.host;\n }\n // We deliberately keep WidgetType's default `ignoreEvent` (true), which keeps CodeMirror's own\n // handlers off the panel's controls. Overriding it to false would route them into the editor:\n // the keymap is a `domEventHandlers.keydown` on `contentDOM`, which sits below React's root\n // listener, so it would see Enter before the panel's own handler could stop it — and insert a\n // newline into the document on the way to creating the handler.\n}\n\nconst widgetDecorations = (host: HTMLElement) =>\n EditorView.decorations.compute([classBodyAnchorField], (state) => {\n const anchor = state.field(classBodyAnchorField);\n if (anchor === null) return Decoration.none;\n // Block widgets must sit on a line boundary; after mapping, the anchor may be mid-line.\n const at = state.doc.lineAt(Math.max(0, Math.min(anchor, state.doc.length))).to;\n return Decoration.set([\n Decoration.widget({ widget: new CreateEventHandlerWidget(host), block: true, side: 1 }).range(at),\n ]);\n });\n\nconst widgetTheme = EditorView.baseTheme({\n \".cm-create-event-handler\": {\n paddingTop: \"1lh\",\n paddingBottom: \"0.6rem\",\n userSelect: \"none\",\n },\n \".cm-create-event-handler:empty\": {\n display: \"none\",\n },\n \".cm-create-event-handler-body\": {\n fontFamily: \"var(--anvil-ui-font)\",\n whiteSpace: \"normal\",\n wordWrap: \"break-word\",\n overflowWrap: \"anywhere\",\n },\n \".cm-create-event-handler input, .cm-create-event-handler textarea\": {\n userSelect: \"text\",\n },\n});\n\n/**\n * Registers the widget's CodeMirror extensions and returns the host element to portal the panel into.\n */\nexport function useCreateEventHandlerWidget(view: EditorView, enabled: boolean): HTMLElement | null {\n const host = useConstant(() => {\n const el = document.createElement(\"div\");\n el.className = \"cm-create-event-handler\";\n return el;\n });\n\n useExtension(view, () => (enabled ? [classBodyAnchorField, widgetDecorations(host), widgetTheme] : []), [enabled]);\n\n return enabled ? host : null;\n}\n","import { useDispatch, useSelector } from \"react-redux\";\nimport { ChangeDesc, Compartment, EditorState, Facet, StateEffect, StateField } from \"@codemirror/state\";\nimport { Decoration, DecorationSet, EditorView, ViewPlugin } from \"@codemirror/view\";\nimport { getTyAnalysisEnabled } from \"@/analysis/ide-analysis\";\nimport { CodeNavTarget } from \"@/router/navTypes\";\nimport { AnvilDispatch, AppId } from \"@/types\";\nimport { useAppUrl } from \"@/util/hooks\";\nimport { getAppId, getAppPackageName } from \"../../controllers/app\";\nimport { getCodeNames } from \"../../controllers/app/code\";\nimport { navigate } from \"../../router/navigation\";\nimport { CodeRef, References } from \"../autocompletions/types\";\nimport { useExtension } from \"./hooks\";\n\nconst hoverThemeCompartment = new Compartment();\n\nexport function useJumpToDefinition(view: EditorView, tabNavTarget: CodeNavTarget, codeItemId: string) {\n const appId = useSelector(getAppId);\n const appUrl = useAppUrl();\n const appPackageName = useSelector(getAppPackageName);\n const allCodeNames = useSelector(getCodeNames);\n const dispatch = useDispatch();\n const analysisEnabled = useSelector(getTyAnalysisEnabled);\n\n useExtension(\n view,\n () =>\n appTabDetails.of({\n appId,\n appUrl,\n appPackageName,\n allCodeNames,\n tabNavTarget,\n codeItemId,\n analysisEnabled,\n }),\n [appId, appPackageName, allCodeNames, tabNavTarget, codeItemId, analysisEnabled]\n );\n useExtension(\n view,\n () => [\n hoverThemeCompartment.of([]),\n HoverMarkerField,\n ViewPlugin.define((view) => new JumpToDefinition(view, dispatch)),\n ],\n []\n );\n}\n\nexport const updateReferences = StateEffect.define();\n\ninterface AppDetails {\n appId: AppId | undefined;\n appUrl: string;\n appPackageName: string | undefined;\n allCodeNames: any;\n tabNavTarget: CodeNavTarget;\n codeItemId: string;\n analysisEnabled: boolean;\n}\n\n/** a facet to hold state from react */\nconst appTabDetails = Facet.define({\n combine: (value) => value[0],\n});\n\nfunction getCodeItemFromRequest(state: EditorState, { def }: { from?: number; to?: number; def: Def }) {\n if (!def.item) {\n return;\n }\n const { allCodeNames } = state.facet(appTabDetails);\n const codeItem = allCodeNames[def.item];\n if (codeItem) {\n return codeItem;\n } else {\n console.log(\"Could not find target item for requestJumpToCode:\", def.item);\n }\n}\n\nfunction codeItemInFile(state: EditorState, codeItem: any) {\n if (!codeItem) {\n return false;\n }\n const { codeItemId } = state.facet(appTabDetails);\n return codeItemId === codeItem.id;\n}\n\nfunction defInFile(state: EditorState, def: Def) {\n if (!def.item) {\n return false;\n }\n const codeItem = getCodeItemFromRequest(state, { def });\n return codeItemInFile(state, codeItem);\n}\n\nfunction wrapWithDelay(fn: (...args: T[]) => void) {\n let called = false;\n let timeout: number | undefined = undefined;\n let resetTimeout: number | undefined = undefined;\n\n function wrapped(...args: T[]) {\n clearTimeout(resetTimeout);\n resetTimeout = setTimeout(() => {\n clearTimeout(timeout);\n timeout = undefined;\n called = false;\n }, 50);\n\n if (called) {\n return fn(...args);\n }\n\n timeout ??= setTimeout(() => {\n called = true;\n fn(...args);\n }, 200);\n }\n\n return wrapped;\n}\n\nclass JumpToDefinition {\n hoverRef: null | CodeRef = null;\n classHover = false;\n wrapMouseMove: () => void;\n dispatch: AnvilDispatch;\n\n constructor(\n readonly view: EditorView,\n dispatch: AnvilDispatch\n ) {\n // use capture event to prevent race condition with codemirror's builtin mousedown event\n // https://anvil.works/forum/t/new-beta-ide-reinstate-control-click-on-functions-to-navigate-to-them/13938\n view.dom.addEventListener(\"mousedown\", this.mousedown.bind(this), true);\n // Safari fires the mouse move on very Cmd keydown so use this delay wrapper\n // otherwise safari feels very slow with Cmd keyboard shortcuts\n this.wrapMouseMove = wrapWithDelay(this.mousemove.bind(this));\n view.dom.addEventListener(\"mousemove\", this.wrapMouseMove);\n this.dispatch = dispatch;\n }\n update() {}\n destroy() {\n this.view.dom.removeEventListener(\"mousedown\", this.mousedown, true);\n this.view.dom.removeEventListener(\"mousemove\", this.wrapMouseMove);\n }\n toggleHoverClass(toggle: boolean) {\n if (toggle === this.classHover) {\n return;\n }\n this.classHover = toggle;\n this.view.dispatch({ effects: hoverThemeCompartment.reconfigure(toggle ? hoverPointerTheme : []) });\n }\n usePythonAnalysis() {\n const { appId, tabNavTarget, analysisEnabled } = this.view.state.facet(appTabDetails);\n return !!appId && !tabNavTarget.codePath.startsWith(\"scripts/\") && analysisEnabled;\n }\n mousemove(e: MouseEvent) {\n if (this.usePythonAnalysis()) return this.toggleHoverClass(false);\n if (!((e.ctrlKey || e.metaKey) && !e.altKey)) {\n return this.toggleHoverClass(false);\n }\n const defs = this.view.state.field(HoverMarkerField);\n if (!defs) {\n return this.toggleHoverClass(false);\n }\n this.toggleHoverClass(true);\n }\n mousedown(e: MouseEvent) {\n if (this.usePythonAnalysis()) return;\n if (!((e.ctrlKey || e.metaKey) && !e.altKey)) {\n return;\n }\n const defs = this.view.state.field(HoverMarkerField);\n if (!defs) {\n return;\n }\n const pos = this.view.posAtCoords({ x: e.x, y: e.y });\n const range = this.refUnderPos(pos, defs);\n if (range) {\n // jump to code - i.e. navigate\n e.preventDefault();\n e.stopPropagation();\n this.requestJumpToCode(range);\n }\n }\n refUnderPos(pos: number | null, defs: DefRanges) {\n if (!pos) return;\n return defs.getRange(pos);\n }\n requestJumpToCode(range: { from: number; to: number; def: Def }) {\n const state = this.view.state;\n const codeItem = getCodeItemFromRequest(state, range);\n if (!codeItem) {\n return;\n }\n const { line, col } = range.def;\n\n this.dispatch(\n navigate({\n type: \"CODE\",\n codePath: codeItem.codePath,\n essentialView: { code: [`${line}`, `${col || 0}`] },\n })\n );\n }\n}\n\nconst hoverPointerTheme = EditorView.theme({\n \".cm-code-ref-hover > *:hover\": {\n // because code highlighting is the next div\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n \".cm-code-ref-hover:hover\": {\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n});\n\nconst hoverRange = Decoration.mark({ class: \"cm-code-ref-hover\" });\n\ntype Def = { line: number; col: number; item: string; pos?: number };\nclass DefRanges {\n decos: DecorationSet;\n constructor(readonly ranges: { from: number; to: number; def: Def }[]) {\n this.decos = this.makeDecorations();\n }\n static create(state: EditorState, references: References) {\n return new DefRanges(this.makeRanges(state, references));\n }\n static makeRanges(state: EditorState, references: References) {\n const ranges = [];\n const doc = state.doc;\n const { appPackageName, allCodeNames } = state.facet(appTabDetails);\n const pkgPrefix = (appPackageName || \"main_app_package\") + \".\";\n for (const lineno in references) {\n const codeRefs = references[lineno].filter(\n (codeRef) => codeRef.def && codeRef.def.line\n ) as Required[]; // line starts at 1\n for (const codeRef of codeRefs) {\n try {\n const line = doc.line(parseInt(lineno));\n const from = line.from + codeRef.startCol;\n const to = line.from + codeRef.endCol;\n const codeRefDef = codeRef.def;\n const item = codeRefDef.moduleName?.startsWith(pkgPrefix)\n ? codeRefDef.moduleName.slice(pkgPrefix.length)\n : codeRefDef.moduleName;\n const def: Def = { line: codeRefDef.line, item, col: codeRefDef.col ?? 0 };\n if (defInFile(state, def)) {\n def.pos = doc.line(def.line).from + (def.col ?? 0);\n }\n ranges.push({ from, to, def });\n } catch (e) {\n // We hit errors here when a \"correcting\" parse to address syntax errors changes the line count\n // (eg dummy functions for @decorators without functions). The righteous fix is probably to apply\n // systematic warping to correct for the line number changes introduced during correction, but this\n // at least stops things breaking.\n console.error(\"Range creation failed\", e);\n }\n }\n }\n return ranges;\n }\n makeDecorations() {\n return Decoration.set(\n this.ranges.map(({ from, to }) => hoverRange.range(from, to)),\n true\n );\n }\n getRange(pos: number) {\n return this.ranges.find(({ from, to }) => from <= pos && pos <= to);\n }\n /** remove any ranges which has been changed - if we don't then we risk throwing errors from decorations that can't exist */\n map(state: EditorState, changes: ChangeDesc) {\n const newRanges = this.ranges\n .filter(({ from, to, def: { pos } }) => {\n if (changes.touchesRange(from, to)) return false; // the reference has changed\n if (pos != null && changes.touchesRange(pos)) return false; // we're in the same file and the defintion has changed\n return true;\n })\n .map(({ from, to, def }) => {\n from = changes.mapPos(from, 1);\n to = changes.mapPos(to);\n if (def.pos === undefined) return { from, to, def };\n const pos = changes.mapPos(def.pos);\n if (pos === def.pos) return { from, to, def };\n const L = state.doc.lineAt(pos);\n return { from, to, def: { line: L.number, item: def.item, col: pos - L.from, pos } };\n });\n return new DefRanges(newRanges);\n }\n}\n\n/** updates whenever the doc changes or the annotation hook gives us a new reference */\nconst HoverMarkerField = StateField.define({\n create() {\n return null;\n },\n update(value, tr) {\n for (const effect of tr.effects) {\n if (effect.is(updateReferences)) {\n return DefRanges.create(tr.state, effect.value);\n }\n }\n if (value == null) return value;\n if (tr.docChanged) {\n try {\n value = value.map(tr.state, tr.changes);\n } catch (e) {\n console.warn(e);\n value = null;\n }\n }\n return value;\n },\n provide: (f) => EditorView.decorations.from(f, (val) => (val ? val.decos : Decoration.none)),\n});\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { StateEffect, StateField } from \"@codemirror/state\";\nimport { EditorView, showPanel } from \"@codemirror/view\";\nimport { IconDefinition, faCircleInfo, faEnvelope, faGlobe, faRoute } from \"@fortawesome/pro-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button } from \"@/components/reusable/Button\";\nimport { CopyButton } from \"@/components/reusable/CopyButton\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/reusable/Popover\";\nimport { getAppOrigins } from \"@/controllers/app\";\nimport { getEnvironmentOrigins, getPublishInfo } from \"@/controllers/environments\";\nimport { modal } from \"@/controllers/modals\";\nimport type { AnvilDispatch } from \"@/types\";\nimport useEvent from \"@/util/useEventCallback\";\nimport type { EmailEndpoint, HttpEndpoint, Route } from \"../autocompletions/types\";\nimport { useExtension, useViewSelector } from \"./hooks\";\n\nexport function useServerPanels(view: EditorView, isServer: boolean) {\n useExtension(view, () => (isServer ? [endpointsState] : []), [isServer]);\n}\n\ninterface InfoPanelDetails {\n httpEndpoints: HttpEndpoint[];\n routes: Route[];\n emailEndpoints: EmailEndpoint[];\n}\n\ninterface InfoPanels {\n httpContainer: HTMLDivElement;\n emailContainer: HTMLDivElement;\n routeContainer: HTMLDivElement;\n}\n\n// create an effect to update the endpoints used by autocompletions\nexport const updateEndpoints = StateEffect.define();\n\nexport const makeServerPanel = () => {\n const panel = document.createElement(\"div\");\n panel.className = \"cm-server-panel\";\n return panel;\n};\n\nconst initEndpoint = (): InfoPanelDetails => ({\n httpEndpoints: [],\n routes: [],\n emailEndpoints: [],\n});\n\n// hold the state of emailEndpoints and httpEndpoints in codeMirror\n// when we have emailEndpoints or httpEndpoints the codeMirror bottom panels are rendered by codemirror\nconst endpointsState = StateField.define({\n create: initEndpoint,\n update(value, tr) {\n for (const e of tr.effects) {\n if (e.is(updateEndpoints)) {\n value = { ...value, ...e.value };\n break;\n }\n }\n return value;\n },\n});\n\ninterface EndpointPanelProps extends React.PropsWithChildren {\n icon: IconDefinition;\n label: string;\n}\n\n// Shared buttons render spans, so these actions need explicit keyboard activation.\nfunction activateButton(event: React.KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n event.currentTarget.click();\n }\n}\n\nfunction EndpointSection({ icon, label, children }: EndpointPanelProps) {\n return (\n
\n

\n \n {label}\n

\n {children}\n
\n );\n}\n\nfunction EndpointAddress({ copyText, children }: React.PropsWithChildren<{ copyText: string }>) {\n return (\n
\n \n {children}\n \n \n
\n );\n}\n\nfunction RoutesPanelContent() {\n const dispatch = useDispatch();\n const environmentOrigins = useSelector(getEnvironmentOrigins);\n const apiOrigins = useMemo(() => environmentOrigins?.map((origin: string) => `${origin}`), [environmentOrigins]);\n\n const onPublishClick = useEvent(() => {\n dispatch(modal(\"environments\", {}));\n });\n\n const icon = faRoute;\n const body =\n apiOrigins && apiOrigins.length > 0 ? (\n <>\n

Routes in this module are accessible at:

\n \n {apiOrigins[0]}/\n {\"{path}\"}\n \n \n ) : (\n <>\n

Publish your app to access these routes.

\n \n \n );\n\n return (\n \n {body}\n \n );\n}\n\nexport function HttpEndpointPanelContent() {\n const dispatch = useDispatch();\n const environmentOrigins = useSelector(getEnvironmentOrigins);\n const apiOrigins = useMemo(\n () => environmentOrigins?.map((origin: string) => `${origin}/_/api`),\n [environmentOrigins]\n );\n\n const onPublishClick = useEvent(() => {\n dispatch(modal(\"environments\", {}));\n });\n\n const icon = faGlobe;\n const body =\n apiOrigins && apiOrigins.length > 0 ? (\n <>\n

HTTP endpoints in this module are accessible at:

\n \n {apiOrigins[0]}/\n {\"{path}\"}\n \n \n ) : (\n <>\n

\n Publish your app to access these HTTP endpoints.\n

\n \n \n );\n\n return (\n \n {body}\n \n );\n}\n\nexport function EmailEndpointPanelContent() {\n const publishInfo = useSelector(getPublishInfo);\n const origins = useSelector(getAppOrigins);\n\n const emailDomain: string | null = useMemo(() => {\n const { privateEnvs, publicEnvs, customEnvs } = publishInfo;\n return (\n customEnvs[0]?.email_domain ||\n publicEnvs[0]?.email_domain ||\n privateEnvs[0]?.email_domain ||\n origins?.defaultHostname ||\n null\n );\n }, [publishInfo, origins?.defaultHostname]);\n\n const icon = faEnvelope;\n const body = emailDomain ? (\n <>\n

This app receives emails sent to:

\n \n anything@{emailDomain}\n \n \n ) : (\n \"Publish your app to receive email\"\n );\n\n return (\n \n {body}\n \n );\n}\n\nexport function Endpoints({ view }: { view: EditorView }) {\n const endpoints = useViewSelector(view, () => view.state.field(endpointsState, false));\n const hasEmail = !!endpoints?.emailEndpoints.length;\n const hasRoutes = !!endpoints?.routes.length;\n const hasHttp = !!endpoints?.httpEndpoints.length;\n const count = Number(hasEmail) + Number(hasRoutes) + Number(hasHttp);\n if (!count) return null;\n\n const label = count > 1 ? \"Endpoints\" : hasEmail ? \"Email endpoints\" : hasRoutes ? \"Routes\" : \"HTTP endpoints\";\n const icon = count > 1 ? faCircleInfo : hasEmail ? faEnvelope : hasRoutes ? faRoute : faGlobe;\n\n return (\n
\n \n \n \n \n \n \n \n {hasEmail && }\n {hasRoutes && }\n {hasHttp && }\n \n \n
\n );\n}\n\nexport function ServerPanels({ view, children }: React.PropsWithChildren<{ view: EditorView }>) {\n const hasBottomPanels = useViewSelector(view, () => view.state.facet(showPanel));\n\n const [bottom, setBottomOffset] = useState(0);\n\n useEffect(() => {\n const height = view.dom.querySelector(\".cm-panels-bottom\")?.clientHeight ?? 0;\n setBottomOffset(height);\n }, [hasBottomPanels]);\n\n return (\n \n {children}\n \n );\n}\n","import React, { useEffect, useReducer, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faCompressArrowsAlt } from \"@fortawesome/free-solid-svg-icons/faCompressArrowsAlt\";\nimport { faExpandArrowsAlt } from \"@fortawesome/free-solid-svg-icons/faExpandArrowsAlt\";\nimport { faExternalLinkSquare } from \"@fortawesome/pro-light-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { EVENTS, offEvent, onEvent } from \"@/actions\";\nimport {\n getApp,\n getAppId,\n getAppOrigins,\n getAppRuntimeOptions,\n getRunnerOrigin,\n promptIfRuntimeMissing,\n} from \"@/controllers/app\";\nimport { getServerModules } from \"@/controllers/app/code\";\nimport {\n DebuggerEventArg,\n getDebugEnvBreakpointsForRunner,\n getIsRunnerPaused,\n onDebuggerUpdate,\n} from \"@/controllers/debugger\";\nimport { getCategorisedEnvironments } from \"@/controllers/environments\";\nimport { getRunCommitId, getRunRefresh, restartApp, stopApp } from \"@/controllers/ide\";\nimport { confirm } from \"@/controllers/modals\";\nimport { clearRepl, incrementImportTimeTracking, replReturn } from \"@/controllers/repl\";\nimport {\n getRunMode,\n getRunnerViewMaximised,\n maximiseRunner,\n maybeConfigureOrUpgradeOnImportFailure,\n newDebugSession,\n restoreRunner,\n runnerOutput,\n} from \"@/controllers/runner\";\nimport { handleRunnerBgTaskEvent, runnerConnectionStateChanged } from \"@/controllers/runner-bg-tasks\";\nimport { getTableauService } from \"@/controllers/tableau\";\nimport { claimAchievement, getUserUiPrefs } from \"@/controllers/user\";\nimport { navigate } from \"@/router/navigation\";\nimport { cx } from \"@/theme/styles\";\nimport type { AnvilDispatch } from \"@/types\";\nimport { ExternalState, useExternalState } from \"@/util/external-state\";\nimport { useFeatureSupported } from \"@/util/features\";\nimport { useResizeObserverTimeout } from \"@/util/hooks\";\nimport useEffectEvent from \"@/util/useEffectEvent\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { Button } from \"./reusable/Button\";\nimport { NumErrorWarningBtn, RunAppButton } from \"./reusable/ZenModeButtons\";\n\nconst runningReplCommands: { [id: number]: any } = {}; // requestId --> cmdId\nconst outstandingDebuggerRequestCallbacks: { [id: number]: any } = {}; // requestId --> callback\n\nconst useHandleImportError = () => {\n const dispatch = useDispatch();\n const runtimeOptions = useSelector(getAppRuntimeOptions);\n const serverModules = useSelector(getServerModules);\n const supportsCustomPackages = useFeatureSupported(\"custom-packages\");\n const supportsFullPythonRuntime = useFeatureSupported(\"full-python-runtime\");\n\n return useEvent(async (message: any) => {\n const msg = message.msg || \"\";\n const n = msg.match(/\\s'?([^\\s]+?)'?$/);\n const modname = n ? n[1] : null;\n\n if (modname === null) {\n // just report it\n return;\n }\n\n const appIsCustom = runtimeOptions?.server_spec?.base?.startsWith(\"python310-\");\n\n if (!(message.fromServer || (message.traceback && message.traceback[0] && message.traceback[0].fromServer))) {\n // Client error\n message.errorObj = {\n docUrl: \"/client/client-code/using-python-packages-in-client-code\",\n docLinkTitle: \"Not all modules are available in client code.\\nClick for more info\",\n };\n\n // Special case: requests\n if (modname === \"requests\") {\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests\",\n docLinkTitle: \"To make HTTP requests from client code, use the anvil.http module.\",\n };\n } else if (modname === \"anvil.users\") {\n message.errorObj = {\n docUrl: \"/users\",\n docLinkTitle: \"Did you forget to add the Users Service?\",\n };\n }\n\n if (!(supportsCustomPackages || supportsFullPythonRuntime)) {\n // Even though they've tried to import this on the client, prompt to upgrade so they can do it on the server\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, false, appIsCustom));\n }\n\n // ...or did they just try to import a server module?\n for (const sm of serverModules || []) {\n if (sm.name === modname || modname.endsWith(sm.name)) {\n message.errorObj = {\n docUrl: \"/server/server-modules#calling-server-functions-from-client-code\",\n docLinkTitle:\n \"Client-side modules can't import Server Modules. Use anvil.server.call() to call server functions.\",\n };\n }\n }\n } else if (msg.includes(\"anvil.js\")) {\n // we'er trying to import anvil.js on the server\n // the custom error message should speak for itself\n // no need for an upgrade prompt\n // TODO maybe put this in the docs and link to it\n } else if (supportsFullPythonRuntime || supportsCustomPackages) {\n // Server import failure for a subscribed user. Probably a typo, perhaps\n // they have a request.\n if (appIsCustom) {\n message.errorObj = {\n docUrl: \"/server/custom-packages#adding-packages\",\n docLinkTitle: \"Need an extra library installed?\\nClick for more info\",\n };\n } else {\n message.errorObj = {\n docUrl: \"/server/custom-packages#available-python-versions\",\n docLinkTitle: \"Try selecting a different Python version.\",\n };\n }\n if (message.type === \"ModuleNotFoundError\") {\n // don't show this for import error's\n // e.g. `from typing import foo` is an ImportError (alert misleading)\n // e.g. `import foobarbaz` is a ModuleNotFoundError (alert beneficial)\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, true, appIsCustom));\n }\n } else if (modname === \"requests\") {\n // Special case\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests\",\n docLinkTitle: \"Free Plan users can use the anvil.http module instead of requests.\",\n };\n } else if (modname === \"anvil.users\") {\n message.errorObj = {\n docUrl: \"/users\",\n docLinkTitle: \"Did you forget to add the Users Service?\",\n };\n } else {\n // Server import failure for a non-Pro user. Upsell time!\n message.errorObj = {\n docUrl: \"/server/custom-packages\",\n docLinkTitle: \"Some libraries are only available for paid users.\\nClick for details\",\n };\n\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, false, appIsCustom));\n }\n });\n};\n\nconst useHandlePythonError = () => {\n const dispatch = useDispatch();\n const handleImportError = useHandleImportError();\n\n return useEvent(async (message: any) => {\n switch (message.type) {\n case \"anvil.server.ServiceNotAdded\":\n message.errorObj = {\n docUrl: \"/editor/common-errors#service-not-added\",\n docLinkTitle: \"Learn how to add services to your app\",\n };\n break;\n case \"anvil.server.RuntimeUnavailableError\":\n if (message.msg.indexOf(\"Basic Python 2\") === -1) {\n let m = message.msg.match(/Server resources not available for '([^']+)'./);\n if (m) {\n dispatch(promptIfRuntimeMissing(m?.[1], false));\n } else {\n m = message.msg.match(/Could not launch server runtime - image build failed./);\n if (m) {\n if (\n await dispatch(\n confirm(\n \"Server runtime failed to start\",\n \"The server runtime for your app could not be built. Would you like to see the build output?\"\n )\n )\n ) {\n dispatch((_, getState) => {\n const appId = getAppId(getState());\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n });\n }\n }\n }\n }\n break;\n\n case \"anvil.tables.TableError\":\n if (message.msg?.startsWith(\"Cannot call anvil.tables.on_transaction_end()\")) {\n message.errorObj = {\n docUrl: \"/data-tables/transactions#actions-at-the-end-of-a-transaction\",\n docLinkTitle:\n \"on_transaction_end() can only be used in the server call that opened the transaction.\\nLearn more\",\n };\n } else if (message.msg?.startsWith(\"Can't abort() a nested transaction\")) {\n message.errorObj = {\n docUrl: \"/data-tables/transactions\",\n docLinkTitle:\n \"abort() can only be used in the server call that owns the outermost transaction.\\nLearn more\",\n };\n } else if (message.msg?.startsWith(\"Can't open a fully-isolated transaction\")) {\n message.errorObj = {\n docUrl: \"/data-tables/transactions#nesting-transactions\",\n docLinkTitle:\n \"A nested transaction cannot be more isolated than the transaction it runs inside.\\nLearn more\",\n };\n }\n break;\n case \"HttpError\":\n if (message.msg === \"0\") {\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests#browser-restrictions\",\n docLinkTitle: \"This URL may be restricted by your web browser.\\nLearn more\",\n };\n }\n break;\n case \"ImportError\":\n case \"NotImplementedError\":\n case \"NotImplementedImportError\":\n case \"ModuleNotFoundError\":\n await handleImportError(message);\n break;\n }\n });\n};\n\nconst useOnMessage = (runningAppWindow: WindowProxy | null) => {\n const dispatch = useDispatch();\n const runnerOrigin = useSelector(getRunnerOrigin);\n\n const handlePythonError = useHandlePythonError();\n\n return useEvent(async (message: any) => {\n // log.debug(\"Runner msg:\", message);\n const maybeReplReturnOrDebuggerCallback = () => {\n if (runningReplCommands[message.requestId]) {\n dispatch(replReturn(runningReplCommands[message.requestId]));\n delete runningReplCommands[message.requestId];\n } else if (message.requestId in outstandingDebuggerRequestCallbacks) {\n outstandingDebuggerRequestCallbacks[message.requestId]?.(message.result);\n delete outstandingDebuggerRequestCallbacks[message.requestId];\n }\n };\n\n if (message.error) {\n dispatch(runnerOutput(message));\n maybeReplReturnOrDebuggerCallback();\n } else if (\"result\" in message) {\n if (message.result?.clearRepl) {\n dispatch(clearRepl(null, runningReplCommands[message.requestId]));\n dispatch(runnerOutput({ fn: \"clear\" }));\n }\n maybeReplReturnOrDebuggerCallback();\n } else if (message.fn)\n switch (message.fn) {\n case \"getBreakpoints\":\n if (!runnerOrigin) break;\n runningAppWindow?.postMessage(\n {\n id: message.id,\n response: await dispatch(getDebugEnvBreakpointsForRunner()),\n },\n runnerOrigin\n );\n break;\n case \"restartApp\":\n dispatch(restartApp());\n break;\n case \"newAppSession\":\n dispatch(newDebugSession(message.sessionToken));\n break;\n case \"stdout\":\n case \"warning\":\n // TODO: We should probably batch output here, then dispatch everything after ~10 ms.\n dispatch(runnerOutput(message));\n break;\n case \"replStateUpdate\":\n if (message.replStateUpdate?.importTime) {\n dispatch(incrementImportTimeTracking(message.replStateUpdate?.importTime));\n }\n break;\n case \"pythonError\":\n // log.info(\"python error\", message);\n await handlePythonError(message);\n dispatch(runnerOutput(message));\n maybeReplReturnOrDebuggerCallback();\n break;\n case \"debuggerUpdate\":\n dispatch(onDebuggerUpdate(message.update));\n break;\n case \"bgTaskEvent\":\n dispatch(handleRunnerBgTaskEvent(message.event));\n break;\n case \"runnerConnectionState\":\n dispatch(runnerConnectionStateChanged(message.state));\n break;\n case \"claimAchievement\":\n dispatch(claimAchievement(message.achievementId));\n break;\n }\n });\n};\n\nlet lastRequestId = 0;\n\nfunction useMessages(runningAppWindow: WindowProxy | null) {\n const dispatch = useDispatch();\n const runnerOrigin = useSelector(getRunnerOrigin);\n const appOrigins = useSelector(getAppOrigins)!;\n const onMessage = useOnMessage(runningAppWindow);\n\n const onReplCmd = useEvent(({ cmdId, code, extraArgs }: any) => {\n if (!runnerOrigin) return;\n const requestId = ++lastRequestId;\n runningReplCommands[requestId] = cmdId;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"replCommand\",\n args: [code, extraArgs],\n },\n runnerOrigin\n );\n });\n\n const onReplInterrupt = useEvent(() => {\n if (!runnerOrigin) return;\n const requestId = ++lastRequestId;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"replInterrupt\",\n args: [],\n },\n runnerOrigin\n );\n });\n\n const onDebuggerRequest = useEvent(({ request, callback }: DebuggerEventArg) => {\n const requestId = ++lastRequestId;\n outstandingDebuggerRequestCallbacks[requestId] = callback;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"debuggerRequest\",\n args: [request],\n },\n appOrigins.debugOrigin\n );\n });\n\n const onMsg = useEvent((e: MessageEvent) => {\n if (e.source !== runningAppWindow) return;\n onMessage(e.data);\n });\n\n useEffect(() => {\n if (!runningAppWindow) return;\n dispatch(onEvent(EVENTS.RUNNER_REPL_COMMAND, onReplCmd));\n dispatch(onEvent(EVENTS.RUNNER_REPL_INTERRUPT, onReplInterrupt));\n dispatch(onEvent(EVENTS.RUNNER_DEBUGGER_REQUEST, onDebuggerRequest));\n\n window.addEventListener(\"message\", onMsg);\n return () => {\n window.removeEventListener(\"message\", onMsg);\n dispatch(offEvent(EVENTS.RUNNER_REPL_COMMAND, onReplCmd));\n dispatch(offEvent(EVENTS.RUNNER_REPL_INTERRUPT, onReplInterrupt));\n dispatch(offEvent(EVENTS.RUNNER_DEBUGGER_REQUEST, onDebuggerRequest));\n };\n }, [runningAppWindow]);\n}\n\n/** checks whether the NEWTAB was closed by the user */\nfunction useNewTabHeartbeat(runningAppWindow: WindowProxy | null) {\n const runMode = useSelector(getRunMode);\n const heartbeatRef = useRef(undefined);\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (runMode === \"NEWTAB\" && runningAppWindow) {\n heartbeatRef.current = setInterval(() => {\n if (runningAppWindow.closed) {\n dispatch(stopApp());\n clearInterval(heartbeatRef.current);\n }\n }, 1000);\n }\n return () => {\n clearInterval(heartbeatRef.current);\n };\n }, [runningAppWindow, runMode]);\n}\n\nfunction useRefreshNewTab(runningAppWindow: WindowProxy | null, src: string) {\n const setBannerUsed = useBanner(runningAppWindow);\n const runnerOrigin = useSelector(getRunnerOrigin);\n const refresh = useSelector(getRunRefresh);\n const onLocationRefresh = useEvent(() => {\n if (!runnerOrigin) return;\n runningAppWindow?.postMessage(\n {\n requestId: ++lastRequestId,\n fn: \"locationReload\",\n args: [src],\n },\n runnerOrigin\n );\n runningAppWindow?.focus();\n });\n\n useEffect(() => {\n if (refresh == null) return;\n onLocationRefresh();\n setBannerUsed(false);\n }, [refresh]);\n}\n\nfunction useBanner(runningAppWindow: WindowProxy | null) {\n const runnerOrigin = useSelector(getRunnerOrigin);\n const app = useSelector(getApp);\n const commitId = useSelector(getRunCommitId);\n const [bannerUsed, setBannerUsed] = useState(false);\n if (!runningAppWindow && bannerUsed) {\n setBannerUsed(false);\n }\n\n const onPostBannerMessage = useEvent(() => {\n if (!runnerOrigin) return;\n if (!runningAppWindow || bannerUsed) return;\n\n runningAppWindow.postMessage(\n {\n requestId: ++lastRequestId,\n fn: \"appChanged\",\n },\n runnerOrigin\n );\n\n setBannerUsed(true);\n });\n\n useEffect(() => {\n if (app?.commitSha !== commitId) {\n onPostBannerMessage();\n }\n }, [app?.commitSha, commitId]);\n\n return setBannerUsed;\n}\n\nconst newTabWindowAtom = new ExternalState(null);\n\nconst getRunnerUrl = (runnerOrigin: string | undefined, runPath = \"\") => {\n if (!runnerOrigin) return \"\";\n\n const origin = runnerOrigin.endsWith(\"/\") ? runnerOrigin.slice(0, -1) : runnerOrigin;\n if (!runPath) return `${origin}/`;\n if (runPath.startsWith(\"?\") || runPath.startsWith(\"#\")) return `${origin}/${runPath}`;\n return `${origin}/${runPath.replace(/^\\/+/, \"\")}`;\n};\n\nconst useRunnerSrc = () => {\n const runnerOrigin = useSelector(getRunnerOrigin);\n const environments = useSelector(getCategorisedEnvironments);\n const tableauService = useSelector(getTableauService);\n const tableauDashboard = environments?.debug?.url?.tableau_dashboard;\n const userUiPrefs = useSelector(getUserUiPrefs);\n const appId = useSelector(getAppId)!;\n const runPath = userUiPrefs?.appRunPaths?.[appId] || \"\";\n if (tableauService && tableauDashboard) {\n return getRunnerUrl(runnerOrigin, \"/_/tableau\");\n }\n return getRunnerUrl(runnerOrigin, runPath);\n};\n\nexport const useCommunicateWithRunner = (runningAppWindow: WindowProxy | null, src: string) => {\n useMessages(runningAppWindow);\n useNewTabHeartbeat(runningAppWindow);\n useRefreshNewTab(runningAppWindow, src);\n};\n\nexport const useNewTabRunner = () => {\n const src = useRunnerSrc();\n const runMode = useSelector(getRunMode);\n const [newTabWindow, setNewTabWindow] = useExternalState(newTabWindowAtom);\n useCommunicateWithRunner(newTabWindow, src);\n\n const onRunModeChange = useEffectEvent(() => {\n if (runMode === \"NEWTAB\") {\n setNewTabWindow(window.open(src, \"\"));\n } else {\n newTabWindow?.close();\n setNewTabWindow(null);\n }\n });\n\n useEffect(() => {\n onRunModeChange();\n }, [runMode]);\n\n useEffect(() => () => newTabWindow?.close(), []);\n\n return newTabWindow;\n};\n\nexport const RunnerNewTabFocusButton = () => {\n const [runningAppWindow] = useExternalState(newTabWindowAtom);\n const runMode = useSelector(getRunMode);\n if (runMode !== \"NEWTAB\") return null;\n return (\n runningAppWindow?.focus()}>\n Focus running app\n \n );\n};\n\ntype Position = { left: number; top: number };\n// maybe persist this position\nconst initPosition = { left: 0, top: 0 };\n\nconst useDraggableMaximizeButton = () => {\n const [position, setPosition] = useReducer((prev: Position, next: Position) => {\n if (prev.left === next.left && prev.top === next.top) return prev;\n return next;\n }, initPosition);\n\n const [isDragging, setIsDragging] = useState(false);\n const dragItemRef = useRef(null);\n const containerRef = useRef(null);\n\n const onPointerDown = useEvent((e: React.MouseEvent) => {\n setIsDragging(true);\n const onPointerUp = () => {\n setIsDragging(false);\n document.removeEventListener(\"pointerup\", onPointerUp, true);\n };\n document.addEventListener(\"pointerup\", onPointerUp, { capture: true, passive: true });\n });\n\n const onDragStart = useEvent((e: React.DragEvent) => {\n const rect = dragItemRef.current?.getBoundingClientRect();\n if (!rect) return;\n setIsDragging(true);\n e.dataTransfer.setData(\n \"text/plain\",\n JSON.stringify({ offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top })\n );\n e.dataTransfer.effectAllowed = \"move\";\n });\n\n const onDragOver = useEvent((e: React.DragEvent) => {\n if (!isDragging) return;\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n });\n\n const onDragEnd = useEvent((e: React.DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n });\n\n const onDrop = useEvent((e: React.DragEvent) => {\n if (!isDragging) return;\n e.preventDefault();\n setIsDragging(false);\n const containerRect = containerRef.current?.getBoundingClientRect();\n if (!containerRect) return;\n const offsets = JSON.parse(e.dataTransfer.getData(\"text/plain\"));\n let newLeft = e.clientX - containerRect.left - offsets.offsetX;\n let newTop = e.clientY - containerRect.top - offsets.offsetY;\n newLeft = Math.max(0, Math.min(containerRect.width - (dragItemRef.current?.offsetWidth ?? 0), newLeft));\n newTop = Math.max(0, Math.min(containerRect.height - (dragItemRef.current?.offsetHeight ?? 0), newTop));\n setPosition({ left: newLeft, top: newTop });\n });\n\n useResizeObserverTimeout(containerRef, () => {\n if (!containerRef.current || !dragItemRef.current) return;\n\n const containerRect = containerRef.current.getBoundingClientRect();\n const dragItemRect = dragItemRef.current.getBoundingClientRect();\n const newPosition = { ...position };\n if (newPosition.left + dragItemRect.width > containerRect.width) {\n newPosition.left = containerRect.width - dragItemRect.width;\n }\n if (newPosition.top + dragItemRect.height > containerRect.height) {\n newPosition.top = containerRect.height - dragItemRect.height;\n }\n setPosition(newPosition);\n });\n\n return {\n onDrop,\n onDragEnd,\n onDragOver,\n onDragStart,\n isDragging,\n style: position,\n onPointerDown,\n dragItemRef,\n containerRef,\n };\n};\n\nexport const RunnerIframe = () => {\n const dispatch = useDispatch();\n const src = useRunnerSrc();\n const runMode = useSelector(getRunMode);\n const isMaximized = useSelector(getRunnerViewMaximised);\n const [runningAppWindow, setRunningAppWindow] = useState(null);\n useCommunicateWithRunner(runningAppWindow, src);\n const iframeRef = useRef(null);\n\n useEffect(() => {\n if (runMode === \"INLINE\" && iframeRef.current) {\n iframeRef.current.src = src;\n setRunningAppWindow(iframeRef.current.contentWindow);\n }\n }, [src, runMode]);\n\n const runnerMaximised = useSelector(getRunnerViewMaximised);\n const onExpandRunnerClick = useEvent(() => dispatch(runnerMaximised ? restoreRunner() : maximiseRunner()));\n\n const { onDrop, onDragEnd, onDragOver, onDragStart, isDragging, style, onPointerDown, dragItemRef, containerRef } =\n useDraggableMaximizeButton();\n\n const isPaused = useSelector(getIsRunnerPaused);\n\n if (runMode !== \"INLINE\") return null;\n return (\n
\n \n {isPaused &&
}\n \n \n {isMaximized && }\n
\n \n
\n );\n};\n","import React, { useContext, useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faLevelDownAlt } from \"@fortawesome/free-solid-svg-icons/faLevelDownAlt\";\nimport { faTrash } from \"@fortawesome/free-solid-svg-icons/faTrash\";\nimport { faRefresh } from \"@fortawesome/pro-solid-svg-icons\";\nimport { faMagnifyingGlass, faPause } from \"@fortawesome/pro-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ReplEditor } from \"@/code_mirror/repl\";\nimport { getApp } from \"@/controllers/app\";\nimport { openOrFocusBottomTab } from \"@/controllers/bottom-tabs\";\nimport { getIsRunnerPaused, getPausedServerReplHyperstackId } from \"@/controllers/debugger\";\nimport { restartApp } from \"@/controllers/ide\";\nimport { modal } from \"@/controllers/modals\";\nimport {\n clearRepl,\n dismissReplBanner,\n getPreserveReplLogs,\n replCommand,\n replInterrupt,\n restartRepl,\n setPreserveReplLogs,\n} from \"@/controllers/repl\";\nimport { getDebugSessionToken, getRunMode } from \"@/controllers/runner\";\nimport { recordActivity } from \"@/controllers/util\";\nimport { cx } from \"@/theme/styles\";\nimport { AnvilDispatch, Repl, State } from \"@/types\";\nimport { checkMeta } from \"@/util\";\nimport { useFeatureSupported } from \"@/util/features\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { navigate } from \"../../router/navigation\";\nimport { Button } from \"../reusable/Button\";\nimport { LinkInternal } from \"../reusable/LinkInternal\";\nimport LiveOutput, { liveOutputSearchStore } from \"../reusable/LiveOutput\";\nimport { CheckBox } from \"../reusable/SharedComponents\";\nimport { useTooltip } from \"../reusable/Tooltip\";\nimport UpgradeBadge from \"../reusable/UpgradeBadge\";\nimport { StackFrameContext, StackFrameContextType } from \"./DebugInspector\";\n\ninterface ImportBannerProps {\n repl: Repl;\n}\n\ninterface ReplProps {\n id: string;\n repl: Repl;\n noninteractive?: boolean;\n debug?: boolean;\n}\n\nconst ImportBanner: React.FC = ({ repl }) => {\n const dispatch = useDispatch();\n const app = useSelector(getApp);\n\n const persistentAvailable = useFeatureSupported(\"persistent-server\");\n const showBanner = repl.importTimeTracking?.showImportBanner && !app?.config.runtime_options.server_persist;\n const [importBannerToolTip, importBannerAnchorRef] = useTooltip(\n \"Every server call requires set up including all module imports.\",\n \"top\"\n );\n\n useEffect(() => {\n if (showBanner) {\n dispatch(recordActivity(\"showImportBanner\", { importTime: repl.importTimeTracking?.totalImportTime }));\n }\n }, [showBanner]);\n\n return showBanner ? (\n
\n \n {importBannerToolTip}\n Total import time: {repl.importTimeTracking?.totalImportTime} ms (\n {repl.importTimeTracking?.requestCount} server calls).\n \n \n persistentAvailable\n ? dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }))\n : dispatch(modal(\"upgradePrompt\", { featureId: \"persistent-server\" }))\n }>\n Turn on persistent server to speed up your app.\n \n \n
\n ) : null;\n};\n\n/**\n * isRunning tells the replEditor whether we can/can't execute a command\n * if the last executing command is from the client, but our current context is on the server, then we can execute the command\n */\nexport function useIsRunning(repl: Repl | undefined, dbg: StackFrameContextType[\"dbg\"]) {\n const runningCmdIdx = repl?.runningCmdIdx;\n const isServer = repl?.type === \"server\" || (repl?.type === \"runner\" && !!dbg?.location);\n return runningCmdIdx != null && !!repl?.output.at(runningCmdIdx)?.onServer === !!isServer;\n}\n\ninterface ReplToolbarProps {\n id: string;\n repl: Repl;\n autoScroll: boolean;\n setAutoScroll: (autoScroll: boolean) => void;\n}\n\nconst ReplToolbar = ({ repl, id, autoScroll, setAutoScroll }: ReplToolbarProps) => {\n const dispatch = useDispatch();\n\n const preserveReplLogs = useSelector(getPreserveReplLogs);\n const [preserveLogs, setPreserveLogs] = useState(preserveReplLogs || false);\n\n const [autoScrollToolTip, autoScrollAnchorRef] = useTooltip(\"Toggle output auto-scroll\", \"top-right\");\n const [refreshToolTip, refreshAnchorRef] = useTooltip(\n repl.type === \"server\" ? \"Restart Server Repl\" : \"Restart App\",\n \"top-right\"\n );\n\n const onUpdatePreserveLogs = useEvent(async () => {\n setPreserveLogs((p) => !p);\n await dispatch(setPreserveReplLogs(repl.id, !preserveLogs));\n });\n\n return (\n
\n
\n liveOutputSearchStore.toggle()}>\n \n \n {\n dispatch(clearRepl(id));\n }}>\n \n \n {\n switch (repl.type) {\n case \"server\":\n dispatch(restartRepl(id));\n break;\n case \"runner\":\n dispatch(restartApp());\n break;\n }\n }}>\n {refreshToolTip}\n \n \n setAutoScroll(!autoScroll)}>\n {autoScrollToolTip}\n \n \n \n
\n \n
\n );\n};\n\nconst REPL: React.FC = ({ id, repl, noninteractive = false }) => {\n const dispatch = useDispatch();\n const app = useSelector(getApp);\n const runMode = useSelector(getRunMode);\n const sessionToken = useSelector(getDebugSessionToken);\n\n const [autoScroll, setAutoScroll] = useState(true);\n\n const isRunner = repl.type === \"runner\";\n\n const frameContext = useContext(StackFrameContext);\n const { hyperstackId, dbg } = frameContext;\n\n const onCloseBanner = useEvent(() => dispatch(dismissReplBanner(id)));\n const onExec = useEvent(async (code: string) => await dispatch(replCommand(id, code, frameContext)));\n const onInterrupt = useEvent(() => dispatch(replInterrupt(id, frameContext)));\n\n let appHasChanged = repl.commitId !== app?.commitSha;\n if (repl.type === \"runner\") {\n // if repl for the client console make sure the app is running\n appHasChanged &&= !!runMode;\n }\n const isRunnerPaused = useSelector(getIsRunnerPaused);\n const pausedServerReplHyperstackId = useSelector((state: State) =>\n repl.type === \"server\" ? getPausedServerReplHyperstackId(state, id) : undefined\n );\n const isServer = repl.type === \"server\" || (isRunner && !!dbg?.location);\n const readOnly = repl.readOnly || (!isServer && sessionToken == null);\n\n const runningCmdIdx = repl.runningCmdIdx;\n\n const isRunning = useIsRunning(repl, dbg);\n\n const pausedHyperstackId = isRunner ? (isRunnerPaused ? \"runner\" : undefined) : pausedServerReplHyperstackId;\n const overlay = !hyperstackId && !!pausedHyperstackId;\n\n const onKeyDown = useEvent((e: React.KeyboardEvent) => {\n if (e.key === \"f\" && checkMeta(e)) {\n liveOutputSearchStore.open();\n }\n });\n\n return (\n
\n {!hyperstackId && }\n
\n
\n \n
\n
\n {!readOnly && !repl.bannerDismissed && appHasChanged && (\n
\n
\n {isRunner ? (\n <>\n The app has changed since you ran it.{\" \"}\n dispatch(restartApp())}>\n Click here to restart\n \n .\n \n ) : (\n <>\n The app has changed since you opened this Server Console.{\" \"}\n dispatch(restartRepl(id))}>\n Click here to reload\n \n \n )}\n
\n \n \n \n \n
\n )}\n {isServer && readOnly && (\n
\n \n
\n )}\n\n {!noninteractive && (\n
\n \n
\n )}\n {overlay && (\n
\n {\n dispatch(openOrFocusBottomTab({ type: \"debugger\", hyperstackId: pausedHyperstackId! }));\n }}>\n App Paused - Visit Debug Tab\n \n
\n )}\n
\n );\n};\n\nexport default REPL;\n","import React from \"react\";\nimport { join } from \"lodash-es\";\nimport moment from \"moment\";\nimport { modalReturn } from \"@/controllers/modals\";\nimport { ModalComponent } from \".\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal from \"./Modal\";\n\nconst VulnerablePackage = ({ pkg }: { pkg: any }) => {\n return (\n
\n
\n \n Package: {pkg.name} {pkg.version}\n \n {pkg.dep_path.length > 0 && (\n \n Required by:{\" \"}\n \n {pkg.dep_path.map((x: string) => (\n {x} → \n ))}{\" \"}\n {pkg.name}\n \n \n )}\n
    \n {pkg.vulns.map(({ id, description, fix_versions }: any) => (\n
  • \n \n {id}: {description}\n \n {fix_versions.length === 0 && Not yet fixed}\n {fix_versions.length === 1 && (\n \n Fixed in version {fix_versions[0]}\n \n )}\n {fix_versions.length > 1 && (\n \n Fixed in versions {join(fix_versions)}\n \n )}\n
    • \n ))}\n
\n
\n );\n};\n\nexport const PipAudit: ModalComponent<{ checkDate: string | null; pipAudit: unknown[] }> = ({\n modalId,\n spec: { checkDate, pipAudit },\n}) => {\n const reportDate = moment.utc(checkDate);\n return (\n modalReturn(true) }]}>\n The following vulnerabilities were reported in your installed packages:\n {pipAudit.map((p, i) => (\n \n ))}\n \n );\n};\n","import React, { useRef } from \"react\";\nimport { connect } from \"react-redux\";\nimport { faCodeBranch } from \"@fortawesome/free-solid-svg-icons/faCodeBranch\";\nimport { faRedo } from \"@fortawesome/free-solid-svg-icons/faRedo\";\nimport { getAppEditState } from \"@/controllers/app\";\nimport type { AnvilConnectedProps, State } from \"@/types\";\nimport { ModalComponent } from \".\";\nimport { ModalButton } from \"../reusable/SharedComponents\";\nimport Modal, { ModalRef } from \"./Modal\";\n\ninterface SaveConflictSpec {\n otherUser?: string | null;\n canBranch?: boolean;\n}\n\nconst connector = connect((state: State) => ({\n editState: getAppEditState(state),\n}));\n\ntype SaveConflictProps = AnvilConnectedProps;\n\nconst SaveConflict: ModalComponent = ({\n modalId,\n spec: { otherUser, canBranch },\n editState,\n}) => {\n const modalRef = useRef(null);\n\n return (\n \n {canBranch && otherUser ? `${otherUser} has` : \"You have\"} made a change to the '{editState!.branch}'\n branch of this app elsewhere.\n

\n Your current changes will be lost.\n

\n
\n {canBranch && (\n

\n You can either reset this app to latest version, or you can switch to your development branch and\n continue working on that branch.\n

\n )}\n
\n modalRef.current?.returnValue(false)}\n variant={\"primary\"}\n icon={faRedo}>\n Reset app to latest version{\" \"}\n \n {canBranch && (\n modalRef.current?.returnValue(true)}\n variant={\"primary\"}\n icon={faCodeBranch}>\n Switch to my development branch{\" \"}\n \n )}\n \n );\n};\n\nexport default connector(SaveConflict) as typeof SaveConflict;\n","import React, { useEffect, useMemo, useReducer, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faClock } from \"@fortawesome/pro-light-svg-icons/faClock\";\nimport ComboBox from \"@/components/reusable/ComboBox\";\nimport { useStyles as useInputStyles } from \"@/components/reusable/Forms\";\nimport { ContentDropdownMenuItem, ContentTextInput } from \"@/components/reusable/SharedComponents\";\nimport { Heading } from \"@/components/reusable/Text\";\nimport ScheduledTaskLastRunInfo from \"@/components/tabs/scheduled_tasks/ScheduledTaskLastRunInfo\";\nimport { getAppPackageName, markSaved, markUnsaved } from \"@/controllers/app\";\nimport { getDefinedBackgroundTasks } from \"@/controllers/app/autocompleter\";\nimport {\n DAY,\n DAYS,\n HOUR,\n MINUTE,\n MONTH,\n PERIODS,\n TaskUpdate,\n WEEK,\n addScheduledTask,\n getOrdinalSuffix,\n namePeriod,\n taskReducer,\n updateScheduledTask,\n} from \"@/controllers/scheduledtasks\";\nimport { cx } from \"@/theme/styles\";\nimport { AnvilDispatch, ScheduledTask } from \"@/types\";\nimport { blockEvent, checkMeta } from \"@/util\";\nimport { useEffectAsync } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\nimport type { ModalComponent } from \".\";\nimport Modal from \"./Modal\";\n\ninterface NewTask extends Omit {\n job_id?: ScheduledTask[\"job_id\"];\n}\n\nconst DAY_OPTIONS = DAYS.map((day, idx) => (\n \n));\n\n// we use uncontrolled components - i.e. set the defaultValue not the value\nconst ScheduledTaskInput = (props: React.ComponentProps) => (\n \n);\n\ninterface BgTask {\n name: string;\n moduleName: string;\n}\n\nconst BgTaskFnItem = ({ name, moduleName }: BgTask) => (\n
\n {name}\n ({moduleName})\n
\n);\n\nconst BackgroundTaskPicker: React.FC = ({ task: { task_name }, updateTask }) => {\n const dispatch = useDispatch();\n const packageName = useSelector(getAppPackageName);\n const [backgroundTasksFromAutoCompleter, setBackgroundTasksFromAutoCompleter] = useState([]);\n\n useEffectAsync(async function* () {\n const bgTasks = await dispatch(getDefinedBackgroundTasks());\n yield;\n setBackgroundTasksFromAutoCompleter(bgTasks);\n }, []);\n\n const [backgroundItems, backgroundRenderMap] = useMemo(() => {\n const packagePrefix = new RegExp(\"^\" + packageName + \"\\\\.\");\n const bgRender: Map = new Map();\n for (const { name, moduleName } of backgroundTasksFromAutoCompleter) {\n if (bgRender.has(name)) continue;\n const simplifiedModuleName = moduleName.replace(packagePrefix, \"\");\n bgRender.set(name, );\n }\n return [Array.from(bgRender.keys()), bgRender] as const;\n }, [backgroundTasksFromAutoCompleter, packageName]);\n\n return (\n updateTask({ task_name })}\n items={backgroundItems}\n renderItem={(i) => backgroundRenderMap.get(i)}\n onEnter={(e) => !checkMeta(e) && blockEvent(e)} // otherwise the modal closes on enter\n />\n );\n};\n\ninterface EditScheduledTaskItemProps {\n task: NewTask;\n updateTask: React.Dispatch;\n className?: string;\n inline?: boolean;\n}\n\nconst useUpdateTaskOnChange = (k: K, updateTask: React.Dispatch) => {\n return useEvent((e: React.ChangeEvent) => {\n updateTask({ [k]: e.target.value as TaskUpdate[K] });\n });\n};\n\nexport const EditTimeSpec = ({ task, updateTask, inline, className }: EditScheduledTaskItemProps) => {\n const timeSpec = task.time_spec || { at: {} };\n const atSpec = timeSpec.at ?? {};\n const hourStr = String(atSpec.hour ?? 3).padStart(2, \"0\");\n const minuteStr = String(atSpec.minute ?? 0).padStart(2, \"0\");\n const { every } = timeSpec;\n\n const onChangeEvery = useUpdateTaskOnChange(\"every\", updateTask);\n const onChangeN = useUpdateTaskOnChange(\"n\", updateTask);\n const onChangeDay = useUpdateTaskOnChange(\"day\", updateTask);\n const onChangeHour = useUpdateTaskOnChange(\"hour\", updateTask);\n const onChangeMin = useUpdateTaskOnChange(\"minute\", updateTask);\n\n return (\n
\n
\n  {inline ? \"e\" : \"E\"}very \n \n \n {PERIODS.map((period, idx) => (\n \n ))}\n \n
\n {every === WEEK && (\n
\n  on \n \n {DAY_OPTIONS}\n \n
\n )}\n {every === MONTH && (\n
\n  on \n \n {getOrdinalSuffix(atSpec.day ?? 1)}\n
\n )}\n {every !== MINUTE && (\n
\n  at \n {every !== HOUR && (\n \n )}\n {every === HOUR && <> ∗}:\n \n
\n )}\n {(every === MONTH || every === WEEK || every === DAY) && <> UTC}\n  \n
\n );\n};\n\nconst checkIsExistingTask = (task: NewTask): task is ScheduledTask => !!task.job_id;\n\nconst EDIT_TEXT = [\"Edit Scheduled Task\", \"Update\", \"Cancel\"] as const;\nconst ADD_TEXT = [\"Create Scheduled Task\", \"Add\", \"Discard\"] as const;\n\nconst ScheduledTaskModal: ModalComponent<{ task: NewTask }> = ({ modalId, spec: { task: originalTask } }) => {\n const dispatch = useDispatch();\n const saveKey = `scheduled-task-${originalTask.job_id}`;\n\n const [task, updateTask] = useReducer(taskReducer, originalTask);\n const isExistingTask = checkIsExistingTask(task);\n\n const enabled = task !== originalTask && !!task.task_name;\n useEffect(() => {\n if (!enabled) return;\n dispatch(markUnsaved(saveKey));\n return () => {\n dispatch(markSaved(saveKey));\n };\n }, [enabled, saveKey, dispatch]);\n\n const onUpdateOrAdd = useEvent(async () => {\n if (!task.task_name) {\n return;\n }\n if (isExistingTask) {\n await dispatch(updateScheduledTask(task));\n } else {\n await dispatch(addScheduledTask(task));\n }\n });\n\n const [title, save, cancel] = isExistingTask ? EDIT_TEXT : ADD_TEXT;\n\n const { classes: inputClasses } = useInputStyles();\n\n return (\n \n
\n Task to Run\n Run Task\n \n \n
\n {isExistingTask && (\n
\n \n
\n )}\n \n );\n};\n\nexport default ScheduledTaskModal;\n","import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faAngleDoubleUp } from \"@fortawesome/pro-light-svg-icons/faAngleDoubleUp\";\nimport { faChevronRight } from \"@fortawesome/pro-light-svg-icons/faChevronRight\";\nimport { faCheck } from \"@fortawesome/pro-solid-svg-icons/faCheck\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { every } from \"lodash-es\";\nimport * as api from \"@/api\";\nimport { getAppId } from \"@/controllers/app\";\nimport { getFeatures, getIsIDE, getSubscription, getUser, reloadUser } from \"@/controllers/ide\";\nimport { alert } from \"@/controllers/modals\";\nimport { startUpgrade } from \"@/controllers/payment\";\nimport { restoreRunnerView } from \"@/controllers/runner\";\nimport { startTrial } from \"@/controllers/user\";\nimport { navigate } from \"@/router/navigation\";\nimport { makeStyles, useIsPySpace } from \"@/theme/styles\";\nimport type { AnvilDispatch, GadgetDispatch } from \"@/types\";\nimport { getPlanName } from \"@/util/features\";\nimport { useEffectAsync } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { setRightPanelContent } from \"@pyspace/gadget_editor/controllers/gadget\";\nimport type { ModalComponent } from \".\";\nimport { Button } from \"../reusable/Button\";\nimport { HelpLink } from \"../reusable/HelpLink\";\nimport { ModalButton } from \"../reusable/SharedComponents\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal from \"./Modal\";\nimport type { ModalRef } from \"./Modal\";\n\n// There are three Upgrade Prompt modals to choose from:\n//\n// - Open app with feature you don't have access to. For runtime, offer 7 day trial, or show trial requested (or expired? Somehow?). For everything else, door slam.\n// - UpgradePromptOnOpenApp\n// - Runtime uses feature not supported on your plan. Basically always going to be a module import (or an email send?)\n// - UpgradePromptOnRuntimeFeatureRequired\n// - Click a feature explicitly labelled \"BUSINESS PLAN\" etc. Show plan-specific modal. Optionally, specialise this modal depending on which feature was clicked.\n// - UpgradePrompt\nlet useStyles = makeStyles()((theme) => ({\n lowerButtons: {\n marginTop: \"2rem\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n gap: \"1rem\",\n },\n}));\n\ninterface FullRuntimeStatusProps {\n onStartTrial?: () => Promise | void;\n onConfirmTrialRequested: () => void;\n}\n\nconst FullRuntimeStatus = ({ onStartTrial, onConfirmTrialRequested }: FullRuntimeStatusProps) => {\n // This gets triggered when you choose a runtime that you don't have access to on your subscription\n //\n // Cases:\n // - You haven't had a trial --> Option to activate one\n // - You have already had your trial --> Upgrade\n\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const onStartRuntimeTrial = useEvent(() => {\n dispatch(startTrial(\"python3-full\"));\n });\n\n if (user.trial) {\n // User has already started a trial. If we've got here, it must have expired.\n if (user.trial.expired) {\n return (\n
\n Your trial of the Full Python server has expired. To continue using the Full Python server, upgrade\n now!\n
\n );\n } else {\n return (\n
\n \n You have requested a trial of the Full Python server. It will be activated in the next 24 hours.\n \n \n
\n );\n }\n } else {\n // User has never had a trial. Give them the option to start one.\n return (\n
\n To try a Full Python server before upgrading, you can activate a 7-day trial.\n \n \n Trial will activate within 24 hours\n \n
\n );\n }\n};\n\ninterface CustomPackagesStatusProps {\n onStartTrial?: () => Promise | void;\n onInstallPackagesNow: () => void;\n modalRef: React.RefObject;\n}\n\nconst CustomPackagesStatus = ({ onStartTrial, onInstallPackagesNow, modalRef }: CustomPackagesStatusProps) => {\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const onStartRuntimeTrial = useEvent(async () => {\n await onStartTrial?.();\n await dispatch(startTrial(\"custom-packages\"));\n modalRef.current!.returnValue(true);\n });\n\n if (user.trial) {\n // User has already started a trial. If we've got here, it must have expired.\n if (user.trial.expired) {\n return (\n
\n Your trial of custom package installations has expired. To continue using the Full Python server,\n upgrade now!\n
\n );\n } else {\n return (\n
\n \n Trial activated! \n \n \n
\n );\n }\n } else {\n // User has never had a trial. Give them the option to start one.\n return (\n
\n To try installing custom packages before upgrading, you can activate a 7-day trial.\n \n
\n );\n }\n};\n\ninterface UpgradePromptOnOpenAppSpec {\n featureIds: string[];\n}\n\nexport const UpgradePromptOnOpenApp: ModalComponent = ({\n modalId,\n spec: { featureIds },\n}) => {\n // The provided features are guaranteed not to be available on the current subscription.\n // console.log(user.features, featureIds);\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const appId = useSelector(getAppId);\n const subscription = useSelector(getSubscription);\n const features = featureIds.map((id) => user.features[id]);\n\n const modalRef = useRef(null);\n\n const [requiredPlan, setRequiredPlan] = useState(\"paid\");\n\n useEffectAsync(async () => {\n setRequiredPlan((await api.getPlanSupportingAllFeatures(featureIds)) || \"paid\");\n }, []);\n\n if (!every(features)) {\n console.error(`No feature found for one of [${features}].`);\n return No feature found found for one of [{`${features}`}].;\n }\n\n // Steps:\n // 1. Map which plan is required to suit all these features\n // 2. Work out whether all the features required are \"can run without\" features\n // 3. Work out whether \"full Python runtime\" is on the list, because that gets special UI\n // 4. - Show the list of features\n // - If appropriate, show the \"Full Python trial\" UI\n // - Display more or less apocalyptic copy depending on the answer to #2\n\n const canRunWithout = every(featureIds, (fid) => user.features[fid].canRunWithout);\n const fullPythonRequired = featureIds.indexOf(\"full-python-runtime\") > -1;\n const customPackagesRequired = featureIds.indexOf(\"custom-packages\") > -1;\n const isDedicatedPlan = requiredPlan === \"dedicated\";\n const rpName = isDedicatedPlan ? \"Business Plan with Extra Server Resources\" : getPlanName(requiredPlan) + \" Plan\";\n\n const renderFeature = (featureId: string) => {\n const feature = user.features[featureId];\n return (\n <>\n {feature.helpLink ? (\n \n {feature.name}\n \n ) : (\n {feature.name}\n )}\n \n );\n };\n\n return (\n {\n window.location.href = \"mailto:support@anvil.works\";\n },\n }\n : {\n text: \"Upgrade now\",\n defaultButton: true,\n close: true,\n variant: \"primary\",\n clickActionCreator: () =>\n startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: requiredPlan,\n }),\n },\n { text: \"Not yet\", close: true },\n ]}>\n

\n {featureIds.length === 1 ? (\n <>\n This app uses {renderFeature(featureIds[0])}, available on the {rpName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n ) : (\n <>\n This app uses:\n

    \n {featureIds.map((fid, idx) => (\n
  • {renderFeature(fid)}
    • \n ))}\n
\n
\n These features are available on the {rpName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n )}\n

\n\n

\n {canRunWithout\n ? `You can run this app, but ${\n featureIds.length === 1 ? \"this feature\" : \"these features\"\n } will not be available.`\n : \"You can look around and edit this app, but it probably won't run correctly.\"}\n

\n\n {fullPythonRequired ? (\n modalRef.current!.returnValue(true)} />\n ) : customPackagesRequired ? (\n {\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n modalRef.current!.returnValue(true);\n }}\n />\n ) : null}\n \n );\n};\n\ninterface ConfigureOrUpgradePromptOnRuntimeFeatureRequiredSpec {\n module: string;\n hasRuntime: boolean;\n configured: boolean;\n trialRequested?: boolean;\n}\n\nexport const ConfigureOrUpgradePromptOnRuntimeFeatureRequired: ModalComponent<\n ConfigureOrUpgradePromptOnRuntimeFeatureRequiredSpec,\n boolean | undefined\n> = ({ modalId, spec: { module, hasRuntime, configured, trialRequested = false } }) => {\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const appId = useSelector(getAppId);\n const subscription = useSelector(getSubscription);\n const { classes } = useStyles();\n const featureId = \"custom-packages\";\n const features = useSelector(getFeatures);\n const feature = features[featureId];\n const plan = getPlanName(feature?.upgradePlan || feature.plan);\n\n const isPySpace = useIsPySpace();\n\n let modalRef = useRef(null);\n const subStateRef = useRef(subscription);\n subStateRef.current = subscription;\n\n const goToSettings = useCallback(() => {\n dispatch(restoreRunnerView());\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n modalRef.current!.returnValue(true);\n }, [modalRef, appId, subscription]);\n\n const startRuntimeTrial = useCallback(async () => {\n const started = await api.startRuntimeTrial(featureId);\n if (started) {\n await dispatch(reloadUser());\n dispatch(alert(\"Trial activated\", \"Your trial has been successfully activated!\"));\n goToSettings();\n } else {\n dispatch(\n alert(\n \"Something's gone wrong!\",\n \"Sorry, we were unable to begin your trial. Please contact support@anvil.works\"\n )\n );\n }\n modalRef.current!.returnValue(true);\n }, []);\n\n const goToUpgrade = async () => {\n await (startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: feature?.upgradePlan || feature.plan,\n }) as ReturnType & Promise);\n if (Object.keys(subStateRef.current!).length !== 0) {\n goToSettings();\n }\n };\n\n const goToPySpacePackages = () => {\n dispatch(setRightPanelContent(() => \"packages\"));\n modalRef.current!.returnValue(true);\n };\n\n const buttons = useMemo(() => {\n if (hasRuntime) {\n return (\n <>\n {isPySpace ? (\n \n Go to Packages\n \n ) : (\n \n Go to settings\n \n )}\n modalRef.current!.returnValue(false)}>Cancel\n \n );\n } else {\n return (\n <>\n \n Upgrade\n \n modalRef.current!.returnValue(false)}>Not yet\n \n );\n }\n }, [hasRuntime, appId]);\n\n const title = useMemo(() => {\n return hasRuntime\n ? \"Configure your app\"\n : user?.trial\n ? \"Upgrade to configure your app\"\n : \"Upgrade or Start your 7-day trial\";\n }, [hasRuntime, user?.trial]);\n\n return (\n \n \n The {module} module is not currently installed in the server environment of this app.\n \n {hasRuntime ? (\n configured ? (\n \n Install custom packages in the app settings.{\" \"}\n \n Learn more about custom Python packages\n \n \n ) : (\n \n Enable custom packages by switching to Python 3.10 and installing custom packages in the app\n settings.{\" \"}\n \n Learn more about custom Python packages\n \n \n )\n ) : (\n <>\n {\" \"}\n {configured ? (\n \n To import any third-party python package into your app, upgrade your subscription to the{\" \"}\n {plan} plan and install custom packages in your app.{\" \"}\n \n Learn more about custom Python packages\n \n \n ) : (\n \n Import third-party python packages directly into your app by upgrading to a paid\n subscription. You'll be able to switch the app's python version to Python 3.10 and{\" \"}\n \n install custom packages\n \n \n )}\n {!user?.trial && (\n
\n \n Start a 7-day free trial today\n \n
\n )}\n \n )}\n\n
{buttons}
\n \n );\n};\n\nexport const planInfo = {\n hobby: [\n <>Publish your app on a custom domain,\n <>Scheduled Tasks,\n <>Data File,\n <>No Anvil banners on your app,\n ],\n business: [\n <>Collaborate on private repos,\n <>Handle heavy traffic ,\n <>Add custom domain names to your apps,\n <>Persistent server code for high performance,\n <>Unlimited Custom Domains,\n <>90 days of App Logs,\n ],\n dedicated: [\n <>SQL access to your Data Tables,\n <>Separate server code and database hosting,\n <>Private IP address for firewall access,\n <>Ultra-heavy-duty traffic and storage (pay only for the AWS resources you use),\n <>SQL access to your Data Tables,\n <>Indexes on your Data Tables,\n <>90 days of App Logs,\n ],\n production: [\n <>Priority email support,\n <>High-performance server,\n <>Direct SQL access,\n ],\n enterprise: [\n <>On-site or private cloud installation,\n <>Integrate with Enterprise authentication systems,\n <>Audit capabilities,\n ],\n};\n\ninterface UpgradePromptSpec {\n featureId: string;\n onStartTrial?: () => Promise | void;\n additionalIntroText?: React.ReactNode;\n}\n\nexport const UpgradePrompt: ModalComponent = ({\n modalId,\n spec: { featureId, onStartTrial, additionalIntroText },\n}) => {\n const inIde = useSelector(getIsIDE);\n const subscription = useSelector(getSubscription);\n const features = useSelector(getFeatures);\n const feature = features[featureId];\n const requiredPlan = feature?.upgradePlan || feature.plan;\n const isDedicatedPlan = requiredPlan === \"dedicated\";\n const planName = isDedicatedPlan\n ? \"Business Plan with Extra Server Resources\"\n : getPlanName(requiredPlan) + \" Plan\";\n\n const modalRef = useRef(null);\n\n if (!feature) {\n console.error(`No feature found with ID '${featureId}'.`);\n return No feature found with ID '{featureId}'.;\n }\n\n return (\n {\n window.location.href = \"mailto:support@anvil.works\";\n },\n }\n : {\n text: \"Upgrade now\",\n defaultButton: true,\n close: true,\n variant: \"primary\",\n clickActionCreator: () =>\n startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: requiredPlan,\n }),\n },\n { text: \"Not yet\", close: true },\n ]}>\n {additionalIntroText}\n \n The {feature.name} feature requires an Anvil {planName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n {featureId === \"full-python-runtime\" ? (\n modalRef.current!.returnValue(true)} />\n ) : featureId === \"custom-packages\" ? (\n modalRef.current!.returnValue(true)}\n />\n ) : (\n feature.helpLink && (\n \n Learn more about {feature.name}\n \n )\n )}\n\n
\n\n An Anvil {planName} gives you:\n\n
    \n {(planInfo[feature.upgradePlan as keyof typeof planInfo] ||\n planInfo[feature.plan as keyof typeof planInfo])!.map((pi, idx) => (\n
  • \n {pi}\n
    • \n ))}\n
\n \n );\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { faUpload } from \"@fortawesome/free-solid-svg-icons/faUpload\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { ContentTextInput, ModalButton } from \"@/components/reusable/SharedComponents\";\nimport { addNew, uploadAsset } from \"@/controllers/app/code\";\nimport { alert } from \"@/controllers/modals\";\nimport { cx } from \"@/theme/styles\";\nimport { AnvilDispatch } from \"@/types\";\nimport { Asset, cssify, getThumbnail, useAssets, useThumbnails } from \"@/util/hooks/assets\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { ModalComponent } from \".\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal, { ModalRef } from \"./Modal\";\n\nconst THEME_PREFIX = \"_/theme/\";\nconst MAX_SIZE = 1024 * 1024 * 1.5;\n\ninterface AssetProps {\n display: string;\n value: string | null;\n thumbnail: React.ReactNode;\n isSelected: boolean;\n}\n\nconst SelectableUri = (props: AssetProps & UriProps) => {\n const { display, value, isSelected, modalRef, setSelected, thumbnail, closeOnDoubleClick } = props;\n const linkRef = useRef(null!);\n useEffect(() => {\n if (!isSelected) return;\n let cancelled = false;\n setTimeout(() => {\n if (cancelled) return;\n linkRef.current.scrollIntoView({ block: \"nearest\" });\n }, 150);\n return () => {\n cancelled = true;\n };\n }, [isSelected]);\n\n return (\n {\n if (!closeOnDoubleClick) return;\n modalRef.current?.returnValue(value);\n }}\n onClick={() => setSelected(value)}>\n
\n {thumbnail}\n
\n {display}\n \n );\n};\n\nconst DefaultUri = ({ value, ...props }: UriProps) => {\n const { selected, defaultValue } = props;\n\n return (\n \n );\n};\ninterface ShowAllAssetsLinkProps {\n viewAllAssets: boolean;\n setViewAllAssets: React.Dispatch>;\n}\nconst ShowAllAssetsLink = ({ viewAllAssets, setViewAllAssets }: ShowAllAssetsLinkProps) => {\n return (\n setViewAllAssets((s) => !s)}>\n {viewAllAssets ? \"Hide\" : \"Include\"} assets from dependencies\n \n );\n};\n\nconst SelectableAssets = ({ value, ...props }: UriProps) => {\n const [viewAllAssets, setViewAllAssets] = useState(false);\n const { accept, selected, isSelectedAsset, includeDependencies, assetPrefix } = props;\n const { appAssets, depAssets, allAssets } = useAssets(accept, includeDependencies);\n\n const assets = viewAllAssets ? allAssets : appAssets;\n const thumbnails = useThumbnails(assets);\n\n if (!allAssets.length) return null;\n return (\n <>\n
\n Available assets:\n {depAssets.length > 0 && (\n \n )}\n
\n
    \n {assets.length ? (\n assets.map((asset, i) => (\n
  • \n \n
    • \n ))\n ) : (\n
    No assets have been uploaded to this app.
    \n )}\n
\n \n );\n};\n\nconst UrlInput = ({ selected, setSelected, isURL }: UriProps) => {\n const TextInput = useRef(null!);\n\n const [urlText, setUrlText] = useState(() => (isURL(selected) && selected) || \"https://\");\n\n const onUrlChange = useEvent((e: React.ChangeEvent) => {\n const text = e.target.value;\n setSelected(text);\n setUrlText(text);\n });\n\n return (\n
\n Enter a URL\n
\n setSelected(TextInput.current.value)}>\n \n setSelected(e.target.value)}\n className={\"flex-auto\"}\n value={urlText}\n onChange={onUrlChange}\n />\n \n
\n
\n );\n};\n\nconst UploadButton = ({ setSelected, checkValidity, maxSize, accept, assetPrefix, pkgPrefix }: UriProps) => {\n const dispatch = useDispatch();\n const FileInput = useRef(null);\n\n const onFileChange: React.ChangeEventHandler = useEvent(async (e) => {\n let asset = e.target.files?.[0];\n if (!asset) return;\n if (maxSize && asset.size > MAX_SIZE) {\n return dispatch(alert(\"File Too Large\", \"The file is too large for your assets, try reducing the size\"));\n }\n if (checkValidity) {\n const valid = await checkValidity(asset);\n if (valid === false) {\n return;\n } else if (valid === true) {\n // pass\n } else {\n asset = valid;\n }\n }\n if (pkgPrefix) {\n try {\n // Because just uploading a file into a folder that doesn't exist will fail\n // and it's safe to try to add a folder that already exists\n await dispatch(addNew(\"asset_folder\", true, \"\", pkgPrefix));\n } catch (e) {\n // the folder exists\n }\n }\n const codeStructure = await dispatch(uploadAsset(asset, pkgPrefix, false));\n if (codeStructure) {\n setSelected(assetPrefix + codeStructure.fullName);\n }\n });\n\n return (\n
\n FileInput.current?.click()}>\n
\n \n Upload\n
\n e.stopPropagation()}\n onChange={onFileChange}\n type=\"file\"\n accept={accept}\n />\n \n
\n );\n};\n\nexport interface UriSpec {\n title: string;\n text?: string;\n defaultValue?: string;\n value: string | null | undefined;\n accept?: string;\n maxSize?: number;\n freeText?: boolean;\n assetPrefix?: string;\n uploadInfo?: string;\n pkgPrefix?: string;\n}\n\ninterface UriProps extends UriSpec {\n selected: string | null;\n setSelected(v: string | null): void;\n modalRef: React.RefObject;\n closeOnDoubleClick?: boolean;\n includeDependencies?: boolean;\n checkValidity?: (asset: File) => Promise;\n isSelectedAsset: (asset: Asset, selected: string | null) => boolean;\n isURL: (selected: string | null) => boolean;\n}\n\ninterface UriModalProps {\n onModalReturn?: (v: string | null) => Promise;\n closeOnDoubleClick?: boolean;\n includeDependencies?: boolean;\n checkValidity?: (asset: File) => Promise;\n}\n\nconst UriUploader: ModalComponent = (modalProps) => {\n const {\n modalId,\n spec,\n onModalReturn,\n closeOnDoubleClick = true,\n includeDependencies = true,\n checkValidity,\n } = modalProps;\n const {\n maxSize = MAX_SIZE,\n value,\n title,\n text,\n defaultValue,\n freeText,\n assetPrefix = THEME_PREFIX,\n uploadInfo,\n } = spec;\n const [selected, setSelected] = useState(value ?? null);\n const modalRef = useRef(null);\n const isSelectedAsset = (asset: Asset, selected: string | null) => selected === assetPrefix + asset.fullName;\n const isURL = (selected: string | null) => !!selected && !selected.startsWith(assetPrefix);\n const props = {\n ...spec,\n assetPrefix,\n maxSize,\n selected,\n setSelected,\n modalRef,\n isSelectedAsset,\n isURL,\n closeOnDoubleClick,\n includeDependencies,\n checkValidity,\n };\n\n const onSave = useEvent(async () => {\n let rv = selected;\n if (onModalReturn) {\n rv = await onModalReturn(selected);\n }\n modalRef.current?.returnValue(rv);\n });\n\n return (\n {\n onSave();\n },\n defaultButton: true,\n close: false,\n },\n { text: \"Cancel\" },\n ]}>\n
\n {text && {text}}\n {defaultValue && }\n \n {freeText && }\n
\n \n {uploadInfo && (\n \n {uploadInfo}\n \n )}\n
\n \n );\n};\n\nexport default UriUploader;\n","import React from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { getModals, modalPropsCache } from \"@/controllers/modals\";\nimport Modal from \"./Modal\";\n\nexport type ModalId = number;\n\nexport interface ModalComponent {\n (props: ModalProps & P): React.ReactNode;\n returnType?: R;\n}\n\n// Prefer ModalComponent over ModalProps\nexport interface ModalProps {\n modalId: ModalId;\n spec: S;\n type: T;\n}\n\nexport type ModalTypes = { [modalType: string]: ModalComponent };\n\nconst Modals = ({ modalTypes }: { modalTypes: ModalTypes }) => {\n const modals = useSelector(getModals);\n return (\n <>\n {modals.map((modalId) => {\n const modalProps = modalPropsCache.get(modalId);\n const ModalComponent = modalProps ? modalTypes[modalProps.type] : null;\n if (ModalComponent && modalProps) {\n return ;\n } else {\n return (\n \n Unknown modal type: {modalProps?.type}.\n \n );\n }\n })}\n \n );\n};\n\nexport default Modals;\n","import Alert from \"@/components/modals/Alert\";\nimport Confirm from \"@/components/modals/Confirm\";\nimport ConfirmWithCheckBox from \"@/components/modals/ConfirmWithCheckBox\";\nimport Prompt from \"@/components/modals/Prompt\";\nimport DeleteGadgetModal from \"@/pyspace/common/modals/DeleteGadget\";\nimport { ModalTypes } from \"..\";\nimport SimpleModal from \"../SimpleModal\";\n\nexport const commonModalTypes = {\n alert: Alert,\n confirm: Confirm,\n confirmWithCheckBox: ConfirmWithCheckBox,\n prompt: Prompt,\n deleteGadget: DeleteGadgetModal,\n simpleModal: SimpleModal,\n} as const satisfies ModalTypes;\n\nexport type CommonModalTypes = typeof commonModalTypes;\nexport type CommonModalType = keyof CommonModalTypes;\n","import * as React from \"react\";\nimport { cx, makeStyles, useIsPySpace } from \"../../theme/styles\";\nimport { ignoreSsrWarning } from \"../../theme/utils\";\nimport { useLongPress } from \"../../util/useLongPress\";\nimport { Button, ButtonProps, ButtonVariant } from \"./Button\";\n\nconst useStyles = makeStyles()((theme) => {\n const groupTheme = (theme.buttonGroup ?? {}) as any;\n return {\n root: {\n display: groupTheme.display ?? \"block\",\n \"& > * > *\": {\n borderRadius: \"0 !important\",\n },\n [`& > *:first-child${ignoreSsrWarning} > *`]: {\n borderLeft: groupTheme.firstBorder,\n borderRadius: groupTheme.firstBorderRadius ?? \"5px 0 0 5px !important\",\n },\n \"& > *:last-child > *\": {\n borderRadius: groupTheme.lastBorderRadius ?? \"0 5px 5px 0 !important\",\n },\n \"& > *:not(:first-child)\": {\n marginLeft: groupTheme.marginLeft ?? \"0\",\n },\n \"& > *:not(:first-child) > *\": {\n borderLeft: \"0 !important\",\n },\n },\n };\n});\n\ninterface ButtonGroupOption {\n value: any;\n title: React.ReactNode;\n disabled?: boolean;\n}\ntype ButtonGroupOptions = ButtonGroupOption[] | readonly ButtonGroupOption[];\n\ninterface ButtonGroupProps extends Omit {\n options: T;\n selectedVariant?: ButtonVariant;\n selectedOption: T[number][\"value\"] | readonly T[number][\"value\"][];\n onClick?: (value: T[number][\"value\"]) => void;\n onDoubleClick?: (value: T[number][\"value\"]) => void;\n allowReselect?: boolean;\n}\n\ninterface ButtonGroupItemProps {\n option: T[number];\n isSelected: boolean;\n selectedVariant?: ButtonVariant;\n variant?: ButtonVariant;\n isPySpace: boolean;\n elevated: boolean;\n disabled?: boolean;\n onClick?: () => void;\n onDoubleClick?: () => void;\n buttonProps: Omit;\n}\n\nconst ButtonGroupItem = ({\n option,\n isSelected,\n selectedVariant,\n variant,\n isPySpace,\n elevated,\n disabled,\n onClick,\n onDoubleClick,\n buttonProps,\n}: ButtonGroupItemProps) => {\n let longPressHandlers = useLongPress(() => onDoubleClick?.(), { threshold: 400 });\n if (!onDoubleClick || option.disabled) {\n longPressHandlers = {} as any;\n }\n\n return (\n \n {option.title}\n \n );\n};\n\nexport const ButtonGroup = ({\n options,\n selectedVariant,\n selectedOption,\n onClick,\n onDoubleClick,\n allowReselect = false,\n className,\n style,\n variant,\n elevated = true,\n ...props\n}: ButtonGroupProps) => {\n const isPySpace = useIsPySpace();\n\n const { classes } = useStyles();\n const { disabled, ...buttonProps } = props;\n\n return (\n
\n {options.map((option) => {\n const selectedValues = Array.isArray(selectedOption)\n ? (selectedOption as readonly T[number][\"value\"][])\n : undefined;\n const isSelected = selectedValues\n ? selectedValues.includes(option.value)\n : selectedOption === option.value;\n\n return (\n {\n if (!allowReselect && isSelected && !selectedValues) return;\n onClick?.(option.value);\n }}\n onDoubleClick={() => !option.disabled && onDoubleClick?.(option.value)}\n buttonProps={buttonProps}\n />\n );\n })}\n
\n );\n};\n","import React, { Suspense } from \"react\";\nimport { faSync } from \"@fortawesome/free-solid-svg-icons/faSync\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { LinkInternal } from \"./LinkInternal\";\n\ninterface ErrorBoundaryProps {\n children?: React.ReactNode;\n deps?: unknown[];\n}\n\ninterface ErrorBoundaryState {\n error: Error | null;\n}\n\nconst initialState: ErrorBoundaryState = { error: null };\n\nexport class ErrorBoundary extends React.Component {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = initialState;\n }\n\n static getDerivedStateFromError(error: Error) {\n // ignore aborted errors\n console.error(error);\n if (error?.message === \"Aborted\") return initialState;\n return { error };\n }\n\n reset() {\n this.setState(initialState);\n }\n\n componentDidUpdate(prevProps: ErrorBoundaryProps) {\n let lastDeps = prevProps.deps || [];\n let newDeps = this.props.deps || [];\n\n if (lastDeps.length !== newDeps.length) {\n this.reset();\n } else {\n for (let i = 0; i < newDeps.length; i++) {\n if (newDeps[i] !== lastDeps[i]) {\n this.reset();\n return;\n }\n }\n }\n }\n render() {\n /** @todo show some more information about the error */\n if (this.state.error) {\n return (\n \n
\n
\n Something went wrong rendering this part of the Anvil Editor.\n
\n
\n {\n this.reset();\n }}>\n Retry\n \n
\n
\n \n );\n }\n\n return this.props.children;\n }\n}\n\n// eslint-disable-next-line react/display-name\nexport const withErrorBoundary =\n

(Component: React.ComponentType

) =>\n (props: P) => (\n \n \n \n );\n\ninterface ErrorSuspenseBoundaryProps {\n fallback?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport const ErrorSuspenseBoundary = ({ fallback, children }: ErrorSuspenseBoundaryProps) => (\n \n {children}\n \n);\n","import React, { useMemo } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faPlay, faStop, faTriangleExclamation } from \"@fortawesome/pro-light-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button, ButtonProps } from \"@/components/reusable/Button\";\nimport { useTooltip } from \"@/components/reusable/Tooltip\";\nimport { getZenMode, runApp, stopApp, toggleZenMod } from \"@/controllers/ide\";\nimport { getRunMode, getRunnerOutput, getRunnerViewMaximised } from \"@/controllers/runner\";\nimport type { AnvilDispatch } from \"@/types\";\nimport useEvent from \"@/util/useEventCallback\";\n\nexport const RunAppButton = ({ ...props }: ButtonProps) => {\n const dispatch = useDispatch();\n const zenMode = useSelector(getZenMode);\n const runMode = useSelector(getRunMode);\n const isRunning = runMode !== null;\n const isMaximized = useSelector(getRunnerViewMaximised);\n\n const onClick = useEvent(() => {\n if (isRunning) {\n dispatch(stopApp());\n } else {\n dispatch(runApp());\n }\n });\n const [tooltipAnchor, tooltipRef] = useTooltip(\n isRunning ? \"Stop App\" : \"Run App\",\n isRunning && isMaximized ? \"bottom\" : \"bottom-left\",\n { delay: true }\n );\n\n if (!zenMode) return null;\n return (\n \n \n {tooltipAnchor}\n \n );\n};\n\nexport const NumErrorWarningBtn = (props: ButtonProps) => {\n const dispatch = useDispatch();\n const zenMode = useSelector(getZenMode);\n const runMode = useSelector(getRunMode);\n const isRunning = runMode !== null;\n const runnerOutput = useSelector(getRunnerOutput);\n const numErrors = useMemo(() => {\n if (!zenMode) return null;\n if (!isRunning) return null;\n return runnerOutput.filter((r) => r.fn === \"pythonError\").length;\n }, [runnerOutput, zenMode, isRunning]);\n\n const numErrorsWarningMsg = numErrors ? `${numErrors} Error${numErrors > 1 ? \"s\" : \"\"}` : \"\";\n\n const [errorsAnchor, errorsRef] = useTooltip(numErrorsWarningMsg, \"top-left\");\n\n const onToggleZenMode = useEvent(() => {\n dispatch(toggleZenMod());\n });\n\n if (!zenMode) return null;\n\n return (\n numErrorsWarningMsg && (\n

\n \n \n \n \n {numErrors}\n \n \n {errorsAnchor}\n \n
\n )\n );\n};\n","import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { faEllipsisV } from \"@fortawesome/pro-light-svg-icons/faEllipsisV\";\nimport { faExclamationTriangle } from \"@fortawesome/pro-light-svg-icons/faExclamationTriangle\";\nimport { faChevronUp } from \"@fortawesome/pro-regular-svg-icons/faChevronUp\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { EVENTS, useSubscribeToDispatchEvent } from \"@/actions\";\nimport { cx, makeStyles } from \"@/theme/styles\";\nimport { useMergeRefs } from \"@/util/hooks\";\nimport useEffectEvent from \"@/util/useEffectEvent\";\nimport DropdownMenu, { DropDownMenuItems } from \"../reusable/DropdownMenu\";\nimport { Expander } from \"../reusable/Expander\";\nimport { LinkProps, SidebarLink } from \"../reusable/Link\";\nimport { LinkInternal } from \"../reusable/LinkInternal\";\n\nexport const useStyles = makeStyles()((theme) => ({\n sectionHeader: {\n // width: '100%',\n background: theme.secondaryNav.sectionHeader.background.toString(),\n display: \"flex\",\n marginTop: \"-0.1rem\",\n borderTop: \"1px solid \" + theme.sectionBorderColor.toString(),\n borderBottom: \"1px solid \" + theme.sectionBorderColor.toString(),\n //padding: [[10,0,10,16+20]], // left padding + chevron width\n height: \"4rem\",\n alignItems: \"center\",\n overflowX: \"hidden\",\n },\n\n headerLink: {\n display: \"flex\",\n flex: \"1 0\",\n\n minWidth: \"5rem\",\n marginRight: \"1px\",\n },\n sectionHeaderIconContainer: {\n whiteSpace: \"nowrap\",\n width: \"3.5rem\",\n textAlign: \"center\",\n },\n sectionHeaderIcon: {\n display: \"inline-block\",\n\n whiteSpace: \"nowrap\",\n color: theme.secondaryNav.sectionHeader.color.toString(),\n },\n sectionHeaderTitleContainer: {\n display: \"flex\",\n alignItems: \"center\",\n flex: \"1\",\n minWidth: \"0\",\n },\n sectionHeaderTitle: {\n fontWeight: theme.secondaryNav.sectionHeader.fontWeight,\n fontSize: theme.secondaryNav.sectionHeader.fontSize,\n color: theme.secondaryNav.sectionHeader.color.toString(),\n // flex: \"1 0 auto\",\n\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n sectionHeaderButton: {\n // whiteSpace: 'nowrap',\n flex: \"0 0 auto\",\n paddingRight: \"0.5rem\",\n display: \"flex\",\n alignItems: \"center\",\n\n overflow: \"hidden\",\n // textOverflow: 'ellipsis',\n },\n sectionHeaderDots: {\n whiteSpace: \"nowrap\",\n\n flex: \"0 0 auto\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"2.5rem\",\n height: \"100%\",\n fontSize: \"2.4rem\",\n color: theme.secondaryNav.sectionHeader.dotsColor.toString(),\n borderLeft: \"1px solid \" + theme.sectionBorderColor.toString(),\n \"&:hover\": {\n background: theme.secondaryNav.sectionHeader.hoverBg.toString(),\n },\n \"&:active\": {\n background: theme.secondaryNav.sectionHeader.hoverBg.darken(0.2).toString(),\n },\n },\n}));\n\ninterface SectionProps extends React.PropsWithChildren {\n icon?: IconDefinition | null;\n title: React.ReactNode;\n titleClassName?: string;\n expanded?: boolean | null;\n menuItems?: DropDownMenuItems;\n useExpander?: boolean;\n expanderClassName?: string;\n button?: React.ReactNode;\n className?: string;\n onToggle?: (expanded: boolean) => void;\n ref?: React.Ref;\n}\n\nexport const SectionMenu = ({ items, label }: { items: DropDownMenuItems; label?: string }) => {\n const { classes } = useStyles();\n return (\n (\n <>\n showMenu(null, e.currentTarget)}>\n \n \n
{anchor}
\n \n )}\n />\n );\n};\n\nexport const Section = ({ ref, ...props_ }: SectionProps) => {\n const {\n icon = null,\n title,\n titleClassName,\n expanded = null,\n button = null,\n menuItems = null,\n children,\n className,\n onToggle,\n useExpander,\n expanderClassName,\n ...props\n } = props_;\n\n const { classes } = useStyles();\n\n const leftContent = (\n <>\n
\n {expanded !== null ? (\n \n ) : (\n icon !== null && \n )}\n
\n
\n
{title}
\n
\n \n );\n\n return (\n <>\n
\n {expanded === null ? (\n leftContent\n ) : (\n onToggle?.(!expanded)}>\n {leftContent}\n \n )}\n\n {/* Expect either menuItems or button */}\n {button &&
{button}
}\n {menuItems && }\n
\n {useExpander ? (\n \n {children}\n \n ) : (\n (expanded === null || expanded) && children\n )}\n \n );\n};\n\ntype SecondaryNavLinkClasses =\n | \"dropdownButton\"\n | \"hasIcon\"\n | \"nodeSelected\"\n | \"contextMenuOpen\"\n | \"nodeIcon\"\n | \"nodeChild\";\n\nexport const useSecondaryNavLinkStyles = makeStyles()((theme, _props, classes) => ({\n root: {\n display: \"flex\",\n alignItems: \"center\",\n },\n hasIcon: {},\n node: {\n width: 0,\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n flex: \"1 0 0\",\n height: \"3.2rem\",\n borderTopLeftRadius: \"1.6rem\",\n borderBottomLeftRadius: \"1.6rem\",\n paddingLeft: \"1.8rem\",\n [`&.${classes.hasIcon}`]: {\n paddingLeft: \"3rem\",\n },\n [`&:hover:not(.${classes.nodeSelected}), &.${classes.contextMenuOpen}:not(.${classes.nodeSelected})`]: {\n background: theme.secondaryNav.hoverBg.toString(),\n },\n [`&:hover .${classes.dropdownButton}, &.${classes.contextMenuOpen} .${classes.dropdownButton}`]: {\n display: \"block\",\n },\n [`&.${classes.nodeSelected}`]: {\n [`&:not(.${classes.contextMenuOpen}) .${classes.dropdownButton}:hover`]: {\n background: theme.secondaryNav.selectedBgDotsHoverBg.toString(),\n color: theme.secondaryNav.selectedBgDotsHoverColor.toString(),\n },\n [`&.${classes.contextMenuOpen} .${classes.dropdownButton}`]: {\n background: theme.secondaryNav.selectedBgDotsActiveBg.toString(),\n color: theme.secondaryNav.selectedBgDotsActiveColor.toString(),\n },\n },\n [`&:not(.${classes.nodeSelected})`]: {\n [`&:not(.${classes.contextMenuOpen}) .${classes.dropdownButton}:hover`]: {\n background: theme.secondaryNav.dotsHoverBg.toString(),\n },\n [`&.${classes.contextMenuOpen} .${classes.dropdownButton}`]: {\n background: theme.secondaryNav.dotsActiveBg.toString(),\n },\n },\n [`&:not(.${classes.nodeSelected}).${classes.contextMenuOpen} .${classes.dropdownButton}:hover`]: {\n background: theme.secondaryNav.dotsActiveBg.toString(),\n },\n [`&.${classes.nodeSelected}:not(.${classes.contextMenuOpen}) .${classes.dropdownButton}:hover`]: {\n background: theme.secondaryNav.selectedBgDotsHoverBg.toString(),\n },\n },\n contextMenuOpen: {},\n nodeSelected: {\n background: theme.secondaryNav.selectedBg.toString(),\n [`& .${classes.nodeChild}`]: {\n color: theme.secondaryNav.selectedColor.toString() + \" !important\", // Override default link colour\n },\n [`& .${classes.nodeIcon}`]: {\n color: theme.secondaryNav.selectedColor.toString(),\n },\n },\n nodeDescendentSelected: {\n background: theme.secondaryNav.selectedBg.alpha(0.2).toString(),\n },\n nodeChild: {\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"block\",\n padding: \"0.5rem 0\",\n fontSize: theme.secondaryNav.fontSize,\n fontWeight: theme.secondaryNav.fontWeight,\n color: theme.secondaryNav.color.toString(),\n flex: \"1 1 auto\",\n \"&:hover\": {\n color: theme.secondaryNav.hoverColor.toString(),\n },\n },\n nodeIcon: {\n width: theme.secondaryNav.iconSize,\n height: theme.secondaryNav.iconSize,\n position: \"absolute\",\n left: `calc((3.2rem - ${theme.secondaryNav.iconSize}) / 2)`,\n top: `calc((3.2rem - ${theme.secondaryNav.iconSize}) / 2)`,\n borderRadius: `calc(${theme.secondaryNav.iconSize} / 2)`,\n fontSize: \"1rem\",\n color: theme.secondaryNav.iconColor.toString(),\n textAlign: \"center\",\n \"& .fa-layers\": {\n marginLeft: \"-.25rem\", // No idea why, but otherwise it won't be centred.\n },\n },\n dropdownButton: {\n flexShrink: 0,\n display: \"none\",\n height: \"3.2rem\",\n width: \"2.5rem\",\n fontSize: \"1.8rem\",\n textAlign: \"center\",\n borderLeft: \"1px solid \" + theme.secondaryNav.background.toString(),\n color: theme.secondaryNav.color.toString(),\n },\n}));\n\ninterface SecondaryNavLinkProps extends React.PropsWithChildren, Omit {\n icon?: IconDefinition | React.ReactElement | null;\n iconCircleClassName?: string | null;\n menuItems?: DropDownMenuItems;\n className?: string;\n isSelected?: boolean;\n isDescendentSelected?: boolean;\n ref?: React.Ref;\n hideOverlayOnClick?: boolean;\n}\n\nexport const SecondaryNavLink = ({ ref, ...props_ }: SecondaryNavLinkProps) => {\n const { icon, iconCircleClassName, menuItems, children, className, isSelected, isDescendentSelected, ...props } =\n props_;\n const { classes } = useSecondaryNavLinkStyles();\n\n const [dropdownVisible, setDropdownVisible] = useState(false); // N.B. This just tells us whether it's visible, doesn't set it.\n const localRef = useRef(null);\n const scrollIntoView = useEffectEvent(() => {\n isSelected && localRef.current?.scrollIntoView({ block: \"nearest\" });\n });\n useLayoutEffect(scrollIntoView, [isSelected]);\n useSubscribeToDispatchEvent(EVENTS.OPEN_OR_FOCUS_TAB, scrollIntoView);\n\n const mergedRef = useMergeRefs(ref, localRef);\n\n return (\n
\n (\n showMenu(e, e.currentTarget)}\n {...props}\n className={cx(\n classes.node,\n dropdownVisible && classes.contextMenuOpen,\n isSelected && classes.nodeSelected,\n !isSelected && isDescendentSelected && classes.nodeDescendentSelected,\n !!icon && classes.hasIcon\n )}>\n {icon && (\n
\n {React.isValidElement(icon) ? icon : }\n
\n )}\n\n
{children}
\n\n {/* Dropdown menu button */}\n {menuItems && (\n showMenu(null, e.currentTarget)}>\n \n {anchor}\n \n )}\n \n )}\n items={menuItems}\n onShow={() => setDropdownVisible(true)}\n onHide={() => setDropdownVisible(false)}\n />\n
\n );\n};\n\nconst useAlertStyles = makeStyles()((theme, _props, classes) => ({\n triangle: {},\n warningAlert: {\n margin: \"1rem\",\n position: \"relative\",\n borderRadius: theme.secondaryNav.alert.borderRadius,\n border: theme.secondaryNav.alert.borderWidth + \" solid \" + theme.secondaryNav.alert.borderColor.toString(),\n borderLeftWidth: theme.secondaryNav.alert.iconBarWidth,\n padding: \"1.5rem\",\n background: theme.secondaryNav.alert.background.toString(),\n [`& .${classes.triangle}`]: {\n position: \"absolute\",\n top: `calc(50% - (2 * ${theme.secondaryNav.alert.iconFontSize} / 3))`,\n left: `calc(-${theme.secondaryNav.alert.iconBarWidth} + .75rem)`,\n fontSize: theme.secondaryNav.alert.iconFontSize,\n color: theme.secondaryNav.alert.iconColor.toString(),\n },\n fontSize: theme.secondaryNav.alert.fontSize,\n },\n alertTitle: {\n fontWeight: theme.secondaryNav.alert.titleWeight,\n },\n alertBody: {\n fontWeight: theme.secondaryNav.alert.bodyWeight,\n },\n}));\n\ninterface SecondaryNavAlertProps {\n title: React.ReactNode;\n body: React.ReactNode;\n icon?: IconDefinition | null;\n actions?: React.ReactNode;\n iconClassName?: string;\n className?: string;\n}\nexport const SecondaryNavAlert = ({\n title,\n body,\n icon = null,\n actions,\n className,\n iconClassName,\n}: SecondaryNavAlertProps) => {\n const { classes } = useAlertStyles();\n\n return (\n // The sidebar clips the alert when narrow; keep its text from becoming a column of single words.\n
\n \n
{title}
\n
{body}
\n\n
{actions}
\n
\n );\n};\n","import { set } from \"lodash-es\";\nimport { AnvilAction, AnvilAsyncAction, AppConfig, SecretObject, SecretValue } from \"@/types\";\nimport * as api from \"@/api\";\nimport { getAppId, markAppPathUnsaved, updateGlobalLoadingIndicator } from \"./app\";\nimport { reloadAppConfig } from \"./app/autocompleter\";\n\nexport const saveSecrets =\n (secrets: AppConfig[\"secrets\"]): AnvilAction =>\n (dispatch, getState, updateState) => {\n updateState(({ app }) => {\n if (!app) return;\n app.config.secrets = secrets;\n });\n\n dispatch(reloadAppConfig());\n\n dispatch(markAppPathUnsaved([\"SETTINGS\", \"secrets\"]));\n };\n\nexport const deleteSecret =\n (secretName: string): AnvilAction =>\n (dispatch, getState, updateState) => {\n updateState(`Remove ${secretName} from secrets service`, ({ app }) => {\n if (!app) return;\n if (!app.config.secrets) return;\n delete app.config.secrets[secretName];\n });\n dispatch(reloadAppConfig());\n dispatch(markAppPathUnsaved([\"SETTINGS\", \"secrets\"]));\n };\n\ntype ValueOf = T[keyof T];\n\ntype DecryptReturn = { error?: string; value: string };\nexport const decryptSecret =\n (encryptedSecret: ValueOf): AnvilAsyncAction =>\n async (dispatch, getState, updateState) => {\n try {\n dispatch(updateGlobalLoadingIndicator(\"Extracting Secret\"));\n const appId = getAppId(getState());\n if (typeof encryptedSecret !== \"string\") {\n return { error: \"Secret value is not extractable\", value: \"\" };\n }\n return await api.extractAppSecret(appId, encryptedSecret);\n } catch (e: any) {\n return { error: e.toString() || \"Unknown error\", value: \"\" };\n } finally {\n dispatch(updateGlobalLoadingIndicator(false));\n }\n };\n\ntype EncryptReturn = { error?: string; encrypted: string; plain_text: string };\n\nexport const allowAgentsSecret =\n (name: string, encryptedSecret: string): AnvilAsyncAction<{ error?: string; encrypted: string }> =>\n async (dispatch, getState) => {\n try {\n dispatch(updateGlobalLoadingIndicator(\"Sharing Secret with Agents\"));\n return await api.allowAgentsAppSecret(getAppId(getState()), name, encryptedSecret);\n } catch (e) {\n return { error: String(e) || \"Unknown error\", encrypted: \"\" };\n } finally {\n dispatch(updateGlobalLoadingIndicator(false));\n }\n };\n\nexport const encryptSecret =\n (\n newValue: string | undefined,\n extractable: string | boolean,\n canEncrypt?: boolean,\n restrict?: null | unknown\n ): AnvilAsyncAction =>\n async (dispatch, getState, updateState) => {\n try {\n dispatch(updateGlobalLoadingIndicator(\"Encrypting and Saving Secret\"));\n const appId = getAppId(getState());\n return await api.encryptAppSecret(appId, extractable, canEncrypt ?? false, restrict, newValue);\n } catch (e) {\n return { error: String(e) || \"Unknown error\", encrypted: \"\", plain_text: \"\" };\n } finally {\n dispatch(updateGlobalLoadingIndicator(false));\n }\n };\n\nexport const saveSecretValue =\n (name: string, secretObj: SecretObject): AnvilAction =>\n (dispatch, getState, updateState) => {\n updateState(`Set secret value`, set, [\"app\", \"config\", \"secrets\", name], secretObj);\n dispatch(reloadAppConfig());\n dispatch(markAppPathUnsaved([\"SETTINGS\", \"secrets\"]));\n };\n","import React, { useMemo, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faUserFriends } from \"@fortawesome/pro-light-svg-icons/faUserFriends\";\nimport { faSparkle } from \"@fortawesome/pro-light-svg-icons/faSparkle\";\nimport {\n faEye,\n faPencil,\n faPlus,\n faSync,\n faTrash,\n faTriangleExclamation,\n} from \"@fortawesome/pro-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { useTooltip } from \"@/components/reusable/Tooltip\";\nimport { getAppConfig, getAppId } from \"@/controllers/app\";\nimport { getCategorisedEnvironments } from \"@/controllers/environments\";\nimport { alert, confirm, modal, modalReturn } from \"@/controllers/modals\";\nimport {\n agentsCanReadSecret,\n clearEnvironmentSecretValue,\n getScopedSecretValue,\n hasEnvironmentSecretValue,\n setScopedSecretValue,\n} from \"@/controllers/secret-values\";\nimport { allowAgentsSecret, decryptSecret, deleteSecret, encryptSecret, saveSecretValue } from \"@/controllers/secrets\";\nimport { useUpdateTabTitle } from \"@/controllers/tabs\";\nimport { getUserAb } from \"@/controllers/user\";\nimport { cx, makeStyles, useIsPySpace } from \"@/theme/styles\";\nimport {\n AnvilDispatch, AppEnvironment, AppId, EnvironmentPid, SecretObject,\n SecretRestriction, SecretType, SecretValue, State, Tab, USER_AB_FLAGS\n} from \"@/types\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { IconButton } from \"@pyspace/common/components/Button\";\nimport { ModalComponent } from \"../modals\";\nimport Modal from \"../modals/Modal\";\nimport { Button } from \"../reusable/Button\";\nimport { DropDownMenuItems, MenuItems } from \"../reusable/DropdownMenu\";\nimport { HelpLink } from \"../reusable/HelpLink\";\nimport { CheckBox } from \"../reusable/SharedComponents\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport { SectionMenu } from \"../sidebar/SecondaryNavSection\";\nimport TabToolbar from \"./TabToolbar\";\n\nconst useStyles = makeStyles()((theme, _props, classes) => ({\n container: {\n background: theme.settings.rightBarBackground.toString(),\n display: \"flex\",\n flexDirection: \"column\",\n overflowY: \"scroll\",\n height: \"calc(100% - 5rem)\",\n },\n pagePanel: {\n padding: \"1rem 4rem\",\n // width: '85%',\n borderRight: \"1px solid \" + theme.settings.separator.toString(),\n background: theme.settings.background.toString(),\n flexGrow: 1,\n flexShrink: 0,\n },\n}));\n\ninterface DeleteSecretSpec {\n name: string;\n secretType: string;\n}\n\nexport const DeleteSecretModal: ModalComponent = ({ modalId, spec: { name, secretType } }) => {\n return (\n modalReturn(true), variant: \"danger\" },\n { text: \"Cancel\", clickActionCreator: () => modalReturn(false) },\n ]}>\n \n Are you sure you want to remove this {secretType === \"key\" ? \"secret key\" : \"app secret\"}? You will no\n longer be able to access any data encrypted with it.\n \n \n );\n};\n\ninterface ViewSecretSpec {\n name: string;\n secret: string;\n}\n\nexport const ViewSecretModal: ModalComponent = ({ modalId, spec: { name, secret } }) => {\n const isPySpace = useIsPySpace();\n return (\n modalReturn(true) }]}>\n \n The value of {name} is{\" \"}\n {isPySpace ? (\n \n {secret}\n \n ) : (\n {secret}\n )}\n \n {/*todo: some useful message like \"keep this safe, your app can be acceessed or whatever from this something\"*/}\n {/*Keep this safe - some message about access and whatnot.*/}\n \n );\n};\n\ninterface ConfiguredSecretSpec {\n name: string;\n secret: string;\n}\n\nexport const SecretConfiguredModal: ModalComponent = ({ modalId, spec: { name, secret } }) => {\n const isPySpace = useIsPySpace();\n return (\n modalReturn(true) }]}>\n \n The value of {name} is{\" \"}\n {isPySpace ? (\n \n {secret}\n \n ) : (\n {secret}\n )}\n \n \n );\n};\n\ninterface SecretItemNameBoxProps {\n name: string;\n isBlank?: boolean;\n hasOtherAppValues?: boolean;\n agentsCanRead?: boolean;\n}\n\nconst AgentAccessBadge = () =>
Agents can read
;\n\nconst SecretItemNameBox = (props: SecretItemProps) => {\n const {\n name,\n encryptedSecretObj,\n hasOtherAppValues: otherAppValues,\n isBlank: blank,\n } = props;\n const hasOtherAppValues = otherAppValues(encryptedSecretObj);\n const isBlank = blank(encryptedSecretObj);\n\n const [tt, anchorRef] = useTooltip(\"Other clones of this app have their own values for this secret\", \"top\");\n\n return (\n
\n
\n \n {name}\n
\n
\n {hasOtherAppValues && (\n \n {tt}\n \n \n )}\n {isBlank &&
Not Set
}\n {agentsCanReadSecret(encryptedSecretObj, props.appId) && }\n \n );\n};\n\nconst SecretButtons = (props: SecretItemProps) => (\n
\n \n
\n);\n\nconst AllowAgentsCheckbox = ({ onChange }: { onChange: (value: boolean) => void }) => {\n const [checked, setChecked] = useState(false);\n return (\n
\n {\n setChecked(event.target.checked);\n onChange(event.target.checked);\n }}\n />\n Once shared with your agents, this value cannot be made private again.\n
\n );\n};\n\nconst environmentLabel = (environment: AppEnvironment) =>\n environment.description || environment.name || environment.origin || `Environment ${environment.env_id}`;\n\nconst EnvironmentOverrideRows = (props: SecretItemProps & { type: SecretType }) => {\n const {\n environments,\n encryptedSecretObj,\n name,\n onClearEnvironmentOverride,\n onGenSecret,\n onSetSecretValue,\n type,\n } = props;\n\n return environments\n .filter(\n (environment): environment is AppEnvironment & { env_pid: EnvironmentPid } =>\n !!environment.env_pid && hasEnvironmentSecretValue(encryptedSecretObj, props.appId, environment.env_pid)\n )\n .map((environment) => (\n \n
\n
\n
Override
\n \n {environmentLabel(environment)}\n \n
\n
\n {type === \"secret\" ? (\n onSetSecretValue(name, encryptedSecretObj, type, environment)}>\n Change value\n \n ) : (\n \n onGenSecret({ name, encryptedSecretObj, type }, \"ide\", true, environment)\n }>\n Reset key\n \n )}\n
\n
\n [[\n \"Clear override\",\n () => onClearEnvironmentOverride(name, encryptedSecretObj, type, environment),\n faTrash,\n { className: \"text-danger\" },\n ]]}\n />\n \n ));\n};\n\nconst SecretKeysButtons = (props: SecretItemProps) => (\n
\n \n
\n);\n\nconst PySpaceSecretItemNameBox = (props: SecretItemNameBoxProps) => {\n const { name, isBlank, hasOtherAppValues, agentsCanRead } = props;\n\n const [tt, anchorRef] = useTooltip(\"Other clones of this app have their own values for this secret\", \"top\");\n\n return (\n
\n
{name}
\n {hasOtherAppValues && (\n \n {tt}\n \n \n )}\n {isBlank && }\n {agentsCanRead && }\n
\n );\n};\n\ninterface SecretItemProps {\n name: string;\n encryptedSecretObj: SecretValue;\n isBlank: (secretObj: SecretValue) => boolean;\n hasOtherAppValues: (secretObj: SecretValue) => boolean;\n appSecrets: Record[];\n appKeys: Record[];\n classes: Record;\n appId: AppId;\n environments: AppEnvironment[];\n onSetSecretValue: (\n name: string,\n encryptedSecretObj: SecretValue,\n type: SecretType,\n environment?: AppEnvironment & { env_pid: EnvironmentPid }\n ) => Promise;\n onDeleteSecretItem: (name: string, secretType: string) => Promise;\n onClearEnvironmentOverride: (\n name: string,\n encryptedSecretObj: SecretValue,\n type: SecretType,\n environment: AppEnvironment & { env_pid: EnvironmentPid }\n ) => Promise;\n onViewSecret: (name: string, encryptedObj: SecretValue) => Promise;\n onAllowAgents: (name: string, encryptedObj: SecretValue, type: SecretType) => Promise;\n onGenSecret: (\n {\n name,\n encryptedSecretObj,\n type,\n }: {\n name: string;\n encryptedSecretObj: SecretValue;\n type: SecretType;\n },\n extractable: string | boolean,\n canEncrypt?: boolean,\n environment?: AppEnvironment & { env_pid: EnvironmentPid }\n ) => Promise;\n}\n\nconst SecretActionsMenu = (props: SecretItemProps & { type: SecretType }) => {\n const { environments, name, encryptedSecretObj, onSetSecretValue, onGenSecret, type } = props;\n const menuItems: DropDownMenuItems = () => {\n const items: MenuItems = [\n [\"View value\", () => props.onViewSecret(name, encryptedSecretObj), faEye],\n ];\n\n if (type === \"secret\") {\n items.push([\"Generate value\", () => onGenSecret({ name, encryptedSecretObj, type }, true, false), faSync]);\n }\n if (!props.isBlank(encryptedSecretObj) && !agentsCanReadSecret(encryptedSecretObj, props.appId)) {\n items.push([\"Allow Agents to read this secret\", () => props.onAllowAgents(name, encryptedSecretObj, type), faSparkle]);\n }\n const environmentItems = environments\n .filter(\n (environment): environment is AppEnvironment & { env_pid: EnvironmentPid } =>\n !!environment.env_pid &&\n !hasEnvironmentSecretValue(encryptedSecretObj, props.appId, environment.env_pid)\n )\n .map(\n (environment) =>\n [\n `Override in environment “${environmentLabel(environment)}”`,\n () => type === \"key\"\n ? onGenSecret({ name, encryptedSecretObj, type }, \"ide\", true, environment)\n : onSetSecretValue(name, encryptedSecretObj, type, environment),\n faPlus,\n ] as const\n );\n if (environmentItems.length > 0) items.push(
, ...environmentItems);\n\n items.push(
, [\"Delete\", () => props.onDeleteSecretItem(name, type), faTrash, { className: \"text-danger\" }]);\n return items;\n };\n return ;\n};\n\nconst SecretItem = (props: SecretItemProps) => {\n return (\n
\n
\n
\n \n \n
\n \n
\n \n
\n );\n};\n\nconst PySpaceSecretItem = (props: SecretItemProps) => {\n const {\n name,\n isBlank,\n hasOtherAppValues,\n encryptedSecretObj,\n onSetSecretValue,\n } = props;\n\n return (\n
\n
\n \n
\n onSetSecretValue(name, encryptedSecretObj, \"secret\")}\n />\n \n
\n );\n};\n\nconst KeyItem = (props: SecretItemProps) => {\n return (\n
\n
\n
\n \n \n
\n \n
\n \n
\n );\n};\n\nconst SecretsTab = ({ tab, selected, isPySpace }: { tab: Tab; selected: boolean; isPySpace?: boolean }) => {\n const dispatch = useDispatch();\n const appConfig = useSelector(getAppConfig);\n const appId = useSelector(getAppId)!;\n const environments = useSelector(getCategorisedEnvironments);\n const { classes } = useStyles();\n\n const isBlank = (secretObj: SecretValue) => !getScopedSecretValue(secretObj, appId, \"\");\n const hasOtherAppValues = (secretObj: SecretValue) =>\n (Object.keys(secretObj) as AppId[]).filter((k) => k !== \"\" && k !== appId).some((k) => secretObj[k]);\n const getEnvironmentName = (environmentPid: EnvironmentPid | undefined) => {\n if (!environmentPid) return null;\n const environment = environments.real.find((candidate) => candidate.env_pid === environmentPid);\n return environment ? environmentLabel(environment) : environmentPid;\n };\n\n useUpdateTabTitle(tab, \"Secrets\");\n\n const appSecrets = useMemo(() => {\n const secrets: Record[] = [];\n Object.keys(appConfig?.secrets || {}).forEach((secretName) => {\n if (appConfig?.secrets?.[secretName]?.type === \"secret\") {\n secrets.push({ [secretName]: appConfig?.secrets?.[secretName] });\n }\n });\n secrets.sort((a, b) => Object.keys(a)[0].localeCompare(Object.keys(b)[0]));\n return secrets;\n }, [appConfig?.secrets]);\n\n const appKeys = useMemo(() => {\n const keys: Record[] = [];\n Object.keys(appConfig?.secrets || {}).forEach((secretName) => {\n if (appConfig?.secrets?.[secretName]?.type === \"key\") {\n keys.push({ [secretName]: appConfig?.secrets?.[secretName] });\n }\n });\n keys.sort((a, b) => Object.keys(a)[0].localeCompare(Object.keys(b)[0]));\n return keys;\n }, [appConfig?.secrets]);\n\n const onDeleteSecretItem = useEvent(async (name: string, secretType: string) => {\n if (await dispatch(modal(\"deleteSecret\", { name, secretType }))) {\n dispatch(deleteSecret(name));\n }\n });\n\n const mkRestriction = (\n secretName: string,\n { environment, allowAgents = false }: { environment?: AppEnvironment; allowAgents?: boolean } = {}\n ) => {\n const restriction: SecretRestriction = { type: \"app_python\", secret_name: secretName};\n if (environment) {\n restriction.env_id = environment.env_id;\n } else if (allowAgents) {\n restriction.env_type = \"all\";\n }\n return restriction;\n };\n\n const onSetSecretValue = useEvent(async (\n name: string,\n encryptedSecretObj: SecretValue,\n type: SecretType,\n environment?: AppEnvironment & { env_pid: EnvironmentPid }\n ) => {\n const environmentPid = environment?.env_pid;\n const hasValue = environmentPid\n ? hasEnvironmentSecretValue(encryptedSecretObj, appId, environmentPid)\n : !!getScopedSecretValue(encryptedSecretObj, appId, \"\");\n const environmentName = getEnvironmentName(environmentPid);\n if (hasValue) {\n if (\n !(await dispatch(\n confirm(\n `Update value of ${name}${environmentName ? ` in ${environmentName}` : \"\"}?`,\n `The current ${environmentName ? \"environment override\" : \"app default\"} will be overwritten.`\n )\n ))\n ) {\n return;\n }\n }\n let allowAgents = false;\n const newValue = await dispatch(\n modal(\"prompt\", {\n title: \"Set Secret Value\",\n text: `Enter a new value for secret '${name}'${environmentName ? ` in ${environmentName}` : \"\"}: `,\n afterInput: !environment && (\n { allowAgents = value; }} />\n ),\n })\n );\n if (newValue && newValue.trim() !== \"\") {\n const encrypted = await dispatch(\n encryptSecret(newValue, environmentPid ? \"runtime\" : true, false, mkRestriction(name, { environment, allowAgents }))\n );\n if (encrypted.error) {\n dispatch(alert(\"Unable to set secret\", \"Please contact support@anvil.works\"));\n } else {\n const secretObj = {\n value: setScopedSecretValue(encryptedSecretObj ?? {}, appId, encrypted.encrypted, { environmentPid, allowAgents }),\n type,\n };\n dispatch(saveSecretValue(name, secretObj));\n await dispatch(modal(\"configuredSecret\", { name, secret: encrypted.plain_text }));\n }\n }\n });\n\n const onAllowAgents = useEvent(async (name: string, encryptedObj: SecretValue, type: SecretType) => {\n const value = getScopedSecretValue(encryptedObj, appId, \"\");\n if (!value || agentsCanReadSecret(encryptedObj, appId)) return;\n if (!(await dispatch(confirm(\"Allow Agents to read this secret?\", \"Once shared with your agents, this value cannot be made private again.\")))) return;\n const encrypted = await dispatch(allowAgentsSecret(name, value));\n if (encrypted.error) {\n await dispatch(alert(\"Unable to allow agent access\", encrypted.error));\n return;\n }\n dispatch(saveSecretValue(name, {\n type,\n value: setScopedSecretValue(encryptedObj, appId, encrypted.encrypted, { allowAgents: true }),\n }));\n });\n\n const onViewSecret = useEvent(async (name: string, encryptedObj: SecretValue) => {\n const encrypted = getScopedSecretValue(encryptedObj, appId, \"\");\n if (!encrypted) {\n await dispatch(alert(\"Blank Secret\", \"This secret is currently blank\"));\n } else {\n if (\n await dispatch(\n confirm(\n \"View secret value?\",\n `Are you sure you wish to view the value of '${name}' ? This action will be recorded.`\n )\n )\n ) {\n const decrypted = await dispatch(decryptSecret(encrypted));\n if (decrypted.error) {\n dispatch(alert(\"Unable to view secret\", decrypted.error));\n } else {\n await dispatch(modal(\"viewSecret\", { name, secret: decrypted.value }));\n }\n }\n }\n });\n\n const onClearEnvironmentOverride = useEvent(\n async (\n name: string,\n encryptedSecretObj: SecretValue,\n type: SecretType,\n environment: AppEnvironment & { env_pid: EnvironmentPid }\n ) => {\n if (\n await dispatch(\n confirm(\n `Clear ${name} override?`,\n `${environmentLabel(environment)} will use the app default value instead.`\n )\n )\n ) {\n dispatch(\n saveSecretValue(name, {\n type,\n value: clearEnvironmentSecretValue(encryptedSecretObj, appId, environment.env_pid),\n })\n );\n }\n }\n );\n\n const onGenSecret = useEvent(\n async (\n { name, encryptedSecretObj, type }: { name: string; encryptedSecretObj: SecretValue; type: SecretType },\n extractable: string | boolean,\n canEncrypt?: boolean,\n environment?: AppEnvironment & { env_pid: EnvironmentPid }\n ) => {\n const environmentPid = environment?.env_pid;\n const hasValue = environmentPid\n ? hasEnvironmentSecretValue(encryptedSecretObj, appId, environmentPid)\n : !!getScopedSecretValue(encryptedSecretObj, appId, \"\");\n const environmentName = getEnvironmentName(environmentPid || undefined);\n let allowAgents = false;\n if (hasValue) {\n const title = `Generate new value for ${name}${environmentName ? ` in ${environmentName}` : \"\"}?`;\n const msg = `The current ${environmentName ? \"environment override\" : \"app default\"} will be overwritten${\n canEncrypt ? \" and any data encrypted with the current value will be lost\" : \"\"\n }.`;\n if (!(await dispatch(confirm(title, <>\n {msg}\n {!environment && { allowAgents = value; }} />}\n )))) {\n return;\n }\n } else if (!environment && !(await dispatch(confirm(\"Generate value?\",\n { allowAgents = value; }} />,\n \"Generate\"\n )))) {\n return;\n }\n const encrypted = await dispatch(\n encryptSecret(\n undefined,\n environmentPid ? (canEncrypt ? false : \"runtime\") : extractable,\n canEncrypt,\n mkRestriction(name, { environment, allowAgents }),\n )\n );\n if (encrypted.error) {\n throw new Error(encrypted.error);\n }\n const secretObj = {\n value: setScopedSecretValue(encryptedSecretObj ?? {}, appId, encrypted.encrypted, { environmentPid, allowAgents }),\n type,\n };\n dispatch(saveSecretValue(name, secretObj));\n await dispatch(modal(\"configuredSecret\", { name, secret: encrypted.plain_text }));\n }\n );\n\n const onNewSecret = useEvent(async (type: SecretType) => {\n const newAppSecret: SecretObject = { type } as SecretObject;\n\n const nameBase = \"new_\" + type;\n let i = 2;\n let newName = nameBase;\n while (newName in (appConfig?.secrets || {})) {\n newName = `${nameBase}_${i++}`;\n }\n\n let allowAgents = false;\n const requestedName = await dispatch(\n modal(\"prompt\", {\n title: `Create new ${type === \"key\" ? \"encryption key\" : \"secret\"}`,\n text: `Enter a name for the new ${type === \"key\" ? \"encryption key\" : \"secret\"}:`,\n initialValue: newName,\n ok: \"Create\",\n afterInput: type === \"key\" && (\n { allowAgents = value; }} />\n ),\n })\n );\n if (requestedName == null) return;\n newName = requestedName.trim();\n if (!newName) {\n await dispatch(alert(\"Cannot Create Secret\", \"Secret and encryption key names cannot be blank.\"));\n return;\n }\n if (newName in (appConfig?.secrets || {})) {\n await dispatch(\n alert(\n \"Cannot Create Secret\",\n `A secret or encryption key named ${newName} already exists. Please choose a different name.`\n )\n );\n return;\n }\n\n if (type === \"key\") {\n const encrypted = await dispatch(encryptSecret(undefined, \"ide\", true, mkRestriction(newName, { allowAgents })));\n if (encrypted.error) {\n await dispatch(alert(\"Unable to create key\", encrypted.error));\n return;\n }\n newAppSecret.value = setScopedSecretValue({}, appId, encrypted.encrypted, { allowAgents });\n } else {\n newAppSecret.value = { [appId]: \"\" };\n }\n dispatch(saveSecretValue(newName, newAppSecret));\n });\n\n const itemProps = {\n appId,\n environments: environments.real,\n isBlank,\n hasOtherAppValues,\n appSecrets,\n appKeys,\n classes,\n onSetSecretValue,\n onDeleteSecretItem,\n onClearEnvironmentOverride,\n onViewSecret,\n onAllowAgents,\n onGenSecret,\n };\n\n return isPySpace ? (\n
\n
\n onNewSecret(\"secret\")}>\n Create new secret\n \n
\n
\n {/*
*/}\n {/*
*/}\n {appSecrets?.map((itm, idx) => {\n const name = Object.keys(itm)[0];\n const encryptedSecretObj = itm[name].value;\n\n return (\n \n );\n })}\n {/*
*/}\n
\n
\n ) : (\n
\n \n \n Store secrets and encryption keys with your app. \n \n Learn More\n \n \n \n
\n
\n App Secrets\n \n The Secrets service lets you store secrets and encryption keys with your app without them being\n visible in the source code. They can only be accessed from code running in Server Modules.\n \n
\n
\n {/*todo: unique 'key' for child elements in maps*/}\n Secrets\n \n {appSecrets?.map((itm, idx) => {\n const name = Object.keys(itm)[0];\n const encryptedSecretObj = itm[name].value;\n return (\n \n );\n })}\n
\n\n \n
\n Encryption Keys\n\n \n {appKeys?.map((itm, idx) => {\n const name = Object.keys(itm)[0];\n const encryptedSecretObj = itm[name].value;\n return (\n \n );\n })}\n
\n \n
\n
\n
\n Code Samples\n Access secrets from server modules\n 
\n                            {`import anvil.secrets\n\nkey = anvil.secrets.get_secret(\"my_secret\")`}\n
\n\n Encrypt and decrypt data using an encryption key\n 
\n                            {`plain_text = \"Some important data\"\nencrypted_data = anvil.secrets.encrypt_with_key(\"my_key\", plain_text)\n\ndecrypted_data = anvil.secrets.decrypt_with_key(\"my_key\", encrypted_data)`}\n
\n
\n \n Click here for more code samples\n \n
\n
\n \n );\n};\n\nexport default SecretsTab;\n","import React from \"react\";\nimport { cx } from \"@/theme/styles\";\n\ninterface ToolBarProps extends React.PropsWithChildren> {\n leftSide?: null | React.ReactNode;\n allowScroll?: boolean;\n ref?: React.Ref;\n}\n\nconst TabToolbar = ({ ref, className, children, leftSide = null, allowScroll = false, ...restProps }: ToolBarProps) => {\n return (\n \n {children}\n {leftSide && (\n <>\n
\n {leftSide}\n \n )}\n
\n );\n};\n\nexport default TabToolbar;\n","import React, { Fragment } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport moment from \"moment\";\nimport { Text } from \"@/components/reusable/Text\";\nimport { getAppId } from \"@/controllers/app\";\nimport { getCategorisedEnvironments } from \"@/controllers/environments\";\nimport { cx } from \"@/theme/styles\";\nimport { ScheduledTask } from \"@/types\";\nimport { getScheduledTaskInfo } from \"@/api\";\nimport { timeAgoString } from \"@/util/time\";\n\nconst formatDateTime = (dt: string) => moment.tz(dt, moment.tz.guess()).format(\"ddd Do MMM YYYY[, at] HH:mm z\");\n\ninterface ScheduledTaskLastRunInfoProps {\n task: ScheduledTask;\n simpleOnly?: boolean;\n className?: string;\n}\n\n/** simpleOnly: Only display info for a single environment, otherwise don't display anything */\nconst ScheduledTaskLastRunInfo = ({ task, simpleOnly, className }: ScheduledTaskLastRunInfoProps) => {\n const appId = useSelector(getAppId);\n const environments = useSelector(getCategorisedEnvironments);\n const jobId = task.job_id;\n\n const { data: scheduledTaskInfo } = useQuery({\n queryKey: [\"task-info\", appId, jobId],\n queryFn: () => getScheduledTaskInfo(appId, jobId),\n refetchOnMount: \"always\",\n enabled: !!appId,\n });\n\n if (scheduledTaskInfo?.some((info) => info.suspended_at)) {\n const lastRun = scheduledTaskInfo.find((info) => info.start_time)?.start_time;\n return (\n
\n \n Suspended{lastRun ? ` — last ran ${timeAgoString(lastRun)}` : \"\"}\n \n
\n );\n }\n\n let infoUi = null;\n if (!scheduledTaskInfo?.length || (scheduledTaskInfo.length === 1 && !scheduledTaskInfo[0].start_time)) {\n // No info or never run\n infoUi = This task has never run;\n } else if (scheduledTaskInfo.length === 1) {\n // We know it has a start time, or we'd be in the clause above\n infoUi = (\n \n Last ran {timeAgoString(scheduledTaskInfo[0].start_time)}. Next scheduled for{\" \"}\n {formatDateTime(scheduledTaskInfo[0].next_run)}\n \n );\n } else if (!simpleOnly) {\n // We know we have multiple sets of info for different environments. Display them all.\n infoUi = scheduledTaskInfo.map((info) => (\n \n \n Last ran {timeAgoString(info.start_time)} in '\n {environments?.all.find((e) => e.env_id === info.env_id)?.description}' environment.\n \n \n Next scheduled for {formatDateTime(scheduledTaskInfo[0].next_run)} in '\n {environments?.all.find((e) => e.env_id === info.env_id)?.description}' environment.\n \n \n ));\n }\n\n return infoUi &&
{infoUi}
;\n};\n\nexport default ScheduledTaskLastRunInfo;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faChevronRight } from \"@fortawesome/pro-regular-svg-icons/faChevronRight\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Expander } from \"@/components/reusable/Expander\";\nimport { useSaveIndicator } from \"@/components/reusable/SaveIndicator\";\nimport { Heading } from \"@/components/reusable/Text\";\nimport { getAppId, getAppRuntimeOptions, promptIfRuntimeMissing, updateAppConfig } from \"@/controllers/app\";\nimport { reloadAppConfig } from \"@/controllers/app/autocompleter\";\nimport { confirmAndMigrateApp, hasLegacyEnvironments } from \"@/controllers/environments\";\nimport { getUser } from \"@/controllers/ide\";\nimport { confirm, modal } from \"@/controllers/modals\";\nimport { getCustomPackagesAvailable } from \"@/controllers/user\";\nimport { recordActivity } from \"@/controllers/util\";\nimport { useIsPySpace } from \"@/theme/styles\";\nimport type { AnvilDispatch, AppId, RuntimeOptions, RuntimeServerSpec } from \"@/types\";\nimport type { PythonEnvironment, ServerRuntime, User } from \"@/types/user\";\nimport { useFeatureSupported } from \"@/util/features\";\nimport { useStateWithReset } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\nimport PersistentServerSetting from \"./PersistentServerSetting\";\nimport InstallScriptsSettings from \"./python-environment/InstallScriptsSettings\";\nimport PythonEnvironmentSelector from \"./python-environment/PythonEnvironmentSelector\";\nimport { mergeMigrationRequirements } from \"./python-environment/migration\";\nimport OtherRuntimeSettings from \"./python-version/OtherRuntimeSettings\";\nimport PackageRequirementsEditor from \"./python-version/PackageRequirementsEditor\";\nimport RuntimeBuildStatus from \"./python-version/RuntimeBuildStatus\";\nimport useStyles from \"./styles\";\n\nconst packageCompatibilityWarning =\n \"Your packages and install scripts will be kept. Check that they are compatible with the selected Python version.\";\n\ntype LoadedConfigProps = {\n appId: AppId;\n user: User;\n runtimeOptions: RuntimeOptions;\n};\n\nconst PythonAndPackagesConfigLoaded = ({ appId, user, runtimeOptions }: LoadedConfigProps) => {\n const dispatch = useDispatch();\n const customPackagesAvailable = useSelector(getCustomPackagesAvailable);\n const hasLegacyAppEnvironments = useSelector(hasLegacyEnvironments);\n const enableScripts = useFeatureSupported(\"downlink-scripts\");\n const isPySpace = useIsPySpace();\n const { classes } = useStyles();\n\n const [clientVersion, setClientVersion] = useState(runtimeOptions.client_version);\n const [serverSpec, setServerSpec] = useStateWithReset(\n runtimeOptions.server_spec\n );\n const [migrating, setMigrating] = useState(false);\n const [selectionError, setSelectionError] = useState();\n\n const [clientSaveIndicator, setClientSaved] = useSaveIndicator();\n const [serverSaveIndicator, setServerSaved] = useSaveIndicator();\n const [requirementsSaveIndicator, setRequirementsSaved] = useSaveIndicator();\n\n const updateClientVersion = useEvent(async (event: React.ChangeEvent) => {\n const value = event.target.value;\n if (\n value === \"2\" &&\n clientVersion !== \"2\" &&\n !(await dispatch(\n confirm(\n \"Use Python 2 for client code?\",\n \"Python 2 is deprecated. Use Python 3 for new apps. Switching versions may require changes to your client code.\",\n \"Use Python 2\",\n \"Cancel\"\n )\n ))\n )\n return;\n setClientVersion(value as RuntimeOptions[\"client_version\"]);\n setClientSaved(false);\n await dispatch(updateAppConfig([\"runtime_options\", \"client_version\"], value));\n setClientSaved(true);\n });\n\n const onSavedCallbacks = useRef void>>([]);\n const updateServerSpec = useEvent((update: Partial, onSaved: () => void) => {\n setServerSpec((current) => ({ ...(current ?? {}), ...update }));\n onSavedCallbacks.current = [...onSavedCallbacks.current, onSaved];\n });\n\n const updateRequirements = useEvent((requirements: string) => {\n setRequirementsSaved(false);\n updateServerSpec({ requirements }, () => setRequirementsSaved(true));\n });\n\n const updatePreInstallScript = useEvent((pre_install_script: string) => {\n setRequirementsSaved(false);\n updateServerSpec({ pre_install_script }, () => setRequirementsSaved(true));\n });\n\n const updatePostInstallScript = useEvent((post_install_script: string) => {\n setRequirementsSaved(false);\n updateServerSpec({ post_install_script }, () => setRequirementsSaved(true));\n });\n\n const serverSpecTimeout = useRef(undefined);\n const serverSpecInitialised = useRef(false);\n useEffect(() => {\n if (serverSpecTimeout.current) clearTimeout(serverSpecTimeout.current);\n if (!serverSpecInitialised.current) {\n serverSpecInitialised.current = true;\n return;\n }\n if (serverSpec === runtimeOptions.server_spec) {\n return;\n }\n serverSpecTimeout.current = setTimeout(async () => {\n const callbacks = onSavedCallbacks.current;\n onSavedCallbacks.current = [];\n await dispatch(updateAppConfig([\"runtime_options\", \"server_spec\"], serverSpec));\n for (const callback of callbacks) callback();\n }, 500);\n }, [dispatch, runtimeOptions.server_spec, serverSpec]);\n\n const catalog = user.python_environment_catalog ?? [];\n const environment = catalog.find((candidate) => candidate.base === serverSpec?.base);\n const sourceImage = catalog.find(\n (candidate) => candidate.base === (serverSpec?.base ?? runtimeOptions.server_spec_disabled?.base)\n );\n const editable = isPySpace || !!serverSpec?.base;\n const managedRuntimes = user.server_runtimes.filter(\n (runtime) => (runtime.available || runtime.id === \"python3-full\") && !runtime.id.endsWith(\"-sandbox\")\n );\n const usingManagedRuntime = !serverSpec?.base;\n // App storage represents an inactive server_spec as {}, not necessarily null.\n const previousImageSpec = serverSpec?.base ? serverSpec : runtimeOptions.server_spec_disabled;\n const hasCustomPackagesOrScripts = [\n previousImageSpec?.requirements,\n previousImageSpec?.pre_install_script,\n previousImageSpec?.post_install_script,\n ].some((value) => value?.trim());\n const switchManagedRuntime = useEvent(async (runtime: ServerRuntime) => {\n setSelectionError(undefined);\n setMigrating(true);\n try {\n // Full Python uses its own installed packages, not this image's requirements or scripts.\n // Warn when leaving saved customisations, a known bundle, or an unknown bundle.\n // migration_requirements: [] means no bundle; missing metadata does not mean empty.\n if (\n !usingManagedRuntime &&\n (hasCustomPackagesOrScripts ||\n sourceImage?.migration_requirements?.length ||\n sourceImage?.migration_requirements === undefined) &&\n !(await dispatch(\n confirm(\n `Switch to ${runtime.name}?`,\n \"Your image requirements and install scripts will be saved for when you switch back, but will not be used by this runtime. Its installed packages may be different. Check that your app works after switching.\",\n \"Switch Python version\",\n \"Cancel\"\n )\n ))\n )\n return;\n if (!(await dispatch(promptIfRuntimeMissing(runtime.id)))) return;\n clearTimeout(serverSpecTimeout.current);\n const callbacks = onSavedCallbacks.current;\n onSavedCallbacks.current = [];\n setServerSaved(false);\n await dispatch(\n updateAppConfig([\"runtime_options\"], {\n ...runtimeOptions,\n server_version: runtime.id,\n server_spec: null,\n server_spec_disabled: previousImageSpec,\n })\n );\n await dispatch(reloadAppConfig());\n for (const callback of callbacks) callback();\n setServerSaved(true);\n } catch (error) {\n setSelectionError((error as { message?: string })?.message ?? \"Could not change the Python runtime.\");\n } finally {\n setMigrating(false);\n }\n });\n\n const saveEnvironment = useEvent(async (nextSpec: RuntimeServerSpec) => {\n clearTimeout(serverSpecTimeout.current);\n const callbacks = onSavedCallbacks.current;\n onSavedCallbacks.current = [];\n setServerSaved(false);\n await dispatch(updateAppConfig([\"runtime_options\", \"server_spec\"], nextSpec));\n await dispatch(reloadAppConfig());\n for (const callback of callbacks) callback();\n setServerSaved(true);\n });\n\n const selectEnvironment = useEvent(async (target: PythonEnvironment) => {\n setSelectionError(undefined);\n const applyChange = async () => {\n setMigrating(true);\n try {\n const previousSpec = previousImageSpec ?? {};\n const bundledRequirements = sourceImage?.migration_requirements ?? [];\n const unknownBundle = !!previousSpec.base && sourceImage?.migration_requirements === undefined;\n const title = target.title;\n const warning = bundledRequirements.length\n ? `The ${sourceImage!.title} image includes bundled packages. These will become explicit requirements and may install newer versions. Your explicit version pins and install scripts will be preserved. Check that your app works with the new Python version.`\n : unknownBundle\n ? \"The packages bundled in your current image are unknown and cannot be copied automatically. Your saved requirements and install scripts will be kept. Add any other packages your app needs after switching.\"\n : usingManagedRuntime\n ? \"Packages installed in your managed runtime are not copied into this image. Your saved image requirements and install scripts will be preserved. Add any other packages your app needs after switching.\"\n : packageCompatibilityWarning;\n\n if (\n (bundledRequirements.length > 0 || unknownBundle || hasCustomPackagesOrScripts) &&\n !(await dispatch(confirm(`Switch to ${title}?`, warning, \"Switch Python version\", \"Cancel\")))\n )\n return;\n if (hasLegacyAppEnvironments && !(await dispatch(confirmAndMigrateApp()))) return;\n\n const nextSpec = { ...previousSpec, base: target.base };\n if (bundledRequirements.length) {\n nextSpec.requirements = mergeMigrationRequirements(previousSpec.requirements, bundledRequirements);\n }\n await saveEnvironment(nextSpec);\n if (bundledRequirements.length || usingManagedRuntime) {\n dispatch(\n recordActivity(\"migratePythonEnvironment\", {\n oldRuntime: runtimeOptions.server_version ?? null,\n oldBase: previousSpec.base ?? null,\n targetPythonVersion: target.python_version,\n })\n );\n }\n } catch (error) {\n setSelectionError(\n (error as { message?: string })?.message ??\n \"Could not change the Python environment. Please try again.\"\n );\n } finally {\n setMigrating(false);\n }\n };\n if (customPackagesAvailable) await applyChange();\n else await dispatch(modal(\"upgradePrompt\", { featureId: \"custom-packages\", onStartTrial: applyChange }));\n });\n\n const advancedOptionsInDefaultState =\n clientVersion == \"3\" && !serverSpec?.pre_install_script && !serverSpec?.post_install_script;\n const [showAdvanced, setShowAdvanced] = useState(!advancedOptionsInDefaultState);\n\n const currentEnvironment = serverSpec?.base\n ? serverSpec.base\n : (user.server_runtimes.find((runtime) => runtime.id === runtimeOptions.server_version)?.name ??\n runtimeOptions.server_version ??\n \"Python\");\n\n return (\n \n \n {!isPySpace && Python Dependencies}\n {!isPySpace && (\n runtime.id === runtimeOptions.server_version)\n ?.deprecated\n }\n changing={migrating}\n environments={catalog.filter((image) => image.available)}\n runtimes={managedRuntimes}\n saveIndicator={serverSaveIndicator}\n onChange={(selected) => void selectEnvironment(selected)}\n onRuntimeChange={(selected) => void switchManagedRuntime(selected)}\n selectClassName={\"[&>div]:border!\"}\n />\n )}\n {selectionError && (\n
\n {selectionError}\n
\n )}\n \n {serverSpec && !usingManagedRuntime && !migrating && (\n \n )}\n {!isPySpace && (\n <>\n setShowAdvanced((shown) => !shown)}>\n Advanced settings...\n \n \n
\n \n {!usingManagedRuntime &&\n serverSpec &&\n (enableScripts ||\n serverSpec.pre_install_script ||\n serverSpec.post_install_script) && (\n \n )}\n \n \n
\n \n )}\n \n \n );\n};\n\nconst PythonAndPackagesConfig = () => {\n const appId = useSelector(getAppId);\n const user = useSelector(getUser);\n const runtimeOptions = useSelector(getAppRuntimeOptions) as RuntimeOptions | undefined;\n\n if (!appId || !user || !runtimeOptions) {\n throw new Error(\"PythonAndPackagesConfig missing required app/user/runtime state\");\n }\n\n return ;\n};\n\nexport default PythonAndPackagesConfig;\n","import { cloneDeep, isEmpty, merge, set, size } from \"lodash-es\";\nimport { EVENTS, raiseEvent } from \"@/actions\";\nimport * as api from \"@/api\";\nimport { navigate } from \"@/router/navigation\";\nimport type {\n AnvilAction,\n AnvilAsyncAction,\n AppConfig,\n AppItem,\n AppPath,\n AppState,\n CodePath,\n FormItemYaml,\n State,\n ThemeConfig,\n} from \"@/types\";\nimport { cancelOnIdle, onIdle } from \"@/util\";\nimport { get } from \"@/util/fetch\";\nimport {\n invalidateIdeAppListQueries,\n restoreIdeAppListQueries,\n snapshotIdeAppListQueries,\n updateIdeAppListQueries,\n} from \"../app-list-query\";\nimport { getUser } from \"../ide\";\nimport { alert, deleteAppModal, modal } from \"../modals\";\nimport { recordActivity } from \"../util\";\nimport { HIDDEN_CODE_PATH, deflateHtmlFormYamlForPersistence, getCachedCodeItem } from \"./code\";\nimport { getExtraFileContent } from \"./extra-files\";\nimport { getAppPathForConflictItem, handleVersionUpdate, loadVersion } from \"./history\";\nimport {\n getApp,\n getAppId,\n getAppIsEditable,\n nullApp,\n resetAppOriginsExpiry,\n resetBranch,\n updateGlobalLoadingIndicator,\n} from \"./index\";\n\ndeclare global {\n interface Window {\n lastSaveId: number;\n }\n}\n\nwindow.lastSaveId ??= 0; // Make this global so it doesn't get blatted by hot reload\n\nlet onEditedReadOnlyApp = (): AnvilAsyncAction => async (dispatch) => {\n await dispatch(\n alert(\n \"Edit failed\",\n \"You're viewing an old version of the app - you shouldn't be able to edit it!\\nThis page will now refresh.\"\n )\n );\n document.location.reload();\n};\nexport const setOnEditedReadOnlyApp = (action: () => AnvilAsyncAction) => {\n onEditedReadOnlyApp = action;\n};\n\n// changedPaths are either:\n// - [\"CODE\", codeItemPath] (Because code items are slightly magic)\n// - [\"CONFLICTS\", ...]\n// - [\"SETTINGS\", configKey]\n// - [\"EXTRA_FILES\", ...filePathSegments] (relative to the app root)\n\nconst calculateYamlUpdates = (changedAppPaths: AppPath[], state: State) => {\n const updates = [];\n const app = getApp(state);\n if (!app) {\n throw new Error(\"App does not exist\"); // will be caught by the caller\n }\n\n for (const appPath of changedAppPaths || []) {\n const [appPathType, ...appPathContent] = appPath;\n switch (appPathType) {\n case \"CODE\": {\n const { itemType, item, conflicts, resolvedConflictItem, deleted } = getCachedCodeItem(\n appPathContent[0] as CodePath,\n state\n );\n if (!item) {\n throw new Error(\"Save failed: No item found for path \" + appPathContent[0]);\n }\n // don't shave this - we shouldn't have this here - but if we do skip it!\n if (appPathContent[0] === HIDDEN_CODE_PATH) continue;\n const idKey = item.id && { id: item.id };\n switch (itemType) {\n case \"form\": {\n const formItem = item as FormItemYaml;\n let formToSave: FormItemYaml | null = null;\n\n if (!deleted) {\n // Use save_as_html and edit_as_html flags to determine behavior\n if (formItem.save_as_html) {\n formToSave = deflateHtmlFormYamlForPersistence(formItem, state, {\n debugContext: { codePath: appPathContent[0] as CodePath },\n suppressDebug: true,\n });\n // we should never have both save_as_html and edit_as_html set\n } else if (formItem.edit_as_html) {\n // we want to ensure that the form is saved as yaml, the formItem is the source of truth\n formToSave = cloneDeep(formItem);\n delete formToSave.edit_as_html;\n delete formToSave.serialized_html;\n } else {\n formToSave = formItem;\n }\n }\n\n updates.push([[\"forms\", idKey || { class_name: formItem.class_name }], formToSave]);\n break;\n }\n case \"module\":\n updates.push([[\"modules\", idKey || { name: item.name }], deleted ? null : item]);\n break;\n case \"server_module\":\n updates.push([[\"server_modules\", idKey || { name: item.name }], deleted ? null : item]);\n break;\n case \"script\":\n updates.push([[\"scripts\", idKey || { name: item.name }], deleted ? null : item]);\n break;\n case \"asset\":\n updates.push([[\"theme\", \"assets\", idKey || { name: item.name }], deleted ? null : item]);\n break;\n default:\n console.log(item);\n throw new Error(`Could not calculate update for item of type ${itemType}`);\n }\n\n if (conflicts) {\n updates.push([[\"conflicts\", \"conflicting_items\", { item: conflicts.item }], conflicts]);\n } else if (app.conflicts && resolvedConflictItem) {\n // Delete it (idempotent)\n // TODO: ...of course, at this point, we need a getConflictItemForPath(), ie the inverse of getPathForConflictItem().\n // Or we could just stash the conflict path in the cache. (Ew)\n updates.push([[\"conflicts\", \"conflicting_items\", { item: resolvedConflictItem }]]);\n }\n break;\n }\n case \"CONFLICTS\": {\n // const app = getApp(state);\n if (appPathContent[0]) {\n const conflictItem = appPathContent[0] as [string, string],\n [type, id] = conflictItem;\n const itemAppPath = getAppPathForConflictItem(conflictItem, state);\n const cachedCodeItem = itemAppPath?.[0] === \"CODE\" && getCachedCodeItem(itemAppPath[1], state);\n const findConflictsInCentralState = () =>\n state.app!.conflicts?.conflicting_items.find(({ item: [t, i] }) => t === type && i === id);\n updates.push([\n [\"conflicts\", \"conflicting_items\", { item: conflictItem }],\n cachedCodeItem ? cachedCodeItem.conflicts : findConflictsInCentralState(),\n ]);\n } else {\n // Loaded code items own their conflict metadata. Include\n // those current values when undo restores the whole merge.\n const conflicts = app.conflicts && {\n ...app.conflicts,\n conflicting_items: app.conflicts.conflicting_items.map((conflict) => {\n const path = getAppPathForConflictItem(conflict.item, state);\n return path?.[0] === \"CODE\"\n ? (getCachedCodeItem(path[1], state)?.conflicts ?? conflict)\n : conflict;\n }),\n };\n updates.push([[\"conflicts\"], conflicts]);\n }\n break;\n }\n case \"EXTRA_FILES\": {\n // Missing files are deletions; an empty base64 string is still a file.\n const content = getExtraFileContent(state, appPathContent.join(\"/\")) ?? null;\n updates.push([[\"extra_files\", ...appPathContent], content]);\n break;\n }\n case \"SETTINGS\": {\n // const app = getApp(state);\n const configKey = appPathContent[0] as keyof AppConfig;\n updates.push([[configKey], app.config[configKey]]);\n break;\n }\n case \"THEME\": {\n // const app = getApp(state);\n updates.push([[\"theme\", appPathContent[0]], app.themeConfig[appPathContent[0] as keyof ThemeConfig]]);\n break;\n }\n default:\n throw new Error(\"Don't know how to calculate updates for app path: \" + JSON.stringify(appPath));\n }\n }\n\n // TODO: Collapse updates a bit here. E.g. Don't send an update for the same path twice, just send the last.\n return updates;\n};\n\nconst checkAppExists = (app?: AppState | null): app is AppState => {\n if (!app) {\n const e = new Error(\"You may have closed the app before save completed\") as any;\n e.title = \"Saving App Failed\";\n throw e;\n }\n return true;\n};\n\nconst removeSavingAppPathsUpdater = ({ savingAppPaths }: State, saveId: number) => {\n for (const sid of Object.keys(savingAppPaths)) {\n // Not using \"id in savingAppPaths\" here, because we're modifying the collection inside the loop.\n const id = +sid;\n if (id <= saveId) {\n delete savingAppPaths[id];\n }\n }\n};\n\n// Failed writes remain dirty so a later save retries the same changes.\nconst restoreSavingAppPathsUpdater = (state: State, saveId: number) => {\n for (const [id, paths] of Object.entries(state.savingAppPaths)) {\n if (+id <= saveId) {\n for (const path of paths) state.unsavedAppPaths[JSON.stringify(path)] = true;\n }\n }\n removeSavingAppPathsUpdater(state, saveId);\n};\n\nconst unsavedCallbacks = new Set<() => void>();\nexport function notifyUnsavedCallback(cb: () => void) {\n unsavedCallbacks.add(cb);\n return () => unsavedCallbacks.delete(cb);\n}\nexport function flushUnsavedCallbacks() {\n unsavedCallbacks.forEach((cb) => cb());\n}\n\nexport const saveAppOnIdle =\n (timeout = 1000): AnvilAction =>\n (dispatch, getState) => {\n const state = getState();\n checkAppExists(state.app);\n if (!getAppIsEditable(state)) {\n dispatch(onEditedReadOnlyApp());\n return;\n }\n dispatch(onIdle(saveApp(false, null, false), \"SAVE_APP\", timeout));\n };\n\nlet queuedBackgroundSave = false;\n\nexport const saveApp =\n (finaliseCommit = false, commitMessage: string | null = null, immediate = true): AnvilAsyncAction =>\n async (dispatch, getState, updateState) => {\n flushUnsavedCallbacks();\n dispatch(cancelOnIdle(\"SAVE_APP\")); // Just in case saveApp has been called explicitly and there's an onIdle timeout in progress.\n let state = getState();\n checkAppExists(state.app);\n if (!getAppIsEditable(state)) {\n dispatch(onEditedReadOnlyApp());\n return;\n }\n\n const branch = getApp(state)?.editState.branch ?? \"\";\n const userBranch = state.user?.email ? `users/${state.user.email}` : \"\";\n if (branch && !/^[a-zA-Z0-9_-]*$/.test(branch) && branch !== userBranch) {\n dispatch(\n alert(\n \"Save failed\",\n \"The app could not be saved because the branch name is invalid.\\n\" +\n \"Branch names can only contain letters, numbers, underscores and hyphens.\"\n )\n );\n return;\n }\n\n if (!immediate && !isEmpty(state.savingAppPaths)) {\n // We've asked for a non-immediate save and there's already a save in progress. Wait for it to finish\n // TODO: ... or timeout.\n if (queuedBackgroundSave) {\n console.log(\"Background save already queued. No action required.\");\n } else {\n console.log(\"Enqueuing background save\");\n }\n queuedBackgroundSave = true;\n return;\n }\n\n queuedBackgroundSave = false;\n\n const saveId = ++window.lastSaveId;\n\n updateState(\n `Moving all changed app paths to pending save ${saveId}`,\n ({ editor, unsavedAppPaths, savingAppPaths }) => {\n const appPaths: AppPath[] = Object.keys(unsavedAppPaths || {}).map((k) => JSON.parse(k));\n if (appPaths.length > 0) {\n for (const p of appPaths || []) {\n delete unsavedAppPaths[JSON.stringify(p)];\n }\n savingAppPaths[saveId] = appPaths;\n console.log(\"Saving:\", appPaths);\n } else {\n console.log(\"Nothing to save\");\n }\n }\n );\n if (!(saveId in getState().savingAppPaths) && !finaliseCommit) {\n return;\n }\n\n state = getState();\n const userState = getUser(state);\n const appState = getApp(state)!;\n checkAppExists(appState);\n\n // TODO: Really, anywhere that updates the app should set $saved to false, or $dirty: true, or something.\n updateState(merge, { app: { $saved: false, $saving: false } });\n\n state = getState();\n const currentsavingAppPaths = state.savingAppPaths;\n let allChangedAppPaths: AppPath[] = [];\n for (const sid in currentsavingAppPaths) {\n allChangedAppPaths = allChangedAppPaths.concat(currentsavingAppPaths[sid] || []);\n }\n console.log(\"Previous saves in flight:\", Object.keys(currentsavingAppPaths));\n\n let yamlUpdates;\n try {\n yamlUpdates = calculateYamlUpdates(allChangedAppPaths, state);\n } catch (e) {\n dispatch(\n alert(\n \"Save failed\",\n \"The app could not be saved. Subsequent saves are also likely to fail - please refresh.\"\n )\n );\n queuedBackgroundSave = false;\n\n updateState((state) => {\n state.app!.$saving = false;\n state.app!.$saveError = true;\n restoreSavingAppPathsUpdater(state, saveId);\n });\n return;\n }\n\n const saveBody: any = {\n updates: yamlUpdates,\n version: appState.commitSha,\n edit_session: appState.editSession,\n save_sequence: saveId,\n name: appState.name,\n };\n\n if (commitMessage) {\n saveBody.version_message = commitMessage;\n }\n\n const maybeTriggerQueuedSave = () => {\n if (queuedBackgroundSave) {\n dispatch(saveApp(false, null, true));\n }\n };\n\n for (let saveAttempt = 0; saveAttempt < 3; saveAttempt++) {\n console.log(\"Save attempt #\", saveAttempt + 1);\n try {\n const saveUrl =\n appState.editState.state === \"resolving\"\n ? `/ide/apps/${getAppId(getState())}?resolving_merge=${appState.editState.merge}`\n : `/ide/apps/${getAppId(\n getState()\n )}?make_fresh_version=${finaliseCommit}&branch=${encodeURIComponent(\n appState.editState.branch! // we can only be editing a branch\n )}`;\n const saved = await fetch(saveUrl, {\n method: \"PUT\",\n body: JSON.stringify(saveBody),\n headers: { \"Content-Type\": \"application/json\" },\n });\n const resp = await saved.json();\n\n if (saved.status === 200) {\n // Success\n // We have now saved all dirty app paths up to and including saveId.\n updateState(`Finished save ${saveId}`, (state) => {\n removeSavingAppPathsUpdater(state, saveId);\n });\n const newCommitId = resp.version;\n\n await dispatch(handleVersionUpdate(resp, true));\n\n updateState(\"App saved\", ({ app }) => {\n app!.$saved = true;\n app!.$saveError = false;\n app!.commitSha = newCommitId;\n app!.origins.debugOrigin = resp.new_debug_origin;\n });\n dispatch(resetAppOriginsExpiry());\n dispatch(recordActivity(\"saveApp\", { explicitCommit: !!commitMessage }));\n dispatch(raiseEvent(EVENTS.SAVED_APP));\n\n maybeTriggerQueuedSave();\n return;\n } else if (saved.status === 409) {\n // Conflict!\n if (resp.overtaken) {\n // Of no consequence\n maybeTriggerQueuedSave();\n return;\n }\n\n // We provide an easy branching flow when we've just conflicted on master\n // TODO also check that the changes we're conflicting with weren't made by us\n // (because in that case we shouldn't be able to branch either)\n console.log(\"Conflict, asking the user what to do\");\n\n const branchOff = await dispatch(\n modal(\"saveconflict\", { canBranch: appState.editState.branch === \"master\" })\n );\n\n // we couldn't save the app\n updateState(`Unable to save ${saveId}`, (state) => {\n removeSavingAppPathsUpdater(state, saveId);\n });\n\n if (branchOff) {\n // We might one day do something fancy here, where we set our personal branch to our last seen\n // commit, then apply the same changes. Wouldn't that be nice?\n\n // TODO make sure we do something sensible if there are other requests in flight by the time this\n // code path triggers. (We might want to wait until we're quiescent before switching branches,\n // or at very least make sure nothing retries and delayed successes don't drag us back the the old\n // branch. There are dragons here.)\n\n console.log(\"Resetting branch..?\");\n await dispatch(resetBranch(\"users/\" + userState.email, resp.latest_version));\n console.log(\"Branch reset complete\");\n }\n await dispatch(loadVersion(appState.editState));\n queuedBackgroundSave = false;\n return;\n } else {\n // Error. Continue to error handler.\n }\n } catch (e) {\n // Error. Continue to error handler.\n console.error(e);\n } finally {\n updateState(set, [\"app\", \"$saving\"], false);\n }\n\n // If we reached this point, the save failed. Only try again if another save hasn't started in the meantime.\n if (saveId < window.lastSaveId) return; // Another save has started. Silently exit here.\n }\n\n dispatch(\n alert(\n \"Save failed\",\n \"The app could not be saved after multiple attempts. Subsequent saves are also likely to fail - please refresh.\"\n )\n );\n queuedBackgroundSave = false;\n\n updateState((state) => {\n state.app!.$saving = false;\n state.app!.$saveError = true;\n restoreSavingAppPathsUpdater(state, saveId);\n });\n };\n\nexport const deleteAppWithConfirm =\n (appObj: null | AppItem = null): AnvilAsyncAction =>\n async (dispatch, getState, updateState) => {\n const app = appObj || getApp(getState());\n if (!app) return;\n const confirmed = await dispatch(deleteAppModal(app.name));\n\n if (confirmed) {\n const snapshot = snapshotIdeAppListQueries();\n updateIdeAppListQueries((listedApp) => (listedApp.id === app.id ? null : listedApp));\n try {\n dispatch(updateGlobalLoadingIndicator(true));\n await api.deleteApp(app.id);\n await invalidateIdeAppListQueries();\n dispatch(nullApp());\n } catch (e) {\n restoreIdeAppListQueries(snapshot);\n console.error(\"Could not delete app:\", e);\n } finally {\n dispatch(updateGlobalLoadingIndicator(false));\n dispatch(navigate({ type: \"START_PAGE\" }));\n }\n }\n };\n\nexport const appSaveIsFinished: AnvilAction = (dispatch, getState, updateState) => {\n const state = getState();\n return size(state.unsavedAppPaths) === 0 && size(state.savingAppPaths) === 0;\n};\n\n/**\n * Wait for all in-flight saves to complete.\n * Returns true if saves completed, false if timed out.\n */\nexport const waitForSavingComplete =\n (timeout = 10000): AnvilAsyncAction =>\n async (dispatch, getState) => {\n const start = Date.now();\n while (!isEmpty(getState().savingAppPaths)) {\n if (Date.now() - start > timeout) {\n return false; // Timed out\n }\n await new Promise((resolve) => setTimeout(resolve, 100));\n }\n return true;\n };\n","import { createContext } from \"react\";\n\ninterface ManagerInstanceGlobals {\n tooltipRoot: HTMLElement;\n dropdownMenuRoot: HTMLElement;\n}\n\ninterface EditorInstanceGlobals {\n objectPaletteRoot: HTMLElement;\n}\n\nexport const ManagerInstanceGlobalsContext = createContext({\n dropdownMenuRoot: document.getElementById(\"dropdown-menu-root\")!,\n tooltipRoot: document.getElementById(\"tooltip-root\")!,\n});\n\nexport const EditorInstanceGlobalsContext = createContext({\n objectPaletteRoot: document.getElementById(\"object-palette-root\")!,\n});\n","import React, { useRef, useState } from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { faCheck, faClone } from \"@fortawesome/pro-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { copyTextToClipboard } from \"@/components/reusable/CopyButton\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { TooltipPosition, useTooltip } from \"@/components/reusable/Tooltip\";\nimport { cx } from \"@/theme/styles\";\nimport { useMergeRefs } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\n\nexport type ButtonVariant = \"primary\" | \"danger\" | \"light\" | null;\n\nexport interface PyspaceButtonProps extends React.HTMLAttributes {\n onClick?: React.MouseEventHandler;\n linkStyle?: React.CSSProperties;\n icon?: IconProp;\n iconRight?: boolean;\n round?: boolean;\n variant?: ButtonVariant;\n elevated?: boolean;\n disabled?: boolean;\n /** parents of the button might check for defaultPrevented (e.g. Popover implementation requires we don't call preventDefault()) */\n preventDefaultClick?: boolean;\n titlePosition?: TooltipPosition;\n className?: string;\n style?: React.CSSProperties;\n LinkComponent?: React.ElementType;\n linkClassName?: string;\n ref?: React.Ref;\n}\n\nexport const Button = ({ ref, ...props }: React.PropsWithChildren) => {\n /*eslint prefer-const: [\"error\", {\"destructuring\": \"all\"}]*/\n const {\n children,\n variant = null,\n elevated,\n round,\n icon = undefined,\n iconRight = false,\n disabled = false,\n title,\n titlePosition = \"right\",\n onClick,\n preventDefaultClick = true,\n linkStyle,\n className,\n style,\n linkClassName,\n LinkComponent = LinkInternal,\n ...restProps\n } = props;\n\n const [tooltip, anchorRef] = useTooltip(title, titlePosition);\n const buttonRef = useMergeRefs(anchorRef, ref);\n\n return (\n
\n {title && tooltip}\n
\n {/**/}\n ) => disabled || onClick?.(e)}\n className={cx(\n `flex items-center justify-center gap-4 border-2 border-light-grey2 bg-light-bg6 text-light-bg0 select-none md:gap-[1.2rem]`,\n !disabled && (elevated ? `ps-hover-raise-2` : `ps-hover-raise-1`),\n { \"bg-primary\": variant == \"primary\" },\n { \"bg-danger\": variant == \"danger\" },\n { \"bg-light-bg3 text-light-grey2\": variant == \"light\" },\n\n round\n ? \"rounded-full px-[1.4rem] py-[.4rem] text-[1.6rem]\"\n : \"rounded-[.4rem] px-[1.2rem] py-[.4rem] text-[1.8rem] md:px-[1.4rem] md:py-[10px] md:text-[2rem]\",\n disabled && \"cursor-not-allowed border-light-grey1 bg-grey-3 text-light-bg1\",\n linkClassName\n )}\n icon={icon}\n iconRight={iconRight}\n style={linkStyle}\n preventDefaultClick={preventDefaultClick}\n {...restProps}>\n {children}\n \n
\n
\n );\n};\n\nexport interface IconButtonProps extends PyspaceButtonProps {\n size?: \"tiny\" | \"small\" | \"medium\" | null;\n}\n\nexport const IconButton = ({ ref, ...props }: IconButtonProps) => {\n /*eslint prefer-const: [\"error\", {\"destructuring\": \"all\"}]*/\n const {\n variant,\n elevated,\n disabled = false,\n title,\n titlePosition = \"right\",\n onClick,\n round,\n icon,\n preventDefaultClick = true,\n size = \"large\",\n className,\n style,\n children,\n linkClassName,\n ...restProps\n } = props;\n\n const [tooltip, anchorRef] = useTooltip(title, titlePosition);\n const buttonRef = useMergeRefs(anchorRef, ref);\n\n return (\n disabled || onClick?.(e)}>\n {title && tooltip}\n \n {/**/}\n \n {icon && }\n {children}\n \n \n \n );\n};\n\ninterface CopyButtonProps extends IconButtonProps {\n copyText: string;\n}\n\nexport const CopyButton = ({ copyText, ...props }: CopyButtonProps) => {\n const copiedTimeout = useRef(undefined);\n const [copied, setCopied] = useState(false);\n\n const doCopy = useEvent(async () => {\n clearTimeout(copiedTimeout.current);\n await copyTextToClipboard(copyText);\n setCopied(true);\n copiedTimeout.current = setTimeout(() => {\n setCopied(false);\n }, 3000);\n });\n\n const onBlur = useEvent(() => {\n clearTimeout(copiedTimeout.current);\n setCopied(false);\n });\n\n return ;\n};\n","import React from \"react\";\nimport { InputLabel } from \"@/components/reusable/Forms\";\nimport { ContentTextAreaInput } from \"@/components/reusable/SharedComponents\";\nimport { cx } from \"@/theme/styles\";\n\nexport type inputSize = \"tiny\" | \"small\" | \"medium\" | \"large\" | null;\n\ninterface TextAreatProps {\n elevated?: boolean;\n className?: string;\n description?: string;\n text?: string;\n ref?: React.Ref;\n}\n\n/**\n *\n * @type {any}\n */\nconst PySpaceTextArea = ({ ref, className, elevated = false, text, description, ...restProps }: TextAreatProps) => {\n let textStyle = \"text-[1.2rem]! md:text-[1.4rem]! \";\n let classStyles = \"px-[.8rem]! md:px-[1.4]! py-[.2rem]! md:py-[.7rem]!\";\n\n if (elevated) classStyles += \" shadow-pselevated1!\";\n\n return (\n \n \n \n );\n};\n\nexport default PySpaceTextArea;\n","import React from \"react\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { cva } from \"class-variance-authority\";\nimport TextInput from \"@/components/reusable/TextInput\";\nimport { cx } from \"@/theme/styles\";\n\nexport type inputSize = \"tiny\" | \"small\" | \"medium\" | \"large\" | null;\n\nconst textInputVariants = cva(\"h-[3.2rem]! px-[0.8rem]! text-[1.2rem]! leading-[250%]! outline-0 md:leading-[250%]!\", {\n variants: {\n icon: {\n true: \"\",\n false: \"\",\n },\n elevated: {\n true: \"shadow-pselevated1!\",\n false: \"\",\n },\n size: {\n tiny: \"md:h-[3.4rem]!\",\n small: \"md:h-16!\",\n medium: \"h-[3.4rem]! md:h-[4.4rem]! md:px-[1.4rem]! md:text-[1.4rem]!\",\n large: \"h-[3.8rem]! px-[1.4rem]! md:h-20! md:px-[1.4rem]! md:text-[1.4rem]!\",\n },\n },\n compoundVariants: [\n {\n icon: true,\n size: [\"tiny\", \"small\"],\n class: \"pl-[3.2rem]!\",\n },\n {\n icon: true,\n size: \"medium\",\n class: \"pl-[3.2rem]! md:pl-16!\",\n },\n {\n icon: true,\n size: \"large\",\n class: \"pl-16! md:pl-16!\",\n },\n ],\n defaultVariants: {\n icon: false,\n elevated: false,\n size: \"medium\",\n },\n});\n\nconst labelVariants = cva(\"text-[1.2rem]!\", {\n variants: {\n variant: { title: \"md:mb-[0.8rem]!\", subtitle: \"font-normal!\" },\n size: {\n tiny: \"\",\n small: \"\",\n medium: \"md:text-[1.4rem]!\",\n large: \"md:text-[1.4rem]!\",\n },\n },\n defaultVariants: { size: \"medium\" },\n});\n\ntype PySpaceTextInputProps = Omit, \"ref\" | \"textarea\"> & {\n elevated?: boolean;\n size?: inputSize;\n icon?: IconDefinition;\n ref?: React.Ref;\n};\n\nconst PySpaceTextInput = ({ ref, ...props }: PySpaceTextInputProps) => {\n const { elevated = false, size = \"medium\", icon = null, small = null, ...restProps } = props;\n const notSmall = size !== \"medium\" && size !== \"large\";\n return (\n
\n {icon && (\n \n \n
\n )}\n\n \n \n );\n};\n\nexport default PySpaceTextInput;\n","import React, { useCallback, useRef, useState } from \"react\";\nimport { ModalComponent, ModalProps } from \"@/components/modals\";\nimport Modal from \"@/components/modals/Modal\";\nimport { modalReturn } from \"@/controllers/modals\";\nimport PySpaceTextArea from \"@pyspace/common/components/TextArea\";\n\ntype AbuseReportSpec = { type: \"user\"; username: string } | { type: \"gadget\"; gadgetId: string; gadgetName: string };\n\nconst ReportAbuseModal: ModalComponent = ({\n modalId,\n spec: { type, gadgetId, gadgetName, username },\n}: ModalProps) => {\n const modalRef = useRef();\n const [message, setMessage] = useState(\"\");\n\n const inputRef = useCallback((node) => {\n node?.focus();\n }, []);\n\n return (\n modalReturn(message),\n round: true,\n },\n ]}>\n
\n
\n In order to report{\" \"}\n {type === \"gadget\" ? (\n <>\n the widget {gadgetName}\n \n ) : (\n <>\n {username}'s profile\n \n )}{\" \"}\n as inappropriate, please describe in a sentence or two why you think it should be removed or hidden:\n
\n\n setMessage(e.target.value)}\n />\n
\n \n );\n};\n\nexport default ReportAbuseModal;\n","import React, { useRef } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { faUpload } from \"@fortawesome/free-solid-svg-icons/faUpload\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ModalComponent } from \"@/components/modals\";\nimport Modal, { ModalRef } from \"@/components/modals/Modal\";\nimport { modalReturn } from \"@/controllers/modals\";\nimport { SiteDispatch } from \"@/pyspace/site/store/pyspace-site-store\";\nimport useEvent from \"@/util/useEventCallback\";\n\ninterface FileModalSpec {\n title?: string;\n prompt?: string;\n}\n\nconst UploadFileModal: ModalComponent = ({ modalId, spec }) => {\n const { title, prompt } = spec;\n const dispatch = useDispatch();\n const modalRef = useRef(null);\n\n const onUploadFile: React.ChangeEventHandler = useEvent((e) => {\n const file = e.target.files?.[0];\n if (file) {\n console.log(\"Returning\", file);\n modalRef.current!.returnValue(file);\n }\n });\n\n return (\n modalReturn(null) }]}>\n
\n
{prompt}
\n \n \n
\n \n );\n};\n\nexport default UploadFileModal;\n","import { ModalComponent, ModalTypes } from \"@/components/modals\";\nimport { PipAudit } from \"@/components/modals/PipAudit\";\nimport SaveConflict from \"@/components/modals/SaveConflict\";\nimport { ConfigureOrUpgradePromptOnRuntimeFeatureRequired } from \"@/components/modals/UpgradePrompts\";\nimport UriUploader from \"@/components/modals/UriUploader\";\nimport { commonModalTypes } from \"@/components/modals/names/common-modals\";\nimport { DeleteSecretModal, SecretConfiguredModal, ViewSecretModal } from \"@/components/tabs/SecretsTab\";\nimport UploadFileModal from \"@/pyspace/common/modals/UploadFile\";\nimport { EditGadgetDetailsModal } from \"@/pyspace/gadget_editor/modals/EditGadgetDetailsModal\";\nimport { ScheduleScriptModal } from \"@/pyspace/gadget_editor/modals/ScheduleScriptModal\";\nimport { NotificationsModal } from \"@/pyspace/site/modals/Notifications\";\nimport ReportAbuseModal from \"@pyspace/common/modals/ReportAbuse\";\nimport CloneReadOnlyGadgetModal from \"../CloneReadOnlyGadgetModal\";\nimport ShareGadgetModal from \"../ShareGadgetModal\";\n\nconst createGadgetEditorModals = () =>\n ({\n ...commonModalTypes,\n shareGadget: ShareGadgetModal,\n cloneReadOnlyGadget: CloneReadOnlyGadgetModal,\n scheduleScript: ScheduleScriptModal,\n notifications: NotificationsModal,\n editGadgetDetails: EditGadgetDetailsModal,\n uploadFile: UploadFileModal,\n saveconflict: SaveConflict,\n deleteSecret: DeleteSecretModal,\n viewSecret: ViewSecretModal,\n configuredSecret: SecretConfiguredModal,\n configureOrUpgradePromptOnRuntimeFeatureRequired: ConfigureOrUpgradePromptOnRuntimeFeatureRequired,\n reportAbuse: ReportAbuseModal,\n pipAudit: PipAudit,\n uriChanger: UriUploader,\n }) satisfies ModalTypes;\n\nlet gadgetEditorModals: PySpaceModalTypes;\n\nexport const getGadgetEditorModals = () => {\n return (gadgetEditorModals ??= createGadgetEditorModals());\n};\n\nexport type PySpaceModalTypes = ReturnType;\nexport type PySpaceModalType = keyof PySpaceModalTypes;\n","import React, { useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { connect, useSelector } from \"react-redux\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons/faChevronDown\";\nimport { faExclamationCircle } from \"@fortawesome/pro-light-svg-icons\";\nimport { faArrowDownLeftAndArrowUpRightToCenter } from \"@fortawesome/pro-light-svg-icons/faArrowDownLeftAndArrowUpRightToCenter\";\nimport { faArrowUpRightAndArrowDownLeftFromCenter } from \"@fortawesome/pro-light-svg-icons/faArrowUpRightAndArrowDownLeftFromCenter\";\nimport { faCircleQuestion } from \"@fortawesome/pro-light-svg-icons/faCircleQuestion\";\nimport { faCodeBranch } from \"@fortawesome/pro-light-svg-icons/faCodeBranch\";\nimport { faHeart as faLightHeart } from \"@fortawesome/pro-light-svg-icons/faHeart\";\nimport { faShareNodes } from \"@fortawesome/pro-light-svg-icons/faShareNodes\";\nimport { faShareNodes as faShareNodesRegular } from \"@fortawesome/pro-regular-svg-icons/faShareNodes\";\nimport {\n faArrowUpRightFromSquare,\n faBars,\n faEllipsis,\n faPen,\n faShareAlt,\n faTrashCan,\n} from \"@fortawesome/pro-solid-svg-icons\";\nimport { faGear } from \"@fortawesome/pro-solid-svg-icons/faGear\";\nimport { faHeart as faSolidHeart } from \"@fortawesome/pro-solid-svg-icons/faHeart\";\nimport { faHome } from \"@fortawesome/pro-solid-svg-icons/faHome\";\nimport { faMaximize } from \"@fortawesome/pro-solid-svg-icons/faMaximize\";\nimport { faRedo } from \"@fortawesome/pro-solid-svg-icons/faRedo\";\nimport { faUndo } from \"@fortawesome/pro-solid-svg-icons/faUndo\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button } from \"@/components/reusable/Button\";\nimport { ButtonGroup } from \"@/components/reusable/ButtonGroup\";\nimport DropdownMenu from \"@/components/reusable/DropdownMenu\";\nimport Link from \"@/components/reusable/Link\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { useSaveIndicator } from \"@/components/reusable/SaveIndicator\";\nimport { useTooltip } from \"@/components/reusable/Tooltip\";\nimport { useHistoryStore } from \"@/components/tabs/code/History\";\nimport { getApp, getAppIsEditable } from \"@/controllers/app\";\nimport { modal } from \"@/controllers/modals\";\nimport { faAnvilLogoSolid } from \"@/data/customIcons\";\nimport { IconButton } from \"@/pyspace/common/components/Button\";\nimport {\n GadgetEventsContext,\n deleteGadget,\n getGadgetDetails,\n getGadgetOwner,\n getIsEmbedded,\n getIsPopout,\n getIsPySpace,\n getIsScript,\n getNotifications,\n getShareState,\n getUser,\n openInAnvil,\n renameGadget,\n reportGadgetAbuse,\n setLikedGadget,\n setShareState,\n} from \"@/pyspace/gadget_editor/controllers/gadget\";\nimport { Gadget, GadgetState } from \"@/pyspace/gadget_editor/store/gadget-store\";\nimport { PopoutContext } from \"@/pyspace/site/components/PopoutEditor\";\nimport { ProfileMenu } from \"@/pyspace/site/components/UserMenu\";\nimport { navigate } from \"@/router/navigation\";\nimport { cx } from \"@/theme/styles\";\nimport { GadgetConnectedProps } from \"@/types\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { Button as PyspaceButton } from \"@pyspace/common/components/Button\";\nimport { PySpaceToggle } from \"@pyspace/common/components/PySpaceToggle\";\nimport { InternalEmbeddedContext } from \"@pyspace/gadget_editor/components/GadgetEditor\";\n\nfunction useTitleBarToolTips(gadget: Gadget | null = null) {\n const [renameTT, renameTTAnchor] = useTooltip(\"Rename Widget\", \"bottom\");\n const [changeVisibilityTT, changeVisibilityTTAnchor] = useTooltip(\"Change Visibility\", \"bottom\");\n const [sharingTT, sharingTTAnchor] = useTooltip(\"Sharing Settings\", \"bottom\");\n const [docsTT, docsTTAnchor] = useTooltip(\"View Docs\", \"bottom\");\n const [openAnvilTT, openAnvilTTAnchor] = useTooltip(\"Open in Anvil\", \"bottom\");\n const [likeTT, likeTTAnchor] = useTooltip(`${gadget?.liked ? \"Unlike\" : \"Like\"} Widget`, \"bottom\");\n const [cloneTT, cloneTTAnchor] = useTooltip(\"Clone Widget\", \"bottom\");\n const [reportTT, reportTTAnchor] = useTooltip(\"Report Abuse\", \"bottom\");\n const [expandTT, expandTTAnchor] = useTooltip(\"Expand Editor\", \"bottom\");\n\n return {\n renameTT,\n renameTTAnchor,\n changeVisibilityTT,\n changeVisibilityTTAnchor,\n sharingTT,\n sharingTTAnchor,\n docsTT,\n docsTTAnchor,\n openAnvilTT,\n openAnvilTTAnchor,\n likeTT,\n likeTTAnchor,\n cloneTT,\n cloneTTAnchor,\n reportTT,\n reportTTAnchor,\n expandTT,\n expandTTAnchor,\n };\n}\n\nconst GadgetTitleBarWrapper = ({ children }: React.PropsWithChildren) => {\n return (\n
\n {children}\n
\n );\n};\n\nconst connectEditableGadgetTitleBar = connect((state: GadgetState) => ({\n app: getApp(state),\n sharing: getShareState(state),\n isScript: getIsScript(state),\n}));\n\nconst VisibilityButtons = ({ sharing, onClick }) => {\n const opt = [\n { value: \"private\", title: \"Private\" },\n { value: \"public\", title: \"Public\" },\n ];\n switch (sharing) {\n case \"unlisted\":\n return (\n \n Unlisted\n \n );\n default:\n return (\n \n );\n }\n};\n\nexport const EditableGadgetTitleBar = connectEditableGadgetTitleBar(\n ({ app, sharing, isScript, dispatch }: GadgetConnectedProps) => {\n const [renamingTo, setRenamingTo] = useState(null);\n const [saveIndicator, setSaved, setSaveError] = useSaveIndicator();\n const inputRef = useRef(null);\n const gadgetEvents = useContext(GadgetEventsContext);\n\n const historyStore = useHistoryStore();\n\n const {\n renameTT,\n renameTTAnchor,\n changeVisibilityTT,\n changeVisibilityTTAnchor,\n sharingTT,\n sharingTTAnchor,\n docsTT,\n docsTTAnchor,\n openAnvilTT,\n openAnvilTTAnchor,\n } = useTitleBarToolTips();\n\n const prevRenamingTo = useRef(null);\n useEffect(() => {\n if (prevRenamingTo.current === null && renamingTo !== null) {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n prevRenamingTo.current = renamingTo;\n }, [renamingTo]);\n\n const saveName = useEvent(async () => {\n setRenamingTo(null);\n if (renamingTo && renamingTo !== app.name) {\n setSaved(false);\n try {\n dispatch(renameGadget(app.id, renamingTo, gadgetEvents));\n setSaved(true);\n } catch (e: any) {\n setSaveError(e.message || \"Unknown Error\");\n throw e;\n }\n }\n });\n\n const requestDelete = useCallback(async () => {\n if (await dispatch(modal(\"deleteGadget\", {}))) {\n dispatch(deleteGadget(app.id, gadgetEvents));\n //todo: this needs to close the gadget if its open and/or return you to the homepage\n }\n }, [app.id, app.name]);\n\n const openShareModal = useCallback(() => {\n dispatch(modal(\"shareGadget\", {}));\n }, []);\n\n const [isSavingShareState, setSavingShareState] = useState(false);\n\n const toggleShared = useCallback(async () => {\n setSavingShareState(true);\n try {\n await dispatch(setShareState(sharing === \"public\" ? \"private\" : \"public\", gadgetEvents));\n } finally {\n setSavingShareState(false);\n }\n }, [sharing]);\n\n const isPopoutEditor = useContext(PopoutContext);\n const userDetails = useSelector(getUser);\n const notifications = useSelector(getNotifications);\n\n return (\n \n (\n showMenu(null, e.currentTarget)}\n className={cx(\n \"relative mr-2 flex shrink-0 items-center self-stretch pr-4 pl-[1.8rem] text-[2.4rem] hover:bg-light-bg4\",\n isPopoutEditor ? \"text-grey-2\" : \"text-black\"\n )}>\n {isPopoutEditor ? (\n \n ) : (\n \n )}\n \n
{anchor}
\n \n )}\n items={() => [\n isPopoutEditor\n ? null\n : [\n \"Home\",\n () => {\n document.location.href = \"/\";\n },\n faHome,\n ],\n isScript\n ? null\n : [\n Open in Anvil,\n () => dispatch(openInAnvil(app.id)),\n faAnvilLogoSolid,\n { className: \"text-primary\" },\n ],\n isPopoutEditor\n ? [\n \"Edit Full Screen\",\n () => {\n window.open(`/g/${app.id}`);\n },\n faArrowUpRightFromSquare,\n ]\n : null,\n [\n \"Widget Settings\",\n () => {\n dispatch(modal(\"editGadgetDetails\", {}));\n },\n faGear,\n ],\n [\n \"Sharing\",\n () => {\n dispatch(modal(\"shareGadget\", {}));\n },\n faShareNodesRegular,\n ],\n [\"Delete Widget\", requestDelete, faTrashCan, { className: \"text-danger\" }],\n
,\n [\"Undo\", () => historyStore.undo(), faUndo, { disabled: !historyStore.canUndo() }],\n [\"Redo\", () => historyStore.redo(), faRedo, { disabled: !historyStore.canRedo() }],\n ]}\n />\n {renamingTo === null ? (\n <>\n setRenamingTo(app.name)}>\n
\n {app.name}\n
\n {saveIndicator} {renameTT}\n \n \n ) : (\n setRenamingTo(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && saveName()}\n onBlur={saveName}\n />\n )}\n\n
\n
\n \n {changeVisibilityTT}\n
\n\n dispatch(modal(\"shareGadget\", {}))}>\n {sharingTT}\n \n
\n \n \n {docsTT}\n \n\n
\n {!isScript && (\n dispatch(openInAnvil(app.id))}>\n \n \n
\n {openAnvilTT}\n \n )}\n \n {!isPopoutEditor && }\n \n );\n }\n);\n\nconst connectReadOnlyGadgetTitleBar = connect((state: GadgetState) => ({\n app: getApp(state) as GadgetState[\"app\"],\n owner: getGadgetOwner(state),\n gadget: getGadgetDetails(state),\n isEmbedded: getIsEmbedded(state),\n isPySpace: getIsPySpace(state),\n isPopout: getIsPopout(state),\n}));\n\nconst ReadOnlyGadgetTitleBar = connectReadOnlyGadgetTitleBar(\n ({\n app,\n owner,\n gadget,\n isEmbedded,\n isPySpace,\n isPopout,\n dispatch,\n }: GadgetConnectedProps) => {\n const openShareModal = useCallback(() => {\n dispatch(modal(\"shareGadget\", {}));\n }, []);\n\n const onFork = useEvent(() => {\n window.open(window.location.origin + \"/ide/gadgets/fork/\" + app.id);\n });\n\n const { setShouldPopout } = useContext(InternalEmbeddedContext);\n\n const openInPySpace = useEvent((e: React.MouseEvent) => {\n if (isPySpace) {\n setShouldPopout(true);\n e.stopPropagation();\n e.preventDefault();\n }\n });\n\n const {\n likeTT,\n likeTTAnchor,\n cloneTT,\n cloneTTAnchor,\n sharingTT,\n sharingTTAnchor,\n reportTT,\n reportTTAnchor,\n expandTT,\n expandTTAnchor,\n } = useTitleBarToolTips(gadget);\n\n const { onClosed, onLiked } = useContext(GadgetEventsContext);\n\n const doLike = useEvent(async () => {\n const newState = !gadget.liked;\n if (await dispatch(setLikedGadget(newState))) {\n onLiked?.(app.id, newState);\n }\n });\n\n return (\n \n {\n window.open(`/u/${owner.username}`);\n }}>\n {`Profile\n \n
\n
\n {owner.username} / \n {app.name}\n
\n
\n\n
\n (\n showMenu(null, e.currentTarget)}\n className={\"mr-10\"}>\n \n {anchor}\n \n )}\n items={() => [\n [\n `${gadget.liked ? \"Unl\" : \"L\"}ike Widget`,\n doLike,\n gadget.liked ? faSolidHeart : faLightHeart,\n ],\n [\"Clone Widget\", onFork, faCodeBranch],\n [\"Sharing Settings\", openShareModal, faShareNodes],\n [\n \"Report Abuse\",\n () => dispatch(reportGadgetAbuse()),\n faExclamationCircle,\n { className: \"text-danger\" },\n ],\n isEmbedded && [\n isPySpace ? \"Expand Editor\" : \"Open in PySpace\",\n () => {\n if (isPySpace) {\n setShouldPopout(true);\n } else {\n window.open(window.location.origin + \"/g/\" + app.id);\n }\n },\n isPySpace && faArrowUpRightAndArrowDownLeftFromCenter, //todo: make pyspace fontawesome icon for if not in pyspace\n ],\n isPopout &&\n isPySpace && [\n \"Minimize Editor\",\n () => onClosed?.(),\n faArrowDownLeftAndArrowUpRightToCenter,\n ],\n ]}\n />\n
\n\n
\n \n \n {likeTT}\n
{!!gadget.nLikes && gadget.nLikes}
\n \n\n \n {cloneTT}\n
{!!gadget.nForks && gadget.nForks}
\n \n\n \n \n {sharingTT}\n \n\n {/*TODO: This should probably be in a dropdown somewhere*/}\n dispatch(reportGadgetAbuse())}>\n \n {reportTT}\n \n\n {isEmbedded && (\n \n {isPySpace ? (\n <>\n \n \n ) : (\n <>\n \n
\n open in\n
\n py.space\n
\n \n )}\n {expandTT}\n \n )}\n\n {isPopout && isPySpace && (\n onClosed?.()}\n className={\"flex items-center px-4 text-[2.4rem] leading-none hover:text-primary-600\"}>\n \n \n )}\n
\n \n );\n }\n);\n\nexport const GadgetTitleBar = ({ className }: { className?: string }) => {\n const editable = useSelector(getAppIsEditable);\n return editable ? : ;\n};\n","import React, { useContext, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faUpload } from \"@fortawesome/pro-solid-svg-icons/faUpload\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ModalComponent } from \"@/components/modals\";\nimport Modal from \"@/components/modals/Modal\";\nimport { InputLabel } from \"@/components/reusable/Forms\";\nimport { getApp, getAppId } from \"@/controllers/app\";\nimport PySpaceTextArea from \"@/pyspace/common/components/TextArea\";\nimport PySpaceTextInput from \"@/pyspace/common/components/TextInput\";\nimport {\n GadgetEventsContext,\n getForceReloadThumbnailSignal,\n renameGadget,\n setGadgetDescription,\n uploadGadgetThumbnail,\n} from \"@/pyspace/gadget_editor/controllers/gadget\";\nimport { cx } from \"@/theme/styles\";\nimport { GadgetDispatch } from \"@/types\";\nimport { useStateWithReset } from \"@/util/hooks\";\n\nexport const EditGadgetDetailsModal: ModalComponent = ({ modalId }) => {\n const dispatch = useDispatch();\n const gadgetEvents = useContext(GadgetEventsContext);\n\n const appId = useSelector(getAppId)!;\n const app = useSelector(getApp)!;\n const thumbnailRevision = useSelector(getForceReloadThumbnailSignal);\n\n const [editingName, setEditingName] = useStateWithReset(app.name);\n const [editingDescription, setEditingDescription] = useStateWithReset(app.config.metadata?.description ?? \"\");\n\n return (\n \n
\n dispatch(renameGadget(appId, editingName, gadgetEvents))}\n />\n\n setEditingDescription(e.target.value)}\n onBlur={() => dispatch(setGadgetDescription(appId, editingDescription, gadgetEvents))}\n />\n\n \n dispatch(uploadGadgetThumbnail(appId, gadgetEvents))}>\n \n \n Upload\n
\n \n \n \n \n );\n};\n","import React, { useCallback, useReducer, useState } from \"react\";\nimport { faCheck } from \"@fortawesome/pro-solid-svg-icons/faCheck\";\nimport { faPlus } from \"@fortawesome/pro-solid-svg-icons/faPlus\";\nimport { ModalComponent } from \"@/components/modals\";\nimport Modal from \"@/components/modals/Modal\";\nimport { EditTimeSpec } from \"@/components/modals/ScheduledTaskModal\";\nimport { modalReturn } from \"@/controllers/modals\";\nimport { TaskUpdate, taskReducer } from \"@/controllers/scheduledtasks\";\nimport useEvent from \"@/util/useEventCallback\";\n\nexport const ScheduleScriptModal: ModalComponent = ({ modalId, spec: { scriptName } }) => {\n const [task, updateTask] = useReducer(taskReducer, {\n task_name: scriptName ? `script:${scriptName}` : \"\",\n time_spec: { n: 1, every: \"day\", at: { hour: 3 } },\n });\n const returnResult = useEvent(() => modalReturn(task));\n\n return (\n \n
\n Run \n \n
\n \n );\n};\n","import React, { useCallback, useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { faCodeBranch } from \"@fortawesome/free-solid-svg-icons/faCodeBranch\";\nimport { Button } from \"@/components/reusable/Button\";\nimport { getAppId } from \"@/controllers/app\";\nimport { ModalComponent } from \"../../../components/modals\";\nimport Modal from \"../../../components/modals/Modal\";\n\nconst CloneReadOnlyGadgetModal: ModalComponent = ({ modalId }) => {\n const [forked, setForked] = useState(false);\n const appId = useSelector(getAppId);\n\n const doFork = useCallback(() => {\n window.open(window.location.origin + \"/ide/gadgets/fork/\" + appId);\n setForked(true);\n }, [appId]);\n\n return (\n \n Fork this gadget to edit it yourself:\n
\n \n
\n \n );\n};\n\nexport default CloneReadOnlyGadgetModal;\n","import React, { useContext, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faCodeBranch } from \"@fortawesome/pro-solid-svg-icons\";\nimport { ModalComponent } from \"@/components/modals\";\nimport Modal from \"@/components/modals/Modal\";\nimport { DropDown } from \"@/components/reusable/Forms\";\nimport { getAppId, getAppIsEditable } from \"@/controllers/app\";\nimport { getEnvironmentOrigins } from \"@/controllers/environments\";\nimport { Button, CopyButton } from \"@/pyspace/common/components/Button\";\nimport {\n GadgetEventsContext,\n getIsPySpace,\n getShareState,\n setShareState,\n} from \"@/pyspace/gadget_editor/controllers/gadget\";\nimport { cx } from \"@/theme/styles\";\nimport { GadgetDispatch } from \"@/types\";\nimport useEvent from \"@/util/useEventCallback\";\n\nconst CopyableEmbed = ({ itemTitle, content }: { itemTitle: string; content: string }) => {\n const isPySpace = useSelector(getIsPySpace);\n return (\n
\n
{itemTitle}
\n \n {content}\n
\n {isPySpace && (\n
\n \n
\n )}\n \n );\n};\n\nconst ShareGadgetModal: ModalComponent = ({ modalId }) => {\n const dispatch = useDispatch();\n const environmentOrigins = useSelector(getEnvironmentOrigins);\n const appId = useSelector(getAppId);\n const sharing = useSelector(getShareState);\n const editable = useSelector(getAppIsEditable);\n const isPySpace = useSelector(getIsPySpace);\n\n const appUrl = window.location.origin + \"/g/\" + appId;\n\n const [forked, setForked] = useState(false);\n\n const onFork = useEvent(() => {\n window.open(window.location.origin + \"/ide/gadgets/fork/\" + appId);\n setForked(true);\n });\n\n const origin = window.location.origin;\n const embeddingHtml = ``;\n const embeddingMarkdown = `[\n Fork\n \n }>\n {/*environmentOrigins.length ?
\n This gadget_editor's URL:{\" \"}\n {environmentOrigins[0]}\n
:
\n \n
*/}\n
\n {editable && (\n
\n
Visibility:
\n dispatch(setShareState(e.target.value, gadgetEvents))}\n disabled={!editable}>\n \n \n \n \n
\n )}\n
\n
Sharing URL:
\n
\n \n {appUrl}\n \n
\n {isPySpace && (\n
\n \n
\n )}\n
\n \n \n
\n \n );\n};\n\nexport default ShareGadgetModal;\n","import { produce } from \"immer\";\nimport { EditPath } from \"@designer/edit-state\";\nimport { Notification, UserDetails, UserProfile } from \"@/pyspace/common/types\";\nimport { AppSpec } from \"@/pyspace/gadget_editor/components/GadgetEditor\";\nimport { getNewBaseState } from \"@/store/editor-store\";\nimport { baseProducer, initStore } from \"@/store/index\";\nimport { AppState, BaseState, CodePath, GadgetDispatch, State, Tab } from \"@/types\";\n\nexport type { UserDetails } from \"@/pyspace/common/types\";\n\nexport type GadgetShareState = \"public\" | \"unlisted\" | \"private\";\n\ninterface GadgetApp extends AppState {\n name: string;\n}\n\ninterface SessionStartEvent {\n event: \"SESSION_START\";\n app: string;\n env_id: number;\n session_id: string;\n data: {\n func?: string; // If it's a BG task\n scheduled_task?: string; // If it's a scheduled BG task\n };\n timestamp: number;\n type: \"background_task\"; // | \"something_else\"\n}\n\nexport interface Gadget {\n sharing: GadgetShareState;\n unmodifiedAppSpec: AppSpec;\n forceReload: number; // TODO extremely crude\n forceReloadThumbnail: number;\n owner: UserProfile;\n liked: boolean;\n nLikes: number;\n nForks: number;\n isEmbedded?: boolean;\n isPySpace?: boolean;\n isPopout?: boolean;\n}\n\nexport interface GadgetState extends BaseState {\n output: any[];\n sessions: { [sessionId: string]: SessionStartEvent };\n tabs: Tab[];\n currentTabId: Tab[\"id\"] | null;\n app: GadgetApp;\n user?: State[\"user\"];\n notifications?: Notification[];\n gadget: Gadget;\n rightPanelWidth: number;\n rightPanelContent: \"packages\" | \"secrets\" | null;\n navOverrides: {\n form?: {\n codePath: CodePath;\n editingPath: EditPath | undefined;\n topLevelFormClassName: string | undefined;\n };\n cursor?: { script?: [string, string]; server?: [string, string]; client?: [string, string] };\n };\n hiddenDescription: boolean;\n}\n\nlet nextStoreId = 1;\nconst getRootReducer = (\n appSpec: AppSpec,\n ownerProfile: UserProfile,\n userDetails?: UserDetails,\n notifications?: Notification[],\n isEmbedded?: boolean,\n isPySpace?: boolean,\n isPopout?: boolean\n) =>\n produce(baseProducer, {\n ...getNewBaseState(),\n editorType: \"pyspace\",\n tabs: [],\n storeId: nextStoreId++,\n app: {\n id: appSpec.id,\n name: appSpec.name,\n editSession: appSpec.edit_session,\n editState: appSpec.edit_state,\n environments: appSpec.environments,\n origins: appSpec.origins,\n commitHistory: { refs: {}, versions: [], published_version: null },\n malleableCommits: {},\n config: { services: [] },\n },\n user: userDetails && { ...userDetails, $loaded: true },\n notifications: notifications || [],\n output: [],\n sessions: {},\n gadget: {\n sharing: appSpec.sharing,\n unmodifiedAppSpec: appSpec,\n forceReload: 0,\n forceReloadThumbnail: 0,\n owner: ownerProfile ?? userDetails?.profile,\n liked: appSpec.liked,\n nLikes: appSpec.n_likes,\n nForks: appSpec.n_forks,\n isEmbedded,\n isPySpace,\n isPopout,\n },\n rightPanelWidth: 500,\n rightPanelContent: null,\n debug: {\n runMode: null,\n output: [],\n sessionToken: null,\n },\n hiddenDescription: false,\n } satisfies GadgetState);\n\nexport const createGadgetStore = (\n appSpec: AppSpec,\n ownerProfile: UserProfile,\n loggedInUser?: UserDetails,\n notifications?: Notification[],\n isEmbedded?: boolean,\n isPySpace?: boolean,\n isPopout?: boolean\n) =>\n initStore(\n getRootReducer(appSpec, ownerProfile, loggedInUser, notifications, isEmbedded, isPySpace, isPopout)\n );\n","import { useEffect } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { useCommunicateWithRunner } from \"@/components/Runner\";\nimport { getAppId } from \"@/controllers/app\";\nimport { getRunMode } from \"@/controllers/runner\";\nimport { ExternalState, useExternalState } from \"@/util/external-state\";\nimport useEffectEvent from \"@/util/useEffectEvent\";\n\nexport const newTabWindowAtom = new ExternalState(null);\n\nexport const useRunner = () => {\n const appId = useSelector(getAppId);\n const src = `${document.location.origin}/ide/gadgets/${appId}/run-gui`;\n //const src = useMasterEnvironmentOrigin();\n const runMode = useSelector(getRunMode);\n const [newTabWindow, setNewTabWindow] = useExternalState(newTabWindowAtom);\n useCommunicateWithRunner(newTabWindow, src!);\n\n const onRunModeChange = useEffectEvent(() => {\n if (runMode === \"NEWTAB\") {\n setNewTabWindow(window.open(src, \"\"));\n } else {\n newTabWindow?.close();\n setNewTabWindow(null);\n }\n });\n\n useEffect(() => {\n onRunModeChange();\n }, [runMode]);\n\n useEffect(() => () => newTabWindow?.close(), []);\n\n return newTabWindow;\n};\n","import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { connect, useDispatch, useSelector } from \"react-redux\";\nimport { faExternalLinkSquare } from \"@fortawesome/pro-light-svg-icons\";\nimport { faPlus } from \"@fortawesome/pro-regular-svg-icons/faPlus\";\nimport { faRedoAlt } from \"@fortawesome/pro-regular-svg-icons/faRedoAlt\";\nimport { faStop } from \"@fortawesome/pro-regular-svg-icons/faStop\";\nimport { faMinus, faSquare } from \"@fortawesome/pro-solid-svg-icons\";\nimport { faCircleInfo } from \"@fortawesome/pro-solid-svg-icons/faCircleInfo\";\nimport { faClock } from \"@fortawesome/pro-solid-svg-icons/faClock\";\nimport { faGlobe } from \"@fortawesome/pro-solid-svg-icons/faGlobe\";\nimport { faHourglass } from \"@fortawesome/pro-solid-svg-icons/faHourglass\";\nimport { faPlay } from \"@fortawesome/pro-solid-svg-icons/faPlay\";\nimport { faTrash } from \"@fortawesome/pro-solid-svg-icons/faTrash\";\nimport { faTrashCanClock } from \"@fortawesome/pro-solid-svg-icons/faTrashCanClock\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { EVENTS, raiseEvent } from \"@/actions\";\nimport REPL from \"@/components/bottom_panel/REPL\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport ResizePanel from \"@/components/sidebar/ResizePanel\";\nimport { LogEvent } from \"@/components/tabs/sessions/SessionLogs\";\nimport { getAppId, getAppIsEditable } from \"@/controllers/app\";\nimport { acStateStore } from \"@/controllers/app/autocompleter\";\nimport { getForms, getServerModules } from \"@/controllers/app/code\";\nimport { saveApp } from \"@/controllers/app/saving\";\nimport { createDefaultEnvironment, getNewEnvironmentURL } from \"@/controllers/environments\";\nimport { refreshNewTab, stopApp } from \"@/controllers/ide\";\nimport { alert, modal } from \"@/controllers/modals\";\nimport { getRunnerRepl } from \"@/controllers/repl\";\nimport {\n addScheduledTask,\n deleteScheduledTask,\n getScheduledTasks,\n useFormatTimeSpec,\n} from \"@/controllers/scheduledtasks\";\nimport { RunScriptResult, killScript, runScript } from \"@/controllers/websocket\";\nimport { CopyButton, Button as PySpaceButton } from \"@/pyspace/common/components/Button\";\nimport {\n clearOutput,\n getIsPySpace,\n getOutput,\n getRunMode,\n getSessions,\n runAppInNewTab,\n} from \"@/pyspace/gadget_editor/controllers/gadget\";\nimport { GadgetState } from \"@/pyspace/gadget_editor/store/gadget-store\";\nimport { getCurrentNavTarget } from \"@/router/navigation\";\nimport { cx } from \"@/theme/styles\";\nimport { GadgetConnectedProps, GadgetDispatch, Repl, State } from \"@/types\";\nimport { killBackgroundTask } from \"@/api\";\nimport { useExternalState } from \"@/util/external-state\";\nimport { useStoreSelector } from \"@/util/external-store\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { useMasterEnvironmentOrigin } from \"@pyspace/utils/hooks/use-master-env\";\nimport { newTabWindowAtom } from \"@pyspace/utils/hooks/use-runner\";\n\nconst BLANK_SESSION = {};\n\nimport { compressEvent } from \"@/components/tabs/sessions/SessionLogs\";\n\nfunction OutputScroller({ output }: { output: any[] }) {\n const outputScroller = useRef(null);\n const sessions = useSelector(getSessions);\n\n useLayoutEffect(() => {\n if (outputScroller.current) {\n outputScroller.current.scrollTop = outputScroller.current.scrollHeight;\n }\n }, [output]);\n\n let dropNextNewline = false; // Ick.\n let lastSessionId: string | null = null;\n\n return (\n
\n
\n {output.map((event, idx) => {\n const evt = compressEvent(event);\n if (dropNextNewline && event.log_text === \"\\n\") {\n dropNextNewline = false;\n return null;\n }\n if (event.log_text !== \"\\n\") {\n dropNextNewline = true;\n }\n let isNewSession = false;\n let newSession = null;\n if (event.session_id !== lastSessionId) {\n isNewSession = true;\n newSession = sessions[event.session_id];\n }\n lastSessionId = event.session_id;\n return (\n \n {idx !== 0 && isNewSession &&
}\n {newSession && (\n \n )}\n \n \n );\n })}\n
\n
\n );\n}\n\nfunction OutputFromWebSocket({ output }: { output: any[] }) {\n const dispatch = useDispatch();\n if (!output.length) return null;\n return (\n <>\n
\n dispatch(clearOutput())} />\n
\n \n \n );\n}\n\nconst useOutput = (currentScriptOutputOnly: boolean, scriptSessions: RunScriptResult[], setScriptSessions: unknown) => {\n const wsOutput = useSelector(getOutput);\n const runnerRepl = useSelector(getRunnerRepl);\n\n const [hasWsOutput, renderedWsOutput] = useMemo(() => {\n const relevantOutput = currentScriptOutputOnly\n ? wsOutput.filter((event) => scriptSessions.find(({ session_id }) => session_id === event.session_id))\n : wsOutput;\n const hasWsOutput = !!relevantOutput.length;\n const renderedWsOutput = ;\n return [hasWsOutput, renderedWsOutput] as const;\n }, [currentScriptOutputOnly, scriptSessions, wsOutput]);\n\n const renderedGuiOutput = runnerRepl ? : null;\n\n return [hasWsOutput || !!runnerRepl, runnerRepl ? renderedGuiOutput : renderedWsOutput] as const;\n};\n\nconst connectFooter = connect((state: GadgetState) => ({\n appId: getAppId(state)!,\n forms: getForms(state),\n serverModules: getServerModules(state),\n scheduledTasks: getScheduledTasks(state),\n isEditable: getAppIsEditable(state),\n isPySpace: getIsPySpace(state),\n}));\n\nconst Footer = connectFooter((props: GadgetConnectedProps & { className?: string }) => {\n const { appId, forms, serverModules, scheduledTasks, isEditable, isPySpace, dispatch, className } = props;\n\n const navTarget = useSelector(getCurrentNavTarget);\n const currentScriptName = useMemo(\n () =>\n navTarget?.type === \"CODE\" && navTarget.codePath.startsWith(\"scripts/\")\n ? navTarget.codePath.substring(8)\n : null,\n [navTarget]\n );\n const masterEnvOrigin = useMasterEnvironmentOrigin();\n const runMode = useSelector(getRunMode);\n\n const doPublish = useCallback(async () => {\n dispatch(\n createDefaultEnvironment({\n name: \"Published\",\n url: await dispatch(getNewEnvironmentURL(\"public\")),\n version: { ref: \"refs/heads/master\" },\n tags: [\"pyspace\", \"default_published\"],\n })\n );\n }, [masterEnvOrigin]);\n\n const [scriptSessions, setScriptSessions] = useState([]);\n const [scriptState, setScriptState] = useState<\"idle\" | \"launching\" | \"running\" | \"stopping\">(\"idle\");\n const [currentRun, setCurrentRun] = useState(null);\n\n const wsSessions = useSelector(getSessions);\n const currentWsSession = useMemo(() => wsSessions[currentRun?.session_id], [wsSessions, currentRun]);\n\n useEffect(() => {\n if (currentWsSession?.ended) {\n setScriptState(\"idle\");\n setCurrentRun(null);\n }\n }, [currentWsSession]);\n\n const announceAppRunning = () => {\n dispatch(raiseEvent(EVENTS.RUN_APP));\n };\n\n const doRunScript = async (scriptName: string) => {\n if (scriptState !== \"idle\") return;\n try {\n setScriptState(\"launching\");\n if (isEditable) {\n await dispatch(saveApp());\n }\n announceAppRunning();\n try {\n const r = await runScript(appId, scriptName);\n setCurrentRun(r);\n setScriptSessions((s) => [...s, r]);\n setScriptState(\"running\");\n } catch (e: any) {\n setScriptState(\"idle\");\n if (e.message) {\n await dispatch(alert(\"Cannot run script\", e.message));\n }\n }\n } catch {\n setScriptState(\"idle\");\n }\n };\n\n const doStopScript = async () => {\n if (!currentRun) return;\n setScriptState(\"stopping\");\n if (isEditable) {\n // we can do this the reliable way, via the IDE API\n await killBackgroundTask(appId, currentRun.task_id);\n } else {\n // gotta hope the websocket is good for it\n await killScript(appId, currentRun.task_id);\n }\n setScriptState(\"idle\");\n };\n\n const doRunApp = useEvent(async () => {\n if (isEditable) {\n await dispatch(saveApp());\n }\n announceAppRunning();\n await dispatch(runAppInNewTab());\n });\n const [runningAppWindow] = useExternalState(newTabWindowAtom);\n\n const httpEndpoints = useStoreSelector(acStateStore, (s) => s.httpEndpoints);\n const routes = useStoreSelector(acStateStore, (s) => s.routes);\n\n const scheduledTask = useMemo(\n () => scheduledTasks?.find((s) => s.task_name === `script:${currentScriptName}`),\n [scheduledTasks, currentScriptName]\n );\n\n const createScheduledTask = useEvent(async () => {\n const task = await dispatch(modal(\"scheduleScript\", { scriptName: currentScriptName }));\n if (task) {\n dispatch(addScheduledTask(task));\n }\n });\n\n const removeScheduledTask = useEvent(() => {\n if (scheduledTask) {\n dispatch(deleteScheduledTask(scheduledTask));\n }\n });\n\n const rightContent = useMemo(() => {\n const content = [];\n if (currentScriptName) {\n if (isEditable) {\n if (scheduledTask) {\n content.push(\n \n Remove Schedule\n \n );\n } else {\n content.push(\n \n Schedule\n \n );\n }\n }\n switch (scriptState) {\n case \"idle\":\n case \"launching\":\n content.push(\n doRunScript(currentScriptName)}>\n {\n {\n idle: \"Run\",\n launching: \"Launching...\",\n }[scriptState]\n }\n \n );\n break;\n case \"running\":\n case \"stopping\":\n content.push(\n doStopScript()}>\n {\n {\n running: \"Stop\",\n stopping: \"Stopping...\",\n }[scriptState]\n }\n \n );\n }\n } else if ((forms?.length || serverModules?.length) && (masterEnvOrigin || isEditable)) {\n if (masterEnvOrigin) {\n let url = masterEnvOrigin;\n let showUnknownPathSuffix = false;\n if (!forms?.length && serverModules?.length) {\n // HTTP Endpoint(s)\n if (httpEndpoints.length + routes.length === 1) {\n if (httpEndpoints.length === 1) {\n url += `/_/api${httpEndpoints[0].path}`;\n showUnknownPathSuffix = !httpEndpoints[0].path;\n } else if (routes.length === 1) {\n url += routes[0].path;\n showUnknownPathSuffix = !routes[0].path;\n }\n } else if (httpEndpoints.length > 0) {\n url += \"/_/api\";\n showUnknownPathSuffix = true;\n } else {\n showUnknownPathSuffix = true;\n }\n }\n content.push(\n \n
URL:
\n \n {url}\n {showUnknownPathSuffix && /{\"{path}\"}}\n \n {isPySpace && }\n \n );\n\n if (forms?.length) {\n if (!runMode) {\n content.push(\n doRunApp()}>\n Run\n \n );\n } else {\n content.push(\n runningAppWindow?.focus()}>\n Focus\n \n );\n content.push(\n dispatch(refreshNewTab())}>\n Restart\n \n );\n content.push(\n dispatch(stopApp())}>\n Stop\n \n );\n }\n }\n } else {\n content.push(\n \n
Get a URL:
\n \n Publish\n \n \n );\n }\n }\n return content;\n }, [\n currentScriptName,\n forms,\n serverModules,\n masterEnvOrigin,\n httpEndpoints,\n routes,\n scheduledTask,\n runMode,\n runningAppWindow,\n scriptState,\n ]);\n\n const CLOSED_HEIGHT = 54;\n // This silly dance is to make the footer open to the height it was last time you opened it.\n const [openHeight, setOpenHeight] = useState(200);\n const [footerHeight, _setFooterHeight] = useState(CLOSED_HEIGHT);\n const setFooterHeight = useEvent((h: number) => {\n _setFooterHeight(h);\n if (h > CLOSED_HEIGHT) {\n setOpenHeight(h);\n }\n });\n const footerIsOpen = footerHeight > CLOSED_HEIGHT;\n const toggleFooter = useEvent(() => {\n setFooterHeight(footerIsOpen ? CLOSED_HEIGHT : openHeight);\n });\n\n const [hasOutput, renderedOutput] = useOutput(!!currentScriptName, scriptSessions, setScriptSessions);\n useEffect(() => {\n if (hasOutput) {\n setFooterHeight(openHeight);\n } else {\n setFooterHeight(CLOSED_HEIGHT);\n }\n }, [hasOutput]);\n\n const formattedTimeSpec = useFormatTimeSpec(scheduledTask?.time_spec);\n\n return (\n \n {scheduledTask && (\n \n \n
This script will run {formattedTimeSpec}
\n \n )}\n \n {hasOutput && (\n <>\n \n
Output
\n \n )}\n
{rightContent}
\n \n
{renderedOutput}
\n \n );\n});\n\nexport default Footer;\n","import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { Provider, useDispatch, useSelector } from \"react-redux\";\nimport { faTimes } from \"@fortawesome/pro-regular-svg-icons/faTimes\";\nimport { faCircleInfo } from \"@fortawesome/pro-solid-svg-icons/faCircleInfo\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { QueryClientProvider } from \"@tanstack/react-query\";\nimport { EVENTS, useSubscribeToDispatchEvent } from \"@/actions\";\nimport Modals from \"@/components/modals\";\nimport { ErrorBoundary, ErrorSuspenseBoundary } from \"@/components/reusable/ErrorBoundary\";\nimport Link from \"@/components/reusable/Link\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { LoadingSpinner } from \"@/components/reusable/LoadingSpinner\";\nimport ResizePanel from \"@/components/sidebar/ResizePanel\";\nimport CodeTabContent from \"@/components/tabs/CodeTab\";\nimport SecretsTab from \"@/components/tabs/SecretsTab\";\nimport PythonAndPackagesConfig from \"@/components/tabs/settings/PythonAndPackagesConfig\";\nimport { getAppConfig, getAppId, getAppIsEditable } from \"@/controllers/app\";\nimport { getCodeStructure } from \"@/controllers/app/code\";\nimport { recordActivity } from \"@/controllers/util\";\nimport { EditorInstanceGlobalsContext, ManagerInstanceGlobalsContext } from \"@/instance-globals\";\nimport type { CodeNavTarget, FullNavTarget, NavTarget } from \"@/router/navTypes\";\nimport { getCurrentNavTarget } from \"@/router/navigation\";\nimport { ThemeContext, cx } from \"@/theme/styles\";\nimport { PySpaceDarkTheme, PySpaceLightTheme } from \"@/theme/theme\";\nimport type {\n AppCodeStructure,\n AppId,\n CodeTab,\n CodeTabPrefs,\n GadgetDispatch,\n IDEAppContentWithDeps,\n ServiceTab,\n} from \"@/types\";\nimport { EMPTY_OBJECT } from \"@/util\";\nimport { useConstant, useIsSmallScreen } from \"@/util/hooks\";\nimport { lazyComponent } from \"@/util/lazy\";\nimport { queryClient } from \"@/util/queryClient\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { Button } from \"@pyspace/common/components/Button\";\nimport { GadgetEditorEvents, Notification, UserDetails, UserProfile } from \"@pyspace/common/types\";\nimport { GadgetTitleBar } from \"@pyspace/gadget_editor/components/GadgetCrud\";\nimport {\n GadgetEventsContext,\n finishLoadingGadget,\n getHiddenDescription,\n getIsPySpaceCompatible,\n getNavOverrides,\n getRightPanelContent,\n getRightPanelWidth,\n hideDescription,\n moveAppToAnvil,\n setRightPanelContent,\n setRightPanelWidth,\n useOutputCapture,\n useReloadWhenGadgetUpdated,\n} from \"@pyspace/gadget_editor/controllers/gadget\";\nimport { getGadgetEditorModals } from \"@pyspace/gadget_editor/modals/names/pyspace-gadget-editor-modals\";\nimport { GadgetShareState, GadgetState, createGadgetStore } from \"@pyspace/gadget_editor/store/gadget-store\";\nimport { PopoutEditor } from \"@pyspace/site/components/PopoutEditor\";\nimport { SiteProvider } from \"@pyspace/site/components/SiteProvider\";\nimport { useTakeScreenshot } from \"@pyspace/utils/hooks\";\nimport { usePySpaceKeyBindings } from \"@pyspace/utils/hooks/use-pyspace-keybindings\";\nimport { useRootElements } from \"@pyspace/utils/hooks/use-root-elements\";\nimport { useRunner } from \"@pyspace/utils/hooks/use-runner\";\nimport Footer from \"./Footer\";\n\nconst LazyCodeTabContent = lazyComponent(() => import(\"@/components/tabs/CodeTab\"), \"default\");\n\n/*\nUseful snippets:\nconst Editor = editorConnector(({app}: AnvilConnectedProps) => {\n useOutputCapture(app?.id);\n\n const ref = useRef(null);\n const heightContextValue = useModalHeightsContextValue(ref);\n\n return \n\n */\n\n// returns [leftView, rightView]\nconst useSelectedView = () => {\n const navTarget = useSelector(getCurrentNavTarget);\n const rightPanelContent = useSelector(getRightPanelContent);\n const isSmallScreen = useIsSmallScreen();\n const showMainContent = !isSmallScreen || !rightPanelContent;\n return useMemo<{ isServerCode: boolean; isClientCode: boolean; isScript: boolean; isDesign: boolean }>(\n () => ({\n isServerCode:\n showMainContent && navTarget?.type === \"CODE\" && navTarget.codePath.startsWith(\"server_modules/\"),\n isClientCode:\n showMainContent &&\n navTarget?.type === \"CODE\" &&\n navTarget.codePath.startsWith(\"forms/\") &&\n !navTarget.view?.design,\n isScript: showMainContent && navTarget?.type === \"CODE\" && navTarget.codePath.startsWith(\"scripts/\"),\n isDesign:\n showMainContent &&\n navTarget?.type === \"CODE\" &&\n navTarget.codePath.startsWith(\"forms/\") &&\n (navTarget.view?.design as boolean),\n }),\n [navTarget, showMainContent]\n );\n};\n\ntype FullCodeNavTarget = CodeNavTarget & FullNavTarget;\n\nfunction makeNavTarget(\n codeStructure: AppCodeStructure,\n key: keyof AppCodeStructure,\n options: { appId: AppId } & Partial,\n formOverrides: GadgetState[\"navOverrides\"][\"form\"]\n) {\n const structuredItem = codeStructure[key].children.at(0);\n if (structuredItem) {\n formOverrides ??= {\n codePath: structuredItem.codePath,\n editingPath: undefined,\n topLevelFormClassName: undefined,\n };\n return {\n type: \"CODE\",\n ...formOverrides,\n ...options,\n } satisfies FullCodeNavTarget;\n }\n}\n\nexport const getNavTargets = (\n appId: AppId,\n codeStructure: AppCodeStructure,\n navOverrides?: GadgetState[\"navOverrides\"]\n) => {\n const codeTabPrefs: CodeTabPrefs = { showCodeSnippets: false, showDesignerToolbox: true };\n const options = { appId, codeTabPrefs };\n\n return {\n script: makeNavTarget(\n codeStructure,\n \"scripts\",\n { ...options, view: { design: false, code: navOverrides?.cursor?.script ?? true } },\n undefined\n ),\n serverModule: makeNavTarget(\n codeStructure,\n \"serverCode\",\n { ...options, view: { design: false, code: navOverrides?.cursor?.server ?? true } },\n undefined\n ),\n clientCode: makeNavTarget(\n codeStructure,\n \"clientCode\",\n { ...options, view: { design: false, code: navOverrides?.cursor?.client ?? true } },\n navOverrides?.form\n ),\n design: makeNavTarget(\n codeStructure,\n \"clientCode\",\n { ...options, view: { design: true, code: false } },\n navOverrides?.form\n ),\n };\n};\n\nconst useNavTargets = () => {\n const codeStructure = useSelector(getCodeStructure);\n const appId = useSelector(getAppId);\n const navOverrides = useSelector(getNavOverrides);\n return useMemo(() => getNavTargets(appId!, codeStructure, navOverrides), [appId, codeStructure, navOverrides]);\n};\n\nconst NavLink = ({\n to,\n selected,\n className,\n children,\n onClick,\n onClickOverrideNav,\n}: {\n to?: NavTarget;\n selected: boolean;\n className?: string;\n children?: React.ReactNode;\n onClick?: () => void;\n onClickOverrideNav?: () => any;\n}) =>\n (to ?? onClickOverrideNav) ? (\n \n {children}\n \n ) : (\n <>\n );\n\nconst GadgetNavBar = ({ className }: { className: string }) => {\n const { isScript, isServerCode, isClientCode, isDesign } = useSelectedView();\n const { script, serverModule, clientCode, design } = useNavTargets();\n\n const rightPanelContent = useSelector(getRightPanelContent);\n const dispatch = useDispatch();\n const isSmallScreen = useIsSmallScreen();\n const onClick = useEvent(() => {\n if (isSmallScreen) {\n dispatch(setRightPanelContent(() => null));\n }\n });\n return (\n
\n \n Script\n \n \n Server\n \n \n Client\n \n \n Design\n \n
\n dispatch(setRightPanelContent((c) => (c === \"packages\" ? null : \"packages\")))}\n selected={rightPanelContent === \"packages\"}>\n Packages\n \n dispatch(setRightPanelContent((c) => (c === \"secrets\" ? null : \"secrets\")))}\n selected={rightPanelContent === \"secrets\"}>\n Secrets\n \n
\n );\n};\n\nconst TabContent = ({ selected, children }: { selected: boolean; children?: ReactNode }) => {\n const [hasEverBeenSelected, setHasEverBeenSelected] = useState(selected);\n if (selected && !hasEverBeenSelected) {\n setHasEverBeenSelected(true);\n }\n if (!(selected || hasEverBeenSelected)) return null;\n return (\n \n }>{children}\n
\n );\n};\n\nconst useGadgetTabs = () => {\n const navTargets = useNavTargets();\n\n return useMemo(() => {\n const { script, serverModule, clientCode, design } = navTargets;\n const codeTabPrefs = design?.codeTabPrefs;\n return {\n scriptTab: script && ({ id: 0, navTarget: script, codeTabPrefs, itemType: \"script\" } satisfies CodeTab),\n serverModuleTab:\n serverModule &&\n ({\n id: 1,\n navTarget: serverModule,\n codeTabPrefs,\n itemType: \"server_module\",\n } satisfies CodeTab),\n clientCodeTab:\n clientCode &&\n ({\n id: 2,\n navTarget: clientCode,\n codeTabPrefs,\n itemType: \"form\",\n } satisfies CodeTab),\n designTab: design && ({ id: 3, navTarget: design, codeTabPrefs, itemType: \"form\" } satisfies CodeTab),\n secretsTab: {\n id: 5,\n navTarget: { type: \"SERVICE\", service: \"SECRETS\" },\n } satisfies ServiceTab,\n } as const;\n }, [navTargets]);\n};\n\nconst EditorContent = ({ className }: { className?: string }) => {\n const isSmallScreen = useIsSmallScreen();\n const { isScript, isServerCode, isClientCode, isDesign } = useSelectedView();\n const { scriptTab, serverModuleTab, clientCodeTab, designTab, secretsTab } = useGadgetTabs();\n const rightPanelWidth = useSelector(getRightPanelWidth);\n const rightPanelContent = useSelector(getRightPanelContent);\n const hiddenDescription = useSelector(getHiddenDescription);\n const isEditable = useSelector(getAppIsEditable);\n const appConfig = useSelector(getAppConfig);\n const dispatch = useDispatch();\n const onFinishResizeRightPanel = useEvent((newWidth: number) => {\n if (newWidth === 0) {\n dispatch(setRightPanelContent(() => null));\n } else {\n dispatch(setRightPanelWidth(newWidth));\n }\n });\n\n const [ref, designerScreenShot] = useTakeScreenshot({\n isGUI: !!designTab,\n designTabId: designTab?.id,\n enabled: !!isEditable,\n });\n const rightPanelChildren = rightPanelContent && (\n <>\n \n \n \n \n \n \n \n );\n\n return (\n
\n
\n {scriptTab && (\n \n \n \n )}\n {serverModuleTab && (\n \n \n \n )}\n {clientCodeTab && (\n \n \n \n )}\n {designTab && (\n \n \n {designerScreenShot}\n \n )}\n {!hiddenDescription && appConfig?.metadata?.description && !isEditable && (\n \n \n
{appConfig.metadata.description}
\n dispatch(hideDescription())}>\n \n \n
\n )}\n
\n {rightPanelContent &&\n (isSmallScreen ? (\n rightPanelChildren\n ) : (\n \n {rightPanelChildren}\n \n ))}\n \n );\n};\n\nconst GadgetEditorContent = () => {\n const dispatch = useDispatch();\n const isCompatible = useSelector(getIsPySpaceCompatible);\n const appId = useSelector(getAppId)!;\n const isEditable = useSelector(getAppIsEditable);\n\n useRunner();\n useOutputCapture(appId);\n usePySpaceKeyBindings(appId);\n useReloadWhenGadgetUpdated();\n const { onSaved } = useContext(GadgetEventsContext);\n useSubscribeToDispatchEvent(EVENTS.SAVED_APP, () => onSaved?.(appId));\n\n return (\n <>\n \n {isCompatible ? (\n <>\n \n \n \n