(null);
+ async function loadProjects() {
+ projectsError = null;
+ try {
+ projects = await api.projects.list();
+ projectsLoaded = true;
+ } catch (e) {
+ projectsError = classifyError(e);
+ }
+ }
+
+ // Lazy per-tab loading: fetch the active tab's data the first time it is
+ // shown. `group` must be loaded first.
+ $effect(() => {
+ if (!group) return;
+ switch (activeTab) {
+ case 'vars':
+ if (!varsLoaded) void loadVars();
+ break;
+ case 'secrets':
+ if (canManage && !secretsLoaded) void loadSecrets();
+ break;
+ case 'collections':
+ if (!collectionsLoaded) void loadCollections();
+ break;
+ case 'scripts':
+ if (!scriptsLoaded) void loadScripts();
+ break;
+ case 'triggers':
+ if (!triggersLoaded) void loadTriggers();
+ break;
+ case 'routes':
+ if (!routesLoaded) void loadRoutes();
+ break;
+ case 'suppressions':
+ if (!suppressionsLoaded) void loadSuppressions();
+ break;
+ case 'extension-points':
+ if (!extPointsLoaded) void loadExtPoints();
+ break;
+ case 'dead-letters':
+ if (!deadLettersLoaded) void loadDeadLetters();
+ break;
+ case 'ownership':
+ if (!projectsLoaded) void loadProjects();
+ break;
+ }
+ });
+
async function saveSettings(event: Event) {
event.preventDefault();
if (!group) return;
@@ -256,6 +577,35 @@
}
}
+ function fmtTime(iso: string): string {
+ try {
+ return new Date(iso).toLocaleString();
+ } catch {
+ return iso;
+ }
+ }
+
+ function fmtSize(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+ }
+
+ function preview(v: unknown, max = 120): string {
+ let s: string;
+ try {
+ s = typeof v === 'string' ? v : JSON.stringify(v);
+ } catch {
+ s = String(v);
+ }
+ return s.length > max ? s.slice(0, max) + '…' : s;
+ }
+
+ // Collections that have a data browser (kv/docs/files).
+ const browsableCollections = $derived(
+ collections.filter((c) => c.kind === 'kv' || c.kind === 'docs' || c.kind === 'files')
+ );
+
$effect(() => {
void slug;
void loadGroup();
@@ -293,14 +643,18 @@
{/if}
+{#snippet loadErrorNote(err: LoadError)}
+ {#if err === null}
+
+ {:else if 'forbidden' in err}
+ You don't have permission to view this.
+ {:else}
+ {err.message}
+ {/if}
+{/snippet}
+
{#if group}
-
- Overview
- {#if canManage}
- Members
- Settings
- {/if}
-
+
@@ -454,6 +808,508 @@
{/if}
+ {:else if activeTab === 'vars'}
+
+ Vars
+
+ The group's own config vars — inherited by every descendant app,
+ env-scoped, nearest-owner-wins. Edit via
+ pic apply or the vars API. A tombstone suppresses an inherited key.
+
+ {#if varsError}
+ {@render loadErrorNote(varsError)}
+ {:else if !varsLoaded}
+ Loading…
+ {:else if vars.length === 0}
+ No vars declared on this group.
+ {:else}
+
+
+ Key Env Value Updated
+
+ {#each vars as v (v.key + '@' + v.env)}
+
+ {v.key}
+ {v.env}
+ {#if v.is_tombstone}
+
+ tombstone
+
+ {:else}
+ {preview(v.value)}
+ {/if}
+
+ {fmtTime(v.updated_at)}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'secrets' && canManage}
+
+ Secrets
+
+ Secret names and their env scope only — values never leave
+ the server. Set them with pic apply or the secrets API.
+
+ {#if secretsError}
+ {@render loadErrorNote(secretsError)}
+ {:else if !secretsLoaded}
+ Loading…
+ {:else if secrets.length === 0}
+ No secrets declared on this group.
+ {:else}
+
+
+ Name Env Updated
+
+ {#each secrets as sct (sct.name + '@' + sct.env)}
+
+ {sct.name}
+ {sct.env}{fmtTime(sct.updated_at)}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'collections'}
+
+ Shared collections
+
+ Cross-app shared stores declared on this group. Reads are open to any
+ subtree script; writes require an editor+ via
+ kv::shared_collection(…) / docs / files.
+ Topic and queue collections are storeless / consumed via triggers, so
+ they have no data browser here.
+
+ {#if collectionsError}
+ {@render loadErrorNote(collectionsError)}
+ {:else if !collectionsLoaded}
+ Loading…
+ {:else if collections.length === 0}
+ No shared collections declared on this group.
+ {:else}
+
+
+ Name Kind
+
+ {#each collections as c (c.kind + '/' + c.name)}
+
+ {c.name}
+ {c.kind}
+ {#if c.kind === 'topic' || c.kind === 'queue'}
+ no data browser
+ {:else}
+ pickCollection(c)}>
+ Browse
+
+ {/if}
+
+
+ {/each}
+
+
+ {/if}
+
+ Data browser
+
+ {#if browsableCollections.length > 0}
+
+ Declared:
+ {#each browsableCollections as c, i (c.kind + '/' + c.name)}
+ {#if i > 0}, {/if}
+ {
+ browseKind = c.kind as GroupCollectionKind;
+ browseCollection = c.name;
+ }}
+ >
+ {c.name} ({c.kind})
+
+ {/each}
+
+ {/if}
+
+ {#if browseError}
+ {@render loadErrorNote(browseError)}
+ {/if}
+
+ {#if browseActive}
+ {#if browseActiveKind === 'kv'}
+ {#if browseKeys.length === 0 && !browseLoading}
+ No keys in KV collection {browseActive}.
+ {:else}
+
+
+ Key
+
+ {#each browseKeys as k (k)}
+
+ {k}
+
+ loadKvValue(k)}>
+ View value
+
+
+
+ {#if kvValue && kvValue.key === k}
+
+ {preview(kvValue.value, 4000)}
+ {/if}
+ {/each}
+
+
+ {/if}
+ {:else if browseActiveKind === 'docs'}
+ {#if browseDocs.length === 0 && !browseLoading}
+ No documents in docs collection {browseActive}.
+ {:else}
+
+
+ ID Data
+
+ {#each browseDocs as d (d.id)}
+
+ {d.id}
+ {preview(d.data)}
+
+ {/each}
+
+
+ {/if}
+ {:else if browseActiveKind === 'files'}
+ {#if browseFiles.length === 0 && !browseLoading}
+ No files in files collection {browseActive}.
+ {:else}
+
+
+ Name Type Size Created
+
+ {#each browseFiles as f (f.id)}
+
+ {f.name}
+ {f.content_type}{fmtSize(f.size)}
+ {fmtTime(f.created_at)}
+
+
+ Download
+
+
+
+ {/each}
+
+
+ {/if}
+ {/if}
+ {#if browseCursor}
+ browse(browseCursor ?? undefined)}
+ >
+ Load more
+
+ {/if}
+ {/if}
+
+ {:else if activeTab === 'scripts'}
+
+ Scripts
+
+ Group-owned script templates — inherited by every descendant app,
+ resolved by name (nearest-owner-wins). Author them via pic apply.
+
+ {#if scriptsError}
+ {@render loadErrorNote(scriptsError)}
+ {:else if !scriptsLoaded}
+ Loading…
+ {:else if scripts.length === 0}
+ No scripts declared on this group.
+ {:else}
+
+
+ Name Kind Version Updated
+
+ {#each scripts as s (s.id)}
+
+ {s.name}
+
+ {s.kind}
+
+ v{s.version}
+ {fmtTime(s.updated_at)}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'triggers'}
+
+ Trigger templates
+
+ Event trigger templates declared on this group. Each fires a group-owned
+ handler on a matching descendant-app (or shared-collection) event. Author
+ them via pic apply.
+
+ {#if triggersError}
+ {@render loadErrorNote(triggersError)}
+ {:else if !triggersLoaded}
+ Loading…
+ {:else if triggers.length === 0}
+ No trigger templates declared on this group.
+ {:else}
+
+
+ Kind Target Handler Flags
+
+ {#each triggers as t (t.kind + '/' + t.target + '/' + t.script)}
+
+ {t.kind} {t.target}
+ {t.script}
+
+ {#if !t.enabled}disabled {/if}
+ {#if t.sealed}sealed {/if}
+ {#if t.shared}shared {/if}
+
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'routes'}
+
+ Route templates
+
+ HTTP route templates declared on this group — each descendant app serves
+ them (nearest-owner shadowing). Author them via pic apply.
+
+ {#if routesError}
+ {@render loadErrorNote(routesError)}
+ {:else if !routesLoaded}
+ Loading…
+ {:else if routes.length === 0}
+ No route templates declared on this group.
+ {:else}
+
+
+
+ Method Path Handler Dispatch Flags
+
+
+
+ {#each routes as r (r.method + ' ' + r.path + ' ' + r.script)}
+
+ {r.method}
+ {r.path}
+ {#if r.path_kind !== 'exact'}({r.path_kind}) {/if}
+
+ {r.script}
+ {r.dispatch}
+
+ {#if !r.enabled}disabled {/if}
+ {#if r.sealed}sealed {/if}
+
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'suppressions'}
+
+ Suppressions
+
+ Inherited templates this group declines for its whole subtree
+ ([suppress] in the manifest). A sealed template can't be
+ declined. Author via pic apply.
+
+ {#if suppressionsError}
+ {@render loadErrorNote(suppressionsError)}
+ {:else if !suppressionsLoaded}
+ Loading…
+ {:else if suppressions.length === 0}
+ No suppressions declared on this group.
+ {:else}
+
+
+ Target kind Reference
+
+ {#each suppressions as sup (sup.target_kind + '/' + sup.reference)}
+
+ {sup.target_kind} {sup.reference}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'extension-points'}
+
+ Extension points
+
+ Opt-in polymorphism markers declared on this group — a descendant app can
+ override each with its own module; otherwise the group's default body is
+ used. Author via pic apply.
+
+ {#if extPointsError}
+ {@render loadErrorNote(extPointsError)}
+ {:else if !extPointsLoaded}
+ Loading…
+ {:else if extPoints.length === 0}
+ No extension points declared on this group.
+ {:else}
+
+
+ Name Declared here Provider
+
+ {#each extPoints as ep (ep.name)}
+
+ {ep.name}
+
+ {#if ep.declared_here}
+ here
+ {:else}
+ inherited
+ {/if}
+
+ {ep.provider ?? '—'}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'dead-letters'}
+
+ Shared-queue dead-letters
+
+ Exhausted messages from this group's shared durable queues. Read-only —
+ replay/resolve is not exposed for shared queues.
+
+
+
+ {#if deadLettersError}
+ {@render loadErrorNote(deadLettersError)}
+ {:else if !deadLettersLoaded}
+ Loading…
+ {:else if deadLetters.length === 0}
+ No dead-letters on this group.
+ {:else}
+
+
+
+ Collection Source Op Attempts
+ Last error Created Resolved
+
+
+
+ {#each deadLetters as dl (dl.id)}
+
+ {dl.collection}
+ {dl.source}
+ {dl.op}
+ {dl.attempt_count}
+ {preview(dl.last_error, 80)}
+ {fmtTime(dl.created_at)}
+ {dl.resolved_at ? fmtTime(dl.resolved_at) : '—'}
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === 'ownership'}
+
+ Ownership
+
+ Multi-repo projects (repo roots) and the count of group nodes each owns.
+ A group is claimed by the first pic apply declaring a
+ [project]. Per-group approval policy has no live view — it is
+ previewed via pic plan.
+
+ {#if projectsError}
+ {@render loadErrorNote(projectsError)}
+ {:else if !projectsLoaded}
+ Loading…
+ {:else if projects.length === 0}
+ No projects registered on this instance.
+ {:else}
+
+
+ Slug Name Owned groups Created
+
+ {#each projects as p (p.slug)}
+
+ {p.slug}
+ {p.name}
+ {p.owned_groups}
+ {fmtTime(p.created_at)}
+
+ {/each}
+
+
+ {/if}
+
{:else if activeTab === 'settings' && canManage}
Settings
@@ -590,31 +1446,7 @@
h3 {
font-size: 1rem;
- margin: 0 0 0.5rem;
- }
-
- .tabbar {
- display: flex;
- gap: 1.25rem;
- border-bottom: 1px solid #1e293b;
- margin-bottom: 1.5rem;
- }
-
- .tabbar a {
- color: #94a3b8;
- text-decoration: none;
- font-size: 0.9rem;
- padding: 0.5rem 0;
- border-bottom: 2px solid transparent;
- }
-
- .tabbar a:hover {
- color: #e2e8f0;
- }
-
- .tabbar a.active {
- color: #e2e8f0;
- border-bottom-color: #38bdf8;
+ margin: 1.5rem 0 0.5rem;
}
button {
@@ -627,6 +1459,24 @@
cursor: pointer;
}
+ button.secondary {
+ background: transparent;
+ color: #38bdf8;
+ border: 1px solid #334155;
+ padding: 0.3rem 0.7rem;
+ font-weight: 500;
+ }
+
+ a.secondary {
+ color: #38bdf8;
+ text-decoration: none;
+ border: 1px solid #334155;
+ padding: 0.3rem 0.7rem;
+ border-radius: 0.375rem;
+ font-size: 0.85rem;
+ margin-right: 0.4rem;
+ }
+
button.danger {
background: #7f1d1d;
color: #fecaca;
@@ -696,6 +1546,38 @@
font: inherit;
}
+ .collection-form {
+ display: flex;
+ align-items: flex-end;
+ gap: 0.75rem;
+ margin-bottom: 1rem;
+ }
+ .collection-form label {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ font-size: 0.85rem;
+ color: #cbd5e1;
+ }
+ .collection-form input,
+ .collection-form select {
+ background: #0b1220;
+ color: #e2e8f0;
+ border: 1px solid #334155;
+ border-radius: 0.375rem;
+ padding: 0.5rem 0.75rem;
+ font: inherit;
+ }
+
+ .inline-check {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ font-size: 0.85rem;
+ color: #cbd5e1;
+ margin-bottom: 1rem;
+ }
+
.actions {
display: flex;
justify-content: flex-end;
@@ -786,4 +1668,81 @@
display: flex;
justify-content: flex-end;
}
+
+ /* Read-only inspection grids. */
+ table.grid {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.9rem;
+ margin-top: 0.5rem;
+ }
+ table.grid th,
+ table.grid td {
+ text-align: left;
+ padding: 0.45rem 0.6rem;
+ border-bottom: 1px solid #1e293b;
+ vertical-align: top;
+ }
+ table.grid th {
+ color: #64748b;
+ font-size: 0.72rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-weight: 600;
+ }
+ .mono {
+ font-family: monospace;
+ }
+ pre.value {
+ margin: 0;
+ padding: 0.5rem;
+ background: #0b1220;
+ border-radius: 0.375rem;
+ white-space: pre-wrap;
+ word-break: break-all;
+ font-size: 0.8rem;
+ }
+
+ .badge {
+ display: inline-block;
+ background: #0b1220;
+ border: 1px solid #334155;
+ color: #cbd5e1;
+ border-radius: var(--radius-pill, 999px);
+ padding: 0.05rem 0.45rem;
+ font-size: 0.72rem;
+ font-weight: 600;
+ margin-right: 0.3rem;
+ }
+ .badge-muted {
+ color: #64748b;
+ }
+ .badge-sealed {
+ border-color: #b45309;
+ color: #fbbf24;
+ }
+ .badge-shared {
+ border-color: #0e7490;
+ color: #22d3ee;
+ }
+
+ .hint {
+ color: #64748b;
+ font-size: 0.85rem;
+ margin: 0.5rem 0 1rem;
+ }
+ .hint-chip {
+ background: #0b1220;
+ color: #e2e8f0;
+ border: 1px solid #334155;
+ border-radius: 0.25rem;
+ padding: 0.1rem 0.4rem;
+ font-size: 0.8rem;
+ cursor: pointer;
+ font-family: monospace;
+ font-weight: 500;
+ }
+ .hint-chip:hover {
+ border-color: #38bdf8;
+ }