@cloud-cli/on 1.65.0 → 1.65.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/on.js +1 -1
- package/dist/{server-DWHXyNZq.js → server-DW7dk0yh.js} +33 -36
- package/dist/server.d.ts +1 -0
- package/dist/server.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1878,7 +1878,7 @@ var nn = {
|
|
|
1878
1878
|
{ name: "webhooks" },
|
|
1879
1879
|
{ name: "notifications" }
|
|
1880
1880
|
],
|
|
1881
|
-
paths: /* @__PURE__ */ JSON.parse("{\"/api\":{\"get\":{\"tags\":[\"discovery\"],\"summary\":\"Get this OpenAPI specification\",\"security\":[],\"responses\":{\"200\":{\"description\":\"OpenAPI JSON document\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}}}}},\"/api/api-keys\":{\"get\":{\"tags\":[\"discovery\"],\"summary\":\"List active API keys\",\"responses\":{\"200\":{\"description\":\"API key metadata\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyList\"}}}}}},\"post\":{\"tags\":[\"discovery\"],\"summary\":\"Issue a scoped API key\",\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyIssue\"}}}},\"responses\":{\"201\":{\"description\":\"Key metadata and one-time token\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyCreated\"}}}}}}},\"/api/api-keys/{keyId}\":{\"delete\":{\"tags\":[\"discovery\"],\"summary\":\"Revoke an API key\",\"parameters\":[{\"name\":\"keyId\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\",\"format\":\"uuid\"}}],\"responses\":{\"204\":{\"description\":\"Key revoked\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/jobs\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"List jobs\",\"security\":[],\"parameters\":[{\"$ref\":\"#/components/parameters/AfterId\"},{\"$ref\":\"#/components/parameters/BeforeId\"},{\"$ref\":\"#/components/parameters/Limit\"},{\"$ref\":\"#/components/parameters/Filter\"},{\"$ref\":\"#/components/parameters/WorkflowFilter\"}],\"responses\":{\"200\":{\"description\":\"Dashboard job list\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobList\"}}}}}}},\"/api/dispatch/{trigger}\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Dispatch a workflow trigger with manual inputs\",\"security\":[{\"bearerAuth\":[]},{\"basicAuth\":[]}],\"parameters\":[{\"name\":\"trigger\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Jobs queued\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"}}}},\"/api/workflows/{workflowId}/run\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Run the latest saved workflow revision immediately\",\"security\":[{\"bearerAuth\":[]},{\"basicAuth\":[]}],\"parameters\":[{\"name\":\"workflowId\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Jobs queued\"},\"400\":{\"$ref\":\"#/components/responses/ValidationError\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"}}}},\"/api/jobs/{jobId}/wait\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Wait for a job to reach a terminal state\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"name\":\"timeout\",\"in\":\"query\",\"schema\":{\"type\":\"integer\",\"minimum\":0,\"maximum\":120000,\"default\":30000}}],\"responses\":{\"200\":{\"description\":\"Latest job state\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/jobs/{jobId}/cancel\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Cancel an active job\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"200\":{\"description\":\"Job cancelled\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobStatus\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"},\"409\":{\"$ref\":\"#/components/responses/Conflict\"}}}},\"/api/jobs/{jobId}/secrets\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Get secrets for an assigned worker job\",\"security\":[{\"workerBearerAuth\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"$ref\":\"#/components/parameters/WorkerId\"}],\"responses\":{\"200\":{\"description\":\"Decrypted job secrets\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Secrets\"}}}},\"403\":{\"$ref\":\"#/components/responses/Forbidden\"}}}},\"/api/runs/{jobId}\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Get a run view\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"200\":{\"description\":\"Run details\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/RunView\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/runs/{jobId}/artifacts/{path}\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Download an artifact\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"name\":\"path\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"responses\":{\"200\":{\"description\":\"Artifact bytes\",\"content\":{\"application/octet-stream\":{\"schema\":{\"type\":\"string\",\"format\":\"binary\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/runs/{jobId}/ai-help\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Ask AI to diagnose a failed step\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"required\":[\"stepId\"],\"properties\":{\"stepId\":{\"type\":\"string\"}}}}}},\"responses\":{\"200\":{\"description\":\"AI diagnosis\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"answer\":{\"type\":\"string\"}}}}}},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"},\"502\":{\"description\":\"AI provider failure\"},\"503\":{\"description\":\"AI help is not configured\"}}}},\"/api/workflows/validate\":{\"post\":{\"tags\":[\"workflows\"],\"summary\":\"Validate workflow YAML\",\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/WorkflowSource\"}}}},\"responses\":{\"200\":{\"description\":\"Valid workflow definitions\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ValidationResult\"}}}},\"422\":{\"$ref\":\"#/components/responses/ValidationError\"}}}},\"/api/workflows\":{\"get\":{\"tags\":[\"workflows\"],\"summary\":\"List workflows\",\"responses\":{\"200\":{\"description\":\"Workflow list\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"workflows\":{\"type\":\"array\",\"items\":{\"$ref\":\"#/components/schemas/Workflow\"}}}}}}}}}},\"/api/workflows/{workflowId}\":{\"get\":{\"tags\":[\"workflows\"],\"summary\":\"Get a workflow or historical revision\",\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"},{\"$ref\":\"#/components/parameters/Revision\"}],\"responses\":{\"200\":{\"description\":\"Workflow definition\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}},\"put\":{\"tags\":[\"workflows\"],\"summary\":\"Save a workflow draft\",\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/WorkflowSave\"}}}},\"responses\":{\"200\":{\"description\":\"Draft saved\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"422\":{\"$ref\":\"#/components/responses/ValidationError\"}}},\"delete\":{\"tags\":[\"workflows\"],\"summary\":\"Delete a workflow and its revisions\",\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"responses\":{\"204\":{\"description\":\"Workflow deleted\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/workflows/{workflowId}/publish\":{\"post\":{\"tags\":[\"workflows\"],\"summary\":\"Publish the latest workflow revision\",\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"responses\":{\"200\":{\"description\":\"Workflow published\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/secrets\":{\"get\":{\"tags\":[\"secrets\"],\"summary\":\"List secret names\",\"responses\":{\"200\":{\"description\":\"Secret names\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/SecretNames\"}}}}}}},\"/api/secrets/{name}\":{\"put\":{\"tags\":[\"secrets\"],\"summary\":\"Create or replace an encrypted secret\",\"parameters\":[{\"$ref\":\"#/components/parameters/SecretName\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/SecretValue\"}}}},\"responses\":{\"204\":{\"description\":\"Secret saved\"}}},\"delete\":{\"tags\":[\"secrets\"],\"summary\":\"Delete a secret\",\"parameters\":[{\"$ref\":\"#/components/parameters/SecretName\"}],\"responses\":{\"204\":{\"description\":\"Secret deleted\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/events\":{\"get\":{\"tags\":[\"events\"],\"summary\":\"Subscribe to runner events\",\"security\":[],\"responses\":{\"200\":{\"description\":\"Server-sent event stream\",\"content\":{\"text/event-stream\":{\"schema\":{\"type\":\"string\"}}}}}},\"post\":{\"tags\":[\"events\"],\"summary\":\"Publish a worker job-change event\",\"security\":[{\"workerBearerAuth\":[]}],\"requestBody\":{\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobEvent\"}}}},\"responses\":{\"202\":{\"description\":\"Event accepted\"}}}},\"/api/push/public-key\":{\"get\":{\"tags\":[\"notifications\"],\"summary\":\"Get the Web Push public key\",\"security\":[],\"responses\":{\"200\":{\"description\":\"VAPID public key\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"publicKey\":{\"type\":\"string\"}}}}}}}}},\"/api/push/subscriptions\":{\"post\":{\"tags\":[\"notifications\"],\"summary\":\"Register a Web Push subscription\",\"security\":[],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"201\":{\"description\":\"Subscription saved\"}}},\"delete\":{\"tags\":[\"notifications\"],\"summary\":\"Remove a Web Push subscription\",\"security\":[],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"required\":[\"endpoint\"],\"properties\":{\"endpoint\":{\"type\":\"string\",\"format\":\"uri\"}}}}}},\"responses\":{\"204\":{\"description\":\"Subscription removed\"}}}},\"/webhooks/{provider}\":{\"post\":{\"tags\":[\"webhooks\"],\"summary\":\"Receive a provider webhook\",\"security\":[],\"parameters\":[{\"name\":\"provider\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Webhook accepted\"},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"},\"413\":{\"$ref\":\"#/components/responses/PayloadTooLarge\"}}}},\"/restart/{jobId}\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Create a new run from the active workflow revision\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"201\":{\"description\":\"New job created\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"id\":{\"type\":\"integer\"}}}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/admin/reload-secrets\":{\"post\":{\"tags\":[\"secrets\"],\"summary\":\"Reload legacy in-memory secrets\",\"responses\":{\"200\":{\"description\":\"Secrets reloaded\"},\"403\":{\"$ref\":\"#/components/responses/Forbidden\"}}}}}"),
|
|
1881
|
+
paths: /* @__PURE__ */ JSON.parse("{\"/api\":{\"get\":{\"tags\":[\"discovery\"],\"summary\":\"Get this OpenAPI specification\",\"security\":[],\"responses\":{\"200\":{\"description\":\"OpenAPI JSON document\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}}}}},\"/api/api-keys\":{\"get\":{\"tags\":[\"discovery\"],\"summary\":\"List active API keys\",\"responses\":{\"200\":{\"description\":\"API key metadata\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyList\"}}}}}},\"post\":{\"tags\":[\"discovery\"],\"summary\":\"Issue a scoped API key\",\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyIssue\"}}}},\"responses\":{\"201\":{\"description\":\"Key metadata and one-time token\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ApiKeyCreated\"}}}}}}},\"/api/api-keys/{keyId}\":{\"delete\":{\"tags\":[\"discovery\"],\"summary\":\"Revoke an API key\",\"parameters\":[{\"name\":\"keyId\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\",\"format\":\"uuid\"}}],\"responses\":{\"204\":{\"description\":\"Key revoked\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/jobs\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"List jobs\",\"security\":[],\"parameters\":[{\"$ref\":\"#/components/parameters/AfterId\"},{\"$ref\":\"#/components/parameters/BeforeId\"},{\"$ref\":\"#/components/parameters/Limit\"},{\"$ref\":\"#/components/parameters/Filter\"},{\"$ref\":\"#/components/parameters/WorkflowFilter\"}],\"responses\":{\"200\":{\"description\":\"Dashboard job list\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobList\"}}}}}}},\"/api/dispatch/{trigger}\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Dispatch a workflow trigger with manual inputs\",\"security\":[{\"bearerAuth\":[]},{\"basicAuth\":[]}],\"parameters\":[{\"name\":\"trigger\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Jobs queued\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"}}}},\"/api/workflows/{workflowId}/run\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Run the latest saved workflow revision immediately\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"name\":\"workflowId\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Jobs queued\"},\"400\":{\"$ref\":\"#/components/responses/ValidationError\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"}}}},\"/api/jobs/{jobId}/wait\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Wait for a job to reach a terminal state\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"name\":\"timeout\",\"in\":\"query\",\"schema\":{\"type\":\"integer\",\"minimum\":0,\"maximum\":120000,\"default\":30000}}],\"responses\":{\"200\":{\"description\":\"Latest job state\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/jobs/{jobId}/cancel\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Cancel an active job\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"200\":{\"description\":\"Job cancelled\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobStatus\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"},\"409\":{\"$ref\":\"#/components/responses/Conflict\"}}}},\"/api/jobs/{jobId}/secrets\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Get secrets for an assigned worker job\",\"security\":[{\"workerBearerAuth\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"$ref\":\"#/components/parameters/WorkerId\"}],\"responses\":{\"200\":{\"description\":\"Decrypted job secrets\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Secrets\"}}}},\"403\":{\"$ref\":\"#/components/responses/Forbidden\"}}}},\"/api/runs/{jobId}\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Get a run view\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"200\":{\"description\":\"Run details\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/RunView\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/runs/{jobId}/artifacts/{path}\":{\"get\":{\"tags\":[\"jobs\"],\"summary\":\"Download an artifact\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"},{\"name\":\"path\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"responses\":{\"200\":{\"description\":\"Artifact bytes\",\"content\":{\"application/octet-stream\":{\"schema\":{\"type\":\"string\",\"format\":\"binary\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/runs/{jobId}/ai-help\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Ask AI to diagnose a failed step\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"required\":[\"stepId\"],\"properties\":{\"stepId\":{\"type\":\"string\"}}}}}},\"responses\":{\"200\":{\"description\":\"AI diagnosis\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"answer\":{\"type\":\"string\"}}}}}},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"},\"502\":{\"description\":\"AI provider failure\"},\"503\":{\"description\":\"AI help is not configured\"}}}},\"/api/workflows/validate\":{\"post\":{\"tags\":[\"workflows\"],\"summary\":\"Validate workflow YAML\",\"security\":[{\"oidcSessionCookie\":[]}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/WorkflowSource\"}}}},\"responses\":{\"200\":{\"description\":\"Valid workflow definitions\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/ValidationResult\"}}}},\"422\":{\"$ref\":\"#/components/responses/ValidationError\"}}}},\"/api/ai/workflow-help\":{\"post\":{\"tags\":[\"workflows\"],\"summary\":\"Get a workflow YAML suggestion\",\"security\":[{\"oidcSessionCookie\":[]}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"required\":[\"request\"],\"properties\":{\"request\":{\"type\":\"string\"},\"sourceYaml\":{\"type\":\"string\"}}}}}},\"responses\":{\"200\":{\"description\":\"Workflow YAML suggestion stream\",\"content\":{\"text/event-stream\":{\"schema\":{\"type\":\"string\"}}}},\"400\":{\"$ref\":\"#/components/responses/ValidationError\"},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"},\"502\":{\"description\":\"AI provider failure\"},\"503\":{\"description\":\"AI help is not configured\"}}}},\"/api/workflows\":{\"get\":{\"tags\":[\"workflows\"],\"summary\":\"List workflows\",\"security\":[{\"oidcSessionCookie\":[]}],\"responses\":{\"200\":{\"description\":\"Workflow list\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"workflows\":{\"type\":\"array\",\"items\":{\"$ref\":\"#/components/schemas/Workflow\"}}}}}}}}}},\"/api/workflows/{workflowId}\":{\"get\":{\"tags\":[\"workflows\"],\"summary\":\"Get a workflow or historical revision\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"},{\"$ref\":\"#/components/parameters/Revision\"}],\"responses\":{\"200\":{\"description\":\"Workflow definition\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}},\"put\":{\"tags\":[\"workflows\"],\"summary\":\"Save a workflow draft\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/WorkflowSave\"}}}},\"responses\":{\"200\":{\"description\":\"Draft saved\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"422\":{\"$ref\":\"#/components/responses/ValidationError\"}}},\"delete\":{\"tags\":[\"workflows\"],\"summary\":\"Delete a workflow and its revisions\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"responses\":{\"204\":{\"description\":\"Workflow deleted\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/workflows/{workflowId}/publish\":{\"post\":{\"tags\":[\"workflows\"],\"summary\":\"Publish the latest workflow revision\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/WorkflowId\"}],\"responses\":{\"200\":{\"description\":\"Workflow published\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/Workflow\"}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/secrets\":{\"get\":{\"tags\":[\"secrets\"],\"summary\":\"List secret names\",\"security\":[{\"oidcSessionCookie\":[]}],\"responses\":{\"200\":{\"description\":\"Secret names\",\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/SecretNames\"}}}}}}},\"/api/secrets/{name}\":{\"put\":{\"tags\":[\"secrets\"],\"summary\":\"Create or replace an encrypted secret\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/SecretName\"}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/SecretValue\"}}}},\"responses\":{\"204\":{\"description\":\"Secret saved\"}}},\"delete\":{\"tags\":[\"secrets\"],\"summary\":\"Delete a secret\",\"security\":[{\"oidcSessionCookie\":[]}],\"parameters\":[{\"$ref\":\"#/components/parameters/SecretName\"}],\"responses\":{\"204\":{\"description\":\"Secret deleted\"},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/api/events\":{\"get\":{\"tags\":[\"events\"],\"summary\":\"Subscribe to runner events\",\"security\":[],\"responses\":{\"200\":{\"description\":\"Server-sent event stream\",\"content\":{\"text/event-stream\":{\"schema\":{\"type\":\"string\"}}}}}},\"post\":{\"tags\":[\"events\"],\"summary\":\"Publish a worker job-change event\",\"security\":[{\"workerBearerAuth\":[]}],\"requestBody\":{\"content\":{\"application/json\":{\"schema\":{\"$ref\":\"#/components/schemas/JobEvent\"}}}},\"responses\":{\"202\":{\"description\":\"Event accepted\"}}}},\"/api/push/public-key\":{\"get\":{\"tags\":[\"notifications\"],\"summary\":\"Get the Web Push public key\",\"security\":[],\"responses\":{\"200\":{\"description\":\"VAPID public key\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"publicKey\":{\"type\":\"string\"}}}}}}}}},\"/api/push/subscriptions\":{\"post\":{\"tags\":[\"notifications\"],\"summary\":\"Register a Web Push subscription\",\"security\":[],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"201\":{\"description\":\"Subscription saved\"}}},\"delete\":{\"tags\":[\"notifications\"],\"summary\":\"Remove a Web Push subscription\",\"security\":[],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"required\":[\"endpoint\"],\"properties\":{\"endpoint\":{\"type\":\"string\",\"format\":\"uri\"}}}}}},\"responses\":{\"204\":{\"description\":\"Subscription removed\"}}}},\"/webhooks/{provider}\":{\"post\":{\"tags\":[\"webhooks\"],\"summary\":\"Receive a provider webhook\",\"security\":[],\"parameters\":[{\"name\":\"provider\",\"in\":\"path\",\"required\":true,\"schema\":{\"type\":\"string\"}}],\"requestBody\":{\"required\":true,\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\"}}}},\"responses\":{\"202\":{\"description\":\"Webhook accepted\"},\"401\":{\"$ref\":\"#/components/responses/Unauthorized\"},\"413\":{\"$ref\":\"#/components/responses/PayloadTooLarge\"}}}},\"/restart/{jobId}\":{\"post\":{\"tags\":[\"jobs\"],\"summary\":\"Create a new run from the active workflow revision\",\"parameters\":[{\"$ref\":\"#/components/parameters/JobId\"}],\"responses\":{\"201\":{\"description\":\"New job created\",\"content\":{\"application/json\":{\"schema\":{\"type\":\"object\",\"properties\":{\"id\":{\"type\":\"integer\"}}}}}},\"404\":{\"$ref\":\"#/components/responses/NotFound\"}}}},\"/admin/reload-secrets\":{\"post\":{\"tags\":[\"secrets\"],\"summary\":\"Reload legacy in-memory secrets\",\"responses\":{\"200\":{\"description\":\"Secrets reloaded\"},\"403\":{\"$ref\":\"#/components/responses/Forbidden\"}}}}}"),
|
|
1882
1882
|
components: {
|
|
1883
1883
|
securitySchemes: {
|
|
1884
1884
|
bearerAuth: {
|
|
@@ -1889,6 +1889,11 @@ var nn = {
|
|
|
1889
1889
|
type: "http",
|
|
1890
1890
|
scheme: "basic"
|
|
1891
1891
|
},
|
|
1892
|
+
oidcSessionCookie: {
|
|
1893
|
+
type: "apiKey",
|
|
1894
|
+
in: "cookie",
|
|
1895
|
+
name: "runner_oidc_session"
|
|
1896
|
+
},
|
|
1892
1897
|
workerBearerAuth: {
|
|
1893
1898
|
type: "http",
|
|
1894
1899
|
scheme: "bearer",
|
|
@@ -2178,7 +2183,7 @@ var nn = {
|
|
|
2178
2183
|
let t = await r.run("UPDATE api_keys SET revoked_at = CURRENT_TIMESTAMP WHERE id = ? AND revoked_at IS NULL", [e]);
|
|
2179
2184
|
return Number(t?.changes || 0) > 0;
|
|
2180
2185
|
}
|
|
2181
|
-
}, on = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>Runner settings</title>\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\" } }\n <\/script>\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n </head>\n <body data-page=\"__SETTINGS_PAGE__\" class=\"min-h-screen bg-gray-950 p-4 font-sans text-gray-100 md:p-6\">\n <template app>\n <main class=\"mx-auto max-w-6xl space-y-5 py-6\">\n <app-header title=\"Settings\" subtitle=\"
|
|
2186
|
+
}, on = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>Runner settings</title>\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\" } }\n <\/script>\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n </head>\n <body data-page=\"__SETTINGS_PAGE__\" class=\"min-h-screen bg-gray-950 p-4 font-sans text-gray-100 md:p-6\">\n <template app>\n <main class=\"mx-auto max-w-6xl space-y-5 py-6\">\n <app-header title=\"Settings\" subtitle=\"Account and automation settings\" back=\"/runs\" back-label=\"Back to jobs\"></app-header>\n <nav class=\"flex flex-wrap gap-1 rounded-xl border border-gray-800 bg-gray-900/70 p-1\" aria-label=\"Settings navigation\">\n <a href=\"/settings/workflows\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Workflows</a>\n <a href=\"/settings/secrets\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Secrets</a>\n <a href=\"/settings/tokens\" bind-class=\"page === 'tokens' ? 'bg-gray-800.text-white' : ''\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">API tokens</a>\n <a href=\"/settings/notifications\" bind-class=\"page === 'notifications' ? 'bg-gray-800.text-white' : ''\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Notifications</a>\n <a href=\"/settings/workers\" bind-class=\"page === 'workers' ? 'bg-gray-800.text-white' : ''\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Workers</a>\n </nav>\n\n <template if=\"page === 'tokens'\">\n </template>\n <template if=\"page === 'notifications'\">\n <section class=\"rounded-2xl border border-gray-800 bg-gray-900/80 p-5\" aria-labelledby=\"notifications-title\">\n <h2 id=\"notifications-title\" class=\"text-lg font-semibold text-white\">Notifications</h2>\n <p class=\"mt-1 text-sm text-gray-400\">Receive job completion notifications on this device.</p>\n <button type=\"button\" on-click=\"toggleNotifications()\" class=\"mt-5 inline-flex items-center gap-2 rounded-lg border border-indigo-500/60 px-4 py-2.5 text-sm font-medium text-indigo-200 outline-none hover:bg-indigo-500/10 focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <lucide-icon bind-icon=\"notificationsEnabled ? 'bell-off' : 'bell-ring'\" size=\"16\"></lucide-icon>\n {{ notificationsEnabled ? 'Disable notifications' : 'Enable notifications' }}\n </button>\n <p class=\"mt-3 text-sm text-gray-400\" role=\"status\">{{ notificationMessage }}</p>\n </section>\n </template>\n\n <template if=\"page === 'workers'\">\n <section class=\"rounded-2xl border border-gray-800 bg-gray-900/80 p-5\" aria-labelledby=\"workers-title\">\n <h2 id=\"workers-title\" class=\"text-lg font-semibold text-white\">Workers</h2>\n <p class=\"mt-1 text-sm text-gray-400\">Connected runner status, versions, tags, and load.</p>\n <div class=\"mt-5 overflow-hidden rounded-xl border border-gray-800\"><table class=\"w-full text-left text-sm\"><thead class=\"bg-gray-950 text-xs uppercase text-gray-500\"><tr><th class=\"px-4 py-3\">Worker</th><th class=\"px-4 py-3\">Version</th><th class=\"px-4 py-3\">Tags</th><th class=\"px-4 py-3\">Load</th><th class=\"px-4 py-3\">Last seen</th></tr></thead><tbody><template for=\"worker of workers\"><tr class=\"border-t border-gray-800\"><td class=\"px-4 py-3 font-mono text-gray-200\">{{ worker.workerId }} <span class=\"ml-2 rounded-full px-2 py-0.5 text-xs\" bind-class=\"worker.online ? 'bg-emerald-500/10.text-emerald-300' : 'bg-gray-800.text-gray-500'\">{{ worker.online ? 'online' : 'offline' }}</span></td><td class=\"px-4 py-3 font-mono text-gray-400\">{{ worker.version }}</td><td class=\"px-4 py-3 text-gray-400\">{{ worker.tags.join(', ') }}</td><td class=\"px-4 py-3 text-gray-400\">{{ worker.activeJobs }} / {{ worker.concurrency }}</td><td class=\"px-4 py-3 text-gray-500\">{{ worker.lastSeen }}</td></tr></template></tbody></table><p class=\"p-5 text-sm text-gray-500\" class-hidden=\"workers.length > 0\">No worker heartbeats received yet.</p></div>\n </section>\n </template>\n\n <template if=\"page === 'tokens'\">\n <section class=\"rounded-2xl border border-gray-800 bg-gray-900/80 p-5\" aria-labelledby=\"keys-title\">\n <div class=\"flex items-start justify-between gap-3\">\n <div>\n <h2 id=\"keys-title\" class=\"text-lg font-semibold text-white\">API keys</h2>\n <p class=\"mt-1 text-sm text-gray-400\">Issue narrowly scoped credentials for automation tools. Keys are shown only once.</p>\n </div>\n </div>\n <div class=\"mt-5 grid gap-3 rounded-xl border border-gray-800 bg-gray-950/50 p-4 md:grid-cols-[1fr_auto]\">\n <label class=\"sr-only\" for=\"key-name\">Key name</label>\n <input id=\"key-name\" bind-value=\"keyName\" on-input=\"setKeyName($event)\" placeholder=\"Documentation bot\" class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\" />\n <button type=\"button\" on-click=\"issueKey()\" class=\"inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-500 px-4 py-2.5 text-sm font-semibold text-white outline-none hover:bg-indigo-400 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"><lucide-icon icon=\"key-round\" size=\"16\"></lucide-icon>Issue key</button>\n <fieldset class=\"md:col-span-2\">\n <legend class=\"mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500\">Scopes</legend>\n <div class=\"space-y-2\">\n <template for=\"scope of scopeOptions\">\n <label class=\"group flex cursor-pointer items-center gap-3 text-sm text-gray-300\">\n <input type=\"checkbox\" bind-checked=\"scope.selected\" on-change=\"toggleScope(scope)\" class=\"peer sr-only\" />\n <span aria-hidden=\"true\" class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-gray-600 bg-gray-900 text-transparent transition peer-checked:border-indigo-400 peer-checked:bg-indigo-500 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-400/70 peer-disabled:opacity-50\">\n <svg viewBox=\"0 0 16 16\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 8 3 3 7-7\"></path></svg>\n </span>\n <span class=\"group-hover:text-white\">{{ scope.label }}</span>\n </label>\n </template>\n </div>\n </fieldset>\n </div>\n <template if=\"newToken\">\n <div class=\"mt-4 rounded-xl border border-amber-500/40 bg-amber-500/10 p-4\" role=\"alert\">\n <p class=\"text-sm font-semibold text-amber-200\">Copy this key now. It cannot be shown again.</p>\n <code class=\"mt-2 block select-all break-all rounded bg-gray-950 p-3 font-mono text-xs text-amber-100\">{{ newToken }}</code>\n </div>\n </template>\n <h3 class=\"mt-5 text-xs font-semibold uppercase tracking-wider text-gray-500\">Active tokens</h3>\n <ul class=\"mt-2 space-y-2\" aria-label=\"Active API keys\">\n <template for=\"key of keys\">\n <li class=\"flex items-center justify-between gap-3 rounded-xl border border-gray-800 bg-gray-950/60 px-4 py-3\">\n <div class=\"min-w-0\"><p class=\"truncate text-sm font-medium text-gray-200\">{{ key.name }}</p><p class=\"text-xs text-gray-500\">{{ key.scopes.join(', ') }} · created {{ key.created_at }}</p></div>\n <button type=\"button\" on-click=\"revokeKey(key)\" class=\"shrink-0 rounded-lg p-2 text-rose-300 outline-none hover:bg-rose-500/10 focus-visible:ring-2 focus-visible:ring-rose-400/60\" aria-label=\"Revoke {{ key.name }}\" title=\"Revoke key\"><lucide-icon icon=\"trash\" size=\"16\"></lucide-icon></button>\n </li>\n </template>\n </ul>\n </section>\n </template>\n <p class=\"text-sm text-rose-300\" role=\"alert\" class-hidden=\"!error\">{{ error }}</p>\n </main>\n <script setup src=\"/settings-ui.mjs\"><\/script>\n </template>\n <script type=\"module\">import '@li3/web';<\/script>\n <script src=\"https://cdn.tailwindcss.com\"><\/script>\n </body>\n</html>\n";
|
|
2182
2187
|
//#endregion
|
|
2183
2188
|
//#region src/settings-ui.ts
|
|
2184
2189
|
function sn(e = "tokens") {
|
|
@@ -12126,7 +12131,7 @@ async function Gh(e, t, n, r) {
|
|
|
12126
12131
|
}
|
|
12127
12132
|
//#endregion
|
|
12128
12133
|
//#region src/app-header.html?raw
|
|
12129
|
-
var Kh = "<template component=\"app-header\">\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <header class=\"mx-auto flex w-full max-w-[78rem] items-center justify-between gap-4 border-b border-gray-800 pb-5\">\n <div class=\"flex min-w-0 items-start gap-3\">\n <template if=\"back\">\n <a\n class=\"mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-800 text-gray-400 no-underline outline-none hover:border-indigo-500 hover:text-indigo-200 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n attr-href=\"back\"\n attr-aria-label=\"backLabel || 'Back'\"\n attr-title=\"backLabel || 'Back'\"\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width=\"17\"\n height=\"17\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n </a>\n </template>\n <div>\n <div class=\"text-[.7rem] font-bold uppercase tracking-[.16em] text-indigo-400\">Runner engine</div>\n <h1 class=\"mt-1 text-2xl font-bold tracking-tight text-white\">{{ title }}</h1>\n <template if=\"subtitle\"><p class=\"mt-1 text-xs text-gray-400\">{{ subtitle }}</p></template>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <template if=\"!authenticated\">\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/settings\"\n aria-label=\"Settings\"\n title=\"Settings\"\n >\n <lucide-icon icon=\"user-round\" size=\"16\"></lucide-icon>\n </a>\n </template>\n <template if=\"authenticated\">\n <span class=\"hidden text-xs text-gray-400 sm:inline\">{{ userName }}</span>\n <a class=\"text-xs text-indigo-300 hover:text-white\" href=\"/auth/logout\">Sign out</a>\n </template>\n <a\n class=\"rounded px-2 py-1 text-xs text-indigo-300 no-underline outline-none hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/preview\"\n >Preview</a\n >\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/help\"\n aria-label=\"Help\"\n title=\"Help\"\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n <path d=\"M9.6 9a2.5 2.5 0 1 1 4.2 1.8c-1.2 1-1.8 1.4-1.8 2.7\"></path>\n <path d=\"M12 17h.01\"></path>\n </svg>\n </a>\n <template if=\"authenticated\">\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/settings\"\n aria-label=\"Settings\"\n title=\"Settings\"\n >\n <template if=\"userPhoto\"><img attr-src=\"userPhoto\" alt=\"\" class=\"h-full w-full object-cover\" /></template>\n <template if=\"!userPhoto\"><lucide-icon icon=\"circle-user-round\" size=\"16\"></lucide-icon></template>\n </a>\n </template>\n </div>\n </header>\n <script setup src=\"/app-header.mjs\"><\/script>\n</template>\n", qh = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#030712\" />\n <link rel=\"manifest\" href=\"/manifest.webmanifest\" />\n <link rel=\"icon\" href=\"/app-icon.svg\" type=\"image/svg+xml\" />\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\", \"ansi_up\": \"https://esm.sh/ansi_up@6.0.6\", \"diff\": \"https://unpkg.com/diff@9.0.0/libesm/index.js\", \"marked\": \"https://cdn.jsdelivr.net/npm/marked@18.0.12/lib/marked.esm.js\" } }\n <\/script>\n <link rel=\"component\" href=\"/app-router.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-editor.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-block.html\" />\n <title>On Workflow Runner</title>\n </head>\n <body class=\"min-h-screen bg-gray-950 text-gray-100 font-sans\">\n <template app>\n <app-router></app-router>\n </template>\n <script type=\"module\">import '@li3/web';<\/script>\n <script src=\"https://cdn.tailwindcss.com\"><\/script>\n </body>\n</html>\n", Jh = "<template component=\"app-router\">\n <div ref=\"outlet\" aria-live=\"polite\"></div>\n <script setup src=\"/app-router.mjs\"><\/script>\n</template>\n", Yh = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta name=\"theme-color\" content=\"#030712\" />\n <meta name=\"mobile-web-app-capable\" content=\"yes\" />\n <link rel=\"manifest\" href=\"/manifest.webmanifest\" />\n <link rel=\"icon\" href=\"/app-icon.svg\" type=\"image/svg+xml\" />\n <title>Runner Workflow Management</title>\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\", \"diff\": \"https://unpkg.com/diff@9.0.0/libesm/index.js\" } }\n <\/script>\n <style>\n body[data-page='list'] .editor-panel {\n display: none;\n }\n body[data-page='workflows'] .editor-panel,\n body[data-page='workflows'] .secrets-panel,\n body[data-page='secrets'] .workflow-list,\n body[data-page='secrets'] .editor-panel {\n display: none;\n }\n body[data-page='editor'] .workflow-list,\n body[data-page='editor'] .secrets-panel {\n display: none;\n }\n </style>\n </head>\n <body data-page=\"__WORKFLOW_PAGE__\" class=\"min-h-screen bg-gray-950 p-4 font-sans text-gray-100 md:p-6\">\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-editor.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-block.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n\n <template app>\n <main class=\"mx-auto max-w-6xl space-y-5 py-6\">\n <template if=\"page === 'secrets'\"><app-header title=\"Secrets\" subtitle=\"Write-only credentials available to workflows\" back=\"/runs\" back-label=\"Back to dashboard\"></app-header></template>\n <template if=\"page !== 'secrets'\"><app-header title=\"Workflow control room\" subtitle=\"Draft, validate, and publish revisioned YAML definitions\" back=\"/runs\" back-label=\"Back to dashboard\"></app-header></template>\n <nav class=\"flex flex-wrap gap-1 rounded-xl border border-gray-800 bg-gray-900/70 p-1\" aria-label=\"Settings navigation\">\n <a href=\"/settings/workflows\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\" bind-class=\"page === 'workflows' || page === 'editor' ? 'bg-gray-800.text-white' : ''\">Workflows</a>\n <a href=\"/settings/secrets\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\" bind-class=\"page === 'secrets' ? 'bg-gray-800.text-white' : ''\">Secrets</a>\n <a href=\"/settings/tokens\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">API tokens</a>\n <a href=\"/settings/notifications\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Notifications</a>\n </nav>\n\n <template if=\"notice\">\n <div\n role=\"status\"\n class=\"flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm\"\n bind-class=\"noticeError ? 'border-rose-500/40 bg-rose-500/10 text-rose-100' : 'border-emerald-500/40 bg-emerald-500/10 text-emerald-100'\"\n >\n <lucide-icon bind-icon=\"noticeError ? 'circle-alert' : 'circle-check'\" size=\"17\"></lucide-icon>\n <span>{{ notice }}</span>\n </div>\n </template>\n\n <section id=\"workflow-layout\" class=\"space-y-5\">\n <nav\n class=\"workflow-list rounded-2xl border border-gray-800 bg-gray-900/80 p-4 shadow-xl shadow-black/10\"\n aria-labelledby=\"workflow-list-title\"\n >\n <div class=\"mb-4 flex items-end justify-between gap-3 border-b border-gray-800 pb-4\">\n <div>\n <p class=\"text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-400\">Definitions</p>\n <h2 id=\"workflow-list-title\" class=\"mt-1 text-lg font-semibold text-white\">Workflows</h2>\n </div>\n <a\n href=\"/workflows/new\"\n class=\"inline-flex items-center gap-2 rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white outline-none transition hover:bg-indigo-400 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <lucide-icon icon=\"plus\" size=\"16\"></lucide-icon>\n New workflow\n </a>\n </div>\n <ul class=\"grid gap-2\" aria-label=\"Workflow definitions\">\n <template for=\"workflow of workflows\">\n <li>\n <a\n attr-href=\"'/workflows/' + workflow.id\"\n class=\"group flex min-h-16 items-center gap-3 rounded-xl border border-gray-800 bg-gray-950/50 px-3.5 py-3 text-left text-sm text-gray-300 outline-none transition hover:border-indigo-500/50 hover:bg-indigo-500/10 focus-visible:border-indigo-400 focus-visible:ring-2 focus-visible:ring-indigo-400/50\"\n >\n <span\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition group-hover:bg-indigo-500/15 group-hover:text-indigo-300\"\n >\n <lucide-icon icon=\"workflow\" size=\"17\"></lucide-icon>\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block truncate text-base font-semibold text-gray-100\">{{ workflow.name }}</span>\n <span class=\"mt-0.5 block truncate font-mono text-[11px] text-gray-500\">{{ workflow.id }}</span>\n </span>\n <span\n class=\"rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-wide\"\n bind-class=\"workflow.status === 'published' ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300' : workflow.status === 'archived' ? 'border-gray-700 bg-gray-800 text-gray-500' : 'border-amber-500/30 bg-amber-500/10 text-amber-300'\"\n >{{ workflow.status }}</span\n >\n <lucide-icon\n icon=\"arrow-up-right\"\n size=\"16\"\n class=\"shrink-0 text-gray-600 transition group-hover:text-indigo-300\"\n ></lucide-icon>\n </a>\n </li>\n </template>\n </ul>\n <div\n class=\"rounded-xl border border-dashed border-gray-700 px-4 py-8 text-center\"\n class-hidden=\"workflows.length > 0\"\n >\n <lucide-icon icon=\"workflow\" size=\"22\" class=\"mx-auto text-gray-600\"></lucide-icon>\n <p class=\"mt-2 text-sm font-medium text-gray-300\">No workflows yet</p>\n <p class=\"mt-1 text-xs text-gray-500\">Create a definition to start automating jobs.</p>\n </div>\n </nav>\n\n <section\n class=\"editor-panel overflow-hidden rounded-xl border border-gray-800 bg-gray-900/80 shadow-xl shadow-black/10\"\n >\n <div class=\"border-b border-gray-800 px-4 pt-3 sm:px-5\">\n <a\n href=\"/workflows\"\n class=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-gray-400 outline-none transition hover:bg-gray-800 hover:text-gray-100 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <lucide-icon icon=\"arrow-left\" size=\"14\"></lucide-icon>\n Back to workflows\n </a>\n </div>\n <div class=\"border-b border-gray-800 bg-gray-900 px-4 py-4 sm:px-5\">\n <div class=\"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n <label class=\"block max-w-xl flex-1 text-xs font-semibold uppercase tracking-wider text-gray-400\"\n >Workflow ID\n <input\n bind-value=\"workflowId\"\n on-input=\"setWorkflowId($event)\"\n bind-disabled=\"selectedId\"\n aria-describedby=\"workflow-id-help\"\n class=\"mt-2 w-full rounded-lg border border-gray-700 bg-gray-950 px-3 py-2.5 font-mono text-sm normal-case tracking-normal text-white outline-none transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20\"\n placeholder=\"derived-from-workflow-name\"\n />\n <span\n id=\"workflow-id-help\"\n class=\"mt-1 block text-[11px] font-normal normal-case tracking-normal text-gray-500\"\n >The ID becomes permanent after the first save.</span\n >\n </label>\n <label class=\"inline-flex items-center gap-2 text-sm text-gray-300\">\n <input\n type=\"checkbox\"\n bind-checked=\"enabled\"\n on-change=\"setEnabled($event)\"\n class=\"h-4 w-4 rounded border-gray-700 bg-gray-950 text-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n />\n Enabled\n </label>\n <div class=\"flex flex-wrap gap-2\" class-hidden=\"readOnly\">\n <button type=\"button\" aria-label=\"Get AI workflow help\" title=\"Get AI workflow help\" on-click=\"openAiHelp()\" class=\"inline-flex items-center gap-2 rounded-lg border border-indigo-500/50 px-3 py-2.5 text-sm font-medium text-indigo-200 outline-none hover:bg-indigo-500/10 focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <lucide-icon icon=\"sparkles\" size=\"16\"></lucide-icon><span class=\"hidden sm:inline\">AI help</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Save workflow draft\"\n title=\"Save workflow draft\"\n on-click=\"save()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center gap-2 rounded-lg bg-indigo-500 px-3 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-400 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"save\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Save draft</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Publish workflow\"\n title=\"Publish workflow\"\n on-click=\"publish()\"\n bind-disabled=\"busy || !selectedId || source !== savedSource || enabled !== savedEnabled\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-emerald-500/50 px-3 py-2.5 text-sm font-medium text-emerald-300 transition hover:bg-emerald-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"rocket\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Publish</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Run workflow now\"\n title=\"Run saved workflow draft now\"\n on-click=\"runNow()\"\n bind-disabled=\"busy || !selectedId || source !== savedSource || !validation.valid\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-sky-500/50 px-3 py-2.5 text-sm font-medium text-sky-300 transition hover:bg-sky-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"play\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Run now</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Delete workflow\"\n title=\"Delete workflow\"\n on-click=\"remove()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-rose-500/50 px-3 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"trash\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Delete</span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"p-3 sm:p-5\">\n <div class=\"mb-2 flex items-center justify-between px-1 text-xs text-gray-500\">\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Validate workflow\"\n title=\"Validate workflow\"\n on-click=\"validate(1)\"\n bind-disabled=\"validation.running\"\n bind-class=\"{ 'hidden': readOnly, 'text-emerald-400': validation.valid, 'text-rose-400': !validation.valid }\"\n class=\"disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon\n class=\"inline-block\"\n bind-icon=\"validation.running ? 'loader-circle' : (validation.valid ? 'circle-check' : 'circle-alert')\"\n bind-class=\"validation.running ? 'animate-spin' : ''\"\n size=\"16\"\n ></lucide-icon>\n </button>\n <span class=\"font-medium\" bind-class=\"validation.error ? 'bg-rose-500/10 text-rose-100' : ''\"\n >{{ validation.error || '' }}</span\n >\n </div>\n <template if=\"revision\">\n <button\n type=\"button\"\n on-click=\"openRevisionDialog()\"\n class=\"font-mono text-indigo-300 outline-none hover:underline focus-visible:rounded focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >Revision {{ revision }}</button>\n </template>\n <template if=\"!revision\"><span class=\"font-mono\">Unsaved draft</span></template>\n </div>\n <template if=\"readOnly\">\n <code-block\n language=\"yaml\"\n theme=\"atom-one-dark\"\n class=\"block h-[calc(100vh-23rem)] min-h-[28rem] overflow-auto rounded-lg border border-gray-700 bg-gray-950 p-4\"\n bind-source=\"source\"\n ></code-block>\n </template>\n <template if=\"!readOnly\">\n <code-editor\n id=\"source-yaml\"\n language=\"yaml\"\n theme=\"atom-one-dark\"\n nostatus=\"true\"\n class=\"block h-[calc(100vh-23rem)] min-h-[28rem] overflow-hidden rounded-lg border border-gray-700 bg-gray-950\"\n bind-value=\"source\"\n on-change=\"setSource($event.detail)\"\n ></code-editor>\n </template>\n <details\n class=\"mt-4 overflow-hidden rounded-xl border border-gray-800 bg-gray-950/50\"\n on-toggle=\"loadHelp($event)\"\n >\n <summary\n class=\"flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-medium text-gray-300 outline-none transition hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <span class=\"inline-flex items-center gap-2\"\n ><lucide-icon icon=\"circle-question-mark\" size=\"16\"></lucide-icon>Syntax</span\n >\n <span class=\"ml-2 text-xs font-normal text-gray-500\">Reference, tutorials, and examples</span>\n </summary>\n <div\n ref=\"helpContent\"\n class=\"max-h-[38rem] overflow-y-auto border-t border-gray-800 bg-gray-950 px-4 py-5\"\n role=\"region\"\n aria-label=\"Workflow syntax help\"\n aria-live=\"polite\"\n >\n <p class=\"text-sm text-gray-500\">Expand to load the workflow syntax reference.</p>\n </div>\n </details>\n </div>\n </section>\n </section>\n\n <template if=\"aiDialogOpen\">\n <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-gray-950/80 p-4\" role=\"presentation\">\n <div class=\"flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-gray-900 shadow-2xl\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"workflow-ai-title\">\n <div class=\"flex items-start justify-between gap-3 border-b border-gray-800 px-5 py-4\"><div><h2 id=\"workflow-ai-title\" class=\"text-lg font-semibold text-white\">AI workflow help</h2><p class=\"mt-1 text-sm text-gray-400\">Describe the change you want. The suggestion will not modify the editor until you accept it.</p></div><button type=\"button\" on-click=\"closeAiHelp()\" aria-label=\"Close AI help\" class=\"rounded-lg p-2 text-gray-400 hover:bg-gray-800\"><lucide-icon icon=\"x\" size=\"17\"></lucide-icon></button></div>\n <div class=\"min-h-0 overflow-auto p-5\">\n <label class=\"sr-only\" for=\"workflow-ai-request\">Requested workflow change</label>\n <textarea id=\"workflow-ai-request\" bind-value=\"aiRequest\" placeholder=\"Example: Add a Docker cache volume to the build step.\" class=\"min-h-24 w-full rounded-xl border border-gray-700 bg-gray-950 p-3 text-sm text-gray-200 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"></textarea>\n <p class=\"mt-2 text-xs text-rose-300\" class-hidden=\"!aiError\">{{ aiError }}</p>\n <template if=\"aiDiffHtml\">\n <div class=\"mt-4\"><p class=\"mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500\">Suggested changes</p><pre class=\"max-h-[36rem] overflow-auto rounded-xl border border-gray-700 bg-gray-950 p-4 font-mono text-xs leading-6\" bind-innerhtml=\"aiDiffHtml\"></pre></div>\n </template>\n </div>\n <div class=\"flex items-center justify-end gap-2 border-t border-gray-800 px-5 py-3\"><button type=\"button\" on-click=\"closeAiHelp()\" class=\"rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Cancel</button><template if=\"aiDiffHtml\"><button type=\"button\" on-click=\"rejectAiSuggestion()\" class=\"rounded-lg border border-rose-500/50 px-3 py-2 text-sm text-rose-300 hover:bg-rose-500/10\">Reject</button><button type=\"button\" on-click=\"acceptAiSuggestion()\" class=\"rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400\">Accept suggestion</button></template><button type=\"button\" on-click=\"requestAiHelp()\" bind-disabled=\"aiLoading || !aiRequest.trim()\" class=\"rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400 disabled:opacity-50\">{{ aiLoading ? 'Thinking...' : 'Suggest' }}</button></div>\n </div>\n </div>\n </template>\n\n <template if=\"revisionDialogOpen\">\n <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-gray-950/80 p-4\" role=\"presentation\">\n <div\n class=\"flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-gray-900 shadow-2xl\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"revision-dialog-title\"\n >\n <div class=\"flex items-center justify-between border-b border-gray-800 px-4 py-3\">\n <div>\n <h2 id=\"revision-dialog-title\" class=\"font-semibold text-white\">Workflow revision {{ revisionNumber }}</h2>\n <p class=\"text-xs text-gray-500\">Read-only source snapshot</p>\n </div>\n <button type=\"button\" on-click=\"closeRevisionDialog()\" aria-label=\"Close revision dialog\" class=\"rounded-lg p-2 text-gray-400 outline-none hover:bg-gray-800 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <lucide-icon icon=\"x\" size=\"17\"></lucide-icon>\n </button>\n </div>\n <div class=\"min-h-0 flex-1 overflow-auto p-4\">\n <p class=\"mb-3 text-sm text-rose-300\" class-hidden=\"!revisionError\">{{ revisionError }}</p>\n <pre class=\"min-h-[20rem] overflow-auto rounded-lg border border-gray-700 bg-gray-950 p-4 font-mono text-xs leading-6\" bind-innerhtml=\"revisionDiffHtml\"></pre>\n </div>\n <div class=\"flex items-center justify-between border-t border-gray-800 px-4 py-3\">\n <button type=\"button\" on-click=\"navigateRevision(-1)\" bind-disabled=\"revisionLoading || revisionNumber <= 1\" class=\"inline-flex items-center gap-2 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 outline-none hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-40\">\n <lucide-icon icon=\"chevron-left\" size=\"16\"></lucide-icon>Previous\n </button>\n <button type=\"button\" on-click=\"navigateRevision(1)\" bind-disabled=\"revisionLoading || revisionNumber >= revision\" class=\"inline-flex items-center gap-2 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 outline-none hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-40\">\n Next<lucide-icon icon=\"chevron-right\" size=\"16\"></lucide-icon>\n </button>\n </div>\n </div>\n </div>\n </template>\n\n <section\n class=\"secrets-panel rounded-2xl border border-gray-800 bg-gray-900/80 p-4 shadow-xl shadow-black/10 sm:p-5\"\n aria-labelledby=\"secrets-title\"\n >\n <div class=\"mb-5 flex items-start justify-between gap-3\">\n <div class=\"flex items-start gap-3\">\n <span class=\"rounded-lg bg-indigo-500/10 p-2 text-indigo-300\"\n ><lucide-icon icon=\"key-round\" size=\"18\"></lucide-icon\n ></span>\n <div>\n <h2 id=\"secrets-title\" class=\"text-lg font-semibold text-white\">Secrets</h2>\n <p class=\"mt-0.5 text-sm text-gray-400\">Write-only credentials available to workflows.</p>\n </div>\n </div>\n <span\n class=\"rounded-full border border-gray-700 bg-gray-950 px-2.5 py-1 text-xs font-mono text-gray-400\"\n aria-label=\"Secret count\"\n >{{ secrets.length }}</span\n >\n </div>\n <details ref=\"secretForm\" class=\"mb-5 overflow-hidden rounded-xl border border-gray-800 bg-gray-950/50\">\n <summary class=\"flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-medium text-gray-300 outline-none hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <span>Add a secret</span>\n <lucide-icon icon=\"plus\" size=\"17\"></lucide-icon>\n </summary>\n <div class=\"space-y-3 border-t border-gray-800 p-4\">\n <p class=\"text-xs text-gray-500\">Saving an existing name replaces its encrypted value.</p>\n <label class=\"sr-only\" for=\"secret-name\">Secret name</label>\n <input\n id=\"secret-name\"\n bind-value=\"secretName\"\n on-input=\"setSecretName($event)\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 font-mono text-sm uppercase outline-none transition placeholder:text-gray-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n placeholder=\"NPM_TOKEN\"\n />\n <label class=\"inline-flex items-center gap-2 text-sm text-gray-300\">\n <input type=\"checkbox\" bind-checked=\"fileMode\" on-change=\"setFileMode($event)\" class=\"h-4 w-4 rounded border-gray-700 bg-gray-900 text-indigo-500 focus:ring-2 focus:ring-indigo-500/30\" />\n Binary file secret\n </label>\n <template if=\"!fileMode\">\n <label class=\"sr-only\" for=\"secret-value\">Text secret value</label>\n <input\n id=\"secret-value\"\n ref=\"secretValueInput\"\n bind-value=\"secretValue\"\n on-input=\"setSecretValue($event)\"\n type=\"password\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 font-mono text-sm outline-none transition placeholder:text-gray-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n placeholder=\"New secret value\"\n />\n </template>\n <template if=\"fileMode\">\n <label class=\"sr-only\" for=\"secret-file\">Binary secret file</label>\n <input\n id=\"secret-file\"\n ref=\"secretFileInput\"\n on-change=\"setSecretFile($event)\"\n type=\"file\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-xs text-gray-400 file:mr-3 file:rounded file:border-0 file:bg-gray-700 file:px-2 file:py-1 file:text-xs file:text-gray-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30\"\n />\n </template>\n <div>\n <button\n type=\"button\"\n aria-label=\"Save secret value\"\n title=\"Save secret value\"\n on-click=\"saveSecret()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center justify-center gap-2 rounded-lg border border-indigo-500/60 px-3 py-2.5 text-sm font-medium text-indigo-200 outline-none transition hover:bg-indigo-500/10 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-50\"\n >\n <lucide-icon icon=\"lock-keyhole\" size=\"16\"></lucide-icon>Save secret\n </button>\n </div>\n </div>\n </div>\n </details>\n <ul class=\"grid gap-2\" aria-label=\"Saved secrets\">\n <template for=\"name of secrets\">\n <li>\n <div class=\"flex min-h-14 items-center gap-2 rounded-xl border border-gray-800 bg-gray-950/50 px-3.5 py-3\">\n <button\n type=\"button\"\n on-click=\"selectSecret(name)\"\n class=\"group flex min-w-0 flex-1 items-center gap-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/50\"\n aria-label=\"Edit secret {{ name }}\"\n >\n <span\n class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-800 text-gray-500 group-hover:text-indigo-300\"\n ><lucide-icon icon=\"key-round\" size=\"15\"></lucide-icon\n ></span>\n <span class=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-200\">{{ name }}</span>\n <span class=\"text-xs text-gray-500\">Select</span>\n <lucide-icon icon=\"chevron-right\" size=\"16\" class=\"text-gray-600 transition group-hover:text-indigo-300\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n on-click=\"removeSecret(name)\"\n aria-label=\"Delete secret {{ name }}\"\n title=\"Delete secret\"\n class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-rose-300 outline-none transition hover:bg-rose-500/10 focus-visible:ring-2 focus-visible:ring-rose-400/60\"\n >\n <lucide-icon icon=\"trash\" size=\"15\"></lucide-icon>\n </button>\n </div>\n </li>\n </template>\n </ul>\n <div\n class=\"rounded-xl border border-dashed border-gray-700 px-4 py-8 text-center\"\n class-hidden=\"secrets.length > 0\"\n >\n <lucide-icon icon=\"key-round\" size=\"22\" class=\"mx-auto text-gray-600\"></lucide-icon>\n <p class=\"mt-2 text-sm font-medium text-gray-300\">No secrets configured</p>\n <p class=\"mt-1 text-xs text-gray-500\">Add one above to make it available to a workflow.</p>\n </div>\n </section>\n </main>\n\n <script setup src=\"/workflows-ui.mjs\"><\/script>\n </template>\n\n <script type=\"module\">\n import '@li3/web';\n <\/script>\n <script src=\"https://cdn.tailwindcss.com\"><\/script>\n </body>\n</html>\n";
|
|
12134
|
+
var Kh = "<template component=\"app-header\">\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <header class=\"mx-auto flex w-full max-w-[78rem] items-center justify-between gap-4 border-b border-gray-800 pb-5\">\n <div class=\"flex min-w-0 items-start gap-3\">\n <template if=\"back\">\n <a\n class=\"mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-800 text-gray-400 no-underline outline-none hover:border-indigo-500 hover:text-indigo-200 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n attr-href=\"back\"\n attr-aria-label=\"backLabel || 'Back'\"\n attr-title=\"backLabel || 'Back'\"\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width=\"17\"\n height=\"17\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n </a>\n </template>\n <div>\n <div class=\"text-[.7rem] font-bold uppercase tracking-[.16em] text-indigo-400\">Runner engine</div>\n <h1 class=\"mt-1 text-2xl font-bold tracking-tight text-white\">{{ title }}</h1>\n <template if=\"subtitle\"><p class=\"mt-1 text-xs text-gray-400\">{{ subtitle }}</p></template>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <template if=\"!authenticated\">\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/settings\"\n aria-label=\"Settings\"\n title=\"Settings\"\n >\n <lucide-icon icon=\"user-round\" size=\"16\"></lucide-icon>\n </a>\n </template>\n <template if=\"authenticated\">\n <span class=\"hidden text-xs text-gray-400 sm:inline\">{{ userName }}</span>\n <a class=\"text-xs text-indigo-300 hover:text-white\" href=\"/auth/logout\">Sign out</a>\n </template>\n <a\n class=\"rounded px-2 py-1 text-xs text-indigo-300 no-underline outline-none hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/preview\"\n target=\"_top\"\n >Preview</a\n >\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/help\"\n aria-label=\"Help\"\n title=\"Help\"\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n <path d=\"M9.6 9a2.5 2.5 0 1 1 4.2 1.8c-1.2 1-1.8 1.4-1.8 2.7\"></path>\n <path d=\"M12 17h.01\"></path>\n </svg>\n </a>\n <template if=\"authenticated\">\n <a\n class=\"inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-full border border-gray-700 text-indigo-200 no-underline outline-none hover:border-indigo-500 hover:bg-gray-900 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n href=\"/settings\"\n aria-label=\"Settings\"\n title=\"Settings\"\n >\n <template if=\"userPhoto\"><img attr-src=\"userPhoto\" alt=\"\" class=\"h-full w-full object-cover\" /></template>\n <template if=\"!userPhoto\"><lucide-icon icon=\"circle-user-round\" size=\"16\"></lucide-icon></template>\n </a>\n </template>\n </div>\n </header>\n <script setup src=\"/app-header.mjs\"><\/script>\n</template>\n", qh = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#030712\" />\n <link rel=\"manifest\" href=\"/manifest.webmanifest\" />\n <link rel=\"icon\" href=\"/app-icon.svg\" type=\"image/svg+xml\" />\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\", \"ansi_up\": \"https://esm.sh/ansi_up@6.0.6\", \"diff\": \"https://unpkg.com/diff@9.0.0/libesm/index.js\", \"marked\": \"https://cdn.jsdelivr.net/npm/marked@18.0.12/lib/marked.esm.js\" } }\n <\/script>\n <link rel=\"component\" href=\"/app-router.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-editor.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-block.html\" />\n <title>On Workflow Runner</title>\n </head>\n <body class=\"min-h-screen bg-gray-950 text-gray-100 font-sans\">\n <template app>\n <app-router></app-router>\n </template>\n <script type=\"module\">import '@li3/web';<\/script>\n <script src=\"https://cdn.tailwindcss.com\"><\/script>\n </body>\n</html>\n", Jh = "<template component=\"app-router\">\n <div ref=\"outlet\" aria-live=\"polite\"></div>\n <script setup src=\"/app-router.mjs\"><\/script>\n</template>\n", Yh = "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta name=\"theme-color\" content=\"#030712\" />\n <meta name=\"mobile-web-app-capable\" content=\"yes\" />\n <link rel=\"manifest\" href=\"/manifest.webmanifest\" />\n <link rel=\"icon\" href=\"/app-icon.svg\" type=\"image/svg+xml\" />\n <title>Runner Workflow Management</title>\n <script type=\"importmap\">\n { \"imports\": { \"@app/\": \"/\", \"@li3/\": \"https://at-li3.static.apphor.de/\", \"diff\": \"https://unpkg.com/diff@9.0.0/libesm/index.js\" } }\n <\/script>\n <style>\n body[data-page='list'] .editor-panel {\n display: none;\n }\n body[data-page='workflows'] .editor-panel,\n body[data-page='workflows'] .secrets-panel,\n body[data-page='secrets'] .workflow-list,\n body[data-page='secrets'] .editor-panel {\n display: none;\n }\n body[data-page='editor'] .workflow-list,\n body[data-page='editor'] .secrets-panel {\n display: none;\n }\n </style>\n </head>\n <body data-page=\"__WORKFLOW_PAGE__\" class=\"min-h-screen bg-gray-950 p-4 font-sans text-gray-100 md:p-6\">\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-editor.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/code-block.html\" />\n <link rel=\"component\" href=\"https://sodium.static.apphor.de/lucide-icon.html\" />\n <link rel=\"component\" href=\"/app-header.html\" />\n\n <template app>\n <main class=\"mx-auto max-w-6xl space-y-5 py-6\">\n <template if=\"page === 'secrets'\"><app-header title=\"Secrets\" subtitle=\"Write-only credentials available to workflows\" back=\"/runs\" back-label=\"Back to dashboard\"></app-header></template>\n <template if=\"page !== 'secrets'\"><app-header title=\"Workflow control room\" subtitle=\"Draft, validate, and publish revisioned YAML definitions\" back=\"/runs\" back-label=\"Back to dashboard\"></app-header></template>\n <nav class=\"flex flex-wrap gap-1 rounded-xl border border-gray-800 bg-gray-900/70 p-1\" aria-label=\"Settings navigation\">\n <a href=\"/settings/workflows\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\" bind-class=\"page === 'workflows' || page === 'editor' ? 'bg-gray-800.text-white' : ''\">Workflows</a>\n <a href=\"/settings/secrets\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\" bind-class=\"page === 'secrets' ? 'bg-gray-800.text-white' : ''\">Secrets</a>\n <a href=\"/settings/tokens\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">API tokens</a>\n <a href=\"/settings/notifications\" class=\"rounded-lg px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Notifications</a>\n </nav>\n\n <template if=\"notice\">\n <div\n role=\"status\"\n class=\"flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm\"\n bind-class=\"noticeError ? 'border-rose-500/40 bg-rose-500/10 text-rose-100' : 'border-emerald-500/40 bg-emerald-500/10 text-emerald-100'\"\n >\n <lucide-icon bind-icon=\"noticeError ? 'circle-alert' : 'circle-check'\" size=\"17\"></lucide-icon>\n <span>{{ notice }}</span>\n </div>\n </template>\n\n <section id=\"workflow-layout\" class=\"space-y-5\">\n <nav\n class=\"workflow-list rounded-2xl border border-gray-800 bg-gray-900/80 p-4 shadow-xl shadow-black/10\"\n aria-labelledby=\"workflow-list-title\"\n >\n <div class=\"mb-4 flex items-end justify-between gap-3 border-b border-gray-800 pb-4\">\n <div>\n <p class=\"text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-400\">Definitions</p>\n <h2 id=\"workflow-list-title\" class=\"mt-1 text-lg font-semibold text-white\">Workflows</h2>\n </div>\n <a\n href=\"/workflows/new\"\n class=\"inline-flex items-center gap-2 rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white outline-none transition hover:bg-indigo-400 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <lucide-icon icon=\"plus\" size=\"16\"></lucide-icon>\n New workflow\n </a>\n </div>\n <ul class=\"grid gap-2\" aria-label=\"Workflow definitions\">\n <template for=\"workflow of workflows\">\n <li>\n <a\n attr-href=\"'/workflows/' + workflow.id\"\n class=\"group flex min-h-16 items-center gap-3 rounded-xl border border-gray-800 bg-gray-950/50 px-3.5 py-3 text-left text-sm text-gray-300 outline-none transition hover:border-indigo-500/50 hover:bg-indigo-500/10 focus-visible:border-indigo-400 focus-visible:ring-2 focus-visible:ring-indigo-400/50\"\n >\n <span\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition group-hover:bg-indigo-500/15 group-hover:text-indigo-300\"\n >\n <lucide-icon icon=\"workflow\" size=\"17\"></lucide-icon>\n </span>\n <span class=\"min-w-0 flex-1\">\n <span class=\"block truncate text-base font-semibold text-gray-100\">{{ workflow.name }}</span>\n <span class=\"mt-0.5 block truncate font-mono text-[11px] text-gray-500\">{{ workflow.id }}</span>\n </span>\n <span\n class=\"rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-wide\"\n bind-class=\"workflow.status === 'published' ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300' : workflow.status === 'archived' ? 'border-gray-700 bg-gray-800 text-gray-500' : 'border-amber-500/30 bg-amber-500/10 text-amber-300'\"\n >{{ workflow.status }}</span\n >\n <lucide-icon\n icon=\"arrow-up-right\"\n size=\"16\"\n class=\"shrink-0 text-gray-600 transition group-hover:text-indigo-300\"\n ></lucide-icon>\n </a>\n </li>\n </template>\n </ul>\n <div\n class=\"rounded-xl border border-dashed border-gray-700 px-4 py-8 text-center\"\n class-hidden=\"workflows.length > 0\"\n >\n <lucide-icon icon=\"workflow\" size=\"22\" class=\"mx-auto text-gray-600\"></lucide-icon>\n <p class=\"mt-2 text-sm font-medium text-gray-300\">No workflows yet</p>\n <p class=\"mt-1 text-xs text-gray-500\">Create a definition to start automating jobs.</p>\n </div>\n </nav>\n\n <section\n class=\"editor-panel overflow-hidden rounded-xl border border-gray-800 bg-gray-900/80 shadow-xl shadow-black/10\"\n >\n <div class=\"border-b border-gray-800 px-4 pt-3 sm:px-5\">\n <a\n href=\"/workflows\"\n class=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-gray-400 outline-none transition hover:bg-gray-800 hover:text-gray-100 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <lucide-icon icon=\"arrow-left\" size=\"14\"></lucide-icon>\n Back to workflows\n </a>\n </div>\n <div class=\"border-b border-gray-800 bg-gray-900 px-4 py-4 sm:px-5\">\n <div class=\"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between\">\n <label class=\"block max-w-xl flex-1 text-xs font-semibold uppercase tracking-wider text-gray-400\"\n >Workflow ID\n <input\n bind-value=\"workflowId\"\n on-input=\"setWorkflowId($event)\"\n bind-disabled=\"selectedId\"\n aria-describedby=\"workflow-id-help\"\n class=\"mt-2 w-full rounded-lg border border-gray-700 bg-gray-950 px-3 py-2.5 font-mono text-sm normal-case tracking-normal text-white outline-none transition focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20\"\n placeholder=\"derived-from-workflow-name\"\n />\n <span\n id=\"workflow-id-help\"\n class=\"mt-1 block text-[11px] font-normal normal-case tracking-normal text-gray-500\"\n >The ID becomes permanent after the first save.</span\n >\n </label>\n <label class=\"inline-flex items-center gap-2 text-sm text-gray-300\">\n <input\n type=\"checkbox\"\n bind-checked=\"enabled\"\n on-change=\"setEnabled($event)\"\n class=\"h-4 w-4 rounded border-gray-700 bg-gray-950 text-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n />\n Enabled\n </label>\n <div class=\"flex flex-wrap gap-2\" class-hidden=\"readOnly\">\n <button type=\"button\" aria-label=\"Get AI workflow help\" title=\"Get AI workflow help\" on-click=\"openAiHelp()\" class=\"inline-flex items-center gap-2 rounded-lg border border-indigo-500/50 px-3 py-2.5 text-sm font-medium text-indigo-200 outline-none hover:bg-indigo-500/10 focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <lucide-icon icon=\"sparkles\" size=\"16\"></lucide-icon><span class=\"hidden sm:inline\">AI help</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Save workflow draft\"\n title=\"Save workflow draft\"\n on-click=\"save()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center gap-2 rounded-lg bg-indigo-500 px-3 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-400 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"save\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Save draft</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Publish workflow\"\n title=\"Publish workflow\"\n on-click=\"publish()\"\n bind-disabled=\"busy || !selectedId || source !== savedSource || enabled !== savedEnabled\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-emerald-500/50 px-3 py-2.5 text-sm font-medium text-emerald-300 transition hover:bg-emerald-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"rocket\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Publish</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Run workflow now\"\n title=\"Run saved workflow draft now\"\n on-click=\"runNow()\"\n bind-disabled=\"busy || !selectedId || source !== savedSource || !validation.valid\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-sky-500/50 px-3 py-2.5 text-sm font-medium text-sky-300 transition hover:bg-sky-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"play\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Run now</span>\n </button>\n <button\n type=\"button\"\n aria-label=\"Delete workflow\"\n title=\"Delete workflow\"\n on-click=\"remove()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-rose-500/50 px-3 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-500/10 disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon icon=\"trash\" size=\"16\"></lucide-icon>\n <span class=\"hidden sm:inline\">Delete</span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"p-3 sm:p-5\">\n <div class=\"mb-2 flex items-center justify-between px-1 text-xs text-gray-500\">\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Validate workflow\"\n title=\"Validate workflow\"\n on-click=\"validate(1)\"\n bind-disabled=\"validation.running\"\n bind-class=\"{ 'hidden': readOnly, 'text-emerald-400': validation.valid, 'text-rose-400': !validation.valid }\"\n class=\"disabled:cursor-not-allowed disabled:opacity-50\"\n >\n <lucide-icon\n class=\"inline-block\"\n bind-icon=\"validation.running ? 'loader-circle' : (validation.valid ? 'circle-check' : 'circle-alert')\"\n bind-class=\"validation.running ? 'animate-spin' : ''\"\n size=\"16\"\n ></lucide-icon>\n </button>\n <span class=\"font-medium\" bind-class=\"validation.error ? 'bg-rose-500/10 text-rose-100' : ''\"\n >{{ validation.error || '' }}</span\n >\n </div>\n <template if=\"revision\">\n <button\n type=\"button\"\n on-click=\"openRevisionDialog()\"\n class=\"font-mono text-indigo-300 outline-none hover:underline focus-visible:rounded focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >Revision {{ revision }}</button>\n </template>\n <template if=\"!revision\"><span class=\"font-mono\">Unsaved draft</span></template>\n </div>\n <template if=\"readOnly\">\n <code-block\n language=\"yaml\"\n theme=\"atom-one-dark\"\n class=\"block h-[calc(100vh-23rem)] min-h-[28rem] overflow-auto rounded-lg border border-gray-700 bg-gray-950 p-4\"\n bind-source=\"source\"\n ></code-block>\n </template>\n <template if=\"!readOnly\">\n <code-editor\n id=\"source-yaml\"\n language=\"yaml\"\n theme=\"atom-one-dark\"\n nostatus=\"true\"\n class=\"block h-[calc(100vh-23rem)] min-h-[28rem] overflow-hidden rounded-lg border border-gray-700 bg-gray-950\"\n bind-value=\"source\"\n on-change=\"setSource($event.detail)\"\n ></code-editor>\n </template>\n <details\n class=\"mt-4 overflow-hidden rounded-xl border border-gray-800 bg-gray-950/50\"\n on-toggle=\"loadHelp($event)\"\n >\n <summary\n class=\"flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-medium text-gray-300 outline-none transition hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-indigo-400/60\"\n >\n <span class=\"inline-flex items-center gap-2\"\n ><lucide-icon icon=\"circle-question-mark\" size=\"16\"></lucide-icon>Syntax</span\n >\n <span class=\"ml-2 text-xs font-normal text-gray-500\">Reference, tutorials, and examples</span>\n </summary>\n <div\n ref=\"helpContent\"\n class=\"max-h-[38rem] overflow-y-auto border-t border-gray-800 bg-gray-950 px-4 py-5\"\n role=\"region\"\n aria-label=\"Workflow syntax help\"\n aria-live=\"polite\"\n >\n <p class=\"text-sm text-gray-500\">Expand to load the workflow syntax reference.</p>\n </div>\n </details>\n </div>\n </section>\n </section>\n\n <template if=\"aiDialogOpen\">\n <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-gray-950/80 p-4\" role=\"presentation\">\n <div class=\"flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-gray-900 shadow-2xl\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"workflow-ai-title\">\n <div class=\"flex items-start justify-between gap-3 border-b border-gray-800 px-5 py-4\"><div><h2 id=\"workflow-ai-title\" class=\"text-lg font-semibold text-white\">AI workflow help</h2><p class=\"mt-1 text-sm text-gray-400\">Describe the change you want. The suggestion will not modify the editor until you accept it.</p></div><button type=\"button\" on-click=\"closeAiHelp()\" aria-label=\"Close AI help\" class=\"rounded-lg p-2 text-gray-400 hover:bg-gray-800\"><lucide-icon icon=\"x\" size=\"17\"></lucide-icon></button></div>\n <div class=\"min-h-0 overflow-auto p-5\">\n <label class=\"sr-only\" for=\"workflow-ai-request\">Requested workflow change</label>\n <textarea id=\"workflow-ai-request\" bind-value=\"aiRequest\" placeholder=\"Example: Add a Docker cache volume to the build step.\" class=\"min-h-24 w-full rounded-xl border border-gray-700 bg-gray-950 p-3 text-sm text-gray-200 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"></textarea>\n <p class=\"mt-2 text-xs text-rose-300\" class-hidden=\"!aiError\">{{ aiError }}</p>\n <template if=\"aiDiffHtml\">\n <div class=\"mt-4\"><p class=\"mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500\">Suggested changes</p><pre class=\"max-h-[36rem] overflow-auto rounded-xl border border-gray-700 bg-gray-950 p-4 font-mono text-xs leading-6\" bind-innerhtml=\"aiDiffHtml\"></pre></div>\n </template>\n </div>\n <div class=\"flex items-center justify-end gap-2 border-t border-gray-800 px-5 py-3\"><button type=\"button\" on-click=\"closeAiHelp()\" class=\"rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-300 hover:bg-gray-800\">Cancel</button><template if=\"aiDiffHtml\"><button type=\"button\" on-click=\"rejectAiSuggestion()\" class=\"rounded-lg border border-rose-500/50 px-3 py-2 text-sm text-rose-300 hover:bg-rose-500/10\">Reject</button><button type=\"button\" on-click=\"acceptAiSuggestion()\" class=\"rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400\">Accept suggestion</button></template><button type=\"button\" on-click=\"requestAiHelp()\" bind-disabled=\"aiLoading || !aiRequest.trim()\" class=\"rounded-lg bg-indigo-500 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-400 disabled:opacity-50\">{{ aiLoading ? 'Thinking...' : 'Suggest' }}</button></div>\n </div>\n </div>\n </template>\n\n <template if=\"revisionDialogOpen\">\n <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-gray-950/80 p-4\" role=\"presentation\">\n <div\n class=\"flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-gray-900 shadow-2xl\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"revision-dialog-title\"\n >\n <div class=\"flex items-center justify-between border-b border-gray-800 px-4 py-3\">\n <div>\n <h2 id=\"revision-dialog-title\" class=\"font-semibold text-white\">Workflow revision {{ revisionNumber }}</h2>\n <p class=\"text-xs text-gray-500\">Read-only source snapshot</p>\n </div>\n <button type=\"button\" on-click=\"closeRevisionDialog()\" aria-label=\"Close revision dialog\" class=\"rounded-lg p-2 text-gray-400 outline-none hover:bg-gray-800 hover:text-white focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <lucide-icon icon=\"x\" size=\"17\"></lucide-icon>\n </button>\n </div>\n <div class=\"min-h-0 flex-1 overflow-auto p-4\">\n <p class=\"mb-3 text-sm text-rose-300\" class-hidden=\"!revisionError\">{{ revisionError }}</p>\n <pre class=\"min-h-[20rem] overflow-auto rounded-lg border border-gray-700 bg-gray-950 p-4 font-mono text-xs leading-6\" bind-innerhtml=\"revisionDiffHtml\"></pre>\n </div>\n <div class=\"flex items-center justify-between border-t border-gray-800 px-4 py-3\">\n <button type=\"button\" on-click=\"navigateRevision(-1)\" bind-disabled=\"revisionLoading || revisionNumber <= 1\" class=\"inline-flex items-center gap-2 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 outline-none hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-40\">\n <lucide-icon icon=\"chevron-left\" size=\"16\"></lucide-icon>Previous\n </button>\n <button type=\"button\" on-click=\"navigateRevision(1)\" bind-disabled=\"revisionLoading || revisionNumber >= revision\" class=\"inline-flex items-center gap-2 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 outline-none hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-40\">\n Next<lucide-icon icon=\"chevron-right\" size=\"16\"></lucide-icon>\n </button>\n </div>\n </div>\n </div>\n </template>\n\n <section\n class=\"secrets-panel rounded-2xl border border-gray-800 bg-gray-900/80 p-4 shadow-xl shadow-black/10 sm:p-5\"\n aria-labelledby=\"secrets-title\"\n >\n <div class=\"mb-5 flex items-start justify-between gap-3\">\n <div class=\"flex items-start gap-3\">\n <span class=\"rounded-lg bg-indigo-500/10 p-2 text-indigo-300\"\n ><lucide-icon icon=\"key-round\" size=\"18\"></lucide-icon\n ></span>\n <div>\n <h2 id=\"secrets-title\" class=\"text-lg font-semibold text-white\">Secrets</h2>\n <p class=\"mt-0.5 text-sm text-gray-400\">Write-only credentials available to workflows.</p>\n </div>\n </div>\n <span\n class=\"rounded-full border border-gray-700 bg-gray-950 px-2.5 py-1 text-xs font-mono text-gray-400\"\n aria-label=\"Secret count\"\n >{{ secrets.length }}</span\n >\n </div>\n <details ref=\"secretForm\" class=\"mb-5 overflow-hidden rounded-xl border border-gray-800 bg-gray-950/50\">\n <summary class=\"flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-medium text-gray-300 outline-none hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-indigo-400/60\">\n <span>Add a secret</span>\n <lucide-icon icon=\"plus\" size=\"17\"></lucide-icon>\n </summary>\n <div class=\"space-y-3 border-t border-gray-800 p-4\">\n <p class=\"text-xs text-gray-500\">Saving an existing name replaces its encrypted value.</p>\n <label class=\"sr-only\" for=\"secret-name\">Secret name</label>\n <input\n id=\"secret-name\"\n bind-value=\"secretName\"\n on-input=\"setSecretName($event)\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 font-mono text-sm uppercase outline-none transition placeholder:text-gray-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n placeholder=\"NPM_TOKEN\"\n />\n <label class=\"inline-flex items-center gap-2 text-sm text-gray-300\">\n <input type=\"checkbox\" bind-checked=\"fileMode\" on-change=\"setFileMode($event)\" class=\"h-4 w-4 rounded border-gray-700 bg-gray-900 text-indigo-500 focus:ring-2 focus:ring-indigo-500/30\" />\n Binary file secret\n </label>\n <template if=\"!fileMode\">\n <label class=\"sr-only\" for=\"secret-value\">Text secret value</label>\n <input\n id=\"secret-value\"\n ref=\"secretValueInput\"\n bind-value=\"secretValue\"\n on-input=\"setSecretValue($event)\"\n type=\"password\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 font-mono text-sm outline-none transition placeholder:text-gray-600 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30\"\n placeholder=\"New secret value\"\n />\n </template>\n <template if=\"fileMode\">\n <label class=\"sr-only\" for=\"secret-file\">Binary secret file</label>\n <input\n id=\"secret-file\"\n ref=\"secretFileInput\"\n on-change=\"setSecretFile($event)\"\n type=\"file\"\n class=\"rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-xs text-gray-400 file:mr-3 file:rounded file:border-0 file:bg-gray-700 file:px-2 file:py-1 file:text-xs file:text-gray-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30\"\n />\n </template>\n <div>\n <button\n type=\"button\"\n aria-label=\"Save secret value\"\n title=\"Save secret value\"\n on-click=\"saveSecret()\"\n bind-disabled=\"busy\"\n class=\"inline-flex items-center justify-center gap-2 rounded-lg border border-indigo-500/60 px-3 py-2.5 text-sm font-medium text-indigo-200 outline-none transition hover:bg-indigo-500/10 focus-visible:ring-2 focus-visible:ring-indigo-400/60 disabled:opacity-50\"\n >\n <lucide-icon icon=\"lock-keyhole\" size=\"16\"></lucide-icon>Save secret\n </button>\n </div>\n </div>\n </details>\n <ul class=\"grid gap-2\" aria-label=\"Saved secrets\">\n <template for=\"name of secrets\">\n <li>\n <div class=\"flex min-h-14 items-center gap-2 rounded-xl border border-gray-800 bg-gray-950/50 px-3.5 py-3\">\n <button\n type=\"button\"\n on-click=\"selectSecret(name)\"\n class=\"group flex min-w-0 flex-1 items-center gap-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/50\"\n aria-label=\"Edit secret {{ name }}\"\n >\n <span\n class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-800 text-gray-500 group-hover:text-indigo-300\"\n ><lucide-icon icon=\"key-round\" size=\"15\"></lucide-icon\n ></span>\n <span class=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-200\">{{ name }}</span>\n <span class=\"text-xs text-gray-500\">Select</span>\n <lucide-icon icon=\"chevron-right\" size=\"16\" class=\"text-gray-600 transition group-hover:text-indigo-300\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n on-click=\"removeSecret(name)\"\n aria-label=\"Delete secret {{ name }}\"\n title=\"Delete secret\"\n class=\"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-rose-300 outline-none transition hover:bg-rose-500/10 focus-visible:ring-2 focus-visible:ring-rose-400/60\"\n >\n <lucide-icon icon=\"trash\" size=\"15\"></lucide-icon>\n </button>\n </div>\n </li>\n </template>\n </ul>\n <div\n class=\"rounded-xl border border-dashed border-gray-700 px-4 py-8 text-center\"\n class-hidden=\"secrets.length > 0\"\n >\n <lucide-icon icon=\"key-round\" size=\"22\" class=\"mx-auto text-gray-600\"></lucide-icon>\n <p class=\"mt-2 text-sm font-medium text-gray-300\">No secrets configured</p>\n <p class=\"mt-1 text-xs text-gray-500\">Add one above to make it available to a workflow.</p>\n </div>\n </section>\n </main>\n\n <script setup src=\"/workflows-ui.mjs\"><\/script>\n </template>\n\n <script type=\"module\">\n import '@li3/web';\n <\/script>\n <script src=\"https://cdn.tailwindcss.com\"><\/script>\n </body>\n</html>\n";
|
|
12130
12135
|
//#endregion
|
|
12131
12136
|
//#region src/workflows-ui.ts
|
|
12132
12137
|
function Xh(e, t = "", n) {
|
|
@@ -12275,7 +12280,7 @@ function ng(e) {
|
|
|
12275
12280
|
}
|
|
12276
12281
|
//#endregion
|
|
12277
12282
|
//#region src/api-client.mjs?raw
|
|
12278
|
-
var rg = "let token = sessionStorage.getItem('runner-api-token') || '';\nlet expiresAt = token ? Number.MAX_SAFE_INTEGER : 0;\n\nconst rawFetch = window.fetch.bind(window);\n\nexport async function loadToken() {\n if (token && expiresAt > Date.now() + 30_000) return token;\n const response = await rawFetch('/api/auth/token', {\n headers: { accept: 'application/json' },\n });\n if (!response.ok) {\n if (response.status === 401) {\n // When /api/auth/token returns 401, clear OIDC in-memory token state and redirect\n // to login so the user can re-authenticate. This even applies when there was\n // no prior cached token, fixing the reported symptom where 401 was silently\n // swallowed and settings APIs stayed broken.\n token = '';\n expiresAt = 0;\n if (sessionStorage.getItem('runner-api-token')) {\n sessionStorage.removeItem('runner-api-token');\n }\n const returnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n window.location.assign(`/auth/login?url=${encodeURIComponent(returnTo)}`);\n }\n return '';\n }\n const data = await response.json();\n token = data.access_token || '';\n expiresAt = Number(data.expires_at || 0);\n return token;\n}\n\nexport async function apiFetch(input, init = {}) {\n const target = new URL(input, window.location.href);\n if (\n target.origin !== window.location.origin ||\n (!target.pathname.startsWith('/api/') && !target.pathname.startsWith('/restart/'))\n ) {\n return rawFetch(input, init);\n }\n const headers = new Headers(init.headers);\n const accessToken = await loadToken();\n if (accessToken) headers.set('authorization', `Bearer ${accessToken}`);\n return rawFetch(input, { ...init, headers });\n}\n\nexport function setApiToken(value) {\n token = value || '';\n expiresAt = token ? Number.MAX_SAFE_INTEGER : 0;\n if (token) sessionStorage.setItem('runner-api-token', token);\n else sessionStorage.removeItem('runner-api-token');\n}\n", ig = "import { defineProp, onInit, ref } from '@li3/web';\n\nexport default function () {\n const authConfigured = ref(false);\n const authenticated = ref(false);\n const userName = ref('');\n const userPhoto = ref('');\n onInit(async () => {\n try {\n const response = await fetch('/api/auth/session');\n if (!response.ok) return;\n const session = await response.json();\n authConfigured.value = session.configured;\n authenticated.value = session.authenticated;\n userName.value = session.user?.name || session.user?.email || '';\n userPhoto.value = session.user?.photo || '';\n } catch {}\n });\n return { title: defineProp('title'), subtitle: defineProp('subtitle'), back: defineProp('back'), backLabel: defineProp('back-label'), authConfigured, authenticated, userName, userPhoto };\n}\n", ag = "import { getElement, load, onDestroy, onInit, templateRef } from '@li3/web';\n\nexport default function () {\n const outlet = templateRef('outlet');\n let navigating = false;\n const route = () => {\n const url = new URL(window.location.href);\n const path = url.pathname;\n if (path === '/' || path === '/runs')\n return { component: 'page-dashboard', url: '/pages/dashboard.html', page: 'dashboard' };\n if (path.match(/^\\/runs\\/\\d+$/))\n return { component: 'page-run', url: `/pages/run.html?jobId=${path.split('/').pop()}`, page: 'run' };\n if (path === '/help') return { component: 'page-help', url: '/pages/help.html', page: 'help' };\n if (path === '/settings/workflows')\n return { component: 'page-workflows', url: '/pages/workflows.html?page=workflows', page: 'workflows' };\n if (path === '/settings/secrets')\n return { component: 'page-secrets', url: '/pages/workflows.html?page=secrets', page: 'secrets' };\n if (path === '/settings/tokens')\n return { component: 'page-settings', url: '/pages/settings.html?page=tokens', page: 'tokens' };\n if (path === '/settings/notifications')\n return { component: 'page-settings', url: '/pages/settings.html?page=notifications', page: 'notifications' };\n if (path === '/settings/workers')\n return { component: 'page-settings', url: '/pages/settings.html?page=workers', page: 'workers' };\n if (path === '/settings' || path === '/workflows')\n return { component: 'page-workflows', url: '/pages/workflows.html?page=workflows', page: 'workflows' };\n const editor = path.match(/^\\/settings\\/workflows\\/(new|[a-z0-9-]+)$/);\n if (editor)\n return {\n component: 'page-workflow-editor',\n url: `/pages/workflows.html?page=editor&id=${editor[1]}${url.searchParams.get('revision') ? `&revision=${url.searchParams.get('revision')}` : ''}`,\n page: 'editor',\n };\n const legacyEditor = path.match(/^\\/workflows\\/(new|[a-z0-9-]+)$/);\n if (legacyEditor)\n return {\n component: 'page-workflow-editor',\n url: `/pages/workflows.html?page=editor&id=${legacyEditor[1]}${url.searchParams.get('revision') ? `&revision=${url.searchParams.get('revision')}` : ''}`,\n page: 'editor',\n };\n return { component: 'page-not-found', page: 'not-found' };\n };\n const navigate = async (replace = false) => {\n if (navigating) return;\n navigating = true;\n try {\n const current = route();\n document.body.dataset.page = current.page;\n if (current.page === 'not-found') {\n outlet.value.innerHTML =\n '<main class=\"mx-auto max-w-4xl p-8\"><h1 class=\"text-xl font-semibold\">404 — Page not found</h1><p class=\"mt-2 text-sm\">The page you are looking for does not exist. <a href=\"/\">Go home</a> or <a href=\"/runs\">view runs</a>.</p></main>';\n } else {\n await load(current.url);\n outlet.value.replaceChildren(document.createElement(current.component));\n }\n if (replace) history.replaceState(null, '', window.location.href);\n } catch (error) {\n outlet.value.innerHTML = `<main class=\"mx-auto max-w-4xl p-8\"><h1 class=\"text-xl font-semibold text-white\">Unable to load page</h1><p class=\"mt-2 text-sm text-rose-300\">${String(error.message || error)}</p></main>`;\n } finally {\n navigating = false;\n }\n };\n const handleClick = (event) => {\n const anchor = event.target.closest?.('a');\n if (!anchor || anchor.target || anchor.hasAttribute('download')) return;\n const target = new URL(anchor.href, window.location.href);\n if (\n target.origin !== window.location.origin ||\n !target.pathname.startsWith('/') ||\n target.pathname.startsWith('/auth/')\n )\n return;\n if (target.pathname.startsWith('/api/') || target.pathname.startsWith('/webhooks/')) return;\n if (target.pathname === window.location.pathname && target.hash) return;\n event.preventDefault();\n history.pushState(null, '', `${target.pathname}${target.search}${target.hash}`);\n void navigate();\n };\n const element = getElement();\n onInit(() => {\n element.addEventListener('click', handleClick);\n window.addEventListener('popstate', navigate);\n void navigate(true);\n });\n onDestroy(() => {\n element.removeEventListener('click', handleClick);\n window.removeEventListener('popstate', navigate);\n });\n return {};\n}\n", og = "import { onDestroy, onInit, ref } from '@li3/web';\nimport { apiFetch } from '@app/api-client.mjs';\n\nexport default function setup() {\n const jobs = ref([]), refreshError = ref(false), hasMore = ref(false), loadingMore = ref(false);\n const filter = ref(''), activeFilter = ref(''), pushConfigured = ref(false);\n const notificationsSupported = ref('Notification' in window && 'serviceWorker' in navigator);\n const notificationsEnabled = ref(notificationsSupported.value && Notification.permission === 'granted' && localStorage.getItem('runner-notifications') === 'enabled');\n const notificationNotice = ref('');\n let refreshTimer, eventSource, refreshing = false, refreshPending = false, searchInProgress = false, refreshGeneration = 0;\n const upper = (value) => String(value || '').toUpperCase();\n const terminalStatuses = new Set(['success', 'failed', 'cancelled']);\n const notifyCompletedJob = async (job) => {\n if (!notificationsEnabled.value || pushConfigured.value || !['success', 'failed'].includes(job.status)) return;\n try {\n const registration = await navigator.serviceWorker.ready;\n await registration.showNotification(job.status === 'success' ? `Job #${job.id} succeeded` : `Job #${job.id} failed`, { body: `${job.workflowId} finished with status ${job.status}.`, icon: '/app-icon.svg', badge: '/app-icon.svg', tag: `runner-job-${job.id}`, renotify: true, data: { url: `/runs/${job.id}` } });\n } catch (error) { console.error('Unable to show job notification', error); }\n };\n const urlBase64ToUint8Array = (value) => { const padding = '='.repeat((4 - (value.length % 4)) % 4); const raw = atob((value + padding).replace(/-/g, '+').replace(/_/g, '/')); return Uint8Array.from([...raw].map((character) => character.charCodeAt(0))); };\n const enablePushNotifications = async () => {\n try {\n if (!notificationsSupported.value) return;\n const response = await apiFetch('/api/push/public-key', { headers: { accept: 'application/json' } });\n if (!response.ok) return;\n const { publicKey } = await response.json(); pushConfigured.value = true;\n const registration = await navigator.serviceWorker.ready;\n const subscription = (await registration.pushManager.getSubscription()) || await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(publicKey) });\n const saved = await apiFetch('/api/push/subscriptions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(subscription) });\n if (!saved.ok) throw new Error(`Push subscription failed: ${saved.status}`);\n } catch (error) { console.error('Unable to enable background notifications', error); }\n };\n const disablePushNotifications = async () => {\n try { const subscription = await (await navigator.serviceWorker.ready).pushManager.getSubscription(); if (!subscription) return; await apiFetch('/api/push/subscriptions', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ endpoint: subscription.endpoint }) }); await subscription.unsubscribe(); }\n catch (error) { console.error('Unable to disable background notifications', error); }\n };\n const toggleNotifications = async () => {\n if (notificationsEnabled.value) { notificationsEnabled.value = false; localStorage.removeItem('runner-notifications'); await disablePushNotifications(); notificationNotice.value = 'Job notifications are paused on this device.'; return; }\n if (Notification.permission === 'denied') { notificationNotice.value = 'Notifications are blocked. Allow them in this site’s Android browser settings.'; return; }\n notificationsEnabled.value = (await Notification.requestPermission()) === 'granted';\n if (notificationsEnabled.value) { localStorage.setItem('runner-notifications', 'enabled'); await enablePushNotifications(); notificationNotice.value = 'Notifications enabled. Background delivery is available when server push is configured.'; } else notificationNotice.value = 'Notification permission was not granted.';\n };\n const refreshJobs = async (isSearch = false) => {\n if (searchInProgress && !isSearch) return; if (refreshing && !isSearch) { refreshPending = true; return; }\n refreshing = true; const generation = refreshGeneration;\n try {\n const activeIds = jobs.value.filter((job) => !terminalStatuses.has(job.status)).map((job) => Number(job.id));\n const knownIds = jobs.value.map((job) => Number(job.id));\n const afterId = activeIds.length ? Math.max(0, Math.min(...activeIds) - 1) : knownIds.length ? Math.max(...knownIds) : null;\n const filterQuery = activeFilter.value ? `&filter=${encodeURIComponent(activeFilter.value)}` : '';\n const url = afterId === null ? `/api/jobs?limit=100${filterQuery}` : `/api/jobs?afterId=${afterId}&limit=100${filterQuery}`;\n const response = await apiFetch(url, { headers: { accept: 'application/json' } }); if (!response.ok) throw new Error(`Dashboard refresh failed: ${response.status}`);\n const data = await response.json(); if (generation !== refreshGeneration) return; hasMore.value = data.hasMore;\n const previousStatuses = new Map(jobs.value.map((job) => [job.id, job.status])); const merged = new Map(jobs.value.map((job) => [job.id, job]));\n for (const job of data.jobs) { const previousStatus = previousStatuses.get(job.id); merged.set(job.id, job); if (previousStatus && !terminalStatuses.has(previousStatus) && terminalStatuses.has(job.status)) void notifyCompletedJob(job); }\n jobs.value = Array.from(merged.values()).sort((a, b) => Number(b.id) - Number(a.id)); refreshError.value = false;\n } catch (error) { console.error(error); refreshError.value = true; } finally { refreshing = false; if (refreshPending && !searchInProgress) { refreshPending = false; void refreshJobs(); } }\n };\n const loadMore = async () => { if (loadingMore.value || !hasMore.value || !jobs.value.length) return; loadingMore.value = true; try { const beforeId = Math.min(...jobs.value.map((job) => Number(job.id))); const filterQuery = activeFilter.value ? `&filter=${encodeURIComponent(activeFilter.value)}` : ''; const response = await apiFetch(`/api/jobs?beforeId=${beforeId}${filterQuery}`, { headers: { accept: 'application/json' } }); if (!response.ok) throw new Error(`Loading older jobs failed: ${response.status}`); const data = await response.json(); const merged = new Map(jobs.value.map((job) => [job.id, job])); for (const job of data.jobs) merged.set(job.id, job); jobs.value = Array.from(merged.values()).sort((a, b) => Number(b.id) - Number(a.id)); hasMore.value = data.hasMore; } catch (error) { console.error(error); refreshError.value = true; } finally { loadingMore.value = false; } };\n const updateSearchUrl = (value) => { const params = new URLSearchParams(window.location.search); if (value) params.set('search', value); else params.delete('search'); const query = params.toString(); history.pushState(null, '', `${window.location.pathname}${query ? `?${query}` : ''}`); };\n const applyFilter = async () => { searchInProgress = true; refreshGeneration++; activeFilter.value = filter.value.trim(); updateSearchUrl(activeFilter.value); jobs.value = []; hasMore.value = false; try { await refreshJobs(true); } finally { searchInProgress = false; refreshPending = false; } };\n const clearFilter = async () => { searchInProgress = true; refreshGeneration++; filter.value = ''; activeFilter.value = ''; updateSearchUrl(''); jobs.value = []; hasMore.value = false; try { await refreshJobs(true); } finally { searchInProgress = false; refreshPending = false; } };\n const setFilter = (event) => { filter.value = event.target.value; };\n onInit(() => { const initialSearch = new URLSearchParams(window.location.search).get('search')?.trim() || ''; filter.value = initialSearch; activeFilter.value = initialSearch; if (notificationsSupported.value) navigator.serviceWorker.register('/service-worker.js').then(() => { if (notificationsEnabled.value) void enablePushNotifications(); }).catch((error) => console.error('Service worker registration failed', error)); eventSource = new EventSource('/api/events'); eventSource.addEventListener('jobs.available', refreshJobs); eventSource.addEventListener('jobs.changed', refreshJobs); eventSource.onerror = () => { refreshError.value = true; }; void refreshJobs(); refreshTimer = setInterval(refreshJobs, 60000); });\n onDestroy(() => { eventSource?.close(); clearInterval(refreshTimer); });\n return { jobs, refreshError, hasMore, loadingMore, filter, activeFilter, pushConfigured, setFilter, loadMore, applyFilter, clearFilter, upper, notificationsSupported, notificationsEnabled, notificationNotice, toggleNotifications };\n}\n", sg = "\n import { computed, onDestroy, onInit, ref } from '@li3/web';\n import { AnsiUp } from 'ansi_up';\n import { marked } from 'marked';\n import { apiFetch } from '@app/api-client.mjs';\n\n export default function setup() {\n const jobId = window.location.pathname.split('/').filter(Boolean).pop() || '';\n const report = ref({ jobId });\n const previousRuns = ref([]);\n const aiMessages = ref([]);\n const aiStepId = ref('');\n const aiQuestion = ref('');\n const aiError = ref('');\n const aiLoading = ref(false);\n const manualRestartOpen = ref(false);\n const manualRestartLoading = ref(false);\n const manualInputs = ref([]);\n let previousRunsLoaded = false;\n const now = ref(Date.now());\n const ansiUp = new AnsiUp();\n ansiUp.use_classes = false;\n let eventSource;\n let refreshTimer;\n let clockTimer;\n let refreshing = false;\n let refreshPending = false;\n const cancelling = ref(false);\n\n const active = computed(() => ['pending', 'running'].includes(report.value.status));\n const inputsJson = computed(() => JSON.stringify(report.value.inputs || {}, null, 2));\n const originalInputsJson = computed(() => JSON.stringify(report.value.inputs || {}, null, 2));\n const timing = computed(() => {\n if (report.value.status === 'pending') return 'Waiting for a worker';\n if (report.value.status === 'running') {\n return `Running for ${Math.max(0, now.value - Date.parse(report.value.startedAt))}ms`;\n }\n return `Finished in ${report.value.durationMs}ms`;\n });\n\n const upper = (value) => String(value || '').toUpperCase();\n const artifactUrl = (path) => `/api/runs/${report.value.jobId}/artifacts/${encodeURIComponent(path)}`;\n const downloadArtifact = async (event, path) => {\n event.preventDefault();\n const response = await apiFetch(artifactUrl(path));\n if (!response.ok) return;\n const link = document.createElement('a');\n link.href = URL.createObjectURL(await response.blob());\n link.download = path.split('/').pop() || 'artifact';\n link.click();\n URL.revokeObjectURL(link.href);\n };\n const loadPreviousRuns = async () => {\n if (previousRunsLoaded || !report.value.parentId) return;\n const lineage = [];\n const visited = new Set();\n let parentId = report.value.parentId;\n while (parentId && !visited.has(String(parentId)) && lineage.length < 50) {\n visited.add(String(parentId));\n const response = await apiFetch(`/api/runs/${parentId}`, { headers: { accept: 'application/json' } });\n if (!response.ok) throw new Error(`Previous run request failed: ${response.status}`);\n const parent = await response.json();\n lineage.push({ id: parent.jobId, status: parent.status, startedAt: parent.startedAt });\n parentId = parent.parentId;\n }\n previousRuns.value = lineage;\n previousRunsLoaded = true;\n };\n const stepLog = (step) => {\n if (step.status === 'skipped') return '';\n if (step.status === 'running')\n return '<span class=\"text-indigo-400\">Step is running. Logs will appear after it finishes.</span>';\n if (step.status === 'pending') return '<span class=\"text-gray-500\">Waiting to run.</span>';\n if (step.logContent) return ansiUp.ansi_to_html(step.logContent);\n return '<span class=\"text-gray-500\">(No terminal log output recorded for this step)</span>';\n };\n const sanitizeAiHtml = (html) => {\n const parsed = new DOMParser().parseFromString(html, 'text/html');\n parsed.querySelectorAll('script,style,iframe,object,embed,form').forEach((node) => node.remove());\n parsed.querySelectorAll('*').forEach((element) => {\n [...element.attributes].forEach((attribute) => {\n if (attribute.name.toLowerCase().startsWith('on')) element.removeAttribute(attribute.name);\n if (['href', 'src'].includes(attribute.name.toLowerCase()) && /^(javascript|data):/i.test(attribute.value)) element.removeAttribute(attribute.name);\n });\n });\n return parsed.body.innerHTML;\n };\n const renderAiMarkdown = (content) => sanitizeAiHtml(marked.parse(content));\n const askAi = async (step, event) => {\n event.stopPropagation();\n aiStepId.value = step.id;\n aiMessages.value = [];\n aiQuestion.value = '';\n await requestAiHelp(step.id, 'Please explain why this step failed and what I should do next.');\n };\n const requestAiHelp = async (stepId, question) => {\n aiLoading.value = true;\n aiError.value = '';\n try {\n const response = await apiFetch(`/api/runs/${report.value.jobId}/ai-help`, {\n method: 'POST',\n headers: { accept: 'application/json', 'content-type': 'application/json' },\n body: JSON.stringify({ stepId, question, conversation: aiMessages.value }),\n });\n if (!response.ok) {\n const data = await response.json().catch(() => ({}));\n throw new Error(data.error || `AI help failed: ${response.status}`);\n }\n aiMessages.value = [...aiMessages.value, { role: 'user', content: question }, { role: 'assistant', content: '' }];\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = '';\n while (true) {\n const chunk = await reader.read();\n if (chunk.done) break;\n buffer += decoder.decode(chunk.value, { stream: true });\n const events = buffer.split('\\n\\n');\n buffer = events.pop() || '';\n for (const event of events) {\n const line = event.split('\\n').find((value) => value.startsWith('data: '));\n if (!line) continue;\n const data = JSON.parse(line.slice(6));\n if (data.delta) {\n const messages = [...aiMessages.value];\n messages[messages.length - 1] = { ...messages[messages.length - 1], content: messages[messages.length - 1].content + data.delta };\n aiMessages.value = messages;\n }\n if (data.error) throw new Error(data.error);\n }\n }\n const messages = [...aiMessages.value];\n const answer = messages.at(-1);\n if (answer) messages[messages.length - 1] = { ...answer, html: renderAiMarkdown(answer.content) };\n aiMessages.value = messages;\n } catch (error) {\n aiError.value = error.message;\n } finally {\n aiLoading.value = false;\n }\n };\n const askFollowup = async () => {\n const question = aiQuestion.value.trim();\n if (!question || !aiStepId.value) return;\n aiQuestion.value = '';\n await requestAiHelp(aiStepId.value, question);\n };\n const restartJob = async () => {\n const response = await apiFetch(`/restart/${report.value.jobId}`, {\n method: 'POST',\n headers: { 'content-type': 'application/json' },\n body: JSON.stringify({ inputs: report.value.inputs || {} }),\n });\n if (response.ok) {\n const { id } = await response.json();\n location.href = `/runs/${id}`;\n }\n };\n const openManualRestart = (event) => {\n event.preventDefault();\n event.stopPropagation();\n manualInputs.value = [{ key: '', value: '' }];\n manualRestartOpen.value = true;\n };\n const closeManualRestart = () => { manualRestartOpen.value = false; };\n const addManualInput = () => { manualInputs.value = [...manualInputs.value, { key: '', value: '' }]; };\n const removeManualInput = (entry) => { manualInputs.value = manualInputs.value.filter((item) => item !== entry); };\n const setManualKey = (entry, event) => { entry.key = event.target.value; manualInputs.value = [...manualInputs.value]; };\n const setManualValue = (entry, event) => { entry.value = event.target.value; manualInputs.value = [...manualInputs.value]; };\n const restartWithInputs = async () => {\n const inputs = Object.fromEntries(manualInputs.value.filter((entry) => entry.key.trim()).map((entry) => [entry.key.trim(), entry.value]));\n manualRestartLoading.value = true;\n try {\n const response = await apiFetch(`/restart/${report.value.jobId}`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ inputs }) });\n if (!response.ok) throw new Error(`Restart failed: ${response.status}`);\n const { id } = await response.json();\n location.href = `/runs/${id}`;\n } catch (error) {\n aiError.value = error.message;\n } finally {\n manualRestartLoading.value = false;\n }\n };\n const cancelJob = async () => {\n if (cancelling.value || report.value.status !== 'running') return;\n cancelling.value = true;\n try {\n const response = await apiFetch(`/api/jobs/${report.value.jobId}/cancel`, { method: 'POST' });\n if (!response.ok) throw new Error(`Cancel failed: ${response.status}`);\n await refreshRun();\n } catch (error) {\n console.error(error);\n } finally {\n cancelling.value = false;\n }\n };\n const refreshRun = async () => {\n if (refreshing) {\n refreshPending = true;\n return;\n }\n refreshing = true;\n\n try {\n const response = await apiFetch(`/api/runs/${jobId}`, {\n headers: { accept: 'application/json' },\n });\n if (!response.ok) throw new Error(`Run refresh failed: ${response.status}`);\n const previousStatus = report.value.status;\n const nextReport = await response.json();\n report.value = nextReport;\n document.title = `Run #${nextReport.jobId} - ${nextReport.workflowName}`;\n void loadPreviousRuns();\n if (\n ['pending', 'running'].includes(previousStatus) &&\n ['success', 'failed'].includes(nextReport.status) &&\n 'Notification' in window &&\n 'serviceWorker' in navigator &&\n Notification.permission === 'granted' &&\n localStorage.getItem('runner-notifications') === 'enabled'\n ) {\n const registration = await navigator.serviceWorker.ready;\n await registration.showNotification(\n nextReport.status === 'success'\n ? `Job #${nextReport.jobId} succeeded`\n : `Job #${nextReport.jobId} failed`,\n {\n body: `${nextReport.workflowName} finished with status ${nextReport.status}.`,\n icon: '/app-icon.svg',\n badge: '/app-icon.svg',\n tag: `runner-job-${nextReport.jobId}`,\n renotify: true,\n data: { url: `/runs/${nextReport.jobId}` },\n },\n );\n }\n } catch (error) {\n console.error(error);\n } finally {\n refreshing = false;\n if (refreshPending) {\n refreshPending = false;\n void refreshRun();\n }\n }\n };\n const handleJobChange = (event) => {\n const data = JSON.parse(event.data || '{}');\n if (!data.jobId || String(data.jobId) === String(report.value.jobId)) void refreshRun();\n };\n\n onInit(() => {\n void refreshRun();\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/service-worker.js').catch((error) => {\n console.error('Service worker registration failed', error);\n });\n }\n eventSource = new EventSource('/api/events');\n eventSource.addEventListener('jobs.changed', handleJobChange);\n refreshTimer = setInterval(() => {\n if (active.value) void refreshRun();\n }, 60000);\n clockTimer = setInterval(() => {\n now.value = Date.now();\n }, 1000);\n });\n onDestroy(() => {\n eventSource?.close();\n clearInterval(refreshTimer);\n clearInterval(clockTimer);\n });\n\n return { report, previousRuns, manualRestartOpen, manualRestartLoading, manualInputs, aiMessages, aiStepId, aiQuestion, aiError, aiLoading, inputsJson, originalInputsJson, timing, upper, artifactUrl, downloadArtifact, stepLog, askAi, askFollowup, restartJob, openManualRestart, closeManualRestart, addManualInput, removeManualInput, setManualKey, setManualValue, restartWithInputs, cancelJob, cancelling };\n }\n \n", cg = "\n import { onInit, ref } from '@li3/web';\n import { apiFetch, setApiToken } from '@app/api-client.mjs';\n export default function () {\n const page = document.body.dataset.page;\n const keys = ref([]);\n const workers = ref([]);\n const keyName = ref('');\n const newToken = ref('');\n const error = ref('');\n const notificationsSupported = ref('Notification' in window && 'serviceWorker' in navigator);\n const notificationsEnabled = ref(notificationsSupported.value && Notification.permission === 'granted' && localStorage.getItem('runner-notifications') === 'enabled');\n const notificationMessage = ref('');\n const scopeOptions = ref([\n { name: 'workflows:read', label: 'Read workflows', selected: true },\n { name: 'workflows:write', label: 'Modify workflows', selected: false },\n { name: 'logs:read', label: 'Read logs', selected: false },\n { name: 'artifacts:read', label: 'Read artifacts', selected: false },\n { name: 'runs:control', label: 'Control runs', selected: false },\n { name: 'runs:dispatch', label: 'Dispatch runs', selected: false },\n { name: 'workers:read', label: 'Read workers', selected: false },\n { name: 'secrets:read', label: 'Read secret names', selected: false },\n { name: 'secrets:write', label: 'Manage secrets', selected: false },\n ]);\n const api = async (url, options = {}) => { const response = await apiFetch(url, { headers: { accept: 'application/json', ...(options.body ? { 'content-type': 'application/json' } : {}) }, ...options }); const body = await response.json().catch(() => ({})); if (!response.ok) throw new Error(body.error || `Request failed: ${response.status}`); return body; };\n const load = async () => { keys.value = (await api('/api/api-keys')).keys; };\n const loadWorkers = async () => { workers.value = (await api('/api/workers')).workers; };\n const issueKey = async () => { try { error.value = ''; const result = await api('/api/api-keys', { method: 'POST', body: JSON.stringify({ name: keyName.value, scopes: scopeOptions.value.filter((scope) => scope.selected).map((scope) => scope.name) }) }); newToken.value = result.token; setApiToken(result.token); keyName.value = ''; await load(); } catch (reason) { error.value = reason.message; } };\n const revokeKey = async (key) => { if (!confirm(`Revoke ${key.name}?`)) return; try { await api(`/api/api-keys/${key.id}`, { method: 'DELETE' }); await load(); } catch (reason) { error.value = reason.message; } };\n const setKeyName = (event) => { keyName.value = event.target.value; };\n const toggleScope = (scope) => { scope.selected = !scope.selected; };\n const toggleNotifications = async () => {\n if (notificationsEnabled.value) {\n notificationsEnabled.value = false;\n localStorage.removeItem('runner-notifications');\n notificationMessage.value = 'Notifications disabled on this device.';\n return;\n }\n if (!notificationsSupported.value) { notificationMessage.value = 'Notifications are not supported by this browser.'; return; }\n const permission = await Notification.requestPermission();\n notificationsEnabled.value = permission === 'granted';\n if (notificationsEnabled.value) { localStorage.setItem('runner-notifications', 'enabled'); notificationMessage.value = 'Notifications enabled.'; }\n else notificationMessage.value = 'Notification permission was not granted.';\n };\n onInit(() => { if (page === 'tokens') load().catch((reason) => { error.value = reason.message; }); if (page === 'workers') loadWorkers().catch((reason) => { error.value = reason.message; }); });\n return { page, keys, workers, keyName, newToken, error, scopeOptions, issueKey, revokeKey, setKeyName, toggleScope, notificationsEnabled, notificationMessage, toggleNotifications };\n }\n \n", lg = "\n import { onDestroy, onInit, ref, templateRef } from '@li3/web';\n import { apiFetch } from '@app/api-client.mjs';\n import { diffLines } from 'diff';\n\n export default function () {\n const page = document.body.dataset.page;\n const params = new URLSearchParams(window.location.search);\n const initialId = params.get('id') || '';\n const initialRevision = params.get('revision') ? Number(params.get('revision')) : null;\n const readOnly = Boolean(initialRevision);\n const workflows = ref([]);\n const secrets = ref([]);\n const source = ref('');\n const validation = ref({ valid: true });\n const savedSource = ref('');\n const revision = ref(null);\n const revisionDialogOpen = ref(false);\n const revisionNumber = ref(0);\n const revisionDiffHtml = ref('');\n const revisionError = ref('');\n const revisionLoading = ref(false);\n const aiDialogOpen = ref(false);\n const aiRequest = ref('');\n const aiLoading = ref(false);\n const aiError = ref('');\n const aiSuggestion = ref('');\n const aiDiffHtml = ref('');\n const workflowId = ref('');\n const enabled = ref(true);\n const savedEnabled = ref(true);\n const selectedId = ref('');\n const secretName = ref('');\n const secretValue = ref('');\n const fileMode = ref(false);\n const secretFileName = ref('');\n const secretFileData = ref('');\n const notice = ref('');\n const noticeError = ref(false);\n const busy = ref(false);\n const secretValueInput = templateRef('secretValueInput');\n const secretFileInput = templateRef('secretFileInput');\n const secretForm = templateRef('secretForm');\n const helpContent = templateRef('helpContent');\n const helpLoaded = ref(false);\n const helpLoading = ref(false);\n let validationTimer;\n\n const showNotice = (message, error = false) => {\n notice.value = message;\n noticeError.value = error;\n };\n\n const api = async (url, options = {}) => {\n const response = await apiFetch(url, {\n headers: { accept: 'application/json', ...(options.body ? { 'content-type': 'application/json' } : {}) },\n ...options,\n });\n const body = response.status === 204 ? null : await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(body.error || `Request failed: ${response.status}`);\n return body;\n };\n\n const derivedId = () =>\n source.value\n .match(/^\\s*(?:id:\\s*([^\\n]+)|name:\\s*([^\\n]+))/m)\n ?.slice(1)\n .find(Boolean)\n ?.trim()\n .toLowerCase()\n .replace(/[^a-z0-9]/g, '-')\n .replace(/(^-|-$)/g, '') || '';\n\n const run = async (action) => {\n if (busy.value) return;\n\n busy.value = true;\n\n try {\n await action();\n } catch (error) {\n showNotice(error.message, true);\n } finally {\n busy.value = false;\n }\n };\n\n const loadWorkflows = async () => {\n workflows.value = (await api('/api/workflows')).workflows;\n };\n\n const loadSecrets = async () => {\n secrets.value = (await api('/api/secrets')).secrets;\n };\n\n const openWorkflow = async (id) => {\n const workflowUrl = initialRevision\n ? `/api/workflows/${id}?revision=${initialRevision}`\n : `/api/workflows/${id}`;\n const workflow = await api(workflowUrl);\n selectedId.value = workflow.id;\n workflowId.value = workflow.id;\n source.value = workflow.sourceYaml;\n savedSource.value = workflow.sourceYaml;\n enabled.value = workflow.enabled;\n savedEnabled.value = workflow.enabled;\n revision.value = workflow.revision || null;\n };\n\n const validateSource = async () => {\n return api('/api/workflows/validate', {\n method: 'POST',\n body: JSON.stringify({ sourceYaml: source.value }),\n });\n };\n\n const validate = (ms = 1000) => {\n if (page !== 'editor') return;\n\n clearTimeout(validationTimer);\n validationTimer = setTimeout(() => {\n validation.value = { ...validation.value, running: true, error: '' };\n void validateSource()\n .then((result) => {\n validation.value = { ...result, running: false };\n })\n .catch((error) => {\n validation.value = { valid: false, running: false, error: error.message };\n \n });\n }, ms);\n };\n\n const save = () =>\n run(async () => {\n const id = workflowId.value.trim() || derivedId();\n if (!id) throw new Error('Set an ID or add a workflow name first.');\n if (\n initialId &&\n id === selectedId.value &&\n source.value === savedSource.value &&\n enabled.value === savedEnabled.value\n ) {\n showNotice('No changes to save.');\n return;\n }\n const workflow = await api(`/api/workflows/${id}`, {\n method: 'PUT',\n body: JSON.stringify({ sourceYaml: source.value, enabled: enabled.value }),\n });\n selectedId.value = workflow.id;\n workflowId.value = workflow.id;\n savedSource.value = source.value;\n savedEnabled.value = enabled.value;\n revision.value = workflow.revision;\n showNotice(`Saved ${workflow.id} as draft revision ${workflow.revision}.`);\n if (!initialId) history.replaceState(null, '', `/workflows/${workflow.id}`);\n });\n const publish = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id) throw new Error('Save a workflow before publishing it.');\n const workflow = await api(`/api/workflows/${id}/publish`, { method: 'POST' });\n selectedId.value = workflow.id;\n revision.value = workflow.revision;\n showNotice(`Published ${workflow.id} revision ${workflow.revision}.`);\n });\n const runNow = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id) throw new Error('Save the workflow before running it.');\n if (source.value !== savedSource.value) throw new Error('Save the latest draft before running it.');\n const result = await api(`/api/workflows/${id}/run`, {\n method: 'POST',\n body: JSON.stringify({}),\n });\n showNotice(`Queued ${result.jobs.length} job${result.jobs.length === 1 ? '' : 's'} from revision ${result.revision}.`);\n });\n const remove = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id || !confirm(`Delete ${id} and all of its revisions?`)) return;\n await api(`/api/workflows/${id}`, { method: 'DELETE' });\n window.location.href = '/workflows';\n });\n const saveSecret = () =>\n run(async () => {\n const name = secretName.value.trim();\n if (!name || (fileMode.value ? !secretFileData.value : !secretValue.value)) throw new Error(fileMode.value ? 'Choose a file first.' : 'Set a secret value first.');\n await api(`/api/secrets/${name}`, {\n method: 'PUT',\n body: JSON.stringify(fileMode.value ? { value: secretFileData.value, encoding: 'base64', originalName: secretFileName.value } : { value: secretValue.value, encoding: 'utf8' }),\n });\n secretValue.value = '';\n secretFileName.value = '';\n secretFileData.value = '';\n fileMode.value = false;\n if (secretFileInput.value) secretFileInput.value.value = '';\n if (secretForm.value) secretForm.value.open = false;\n await loadSecrets();\n showNotice(`Saved ${name}.`);\n });\n const removeSecret = (requestedName = '') =>\n run(async () => {\n const name = requestedName || secretName.value.trim();\n if (!name || !confirm(`Delete ${name}?`)) return;\n await api(`/api/secrets/${name}`, { method: 'DELETE' });\n if (secretName.value.trim() === name) {\n secretName.value = '';\n secretValue.value = '';\n secretFileName.value = '';\n secretFileData.value = '';\n fileMode.value = false;\n if (secretFileInput.value) secretFileInput.value.value = '';\n }\n await loadSecrets();\n showNotice(`Deleted ${name}.`);\n });\n const setSource = (value) => {\n source.value = value;\n validate();\n };\n const setWorkflowId = (event) => {\n workflowId.value = event.target.value;\n };\n const setEnabled = (event) => {\n enabled.value = event.target.checked;\n };\n const setSecretName = (event) => {\n secretName.value = event.target.value;\n };\n const setSecretValue = (event) => {\n secretValue.value = event.target.value;\n fileMode.value = false;\n if (secretValue.value) {\n secretFileName.value = '';\n secretFileData.value = '';\n if (secretFileInput.value) secretFileInput.value.value = '';\n }\n };\n const setFileMode = (event) => {\n fileMode.value = event.target.checked;\n if (!fileMode.value) {\n secretFileName.value = '';\n secretFileData.value = '';\n if (secretFileInput.value) secretFileInput.value.value = '';\n } else {\n secretValue.value = '';\n }\n };\n const setSecretFile = async (event) => {\n const file = event.target.files?.[0];\n if (!file) return;\n const bytes = new Uint8Array(await file.arrayBuffer());\n let binary = '';\n for (let index = 0; index < bytes.length; index += 0x8000) {\n binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));\n }\n secretFileName.value = file.name;\n secretFileData.value = btoa(binary);\n secretValue.value = '';\n };\n const selectSecret = (name) => {\n secretName.value = name;\n secretValueInput.value?.focus();\n };\n const visitWorkflow = (id) => {\n window.location.href = `/workflows/${id}`;\n };\n const loadHelp = async (event) => {\n if (!event.target.open || helpLoaded.value || helpLoading.value || !helpContent.value) return;\n helpLoading.value = true;\n helpContent.value.textContent = 'Loading workflow syntax help...';\n try {\n const response = await fetch('/help?embed=1', { headers: { accept: 'text/html' } });\n if (!response.ok) throw new Error(`Help request failed: ${response.status}`);\n const html = await response.text();\n const parsed = new DOMParser().parseFromString(html, 'text/html');\n const sourceNodes = [\n ...Array.from(parsed.head.querySelectorAll('style')),\n ...Array.from(parsed.body.childNodes),\n ];\n const nodes = sourceNodes.map((node) => document.importNode(node, true));\n helpContent.value.replaceChildren(...nodes);\n helpLoaded.value = true;\n } catch (error) {\n helpContent.value.textContent = 'Unable to load workflow syntax help.';\n console.error(error);\n } finally {\n helpLoading.value = false;\n }\n };\n\n const escapeRevisionHtml = (value) => value.replace(/[&<>\"']/g, (character) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[character] || '');\n const renderRevisionDiff = (previousSource, currentSource) => {\n if (previousSource === null) return `<span class=\"text-emerald-300\">+ ${escapeRevisionHtml(currentSource)}</span>\\n`;\n return diffLines(previousSource, currentSource).map((part) => {\n const className = part.added ? 'text-emerald-300 bg-emerald-500/10' : part.removed ? 'text-rose-300 bg-rose-500/10' : 'text-gray-300';\n const prefix = part.added ? '+ ' : part.removed ? '- ' : ' ';\n return part.value.split('\\n').filter((line, index, lines) => index < lines.length - 1 || line).map((line) => `<span class=\"block ${className}\">${prefix}${escapeRevisionHtml(line)}</span>`).join('');\n }).join('');\n };\n const openRevisionDialog = async () => {\n if (!revision.value) return;\n revisionNumber.value = revision.value;\n revisionDiffHtml.value = '';\n revisionError.value = '';\n revisionDialogOpen.value = true;\n await loadRevisionDiff(revision.value);\n };\n const closeRevisionDialog = () => {\n revisionDialogOpen.value = false;\n };\n const loadRevisionDiff = async (number) => {\n revisionLoading.value = true;\n revisionError.value = '';\n try {\n const current = await api(`/api/workflows/${selectedId.value}?revision=${number}`);\n const previous = number > 1 ? await api(`/api/workflows/${selectedId.value}?revision=${number - 1}`) : null;\n revisionDiffHtml.value = renderRevisionDiff(previous?.sourceYaml ?? null, current.sourceYaml);\n } catch (error) {\n revisionError.value = error.message;\n } finally {\n revisionLoading.value = false;\n }\n };\n const navigateRevision = async (offset) => {\n if (!selectedId.value || revisionLoading.value) return;\n const target = revisionNumber.value + offset;\n if (target < 1 || target > revision.value) return;\n revisionNumber.value = target;\n await loadRevisionDiff(target);\n };\n const openAiHelp = () => {\n aiRequest.value = '';\n aiError.value = '';\n aiSuggestion.value = '';\n aiDiffHtml.value = '';\n aiDialogOpen.value = true;\n };\n const closeAiHelp = () => { if (!aiLoading.value) aiDialogOpen.value = false; };\n const requestAiHelp = async () => {\n if (!aiRequest.value.trim() || aiLoading.value) return;\n aiLoading.value = true;\n aiError.value = '';\n aiDiffHtml.value = '';\n try {\n const response = await apiFetch('/api/ai/workflow-help', {\n method: 'POST',\n headers: { accept: 'text/event-stream', 'content-type': 'application/json' },\n body: JSON.stringify({ sourceYaml: source.value, request: aiRequest.value }),\n });\n if (!response.ok) { const error = await response.json().catch(() => ({})); throw new Error(error.error || `AI help failed: ${response.status}`); }\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = '';\n let suggestion = '';\n while (true) {\n const chunk = await reader.read();\n if (chunk.done) break;\n buffer += decoder.decode(chunk.value, { stream: true });\n const events = buffer.split('\\n\\n');\n buffer = events.pop() || '';\n for (const event of events) {\n const line = event.split('\\n').find((value) => value.startsWith('data: '));\n if (!line) continue;\n const data = JSON.parse(line.slice(6));\n if (data.error) throw new Error(data.error);\n if (data.delta) suggestion += data.delta;\n }\n }\n suggestion = suggestion.replace(/^```(?:yaml|yml)?\\s*/i, '').replace(/\\s*```$/i, '').trim();\n if (!source.value.trim()) {\n source.value = suggestion;\n aiDialogOpen.value = false;\n validate();\n } else {\n aiSuggestion.value = suggestion;\n aiDiffHtml.value = renderRevisionDiff(source.value, suggestion);\n }\n } catch (error) {\n aiError.value = error.message;\n } finally {\n aiLoading.value = false;\n }\n };\n const acceptAiSuggestion = () => { source.value = aiSuggestion.value; aiDialogOpen.value = false; validate(); };\n const rejectAiSuggestion = () => { aiSuggestion.value = ''; aiDiffHtml.value = ''; };\n\n onDestroy(() => clearTimeout(validationTimer));\n\n onInit(() => {\n const loadPage = page === 'editor'\n ? initialId ? openWorkflow(initialId) : Promise.resolve()\n : page === 'secrets' ? loadSecrets() : loadWorkflows();\n loadPage.catch((error) => showNotice(error.message, true));\n });\n\n return {\n page,\n workflows,\n secrets,\n source,\n validation,\n revision,\n revisionDialogOpen,\n revisionNumber,\n revisionDiffHtml,\n revisionError,\n revisionLoading,\n aiDialogOpen,\n aiRequest,\n aiLoading,\n aiError,\n aiDiffHtml,\n workflowId,\n enabled,\n readOnly,\n selectedId,\n secretName,\n secretValue,\n fileMode,\n secretFileName,\n secretFileData,\n notice,\n noticeError,\n busy,\n validate,\n save,\n publish,\n runNow,\n remove,\n saveSecret,\n removeSecret,\n setSource,\n setWorkflowId,\n setEnabled,\n setSecretName,\n setSecretValue,\n setFileMode,\n setSecretFile,\n selectSecret,\n visitWorkflow,\n loadHelp,\n openRevisionDialog,\n closeRevisionDialog,\n navigateRevision,\n openAiHelp,\n closeAiHelp,\n requestAiHelp,\n acceptAiSuggestion,\n rejectAiSuggestion,\n };\n }\n \n", ug = "/* global document, window, localStorage, navigator, URL, Blob, setTimeout, clearTimeout */\n\nconst paths = {\n runs: '<rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\"/><path d=\"m10 8 5 4-5 4Z\"/>',\n workflow:\n '<rect x=\"3\" y=\"3\" width=\"6\" height=\"6\" rx=\"1.5\"/><rect x=\"15\" y=\"15\" width=\"6\" height=\"6\" rx=\"1.5\"/><path d=\"M6 9v6a3 3 0 0 0 3 3h6M9 6h6a3 3 0 0 1 3 3v6\"/>',\n server:\n '<rect x=\"3\" y=\"3\" width=\"18\" height=\"7\" rx=\"2\"/><rect x=\"3\" y=\"14\" width=\"18\" height=\"7\" rx=\"2\"/><path d=\"M7 6.5h.01M7 17.5h.01M11 6.5h6M11 17.5h6\"/>',\n settings:\n '<path d=\"m9 3-1 3-3 1-2 3 2 2-1 3 3 2 3-1 2 2 3-1 1-3 3-1 2-3-2-2 1-3-3-2-3 1-2-2Z\"/><circle cx=\"11.5\" cy=\"10.5\" r=\"3\"/>',\n search: '<circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4 4\"/>',\n plus: '<path d=\"M12 5v14M5 12h14\"/>',\n arrow: '<path d=\"M5 12h14m-5-5 5 5-5 5\"/>',\n back: '<path d=\"M19 12H5m5-5-5 5 5 5\"/>',\n chevron: '<path d=\"m9 6 6 6-6 6\"/>',\n check: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m8 12 3 3 5-6\"/>',\n failed: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m9 9 6 6m0-6-6 6\"/>',\n running: '<path d=\"M20.4 8.8A9 9 0 1 1 15.2 3.6\"/><path d=\"M20.4 3.6v5.2h-5.2\"/>',\n pending: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/>',\n cancelled: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m6 6 12 12\"/>',\n skipped: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 12h8\"/>',\n branch:\n '<circle cx=\"6\" cy=\"5\" r=\"2\"/><circle cx=\"6\" cy=\"19\" r=\"2\"/><circle cx=\"18\" cy=\"6\" r=\"2\"/><path d=\"M6 7v10m0-4h5a7 7 0 0 0 7-5\"/>',\n clock: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/>',\n commit: '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M3 12h5m8 0h5\"/>',\n refresh: '<path d=\"M20 7v5h-5M4 17v-5h5\"/><path d=\"M6.1 7a7 7 0 0 1 11.5-1L20 9M4 15l2.4 3A7 7 0 0 0 18 17\"/>',\n terminal: '<path d=\"m5 6 6 6-6 6m9 0h5\"/>',\n download: '<path d=\"M12 3v12m-4-4 4 4 4-4M4 16v4h16v-4\"/>',\n copy: '<rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V4H4v12h4\"/>',\n wrap: '<path d=\"M3 6h18M3 12h14a3 3 0 0 1 0 6h-5m3-3-3 3 3 3M3 18h4\"/>',\n code: '<path d=\"m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18\"/>',\n box: '<path d=\"m12 3 9 5v9l-9 5-9-5V8Zm0 9 9-4M3 8l9 4v10M7.5 5.5l9 5\"/>',\n history: '<path d=\"M3 3v6h6M3.6 9a9 9 0 1 1-.2 6M12 7v5l3 2\"/>',\n keyboard:\n '<rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 15h10\"/>',\n close: '<path d=\"m6 6 12 12M6 18 18 6\"/>',\n alert: '<path d=\"m12 3 10 18H2Z\"/><path d=\"M12 9v5m0 3h.01\"/>',\n lock: '<rect x=\"5\" y=\"10\" width=\"14\" height=\"11\" rx=\"2\"/><path d=\"M8 10V6a4 4 0 0 1 8 0v4m-4 5v2\"/>',\n stop: '<rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"2\"/>',\n info: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10h.01\"/>',\n};\nconst icon = (name) =>\n `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">${paths[name] || paths.runs}</svg>`;\nconst escape = (value) =>\n String(value).replace(\n /[&<>\"']/g,\n (character) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\" })[character],\n );\nconst labels = {\n success: \"Passed\",\n failed: \"Failed\",\n running: \"Running\",\n pending: \"Queued\",\n cancelled: \"Cancelled\",\n skipped: \"Skipped\",\n};\nconst statusIcon = (status) =>\n `<span class=\"status-icon ${status}\">${icon(status === \"success\" ? \"check\" : status)}</span>`;\nconst badge = (status) => `<span class=\"status ${status}\">${statusIcon(status)}${labels[status]}</span>`;\nconst workflows = [\n {\n id: \"build-docker-image\",\n name: \"Build Docker image\",\n description: \"Build, test, and publish a container image to the registry.\",\n labels: [\"docker\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Build image\", \"Push to registry\"],\n },\n {\n id: \"build-publish-npm\",\n name: \"Build & publish npm\",\n description: \"Validate packages and publish a new release to npm.\",\n labels: [\"node\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Build package\", \"Publish to npm\"],\n },\n {\n id: \"deploy-production\",\n name: \"Deploy production\",\n description: \"Release the latest application and verify service health.\",\n labels: [\"main-server\", \"linux\"],\n steps: [\"Checkout repository\", \"Pull image\", \"Verify configuration\", \"Deploy service\", \"Health check\"],\n },\n {\n id: \"quality-checks\",\n name: \"Quality checks\",\n description: \"Type checking, linting, and tests for every pull request.\",\n labels: [\"node\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Type check\", \"Lint\"],\n },\n];\nconst seed = [\n [\"running\", 0, \"feat: add multi-platform builds\", \"feat/multi-platform\", \"a8f3c12\", 93, \"Just now\", \"on\"],\n [\"pending\", 1, \"chore: prepare September release\", \"main\", \"d72e8b1\", 0, \"1 min ago\", \"lithium\"],\n [\"failed\", 0, \"fix: resolve image build context\", \"main\", \"7bc91e4\", 142, \"4 min ago\", \"on\"],\n [\"success\", 2, \"feat: improve workflow navigation\", \"main\", \"f38ac02\", 68, \"12 min ago\", \"on\"],\n [\"success\", 1, \"fix: handle reconnect gracefully\", \"main\", \"c52d190\", 104, \"18 min ago\", \"sodium\"],\n [\"success\", 3, \"feat: add keyboard navigation\", \"feat/keyboard-nav\", \"8a12e6f\", 46, \"26 min ago\", \"lithium\"],\n [\"failed\", 1, \"chore: update dependency versions\", \"main\", \"e90b721\", 38, \"34 min ago\", \"lithium\"],\n [\"success\", 0, \"fix: restore health check endpoint\", \"main\", \"2a19d63\", 127, \"42 min ago\", \"auth\"],\n [\"success\", 1, \"feat: expose workflow metadata\", \"main\", \"b94d512\", 88, \"1 hr ago\", \"on\"],\n [\"success\", 3, \"test: cover retry boundaries\", \"fix/retries\", \"6fb841a\", 59, \"1 hr ago\", \"on\"],\n [\"cancelled\", 0, \"chore: rebuild base image\", \"main\", \"51ea273\", 17, \"2 hrs ago\", \"auth\"],\n [\"success\", 2, \"fix: improve session recovery\", \"main\", \"832df1a\", 62, \"2 hrs ago\", \"auth\"],\n [\"success\", 3, \"refactor: simplify component lifecycle\", \"main\", \"27d1c98\", 71, \"3 hrs ago\", \"lithium\"],\n [\"success\", 1, \"chore: release patch version\", \"main\", \"92dc128\", 96, \"3 hrs ago\", \"sodium\"],\n [\"success\", 0, \"feat: cache dependency layers\", \"main\", \"bd5201c\", 112, \"4 hrs ago\", \"on\"],\n [\"success\", 2, \"fix: persist worker labels\", \"main\", \"876da42\", 65, \"5 hrs ago\", \"on\"],\n];\nlet jobs = seed.map(([status, workflow, message, branch, commit, seconds, time, repo], index) => ({\n id: 2856 - index,\n status,\n workflow: workflows[workflow],\n message,\n branch,\n commit,\n seconds,\n time,\n repo,\n worker: status === \"pending\" ? null : \"alpha\",\n attempt: 1,\n parent: null,\n}));\nconst state = {\n search: \"\",\n status: \"all\",\n workflow: \"all\",\n branch: \"all\",\n page: 1,\n step: null,\n detailTab: \"logs\",\n logQuery: \"\",\n wrap: false,\n};\nconst main = document.querySelector(\"#main\");\nconst dialog = document.querySelector(\"#dialog\");\nlet toastTimer;\nlet previousRoute = \"\";\n\nfunction duration(seconds) {\n if (!seconds) {\n return \"—\";\n }\n return `${Math.floor(seconds / 60) ? `${Math.floor(seconds / 60)}m ` : \"\"}${seconds % 60}s`;\n}\nfunction toast(message) {\n const element = document.querySelector(\"#toast\");\n clearTimeout(toastTimer);\n element.textContent = message;\n element.hidden = false;\n toastTimer = setTimeout(() => {\n element.hidden = true;\n }, 4500);\n}\nfunction route() {\n const [path, query = \"\"] = window.location.hash.slice(1).split(\"?\");\n return { path: path || \"/runs\", query: new URL(`https://example.test/?${query}`).searchParams };\n}\nfunction currentJob() {\n return jobs.find((job) => job.id === Number(route().path.split(\"/\")[2]));\n}\nfunction updateFilterUrl() {\n const params = new URL(\"https://example.test\").searchParams;\n for (const key of [\"search\", \"status\", \"workflow\", \"branch\", \"page\"]) {\n if (state[key] !== \"\" && state[key] !== \"all\" && state[key] !== 1) {\n params.set(key, state[key]);\n }\n }\n window.history.replaceState(\n null,\n \"\",\n `${window.location.pathname}${window.location.search}#/runs${params.size ? `?${params}` : \"\"}`,\n );\n}\nfunction readFilters() {\n const { query } = route();\n state.search = query.get(\"search\") || \"\";\n state.status = [\"all\", \"running\", \"failed\", \"success\"].includes(query.get(\"status\")) ? query.get(\"status\") : \"all\";\n state.workflow = workflows.some((workflow) => workflow.id === query.get(\"workflow\")) ? query.get(\"workflow\") : \"all\";\n state.branch = [\"main\", \"feature\"].includes(query.get(\"branch\")) ? query.get(\"branch\") : \"all\";\n const page = Number(query.get(\"page\"));\n state.page = Number.isSafeInteger(page) && page > 0 ? page : 1;\n}\nfunction navigation(page) {\n document.querySelector(\"#navigation\").innerHTML = [\n [\"runs\", \"Runs\", \"runs\"],\n [\"workflows\", \"Workflows\", \"workflow\"],\n [\"workers\", \"Workers\", \"server\"],\n [\"settings\", \"Settings\", \"settings\"],\n ]\n .map(\n ([id, title, symbol]) =>\n `<a href=\"#/${id}\" class=\"nav-item ${id === page ? \"active\" : \"\"}\" ${id === page ? 'aria-current=\"page\"' : \"\"} aria-label=\"${title}\">${icon(symbol)}<span class=\"nav-label\">${title}</span>${id === \"runs\" ? `<span class=\"nav-count\">${jobs.filter((job) => [\"running\", \"pending\"].includes(job.status)).length}</span>` : \"\"}</a>`,\n )\n .join(\"\");\n const title = page[0].toUpperCase() + page.slice(1);\n const job = currentJob();\n document.querySelector(\"#breadcrumbs\").innerHTML =\n `<a href=\"#/runs\">Apphor</a><span class=\"divider\">/</span>${job ? `<a href=\"#/runs\">Runs</a><span class=\"divider\">/</span><strong class=\"mono\">#${job.id}</strong>` : `<strong>${title}</strong>`}`;\n document.title = `${job ? `Run #${job.id}` : title} · Flow`;\n}\nfunction summary() {\n const complete = jobs.filter((job) => [\"success\", \"failed\"].includes(job.status));\n const passing = complete.filter((job) => job.status === \"success\");\n const sorted = complete.map((job) => job.seconds).sort((a, b) => a - b);\n const median = sorted.length\n ? Math.round((sorted[Math.floor((sorted.length - 1) / 2)] + sorted[Math.floor(sorted.length / 2)]) / 2)\n : 0;\n return `<section class=\"overview\" aria-label=\"Run summary for sample data\">\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"runs\")}Total runs</div><div class=\"metric-bottom\"><span class=\"metric-value\">${jobs.length}</span><span class=\"metric-note\">in this sample</span><div class=\"tiny-bars\" aria-hidden=\"true\">${[11, 17, 13, 22, 16, 20, 25, 18, 24, 21].map((height) => `<i style=\"height:${height}px\"></i>`).join(\"\")}</div></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"check\")}Pass rate</div><div class=\"metric-bottom\"><span class=\"metric-value\">${Math.round((passing.length / complete.length) * 100)}<small>%</small></span><span class=\"metric-note\"><span>${passing.length}</span> / ${complete.length} completed</span></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"clock\")}Median duration</div><div class=\"metric-bottom\"><span class=\"metric-value\">${duration(median)}</span></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"running\")}In progress</div><div class=\"metric-bottom\"><span class=\"metric-value\">${jobs.filter((job) => job.status === \"running\").length}</span><span class=\"metric-note\">${jobs.filter((job) => job.status === \"pending\").length} queued</span></div></div>\n </section>`;\n}\nfunction runsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Runs</h1><p class=\"subtitle\">Every change, from commit to complete.</p></div><button class=\"button primary\" data-action=\"new-run\">${icon(\"plus\")}Run workflow</button></div>\n ${summary()}<section aria-labelledby=\"recent-runs\"><div class=\"section-heading\"><h2 id=\"recent-runs\">Recent runs <span class=\"count\">${jobs.length}</span></h2><span>${icon(\"clock\")}Sample activity · Today</span></div>\n <div class=\"filters\"><label class=\"search-box\">${icon(\"search\")}<span class=\"sr-only\">Search runs</span><input id=\"run-search\" type=\"search\" value=\"${escape(state.search)}\" placeholder=\"Search runs, commits, or repositories…\" autocomplete=\"off\"/><kbd aria-hidden=\"true\">/</kbd></label>\n <select id=\"workflow-filter\" class=\"select-filter\" aria-label=\"Filter by workflow\"><option value=\"all\">All workflows</option>${workflows.map((workflow) => `<option value=\"${workflow.id}\" ${state.workflow === workflow.id ? \"selected\" : \"\"}>${workflow.name}</option>`).join(\"\")}</select>\n <select id=\"branch-filter\" class=\"select-filter\" aria-label=\"Filter by branch\"><option value=\"all\">All branches</option><option value=\"main\" ${state.branch === \"main\" ? \"selected\" : \"\"}>main</option><option value=\"feature\" ${state.branch === \"feature\" ? \"selected\" : \"\"}>Feature branches</option></select></div>\n <div id=\"run-results\"></div></section>\n <div class=\"attention-strip\">${icon(\"alert\")}<p><strong>${jobs.filter((job) => job.status === \"failed\").length} failed runs</strong><span>A little attention goes a long way.</span></p><button class=\"text-button\" data-action=\"filter-failed\">Review failures ${icon(\"arrow\")}</button></div>`;\n renderResults();\n}\nfunction filteredJobs(includeStatus = true) {\n return jobs.filter((job) => {\n const text = [job.id, job.message, job.workflow.id, job.workflow.name, job.repo, job.commit, job.branch]\n .join(\" \")\n .toLowerCase();\n return (\n text.includes(state.search.trim().toLowerCase()) &&\n (state.workflow === \"all\" || job.workflow.id === state.workflow) &&\n (state.branch === \"all\" || (state.branch === \"main\" ? job.branch === \"main\" : job.branch !== \"main\")) &&\n (!includeStatus ||\n state.status === \"all\" ||\n (state.status === \"running\" ? [\"pending\", \"running\"].includes(job.status) : job.status === state.status))\n );\n });\n}\nfunction renderResults() {\n const filtered = filteredJobs();\n const all = filteredJobs(false);\n const pages = Math.max(1, Math.ceil(filtered.length / 8));\n state.page = Math.min(pages, state.page);\n const visible = filtered.slice((state.page - 1) * 8, state.page * 8);\n document.querySelector(\"#run-results\").innerHTML =\n `<div class=\"filter-tabs\" role=\"group\" aria-label=\"Filter by run status\">${[\n [\"all\", \"All runs\"],\n [\"running\", \"In progress\"],\n [\"failed\", \"Failed\"],\n [\"success\", \"Passed\"],\n ]\n .map(\n ([value, label]) =>\n `<button class=\"filter-tab ${state.status === value ? \"active\" : \"\"}\" data-action=\"status-filter\" data-value=\"${value}\" aria-pressed=\"${state.status === value}\">${label}<span class=\"count\">${all.filter((job) => value === \"all\" || (value === \"running\" ? [\"pending\", \"running\"].includes(job.status) : job.status === value)).length}</span></button>`,\n )\n .join(\"\")}</div>\n ${visible.length ? `<table class=\"run-table\"><caption class=\"sr-only\">Workflow runs, newest first</caption><thead><tr><th scope=\"col\">Workflow / commit</th><th scope=\"col\">Status</th><th scope=\"col\">Branch</th><th scope=\"col\">Duration</th><th scope=\"col\">Started</th></tr></thead><tbody>${visible.map((job) => `<tr><td><a class=\"run-link\" href=\"#/runs/${job.id}\" aria-label=\"Run ${job.id}: ${escape(job.workflow.name)}, ${labels[job.status]}\">${statusIcon(job.status)}<span class=\"run-copy\"><span class=\"run-title\">${job.workflow.name}</span><span class=\"run-subtitle\"><span class=\"mono\">#${job.id}</span><span class=\"separator\">·</span><span>cloud-cli/${job.repo}</span><span class=\"separator\">·</span><span class=\"mono\">${job.commit}</span></span></span></a></td><td>${badge(job.status)}</td><td><span class=\"branch\">${icon(\"branch\")}${escape(job.branch)}</span></td><td><span class=\"mono duration\">${duration(job.seconds)}</span></td><td>${job.time}</td></tr>`).join(\"\")}</tbody></table>` : `<div class=\"empty-state\">${icon(\"search\")}<h3>No runs found</h3><p>Try a different search or clear your filters.</p><button class=\"button\" data-action=\"clear-filters\">Clear filters</button></div>`}\n <div class=\"table-footer\"><span role=\"status\">${filtered.length ? `${(state.page - 1) * 8 + 1}–${Math.min(state.page * 8, filtered.length)} of ${filtered.length} runs` : \"0 runs\"}</span><div class=\"pagination\"><button class=\"button\" data-action=\"prev-page\" ${state.page === 1 ? \"disabled\" : \"\"}>${icon(\"back\")}Previous</button><span>${state.page} / ${pages}</span><button class=\"button\" data-action=\"next-page\" ${state.page === pages ? \"disabled\" : \"\"}>Next${icon(\"arrow\")}</button></div></div><div class=\"table-hint\">${icon(\"info\")}Open a run to explore its steps, logs, and execution history.</div>`;\n}\nfunction stepsFor(job) {\n return job.workflow.steps.map((name, index) => {\n let status = \"success\";\n if (job.status === \"failed\") {\n status = index < 2 ? \"success\" : index === 2 ? \"failed\" : \"skipped\";\n }\n if (job.status === \"running\") {\n status = index < 3 ? \"success\" : index === 3 ? \"running\" : \"pending\";\n }\n if (job.status === \"pending\") {\n status = \"pending\";\n }\n if (job.status === \"cancelled\") {\n status = index === 0 ? \"success\" : index === 1 ? \"cancelled\" : \"skipped\";\n }\n const seconds = [\"skipped\", \"pending\"].includes(status)\n ? 0\n : Math.round(job.seconds * [0.03, 0.24, 0.45, 0.2, 0.08][index]);\n return { name, status, seconds, index };\n });\n}\nfunction detailPage(job) {\n const steps = stepsFor(job);\n if (state.step === null) {\n state.step = Math.max(\n 0,\n steps.findIndex((step) => [\"failed\", \"running\"].includes(step.status)),\n );\n }\n const active = [\"running\", \"pending\"].includes(job.status);\n main.innerHTML = `<a href=\"#/runs\" class=\"back-link\">${icon(\"back\")}All runs</a><div class=\"page-heading run-heading\"><div><h1>${statusIcon(job.status)}${job.workflow.name}</h1><p class=\"subtitle\"><span class=\"mono\">#${job.id}</span><span>·</span><span>${escape(job.message)}</span></p></div><div class=\"heading-actions\"><button class=\"button\" data-action=\"download-logs\">${icon(\"download\")}Download logs</button><button class=\"button ${active ? \"danger\" : \"primary\"}\" data-action=\"${active ? \"cancel-run\" : \"rerun\"}\">${icon(active ? \"stop\" : \"refresh\")}${active ? \"Cancel run\" : \"Re-run workflow\"}</button></div></div>\n <section class=\"detail-meta\" aria-label=\"Run metadata\"><div><span class=\"meta-label\">STATUS</span><span class=\"meta-value\">${badge(job.status)}</span></div><div><span class=\"meta-label\">REPOSITORY / BRANCH</span><span class=\"meta-value\">${icon(\"branch\")}${escape(job.branch)}</span></div><div><span class=\"meta-label\">COMMIT</span><span class=\"meta-value mono\">${icon(\"commit\")}${job.commit}</span></div><div><span class=\"meta-label\">DURATION</span><span class=\"meta-value\">${icon(\"clock\")}${duration(job.seconds)}</span></div><div><span class=\"meta-label\">WORKER</span><span class=\"meta-value\">${icon(\"server\")}${job.worker || \"Awaiting worker\"}${job.worker ? '<span class=\"tag\">linux · x64</span>' : \"\"}</span></div></section>\n <div class=\"detail-tabs\" role=\"group\" aria-label=\"Run detail views\">${[\n [\"logs\", \"Logs & steps\", \"terminal\"],\n [\"inputs\", \"Inputs\", \"code\"],\n [\"artifacts\", \"Artifacts\", \"box\"],\n [\"history\", \"History\", \"history\"],\n ]\n .map(\n ([value, title, symbol]) =>\n `<button data-action=\"detail-tab\" data-value=\"${value}\" class=\"${state.detailTab === value ? \"active\" : \"\"}\" aria-pressed=\"${state.detailTab === value}\">${icon(symbol)}${title}${value === \"history\" ? `<span class=\"count\">${job.attempt}</span>` : \"\"}</button>`,\n )\n .join(\"\")}</div>\n <div id=\"detail-content\"></div>`;\n renderDetailContent(job);\n}\nfunction renderDetailContent(job) {\n const content = document.querySelector(\"#detail-content\");\n if (state.detailTab === \"inputs\") {\n content.innerHTML = `<section class=\"source-view\"><h3>Trigger inputs <span class=\"tag\">${job.parent ? \"manual restart\" : \"push event\"}</span></h3><pre>${escape(JSON.stringify({ repository: `cloud-cli/${job.repo}`, ref: `refs/heads/${job.branch}`, commit: job.commit, workflow: job.workflow.id, triggered_by: job.parent ? \"user:jamie\" : \"webhook:github\" }, null, 2))}</pre></section><section class=\"source-view\" style=\"margin-top:20px\"><h3>Workflow source · revision 12</h3><pre>${escape(workflowSource(job.workflow))}</pre></section>`;\n return;\n }\n if (state.detailTab === \"artifacts\") {\n content.innerHTML =\n job.status === \"success\"\n ? `<section class=\"settings-section\"><h2>Run artifacts <span class=\"count\">1</span></h2><div class=\"setting-row\"><div><strong>${icon(\"box\")} build-manifest.json</strong><p>Sample build metadata · JSON</p></div><button class=\"button\" data-action=\"artifact\">${icon(\"download\")}Download</button></div></section>`\n : `<div class=\"empty-state\">${icon(\"box\")}<h3>No artifacts yet</h3><p>${activeStatus(job) ? \"Artifacts appear here when the run completes.\" : \"This run did not produce any artifacts.\"}</p></div>`;\n return;\n }\n if (state.detailTab === \"history\") {\n const history = [];\n let current = job;\n while (current) {\n history.push(current);\n current = jobs.find((candidate) => candidate.id === current.parent);\n }\n content.innerHTML = `<section class=\"settings-section\"><h2>Execution history</h2>${history.map((entry) => `<div class=\"setting-row\"><div><strong><a href=\"#/runs/${entry.id}\">Run #${entry.id} · Attempt ${entry.attempt}</a></strong><p>${entry.parent ? `Re-run of #${entry.parent} · Triggered by Jamie` : \"Original run · Triggered by GitHub\"} · ${entry.time}</p></div>${badge(entry.status)}</div>`).join(\"\")}</section>`;\n return;\n }\n const steps = stepsFor(job);\n const selected = steps[state.step];\n content.innerHTML = `${job.status === \"failed\" ? `<div class=\"failure-banner\">${icon(\"alert\")}<div><strong>Run tests failed with exit code 1</strong><p>One test failed. The remaining steps were skipped.</p></div><button class=\"text-button\" data-action=\"jump-error\">Jump to error ${icon(\"arrow\")}</button></div>` : \"\"}\n <section class=\"execution\" aria-label=\"Execution steps and logs\"><aside class=\"steps-panel\" aria-label=\"Execution steps\"><div class=\"steps-heading\"><span>Execution steps</span><span class=\"mono\">${steps.filter((step) => step.status === \"success\").length} / ${steps.length}</span></div>${steps.map((step) => `<button class=\"step-button ${state.step === step.index ? \"active\" : \"\"}\" data-action=\"step\" data-value=\"${step.index}\" aria-pressed=\"${state.step === step.index}\" aria-label=\"${step.name}, ${labels[step.status]}\">${statusIcon(step.status)}<span>${step.name}</span><span class=\"mono\">${duration(step.seconds)}</span></button>`).join(\"\")}<div class=\"step-count\">${icon(\"clock\")}Total duration ${duration(job.seconds)}</div></aside>\n <div class=\"log-panel\"><div class=\"log-heading\"><h3>${selected.name}<small>${selected.status === \"failed\" ? \"exit code 1\" : labels[selected.status]}</small></h3><div class=\"log-actions\"><button class=\"icon-button\" data-action=\"wrap\" aria-label=\"Wrap log lines\" aria-pressed=\"${state.wrap}\" title=\"Wrap log lines\">${icon(\"wrap\")}</button><button class=\"icon-button\" data-action=\"copy-log\" aria-label=\"Copy step log\" title=\"Copy step log\">${icon(\"copy\")}</button></div></div><label class=\"log-search\">${icon(\"search\")}<span class=\"sr-only\">Search step log</span><input id=\"log-search\" type=\"search\" placeholder=\"Find in this step…\" value=\"${escape(state.logQuery)}\"/><span id=\"log-matches\"></span></label><div class=\"log-lines ${state.wrap ? \"wrap\" : \"\"}\" id=\"log-lines\" tabindex=\"0\" aria-label=\"Step log output\"></div><div class=\"log-bottom\"><span>${selected.status === \"failed\" ? \"Process exited with code 1\" : activeStatus(job) ? \"Sample execution output\" : \"End of step output\"}</span><span class=\"mono\">UTF-8</span></div></div></section>\n <div class=\"detail-bottom\"><span>${icon(\"lock\")}Logs are visible to workspace members.</span><span>cloud-cli/${job.repo}<span>·</span>Workflow revision 12<span>·</span>Attempt ${job.attempt}</span></div>`;\n renderLogs(job);\n}\nfunction activeStatus(job) {\n return [\"pending\", \"running\"].includes(job.status);\n}\nfunction logsFor(job, index) {\n const step = stepsFor(job)[index];\n if (step.status === \"skipped\") {\n return [{ text: \"Step skipped because an earlier step did not complete.\", type: \"dim\" }];\n }\n if (step.status === \"pending\") {\n return [{ text: \"Waiting for a worker…\", type: \"dim\" }];\n }\n if (step.status === \"failed\") {\n return [\n [\"$ pnpm test\", \"\"],\n [\"> @cloud-cli/on test\", \"dim\"],\n [\"> vitest run\", \"dim\"],\n [\"\", \"\"],\n [\" RUN v4.1.11 /workspace/cloud-cli/on\", \"\"],\n [\"\", \"\"],\n [\" ✓ src/config.spec.ts (8 tests) 14ms\", \"pass\"],\n [\" ✓ src/queue.spec.ts (12 tests) 31ms\", \"pass\"],\n [\" ❯ src/worker.spec.ts (6 tests | 1 failed) 89ms\", \"error\"],\n [\" × worker > retries a failed job\", \"error\"],\n [\"\", \"\"],\n [\" FAIL src/worker.spec.ts > worker > retries a failed job\", \"error\"],\n [\" AssertionError: expected 2 to equal 3\", \"error\"],\n [\"\", \"\"],\n [\" Expected: 3\", \"pass\"],\n [\" Received: 2\", \"error\"],\n [\"\", \"\"],\n [\" ❯ src/worker.spec.ts:142:28\", \"\"],\n [\" 140| await worker.retry(job);\", \"dim\"],\n [\" 141|\", \"dim\"],\n [\" 142| expect(job.attempts).toBe(3);\", \"error\"],\n [\" | ^\", \"error\"],\n [\"\", \"\"],\n [\" Test Files 1 failed | 2 passed (3)\", \"\"],\n [\" Tests 1 failed | 25 passed (26)\", \"\"],\n [\" Duration 1.42s\", \"dim\"],\n [\"\", \"\"],\n [\" ELIFECYCLE Test failed. See above for more details.\", \"error\"],\n ].map(([text, type]) => ({ text, type }));\n }\n const logs =\n index === 0\n ? [\n `$ git clone https://github.com/cloud-cli/${job.repo}.git .`,\n \"Cloning into '.'...\",\n \"remote: Enumerating objects: 184, done.\",\n \"remote: Compressing objects: 100% (92/92), done.\",\n \"Receiving objects: 100% (184/184), 148.2 KiB | 3.1 MiB/s, done.\",\n `$ git checkout ${job.commit}`,\n `HEAD is now at ${job.commit} ${job.message}`,\n \"\",\n \"✓ Repository ready.\",\n ]\n : index === 1\n ? [\n \"$ pnpm install --frozen-lockfile\",\n \"Lockfile is up to date, resolution step is skipped\",\n \"Progress: resolved 248, reused 248, downloaded 0, added 248\",\n \"\",\n \"✓ Dependencies installed from cache.\",\n \"Done in 2.4s.\",\n ]\n : index === 2\n ? [\n \"$ pnpm test\",\n \" RUN v4.1.11 /workspace\",\n \"\",\n \" ✓ src/config.spec.ts (8 tests)\",\n \" ✓ src/queue.spec.ts (12 tests)\",\n \" ✓ src/worker.spec.ts (6 tests)\",\n \"\",\n \" Test Files 3 passed (3)\",\n \" Tests 26 passed (26)\",\n \"\",\n \"✓ All tests passed.\",\n ]\n : [\n `$ ${job.workflow.id === \"build-docker-image\" ? \"docker build --tag app:latest .\" : \"pnpm build\"}`,\n \"#1 Loading build configuration\",\n \"#1 DONE 0.1s\",\n \"#2 Resolving dependencies\",\n \"#2 CACHED\",\n \"#3 Compiling source files\",\n \"#3 DONE 1.3s\",\n \"#4 Creating production bundle\",\n ...(step.status === \"running\"\n ? [\"#4 Building…\"]\n : [\"#4 DONE 0.8s\", \"\", \"✓ Step completed successfully.\"]),\n ];\n if (step.status === \"cancelled\") {\n logs.push(\"Run cancelled by Jamie.\");\n }\n return logs.map((text) => ({ text, type: text.startsWith(\"✓\") || text.includes(\" passed\") ? \"pass\" : \"\" }));\n}\nfunction renderLogs(job) {\n const logs = logsFor(job, state.step);\n const query = state.logQuery.toLowerCase();\n let matches = 0;\n document.querySelector(\"#log-lines\").innerHTML = logs\n .map((line, index) => {\n let text = escape(line.text);\n const position = query ? line.text.toLowerCase().indexOf(query) : -1;\n if (position >= 0) {\n matches++;\n text = `${escape(line.text.slice(0, position))}<mark>${escape(line.text.slice(position, position + query.length))}</mark>${escape(line.text.slice(position + query.length))}`;\n }\n return `<div class=\"log-line ${line.type}\" ${line.type === \"error\" ? 'data-error=\"true\"' : \"\"}><span class=\"line-number\">${index + 1}</span><span class=\"log-time\">12:04:${String(16 + Math.floor(index / 3)).padStart(2, \"0\")}</span><span class=\"line-text\">${text || \" \"}</span></div>`;\n })\n .join(\"\");\n document.querySelector(\"#log-matches\").textContent = query ? `${matches} matching lines` : \"\";\n}\nfunction workflowSource(workflow) {\n return `name: ${workflow.name}\\nruns-on: [${workflow.labels.join(\", \")}]\\n\\n# Illustrative workflow definition\\nsteps:\\n${workflow.steps.map((name, index) => ` - name: ${name}\\n run: ${['git checkout \"$COMMIT\"', \"pnpm install --frozen-lockfile\", \"pnpm test\", \"pnpm build\", 'echo \"Release complete\"'][index]}`).join(\"\\n\")}`;\n}\nfunction workflowsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Workflows</h1><p class=\"subtitle\">Your delivery process, clearly defined.</p></div><button class=\"button primary\" data-action=\"new-run\">${icon(\"plus\")}Run workflow</button></div><div class=\"cards\">${workflows.map((workflow, index) => `<article class=\"workflow-card\"><div class=\"card-heading\">${icon(\"workflow\")}<h2>${workflow.name}</h2><span class=\"tag\">Enabled</span></div><p class=\"card-description\">${workflow.description}</p><div class=\"card-details\">${workflow.labels.map((label) => `<span class=\"tag mono\">${label}</span>`).join(\"\")}<span class=\"tag\">${workflow.steps.length} steps</span></div><div class=\"card-footer\"><a class=\"text-button\" href=\"#/runs?workflow=${workflow.id}\">View runs ${icon(\"arrow\")}</a><button class=\"button\" data-action=\"workflow-source\" data-value=\"${index}\">${icon(\"code\")}View source</button></div></article>`).join(\"\")}</div>`;\n}\nfunction workersPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Workers</h1><p class=\"subtitle\">A clear view of your execution capacity.</p></div><span class=\"status success\">${icon(\"check\")}3 operational</span></div><div class=\"cards\">${[\n [\"alpha\", \"main-server, docker\", 36, 42, \"1 / 4\"],\n [\"bravo\", \"node, linux\", 12, 28, \"0 / 4\"],\n [\"charlie\", \"docker, linux\", 8, 21, \"0 / 2\"],\n ]\n .map(\n ([name, tags, cpu, memory, slots]) =>\n `<article class=\"worker-card\"><div class=\"card-heading\">${icon(\"server\")}<h2>${name}</h2><span class=\"status success\">Online</span></div><p class=\"card-description\">Linux x64 · systemd runner</p><div class=\"card-details\">${tags\n .split(\", \")\n .map((tag) => `<span class=\"tag mono\">${tag}</span>`)\n .join(\n \"\",\n )}</div><div class=\"worker-stats\"><div><span class=\"meta-label\">CPU <span>${cpu}%</span></span><div class=\"progress-track\"><div class=\"progress-fill\" style=\"width:${cpu}%\"></div></div></div><div><span class=\"meta-label\">Memory <span>${memory}%</span></span><div class=\"progress-track\"><div class=\"progress-fill\" style=\"width:${memory}%\"></div></div></div></div><div class=\"card-footer\"><span class=\"settings-note\">${slots} slots in use</span><span class=\"settings-note\">Sample snapshot</span></div></article>`,\n )\n .join(\n \"\",\n )}</div><p class=\"settings-note\" style=\"margin-top:22px\">Jobs are assigned to workers with matching labels. Capacity and health shown here are sample data.</p>`;\n}\nfunction getPreference(key) {\n try {\n return localStorage.getItem(`flow-concept-${key}`) === \"true\";\n } catch {\n return false;\n }\n}\nfunction settingsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Settings</h1><p class=\"subtitle\">The essentials for your workspace.</p></div></div><section class=\"settings-section\"><h2>Preferences</h2><label class=\"setting-row\"><span><strong>Compact run list</strong><span class=\"settings-note\">Fit more activity on your screen.</span></span><input type=\"checkbox\" id=\"compact-setting\" ${getPreference(\"compact\") ? \"checked\" : \"\"}/></label><label class=\"setting-row\"><span><strong>Wrap log lines</strong><span class=\"settings-note\">Keep long output within the log viewer.</span></span><input type=\"checkbox\" id=\"wrap-setting\" ${state.wrap ? \"checked\" : \"\"}/></label></section><section class=\"settings-section\"><h2>${icon(\"lock\")} Secrets</h2><p class=\"settings-note\">Available to workflows. Values are never displayed in the dashboard.</p>${[\"NPM_TOKEN\", \"REGISTRY_PASSWORD\", \"DEPLOY_KEY\"].map((name) => `<div class=\"setting-row\"><div><strong class=\"mono\">${name}</strong><p>Workspace secret · Example</p></div><span class=\"secret-value\" aria-label=\"Value hidden\">••••••••••••</span></div>`).join(\"\")}</section><section class=\"settings-section\"><h2>About this concept</h2><p class=\"settings-note\">An interactive design prototype based on Flow’s job list and run details. Runs, logs, workers, and secret names are sample data. Run controls update this browser session. Display preferences are saved on this device.</p><div class=\"setting-row\"><span class=\"settings-note\">Explore without setup.</span><button class=\"button\" data-action=\"shortcuts\">${icon(\"keyboard\")}Keyboard shortcuts</button></div></section>`;\n}\nfunction openDialog(title, body) {\n dialog.innerHTML = `<div class=\"dialog-heading\"><h2 id=\"dialog-title\">${title}</h2><button class=\"icon-button\" data-action=\"close-dialog\" aria-label=\"Close dialog\">${icon(\"close\")}</button></div>${body}`;\n if (!dialog.open) {\n dialog.showModal();\n }\n}\nfunction newRunDialog() {\n openDialog(\n \"Run a workflow\",\n `<p class=\"dialog-description\">Choose what to run. We’ll take it from here.</p><form id=\"new-run-form\"><label class=\"form-field\"><span>Workflow</span><select name=\"workflow\">${workflows.map((workflow) => `<option value=\"${workflow.id}\">${workflow.name}</option>`).join(\"\")}</select></label><label class=\"form-field\"><span>Branch</span><input name=\"branch\" value=\"main\" required maxlength=\"100\" pattern=\"[a-zA-Z0-9._\\\\x2f\\\\x2d]+\"/></label><p class=\"dialog-note\">Prototype mode: creates a sample queued run in this session.</p><div class=\"dialog-footer\"><button class=\"button\" type=\"button\" data-action=\"close-dialog\">Cancel</button><button class=\"button primary\" type=\"submit\">${icon(\"runs\")}Run workflow</button></div></form>`,\n );\n}\nfunction createRun(original, workflow, branch) {\n const job = {\n id: Math.max(...jobs.map((entry) => entry.id)) + 1,\n workflow,\n branch,\n status: \"pending\",\n message: original?.message || \"Manually triggered workflow\",\n commit: original?.commit || \"a8f3c12\",\n seconds: 0,\n time: \"Just now\",\n repo: original?.repo || \"on\",\n worker: null,\n parent: original?.id || null,\n attempt: original ? original.attempt + 1 : 1,\n };\n jobs.unshift(job);\n dialog.close();\n window.location.hash = `/runs/${job.id}`;\n toast(`Sample run #${job.id} queued.`);\n}\nfunction download(name, text) {\n const url = URL.createObjectURL(new Blob([text], { type: \"text/plain;charset=utf-8\" }));\n const anchor = document.createElement(\"a\");\n anchor.href = url;\n anchor.download = name;\n anchor.click();\n setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 1000);\n}\nfunction render() {\n const { path } = route();\n const page = path.split(\"/\")[1] || \"runs\";\n const changed = previousRoute !== path;\n if (changed) {\n state.step = null;\n state.detailTab = \"logs\";\n state.logQuery = \"\";\n }\n previousRoute = path;\n navigation([\"runs\", \"workflows\", \"workers\", \"settings\"].includes(page) ? page : \"runs\");\n if (path === \"/runs\") {\n readFilters();\n runsPage();\n } else if (page === \"runs\" && currentJob()) {\n detailPage(currentJob());\n } else if (page === \"workflows\") {\n workflowsPage();\n } else if (page === \"workers\") {\n workersPage();\n } else if (page === \"settings\") {\n settingsPage();\n } else {\n main.innerHTML = `<div class=\"empty-state\">${icon(\"search\")}<h1>Run not found</h1><p>This run is not part of the sample workspace.</p><a class=\"button\" href=\"#/runs\">Back to runs</a></div>`;\n }\n if (changed) {\n window.scrollTo(0, 0);\n main.focus({ preventScroll: true });\n }\n}\ndocument.addEventListener(\"click\", async (event) => {\n const button = event.target.closest(\"[data-action]\");\n if (!button) {\n return;\n }\n const { action, value } = button.dataset;\n const job = currentJob();\n if (action === \"new-run\") {\n newRunDialog();\n }\n if (action === \"close-dialog\") {\n dialog.close();\n }\n if (action === \"filter-failed\" || action === \"status-filter\") {\n state.status = action === \"filter-failed\" ? \"failed\" : value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n document.querySelector(`.filter-tab[data-value=\"${state.status}\"]`).focus({ preventScroll: true });\n }\n if (action === \"clear-filters\") {\n Object.assign(state, { search: \"\", status: \"all\", workflow: \"all\", branch: \"all\", page: 1 });\n updateFilterUrl();\n runsPage();\n document.querySelector(\"#run-search\").focus();\n }\n if (action === \"prev-page\" || action === \"next-page\") {\n state.page += action === \"next-page\" ? 1 : -1;\n updateFilterUrl();\n renderResults();\n document.querySelector(`button[data-action=\"${action}\"]:not(:disabled)`)?.focus({ preventScroll: true });\n }\n if (action === \"detail-tab\") {\n state.detailTab = value;\n detailPage(job);\n document.querySelector(`[data-action=\"detail-tab\"][data-value=\"${value}\"]`).focus({ preventScroll: true });\n }\n if (action === \"step\") {\n state.step = Number(value);\n state.logQuery = \"\";\n renderDetailContent(job);\n document.querySelector(`[data-action=\"step\"][data-value=\"${value}\"]`).focus({ preventScroll: true });\n }\n if (action === \"jump-error\") {\n state.step = 2;\n state.logQuery = \"\";\n renderDetailContent(job);\n document.querySelector(\"[data-error]\")?.scrollIntoView({ block: \"nearest\" });\n document.querySelector(\"#log-lines\").focus({ preventScroll: true });\n }\n if (action === \"wrap\") {\n state.wrap = !state.wrap;\n document.querySelector(\"#log-lines\").classList.toggle(\"wrap\", state.wrap);\n button.setAttribute(\"aria-pressed\", String(state.wrap));\n }\n if (action === \"copy-log\") {\n try {\n await navigator.clipboard.writeText(\n logsFor(job, state.step)\n .map((line) => line.text)\n .join(\"\\n\"),\n );\n toast(\"Step log copied.\");\n } catch {\n toast(\"Clipboard unavailable. Use Download logs to save the output.\");\n }\n }\n if (action === \"download-logs\") {\n download(\n `flow-run-${job.id}.log`,\n job.workflow.steps\n .map(\n (name, index) =>\n `=== ${name} ===\\n${logsFor(job, index)\n .map((line) => line.text)\n .join(\"\\n\")}`,\n )\n .join(\"\\n\\n\"),\n );\n toast(\"Run log downloaded.\");\n }\n if (action === \"artifact\") {\n download(\n `run-${job.id}-build-manifest.json`,\n JSON.stringify({ sample: true, run: job.id, commit: job.commit, workflow: job.workflow.id }, null, 2),\n );\n }\n if (action === \"rerun\") {\n createRun(job, job.workflow, job.branch);\n }\n if (action === \"cancel-run\") {\n job.status = \"cancelled\";\n state.step = null;\n navigation(\"runs\");\n detailPage(job);\n toast(`Sample run #${job.id} cancelled.`);\n }\n if (action === \"workflow-source\") {\n const workflow = workflows[Number(value)];\n openDialog(\n workflow.name,\n `<p class=\"dialog-description\">Illustrative YAML · revision 12</p><div class=\"source-view\"><pre>${escape(workflowSource(workflow))}</pre></div><div class=\"dialog-footer\"><button class=\"button\" data-action=\"close-dialog\">Close</button></div>`,\n );\n }\n if (action === \"preferences\") {\n window.location.hash = \"/settings\";\n }\n if (action === \"shortcuts\") {\n openDialog(\n \"A few useful shortcuts\",\n `<p class=\"dialog-description\">Less clicking. More getting things done.</p><div class=\"shortcut-row\"><span>Search runs</span><kbd>/</kbd></div><div class=\"shortcut-row\"><span>Run a workflow</span><kbd>N</kbd></div><div class=\"shortcut-row\"><span>Show shortcuts</span><kbd>?</kbd></div><div class=\"shortcut-row\"><span>Close dialog</span><kbd>Esc</kbd></div><div class=\"dialog-footer\"><button class=\"button primary\" data-action=\"close-dialog\">Got it</button></div>`,\n );\n }\n});\ndocument.addEventListener(\"input\", (event) => {\n if (event.target.id === \"run-search\") {\n state.search = event.target.value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n }\n if (event.target.id === \"log-search\") {\n state.logQuery = event.target.value;\n renderLogs(currentJob());\n }\n});\ndocument.addEventListener(\"change\", (event) => {\n if ([\"workflow-filter\", \"branch-filter\"].includes(event.target.id)) {\n state[event.target.id === \"workflow-filter\" ? \"workflow\" : \"branch\"] = event.target.value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n }\n if ([\"compact-setting\", \"wrap-setting\"].includes(event.target.id)) {\n const key = event.target.id === \"compact-setting\" ? \"compact\" : \"wrap\";\n if (key === \"compact\") {\n document.body.classList.toggle(\"compact\", event.target.checked);\n } else {\n state.wrap = event.target.checked;\n }\n try {\n localStorage.setItem(`flow-concept-${key}`, event.target.checked);\n toast(\"Preference saved on this device.\");\n } catch {\n toast(\"Preference applied for this session.\");\n }\n }\n});\ndocument.addEventListener(\"submit\", (event) => {\n if (event.target.id === \"new-run-form\") {\n event.preventDefault();\n createRun(\n null,\n workflows.find((workflow) => workflow.id === event.target.elements.workflow.value),\n event.target.elements.branch.value.trim(),\n );\n }\n});\ndocument.addEventListener(\"keydown\", (event) => {\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n event.target.closest('input,select,textarea,[contenteditable=\"true\"]') ||\n dialog.open\n ) {\n return;\n }\n if (event.key === \"/\" && route().path === \"/runs\") {\n event.preventDefault();\n document.querySelector(\"#run-search\").focus();\n }\n if (event.key.toLowerCase() === \"n\") {\n event.preventDefault();\n newRunDialog();\n }\n if (event.key === \"?\") {\n event.preventDefault();\n document.querySelector('[data-action=\"shortcuts\"]').click();\n }\n});\nwindow.addEventListener(\"hashchange\", render);\ndocument.querySelectorAll(\"[data-icon]\").forEach((element) => {\n element.innerHTML = icon(element.dataset.icon);\n});\ndocument.body.classList.toggle(\"compact\", getPreference(\"compact\"));\nstate.wrap = getPreference(\"wrap\");\nrender();\n", dg = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#f7f8f6\" />\n <meta name=\"description\" content=\"Flow — a quieter place to ship. An interactive CI dashboard design concept.\" />\n <title>Runs · Flow</title>\n <link\n rel=\"icon\"\n href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23244336'/%3E%3Cpath d='M9 10h14M9 16h10M9 22h6' stroke='%23c4efad' stroke-width='3'/%3E%3C/svg%3E\"\n />\n <link rel=\"stylesheet\" href=\"./style.css\" />\n <script src=\"./app.js\" defer><\/script>\n </head>\n <body>\n <a href=\"#main\" class=\"skip-link\">Skip to content</a>\n <aside class=\"sidebar\" aria-label=\"Workspace navigation\">\n <a class=\"brand\" href=\"#/runs\" aria-label=\"Flow home\"\n ><span class=\"brand-mark\"><i></i><i></i><i></i></span>flow<span class=\"brand-period\">.</span></a\n >\n <div class=\"workspace\">\n <span class=\"workspace-icon\">a</span>\n <div><strong>Apphor</strong><span>Engineering workspace</span></div>\n <span class=\"workspace-label\">PRO</span>\n </div>\n <div class=\"nav-caption\">WORKSPACE</div>\n <nav id=\"navigation\"></nav>\n <div class=\"sidebar-bottom\">\n <div class=\"runner-health\">\n <span class=\"health-dot\"></span><span>Runners operational</span><span class=\"mono\">3/3</span>\n </div>\n <button class=\"profile\" data-action=\"preferences\">\n <span class=\"avatar\">JD</span><span><strong>Jamie Davis</strong><small>Workspace admin</small></span\n ><span data-icon=\"settings\"></span>\n </button>\n </div>\n </aside>\n <div class=\"app-shell\">\n <header class=\"topbar\">\n <div class=\"breadcrumbs\" id=\"breadcrumbs\"></div>\n <div class=\"topbar-right\">\n <span class=\"demo-label\"><span></span>Interactive concept</span\n ><button\n class=\"icon-button\"\n data-action=\"shortcuts\"\n aria-label=\"Keyboard shortcuts\"\n title=\"Keyboard shortcuts\"\n >\n <span data-icon=\"keyboard\"></span></button\n ><span class=\"avatar small\">JD</span>\n </div>\n </header>\n <main id=\"main\" tabindex=\"-1\"></main>\n <footer class=\"page-footer\">\n <span><span class=\"footer-mark\">⌁</span> Less friction. More shipping.</span\n ><span>Flow UI concept <span class=\"footer-dot\">·</span> Sample data</span>\n </footer>\n </div>\n <dialog id=\"dialog\" aria-labelledby=\"dialog-title\"></dialog>\n <div id=\"toast\" role=\"status\" class=\"toast\" hidden></div>\n </body>\n</html>\n", fg = "@import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap\");\n\n:root {\n --bg: #f3f5f1;\n --sidebar: #e9eee6;\n --ink: #1a1e22;\n --muted: #505b52;\n --line: #cbd3c8;\n --subtle: #fafbf8;\n --green: #387045;\n --green-bg: #e8f0e5;\n --accent: #c8e6a8;\n --red: #b54138;\n --red-bg: #fee2e2;\n --blue: #4a66a0;\n --blue-bg: #e8eef6;\n --amber: #845e1c;\n font-family:\n \"DM Sans\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n sans-serif;\n color: var(--ink);\n font-size: 15px;\n font-synthesis: none;\n}\n* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n background: var(--bg);\n}\nbutton,\ninput,\nselect {\n font: inherit;\n}\nbutton,\na,\ninput,\nselect,\nsummary {\n -webkit-tap-highlight-color: transparent;\n}\nbutton,\nselect,\nsummary {\n cursor: pointer;\n}\nbutton {\n color: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\nbutton {\n border: 0;\n background: none;\n}\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n:focus-visible {\n outline: 2px solid #467b40;\n outline-offset: 4px;\n}\ninput:focus-visible,\nselect:focus-visible {\n outline-offset: 1px;\n}\nbutton,\na {\n touch-action: manipulation;\n}\nsvg {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n vertical-align: middle;\n}\nh1,\nh2,\nh3,\np {\n margin: 0;\n}\n.mono,\ncode,\nkbd,\npre {\n font-family: \"IBM Plex Mono\", monospace;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.skip-link {\n position: fixed;\n top: -60px;\n left: 20px;\n z-index: 100;\n background: var(--ink);\n color: white;\n padding: 12px;\n}\n.skip-link:focus {\n top: 10px;\n}\n.sidebar {\n width: 224px;\n position: fixed;\n inset: 0 auto 0 0;\n background: var(--sidebar);\n border-right: 1px solid var(--line);\n padding: 32px 17px 18px;\n display: flex;\n flex-direction: column;\n}\n.brand {\n display: flex;\n align-items: center;\n font-size: 33px;\n font-weight: 700;\n letter-spacing: -1.9px;\n padding: 0 13px;\n width: fit-content;\n}\n.brand-period {\n color: #729b5b;\n}\n.brand-mark {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 5px;\n width: 31px;\n height: 34px;\n margin-right: 10px;\n transform: skewY(-13deg);\n}\n.brand-mark i {\n display: block;\n width: 27px;\n height: 5px;\n border-radius: 2px;\n background: #547d42;\n}\n.brand-mark i:nth-child(2) {\n width: 20px;\n}\n.brand-mark i:nth-child(3) {\n width: 13px;\n}\n.workspace {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 38px 2px 30px;\n padding: 12px 10px;\n border: 1px solid var(--line);\n border-radius: 7px;\n background: var(--subtle);\n}\n.workspace-icon {\n display: grid;\n place-items: center;\n width: 30px;\n height: 31px;\n border: 1px solid #e2e7dc;\n border-radius: 5px;\n background: #edf1e7;\n font-weight: 700;\n font-size: 19px;\n}\n.workspace strong {\n display: block;\n font-size: 13px;\n font-weight: 600;\n}\n.workspace div > span {\n display: block;\n font-size: 13px;\n margin-top: 3px;\n color: var(--muted);\n}\n.workspace-label {\n margin-left: auto;\n font-size: 13px;\n border: 1px solid var(--line);\n padding: 2px 4px;\n color: var(--muted);\n border-radius: 3px;\n}\n.nav-caption {\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1.4px;\n color: var(--muted);\n padding: 0 13px;\n margin-bottom: 12px;\n}\nnav {\n display: grid;\n gap: 5px;\n}\n.nav-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n border-radius: 6px;\n color: var(--ink);\n font-size: 13px;\n font-weight: 500;\n}\n.nav-item:hover {\n background: var(--subtle);\n}\n.nav-item.active {\n background: #e8efdf;\n color: #344d29;\n}\n.nav-item svg {\n width: 17px;\n height: 17px;\n}\n.nav-count {\n margin-left: auto;\n font-size: 13px;\n background: #e2e8dc;\n padding: 2px 6px;\n border-radius: 4px;\n}\n.sidebar-bottom {\n margin-top: auto;\n}\n.runner-health {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n padding: 18px 8px;\n color: var(--muted);\n}\n.runner-health .mono {\n margin-left: auto;\n font-size: 10px;\n}\n.health-dot {\n width: 6px;\n height: 6px;\n background: #699d55;\n border-radius: 50%;\n flex-shrink: 0;\n}\n.profile {\n border-top: 1px solid var(--line);\n padding: 19px 5px 0;\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n text-align: left;\n}\n.avatar {\n display: grid;\n place-items: center;\n background: #ebe6d9;\n color: #756a50;\n width: 33px;\n height: 33px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 600;\n flex-shrink: 0;\n}\n.profile strong {\n display: block;\n font-size: 13px;\n font-weight: 550;\n}\n.profile small {\n display: block;\n font-size: 13px;\n color: var(--muted);\n margin-top: 3px;\n}\n.profile > span:last-child {\n margin-left: auto;\n color: var(--muted);\n}\n.small {\n width: 27px;\n height: 27px;\n font-size: 10px;\n}\n.app-shell {\n margin-left: 224px;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n.topbar {\n height: 72px;\n border-bottom: 1px solid var(--line);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 42px;\n gap: 15px;\n}\n.breadcrumbs {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #737a70;\n}\n.breadcrumbs a:hover {\n color: var(--ink);\n}\n.breadcrumbs .divider {\n color: #c5c9c1;\n}\n.breadcrumbs strong {\n color: #434b40;\n font-weight: 500;\n}\n.topbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n.demo-label {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: var(--muted);\n}\n.demo-label > span {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: #8c9c7f;\n}\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n min-height: 32px;\n border-radius: 5px;\n color: var(--muted);\n}\n.icon-button:hover {\n background: #edf0e8;\n color: var(--ink);\n}\nmain {\n width: 100%;\n max-width: 1600px;\n margin: 0 auto;\n padding: 43px 42px 30px;\n}\nmain:focus-visible {\n outline: none;\n}\n.page-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n margin-bottom: 32px;\n}\nh1 {\n font-size: 29px;\n letter-spacing: -1px;\n font-weight: 550;\n line-height: 1.25;\n}\n.subtitle {\n color: var(--muted);\n font-size: 12px;\n margin-top: 9px;\n line-height: 1.7;\n}\n.heading-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 7px;\n padding: 10px 13px;\n border: 1px solid #dfe4d9;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 550;\n min-height: 36px;\n background: var(--bg);\n white-space: nowrap;\n}\n.button svg {\n width: 14px;\n height: 14px;\n}\n.button:hover {\n background: var(--subtle);\n border-color: #c8d0bf;\n}\n.button.primary {\n background: var(--accent);\n border-color: #b6d79d;\n color: #2c4320;\n}\n.button.primary:hover {\n background: #b7e198;\n}\n.button.danger {\n color: var(--red);\n border-color: #edcdc8;\n}\n.text-button {\n color: #52644b;\n font-size: 13px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n.text-button:hover {\n text-decoration: underline;\n}\n.text-button svg {\n width: 13px;\n}\n.overview {\n display: grid;\n grid-template-columns: 1.08fr 1.08fr 1fr 1fr;\n border: 1px solid var(--line);\n border-radius: 8px;\n margin-bottom: 31px;\n background: linear-gradient(110deg, #fcfdf9, #fff);\n overflow: hidden;\n}\n.metric {\n position: relative;\n padding: 22px 24px;\n min-height: 117px;\n}\n.metric + .metric::before {\n content: \"\";\n position: absolute;\n width: 1px;\n background: var(--line);\n top: 23px;\n bottom: 23px;\n left: 0;\n}\n.metric-label {\n display: flex;\n gap: 7px;\n align-items: center;\n font-size: 13px;\n color: #70786a;\n}\n.metric-label svg {\n width: 13px;\n height: 13px;\n color: #8a9482;\n}\n.metric-bottom {\n display: flex;\n align-items: baseline;\n gap: 10px;\n margin-top: 13px;\n}\n.metric-value {\n font-size: 27px;\n letter-spacing: -1px;\n font-weight: 500;\n}\n.metric-value small {\n font-size: 15px;\n letter-spacing: 0;\n}\n.metric-note {\n font-size: 13px;\n color: #69765f;\n}\n.metric-note span {\n color: var(--green);\n}\n.tiny-bars {\n display: flex;\n gap: 3px;\n align-items: end;\n height: 25px;\n margin-left: auto;\n}\n.tiny-bars i {\n width: 5px;\n background: #c4d9b2;\n border-radius: 2px;\n}\n.metric-foot {\n margin-top: 7px;\n font-size: 10px;\n color: #858b7f;\n}\n.section-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n margin-bottom: 17px;\n}\nh2 {\n font-size: 14px;\n font-weight: 550;\n letter-spacing: -0.2px;\n}\n.section-heading h2 {\n display: flex;\n gap: 9px;\n align-items: center;\n}\n.count {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 10px;\n font-weight: 400;\n background: #f0f2ed;\n color: #747d6d;\n border: 1px solid #e7ebe1;\n border-radius: 4px;\n padding: 2px 5px;\n}\n.section-heading > span {\n color: var(--muted);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.section-heading > span svg {\n width: 12px;\n height: 12px;\n}\n.filters {\n display: flex;\n gap: 9px;\n align-items: center;\n margin-bottom: 15px;\n}\n.search-box {\n display: flex;\n align-items: center;\n gap: 9px;\n border: 1px solid var(--line);\n border-radius: 6px;\n height: 35px;\n padding: 0 10px;\n min-width: 0;\n background: white;\n}\n.search-box svg {\n width: 14px;\n height: 14px;\n color: #8a9184;\n}\n.search-box input {\n border: 0;\n min-width: 0;\n width: 100%;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font-size: 13px;\n}\n.search-box:focus-within {\n border-color: #729859;\n box-shadow: 0 0 0 2px #edf5e8;\n}\n.search-box input::placeholder {\n color: #899080;\n}\n.filters .search-box {\n width: 300px;\n margin-right: auto;\n}\nkbd {\n font-size: 10px;\n border: 1px solid #e6e9e1;\n padding: 1px 4px;\n color: #838b7a;\n border-radius: 3px;\n}\n.select-filter {\n border: 1px solid var(--line);\n background: white;\n border-radius: 6px;\n padding: 8px 28px 8px 11px;\n color: #666f5e;\n font-size: 13px;\n height: 35px;\n max-width: 170px;\n}\n.filter-tabs {\n display: flex;\n gap: 23px;\n border-bottom: 1px solid var(--line);\n margin-bottom: 0;\n}\n.filter-tab {\n padding: 1px 0 13px;\n font-size: 13px;\n color: var(--muted);\n border-bottom: 2px solid transparent;\n display: flex;\n align-items: center;\n gap: 7px;\n margin-bottom: -1px;\n}\n.filter-tab.active {\n color: var(--ink);\n border-bottom-color: #5c7a46;\n font-weight: 550;\n}\n.filter-tab .count {\n border: 0;\n background: #f0f2ec;\n padding: 1px 5px;\n font-size: 10px;\n}\n.filter-tab.active .count {\n background: #eaf1e1;\n color: #536d40;\n}\n.run-table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n table-layout: fixed;\n}\n.run-table th {\n font-weight: 400;\n font-size: 12px;\n color: #808877;\n padding: 14px 10px;\n background: #fafbf8;\n border-bottom: 1px solid var(--line);\n}\n.run-table th:first-child {\n padding-left: 15px;\n width: 44%;\n}\n.run-table th:nth-child(2) {\n width: 16%;\n}\n.run-table th:nth-child(3) {\n width: 17%;\n}\n.run-table th:nth-child(4) {\n width: 11%;\n}\n.run-table th:last-child {\n width: 12%;\n text-align: right;\n padding-right: 17px;\n}\n.run-table td {\n padding: 18px 10px;\n border-bottom: 1px solid var(--line);\n font-size: 13px;\n color: #747c6c;\n}\n.run-table td:first-child {\n padding-left: 15px;\n}\n.run-table td:last-child {\n text-align: right;\n padding-right: 17px;\n}\n.run-table tr:hover td {\n background: #fafbf8;\n}\n.run-link {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n.run-title {\n display: block;\n font-size: 13px;\n color: #30382c;\n font-weight: 550;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.run-copy {\n min-width: 0;\n}\n.run-subtitle {\n font-size: 13px;\n color: #818878;\n margin-top: 5px;\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.run-subtitle .mono {\n font-size: 10px;\n}\n.run-subtitle .separator {\n color: #bdc4b5;\n}\n.status-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 21px;\n height: 21px;\n}\n.status-icon svg {\n width: 18px;\n height: 18px;\n}\n.status-icon.success {\n color: #6b9355;\n}\n.status-icon.failed {\n color: #cc7064;\n}\n.status-icon.running {\n color: #647fab;\n}\n.status-icon.pending {\n color: #af955e;\n}\n.status-icon.cancelled,\n.status-icon.skipped {\n color: #91998a;\n}\n.status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n border-radius: 5px;\n padding: 4px 7px;\n white-space: nowrap;\n}\n.status .status-icon {\n width: 11px;\n height: 11px;\n}\n.status .status-icon svg {\n width: 11px;\n height: 11px;\n}\n.status.success {\n background: var(--green-bg);\n color: var(--green);\n}\n.status.failed {\n background: var(--red-bg);\n color: var(--red);\n}\n.status.running {\n background: var(--blue-bg);\n color: var(--blue);\n}\n.status.pending {\n background: #faf4e6;\n color: var(--amber);\n}\n.status.cancelled,\n.status.skipped {\n background: #f0f2ed;\n color: #737c68;\n}\n.branch {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font-size: 13px;\n}\n.branch svg {\n width: 12px;\n height: 12px;\n}\n.duration {\n font-size: 13px;\n color: var(--muted);\n}\n.table-footer {\n padding: 18px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n font-size: 13px;\n color: #838b7b;\n}\n.pagination {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n.pagination .button {\n padding: 6px 9px;\n min-height: 28px;\n font-size: 13px;\n}\n.table-hint {\n display: flex;\n align-items: center;\n gap: 5px;\n color: #8b9186;\n font-size: 10px;\n}\n.table-hint svg {\n width: 11px;\n height: 11px;\n}\n.attention-strip {\n display: flex;\n align-items: center;\n gap: 12px;\n border: 1px solid #e8e4d8;\n border-radius: 7px;\n padding: 15px 17px;\n margin-top: 18px;\n background: #fcfbf7;\n}\n.attention-strip > svg {\n color: #aa8c50;\n width: 17px;\n}\n.attention-strip p {\n font-size: 13px;\n color: #5f6153;\n}\n.attention-strip p span {\n color: #89907f;\n margin-left: 5px;\n}\n.attention-strip .text-button {\n margin-left: auto;\n white-space: nowrap;\n}\n.page-footer {\n margin: auto 42px 0;\n padding: 25px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: #8b9382;\n font-size: 10px;\n border-top: 1px solid var(--line);\n}\n.footer-mark {\n font-size: 19px;\n color: #45643c;\n margin-right: 5px;\n vertical-align: middle;\n}\n.footer-dot {\n margin: 0 7px;\n color: #b4bdae;\n}\n.back-link {\n display: inline-flex;\n gap: 7px;\n align-items: center;\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 22px;\n}\n.back-link svg {\n width: 13px;\n height: 13px;\n}\n.run-heading h1 {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 26px;\n}\n.run-heading h1 .status-icon {\n width: 27px;\n height: 27px;\n}\n.run-heading h1 .status-icon svg {\n width: 25px;\n height: 25px;\n}\n.run-heading .subtitle {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n align-items: center;\n margin-left: 38px;\n font-size: 13px;\n}\n.run-heading .subtitle .mono {\n font-size: 13px;\n}\n.detail-meta {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n border: 1px solid var(--line);\n border-radius: 7px;\n padding: 19px 22px;\n gap: 20px;\n margin-bottom: 26px;\n}\n.meta-label {\n display: block;\n font-size: 10px;\n color: #7b8571;\n margin-bottom: 10px;\n}\n.meta-value {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.meta-value svg {\n width: 13px;\n height: 13px;\n color: #939c88;\n}\n.detail-tabs {\n display: flex;\n gap: 25px;\n border-bottom: 1px solid var(--line);\n margin-bottom: 22px;\n}\n.detail-tabs button {\n padding: 0 1px 13px;\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: #7b8373;\n border-bottom: 2px solid transparent;\n}\n.detail-tabs button svg {\n width: 14px;\n height: 14px;\n}\n.detail-tabs button.active {\n color: #34422b;\n border-bottom-color: #657d4f;\n}\n.failure-banner {\n padding: 14px 17px;\n background: #fdf6f3;\n border: 1px solid #f0ddd5;\n display: flex;\n gap: 12px;\n align-items: center;\n border-radius: 6px;\n margin-bottom: 20px;\n}\n.failure-banner > svg {\n color: #bf7864;\n}\n.failure-banner strong {\n font-size: 13px;\n font-weight: 550;\n color: #8e5746;\n}\n.failure-banner p {\n font-size: 13px;\n color: #9b7d6c;\n margin-top: 4px;\n}\n.failure-banner button {\n margin-left: auto;\n color: #9f5e4b;\n white-space: nowrap;\n}\n.execution {\n display: grid;\n grid-template-columns: 226px minmax(0, 1fr);\n border: 1px solid var(--line);\n border-radius: 7px;\n overflow: hidden;\n min-height: 385px;\n}\n.steps-panel {\n background: #fafbf8;\n border-right: 1px solid var(--line);\n padding: 17px 10px;\n}\n.steps-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2px 10px 16px;\n font-size: 13px;\n color: #656e5d;\n}\n.steps-heading .mono {\n font-size: 10px;\n color: #8e9685;\n}\n.step-button {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 9px;\n padding: 12px 10px;\n border: 1px solid transparent;\n border-radius: 5px;\n text-align: left;\n margin-bottom: 3px;\n font-size: 13px;\n color: #626c58;\n}\n.step-button .status-icon,\n.step-button .status-icon svg {\n width: 14px;\n height: 14px;\n}\n.step-button .mono {\n margin-left: auto;\n font-size: 10px;\n color: #87907c;\n}\n.step-button.active {\n border-color: #e2e5dc;\n background: white;\n box-shadow: 0 1px 3px #23351204;\n color: #303e25;\n}\n.step-button:hover {\n background: #f0f3eb;\n}\n.step-count {\n border-top: 1px solid var(--line);\n padding: 16px 10px 0;\n margin-top: 18px;\n font-size: 10px;\n color: #7d8672;\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.step-count svg {\n width: 12px;\n height: 12px;\n}\n.log-panel {\n min-width: 0;\n background: #1c211e;\n color: #c9d0c5;\n display: flex;\n flex-direction: column;\n}\n.log-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 19px;\n border-bottom: 1px solid #343b31;\n background: #252b26;\n gap: 10px;\n}\n.log-heading h3 {\n font-size: 13px;\n font-weight: 500;\n color: #dce2d7;\n}\n.log-heading h3 small {\n margin-left: 8px;\n color: #adba9f;\n font-size: 10px;\n font-weight: 400;\n}\n.log-actions {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.log-actions .icon-button {\n color: #a6b09e;\n min-height: 25px;\n min-width: 25px;\n}\n.log-actions .icon-button:hover {\n background: #3d453a;\n color: white;\n}\n.log-actions svg {\n width: 14px;\n height: 14px;\n}\n.log-search {\n border-bottom: 1px solid #343b31;\n padding: 9px 17px;\n display: flex;\n align-items: center;\n gap: 7px;\n}\n.log-search svg {\n color: #8b9983;\n width: 13px;\n}\n.log-search input {\n width: 100%;\n min-width: 0;\n background: none;\n border: 0;\n color: #d6dfce;\n outline: none;\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 13px;\n}\n.log-search input::placeholder {\n color: #8d9b85;\n}\n.log-search:focus-within {\n box-shadow: inset 0 0 0 1px #a0c983;\n}\n.log-search span {\n font-size: 10px;\n white-space: nowrap;\n color: #a6b299;\n}\n.log-lines {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 13px;\n line-height: 2.15;\n overflow: auto;\n padding: 15px 0;\n flex: 1;\n min-height: 260px;\n max-height: 490px;\n}\n.log-line {\n display: flex;\n white-space: pre;\n padding: 0 18px 0 0;\n min-width: max-content;\n}\n.line-number {\n color: #86927d;\n width: 44px;\n padding-right: 15px;\n text-align: right;\n user-select: none;\n flex-shrink: 0;\n}\n.log-time {\n color: #8a9782;\n margin-right: 16px;\n}\n.log-line.error {\n background: #59332c4a;\n color: #f0a28e;\n}\n.log-line.pass {\n color: #b9d49e;\n}\n.log-line.dim {\n color: #98a48f;\n}\n.log-line mark {\n background: #bdcb92;\n color: #202923;\n}\n.log-lines.wrap .log-line {\n white-space: pre-wrap;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.log-lines.wrap .line-text {\n min-width: 0;\n}\n.log-bottom {\n font-size: 10px;\n color: #a1af95;\n padding: 11px 17px;\n border-top: 1px solid #343b31;\n display: flex;\n justify-content: space-between;\n gap: 12px;\n}\n.detail-bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 0 7px;\n color: #838d78;\n font-size: 10px;\n}\n.detail-bottom span {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.detail-bottom svg {\n width: 12px;\n height: 12px;\n}\n.source-view {\n border: 1px solid var(--line);\n border-radius: 7px;\n overflow: hidden;\n}\n.source-view h3 {\n font-size: 13px;\n font-weight: 500;\n background: var(--subtle);\n padding: 15px 20px;\n border-bottom: 1px solid var(--line);\n}\n.source-view pre {\n margin: 0;\n background: #1c211e;\n color: #c2d3b5;\n padding: 25px;\n font-size: 12px;\n line-height: 1.9;\n overflow: auto;\n}\n.empty-state {\n text-align: center;\n padding: 55px 20px;\n color: var(--muted);\n}\n.empty-state svg {\n width: 27px;\n height: 27px;\n color: #99aa8a;\n margin-bottom: 15px;\n}\n.empty-state h3 {\n font-size: 14px;\n color: var(--ink);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.empty-state p {\n font-size: 13px;\n line-height: 1.8;\n}\n.empty-state .button {\n margin-top: 14px;\n}\n.cards {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n}\n.workflow-card,\n.worker-card {\n border: 1px solid var(--line);\n border-radius: 8px;\n padding: 20px;\n background: #fff;\n}\n.card-heading {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 19px;\n}\n.card-heading > svg {\n width: 19px;\n height: 19px;\n color: #7e9468;\n}\n.card-heading h2 {\n font-size: 13px;\n}\n.card-heading .status {\n margin-left: auto;\n}\n.card-description {\n color: #7e8874;\n font-size: 13px;\n line-height: 1.8;\n}\n.card-details {\n display: flex;\n gap: 7px;\n margin-top: 14px;\n flex-wrap: wrap;\n}\n.tag {\n background: #f2f4ee;\n padding: 4px 7px;\n border-radius: 4px;\n font-size: 10px;\n color: #6b795e;\n}\n.card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 23px;\n padding-top: 16px;\n border-top: 1px solid var(--line);\n}\n.card-footer .text-button {\n font-size: 13px;\n}\n.worker-stats {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-top: 23px;\n}\n.progress-track {\n height: 4px;\n border-radius: 3px;\n background: #edf0e7;\n margin-top: 10px;\n overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n background: #a1bf85;\n border-radius: 3px;\n}\n.worker-stats .meta-label {\n display: flex;\n justify-content: space-between;\n}\n.settings-section {\n border: 1px solid var(--line);\n border-radius: 7px;\n margin-bottom: 16px;\n padding: 18px 20px;\n background: #fff;\n}\n.settings-section h2 {\n margin-bottom: 15px;\n}\n.setting-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n gap: 16px;\n}\n.setting-row + .setting-row {\n border-top: 1px solid var(--line);\n}\n.setting-row strong {\n display: block;\n font-size: 12px;\n font-weight: 550;\n}\n.setting-row p {\n font-size: 11px;\n color: var(--muted);\n margin-top: 4px;\n}\n.setting-row input[type=\"checkbox\"] {\n accent-color: #678951;\n width: 17px;\n height: 17px;\n}\n.secret-value {\n color: var(--muted);\n font-size: 12px;\n}\n.settings-note {\n color: var(--muted);\n font-size: 13px;\n line-height: 1.8;\n}\ndialog {\n width: min(470px, calc(100% - 32px));\n padding: 27px;\n border: 1px solid #dde4d5;\n border-radius: 11px;\n box-shadow: 0 20px 80px #17261530;\n color: var(--ink);\n}\ndialog::backdrop {\n background: #17211755;\n backdrop-filter: blur(3px);\n}\n.dialog-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n}\n.dialog-heading h2 {\n font-size: 19px;\n letter-spacing: -0.6px;\n}\n.dialog-description {\n font-size: 12px;\n line-height: 1.8;\n color: var(--muted);\n margin-bottom: 22px;\n}\n.form-field {\n display: block;\n margin: 17px 0;\n}\n.form-field > span {\n display: block;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n.form-field input,\n.form-field select {\n display: block;\n width: 100%;\n border: 1px solid #dfe5d8;\n border-radius: 6px;\n padding: 11px;\n background: white;\n font-size: 12px;\n color: var(--ink);\n}\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n gap: 9px;\n margin-top: 24px;\n}\n.dialog-note {\n color: #849078;\n font-size: 13px;\n line-height: 1.7;\n}\n.shortcut-row {\n display: flex;\n justify-content: space-between;\n padding: 12px 0;\n font-size: 12px;\n border-bottom: 1px solid var(--line);\n}\n.toast {\n position: fixed;\n bottom: 25px;\n left: calc(50% + 112px);\n transform: translateX(-50%);\n max-width: calc(100vw - 40px);\n background: #273321;\n color: #e6f0de;\n padding: 13px 19px;\n border: 1px solid #4f6342;\n border-radius: 7px;\n font-size: 12px;\n box-shadow: 0 8px 30px #15220c20;\n z-index: 100;\n}\nbody.compact .run-table td {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n/* Shared secondary text stays readable on white and tinted surfaces. */\n.workspace-label,\n.nav-caption,\n.nav-item,\n.breadcrumbs,\n.metric-label,\n.metric-foot,\n.count,\n.run-subtitle,\n.run-table th,\n.run-table td,\n.table-footer,\n.table-hint,\n.attention-strip p span,\n.page-footer,\n.meta-label,\n.detail-tabs button,\n.steps-heading .mono,\n.step-button .mono,\n.step-count,\n.detail-bottom,\n.card-description,\n.tag,\n.dialog-note,\nkbd {\n color: var(--muted);\n}\n.avatar {\n color: #675c44;\n}\n.failure-banner p {\n color: #85634f;\n}\n.search-box input::placeholder {\n color: #69745f;\n}\n.subtitle,\n.nav-item,\n.button,\n.filter-tab,\n.meta-value,\n.card-description,\n.settings-note {\n font-size: 12px;\n}\n.run-subtitle,\n.run-table th,\n.select-filter,\n.search-box input,\n.status,\n.step-button {\n font-size: 13px;\n}\n.log-lines {\n font-size: 13px;\n}\n.detail-meta {\n overflow-wrap: anywhere;\n}\n@media (min-width: 1500px) {\n main {\n padding-top: 50px;\n }\n .run-table td {\n padding-top: 22px;\n padding-bottom: 22px;\n }\n}\n@media (max-width: 1180px) {\n .sidebar {\n width: 192px;\n padding-inline: 12px;\n }\n .app-shell {\n margin-left: 192px;\n }\n .topbar {\n padding-inline: 28px;\n }\n main {\n padding-inline: 28px;\n }\n .page-footer {\n margin-inline: 28px;\n }\n .metric {\n padding: 19px 16px;\n }\n .tiny-bars {\n display: none;\n }\n .metric-note {\n font-size: 10px;\n }\n .metric-value {\n font-size: 25px;\n }\n .run-table th:first-child {\n width: 40%;\n }\n .run-table th:nth-child(3) {\n width: 18%;\n }\n .run-table th:nth-child(2) {\n width: 18%;\n }\n .execution {\n grid-template-columns: 195px minmax(0, 1fr);\n }\n .toast {\n left: calc(50% + 96px);\n }\n .workspace {\n gap: 7px;\n }\n .workspace-label {\n display: none;\n }\n}\n@media (max-width: 900px) {\n .sidebar {\n width: 72px;\n align-items: center;\n padding: 27px 9px 15px;\n }\n .brand {\n font-size: 0;\n padding: 0;\n }\n .brand-mark {\n margin: 0;\n }\n .workspace,\n .nav-caption,\n .nav-label,\n .nav-count,\n .runner-health,\n .profile > span:not(.avatar) {\n display: none;\n }\n nav {\n margin-top: 40px;\n width: 100%;\n }\n .nav-item {\n justify-content: center;\n padding: 13px 10px;\n }\n .profile {\n padding-top: 15px;\n }\n .app-shell {\n margin-left: 72px;\n }\n .metric {\n padding: 17px 14px;\n }\n .metric-bottom {\n gap: 6px;\n }\n .metric-note {\n display: none;\n }\n .filters .search-box {\n width: auto;\n flex: 1;\n }\n .select-filter {\n max-width: 150px;\n }\n .run-table th:nth-child(3),\n .run-table td:nth-child(3) {\n display: none;\n }\n .run-table th:first-child {\n width: 48%;\n }\n .run-table th:nth-child(2) {\n width: 21%;\n }\n .run-table th:nth-child(4) {\n width: 14%;\n }\n .run-table th:last-child {\n width: 17%;\n }\n .detail-meta {\n grid-template-columns: repeat(3, 1fr);\n row-gap: 22px;\n }\n .run-heading {\n align-items: flex-start;\n }\n .run-heading h1 {\n font-size: 23px;\n }\n .run-heading .heading-actions {\n flex-direction: column;\n align-items: stretch;\n }\n .execution {\n grid-template-columns: 175px minmax(0, 1fr);\n }\n .step-button {\n gap: 6px;\n padding-inline: 6px;\n font-size: 10px;\n }\n .step-button .mono {\n font-size: 8px;\n }\n .log-time {\n display: none;\n }\n .attention-strip p span {\n display: none;\n }\n .toast {\n left: calc(50% + 36px);\n }\n}\n@media (max-width: 600px) {\n .sidebar {\n position: fixed;\n inset: auto 0 0;\n width: 100%;\n height: 62px;\n padding: 0 12px env(safe-area-inset-bottom);\n z-index: 20;\n border-right: 0;\n border-top: 1px solid var(--line);\n background: #fafbf8f5;\n backdrop-filter: blur(15px);\n }\n .sidebar .brand,\n .sidebar-bottom {\n display: none;\n }\n nav {\n display: flex;\n width: 100%;\n margin: 0;\n height: 100%;\n justify-content: space-around;\n }\n .nav-item {\n flex: 1;\n padding: 9px 6px 6px;\n flex-direction: column;\n gap: 4px;\n border-radius: 0;\n font-size: 10px;\n }\n .nav-item.active {\n background: none;\n color: #41602f;\n }\n .nav-label {\n display: block;\n }\n .nav-item svg {\n width: 18px;\n height: 18px;\n }\n .app-shell {\n margin-left: 0;\n padding-bottom: 62px;\n }\n .topbar {\n height: 58px;\n padding: 0 20px;\n }\n .topbar-right {\n gap: 9px;\n }\n .topbar-right .icon-button {\n display: none;\n }\n .demo-label {\n font-size: 8px;\n }\n .breadcrumbs {\n gap: 7px;\n font-size: 13px;\n }\n main {\n padding: 28px 20px 20px;\n }\n .page-heading {\n margin-bottom: 24px;\n gap: 10px;\n }\n h1 {\n font-size: 27px;\n }\n .subtitle {\n font-size: 13px;\n max-width: 210px;\n }\n .button {\n font-size: 13px;\n padding: 9px 10px;\n }\n .overview {\n grid-template-columns: 1fr 1fr;\n margin-bottom: 28px;\n }\n .metric {\n min-height: 97px;\n padding: 16px;\n }\n .metric-label {\n font-size: 13px;\n }\n .metric-value {\n font-size: 25px;\n }\n .metric-bottom {\n margin-top: 9px;\n }\n .metric:nth-child(3),\n .metric:nth-child(4) {\n border-top: 1px solid var(--line);\n }\n .metric:nth-child(3)::before {\n display: none;\n }\n .metric + .metric::before {\n top: 16px;\n bottom: 16px;\n }\n .metric-note {\n display: inline;\n }\n .tiny-bars {\n display: flex;\n }\n .metric-foot {\n display: none;\n }\n .section-heading {\n margin-bottom: 14px;\n }\n .section-heading > span {\n font-size: 10px;\n }\n .filters {\n flex-wrap: wrap;\n gap: 7px;\n }\n .filters .search-box {\n flex: 1 0 100%;\n }\n .select-filter {\n flex: 1;\n max-width: none;\n }\n .filter-tabs {\n gap: 19px;\n margin-top: 19px;\n }\n .filter-tab {\n font-size: 13px;\n gap: 4px;\n }\n .filter-tab .count {\n font-size: 8px;\n }\n .run-table th {\n font-size: 10px;\n padding-inline: 5px;\n }\n .run-table th:first-child {\n width: 67%;\n padding-left: 2px;\n }\n .run-table th:nth-child(2) {\n width: 33%;\n text-align: right;\n padding-right: 3px;\n }\n .run-table td {\n padding: 18px 3px;\n }\n .run-table td:first-child {\n padding-left: 2px;\n }\n .run-table td:nth-child(2) {\n text-align: right;\n padding-right: 3px;\n }\n .run-table th:nth-child(4),\n .run-table td:nth-child(4),\n .run-table th:last-child,\n .run-table td:last-child {\n display: none;\n }\n .run-link {\n gap: 7px;\n }\n .run-title {\n font-size: 13px;\n }\n .run-subtitle {\n font-size: 10px;\n gap: 4px;\n }\n .run-subtitle .mono {\n font-size: 8px;\n }\n .status {\n font-size: 10px;\n padding: 4px 5px;\n }\n .table-footer {\n flex-wrap: wrap;\n font-size: 10px;\n }\n .pagination {\n gap: 9px;\n }\n .table-hint {\n display: none;\n }\n .attention-strip {\n padding: 12px;\n gap: 7px;\n }\n .attention-strip p {\n font-size: 13px;\n }\n .attention-strip .text-button {\n font-size: 10px;\n }\n .page-footer {\n margin-inline: 20px;\n font-size: 8px;\n flex-wrap: wrap;\n gap: 7px;\n padding-block: 19px;\n }\n .footer-mark {\n font-size: 15px;\n }\n .toast {\n left: 50%;\n bottom: 78px;\n width: max-content;\n text-align: center;\n font-size: 13px;\n }\n .back-link {\n margin-bottom: 20px;\n }\n .run-heading {\n flex-direction: column;\n gap: 18px;\n }\n .run-heading h1 {\n font-size: 23px;\n }\n .run-heading .subtitle {\n margin-left: 0;\n max-width: none;\n font-size: 13px;\n }\n .run-heading .heading-actions {\n flex-direction: row;\n width: 100%;\n }\n .run-heading .heading-actions > * {\n flex: 1;\n max-width: none;\n }\n .detail-meta {\n grid-template-columns: repeat(2, 1fr);\n padding: 16px;\n gap: 20px 15px;\n }\n .detail-meta > div:last-child {\n grid-column: span 2;\n }\n .detail-tabs {\n gap: 20px;\n }\n .detail-tabs button {\n font-size: 13px;\n gap: 5px;\n }\n .detail-tabs button svg {\n width: 12px;\n }\n .failure-banner {\n padding: 12px;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 7px;\n }\n .failure-banner > div {\n flex: 1;\n }\n .failure-banner strong {\n font-size: 13px;\n }\n .failure-banner p {\n font-size: 10px;\n line-height: 1.6;\n }\n .failure-banner button {\n margin-left: 26px;\n font-size: 13px;\n }\n .execution {\n grid-template-columns: minmax(0, 1fr);\n }\n .steps-panel {\n border-right: 0;\n border-bottom: 1px solid var(--line);\n padding: 12px;\n }\n .steps-heading {\n padding: 3px 5px 10px;\n }\n .step-button {\n font-size: 13px;\n padding: 9px;\n margin-bottom: 1px;\n }\n .step-button .mono {\n font-size: 10px;\n }\n .step-count {\n display: none;\n }\n .log-heading {\n padding: 13px;\n }\n .log-heading h3 {\n font-size: 13px;\n }\n .log-heading h3 small {\n font-size: 8px;\n }\n .log-lines {\n font-size: 10px;\n min-height: 290px;\n }\n .log-search {\n padding-inline: 13px;\n }\n .line-number {\n width: 32px;\n padding-right: 10px;\n }\n .detail-bottom {\n gap: 10px;\n flex-wrap: wrap;\n font-size: 8px;\n }\n .cards {\n grid-template-columns: 1fr;\n }\n .workflow-card,\n .worker-card {\n padding: 20px;\n }\n .setting-row {\n gap: 14px;\n }\n .settings-section {\n padding: 18px;\n }\n .setting-row p {\n font-size: 13px;\n }\n .source-view pre {\n font-size: 13px;\n padding: 17px;\n }\n .topbar-right .avatar {\n display: none;\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n .status-icon.running svg {\n animation: spin 2.5s linear infinite;\n }\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
12283
|
+
var rg = "let token = sessionStorage.getItem('runner-api-token') || '';\nlet expiresAt = token ? Number.MAX_SAFE_INTEGER : 0;\n\nconst rawFetch = window.fetch.bind(window);\n\nexport async function loadToken() {\n if (token && expiresAt > Date.now() + 30_000) return token;\n const response = await rawFetch('/api/auth/token', {\n headers: { accept: 'application/json' },\n });\n if (!response.ok) {\n if (response.status === 401) {\n // When /api/auth/token returns 401, clear OIDC in-memory token state and redirect\n // to login so the user can re-authenticate. This even applies when there was\n // no prior cached token, fixing the reported symptom where 401 was silently\n // swallowed and settings APIs stayed broken.\n token = '';\n expiresAt = 0;\n if (sessionStorage.getItem('runner-api-token')) {\n sessionStorage.removeItem('runner-api-token');\n }\n const returnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n window.location.assign(`/auth/login?url=${encodeURIComponent(returnTo)}`);\n }\n return '';\n }\n const data = await response.json();\n token = data.access_token || '';\n expiresAt = Number(data.expires_at || 0);\n return token;\n}\n\nexport async function apiFetch(input, init = {}) {\n const target = new URL(input, window.location.href);\n if (\n target.origin !== window.location.origin ||\n (!target.pathname.startsWith('/api/') && !target.pathname.startsWith('/restart/'))\n ) {\n return rawFetch(input, init);\n }\n const headers = new Headers(init.headers);\n const accessToken = await loadToken();\n if (accessToken) headers.set('authorization', `Bearer ${accessToken}`);\n return rawFetch(input, { ...init, headers });\n}\n\nexport function setApiToken(value) {\n token = value || '';\n expiresAt = token ? Number.MAX_SAFE_INTEGER : 0;\n if (token) sessionStorage.setItem('runner-api-token', token);\n else sessionStorage.removeItem('runner-api-token');\n}\n", ig = "import { defineProp, onInit, ref } from '@li3/web';\n\nexport default function () {\n const authConfigured = ref(false);\n const authenticated = ref(false);\n const userName = ref('');\n const userPhoto = ref('');\n onInit(async () => {\n try {\n const response = await fetch('/api/auth/session');\n if (!response.ok) return;\n const session = await response.json();\n authConfigured.value = session.configured;\n authenticated.value = session.authenticated;\n userName.value = session.user?.name || session.user?.email || '';\n userPhoto.value = session.user?.photo || '';\n } catch {}\n });\n return { title: defineProp('title'), subtitle: defineProp('subtitle'), back: defineProp('back'), backLabel: defineProp('back-label'), authConfigured, authenticated, userName, userPhoto };\n}\n", ag = "import { getElement, load, onDestroy, onInit, templateRef } from '@li3/web';\n\nexport default function () {\n const outlet = templateRef('outlet');\n let navigating = false;\n const route = () => {\n const url = new URL(window.location.href);\n const path = url.pathname;\n if (path === '/' || path === '/runs')\n return { component: 'page-dashboard', url: '/pages/dashboard.html', page: 'dashboard' };\n if (path.match(/^\\/runs\\/\\d+$/))\n return { component: 'page-run', url: `/pages/run.html?jobId=${path.split('/').pop()}`, page: 'run' };\n if (path === '/help') return { component: 'page-help', url: '/pages/help.html', page: 'help' };\n if (path === '/settings/workflows')\n return { component: 'page-workflows', url: '/pages/workflows.html?page=workflows', page: 'workflows' };\n if (path === '/settings/secrets')\n return { component: 'page-secrets', url: '/pages/workflows.html?page=secrets', page: 'secrets' };\n if (path === '/settings/tokens')\n return { component: 'page-settings', url: '/pages/settings.html?page=tokens', page: 'tokens' };\n if (path === '/settings/notifications')\n return { component: 'page-settings', url: '/pages/settings.html?page=notifications', page: 'notifications' };\n if (path === '/settings/workers')\n return { component: 'page-settings', url: '/pages/settings.html?page=workers', page: 'workers' };\n if (path === '/settings' || path === '/workflows')\n return { component: 'page-workflows', url: '/pages/workflows.html?page=workflows', page: 'workflows' };\n const editor = path.match(/^\\/settings\\/workflows\\/(new|[a-z0-9-]+)$/);\n if (editor)\n return {\n component: 'page-workflow-editor',\n url: `/pages/workflows.html?page=editor&id=${editor[1]}${url.searchParams.get('revision') ? `&revision=${url.searchParams.get('revision')}` : ''}`,\n page: 'editor',\n };\n const legacyEditor = path.match(/^\\/workflows\\/(new|[a-z0-9-]+)$/);\n if (legacyEditor)\n return {\n component: 'page-workflow-editor',\n url: `/pages/workflows.html?page=editor&id=${legacyEditor[1]}${url.searchParams.get('revision') ? `&revision=${url.searchParams.get('revision')}` : ''}`,\n page: 'editor',\n };\n return { component: 'page-not-found', page: 'not-found' };\n };\n const navigate = async (replace = false) => {\n if (navigating) return;\n navigating = true;\n try {\n const current = route();\n document.body.dataset.page = current.page;\n if (current.page === 'not-found') {\n outlet.value.innerHTML =\n '<main class=\"mx-auto max-w-4xl p-8\"><h1 class=\"text-xl font-semibold\">404 — Page not found</h1><p class=\"mt-2 text-sm\">The page you are looking for does not exist. <a href=\"/\">Go home</a> or <a href=\"/runs\">view runs</a>.</p></main>';\n } else {\n await load(current.url);\n outlet.value.replaceChildren(document.createElement(current.component));\n }\n if (replace) history.replaceState(null, '', window.location.href);\n } catch (error) {\n outlet.value.innerHTML = `<main class=\"mx-auto max-w-4xl p-8\"><h1 class=\"text-xl font-semibold text-white\">Unable to load page</h1><p class=\"mt-2 text-sm text-rose-300\">${String(error.message || error)}</p></main>`;\n } finally {\n navigating = false;\n }\n };\n const handleClick = (event) => {\n const anchor = event.target.closest?.('a');\n if (!anchor || anchor.target || anchor.hasAttribute('download')) return;\n const target = new URL(anchor.href, window.location.href);\n if (\n target.origin !== window.location.origin ||\n !target.pathname.startsWith('/') ||\n target.pathname.startsWith('/auth/')\n )\n return;\n if (target.pathname.startsWith('/api/') || target.pathname.startsWith('/webhooks/')) return;\n if (target.pathname === window.location.pathname && target.hash) return;\n event.preventDefault();\n history.pushState(null, '', `${target.pathname}${target.search}${target.hash}`);\n void navigate();\n };\n const element = getElement();\n onInit(() => {\n element.addEventListener('click', handleClick);\n window.addEventListener('popstate', navigate);\n void navigate(true);\n });\n onDestroy(() => {\n element.removeEventListener('click', handleClick);\n window.removeEventListener('popstate', navigate);\n });\n return {};\n}\n", og = "import { onDestroy, onInit, ref } from '@li3/web';\nimport { apiFetch } from '@app/api-client.mjs';\n\nexport default function setup() {\n const jobs = ref([]), refreshError = ref(false), hasMore = ref(false), loadingMore = ref(false);\n const filter = ref(''), activeFilter = ref(''), pushConfigured = ref(false);\n const notificationsSupported = ref('Notification' in window && 'serviceWorker' in navigator);\n const notificationsEnabled = ref(notificationsSupported.value && Notification.permission === 'granted' && localStorage.getItem('runner-notifications') === 'enabled');\n const notificationNotice = ref('');\n let refreshTimer, eventSource, refreshing = false, refreshPending = false, searchInProgress = false, refreshGeneration = 0;\n const upper = (value) => String(value || '').toUpperCase();\n const terminalStatuses = new Set(['success', 'failed', 'cancelled']);\n const notifyCompletedJob = async (job) => {\n if (!notificationsEnabled.value || pushConfigured.value || !['success', 'failed'].includes(job.status)) return;\n try {\n const registration = await navigator.serviceWorker.ready;\n await registration.showNotification(job.status === 'success' ? `Job #${job.id} succeeded` : `Job #${job.id} failed`, { body: `${job.workflowId} finished with status ${job.status}.`, icon: '/app-icon.svg', badge: '/app-icon.svg', tag: `runner-job-${job.id}`, renotify: true, data: { url: `/runs/${job.id}` } });\n } catch (error) { console.error('Unable to show job notification', error); }\n };\n const urlBase64ToUint8Array = (value) => { const padding = '='.repeat((4 - (value.length % 4)) % 4); const raw = atob((value + padding).replace(/-/g, '+').replace(/_/g, '/')); return Uint8Array.from([...raw].map((character) => character.charCodeAt(0))); };\n const enablePushNotifications = async () => {\n try {\n if (!notificationsSupported.value) return;\n const response = await apiFetch('/api/push/public-key', { headers: { accept: 'application/json' } });\n if (!response.ok) return;\n const { publicKey } = await response.json(); pushConfigured.value = true;\n const registration = await navigator.serviceWorker.ready;\n const subscription = (await registration.pushManager.getSubscription()) || await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(publicKey) });\n const saved = await apiFetch('/api/push/subscriptions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(subscription) });\n if (!saved.ok) throw new Error(`Push subscription failed: ${saved.status}`);\n } catch (error) { console.error('Unable to enable background notifications', error); }\n };\n const disablePushNotifications = async () => {\n try { const subscription = await (await navigator.serviceWorker.ready).pushManager.getSubscription(); if (!subscription) return; await apiFetch('/api/push/subscriptions', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ endpoint: subscription.endpoint }) }); await subscription.unsubscribe(); }\n catch (error) { console.error('Unable to disable background notifications', error); }\n };\n const toggleNotifications = async () => {\n if (notificationsEnabled.value) { notificationsEnabled.value = false; localStorage.removeItem('runner-notifications'); await disablePushNotifications(); notificationNotice.value = 'Job notifications are paused on this device.'; return; }\n if (Notification.permission === 'denied') { notificationNotice.value = 'Notifications are blocked. Allow them in this site’s Android browser settings.'; return; }\n notificationsEnabled.value = (await Notification.requestPermission()) === 'granted';\n if (notificationsEnabled.value) { localStorage.setItem('runner-notifications', 'enabled'); await enablePushNotifications(); notificationNotice.value = 'Notifications enabled. Background delivery is available when server push is configured.'; } else notificationNotice.value = 'Notification permission was not granted.';\n };\n const refreshJobs = async (isSearch = false) => {\n if (searchInProgress && !isSearch) return; if (refreshing && !isSearch) { refreshPending = true; return; }\n refreshing = true; const generation = refreshGeneration;\n try {\n const activeIds = jobs.value.filter((job) => !terminalStatuses.has(job.status)).map((job) => Number(job.id));\n const knownIds = jobs.value.map((job) => Number(job.id));\n const afterId = activeIds.length ? Math.max(0, Math.min(...activeIds) - 1) : knownIds.length ? Math.max(...knownIds) : null;\n const filterQuery = activeFilter.value ? `&filter=${encodeURIComponent(activeFilter.value)}` : '';\n const url = afterId === null ? `/api/jobs?limit=100${filterQuery}` : `/api/jobs?afterId=${afterId}&limit=100${filterQuery}`;\n const response = await apiFetch(url, { headers: { accept: 'application/json' } }); if (!response.ok) throw new Error(`Dashboard refresh failed: ${response.status}`);\n const data = await response.json(); if (generation !== refreshGeneration) return; hasMore.value = data.hasMore;\n const previousStatuses = new Map(jobs.value.map((job) => [job.id, job.status])); const merged = new Map(jobs.value.map((job) => [job.id, job]));\n for (const job of data.jobs) { const previousStatus = previousStatuses.get(job.id); merged.set(job.id, job); if (previousStatus && !terminalStatuses.has(previousStatus) && terminalStatuses.has(job.status)) void notifyCompletedJob(job); }\n jobs.value = Array.from(merged.values()).sort((a, b) => Number(b.id) - Number(a.id)); refreshError.value = false;\n } catch (error) { console.error(error); refreshError.value = true; } finally { refreshing = false; if (refreshPending && !searchInProgress) { refreshPending = false; void refreshJobs(); } }\n };\n const loadMore = async () => { if (loadingMore.value || !hasMore.value || !jobs.value.length) return; loadingMore.value = true; try { const beforeId = Math.min(...jobs.value.map((job) => Number(job.id))); const filterQuery = activeFilter.value ? `&filter=${encodeURIComponent(activeFilter.value)}` : ''; const response = await apiFetch(`/api/jobs?beforeId=${beforeId}${filterQuery}`, { headers: { accept: 'application/json' } }); if (!response.ok) throw new Error(`Loading older jobs failed: ${response.status}`); const data = await response.json(); const merged = new Map(jobs.value.map((job) => [job.id, job])); for (const job of data.jobs) merged.set(job.id, job); jobs.value = Array.from(merged.values()).sort((a, b) => Number(b.id) - Number(a.id)); hasMore.value = data.hasMore; } catch (error) { console.error(error); refreshError.value = true; } finally { loadingMore.value = false; } };\n const updateSearchUrl = (value) => { const params = new URLSearchParams(window.location.search); if (value) params.set('search', value); else params.delete('search'); const query = params.toString(); history.pushState(null, '', `${window.location.pathname}${query ? `?${query}` : ''}`); };\n const applyFilter = async () => { searchInProgress = true; refreshGeneration++; activeFilter.value = filter.value.trim(); updateSearchUrl(activeFilter.value); jobs.value = []; hasMore.value = false; try { await refreshJobs(true); } finally { searchInProgress = false; refreshPending = false; } };\n const clearFilter = async () => { searchInProgress = true; refreshGeneration++; filter.value = ''; activeFilter.value = ''; updateSearchUrl(''); jobs.value = []; hasMore.value = false; try { await refreshJobs(true); } finally { searchInProgress = false; refreshPending = false; } };\n const setFilter = (event) => { filter.value = event.target.value; };\n onInit(() => { const initialSearch = new URLSearchParams(window.location.search).get('search')?.trim() || ''; filter.value = initialSearch; activeFilter.value = initialSearch; if (notificationsSupported.value) navigator.serviceWorker.register('/service-worker.js').then(() => { if (notificationsEnabled.value) void enablePushNotifications(); }).catch((error) => console.error('Service worker registration failed', error)); eventSource = new EventSource('/api/events'); eventSource.addEventListener('jobs.available', refreshJobs); eventSource.addEventListener('jobs.changed', refreshJobs); eventSource.onerror = () => { refreshError.value = true; }; void refreshJobs(); refreshTimer = setInterval(refreshJobs, 60000); });\n onDestroy(() => { eventSource?.close(); clearInterval(refreshTimer); });\n return { jobs, refreshError, hasMore, loadingMore, filter, activeFilter, pushConfigured, setFilter, loadMore, applyFilter, clearFilter, upper, notificationsSupported, notificationsEnabled, notificationNotice, toggleNotifications };\n}\n", sg = "\n import { computed, onDestroy, onInit, ref } from '@li3/web';\n import { AnsiUp } from 'ansi_up';\n import { marked } from 'marked';\n import { apiFetch } from '@app/api-client.mjs';\n\n export default function setup() {\n const jobId = window.location.pathname.split('/').filter(Boolean).pop() || '';\n const report = ref({ jobId });\n const previousRuns = ref([]);\n const aiMessages = ref([]);\n const aiStepId = ref('');\n const aiQuestion = ref('');\n const aiError = ref('');\n const aiLoading = ref(false);\n const manualRestartOpen = ref(false);\n const manualRestartLoading = ref(false);\n const manualInputs = ref([]);\n let previousRunsLoaded = false;\n const now = ref(Date.now());\n const ansiUp = new AnsiUp();\n ansiUp.use_classes = false;\n let eventSource;\n let refreshTimer;\n let clockTimer;\n let refreshing = false;\n let refreshPending = false;\n const cancelling = ref(false);\n\n const active = computed(() => ['pending', 'running'].includes(report.value.status));\n const inputsJson = computed(() => JSON.stringify(report.value.inputs || {}, null, 2));\n const originalInputsJson = computed(() => JSON.stringify(report.value.inputs || {}, null, 2));\n const timing = computed(() => {\n if (report.value.status === 'pending') return 'Waiting for a worker';\n if (report.value.status === 'running') {\n return `Running for ${Math.max(0, now.value - Date.parse(report.value.startedAt))}ms`;\n }\n return `Finished in ${report.value.durationMs}ms`;\n });\n\n const upper = (value) => String(value || '').toUpperCase();\n const artifactUrl = (path) => `/api/runs/${report.value.jobId}/artifacts/${encodeURIComponent(path)}`;\n const downloadArtifact = async (event, path) => {\n event.preventDefault();\n const response = await apiFetch(artifactUrl(path));\n if (!response.ok) return;\n const link = document.createElement('a');\n link.href = URL.createObjectURL(await response.blob());\n link.download = path.split('/').pop() || 'artifact';\n link.click();\n URL.revokeObjectURL(link.href);\n };\n const loadPreviousRuns = async () => {\n if (previousRunsLoaded || !report.value.parentId) return;\n const lineage = [];\n const visited = new Set();\n let parentId = report.value.parentId;\n while (parentId && !visited.has(String(parentId)) && lineage.length < 50) {\n visited.add(String(parentId));\n const response = await apiFetch(`/api/runs/${parentId}`, { headers: { accept: 'application/json' } });\n if (!response.ok) throw new Error(`Previous run request failed: ${response.status}`);\n const parent = await response.json();\n lineage.push({ id: parent.jobId, status: parent.status, startedAt: parent.startedAt });\n parentId = parent.parentId;\n }\n previousRuns.value = lineage;\n previousRunsLoaded = true;\n };\n const stepLog = (step) => {\n if (step.status === 'skipped') return '';\n if (step.status === 'running')\n return '<span class=\"text-indigo-400\">Step is running. Logs will appear after it finishes.</span>';\n if (step.status === 'pending') return '<span class=\"text-gray-500\">Waiting to run.</span>';\n if (step.logContent) return ansiUp.ansi_to_html(step.logContent);\n return '<span class=\"text-gray-500\">(No terminal log output recorded for this step)</span>';\n };\n const sanitizeAiHtml = (html) => {\n const parsed = new DOMParser().parseFromString(html, 'text/html');\n parsed.querySelectorAll('script,style,iframe,object,embed,form').forEach((node) => node.remove());\n parsed.querySelectorAll('*').forEach((element) => {\n [...element.attributes].forEach((attribute) => {\n if (attribute.name.toLowerCase().startsWith('on')) element.removeAttribute(attribute.name);\n if (['href', 'src'].includes(attribute.name.toLowerCase()) && /^(javascript|data):/i.test(attribute.value)) element.removeAttribute(attribute.name);\n });\n });\n return parsed.body.innerHTML;\n };\n const renderAiMarkdown = (content) => sanitizeAiHtml(marked.parse(content));\n const askAi = async (step, event) => {\n event.stopPropagation();\n aiStepId.value = step.id;\n aiMessages.value = [];\n aiQuestion.value = '';\n await requestAiHelp(step.id, 'Please explain why this step failed and what I should do next.');\n };\n const requestAiHelp = async (stepId, question) => {\n aiLoading.value = true;\n aiError.value = '';\n try {\n const response = await apiFetch(`/api/runs/${report.value.jobId}/ai-help`, {\n method: 'POST',\n headers: { accept: 'application/json', 'content-type': 'application/json' },\n body: JSON.stringify({ stepId, question, conversation: aiMessages.value }),\n });\n if (!response.ok) {\n const data = await response.json().catch(() => ({}));\n throw new Error(data.error || `AI help failed: ${response.status}`);\n }\n aiMessages.value = [...aiMessages.value, { role: 'user', content: question }, { role: 'assistant', content: '' }];\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = '';\n while (true) {\n const chunk = await reader.read();\n if (chunk.done) break;\n buffer += decoder.decode(chunk.value, { stream: true });\n const events = buffer.split('\\n\\n');\n buffer = events.pop() || '';\n for (const event of events) {\n const line = event.split('\\n').find((value) => value.startsWith('data: '));\n if (!line) continue;\n const data = JSON.parse(line.slice(6));\n if (data.delta) {\n const messages = [...aiMessages.value];\n messages[messages.length - 1] = { ...messages[messages.length - 1], content: messages[messages.length - 1].content + data.delta };\n aiMessages.value = messages;\n }\n if (data.error) throw new Error(data.error);\n }\n }\n const messages = [...aiMessages.value];\n const answer = messages.at(-1);\n if (answer) messages[messages.length - 1] = { ...answer, html: renderAiMarkdown(answer.content) };\n aiMessages.value = messages;\n } catch (error) {\n aiError.value = error.message;\n } finally {\n aiLoading.value = false;\n }\n };\n const askFollowup = async () => {\n const question = aiQuestion.value.trim();\n if (!question || !aiStepId.value) return;\n aiQuestion.value = '';\n await requestAiHelp(aiStepId.value, question);\n };\n const restartJob = async () => {\n const response = await apiFetch(`/restart/${report.value.jobId}`, {\n method: 'POST',\n headers: { 'content-type': 'application/json' },\n body: JSON.stringify({ inputs: report.value.inputs || {} }),\n });\n if (response.ok) {\n const { id } = await response.json();\n location.href = `/runs/${id}`;\n }\n };\n const openManualRestart = (event) => {\n event.preventDefault();\n event.stopPropagation();\n manualInputs.value = [{ key: '', value: '' }];\n manualRestartOpen.value = true;\n };\n const closeManualRestart = () => { manualRestartOpen.value = false; };\n const addManualInput = () => { manualInputs.value = [...manualInputs.value, { key: '', value: '' }]; };\n const removeManualInput = (entry) => { manualInputs.value = manualInputs.value.filter((item) => item !== entry); };\n const setManualKey = (entry, event) => { entry.key = event.target.value; manualInputs.value = [...manualInputs.value]; };\n const setManualValue = (entry, event) => { entry.value = event.target.value; manualInputs.value = [...manualInputs.value]; };\n const restartWithInputs = async () => {\n const inputs = Object.fromEntries(manualInputs.value.filter((entry) => entry.key.trim()).map((entry) => [entry.key.trim(), entry.value]));\n manualRestartLoading.value = true;\n try {\n const response = await apiFetch(`/restart/${report.value.jobId}`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ inputs }) });\n if (!response.ok) throw new Error(`Restart failed: ${response.status}`);\n const { id } = await response.json();\n location.href = `/runs/${id}`;\n } catch (error) {\n aiError.value = error.message;\n } finally {\n manualRestartLoading.value = false;\n }\n };\n const cancelJob = async () => {\n if (cancelling.value || report.value.status !== 'running') return;\n cancelling.value = true;\n try {\n const response = await apiFetch(`/api/jobs/${report.value.jobId}/cancel`, { method: 'POST' });\n if (!response.ok) throw new Error(`Cancel failed: ${response.status}`);\n await refreshRun();\n } catch (error) {\n console.error(error);\n } finally {\n cancelling.value = false;\n }\n };\n const refreshRun = async () => {\n if (refreshing) {\n refreshPending = true;\n return;\n }\n refreshing = true;\n\n try {\n const response = await apiFetch(`/api/runs/${jobId}`, {\n headers: { accept: 'application/json' },\n });\n if (!response.ok) throw new Error(`Run refresh failed: ${response.status}`);\n const previousStatus = report.value.status;\n const nextReport = await response.json();\n report.value = nextReport;\n document.title = `Run #${nextReport.jobId} - ${nextReport.workflowName}`;\n void loadPreviousRuns();\n if (\n ['pending', 'running'].includes(previousStatus) &&\n ['success', 'failed'].includes(nextReport.status) &&\n 'Notification' in window &&\n 'serviceWorker' in navigator &&\n Notification.permission === 'granted' &&\n localStorage.getItem('runner-notifications') === 'enabled'\n ) {\n const registration = await navigator.serviceWorker.ready;\n await registration.showNotification(\n nextReport.status === 'success'\n ? `Job #${nextReport.jobId} succeeded`\n : `Job #${nextReport.jobId} failed`,\n {\n body: `${nextReport.workflowName} finished with status ${nextReport.status}.`,\n icon: '/app-icon.svg',\n badge: '/app-icon.svg',\n tag: `runner-job-${nextReport.jobId}`,\n renotify: true,\n data: { url: `/runs/${nextReport.jobId}` },\n },\n );\n }\n } catch (error) {\n console.error(error);\n } finally {\n refreshing = false;\n if (refreshPending) {\n refreshPending = false;\n void refreshRun();\n }\n }\n };\n const handleJobChange = (event) => {\n const data = JSON.parse(event.data || '{}');\n if (!data.jobId || String(data.jobId) === String(report.value.jobId)) void refreshRun();\n };\n\n onInit(() => {\n void refreshRun();\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/service-worker.js').catch((error) => {\n console.error('Service worker registration failed', error);\n });\n }\n eventSource = new EventSource('/api/events');\n eventSource.addEventListener('jobs.changed', handleJobChange);\n refreshTimer = setInterval(() => {\n if (active.value) void refreshRun();\n }, 60000);\n clockTimer = setInterval(() => {\n now.value = Date.now();\n }, 1000);\n });\n onDestroy(() => {\n eventSource?.close();\n clearInterval(refreshTimer);\n clearInterval(clockTimer);\n });\n\n return { report, previousRuns, manualRestartOpen, manualRestartLoading, manualInputs, aiMessages, aiStepId, aiQuestion, aiError, aiLoading, inputsJson, originalInputsJson, timing, upper, artifactUrl, downloadArtifact, stepLog, askAi, askFollowup, restartJob, openManualRestart, closeManualRestart, addManualInput, removeManualInput, setManualKey, setManualValue, restartWithInputs, cancelJob, cancelling };\n }\n \n", cg = "\n import { onInit, ref } from '@li3/web';\n import { apiFetch, setApiToken } from '@app/api-client.mjs';\n export default function () {\n const page = document.body.dataset.page;\n const keys = ref([]);\n const workers = ref([]);\n const keyName = ref('');\n const newToken = ref('');\n const error = ref('');\n const notificationsSupported = ref('Notification' in window && 'serviceWorker' in navigator);\n const notificationsEnabled = ref(notificationsSupported.value && Notification.permission === 'granted' && localStorage.getItem('runner-notifications') === 'enabled');\n const notificationMessage = ref('');\n const scopeOptions = ref([\n { name: 'workflows:read', label: 'Read workflows', selected: true },\n { name: 'workflows:write', label: 'Modify workflows', selected: false },\n { name: 'logs:read', label: 'Read logs', selected: false },\n { name: 'artifacts:read', label: 'Read artifacts', selected: false },\n { name: 'runs:control', label: 'Control runs', selected: false },\n { name: 'runs:dispatch', label: 'Dispatch runs', selected: false },\n { name: 'workers:read', label: 'Read workers', selected: false },\n { name: 'secrets:read', label: 'Read secret names', selected: false },\n { name: 'secrets:write', label: 'Manage secrets', selected: false },\n ]);\n const api = async (url, options = {}) => { const response = await apiFetch(url, { headers: { accept: 'application/json', ...(options.body ? { 'content-type': 'application/json' } : {}) }, ...options }); const body = await response.json().catch(() => ({})); if (!response.ok) throw new Error(body.error || `Request failed: ${response.status}`); return body; };\n const load = async () => { keys.value = (await api('/api/api-keys')).keys; };\n const loadWorkers = async () => { workers.value = (await api('/api/workers')).workers; };\n const issueKey = async () => { try { error.value = ''; const result = await api('/api/api-keys', { method: 'POST', body: JSON.stringify({ name: keyName.value, scopes: scopeOptions.value.filter((scope) => scope.selected).map((scope) => scope.name) }) }); newToken.value = result.token; setApiToken(result.token); keyName.value = ''; await load(); } catch (reason) { error.value = reason.message; } };\n const revokeKey = async (key) => { if (!confirm(`Revoke ${key.name}?`)) return; try { await api(`/api/api-keys/${key.id}`, { method: 'DELETE' }); await load(); } catch (reason) { error.value = reason.message; } };\n const setKeyName = (event) => { keyName.value = event.target.value; };\n const toggleScope = (scope) => { scope.selected = !scope.selected; };\n const toggleNotifications = async () => {\n if (notificationsEnabled.value) {\n notificationsEnabled.value = false;\n localStorage.removeItem('runner-notifications');\n notificationMessage.value = 'Notifications disabled on this device.';\n return;\n }\n if (!notificationsSupported.value) { notificationMessage.value = 'Notifications are not supported by this browser.'; return; }\n const permission = await Notification.requestPermission();\n notificationsEnabled.value = permission === 'granted';\n if (notificationsEnabled.value) { localStorage.setItem('runner-notifications', 'enabled'); notificationMessage.value = 'Notifications enabled.'; }\n else notificationMessage.value = 'Notification permission was not granted.';\n };\n onInit(() => { if (page === 'tokens') load().catch((reason) => { error.value = reason.message; }); if (page === 'workers') loadWorkers().catch((reason) => { error.value = reason.message; }); });\n return { page, keys, workers, keyName, newToken, error, scopeOptions, issueKey, revokeKey, setKeyName, toggleScope, notificationsEnabled, notificationMessage, toggleNotifications };\n }\n \n", lg = "\n import { onDestroy, onInit, ref, templateRef } from '@li3/web';\n import { diffLines } from 'diff';\n\n export default function () {\n const page = document.body.dataset.page;\n const params = new URLSearchParams(window.location.search);\n const initialId = params.get('id') || '';\n const initialRevision = params.get('revision') ? Number(params.get('revision')) : null;\n const readOnly = Boolean(initialRevision);\n const workflows = ref([]);\n const secrets = ref([]);\n const source = ref('');\n const validation = ref({ valid: true });\n const savedSource = ref('');\n const revision = ref(null);\n const revisionDialogOpen = ref(false);\n const revisionNumber = ref(0);\n const revisionDiffHtml = ref('');\n const revisionError = ref('');\n const revisionLoading = ref(false);\n const aiDialogOpen = ref(false);\n const aiRequest = ref('');\n const aiLoading = ref(false);\n const aiError = ref('');\n const aiSuggestion = ref('');\n const aiDiffHtml = ref('');\n const workflowId = ref('');\n const enabled = ref(true);\n const savedEnabled = ref(true);\n const selectedId = ref('');\n const secretName = ref('');\n const secretValue = ref('');\n const fileMode = ref(false);\n const secretFileName = ref('');\n const secretFileData = ref('');\n const notice = ref('');\n const noticeError = ref(false);\n const busy = ref(false);\n const secretValueInput = templateRef('secretValueInput');\n const secretFileInput = templateRef('secretFileInput');\n const secretForm = templateRef('secretForm');\n const helpContent = templateRef('helpContent');\n const helpLoaded = ref(false);\n const helpLoading = ref(false);\n let validationTimer;\n\n const showNotice = (message, error = false) => {\n notice.value = message;\n noticeError.value = error;\n };\n\n const redirectToLogin = () => {\n const returnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n window.location.assign(`/auth/login?url=${encodeURIComponent(returnTo)}`);\n };\n\n const api = async (url, options = {}) => {\n const response = await fetch(url, {\n ...options,\n credentials: \"same-origin\",\n headers: {\n accept: \"application/json\",\n ...(options.body ? { \"content-type\": \"application/json\" } : {}),\n ...(options.headers || {}),\n },\n });\n if (response.status === 401) redirectToLogin();\n const body = response.status === 204 ? null : await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(body.error || `Request failed: ${response.status}`);\n return body;\n };\n\n const derivedId = () =>\n source.value\n .match(/^\\s*(?:id:\\s*([^\\n]+)|name:\\s*([^\\n]+))/m)\n ?.slice(1)\n .find(Boolean)\n ?.trim()\n .toLowerCase()\n .replace(/[^a-z0-9]/g, \"-\")\n .replace(/(^-|-$)/g, \"\") || \"\";\n\n const run = async (action) => {\n if (busy.value) return;\n\n busy.value = true;\n\n try {\n await action();\n } catch (error) {\n showNotice(error.message, true);\n } finally {\n busy.value = false;\n }\n };\n\n const loadWorkflows = async () => {\n workflows.value = (await api('/api/workflows')).workflows;\n };\n\n const loadSecrets = async () => {\n secrets.value = (await api('/api/secrets')).secrets;\n };\n\n const openWorkflow = async (id) => {\n const workflowUrl = initialRevision\n ? `/api/workflows/${id}?revision=${initialRevision}`\n : `/api/workflows/${id}`;\n const workflow = await api(workflowUrl);\n selectedId.value = workflow.id;\n workflowId.value = workflow.id;\n source.value = workflow.sourceYaml;\n savedSource.value = workflow.sourceYaml;\n enabled.value = workflow.enabled;\n savedEnabled.value = workflow.enabled;\n revision.value = workflow.revision || null;\n };\n\n const validateSource = async () => {\n return api('/api/workflows/validate', {\n method: 'POST',\n body: JSON.stringify({ sourceYaml: source.value }),\n });\n };\n\n const validate = (ms = 1000) => {\n if (page !== \"editor\") return;\n\n clearTimeout(validationTimer);\n validationTimer = setTimeout(() => {\n validation.value = { ...validation.value, running: true, error: \"\" };\n void validateSource()\n .then((result) => {\n validation.value = { ...result, running: false };\n })\n .catch((error) => {\n validation.value = { valid: false, running: false, error: error.message };\n });\n }, ms);\n };\n\n const save = () =>\n run(async () => {\n const id = (workflowId.value.trim() || derivedId()).toLowerCase();\n if (!id) throw new Error(\"Set an ID or add a workflow name first.\");\n if (!/^[a-z0-9-]+$/.test(id))\n throw new Error(\"Workflow IDs can contain lowercase letters, numbers, and hyphens only.\");\n if (\n initialId &&\n id === selectedId.value &&\n source.value === savedSource.value &&\n enabled.value === savedEnabled.value\n ) {\n showNotice(\"No changes to save.\");\n return;\n }\n const workflow = await api(`/api/workflows/${id}`, {\n method: \"PUT\",\n body: JSON.stringify({ sourceYaml: source.value, enabled: enabled.value }),\n });\n selectedId.value = workflow.id;\n workflowId.value = workflow.id;\n savedSource.value = source.value;\n savedEnabled.value = enabled.value;\n revision.value = workflow.revision;\n showNotice(`Saved ${workflow.id} as draft revision ${workflow.revision}.`);\n if (!initialId) history.replaceState(null, \"\", `/workflows/${workflow.id}`);\n });\n const publish = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id) throw new Error('Save a workflow before publishing it.');\n const workflow = await api(`/api/workflows/${id}/publish`, { method: 'POST' });\n selectedId.value = workflow.id;\n revision.value = workflow.revision;\n showNotice(`Published ${workflow.id} revision ${workflow.revision}.`);\n });\n const runNow = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id) throw new Error('Save the workflow before running it.');\n if (source.value !== savedSource.value) throw new Error('Save the latest draft before running it.');\n const result = await api(`/api/workflows/${id}/run`, {\n method: 'POST',\n body: JSON.stringify({}),\n });\n showNotice(`Queued ${result.jobs.length} job${result.jobs.length === 1 ? '' : 's'} from revision ${result.revision}.`);\n });\n const remove = () =>\n run(async () => {\n const id = workflowId.value.trim() || selectedId.value;\n if (!id || !confirm(`Delete ${id} and all of its revisions?`)) return;\n await api(`/api/workflows/${id}`, { method: \"DELETE\" });\n window.location.href = \"/workflows\";\n });\n const saveSecret = () =>\n run(async () => {\n const name = secretName.value.trim().toUpperCase();\n if (!/^[A-Z][A-Z0-9_]*$/.test(name))\n throw new Error(\n \"Secret names must start with a letter and contain only letters, numbers, and underscores.\",\n );\n secretName.value = name;\n if (!name || (fileMode.value ? !secretFileData.value : !secretValue.value))\n throw new Error(fileMode.value ? \"Choose a file first.\" : \"Set a secret value first.\");\n await api(`/api/secrets/${name}`, {\n method: \"PUT\",\n body: JSON.stringify(\n fileMode.value\n ? { value: secretFileData.value, encoding: \"base64\", originalName: secretFileName.value }\n : { value: secretValue.value, encoding: \"utf8\" },\n ),\n });\n secretValue.value = \"\";\n secretFileName.value = \"\";\n secretFileData.value = \"\";\n fileMode.value = false;\n if (secretFileInput.value) secretFileInput.value.value = \"\";\n if (secretForm.value) secretForm.value.open = false;\n await loadSecrets();\n showNotice(`Saved ${name}.`);\n });\n const removeSecret = (requestedName = \"\") =>\n run(async () => {\n const name = (requestedName || secretName.value.trim()).toUpperCase();\n if (!name || !confirm(`Delete ${name}?`)) return;\n await api(`/api/secrets/${name}`, { method: \"DELETE\" });\n if (secretName.value.trim().toUpperCase() === name) {\n secretName.value = \"\";\n secretValue.value = \"\";\n secretFileName.value = \"\";\n secretFileData.value = \"\";\n fileMode.value = false;\n if (secretFileInput.value) secretFileInput.value.value = \"\";\n }\n await loadSecrets();\n showNotice(`Deleted ${name}.`);\n });\n const setSource = (value) => {\n source.value = value;\n validate();\n };\n const setWorkflowId = (event) => {\n workflowId.value = event.target.value;\n };\n const setEnabled = (event) => {\n enabled.value = event.target.checked;\n };\n const setSecretName = (event) => {\n secretName.value = event.target.value;\n };\n const setSecretValue = (event) => {\n secretValue.value = event.target.value;\n fileMode.value = false;\n if (secretValue.value) {\n secretFileName.value = '';\n secretFileData.value = '';\n if (secretFileInput.value) secretFileInput.value.value = '';\n }\n };\n const setFileMode = (event) => {\n fileMode.value = event.target.checked;\n if (!fileMode.value) {\n secretFileName.value = '';\n secretFileData.value = '';\n if (secretFileInput.value) secretFileInput.value.value = '';\n } else {\n secretValue.value = '';\n }\n };\n const setSecretFile = async (event) => {\n const file = event.target.files?.[0];\n if (!file) return;\n const bytes = new Uint8Array(await file.arrayBuffer());\n let binary = '';\n for (let index = 0; index < bytes.length; index += 0x8000) {\n binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));\n }\n secretFileName.value = file.name;\n secretFileData.value = btoa(binary);\n secretValue.value = '';\n };\n const selectSecret = (name) => {\n secretName.value = name;\n secretValueInput.value?.focus();\n };\n const visitWorkflow = (id) => {\n window.location.href = `/workflows/${id}`;\n };\n const loadHelp = async (event) => {\n if (!event.target.open || helpLoaded.value || helpLoading.value || !helpContent.value) return;\n helpLoading.value = true;\n helpContent.value.textContent = 'Loading workflow syntax help...';\n try {\n const response = await fetch('/help?embed=1', { headers: { accept: 'text/html' } });\n if (!response.ok) throw new Error(`Help request failed: ${response.status}`);\n const html = await response.text();\n const parsed = new DOMParser().parseFromString(html, 'text/html');\n const sourceNodes = [\n ...Array.from(parsed.head.querySelectorAll('style')),\n ...Array.from(parsed.body.childNodes),\n ];\n const nodes = sourceNodes.map((node) => document.importNode(node, true));\n helpContent.value.replaceChildren(...nodes);\n helpLoaded.value = true;\n } catch (error) {\n helpContent.value.textContent = 'Unable to load workflow syntax help.';\n console.error(error);\n } finally {\n helpLoading.value = false;\n }\n };\n\n const escapeRevisionHtml = (value) => value.replace(/[&<>\"']/g, (character) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[character] || '');\n const renderRevisionDiff = (previousSource, currentSource) => {\n if (previousSource === null) return `<span class=\"text-emerald-300\">+ ${escapeRevisionHtml(currentSource)}</span>\\n`;\n return diffLines(previousSource, currentSource).map((part) => {\n const className = part.added ? 'text-emerald-300 bg-emerald-500/10' : part.removed ? 'text-rose-300 bg-rose-500/10' : 'text-gray-300';\n const prefix = part.added ? '+ ' : part.removed ? '- ' : ' ';\n return part.value.split('\\n').filter((line, index, lines) => index < lines.length - 1 || line).map((line) => `<span class=\"block ${className}\">${prefix}${escapeRevisionHtml(line)}</span>`).join('');\n }).join('');\n };\n const openRevisionDialog = async () => {\n if (!revision.value) return;\n revisionNumber.value = revision.value;\n revisionDiffHtml.value = '';\n revisionError.value = '';\n revisionDialogOpen.value = true;\n await loadRevisionDiff(revision.value);\n };\n const closeRevisionDialog = () => {\n revisionDialogOpen.value = false;\n };\n const loadRevisionDiff = async (number) => {\n revisionLoading.value = true;\n revisionError.value = '';\n try {\n const current = await api(`/api/workflows/${selectedId.value}?revision=${number}`);\n const previous = number > 1 ? await api(`/api/workflows/${selectedId.value}?revision=${number - 1}`) : null;\n revisionDiffHtml.value = renderRevisionDiff(previous?.sourceYaml ?? null, current.sourceYaml);\n } catch (error) {\n revisionError.value = error.message;\n } finally {\n revisionLoading.value = false;\n }\n };\n const navigateRevision = async (offset) => {\n if (!selectedId.value || revisionLoading.value) return;\n const target = revisionNumber.value + offset;\n if (target < 1 || target > revision.value) return;\n revisionNumber.value = target;\n await loadRevisionDiff(target);\n };\n const openAiHelp = () => {\n aiRequest.value = '';\n aiError.value = '';\n aiSuggestion.value = '';\n aiDiffHtml.value = '';\n aiDialogOpen.value = true;\n };\n const closeAiHelp = () => { if (!aiLoading.value) aiDialogOpen.value = false; };\n const requestAiHelp = async () => {\n if (!aiRequest.value.trim() || aiLoading.value) return;\n aiLoading.value = true;\n aiError.value = \"\";\n aiDiffHtml.value = \"\";\n try {\n const response = await fetch(\"/api/ai/workflow-help\", {\n method: \"POST\",\n credentials: \"same-origin\",\n headers: { accept: \"text/event-stream\", \"content-type\": \"application/json\" },\n body: JSON.stringify({ sourceYaml: source.value, request: aiRequest.value }),\n });\n if (response.status === 401) redirectToLogin();\n if (!response.ok) {\n const error = await response.json().catch(() => ({}));\n throw new Error(error.error || `AI help failed: ${response.status}`);\n }\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n let suggestion = \"\";\n while (true) {\n const chunk = await reader.read();\n if (chunk.done) break;\n buffer += decoder.decode(chunk.value, { stream: true });\n const events = buffer.split(\"\\n\\n\");\n buffer = events.pop() || \"\";\n for (const event of events) {\n const line = event.split(\"\\n\").find((value) => value.startsWith(\"data: \"));\n if (!line) continue;\n const data = JSON.parse(line.slice(6));\n if (data.error) throw new Error(data.error);\n if (data.delta) suggestion += data.delta;\n }\n }\n suggestion = suggestion\n .replace(/^```(?:yaml|yml)?\\s*/i, \"\")\n .replace(/\\s*```$/i, \"\")\n .trim();\n if (!source.value.trim()) {\n source.value = suggestion;\n aiDialogOpen.value = false;\n validate();\n } else {\n aiSuggestion.value = suggestion;\n aiDiffHtml.value = renderRevisionDiff(source.value, suggestion);\n }\n } catch (error) {\n aiError.value = error.message;\n } finally {\n aiLoading.value = false;\n }\n };\n const acceptAiSuggestion = () => { source.value = aiSuggestion.value; aiDialogOpen.value = false; validate(); };\n const rejectAiSuggestion = () => { aiSuggestion.value = ''; aiDiffHtml.value = ''; };\n\n onDestroy(() => clearTimeout(validationTimer));\n\n onInit(() => {\n const loadPage = page === 'editor'\n ? initialId ? openWorkflow(initialId) : Promise.resolve()\n : page === 'secrets' ? loadSecrets() : loadWorkflows();\n loadPage.catch((error) => showNotice(error.message, true));\n });\n\n return {\n page,\n workflows,\n secrets,\n source,\n validation,\n revision,\n revisionDialogOpen,\n revisionNumber,\n revisionDiffHtml,\n revisionError,\n revisionLoading,\n aiDialogOpen,\n aiRequest,\n aiLoading,\n aiError,\n aiDiffHtml,\n workflowId,\n enabled,\n readOnly,\n selectedId,\n secretName,\n secretValue,\n fileMode,\n secretFileName,\n secretFileData,\n notice,\n noticeError,\n busy,\n validate,\n save,\n publish,\n runNow,\n remove,\n saveSecret,\n removeSecret,\n setSource,\n setWorkflowId,\n setEnabled,\n setSecretName,\n setSecretValue,\n setFileMode,\n setSecretFile,\n selectSecret,\n visitWorkflow,\n loadHelp,\n openRevisionDialog,\n closeRevisionDialog,\n navigateRevision,\n openAiHelp,\n closeAiHelp,\n requestAiHelp,\n acceptAiSuggestion,\n rejectAiSuggestion,\n };\n }\n \n", ug = "/* global document, window, localStorage, navigator, URL, Blob, setTimeout, clearTimeout */\n\nconst paths = {\n runs: '<rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\"/><path d=\"m10 8 5 4-5 4Z\"/>',\n workflow:\n '<rect x=\"3\" y=\"3\" width=\"6\" height=\"6\" rx=\"1.5\"/><rect x=\"15\" y=\"15\" width=\"6\" height=\"6\" rx=\"1.5\"/><path d=\"M6 9v6a3 3 0 0 0 3 3h6M9 6h6a3 3 0 0 1 3 3v6\"/>',\n server:\n '<rect x=\"3\" y=\"3\" width=\"18\" height=\"7\" rx=\"2\"/><rect x=\"3\" y=\"14\" width=\"18\" height=\"7\" rx=\"2\"/><path d=\"M7 6.5h.01M7 17.5h.01M11 6.5h6M11 17.5h6\"/>',\n settings:\n '<path d=\"m9 3-1 3-3 1-2 3 2 2-1 3 3 2 3-1 2 2 3-1 1-3 3-1 2-3-2-2 1-3-3-2-3 1-2-2Z\"/><circle cx=\"11.5\" cy=\"10.5\" r=\"3\"/>',\n search: '<circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 4 4\"/>',\n plus: '<path d=\"M12 5v14M5 12h14\"/>',\n arrow: '<path d=\"M5 12h14m-5-5 5 5-5 5\"/>',\n back: '<path d=\"M19 12H5m5-5-5 5 5 5\"/>',\n chevron: '<path d=\"m9 6 6 6-6 6\"/>',\n check: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m8 12 3 3 5-6\"/>',\n failed: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m9 9 6 6m0-6-6 6\"/>',\n running: '<path d=\"M20.4 8.8A9 9 0 1 1 15.2 3.6\"/><path d=\"M20.4 3.6v5.2h-5.2\"/>',\n pending: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/>',\n cancelled: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m6 6 12 12\"/>',\n skipped: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 12h8\"/>',\n branch:\n '<circle cx=\"6\" cy=\"5\" r=\"2\"/><circle cx=\"6\" cy=\"19\" r=\"2\"/><circle cx=\"18\" cy=\"6\" r=\"2\"/><path d=\"M6 7v10m0-4h5a7 7 0 0 0 7-5\"/>',\n clock: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/>',\n commit: '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M3 12h5m8 0h5\"/>',\n refresh: '<path d=\"M20 7v5h-5M4 17v-5h5\"/><path d=\"M6.1 7a7 7 0 0 1 11.5-1L20 9M4 15l2.4 3A7 7 0 0 0 18 17\"/>',\n terminal: '<path d=\"m5 6 6 6-6 6m9 0h5\"/>',\n download: '<path d=\"M12 3v12m-4-4 4 4 4-4M4 16v4h16v-4\"/>',\n copy: '<rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V4H4v12h4\"/>',\n wrap: '<path d=\"M3 6h18M3 12h14a3 3 0 0 1 0 6h-5m3-3-3 3 3 3M3 18h4\"/>',\n code: '<path d=\"m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18\"/>',\n box: '<path d=\"m12 3 9 5v9l-9 5-9-5V8Zm0 9 9-4M3 8l9 4v10M7.5 5.5l9 5\"/>',\n history: '<path d=\"M3 3v6h6M3.6 9a9 9 0 1 1-.2 6M12 7v5l3 2\"/>',\n keyboard:\n '<rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 15h10\"/>',\n close: '<path d=\"m6 6 12 12M6 18 18 6\"/>',\n alert: '<path d=\"m12 3 10 18H2Z\"/><path d=\"M12 9v5m0 3h.01\"/>',\n lock: '<rect x=\"5\" y=\"10\" width=\"14\" height=\"11\" rx=\"2\"/><path d=\"M8 10V6a4 4 0 0 1 8 0v4m-4 5v2\"/>',\n stop: '<rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"2\"/>',\n info: '<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 11v6m0-10h.01\"/>',\n};\nconst icon = (name) =>\n `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">${paths[name] || paths.runs}</svg>`;\nconst escape = (value) =>\n String(value).replace(\n /[&<>\"']/g,\n (character) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\" })[character],\n );\nconst labels = {\n success: \"Passed\",\n failed: \"Failed\",\n running: \"Running\",\n pending: \"Queued\",\n cancelled: \"Cancelled\",\n skipped: \"Skipped\",\n};\nconst statusIcon = (status) =>\n `<span class=\"status-icon ${status}\">${icon(status === \"success\" ? \"check\" : status)}</span>`;\nconst badge = (status) => `<span class=\"status ${status}\">${statusIcon(status)}${labels[status]}</span>`;\nconst workflows = [\n {\n id: \"build-docker-image\",\n name: \"Build Docker image\",\n description: \"Build, test, and publish a container image to the registry.\",\n labels: [\"docker\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Build image\", \"Push to registry\"],\n },\n {\n id: \"build-publish-npm\",\n name: \"Build & publish npm\",\n description: \"Validate packages and publish a new release to npm.\",\n labels: [\"node\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Build package\", \"Publish to npm\"],\n },\n {\n id: \"deploy-production\",\n name: \"Deploy production\",\n description: \"Release the latest application and verify service health.\",\n labels: [\"main-server\", \"linux\"],\n steps: [\"Checkout repository\", \"Pull image\", \"Verify configuration\", \"Deploy service\", \"Health check\"],\n },\n {\n id: \"quality-checks\",\n name: \"Quality checks\",\n description: \"Type checking, linting, and tests for every pull request.\",\n labels: [\"node\", \"linux\"],\n steps: [\"Checkout repository\", \"Install dependencies\", \"Run tests\", \"Type check\", \"Lint\"],\n },\n];\nconst seed = [\n [\"running\", 0, \"feat: add multi-platform builds\", \"feat/multi-platform\", \"a8f3c12\", 93, \"Just now\", \"on\"],\n [\"pending\", 1, \"chore: prepare September release\", \"main\", \"d72e8b1\", 0, \"1 min ago\", \"lithium\"],\n [\"failed\", 0, \"fix: resolve image build context\", \"main\", \"7bc91e4\", 142, \"4 min ago\", \"on\"],\n [\"success\", 2, \"feat: improve workflow navigation\", \"main\", \"f38ac02\", 68, \"12 min ago\", \"on\"],\n [\"success\", 1, \"fix: handle reconnect gracefully\", \"main\", \"c52d190\", 104, \"18 min ago\", \"sodium\"],\n [\"success\", 3, \"feat: add keyboard navigation\", \"feat/keyboard-nav\", \"8a12e6f\", 46, \"26 min ago\", \"lithium\"],\n [\"failed\", 1, \"chore: update dependency versions\", \"main\", \"e90b721\", 38, \"34 min ago\", \"lithium\"],\n [\"success\", 0, \"fix: restore health check endpoint\", \"main\", \"2a19d63\", 127, \"42 min ago\", \"auth\"],\n [\"success\", 1, \"feat: expose workflow metadata\", \"main\", \"b94d512\", 88, \"1 hr ago\", \"on\"],\n [\"success\", 3, \"test: cover retry boundaries\", \"fix/retries\", \"6fb841a\", 59, \"1 hr ago\", \"on\"],\n [\"cancelled\", 0, \"chore: rebuild base image\", \"main\", \"51ea273\", 17, \"2 hrs ago\", \"auth\"],\n [\"success\", 2, \"fix: improve session recovery\", \"main\", \"832df1a\", 62, \"2 hrs ago\", \"auth\"],\n [\"success\", 3, \"refactor: simplify component lifecycle\", \"main\", \"27d1c98\", 71, \"3 hrs ago\", \"lithium\"],\n [\"success\", 1, \"chore: release patch version\", \"main\", \"92dc128\", 96, \"3 hrs ago\", \"sodium\"],\n [\"success\", 0, \"feat: cache dependency layers\", \"main\", \"bd5201c\", 112, \"4 hrs ago\", \"on\"],\n [\"success\", 2, \"fix: persist worker labels\", \"main\", \"876da42\", 65, \"5 hrs ago\", \"on\"],\n];\nlet jobs = seed.map(([status, workflow, message, branch, commit, seconds, time, repo], index) => ({\n id: 2856 - index,\n status,\n workflow: workflows[workflow],\n message,\n branch,\n commit,\n seconds,\n time,\n repo,\n worker: status === \"pending\" ? null : \"alpha\",\n attempt: 1,\n parent: null,\n}));\nconst state = {\n search: \"\",\n status: \"all\",\n workflow: \"all\",\n branch: \"all\",\n page: 1,\n step: null,\n detailTab: \"logs\",\n logQuery: \"\",\n wrap: false,\n};\nconst main = document.querySelector(\"#main\");\nconst dialog = document.querySelector(\"#dialog\");\nlet toastTimer;\nlet previousRoute = \"\";\n\nfunction duration(seconds) {\n if (!seconds) {\n return \"—\";\n }\n return `${Math.floor(seconds / 60) ? `${Math.floor(seconds / 60)}m ` : \"\"}${seconds % 60}s`;\n}\nfunction toast(message) {\n const element = document.querySelector(\"#toast\");\n clearTimeout(toastTimer);\n element.textContent = message;\n element.hidden = false;\n toastTimer = setTimeout(() => {\n element.hidden = true;\n }, 4500);\n}\nfunction route() {\n const [path, query = \"\"] = window.location.hash.slice(1).split(\"?\");\n return { path: path || \"/runs\", query: new URL(`https://example.test/?${query}`).searchParams };\n}\nfunction currentJob() {\n return jobs.find((job) => job.id === Number(route().path.split(\"/\")[2]));\n}\nfunction updateFilterUrl() {\n const params = new URL(\"https://example.test\").searchParams;\n for (const key of [\"search\", \"status\", \"workflow\", \"branch\", \"page\"]) {\n if (state[key] !== \"\" && state[key] !== \"all\" && state[key] !== 1) {\n params.set(key, state[key]);\n }\n }\n window.history.replaceState(\n null,\n \"\",\n `${window.location.pathname}${window.location.search}#/runs${params.size ? `?${params}` : \"\"}`,\n );\n}\nfunction readFilters() {\n const { query } = route();\n state.search = query.get(\"search\") || \"\";\n state.status = [\"all\", \"running\", \"failed\", \"success\"].includes(query.get(\"status\")) ? query.get(\"status\") : \"all\";\n state.workflow = workflows.some((workflow) => workflow.id === query.get(\"workflow\")) ? query.get(\"workflow\") : \"all\";\n state.branch = [\"main\", \"feature\"].includes(query.get(\"branch\")) ? query.get(\"branch\") : \"all\";\n const page = Number(query.get(\"page\"));\n state.page = Number.isSafeInteger(page) && page > 0 ? page : 1;\n}\nfunction navigation(page) {\n document.querySelector(\"#navigation\").innerHTML = [\n [\"runs\", \"Runs\", \"runs\"],\n [\"workflows\", \"Workflows\", \"workflow\"],\n [\"workers\", \"Workers\", \"server\"],\n [\"settings\", \"Settings\", \"settings\"],\n ]\n .map(\n ([id, title, symbol]) =>\n `<a href=\"#/${id}\" class=\"nav-item ${id === page ? \"active\" : \"\"}\" ${id === page ? 'aria-current=\"page\"' : \"\"} aria-label=\"${title}\">${icon(symbol)}<span class=\"nav-label\">${title}</span>${id === \"runs\" ? `<span class=\"nav-count\">${jobs.filter((job) => [\"running\", \"pending\"].includes(job.status)).length}</span>` : \"\"}</a>`,\n )\n .join(\"\");\n const title = page[0].toUpperCase() + page.slice(1);\n const job = currentJob();\n document.querySelector(\"#breadcrumbs\").innerHTML =\n `<a href=\"#/runs\">Apphor</a><span class=\"divider\">/</span>${job ? `<a href=\"#/runs\">Runs</a><span class=\"divider\">/</span><strong class=\"mono\">#${job.id}</strong>` : `<strong>${title}</strong>`}`;\n document.title = `${job ? `Run #${job.id}` : title} · Flow`;\n}\nfunction summary() {\n const complete = jobs.filter((job) => [\"success\", \"failed\"].includes(job.status));\n const passing = complete.filter((job) => job.status === \"success\");\n const sorted = complete.map((job) => job.seconds).sort((a, b) => a - b);\n const median = sorted.length\n ? Math.round((sorted[Math.floor((sorted.length - 1) / 2)] + sorted[Math.floor(sorted.length / 2)]) / 2)\n : 0;\n return `<section class=\"overview\" aria-label=\"Run summary for sample data\">\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"runs\")}Total runs</div><div class=\"metric-bottom\"><span class=\"metric-value\">${jobs.length}</span><span class=\"metric-note\">in this sample</span><div class=\"tiny-bars\" aria-hidden=\"true\">${[11, 17, 13, 22, 16, 20, 25, 18, 24, 21].map((height) => `<i style=\"height:${height}px\"></i>`).join(\"\")}</div></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"check\")}Pass rate</div><div class=\"metric-bottom\"><span class=\"metric-value\">${Math.round((passing.length / complete.length) * 100)}<small>%</small></span><span class=\"metric-note\"><span>${passing.length}</span> / ${complete.length} completed</span></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"clock\")}Median duration</div><div class=\"metric-bottom\"><span class=\"metric-value\">${duration(median)}</span></div></div>\n <div class=\"metric\"><div class=\"metric-label\">${icon(\"running\")}In progress</div><div class=\"metric-bottom\"><span class=\"metric-value\">${jobs.filter((job) => job.status === \"running\").length}</span><span class=\"metric-note\">${jobs.filter((job) => job.status === \"pending\").length} queued</span></div></div>\n </section>`;\n}\nfunction runsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Runs</h1><p class=\"subtitle\">Every change, from commit to complete.</p></div><button class=\"button primary\" data-action=\"new-run\">${icon(\"plus\")}Run workflow</button></div>\n ${summary()}<section aria-labelledby=\"recent-runs\"><div class=\"section-heading\"><h2 id=\"recent-runs\">Recent runs <span class=\"count\">${jobs.length}</span></h2><span>${icon(\"clock\")}Sample activity · Today</span></div>\n <div class=\"filters\"><label class=\"search-box\">${icon(\"search\")}<span class=\"sr-only\">Search runs</span><input id=\"run-search\" type=\"search\" value=\"${escape(state.search)}\" placeholder=\"Search runs, commits, or repositories…\" autocomplete=\"off\"/><kbd aria-hidden=\"true\">/</kbd></label>\n <select id=\"workflow-filter\" class=\"select-filter\" aria-label=\"Filter by workflow\"><option value=\"all\">All workflows</option>${workflows.map((workflow) => `<option value=\"${workflow.id}\" ${state.workflow === workflow.id ? \"selected\" : \"\"}>${workflow.name}</option>`).join(\"\")}</select>\n <select id=\"branch-filter\" class=\"select-filter\" aria-label=\"Filter by branch\"><option value=\"all\">All branches</option><option value=\"main\" ${state.branch === \"main\" ? \"selected\" : \"\"}>main</option><option value=\"feature\" ${state.branch === \"feature\" ? \"selected\" : \"\"}>Feature branches</option></select></div>\n <div id=\"run-results\"></div></section>\n <div class=\"attention-strip\">${icon(\"alert\")}<p><strong>${jobs.filter((job) => job.status === \"failed\").length} failed runs</strong><span>A little attention goes a long way.</span></p><button class=\"text-button\" data-action=\"filter-failed\">Review failures ${icon(\"arrow\")}</button></div>`;\n renderResults();\n}\nfunction filteredJobs(includeStatus = true) {\n return jobs.filter((job) => {\n const text = [job.id, job.message, job.workflow.id, job.workflow.name, job.repo, job.commit, job.branch]\n .join(\" \")\n .toLowerCase();\n return (\n text.includes(state.search.trim().toLowerCase()) &&\n (state.workflow === \"all\" || job.workflow.id === state.workflow) &&\n (state.branch === \"all\" || (state.branch === \"main\" ? job.branch === \"main\" : job.branch !== \"main\")) &&\n (!includeStatus ||\n state.status === \"all\" ||\n (state.status === \"running\" ? [\"pending\", \"running\"].includes(job.status) : job.status === state.status))\n );\n });\n}\nfunction renderResults() {\n const filtered = filteredJobs();\n const all = filteredJobs(false);\n const pages = Math.max(1, Math.ceil(filtered.length / 8));\n state.page = Math.min(pages, state.page);\n const visible = filtered.slice((state.page - 1) * 8, state.page * 8);\n document.querySelector(\"#run-results\").innerHTML =\n `<div class=\"filter-tabs\" role=\"group\" aria-label=\"Filter by run status\">${[\n [\"all\", \"All runs\"],\n [\"running\", \"In progress\"],\n [\"failed\", \"Failed\"],\n [\"success\", \"Passed\"],\n ]\n .map(\n ([value, label]) =>\n `<button class=\"filter-tab ${state.status === value ? \"active\" : \"\"}\" data-action=\"status-filter\" data-value=\"${value}\" aria-pressed=\"${state.status === value}\">${label}<span class=\"count\">${all.filter((job) => value === \"all\" || (value === \"running\" ? [\"pending\", \"running\"].includes(job.status) : job.status === value)).length}</span></button>`,\n )\n .join(\"\")}</div>\n ${visible.length ? `<table class=\"run-table\"><caption class=\"sr-only\">Workflow runs, newest first</caption><thead><tr><th scope=\"col\">Workflow / commit</th><th scope=\"col\">Status</th><th scope=\"col\">Branch</th><th scope=\"col\">Duration</th><th scope=\"col\">Started</th></tr></thead><tbody>${visible.map((job) => `<tr><td><a class=\"run-link\" href=\"#/runs/${job.id}\" aria-label=\"Run ${job.id}: ${escape(job.workflow.name)}, ${labels[job.status]}\">${statusIcon(job.status)}<span class=\"run-copy\"><span class=\"run-title\">${job.workflow.name}</span><span class=\"run-subtitle\"><span class=\"mono\">#${job.id}</span><span class=\"separator\">·</span><span>cloud-cli/${job.repo}</span><span class=\"separator\">·</span><span class=\"mono\">${job.commit}</span></span></span></a></td><td>${badge(job.status)}</td><td><span class=\"branch\">${icon(\"branch\")}${escape(job.branch)}</span></td><td><span class=\"mono duration\">${duration(job.seconds)}</span></td><td>${job.time}</td></tr>`).join(\"\")}</tbody></table>` : `<div class=\"empty-state\">${icon(\"search\")}<h3>No runs found</h3><p>Try a different search or clear your filters.</p><button class=\"button\" data-action=\"clear-filters\">Clear filters</button></div>`}\n <div class=\"table-footer\"><span role=\"status\">${filtered.length ? `${(state.page - 1) * 8 + 1}–${Math.min(state.page * 8, filtered.length)} of ${filtered.length} runs` : \"0 runs\"}</span><div class=\"pagination\"><button class=\"button\" data-action=\"prev-page\" ${state.page === 1 ? \"disabled\" : \"\"}>${icon(\"back\")}Previous</button><span>${state.page} / ${pages}</span><button class=\"button\" data-action=\"next-page\" ${state.page === pages ? \"disabled\" : \"\"}>Next${icon(\"arrow\")}</button></div></div><div class=\"table-hint\">${icon(\"info\")}Open a run to explore its steps, logs, and execution history.</div>`;\n}\nfunction stepsFor(job) {\n return job.workflow.steps.map((name, index) => {\n let status = \"success\";\n if (job.status === \"failed\") {\n status = index < 2 ? \"success\" : index === 2 ? \"failed\" : \"skipped\";\n }\n if (job.status === \"running\") {\n status = index < 3 ? \"success\" : index === 3 ? \"running\" : \"pending\";\n }\n if (job.status === \"pending\") {\n status = \"pending\";\n }\n if (job.status === \"cancelled\") {\n status = index === 0 ? \"success\" : index === 1 ? \"cancelled\" : \"skipped\";\n }\n const seconds = [\"skipped\", \"pending\"].includes(status)\n ? 0\n : Math.round(job.seconds * [0.03, 0.24, 0.45, 0.2, 0.08][index]);\n return { name, status, seconds, index };\n });\n}\nfunction detailPage(job) {\n const steps = stepsFor(job);\n if (state.step === null) {\n state.step = Math.max(\n 0,\n steps.findIndex((step) => [\"failed\", \"running\"].includes(step.status)),\n );\n }\n const active = [\"running\", \"pending\"].includes(job.status);\n main.innerHTML = `<a href=\"#/runs\" class=\"back-link\">${icon(\"back\")}All runs</a><div class=\"page-heading run-heading\"><div><h1>${statusIcon(job.status)}${job.workflow.name}</h1><p class=\"subtitle\"><span class=\"mono\">#${job.id}</span><span>·</span><span>${escape(job.message)}</span></p></div><div class=\"heading-actions\"><button class=\"button\" data-action=\"download-logs\">${icon(\"download\")}Download logs</button><button class=\"button ${active ? \"danger\" : \"primary\"}\" data-action=\"${active ? \"cancel-run\" : \"rerun\"}\">${icon(active ? \"stop\" : \"refresh\")}${active ? \"Cancel run\" : \"Re-run workflow\"}</button></div></div>\n <section class=\"detail-meta\" aria-label=\"Run metadata\"><div><span class=\"meta-label\">STATUS</span><span class=\"meta-value\">${badge(job.status)}</span></div><div><span class=\"meta-label\">REPOSITORY / BRANCH</span><span class=\"meta-value\">${icon(\"branch\")}${escape(job.branch)}</span></div><div><span class=\"meta-label\">COMMIT</span><span class=\"meta-value mono\">${icon(\"commit\")}${job.commit}</span></div><div><span class=\"meta-label\">DURATION</span><span class=\"meta-value\">${icon(\"clock\")}${duration(job.seconds)}</span></div><div><span class=\"meta-label\">WORKER</span><span class=\"meta-value\">${icon(\"server\")}${job.worker || \"Awaiting worker\"}${job.worker ? '<span class=\"tag\">linux · x64</span>' : \"\"}</span></div></section>\n <div class=\"detail-tabs\" role=\"group\" aria-label=\"Run detail views\">${[\n [\"logs\", \"Logs & steps\", \"terminal\"],\n [\"inputs\", \"Inputs\", \"code\"],\n [\"artifacts\", \"Artifacts\", \"box\"],\n [\"history\", \"History\", \"history\"],\n ]\n .map(\n ([value, title, symbol]) =>\n `<button data-action=\"detail-tab\" data-value=\"${value}\" class=\"${state.detailTab === value ? \"active\" : \"\"}\" aria-pressed=\"${state.detailTab === value}\">${icon(symbol)}${title}${value === \"history\" ? `<span class=\"count\">${job.attempt}</span>` : \"\"}</button>`,\n )\n .join(\"\")}</div>\n <div id=\"detail-content\"></div>`;\n renderDetailContent(job);\n}\nfunction renderDetailContent(job) {\n const content = document.querySelector(\"#detail-content\");\n if (state.detailTab === \"inputs\") {\n content.innerHTML = `<section class=\"source-view\"><h3>Trigger inputs <span class=\"tag\">${job.parent ? \"manual restart\" : \"push event\"}</span></h3><pre>${escape(JSON.stringify({ repository: `cloud-cli/${job.repo}`, ref: `refs/heads/${job.branch}`, commit: job.commit, workflow: job.workflow.id, triggered_by: job.parent ? \"user:jamie\" : \"webhook:github\" }, null, 2))}</pre></section><section class=\"source-view\" style=\"margin-top:20px\"><h3>Workflow source · revision 12</h3><pre>${escape(workflowSource(job.workflow))}</pre></section>`;\n return;\n }\n if (state.detailTab === \"artifacts\") {\n content.innerHTML =\n job.status === \"success\"\n ? `<section class=\"settings-section\"><h2>Run artifacts <span class=\"count\">1</span></h2><div class=\"setting-row\"><div><strong>${icon(\"box\")} build-manifest.json</strong><p>Sample build metadata · JSON</p></div><button class=\"button\" data-action=\"artifact\">${icon(\"download\")}Download</button></div></section>`\n : `<div class=\"empty-state\">${icon(\"box\")}<h3>No artifacts yet</h3><p>${activeStatus(job) ? \"Artifacts appear here when the run completes.\" : \"This run did not produce any artifacts.\"}</p></div>`;\n return;\n }\n if (state.detailTab === \"history\") {\n const history = [];\n let current = job;\n while (current) {\n history.push(current);\n current = jobs.find((candidate) => candidate.id === current.parent);\n }\n content.innerHTML = `<section class=\"settings-section\"><h2>Execution history</h2>${history.map((entry) => `<div class=\"setting-row\"><div><strong><a href=\"#/runs/${entry.id}\">Run #${entry.id} · Attempt ${entry.attempt}</a></strong><p>${entry.parent ? `Re-run of #${entry.parent} · Triggered by Jamie` : \"Original run · Triggered by GitHub\"} · ${entry.time}</p></div>${badge(entry.status)}</div>`).join(\"\")}</section>`;\n return;\n }\n const steps = stepsFor(job);\n const selected = steps[state.step];\n content.innerHTML = `${job.status === \"failed\" ? `<div class=\"failure-banner\">${icon(\"alert\")}<div><strong>Run tests failed with exit code 1</strong><p>One test failed. The remaining steps were skipped.</p></div><button class=\"text-button\" data-action=\"jump-error\">Jump to error ${icon(\"arrow\")}</button></div>` : \"\"}\n <section class=\"execution\" aria-label=\"Execution steps and logs\"><aside class=\"steps-panel\" aria-label=\"Execution steps\"><div class=\"steps-heading\"><span>Execution steps</span><span class=\"mono\">${steps.filter((step) => step.status === \"success\").length} / ${steps.length}</span></div>${steps.map((step) => `<button class=\"step-button ${state.step === step.index ? \"active\" : \"\"}\" data-action=\"step\" data-value=\"${step.index}\" aria-pressed=\"${state.step === step.index}\" aria-label=\"${step.name}, ${labels[step.status]}\">${statusIcon(step.status)}<span>${step.name}</span><span class=\"mono\">${duration(step.seconds)}</span></button>`).join(\"\")}<div class=\"step-count\">${icon(\"clock\")}Total duration ${duration(job.seconds)}</div></aside>\n <div class=\"log-panel\"><div class=\"log-heading\"><h3>${selected.name}<small>${selected.status === \"failed\" ? \"exit code 1\" : labels[selected.status]}</small></h3><div class=\"log-actions\"><button class=\"icon-button\" data-action=\"wrap\" aria-label=\"Wrap log lines\" aria-pressed=\"${state.wrap}\" title=\"Wrap log lines\">${icon(\"wrap\")}</button><button class=\"icon-button\" data-action=\"copy-log\" aria-label=\"Copy step log\" title=\"Copy step log\">${icon(\"copy\")}</button></div></div><label class=\"log-search\">${icon(\"search\")}<span class=\"sr-only\">Search step log</span><input id=\"log-search\" type=\"search\" placeholder=\"Find in this step…\" value=\"${escape(state.logQuery)}\"/><span id=\"log-matches\"></span></label><div class=\"log-lines ${state.wrap ? \"wrap\" : \"\"}\" id=\"log-lines\" tabindex=\"0\" aria-label=\"Step log output\"></div><div class=\"log-bottom\"><span>${selected.status === \"failed\" ? \"Process exited with code 1\" : activeStatus(job) ? \"Sample execution output\" : \"End of step output\"}</span><span class=\"mono\">UTF-8</span></div></div></section>\n <div class=\"detail-bottom\"><span>${icon(\"lock\")}Logs are visible to workspace members.</span><span>cloud-cli/${job.repo}<span>·</span>Workflow revision 12<span>·</span>Attempt ${job.attempt}</span></div>`;\n renderLogs(job);\n}\nfunction activeStatus(job) {\n return [\"pending\", \"running\"].includes(job.status);\n}\nfunction logsFor(job, index) {\n const step = stepsFor(job)[index];\n if (step.status === \"skipped\") {\n return [{ text: \"Step skipped because an earlier step did not complete.\", type: \"dim\" }];\n }\n if (step.status === \"pending\") {\n return [{ text: \"Waiting for a worker…\", type: \"dim\" }];\n }\n if (step.status === \"failed\") {\n return [\n [\"$ pnpm test\", \"\"],\n [\"> @cloud-cli/on test\", \"dim\"],\n [\"> vitest run\", \"dim\"],\n [\"\", \"\"],\n [\" RUN v4.1.11 /workspace/cloud-cli/on\", \"\"],\n [\"\", \"\"],\n [\" ✓ src/config.spec.ts (8 tests) 14ms\", \"pass\"],\n [\" ✓ src/queue.spec.ts (12 tests) 31ms\", \"pass\"],\n [\" ❯ src/worker.spec.ts (6 tests | 1 failed) 89ms\", \"error\"],\n [\" × worker > retries a failed job\", \"error\"],\n [\"\", \"\"],\n [\" FAIL src/worker.spec.ts > worker > retries a failed job\", \"error\"],\n [\" AssertionError: expected 2 to equal 3\", \"error\"],\n [\"\", \"\"],\n [\" Expected: 3\", \"pass\"],\n [\" Received: 2\", \"error\"],\n [\"\", \"\"],\n [\" ❯ src/worker.spec.ts:142:28\", \"\"],\n [\" 140| await worker.retry(job);\", \"dim\"],\n [\" 141|\", \"dim\"],\n [\" 142| expect(job.attempts).toBe(3);\", \"error\"],\n [\" | ^\", \"error\"],\n [\"\", \"\"],\n [\" Test Files 1 failed | 2 passed (3)\", \"\"],\n [\" Tests 1 failed | 25 passed (26)\", \"\"],\n [\" Duration 1.42s\", \"dim\"],\n [\"\", \"\"],\n [\" ELIFECYCLE Test failed. See above for more details.\", \"error\"],\n ].map(([text, type]) => ({ text, type }));\n }\n const logs =\n index === 0\n ? [\n `$ git clone https://github.com/cloud-cli/${job.repo}.git .`,\n \"Cloning into '.'...\",\n \"remote: Enumerating objects: 184, done.\",\n \"remote: Compressing objects: 100% (92/92), done.\",\n \"Receiving objects: 100% (184/184), 148.2 KiB | 3.1 MiB/s, done.\",\n `$ git checkout ${job.commit}`,\n `HEAD is now at ${job.commit} ${job.message}`,\n \"\",\n \"✓ Repository ready.\",\n ]\n : index === 1\n ? [\n \"$ pnpm install --frozen-lockfile\",\n \"Lockfile is up to date, resolution step is skipped\",\n \"Progress: resolved 248, reused 248, downloaded 0, added 248\",\n \"\",\n \"✓ Dependencies installed from cache.\",\n \"Done in 2.4s.\",\n ]\n : index === 2\n ? [\n \"$ pnpm test\",\n \" RUN v4.1.11 /workspace\",\n \"\",\n \" ✓ src/config.spec.ts (8 tests)\",\n \" ✓ src/queue.spec.ts (12 tests)\",\n \" ✓ src/worker.spec.ts (6 tests)\",\n \"\",\n \" Test Files 3 passed (3)\",\n \" Tests 26 passed (26)\",\n \"\",\n \"✓ All tests passed.\",\n ]\n : [\n `$ ${job.workflow.id === \"build-docker-image\" ? \"docker build --tag app:latest .\" : \"pnpm build\"}`,\n \"#1 Loading build configuration\",\n \"#1 DONE 0.1s\",\n \"#2 Resolving dependencies\",\n \"#2 CACHED\",\n \"#3 Compiling source files\",\n \"#3 DONE 1.3s\",\n \"#4 Creating production bundle\",\n ...(step.status === \"running\"\n ? [\"#4 Building…\"]\n : [\"#4 DONE 0.8s\", \"\", \"✓ Step completed successfully.\"]),\n ];\n if (step.status === \"cancelled\") {\n logs.push(\"Run cancelled by Jamie.\");\n }\n return logs.map((text) => ({ text, type: text.startsWith(\"✓\") || text.includes(\" passed\") ? \"pass\" : \"\" }));\n}\nfunction renderLogs(job) {\n const logs = logsFor(job, state.step);\n const query = state.logQuery.toLowerCase();\n let matches = 0;\n document.querySelector(\"#log-lines\").innerHTML = logs\n .map((line, index) => {\n let text = escape(line.text);\n const position = query ? line.text.toLowerCase().indexOf(query) : -1;\n if (position >= 0) {\n matches++;\n text = `${escape(line.text.slice(0, position))}<mark>${escape(line.text.slice(position, position + query.length))}</mark>${escape(line.text.slice(position + query.length))}`;\n }\n return `<div class=\"log-line ${line.type}\" ${line.type === \"error\" ? 'data-error=\"true\"' : \"\"}><span class=\"line-number\">${index + 1}</span><span class=\"log-time\">12:04:${String(16 + Math.floor(index / 3)).padStart(2, \"0\")}</span><span class=\"line-text\">${text || \" \"}</span></div>`;\n })\n .join(\"\");\n document.querySelector(\"#log-matches\").textContent = query ? `${matches} matching lines` : \"\";\n}\nfunction workflowSource(workflow) {\n return `name: ${workflow.name}\\nruns-on: [${workflow.labels.join(\", \")}]\\n\\n# Illustrative workflow definition\\nsteps:\\n${workflow.steps.map((name, index) => ` - name: ${name}\\n run: ${['git checkout \"$COMMIT\"', \"pnpm install --frozen-lockfile\", \"pnpm test\", \"pnpm build\", 'echo \"Release complete\"'][index]}`).join(\"\\n\")}`;\n}\nfunction workflowsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Workflows</h1><p class=\"subtitle\">Your delivery process, clearly defined.</p></div><button class=\"button primary\" data-action=\"new-run\">${icon(\"plus\")}Run workflow</button></div><div class=\"cards\">${workflows.map((workflow, index) => `<article class=\"workflow-card\"><div class=\"card-heading\">${icon(\"workflow\")}<h2>${workflow.name}</h2><span class=\"tag\">Enabled</span></div><p class=\"card-description\">${workflow.description}</p><div class=\"card-details\">${workflow.labels.map((label) => `<span class=\"tag mono\">${label}</span>`).join(\"\")}<span class=\"tag\">${workflow.steps.length} steps</span></div><div class=\"card-footer\"><a class=\"text-button\" href=\"#/runs?workflow=${workflow.id}\">View runs ${icon(\"arrow\")}</a><button class=\"button\" data-action=\"workflow-source\" data-value=\"${index}\">${icon(\"code\")}View source</button></div></article>`).join(\"\")}</div>`;\n}\nfunction workersPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Workers</h1><p class=\"subtitle\">A clear view of your execution capacity.</p></div><span class=\"status success\">${icon(\"check\")}3 operational</span></div><div class=\"cards\">${[\n [\"alpha\", \"main-server, docker\", 36, 42, \"1 / 4\"],\n [\"bravo\", \"node, linux\", 12, 28, \"0 / 4\"],\n [\"charlie\", \"docker, linux\", 8, 21, \"0 / 2\"],\n ]\n .map(\n ([name, tags, cpu, memory, slots]) =>\n `<article class=\"worker-card\"><div class=\"card-heading\">${icon(\"server\")}<h2>${name}</h2><span class=\"status success\">Online</span></div><p class=\"card-description\">Linux x64 · systemd runner</p><div class=\"card-details\">${tags\n .split(\", \")\n .map((tag) => `<span class=\"tag mono\">${tag}</span>`)\n .join(\n \"\",\n )}</div><div class=\"worker-stats\"><div><span class=\"meta-label\">CPU <span>${cpu}%</span></span><div class=\"progress-track\"><div class=\"progress-fill\" style=\"width:${cpu}%\"></div></div></div><div><span class=\"meta-label\">Memory <span>${memory}%</span></span><div class=\"progress-track\"><div class=\"progress-fill\" style=\"width:${memory}%\"></div></div></div></div><div class=\"card-footer\"><span class=\"settings-note\">${slots} slots in use</span><span class=\"settings-note\">Sample snapshot</span></div></article>`,\n )\n .join(\n \"\",\n )}</div><p class=\"settings-note\" style=\"margin-top:22px\">Jobs are assigned to workers with matching labels. Capacity and health shown here are sample data.</p>`;\n}\nfunction getPreference(key) {\n try {\n return localStorage.getItem(`flow-concept-${key}`) === \"true\";\n } catch {\n return false;\n }\n}\nfunction settingsPage() {\n main.innerHTML = `<div class=\"page-heading\"><div><h1>Settings</h1><p class=\"subtitle\">The essentials for your workspace.</p></div></div><section class=\"settings-section\"><h2>Preferences</h2><label class=\"setting-row\"><span><strong>Compact run list</strong><span class=\"settings-note\">Fit more activity on your screen.</span></span><input type=\"checkbox\" id=\"compact-setting\" ${getPreference(\"compact\") ? \"checked\" : \"\"}/></label><label class=\"setting-row\"><span><strong>Wrap log lines</strong><span class=\"settings-note\">Keep long output within the log viewer.</span></span><input type=\"checkbox\" id=\"wrap-setting\" ${state.wrap ? \"checked\" : \"\"}/></label></section><section class=\"settings-section\"><h2>${icon(\"lock\")} Secrets</h2><p class=\"settings-note\">Available to workflows. Values are never displayed in the dashboard.</p>${[\"NPM_TOKEN\", \"REGISTRY_PASSWORD\", \"DEPLOY_KEY\"].map((name) => `<div class=\"setting-row\"><div><strong class=\"mono\">${name}</strong><p>Workspace secret · Example</p></div><span class=\"secret-value\" aria-label=\"Value hidden\">••••••••••••</span></div>`).join(\"\")}</section><section class=\"settings-section\"><h2>About this concept</h2><p class=\"settings-note\">An interactive design prototype based on Flow’s job list and run details. Runs, logs, workers, and secret names are sample data. Run controls update this browser session. Display preferences are saved on this device.</p><div class=\"setting-row\"><span class=\"settings-note\">Explore without setup.</span><button class=\"button\" data-action=\"shortcuts\">${icon(\"keyboard\")}Keyboard shortcuts</button></div></section>`;\n}\nfunction openDialog(title, body) {\n dialog.innerHTML = `<div class=\"dialog-heading\"><h2 id=\"dialog-title\">${title}</h2><button class=\"icon-button\" data-action=\"close-dialog\" aria-label=\"Close dialog\">${icon(\"close\")}</button></div>${body}`;\n if (!dialog.open) {\n dialog.showModal();\n }\n}\nfunction newRunDialog() {\n openDialog(\n \"Run a workflow\",\n `<p class=\"dialog-description\">Choose what to run. We’ll take it from here.</p><form id=\"new-run-form\"><label class=\"form-field\"><span>Workflow</span><select name=\"workflow\">${workflows.map((workflow) => `<option value=\"${workflow.id}\">${workflow.name}</option>`).join(\"\")}</select></label><label class=\"form-field\"><span>Branch</span><input name=\"branch\" value=\"main\" required maxlength=\"100\" pattern=\"[a-zA-Z0-9._\\\\x2f\\\\x2d]+\"/></label><p class=\"dialog-note\">Prototype mode: creates a sample queued run in this session.</p><div class=\"dialog-footer\"><button class=\"button\" type=\"button\" data-action=\"close-dialog\">Cancel</button><button class=\"button primary\" type=\"submit\">${icon(\"runs\")}Run workflow</button></div></form>`,\n );\n}\nfunction createRun(original, workflow, branch) {\n const job = {\n id: Math.max(...jobs.map((entry) => entry.id)) + 1,\n workflow,\n branch,\n status: \"pending\",\n message: original?.message || \"Manually triggered workflow\",\n commit: original?.commit || \"a8f3c12\",\n seconds: 0,\n time: \"Just now\",\n repo: original?.repo || \"on\",\n worker: null,\n parent: original?.id || null,\n attempt: original ? original.attempt + 1 : 1,\n };\n jobs.unshift(job);\n dialog.close();\n window.location.hash = `/runs/${job.id}`;\n toast(`Sample run #${job.id} queued.`);\n}\nfunction download(name, text) {\n const url = URL.createObjectURL(new Blob([text], { type: \"text/plain;charset=utf-8\" }));\n const anchor = document.createElement(\"a\");\n anchor.href = url;\n anchor.download = name;\n anchor.click();\n setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 1000);\n}\nfunction render() {\n const { path } = route();\n const page = path.split(\"/\")[1] || \"runs\";\n const changed = previousRoute !== path;\n if (changed) {\n state.step = null;\n state.detailTab = \"logs\";\n state.logQuery = \"\";\n }\n previousRoute = path;\n navigation([\"runs\", \"workflows\", \"workers\", \"settings\"].includes(page) ? page : \"runs\");\n if (path === \"/runs\") {\n readFilters();\n runsPage();\n } else if (page === \"runs\" && currentJob()) {\n detailPage(currentJob());\n } else if (page === \"workflows\") {\n workflowsPage();\n } else if (page === \"workers\") {\n workersPage();\n } else if (page === \"settings\") {\n settingsPage();\n } else {\n main.innerHTML = `<div class=\"empty-state\">${icon(\"search\")}<h1>Run not found</h1><p>This run is not part of the sample workspace.</p><a class=\"button\" href=\"#/runs\">Back to runs</a></div>`;\n }\n if (changed) {\n window.scrollTo(0, 0);\n main.focus({ preventScroll: true });\n }\n}\ndocument.addEventListener(\"click\", async (event) => {\n const button = event.target.closest(\"[data-action]\");\n if (!button) {\n return;\n }\n const { action, value } = button.dataset;\n const job = currentJob();\n if (action === \"new-run\") {\n newRunDialog();\n }\n if (action === \"close-dialog\") {\n dialog.close();\n }\n if (action === \"filter-failed\" || action === \"status-filter\") {\n state.status = action === \"filter-failed\" ? \"failed\" : value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n document.querySelector(`.filter-tab[data-value=\"${state.status}\"]`).focus({ preventScroll: true });\n }\n if (action === \"clear-filters\") {\n Object.assign(state, { search: \"\", status: \"all\", workflow: \"all\", branch: \"all\", page: 1 });\n updateFilterUrl();\n runsPage();\n document.querySelector(\"#run-search\").focus();\n }\n if (action === \"prev-page\" || action === \"next-page\") {\n state.page += action === \"next-page\" ? 1 : -1;\n updateFilterUrl();\n renderResults();\n document.querySelector(`button[data-action=\"${action}\"]:not(:disabled)`)?.focus({ preventScroll: true });\n }\n if (action === \"detail-tab\") {\n state.detailTab = value;\n detailPage(job);\n document.querySelector(`[data-action=\"detail-tab\"][data-value=\"${value}\"]`).focus({ preventScroll: true });\n }\n if (action === \"step\") {\n state.step = Number(value);\n state.logQuery = \"\";\n renderDetailContent(job);\n document.querySelector(`[data-action=\"step\"][data-value=\"${value}\"]`).focus({ preventScroll: true });\n }\n if (action === \"jump-error\") {\n state.step = 2;\n state.logQuery = \"\";\n renderDetailContent(job);\n document.querySelector(\"[data-error]\")?.scrollIntoView({ block: \"nearest\" });\n document.querySelector(\"#log-lines\").focus({ preventScroll: true });\n }\n if (action === \"wrap\") {\n state.wrap = !state.wrap;\n document.querySelector(\"#log-lines\").classList.toggle(\"wrap\", state.wrap);\n button.setAttribute(\"aria-pressed\", String(state.wrap));\n }\n if (action === \"copy-log\") {\n try {\n await navigator.clipboard.writeText(\n logsFor(job, state.step)\n .map((line) => line.text)\n .join(\"\\n\"),\n );\n toast(\"Step log copied.\");\n } catch {\n toast(\"Clipboard unavailable. Use Download logs to save the output.\");\n }\n }\n if (action === \"download-logs\") {\n download(\n `flow-run-${job.id}.log`,\n job.workflow.steps\n .map(\n (name, index) =>\n `=== ${name} ===\\n${logsFor(job, index)\n .map((line) => line.text)\n .join(\"\\n\")}`,\n )\n .join(\"\\n\\n\"),\n );\n toast(\"Run log downloaded.\");\n }\n if (action === \"artifact\") {\n download(\n `run-${job.id}-build-manifest.json`,\n JSON.stringify({ sample: true, run: job.id, commit: job.commit, workflow: job.workflow.id }, null, 2),\n );\n }\n if (action === \"rerun\") {\n createRun(job, job.workflow, job.branch);\n }\n if (action === \"cancel-run\") {\n job.status = \"cancelled\";\n state.step = null;\n navigation(\"runs\");\n detailPage(job);\n toast(`Sample run #${job.id} cancelled.`);\n }\n if (action === \"workflow-source\") {\n const workflow = workflows[Number(value)];\n openDialog(\n workflow.name,\n `<p class=\"dialog-description\">Illustrative YAML · revision 12</p><div class=\"source-view\"><pre>${escape(workflowSource(workflow))}</pre></div><div class=\"dialog-footer\"><button class=\"button\" data-action=\"close-dialog\">Close</button></div>`,\n );\n }\n if (action === \"preferences\") {\n window.location.hash = \"/settings\";\n }\n if (action === \"shortcuts\") {\n openDialog(\n \"A few useful shortcuts\",\n `<p class=\"dialog-description\">Less clicking. More getting things done.</p><div class=\"shortcut-row\"><span>Search runs</span><kbd>/</kbd></div><div class=\"shortcut-row\"><span>Run a workflow</span><kbd>N</kbd></div><div class=\"shortcut-row\"><span>Show shortcuts</span><kbd>?</kbd></div><div class=\"shortcut-row\"><span>Close dialog</span><kbd>Esc</kbd></div><div class=\"dialog-footer\"><button class=\"button primary\" data-action=\"close-dialog\">Got it</button></div>`,\n );\n }\n});\ndocument.addEventListener(\"input\", (event) => {\n if (event.target.id === \"run-search\") {\n state.search = event.target.value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n }\n if (event.target.id === \"log-search\") {\n state.logQuery = event.target.value;\n renderLogs(currentJob());\n }\n});\ndocument.addEventListener(\"change\", (event) => {\n if ([\"workflow-filter\", \"branch-filter\"].includes(event.target.id)) {\n state[event.target.id === \"workflow-filter\" ? \"workflow\" : \"branch\"] = event.target.value;\n state.page = 1;\n updateFilterUrl();\n renderResults();\n }\n if ([\"compact-setting\", \"wrap-setting\"].includes(event.target.id)) {\n const key = event.target.id === \"compact-setting\" ? \"compact\" : \"wrap\";\n if (key === \"compact\") {\n document.body.classList.toggle(\"compact\", event.target.checked);\n } else {\n state.wrap = event.target.checked;\n }\n try {\n localStorage.setItem(`flow-concept-${key}`, event.target.checked);\n toast(\"Preference saved on this device.\");\n } catch {\n toast(\"Preference applied for this session.\");\n }\n }\n});\ndocument.addEventListener(\"submit\", (event) => {\n if (event.target.id === \"new-run-form\") {\n event.preventDefault();\n createRun(\n null,\n workflows.find((workflow) => workflow.id === event.target.elements.workflow.value),\n event.target.elements.branch.value.trim(),\n );\n }\n});\ndocument.addEventListener(\"keydown\", (event) => {\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n event.target.closest('input,select,textarea,[contenteditable=\"true\"]') ||\n dialog.open\n ) {\n return;\n }\n if (event.key === \"/\" && route().path === \"/runs\") {\n event.preventDefault();\n document.querySelector(\"#run-search\").focus();\n }\n if (event.key.toLowerCase() === \"n\") {\n event.preventDefault();\n newRunDialog();\n }\n if (event.key === \"?\") {\n event.preventDefault();\n document.querySelector('[data-action=\"shortcuts\"]').click();\n }\n});\nwindow.addEventListener(\"hashchange\", render);\ndocument.querySelectorAll(\"[data-icon]\").forEach((element) => {\n element.innerHTML = icon(element.dataset.icon);\n});\ndocument.body.classList.toggle(\"compact\", getPreference(\"compact\"));\nstate.wrap = getPreference(\"wrap\");\nrender();\n", dg = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <meta name=\"theme-color\" content=\"#f7f8f6\" />\n <meta name=\"description\" content=\"Flow — a quieter place to ship. An interactive CI dashboard design concept.\" />\n <title>Runs · Flow</title>\n <link\n rel=\"icon\"\n href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23244336'/%3E%3Cpath d='M9 10h14M9 16h10M9 22h6' stroke='%23c4efad' stroke-width='3'/%3E%3C/svg%3E\"\n />\n <link rel=\"stylesheet\" href=\"./style.css\" />\n <script src=\"./app.js\" defer><\/script>\n </head>\n <body>\n <a href=\"#main\" class=\"skip-link\">Skip to content</a>\n <aside class=\"sidebar\" aria-label=\"Workspace navigation\">\n <a class=\"brand\" href=\"#/runs\" aria-label=\"Flow home\"\n ><span class=\"brand-mark\"><i></i><i></i><i></i></span>flow<span class=\"brand-period\">.</span></a\n >\n <div class=\"workspace\">\n <span class=\"workspace-icon\">a</span>\n <div><strong>Apphor</strong><span>Engineering workspace</span></div>\n <span class=\"workspace-label\">PRO</span>\n </div>\n <div class=\"nav-caption\">WORKSPACE</div>\n <nav id=\"navigation\"></nav>\n <div class=\"sidebar-bottom\">\n <div class=\"runner-health\">\n <span class=\"health-dot\"></span><span>Runners operational</span><span class=\"mono\">3/3</span>\n </div>\n <button class=\"profile\" data-action=\"preferences\">\n <span class=\"avatar\">JD</span><span><strong>Jamie Davis</strong><small>Workspace admin</small></span\n ><span data-icon=\"settings\"></span>\n </button>\n </div>\n </aside>\n <div class=\"app-shell\">\n <header class=\"topbar\">\n <div class=\"breadcrumbs\" id=\"breadcrumbs\"></div>\n <div class=\"topbar-right\">\n <span class=\"demo-label\"><span></span>Interactive concept</span\n ><button\n class=\"icon-button\"\n data-action=\"shortcuts\"\n aria-label=\"Keyboard shortcuts\"\n title=\"Keyboard shortcuts\"\n >\n <span data-icon=\"keyboard\"></span></button\n ><span class=\"avatar small\">JD</span>\n </div>\n </header>\n <main id=\"main\" tabindex=\"-1\"></main>\n <footer class=\"page-footer\">\n <span><span class=\"footer-mark\">⌁</span> Less friction. More shipping.</span\n ><span>Flow UI concept <span class=\"footer-dot\">·</span> Sample data</span>\n </footer>\n </div>\n <dialog id=\"dialog\" aria-labelledby=\"dialog-title\"></dialog>\n <div id=\"toast\" role=\"status\" class=\"toast\" hidden></div>\n </body>\n</html>\n", fg = "@import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap\");\n\n:root {\n --bg: #f3f5f1;\n --sidebar: #e9eee6;\n --ink: #1a1e22;\n --muted: #505b52;\n --line: #cbd3c8;\n --subtle: #fafbf8;\n --green: #387045;\n --green-bg: #e8f0e5;\n --accent: #c8e6a8;\n --red: #b54138;\n --red-bg: #fee2e2;\n --blue: #4a66a0;\n --blue-bg: #e8eef6;\n --amber: #845e1c;\n font-family:\n \"DM Sans\",\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n sans-serif;\n color: var(--ink);\n font-size: 15px;\n font-synthesis: none;\n}\n* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n background: var(--bg);\n}\nbutton,\ninput,\nselect {\n font: inherit;\n}\nbutton,\na,\ninput,\nselect,\nsummary {\n -webkit-tap-highlight-color: transparent;\n}\nbutton,\nselect,\nsummary {\n cursor: pointer;\n}\nbutton {\n color: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\nbutton {\n border: 0;\n background: none;\n}\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n:focus-visible {\n outline: 2px solid #467b40;\n outline-offset: 4px;\n}\ninput:focus-visible,\nselect:focus-visible {\n outline-offset: 1px;\n}\nbutton,\na {\n touch-action: manipulation;\n}\nsvg {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n vertical-align: middle;\n}\nh1,\nh2,\nh3,\np {\n margin: 0;\n}\n.mono,\ncode,\nkbd,\npre {\n font-family: \"IBM Plex Mono\", monospace;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.skip-link {\n position: fixed;\n top: -60px;\n left: 20px;\n z-index: 100;\n background: var(--ink);\n color: white;\n padding: 12px;\n}\n.skip-link:focus {\n top: 10px;\n}\n.sidebar {\n width: 224px;\n position: fixed;\n inset: 0 auto 0 0;\n background: var(--sidebar);\n border-right: 1px solid var(--line);\n padding: 32px 17px 18px;\n display: flex;\n flex-direction: column;\n}\n.brand {\n display: flex;\n align-items: center;\n font-size: 33px;\n font-weight: 700;\n letter-spacing: -1.9px;\n padding: 0 13px;\n width: fit-content;\n}\n.brand-period {\n color: #729b5b;\n}\n.brand-mark {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 5px;\n width: 31px;\n height: 34px;\n margin-right: 10px;\n transform: skewY(-13deg);\n}\n.brand-mark i {\n display: block;\n width: 27px;\n height: 5px;\n border-radius: 2px;\n background: #547d42;\n}\n.brand-mark i:nth-child(2) {\n width: 20px;\n}\n.brand-mark i:nth-child(3) {\n width: 13px;\n}\n.workspace {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 38px 2px 30px;\n padding: 12px 10px;\n border: 1px solid var(--line);\n border-radius: 7px;\n background: var(--subtle);\n}\n.workspace-icon {\n display: grid;\n place-items: center;\n width: 30px;\n height: 31px;\n border: 1px solid #e2e7dc;\n border-radius: 5px;\n background: #edf1e7;\n font-weight: 700;\n font-size: 19px;\n}\n.workspace strong {\n display: block;\n font-size: 13px;\n font-weight: 600;\n}\n.workspace div > span {\n display: block;\n font-size: 13px;\n margin-top: 3px;\n color: var(--muted);\n}\n.workspace-label {\n margin-left: auto;\n font-size: 13px;\n border: 1px solid var(--line);\n padding: 2px 4px;\n color: var(--muted);\n border-radius: 3px;\n}\n.nav-caption {\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1.4px;\n color: var(--muted);\n padding: 0 13px;\n margin-bottom: 12px;\n}\nnav {\n display: grid;\n gap: 5px;\n}\n.nav-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n border-radius: 6px;\n color: var(--ink);\n font-size: 13px;\n font-weight: 500;\n}\n.nav-item:hover {\n background: var(--subtle);\n}\n.nav-item.active {\n background: #e8efdf;\n color: #344d29;\n}\n.nav-item svg {\n width: 17px;\n height: 17px;\n}\n.nav-count {\n margin-left: auto;\n font-size: 13px;\n background: #e2e8dc;\n padding: 2px 6px;\n border-radius: 4px;\n}\n.sidebar-bottom {\n margin-top: auto;\n}\n.runner-health {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n padding: 18px 8px;\n color: var(--muted);\n}\n.runner-health .mono {\n margin-left: auto;\n font-size: 10px;\n}\n.health-dot {\n width: 6px;\n height: 6px;\n background: #699d55;\n border-radius: 50%;\n flex-shrink: 0;\n}\n.profile {\n border-top: 1px solid var(--line);\n padding: 19px 5px 0;\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n text-align: left;\n}\n.avatar {\n display: grid;\n place-items: center;\n background: #ebe6d9;\n color: #756a50;\n width: 33px;\n height: 33px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 600;\n flex-shrink: 0;\n}\n.profile strong {\n display: block;\n font-size: 13px;\n font-weight: 550;\n}\n.profile small {\n display: block;\n font-size: 13px;\n color: var(--muted);\n margin-top: 3px;\n}\n.profile > span:last-child {\n margin-left: auto;\n color: var(--muted);\n}\n.small {\n width: 27px;\n height: 27px;\n font-size: 10px;\n}\n.app-shell {\n margin-left: 224px;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n.topbar {\n height: 72px;\n border-bottom: 1px solid var(--line);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 42px;\n gap: 15px;\n}\n.breadcrumbs {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #737a70;\n}\n.breadcrumbs a:hover {\n color: var(--ink);\n}\n.breadcrumbs .divider {\n color: #c5c9c1;\n}\n.breadcrumbs strong {\n color: #434b40;\n font-weight: 500;\n}\n.topbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n.demo-label {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: var(--muted);\n}\n.demo-label > span {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: #8c9c7f;\n}\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n min-height: 32px;\n border-radius: 5px;\n color: var(--muted);\n}\n.icon-button:hover {\n background: #edf0e8;\n color: var(--ink);\n}\nmain {\n width: 100%;\n max-width: 1600px;\n margin: 0 auto;\n padding: 43px 42px 30px;\n}\nmain:focus-visible {\n outline: none;\n}\n.page-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n margin-bottom: 32px;\n}\nh1 {\n font-size: 29px;\n letter-spacing: -1px;\n font-weight: 550;\n line-height: 1.25;\n}\n.subtitle {\n color: var(--muted);\n font-size: 12px;\n margin-top: 9px;\n line-height: 1.7;\n}\n.heading-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 7px;\n padding: 10px 13px;\n border: 1px solid #dfe4d9;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 550;\n min-height: 36px;\n background: var(--bg);\n white-space: nowrap;\n}\n.button svg {\n width: 14px;\n height: 14px;\n}\n.button:hover {\n background: var(--subtle);\n border-color: #c8d0bf;\n}\n.button.primary {\n background: var(--accent);\n border-color: #b6d79d;\n color: #2c4320;\n}\n.button.primary:hover {\n background: #b7e198;\n}\n.button.danger {\n color: var(--red);\n border-color: #edcdc8;\n}\n.text-button {\n color: #52644b;\n font-size: 13px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n.text-button:hover {\n text-decoration: underline;\n}\n.text-button svg {\n width: 13px;\n}\n.overview {\n display: grid;\n grid-template-columns: 1.08fr 1.08fr 1fr 1fr;\n border: 1px solid var(--line);\n border-radius: 8px;\n margin-bottom: 31px;\n background: linear-gradient(110deg, #fcfdf9, #fff);\n overflow: hidden;\n}\n.metric {\n position: relative;\n padding: 22px 24px;\n min-height: 117px;\n}\n.metric + .metric::before {\n content: \"\";\n position: absolute;\n width: 1px;\n background: var(--line);\n top: 23px;\n bottom: 23px;\n left: 0;\n}\n.metric-label {\n display: flex;\n gap: 7px;\n align-items: center;\n font-size: 13px;\n color: #70786a;\n}\n.metric-label svg {\n width: 13px;\n height: 13px;\n color: #8a9482;\n}\n.metric-bottom {\n display: flex;\n align-items: baseline;\n gap: 10px;\n margin-top: 13px;\n}\n.metric-value {\n font-size: 27px;\n letter-spacing: -1px;\n font-weight: 500;\n}\n.metric-value small {\n font-size: 15px;\n letter-spacing: 0;\n}\n.metric-note {\n font-size: 13px;\n color: #69765f;\n}\n.metric-note span {\n color: var(--green);\n}\n.tiny-bars {\n display: flex;\n gap: 3px;\n align-items: end;\n height: 25px;\n margin-left: auto;\n}\n.tiny-bars i {\n width: 5px;\n background: #c4d9b2;\n border-radius: 2px;\n}\n.metric-foot {\n margin-top: 7px;\n font-size: 10px;\n color: #858b7f;\n}\n.section-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n margin-bottom: 17px;\n}\nh2 {\n font-size: 14px;\n font-weight: 550;\n letter-spacing: -0.2px;\n}\n.section-heading h2 {\n display: flex;\n gap: 9px;\n align-items: center;\n}\n.count {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 10px;\n font-weight: 400;\n background: #f0f2ed;\n color: #747d6d;\n border: 1px solid #e7ebe1;\n border-radius: 4px;\n padding: 2px 5px;\n}\n.section-heading > span {\n color: var(--muted);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.section-heading > span svg {\n width: 12px;\n height: 12px;\n}\n.filters {\n display: flex;\n gap: 9px;\n align-items: center;\n margin-bottom: 15px;\n}\n.search-box {\n display: flex;\n align-items: center;\n gap: 9px;\n border: 1px solid var(--line);\n border-radius: 6px;\n height: 35px;\n padding: 0 10px;\n min-width: 0;\n background: white;\n}\n.search-box svg {\n width: 14px;\n height: 14px;\n color: #8a9184;\n}\n.search-box input {\n border: 0;\n min-width: 0;\n width: 100%;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font-size: 13px;\n}\n.search-box:focus-within {\n border-color: #729859;\n box-shadow: 0 0 0 2px #edf5e8;\n}\n.search-box input::placeholder {\n color: #899080;\n}\n.filters .search-box {\n width: 300px;\n margin-right: auto;\n}\nkbd {\n font-size: 10px;\n border: 1px solid #e6e9e1;\n padding: 1px 4px;\n color: #838b7a;\n border-radius: 3px;\n}\n.select-filter {\n border: 1px solid var(--line);\n background: white;\n border-radius: 6px;\n padding: 8px 28px 8px 11px;\n color: #666f5e;\n font-size: 13px;\n height: 35px;\n max-width: 170px;\n}\n.filter-tabs {\n display: flex;\n gap: 23px;\n border-bottom: 1px solid var(--line);\n margin-bottom: 0;\n}\n.filter-tab {\n padding: 1px 0 13px;\n font-size: 13px;\n color: var(--muted);\n border-bottom: 2px solid transparent;\n display: flex;\n align-items: center;\n gap: 7px;\n margin-bottom: -1px;\n}\n.filter-tab.active {\n color: var(--ink);\n border-bottom-color: #5c7a46;\n font-weight: 550;\n}\n.filter-tab .count {\n border: 0;\n background: #f0f2ec;\n padding: 1px 5px;\n font-size: 10px;\n}\n.filter-tab.active .count {\n background: #eaf1e1;\n color: #536d40;\n}\n.run-table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n table-layout: fixed;\n}\n.run-table th {\n font-weight: 400;\n font-size: 12px;\n color: #808877;\n padding: 14px 10px;\n background: #fafbf8;\n border-bottom: 1px solid var(--line);\n}\n.run-table th:first-child {\n padding-left: 15px;\n width: 44%;\n}\n.run-table th:nth-child(2) {\n width: 16%;\n}\n.run-table th:nth-child(3) {\n width: 17%;\n}\n.run-table th:nth-child(4) {\n width: 11%;\n}\n.run-table th:last-child {\n width: 12%;\n text-align: right;\n padding-right: 17px;\n}\n.run-table td {\n padding: 18px 10px;\n border-bottom: 1px solid var(--line);\n font-size: 13px;\n color: #747c6c;\n}\n.run-table td:first-child {\n padding-left: 15px;\n}\n.run-table td:last-child {\n text-align: right;\n padding-right: 17px;\n}\n.run-table tr:hover td {\n background: #fafbf8;\n}\n.run-link {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n.run-title {\n display: block;\n font-size: 13px;\n color: #30382c;\n font-weight: 550;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.run-copy {\n min-width: 0;\n}\n.run-subtitle {\n font-size: 13px;\n color: #818878;\n margin-top: 5px;\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.run-subtitle .mono {\n font-size: 10px;\n}\n.run-subtitle .separator {\n color: #bdc4b5;\n}\n.status-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 21px;\n height: 21px;\n}\n.status-icon svg {\n width: 18px;\n height: 18px;\n}\n.status-icon.success {\n color: #6b9355;\n}\n.status-icon.failed {\n color: #cc7064;\n}\n.status-icon.running {\n color: #647fab;\n}\n.status-icon.pending {\n color: #af955e;\n}\n.status-icon.cancelled,\n.status-icon.skipped {\n color: #91998a;\n}\n.status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n border-radius: 5px;\n padding: 4px 7px;\n white-space: nowrap;\n}\n.status .status-icon {\n width: 11px;\n height: 11px;\n}\n.status .status-icon svg {\n width: 11px;\n height: 11px;\n}\n.status.success {\n background: var(--green-bg);\n color: var(--green);\n}\n.status.failed {\n background: var(--red-bg);\n color: var(--red);\n}\n.status.running {\n background: var(--blue-bg);\n color: var(--blue);\n}\n.status.pending {\n background: #faf4e6;\n color: var(--amber);\n}\n.status.cancelled,\n.status.skipped {\n background: #f0f2ed;\n color: #737c68;\n}\n.branch {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font-size: 13px;\n}\n.branch svg {\n width: 12px;\n height: 12px;\n}\n.duration {\n font-size: 13px;\n color: var(--muted);\n}\n.table-footer {\n padding: 18px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n font-size: 13px;\n color: #838b7b;\n}\n.pagination {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n.pagination .button {\n padding: 6px 9px;\n min-height: 28px;\n font-size: 13px;\n}\n.table-hint {\n display: flex;\n align-items: center;\n gap: 5px;\n color: #8b9186;\n font-size: 10px;\n}\n.table-hint svg {\n width: 11px;\n height: 11px;\n}\n.attention-strip {\n display: flex;\n align-items: center;\n gap: 12px;\n border: 1px solid #e8e4d8;\n border-radius: 7px;\n padding: 15px 17px;\n margin-top: 18px;\n background: #fcfbf7;\n}\n.attention-strip > svg {\n color: #aa8c50;\n width: 17px;\n}\n.attention-strip p {\n font-size: 13px;\n color: #5f6153;\n}\n.attention-strip p span {\n color: #89907f;\n margin-left: 5px;\n}\n.attention-strip .text-button {\n margin-left: auto;\n white-space: nowrap;\n}\n.page-footer {\n margin: auto 42px 0;\n padding: 25px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: #8b9382;\n font-size: 10px;\n border-top: 1px solid var(--line);\n}\n.footer-mark {\n font-size: 19px;\n color: #45643c;\n margin-right: 5px;\n vertical-align: middle;\n}\n.footer-dot {\n margin: 0 7px;\n color: #b4bdae;\n}\n.back-link {\n display: inline-flex;\n gap: 7px;\n align-items: center;\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 22px;\n}\n.back-link svg {\n width: 13px;\n height: 13px;\n}\n.run-heading h1 {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 26px;\n}\n.run-heading h1 .status-icon {\n width: 27px;\n height: 27px;\n}\n.run-heading h1 .status-icon svg {\n width: 25px;\n height: 25px;\n}\n.run-heading .subtitle {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n align-items: center;\n margin-left: 38px;\n font-size: 13px;\n}\n.run-heading .subtitle .mono {\n font-size: 13px;\n}\n.detail-meta {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n border: 1px solid var(--line);\n border-radius: 7px;\n padding: 19px 22px;\n gap: 20px;\n margin-bottom: 26px;\n}\n.meta-label {\n display: block;\n font-size: 10px;\n color: #7b8571;\n margin-bottom: 10px;\n}\n.meta-value {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.meta-value svg {\n width: 13px;\n height: 13px;\n color: #939c88;\n}\n.detail-tabs {\n display: flex;\n gap: 25px;\n border-bottom: 1px solid var(--line);\n margin-bottom: 22px;\n}\n.detail-tabs button {\n padding: 0 1px 13px;\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: #7b8373;\n border-bottom: 2px solid transparent;\n}\n.detail-tabs button svg {\n width: 14px;\n height: 14px;\n}\n.detail-tabs button.active {\n color: #34422b;\n border-bottom-color: #657d4f;\n}\n.failure-banner {\n padding: 14px 17px;\n background: #fdf6f3;\n border: 1px solid #f0ddd5;\n display: flex;\n gap: 12px;\n align-items: center;\n border-radius: 6px;\n margin-bottom: 20px;\n}\n.failure-banner > svg {\n color: #bf7864;\n}\n.failure-banner strong {\n font-size: 13px;\n font-weight: 550;\n color: #8e5746;\n}\n.failure-banner p {\n font-size: 13px;\n color: #9b7d6c;\n margin-top: 4px;\n}\n.failure-banner button {\n margin-left: auto;\n color: #9f5e4b;\n white-space: nowrap;\n}\n.execution {\n display: grid;\n grid-template-columns: 226px minmax(0, 1fr);\n border: 1px solid var(--line);\n border-radius: 7px;\n overflow: hidden;\n min-height: 385px;\n}\n.steps-panel {\n background: #fafbf8;\n border-right: 1px solid var(--line);\n padding: 17px 10px;\n}\n.steps-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2px 10px 16px;\n font-size: 13px;\n color: #656e5d;\n}\n.steps-heading .mono {\n font-size: 10px;\n color: #8e9685;\n}\n.step-button {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 9px;\n padding: 12px 10px;\n border: 1px solid transparent;\n border-radius: 5px;\n text-align: left;\n margin-bottom: 3px;\n font-size: 13px;\n color: #626c58;\n}\n.step-button .status-icon,\n.step-button .status-icon svg {\n width: 14px;\n height: 14px;\n}\n.step-button .mono {\n margin-left: auto;\n font-size: 10px;\n color: #87907c;\n}\n.step-button.active {\n border-color: #e2e5dc;\n background: white;\n box-shadow: 0 1px 3px #23351204;\n color: #303e25;\n}\n.step-button:hover {\n background: #f0f3eb;\n}\n.step-count {\n border-top: 1px solid var(--line);\n padding: 16px 10px 0;\n margin-top: 18px;\n font-size: 10px;\n color: #7d8672;\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.step-count svg {\n width: 12px;\n height: 12px;\n}\n.log-panel {\n min-width: 0;\n background: #1c211e;\n color: #c9d0c5;\n display: flex;\n flex-direction: column;\n}\n.log-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 19px;\n border-bottom: 1px solid #343b31;\n background: #252b26;\n gap: 10px;\n}\n.log-heading h3 {\n font-size: 13px;\n font-weight: 500;\n color: #dce2d7;\n}\n.log-heading h3 small {\n margin-left: 8px;\n color: #adba9f;\n font-size: 10px;\n font-weight: 400;\n}\n.log-actions {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n.log-actions .icon-button {\n color: #a6b09e;\n min-height: 25px;\n min-width: 25px;\n}\n.log-actions .icon-button:hover {\n background: #3d453a;\n color: white;\n}\n.log-actions svg {\n width: 14px;\n height: 14px;\n}\n.log-search {\n border-bottom: 1px solid #343b31;\n padding: 9px 17px;\n display: flex;\n align-items: center;\n gap: 7px;\n}\n.log-search svg {\n color: #8b9983;\n width: 13px;\n}\n.log-search input {\n width: 100%;\n min-width: 0;\n background: none;\n border: 0;\n color: #d6dfce;\n outline: none;\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 13px;\n}\n.log-search input::placeholder {\n color: #8d9b85;\n}\n.log-search:focus-within {\n box-shadow: inset 0 0 0 1px #a0c983;\n}\n.log-search span {\n font-size: 10px;\n white-space: nowrap;\n color: #a6b299;\n}\n.log-lines {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 13px;\n line-height: 2.15;\n overflow: auto;\n padding: 15px 0;\n flex: 1;\n min-height: 260px;\n max-height: 490px;\n}\n.log-line {\n display: flex;\n white-space: pre;\n padding: 0 18px 0 0;\n min-width: max-content;\n}\n.line-number {\n color: #86927d;\n width: 44px;\n padding-right: 15px;\n text-align: right;\n user-select: none;\n flex-shrink: 0;\n}\n.log-time {\n color: #8a9782;\n margin-right: 16px;\n}\n.log-line.error {\n background: #59332c4a;\n color: #f0a28e;\n}\n.log-line.pass {\n color: #b9d49e;\n}\n.log-line.dim {\n color: #98a48f;\n}\n.log-line mark {\n background: #bdcb92;\n color: #202923;\n}\n.log-lines.wrap .log-line {\n white-space: pre-wrap;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.log-lines.wrap .line-text {\n min-width: 0;\n}\n.log-bottom {\n font-size: 10px;\n color: #a1af95;\n padding: 11px 17px;\n border-top: 1px solid #343b31;\n display: flex;\n justify-content: space-between;\n gap: 12px;\n}\n.detail-bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 0 7px;\n color: #838d78;\n font-size: 10px;\n}\n.detail-bottom span {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.detail-bottom svg {\n width: 12px;\n height: 12px;\n}\n.source-view {\n border: 1px solid var(--line);\n border-radius: 7px;\n overflow: hidden;\n}\n.source-view h3 {\n font-size: 13px;\n font-weight: 500;\n background: var(--subtle);\n padding: 15px 20px;\n border-bottom: 1px solid var(--line);\n}\n.source-view pre {\n margin: 0;\n background: #1c211e;\n color: #c2d3b5;\n padding: 25px;\n font-size: 12px;\n line-height: 1.9;\n overflow: auto;\n}\n.empty-state {\n text-align: center;\n padding: 55px 20px;\n color: var(--muted);\n}\n.empty-state svg {\n width: 27px;\n height: 27px;\n color: #99aa8a;\n margin-bottom: 15px;\n}\n.empty-state h3 {\n font-size: 14px;\n color: var(--ink);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.empty-state p {\n font-size: 13px;\n line-height: 1.8;\n}\n.empty-state .button {\n margin-top: 14px;\n}\n.cards {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n}\n.workflow-card,\n.worker-card {\n border: 1px solid var(--line);\n border-radius: 8px;\n padding: 20px;\n background: #fff;\n}\n.card-heading {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 19px;\n}\n.card-heading > svg {\n width: 19px;\n height: 19px;\n color: #7e9468;\n}\n.card-heading h2 {\n font-size: 13px;\n}\n.card-heading .status {\n margin-left: auto;\n}\n.card-description {\n color: #7e8874;\n font-size: 13px;\n line-height: 1.8;\n}\n.card-details {\n display: flex;\n gap: 7px;\n margin-top: 14px;\n flex-wrap: wrap;\n}\n.tag {\n background: #f2f4ee;\n padding: 4px 7px;\n border-radius: 4px;\n font-size: 10px;\n color: #6b795e;\n}\n.card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 23px;\n padding-top: 16px;\n border-top: 1px solid var(--line);\n}\n.card-footer .text-button {\n font-size: 13px;\n}\n.worker-stats {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-top: 23px;\n}\n.progress-track {\n height: 4px;\n border-radius: 3px;\n background: #edf0e7;\n margin-top: 10px;\n overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n background: #a1bf85;\n border-radius: 3px;\n}\n.worker-stats .meta-label {\n display: flex;\n justify-content: space-between;\n}\n.settings-section {\n border: 1px solid var(--line);\n border-radius: 7px;\n margin-bottom: 16px;\n padding: 18px 20px;\n background: #fff;\n}\n.settings-section h2 {\n margin-bottom: 15px;\n}\n.setting-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n gap: 16px;\n}\n.setting-row + .setting-row {\n border-top: 1px solid var(--line);\n}\n.setting-row strong {\n display: block;\n font-size: 12px;\n font-weight: 550;\n}\n.setting-row p {\n font-size: 11px;\n color: var(--muted);\n margin-top: 4px;\n}\n.setting-row input[type=\"checkbox\"] {\n accent-color: #678951;\n width: 17px;\n height: 17px;\n}\n.secret-value {\n color: var(--muted);\n font-size: 12px;\n}\n.settings-note {\n color: var(--muted);\n font-size: 13px;\n line-height: 1.8;\n}\ndialog {\n width: min(470px, calc(100% - 32px));\n padding: 27px;\n border: 1px solid #dde4d5;\n border-radius: 11px;\n box-shadow: 0 20px 80px #17261530;\n color: var(--ink);\n}\ndialog::backdrop {\n background: #17211755;\n backdrop-filter: blur(3px);\n}\n.dialog-heading {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n}\n.dialog-heading h2 {\n font-size: 19px;\n letter-spacing: -0.6px;\n}\n.dialog-description {\n font-size: 12px;\n line-height: 1.8;\n color: var(--muted);\n margin-bottom: 22px;\n}\n.form-field {\n display: block;\n margin: 17px 0;\n}\n.form-field > span {\n display: block;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n.form-field input,\n.form-field select {\n display: block;\n width: 100%;\n border: 1px solid #dfe5d8;\n border-radius: 6px;\n padding: 11px;\n background: white;\n font-size: 12px;\n color: var(--ink);\n}\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n gap: 9px;\n margin-top: 24px;\n}\n.dialog-note {\n color: #849078;\n font-size: 13px;\n line-height: 1.7;\n}\n.shortcut-row {\n display: flex;\n justify-content: space-between;\n padding: 12px 0;\n font-size: 12px;\n border-bottom: 1px solid var(--line);\n}\n.toast {\n position: fixed;\n bottom: 25px;\n left: calc(50% + 112px);\n transform: translateX(-50%);\n max-width: calc(100vw - 40px);\n background: #273321;\n color: #e6f0de;\n padding: 13px 19px;\n border: 1px solid #4f6342;\n border-radius: 7px;\n font-size: 12px;\n box-shadow: 0 8px 30px #15220c20;\n z-index: 100;\n}\nbody.compact .run-table td {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n/* Shared secondary text stays readable on white and tinted surfaces. */\n.workspace-label,\n.nav-caption,\n.nav-item,\n.breadcrumbs,\n.metric-label,\n.metric-foot,\n.count,\n.run-subtitle,\n.run-table th,\n.run-table td,\n.table-footer,\n.table-hint,\n.attention-strip p span,\n.page-footer,\n.meta-label,\n.detail-tabs button,\n.steps-heading .mono,\n.step-button .mono,\n.step-count,\n.detail-bottom,\n.card-description,\n.tag,\n.dialog-note,\nkbd {\n color: var(--muted);\n}\n.avatar {\n color: #675c44;\n}\n.failure-banner p {\n color: #85634f;\n}\n.search-box input::placeholder {\n color: #69745f;\n}\n.subtitle,\n.nav-item,\n.button,\n.filter-tab,\n.meta-value,\n.card-description,\n.settings-note {\n font-size: 12px;\n}\n.run-subtitle,\n.run-table th,\n.select-filter,\n.search-box input,\n.status,\n.step-button {\n font-size: 13px;\n}\n.log-lines {\n font-size: 13px;\n}\n.detail-meta {\n overflow-wrap: anywhere;\n}\n@media (min-width: 1500px) {\n main {\n padding-top: 50px;\n }\n .run-table td {\n padding-top: 22px;\n padding-bottom: 22px;\n }\n}\n@media (max-width: 1180px) {\n .sidebar {\n width: 192px;\n padding-inline: 12px;\n }\n .app-shell {\n margin-left: 192px;\n }\n .topbar {\n padding-inline: 28px;\n }\n main {\n padding-inline: 28px;\n }\n .page-footer {\n margin-inline: 28px;\n }\n .metric {\n padding: 19px 16px;\n }\n .tiny-bars {\n display: none;\n }\n .metric-note {\n font-size: 10px;\n }\n .metric-value {\n font-size: 25px;\n }\n .run-table th:first-child {\n width: 40%;\n }\n .run-table th:nth-child(3) {\n width: 18%;\n }\n .run-table th:nth-child(2) {\n width: 18%;\n }\n .execution {\n grid-template-columns: 195px minmax(0, 1fr);\n }\n .toast {\n left: calc(50% + 96px);\n }\n .workspace {\n gap: 7px;\n }\n .workspace-label {\n display: none;\n }\n}\n@media (max-width: 900px) {\n .sidebar {\n width: 72px;\n align-items: center;\n padding: 27px 9px 15px;\n }\n .brand {\n font-size: 0;\n padding: 0;\n }\n .brand-mark {\n margin: 0;\n }\n .workspace,\n .nav-caption,\n .nav-label,\n .nav-count,\n .runner-health,\n .profile > span:not(.avatar) {\n display: none;\n }\n nav {\n margin-top: 40px;\n width: 100%;\n }\n .nav-item {\n justify-content: center;\n padding: 13px 10px;\n }\n .profile {\n padding-top: 15px;\n }\n .app-shell {\n margin-left: 72px;\n }\n .metric {\n padding: 17px 14px;\n }\n .metric-bottom {\n gap: 6px;\n }\n .metric-note {\n display: none;\n }\n .filters .search-box {\n width: auto;\n flex: 1;\n }\n .select-filter {\n max-width: 150px;\n }\n .run-table th:nth-child(3),\n .run-table td:nth-child(3) {\n display: none;\n }\n .run-table th:first-child {\n width: 48%;\n }\n .run-table th:nth-child(2) {\n width: 21%;\n }\n .run-table th:nth-child(4) {\n width: 14%;\n }\n .run-table th:last-child {\n width: 17%;\n }\n .detail-meta {\n grid-template-columns: repeat(3, 1fr);\n row-gap: 22px;\n }\n .run-heading {\n align-items: flex-start;\n }\n .run-heading h1 {\n font-size: 23px;\n }\n .run-heading .heading-actions {\n flex-direction: column;\n align-items: stretch;\n }\n .execution {\n grid-template-columns: 175px minmax(0, 1fr);\n }\n .step-button {\n gap: 6px;\n padding-inline: 6px;\n font-size: 10px;\n }\n .step-button .mono {\n font-size: 8px;\n }\n .log-time {\n display: none;\n }\n .attention-strip p span {\n display: none;\n }\n .toast {\n left: calc(50% + 36px);\n }\n}\n@media (max-width: 600px) {\n .sidebar {\n position: fixed;\n inset: auto 0 0;\n width: 100%;\n height: 62px;\n padding: 0 12px env(safe-area-inset-bottom);\n z-index: 20;\n border-right: 0;\n border-top: 1px solid var(--line);\n background: #fafbf8f5;\n backdrop-filter: blur(15px);\n }\n .sidebar .brand,\n .sidebar-bottom {\n display: none;\n }\n nav {\n display: flex;\n width: 100%;\n margin: 0;\n height: 100%;\n justify-content: space-around;\n }\n .nav-item {\n flex: 1;\n padding: 9px 6px 6px;\n flex-direction: column;\n gap: 4px;\n border-radius: 0;\n font-size: 10px;\n }\n .nav-item.active {\n background: none;\n color: #41602f;\n }\n .nav-label {\n display: block;\n }\n .nav-item svg {\n width: 18px;\n height: 18px;\n }\n .app-shell {\n margin-left: 0;\n padding-bottom: 62px;\n }\n .topbar {\n height: 58px;\n padding: 0 20px;\n }\n .topbar-right {\n gap: 9px;\n }\n .topbar-right .icon-button {\n display: none;\n }\n .demo-label {\n font-size: 8px;\n }\n .breadcrumbs {\n gap: 7px;\n font-size: 13px;\n }\n main {\n padding: 28px 20px 20px;\n }\n .page-heading {\n margin-bottom: 24px;\n gap: 10px;\n }\n h1 {\n font-size: 27px;\n }\n .subtitle {\n font-size: 13px;\n max-width: 210px;\n }\n .button {\n font-size: 13px;\n padding: 9px 10px;\n }\n .overview {\n grid-template-columns: 1fr 1fr;\n margin-bottom: 28px;\n }\n .metric {\n min-height: 97px;\n padding: 16px;\n }\n .metric-label {\n font-size: 13px;\n }\n .metric-value {\n font-size: 25px;\n }\n .metric-bottom {\n margin-top: 9px;\n }\n .metric:nth-child(3),\n .metric:nth-child(4) {\n border-top: 1px solid var(--line);\n }\n .metric:nth-child(3)::before {\n display: none;\n }\n .metric + .metric::before {\n top: 16px;\n bottom: 16px;\n }\n .metric-note {\n display: inline;\n }\n .tiny-bars {\n display: flex;\n }\n .metric-foot {\n display: none;\n }\n .section-heading {\n margin-bottom: 14px;\n }\n .section-heading > span {\n font-size: 10px;\n }\n .filters {\n flex-wrap: wrap;\n gap: 7px;\n }\n .filters .search-box {\n flex: 1 0 100%;\n }\n .select-filter {\n flex: 1;\n max-width: none;\n }\n .filter-tabs {\n gap: 19px;\n margin-top: 19px;\n }\n .filter-tab {\n font-size: 13px;\n gap: 4px;\n }\n .filter-tab .count {\n font-size: 8px;\n }\n .run-table th {\n font-size: 10px;\n padding-inline: 5px;\n }\n .run-table th:first-child {\n width: 67%;\n padding-left: 2px;\n }\n .run-table th:nth-child(2) {\n width: 33%;\n text-align: right;\n padding-right: 3px;\n }\n .run-table td {\n padding: 18px 3px;\n }\n .run-table td:first-child {\n padding-left: 2px;\n }\n .run-table td:nth-child(2) {\n text-align: right;\n padding-right: 3px;\n }\n .run-table th:nth-child(4),\n .run-table td:nth-child(4),\n .run-table th:last-child,\n .run-table td:last-child {\n display: none;\n }\n .run-link {\n gap: 7px;\n }\n .run-title {\n font-size: 13px;\n }\n .run-subtitle {\n font-size: 10px;\n gap: 4px;\n }\n .run-subtitle .mono {\n font-size: 8px;\n }\n .status {\n font-size: 10px;\n padding: 4px 5px;\n }\n .table-footer {\n flex-wrap: wrap;\n font-size: 10px;\n }\n .pagination {\n gap: 9px;\n }\n .table-hint {\n display: none;\n }\n .attention-strip {\n padding: 12px;\n gap: 7px;\n }\n .attention-strip p {\n font-size: 13px;\n }\n .attention-strip .text-button {\n font-size: 10px;\n }\n .page-footer {\n margin-inline: 20px;\n font-size: 8px;\n flex-wrap: wrap;\n gap: 7px;\n padding-block: 19px;\n }\n .footer-mark {\n font-size: 15px;\n }\n .toast {\n left: 50%;\n bottom: 78px;\n width: max-content;\n text-align: center;\n font-size: 13px;\n }\n .back-link {\n margin-bottom: 20px;\n }\n .run-heading {\n flex-direction: column;\n gap: 18px;\n }\n .run-heading h1 {\n font-size: 23px;\n }\n .run-heading .subtitle {\n margin-left: 0;\n max-width: none;\n font-size: 13px;\n }\n .run-heading .heading-actions {\n flex-direction: row;\n width: 100%;\n }\n .run-heading .heading-actions > * {\n flex: 1;\n max-width: none;\n }\n .detail-meta {\n grid-template-columns: repeat(2, 1fr);\n padding: 16px;\n gap: 20px 15px;\n }\n .detail-meta > div:last-child {\n grid-column: span 2;\n }\n .detail-tabs {\n gap: 20px;\n }\n .detail-tabs button {\n font-size: 13px;\n gap: 5px;\n }\n .detail-tabs button svg {\n width: 12px;\n }\n .failure-banner {\n padding: 12px;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 7px;\n }\n .failure-banner > div {\n flex: 1;\n }\n .failure-banner strong {\n font-size: 13px;\n }\n .failure-banner p {\n font-size: 10px;\n line-height: 1.6;\n }\n .failure-banner button {\n margin-left: 26px;\n font-size: 13px;\n }\n .execution {\n grid-template-columns: minmax(0, 1fr);\n }\n .steps-panel {\n border-right: 0;\n border-bottom: 1px solid var(--line);\n padding: 12px;\n }\n .steps-heading {\n padding: 3px 5px 10px;\n }\n .step-button {\n font-size: 13px;\n padding: 9px;\n margin-bottom: 1px;\n }\n .step-button .mono {\n font-size: 10px;\n }\n .step-count {\n display: none;\n }\n .log-heading {\n padding: 13px;\n }\n .log-heading h3 {\n font-size: 13px;\n }\n .log-heading h3 small {\n font-size: 8px;\n }\n .log-lines {\n font-size: 10px;\n min-height: 290px;\n }\n .log-search {\n padding-inline: 13px;\n }\n .line-number {\n width: 32px;\n padding-right: 10px;\n }\n .detail-bottom {\n gap: 10px;\n flex-wrap: wrap;\n font-size: 8px;\n }\n .cards {\n grid-template-columns: 1fr;\n }\n .workflow-card,\n .worker-card {\n padding: 20px;\n }\n .setting-row {\n gap: 14px;\n }\n .settings-section {\n padding: 18px;\n }\n .setting-row p {\n font-size: 13px;\n }\n .source-view pre {\n font-size: 13px;\n padding: 17px;\n }\n .topbar-right .avatar {\n display: none;\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n .status-icon.running svg {\n animation: spin 2.5s linear infinite;\n }\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
12279
12284
|
//#endregion
|
|
12280
12285
|
//#region src/ui-concept.ts
|
|
12281
12286
|
function pg(e, t, n) {
|
|
@@ -12440,10 +12445,7 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12440
12445
|
if (e.method === "GET" && n.pathname === "/pages/run.html") return this.renderPageComponent(t, "page-run", ce);
|
|
12441
12446
|
if (e.method === "GET" && n.pathname === "/pages/help.html") return this.renderPageComponent(t, "page-help", tn(!1), !0);
|
|
12442
12447
|
if (e.method === "GET" && n.pathname === "/pages/workflows.html") {
|
|
12443
|
-
if (!this.
|
|
12444
|
-
if (this.oidc?.userFromCookie(e.headers.cookie)) return t.writeHead(302, { Location: "/settings/tokens" }), t.end();
|
|
12445
|
-
if (!this.requireAdmin(e, t)) return;
|
|
12446
|
-
}
|
|
12448
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12447
12449
|
let r = n.searchParams.get("page") === "secrets" ? "secrets" : n.searchParams.get("page") === "editor" ? "editor" : "workflows", i = n.searchParams.get("id") || "", a = Number(n.searchParams.get("revision"));
|
|
12448
12450
|
return this.renderPageComponent(t, r === "editor" ? "page-workflow-editor" : r === "secrets" ? "page-secrets" : "page-workflows", Xh(r, i, Number.isSafeInteger(a) && a > 0 ? a : void 0));
|
|
12449
12451
|
}
|
|
@@ -12451,23 +12453,15 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12451
12453
|
let r = n.searchParams.get("page"), i = r === "notifications" ? "notifications" : r === "workers" ? "workers" : "tokens";
|
|
12452
12454
|
return i !== "tokens" && !this.requireAdmin(e, t) ? void 0 : i === "tokens" && !this.isAdmin(e) && !this.oidc?.userFromCookie(e.headers.cookie) ? this.requireAdmin(e, t) : this.renderPageComponent(t, "page-settings", sn(i));
|
|
12453
12455
|
}
|
|
12454
|
-
if (e.method === "GET" && n.pathname === "/workflows") {
|
|
12455
|
-
if (!this.isAdmin(e)) {
|
|
12456
|
-
if (this.oidc?.userFromCookie(e.headers.cookie)) return t.writeHead(302, { Location: "/settings/tokens" }), t.end();
|
|
12457
|
-
if (!this.requireAdmin(e, t)) return;
|
|
12458
|
-
}
|
|
12459
|
-
return t.writeHead(302, { Location: "/settings/workflows" }), t.end();
|
|
12460
|
-
}
|
|
12461
|
-
if (e.method === "GET" && n.pathname === "/settings") {
|
|
12462
|
-
let n = this.oidc?.userFromCookie(e.headers.cookie) && !this.isAdmin(e) ? "/settings/tokens" : "/settings/workflows";
|
|
12463
|
-
return n === "/settings/workflows" && !this.isAdmin(e) ? this.requireAdmin(e, t) : (t.writeHead(302, { Location: n }), t.end());
|
|
12464
|
-
}
|
|
12456
|
+
if (e.method === "GET" && n.pathname === "/workflows" || e.method === "GET" && n.pathname === "/settings") return this.requireAuthenticatedUser(e, t) ? (t.writeHead(302, { Location: "/settings/workflows" }), t.end()) : void 0;
|
|
12465
12457
|
let i = n.pathname.match(/^\/settings\/(workflows|secrets|tokens|notifications|workers)$/);
|
|
12466
12458
|
if (e.method === "GET" && i) {
|
|
12467
|
-
|
|
12468
|
-
|
|
12469
|
-
if (!this.
|
|
12470
|
-
}
|
|
12459
|
+
let n = i[1];
|
|
12460
|
+
if (n === "workflows" || n === "secrets") {
|
|
12461
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12462
|
+
} else if (n === "tokens") {
|
|
12463
|
+
if (!this.oidc?.userFromCookie(e.headers.cookie) && !this.isAdmin(e)) return this.requireAdmin(e, t);
|
|
12464
|
+
} else if (!this.requireAdmin(e, t)) return;
|
|
12471
12465
|
return this.renderAppShell(t);
|
|
12472
12466
|
}
|
|
12473
12467
|
if (n.pathname === "/api/api-keys") {
|
|
@@ -12503,14 +12497,14 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12503
12497
|
}
|
|
12504
12498
|
let o = n.pathname.match(/^\/settings\/workflows\/(new|[a-z0-9-]+)$/);
|
|
12505
12499
|
if (e.method === "GET" && o) {
|
|
12506
|
-
if (!this.
|
|
12500
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12507
12501
|
o[1] === "new" || o[1];
|
|
12508
12502
|
let r = n.searchParams.get("revision");
|
|
12509
12503
|
return r === null || Number(r), this.renderAppShell(t);
|
|
12510
12504
|
}
|
|
12511
12505
|
let s = n.pathname.match(/^\/workflows\/(new|[a-z0-9-]+)$/);
|
|
12512
12506
|
if (e.method === "GET" && s) {
|
|
12513
|
-
if (!this.
|
|
12507
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12514
12508
|
let r = s[1] === "new" ? "" : s[1], i = r ? `/settings/workflows/${r}` : "/settings/workflows/new";
|
|
12515
12509
|
return t.writeHead(302, { Location: `${i}${n.search}` }), t.end();
|
|
12516
12510
|
}
|
|
@@ -12601,7 +12595,7 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12601
12595
|
})) }));
|
|
12602
12596
|
}
|
|
12603
12597
|
async handleWorkflowRun(e, t, n) {
|
|
12604
|
-
if (!
|
|
12598
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12605
12599
|
let r = await this.readJson(e, t);
|
|
12606
12600
|
if (r === null && t.headersSent) return;
|
|
12607
12601
|
if (r !== null && (typeof r != "object" || Array.isArray(r))) return t.writeHead(400, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Request body must be an object" }));
|
|
@@ -12770,6 +12764,9 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12770
12764
|
}
|
|
12771
12765
|
return !!(await this.apiKeys.scopesForToken(n.slice(7)))?.includes(t);
|
|
12772
12766
|
}
|
|
12767
|
+
requireAuthenticatedUser(e, t) {
|
|
12768
|
+
return this.oidc?.userFromCookie(e.headers.cookie) ? !0 : (t.writeHead(401, { "Content-Type": "application/json; charset=utf-8" }), t.end(JSON.stringify({ error: "Authentication required" })), !1);
|
|
12769
|
+
}
|
|
12773
12770
|
async handleOidcLogin(e, t, n) {
|
|
12774
12771
|
let r = _(n.searchParams.get("url") || "/runs");
|
|
12775
12772
|
if (!this.oidc?.enabled) return t.writeHead(503, { "Content-Type": "text/plain; charset=utf-8" }).end("OIDC is disabled");
|
|
@@ -12914,7 +12911,7 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12914
12911
|
}
|
|
12915
12912
|
}
|
|
12916
12913
|
async handleWorkflowValidation(e, t) {
|
|
12917
|
-
if (!
|
|
12914
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12918
12915
|
let n = await this.readJson(e, t);
|
|
12919
12916
|
if (n) try {
|
|
12920
12917
|
let e = this.workflows.validate(n.sourceYaml);
|
|
@@ -12930,16 +12927,16 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12930
12927
|
}
|
|
12931
12928
|
}
|
|
12932
12929
|
async handleWorkflowList(e, t) {
|
|
12933
|
-
|
|
12930
|
+
this.requireAuthenticatedUser(e, t) && (await this.workflowsLoaded, t.writeHead(200, { "Content-Type": "application/json; charset=utf-8" }), t.end(JSON.stringify({ workflows: await this.workflows.list() })));
|
|
12934
12931
|
}
|
|
12935
12932
|
async handleWorkflowGet(e, t, n, r = null) {
|
|
12936
|
-
if (!
|
|
12933
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12937
12934
|
let i = r === null ? void 0 : Number(r), a = i !== void 0 && Number.isSafeInteger(i) && i > 0 ? await this.workflows.getRevisionSnapshot(n, i) : await this.workflows.get(n);
|
|
12938
12935
|
if (!a) return t.writeHead(404, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Workflow not found" }));
|
|
12939
12936
|
t.writeHead(200, { "Content-Type": "application/json; charset=utf-8" }), t.end(JSON.stringify(a));
|
|
12940
12937
|
}
|
|
12941
12938
|
async handleWorkflowSave(e, t, n) {
|
|
12942
|
-
if (!
|
|
12939
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12943
12940
|
let r = await this.readJson(e, t);
|
|
12944
12941
|
if (!r || typeof r.sourceYaml != "string") {
|
|
12945
12942
|
t.headersSent || t.writeHead(400, { "Content-Type": "application/json" }).end(JSON.stringify({ error: "sourceYaml is required" }));
|
|
@@ -12953,22 +12950,22 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12953
12950
|
}
|
|
12954
12951
|
}
|
|
12955
12952
|
async handleWorkflowDelete(e, t, n) {
|
|
12956
|
-
if (
|
|
12953
|
+
if (this.requireAuthenticatedUser(e, t)) {
|
|
12957
12954
|
if (!await this.workflows.delete(n)) return t.writeHead(404, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Workflow not found" }));
|
|
12958
12955
|
t.writeHead(204).end();
|
|
12959
12956
|
}
|
|
12960
12957
|
}
|
|
12961
12958
|
async handleWorkflowPublish(e, t, n) {
|
|
12962
|
-
if (!
|
|
12959
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12963
12960
|
let r = await this.workflows.publish(n);
|
|
12964
12961
|
if (!r) return t.writeHead(404, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Workflow not found" }));
|
|
12965
12962
|
t.writeHead(200, { "Content-Type": "application/json; charset=utf-8" }), t.end(JSON.stringify(r));
|
|
12966
12963
|
}
|
|
12967
12964
|
async handleSecretList(e, t) {
|
|
12968
|
-
|
|
12965
|
+
this.requireAuthenticatedUser(e, t) && (t.writeHead(200, { "Content-Type": "application/json; charset=utf-8" }), t.end(JSON.stringify({ secrets: await this.secretRepository.names() })));
|
|
12969
12966
|
}
|
|
12970
12967
|
async handleSecretSave(e, t, n) {
|
|
12971
|
-
if (!
|
|
12968
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
12972
12969
|
let r = await this.readJson(e, t);
|
|
12973
12970
|
if (!r || typeof r.value != "string") {
|
|
12974
12971
|
t.headersSent || t.writeHead(400, { "Content-Type": "application/json" }).end(JSON.stringify({ error: "value is required" }));
|
|
@@ -12981,7 +12978,7 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
12981
12978
|
}
|
|
12982
12979
|
}
|
|
12983
12980
|
async handleSecretDelete(e, t, n) {
|
|
12984
|
-
if (
|
|
12981
|
+
if (this.requireAuthenticatedUser(e, t)) {
|
|
12985
12982
|
if (!await this.secretRepository.delete(n)) return t.writeHead(404, { "Content-Type": "application/json" }), t.end(JSON.stringify({ error: "Secret not found" }));
|
|
12986
12983
|
t.writeHead(204).end();
|
|
12987
12984
|
}
|
|
@@ -13133,7 +13130,7 @@ var mg = pg(dg, fg, ug), hg = "/* global document, window, localStorage, navigat
|
|
|
13133
13130
|
}
|
|
13134
13131
|
}
|
|
13135
13132
|
async handleWorkflowAiHelp(e, t) {
|
|
13136
|
-
if (!
|
|
13133
|
+
if (!this.requireAuthenticatedUser(e, t)) return;
|
|
13137
13134
|
let n = await this.readJson(e, t), r = typeof n?.request == "string" ? n.request.trim() : "", i = typeof n?.sourceYaml == "string" ? n.sourceYaml : "", a = (await this.currentSecrets()).OPENAI_API_KEY || process.env.OPENAI_API_KEY, o = process.env.OPENAI_API_MODEL, s = process.env.OPENAI_API_URL;
|
|
13138
13135
|
if (!r) return t.writeHead(400, { "Content-Type": "application/json" }).end(JSON.stringify({ error: "request is required" }));
|
|
13139
13136
|
if (!o || !s) return t.writeHead(503, { "Content-Type": "application/json" }).end(JSON.stringify({ error: "AI help is not configured" }));
|