[{"_1":2,"_186":-5,"_187":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","cdbc11de55e47953b237ebd2bc3607fb50931703","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_158":159,"_183":184,"_185":-5},"handle","c15r","name","sync","path","frontend/components/panels/Actions.tsx","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":112,"_113":-5,"_12":114,"_115":-5,"_116":20,"_117":-5,"_118":-5,"_119":120,"_14":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":136,"_139":140,"_144":145,"_157":20},"id","93e19588-0ebb-11f1-a6cd-42dde27851f2","createdAt",["D",1771633422787],"deletedAt","legacyEnvVars","privacy","public","description","Agent collaboration layer https://sync.parc.land","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"0630d977-f678-453e-926c-52043293f59f","tursoName","93e195880ebb11f1a6cd42dde27851f2","tursoHostname","93e195880ebb11f1a6cd42dde27851f2-val-town.aws-us-east-2.turso.io","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_137":138},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","org",{"_95":96,"_141":138,"_12":114,"_142":143},"avatar","tier","pro","branch",{"_146":147,"_97":45,"_103":148,"_149":104,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":98,"_156":96},"version",639,"93e21602-0ebb-11f1-a6cd-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":160,"_97":161,"_162":163,"_164":165,"_166":148,"_167":168,"_169":170,"_105":171,"_146":172,"_173":174,"_175":176,"_177":20,"_178":-5,"_99":179},"df1821a0-1ebc-11f1-b4e6-42dde27851f2","Actions.tsx","fileId","78340be6-13fb-11f1-b99c-42dde27851f2","parentId","019c9ffc-060a-74df-be1d-7fb507e2c98f","branchId","branchVersion",567,"latest",true,["D",1773393197068],7,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { styled, keyframes } from \"../../styled.ts\";\nimport type { Action } from \"../../types.ts\";\n\nconst Grid = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n`;\n\nconst Card = styled.div<{ $available: boolean }>`\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 0.6rem 0.8rem;\n min-width: 0;\n flex: 1 1 300px;\n max-width: 460px;\n opacity: ${p => p.$available ? 1 : 0.6};\n @media (max-width: 480px) {\n flex: 1 1 100%;\n max-width: 100%;\n }\n`;\n\nconst ActionHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n`;\n\nconst ActionName = styled.div<{ $available: boolean }>`\n font-weight: 600;\n font-size: 13px;\n color: ${p => p.$available ? \"var(--green)\" : \"var(--dim)\"};\n word-break: break-word;\n min-width: 0;\n`;\n\nconst InvokeBtn = styled.button<{ $disabled?: boolean }>`\n background: ${p => p.$disabled ? \"var(--border)\" : \"var(--green)\"};\n color: ${p => p.$disabled ? \"var(--dim)\" : \"var(--bg)\"};\n border: none;\n border-radius: 4px;\n padding: 2px 8px;\n cursor: ${p => p.$disabled ? \"not-allowed\" : \"pointer\"};\n font-family: inherit;\n font-size: 11px;\n font-weight: 600;\n white-space: nowrap;\n flex-shrink: 0;\n &:hover {\n opacity: ${p => p.$disabled ? 1 : 0.85};\n }\n`;\n\nconst Desc = styled.div`color: var(--dim); font-size: 11px; margin-top: 2px; word-break: break-word;`;\nconst IfExpr = styled.div`font-size: 11px; color: var(--purple); margin-top: 3px; font-style: italic; word-break: break-word;`;\nconst WritesInfo = styled.div`font-size: 11px; color: var(--green); margin-top: 3px; word-break: break-word;`;\nconst Meta = styled.div`font-size: 10px; color: var(--dim); margin-top: 4px; word-break: break-word;`;\nconst Empty = styled.div`color: var(--dim); font-style: italic; padding: 1rem; text-align: center;`;\n\n// ── Invoke form ─────────────────────────────────────────────────────────────\n\nconst FormWrap = styled.div`\n margin-top: 6px;\n padding: 6px 8px;\n background: var(--bg);\n border-radius: 4px;\n border: 1px solid var(--border);\n`;\n\nconst ParamRow = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 4px;\n font-size: 11px;\n @media (max-width: 480px) {\n flex-wrap: wrap;\n }\n`;\n\nconst ParamLabel = styled.label`\n color: var(--accent);\n font-weight: 600;\n min-width: 70px;\n white-space: nowrap;\n @media (max-width: 480px) {\n min-width: 0;\n }\n`;\n\nconst ParamInput = styled.input`\n flex: 1;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 3px;\n padding: 3px 6px;\n color: var(--fg);\n font-family: inherit;\n font-size: 11px;\n outline: none;\n min-width: 0;\n &:focus { border-color: var(--accent); }\n`;\n\nconst ParamSelect = styled.select`\n flex: 1;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 3px;\n padding: 3px 6px;\n color: var(--fg);\n font-family: inherit;\n font-size: 11px;\n outline: none;\n min-width: 0;\n &:focus { border-color: var(--accent); }\n`;\n\nconst ParamHint = styled.span`\n color: var(--dim);\n font-size: 10px;\n white-space: nowrap;\n`;\n\nconst FormActions = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 6px;\n`;\n\nconst SendBtn = styled.button`\n background: var(--green);\n color: var(--bg);\n border: none;\n border-radius: 4px;\n padding: 3px 10px;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n font-weight: 600;\n &:hover { opacity: 0.85; }\n &:disabled { background: var(--border); color: var(--dim); cursor: not-allowed; }\n`;\n\nconst CancelBtn = styled.button`\n background: none;\n border: 1px solid var(--border);\n border-radius: 4px;\n padding: 3px 8px;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n color: var(--dim);\n &:hover { color: var(--fg); border-color: var(--dim); }\n`;\n\nconst flash = keyframes`\n from { background: rgba(63,185,80,0.15); }\n to { background: transparent; }\n`;\n\nconst ResultBox = styled.div<{ $error?: boolean }>`\n margin-top: 6px;\n padding: 4px 8px;\n border-radius: 3px;\n font-size: 11px;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n color: ${p => p.$error ? \"var(--red)\" : \"var(--green)\"};\n background: ${p => p.$error ? \"rgba(248,81,73,0.08)\" : \"rgba(63,185,80,0.08)\"};\n animation: ${flash} 0.5s ease-out;\n`;\n\n// ── Action Card Component ───────────────────────────────────────────────────\n\ninterface ActionCardProps {\n action: Action;\n roomId: string;\n baseUrl: string;\n authHeaders: () => Record;\n readOnly?: boolean;\n}\n\nfunction ActionCard({ action, roomId, baseUrl, authHeaders, readOnly }: ActionCardProps) {\n const av = action.available !== false;\n const paramDefs = action.params || {};\n const paramKeys = Object.keys(paramDefs);\n const writes = action.writes || [];\n const isBuiltin = action.id.startsWith(\"_\") || action.id === \"help\";\n\n const [expanded, setExpanded] = useState(false);\n const [params, setParams] = useState>({});\n const [sending, setSending] = useState(false);\n const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);\n\n const setParam = useCallback((key: string, val: string) => {\n setParams(p => ({ ...p, [key]: val }));\n }, []);\n\n const doInvoke = useCallback(async () => {\n setSending(true);\n setResult(null);\n try {\n // Coerce param values based on type hints\n const coerced: Record = {};\n for (const [k, v] of Object.entries(params)) {\n if (v === \"\" || v === undefined) continue;\n const def = paramDefs[k];\n if (def?.type === \"number\") {\n const n = Number(v);\n coerced[k] = isNaN(n) ? v : n;\n } else if (def?.type === \"boolean\") {\n coerced[k] = v === \"true\";\n } else {\n // Try JSON parse for object/array types\n if (def?.type === \"object\" || def?.type === \"array\" || def?.type === \"any\") {\n try { coerced[k] = JSON.parse(v); } catch { coerced[k] = v; }\n } else {\n coerced[k] = v;\n }\n }\n }\n\n const r = await fetch(`${baseUrl}/rooms/${roomId}/actions/${action.id}/invoke`, {\n method: \"POST\",\n headers: { ...authHeaders(), \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ params: coerced }),\n });\n const d = await r.json();\n if (d.error) {\n setResult({ ok: false, text: d.message || d.error + (d.detail ? `: ${d.detail}` : \"\") });\n } else {\n const text = d.result !== undefined\n ? `✓ ${typeof d.result === \"string\" ? d.result : JSON.stringify(d.result, null, 2)}`\n : \"✓ invoked\";\n setResult({ ok: true, text });\n }\n } catch (e: any) {\n setResult({ ok: false, text: e.message });\n } finally {\n setSending(false);\n }\n }, [params, paramDefs, action.id, roomId, baseUrl, authHeaders]);\n\n const toggleForm = useCallback(() => {\n if (!expanded) {\n // Initialize defaults\n const defaults: Record = {};\n for (const [k, def] of Object.entries(paramDefs)) {\n if (def.enum?.length) defaults[k] = String(def.enum[0]);\n else defaults[k] = \"\";\n }\n setParams(defaults);\n setResult(null);\n }\n setExpanded(e => !e);\n }, [expanded, paramDefs]);\n\n return (\n \n \n \n {av ? \"● \" : \"○ \"}{action.id}\n \n {!isBuiltin && !readOnly && (\n \n {expanded ? \"close\" : \"invoke\"}\n \n )}\n \n {action.description && {action.description}}\n {action.if && if: {action.if}}\n {paramKeys.length > 0 && !expanded && (\n \n params: {paramKeys.map(p => `${p}(${paramDefs[p].type || \"?\"})`).join(\", \")}\n \n )}\n {writes.length > 0 && (\n \n → {writes.map(w => `${w.scope || \"_shared\"}${w.append ? \"[+]\" : w.merge ? \"[~]\" : \"\"}`).join(\", \")}\n \n )}\n\n {expanded && (\n \n {paramKeys.length > 0 ? paramKeys.map(k => {\n const def = paramDefs[k];\n return (\n \n {k}\n {def.enum ? (\n setParam(k, e.target.value)}\n >\n {def.enum.map((v: any) => (\n \n ))}\n \n ) : (\n setParam(k, e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && doInvoke()}\n spellCheck={false}\n />\n )}\n {def.type && {def.type}}\n \n );\n }) : (\n no parameters\n )}\n \n \n {sending ? \"…\" : \"send\"}\n \n cancel\n \n {result && (\n {result.text}\n )}\n \n )}\n\n \n scope: {action.scope} · v{action.version}\n {action.registered_by && ` · by ${action.registered_by}`}\n \n \n );\n}\n\n// ── Panel ───────────────────────────────────────────────────────────────────\n\ninterface ActionsPanelProps {\n actions: Action[];\n roomId: string;\n baseUrl: string;\n authHeaders: () => Record;\n readOnly?: boolean;\n}\n\nexport function ActionsPanel({ actions, roomId, baseUrl, authHeaders, readOnly }: ActionsPanelProps) {\n if (!actions.length) return no actions registered;\n\n // Sort: custom actions first, builtins after\n const sorted = [...actions].sort((a, b) => {\n const aBuiltin = a.id.startsWith(\"_\") || a.id === \"help\" ? 1 : 0;\n const bBuiltin = b.id.startsWith(\"_\") || b.id === \"help\" ? 1 : 0;\n if (aBuiltin !== bBuiltin) return aBuiltin - bBuiltin;\n return 0;\n });\n\n return (\n \n {sorted.map(a => (\n \n ))}\n \n );\n}\n","deleted","label",[180,181,182,161],"frontend","components","panels","permalink","https://www.val.town/x/c15r/sync/code/frontend/components/panels/Actions.tsx","extension","actionData","errors"]