-
-
-
-
- {#if selectedMember.avatarUrl}
-
- {:else}
-
{displayInitial(selectedMember)}
- {/if}
-
-
-
- {displayMemberName(selectedMember)}
-
-
Member details
-
- {#if selectedMember.id !== auth.userData?.id && isAdmin}
-
-
-
Role
-
- {#each Object.entries(roleMeta) as [role, meta] (role)}
- {@const RoleChoiceIcon = meta.icon}
-
- {/each}
-
-
-
-
-
Actions
-
-
-
-
-
- {:else}
- {@const modalRole =
- roleMeta[selectedMember.role as keyof typeof roleMeta] ??
- roleMeta.read}
-
- {modalRole.label}
-
- {/if}
-
-
- {#if addPeopleStep !== "type" && addPeopleStep !== "done"}
-
- {/if}
-
-
- {#if addPeopleStep !== "done"}
-
-
- {addPeopleStep === "type"
- ? "Add people"
- : addPeopleStep === "suggested-user"
- ? "Choose a person"
- : "Choose a role"}
-
- {@render wizardStepper(addPeopleStepNumber, addPeopleTotalSteps)}
-
- Step {addPeopleStepNumber} of {addPeopleTotalSteps}
-
-
- {/if}
-
- {#if addPeopleStep === "type"}
-
-
-
-
-
- {:else if addPeopleStep === "suggested-user"}
-
- {#if suggestedUsersLoading && suggestedUsers.length === 0}
-
- Loading...
-
- {:else if suggestedUsers.length === 0}
-
- No suggested users found.
-
- {:else}
-
- {#each suggestedUsers as user (user.id)}
-
- {/each}
-
- {/if}
-
- {:else if addPeopleStep === "role"}
-
- {#each Object.entries(roleMeta) as [role, meta] (role)}
- {@const InviteRoleIcon = meta.icon}
-
- {/each}
-
- {:else}
-
-
-
- {addPeopleType === "invite-link"
- ? "Invite ready"
- : "Invitation sent"}
-
-
- {addPeopleType === "invite-link"
- ? "The invited person needs both the link and the code to join."
- : `${selectedSuggestedUser?.displayName ?? "The selected person"} has been invited to the project.`}
-
-
- {#if addPeopleType === "invite-link"}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- You won't be able to see the code again after closing this dialog.
-
-
- {/if}
-
-
- {/if}
+{#if !project}
+
+ Loading project…
+
+{:else}
+
+
+
+ {#if tab === "history"}
+
+ {:else if tab === "settings"}
+
+ {/if}
{/if}
-
-{#if showIntegrationDialog}
-
-
- {#if selectedInstallationEntityId}
-
- {/if}
-
-
-
-
- {selectedInstallationEntityId
- ? "Choose repository"
- : "Choose installation"}
-
- {@render wizardStepper(selectedInstallationEntityId ? 2 : 1, 2)}
-
Step {selectedInstallationEntityId ? 2 : 1} of 2
-
-
- {#if !selectedInstallationEntityId}
-
- {#if installations.length === 0}
-
-
- No GitHub installations found.
-
-
-
- {:else}
-
- {#each installations as installation (installation.id)}
-
- {/each}
-
-
- {/if}
-
- {:else}
-
- {#if suggestionsLoading}
-
-
-
- Loading repositories...
-
-
- {:else}
-
-
- {#each repositoriesForSelectedInstallation as repo (repo.id)}
-
- {:else}
-
- No repositories found.
-
- {/each}
-
- {/if}
-
- {/if}
-
-{/if}
-
-{#if showCreateDialog}
-
-
-{/if}
-
-
diff --git a/apps/web/src/lib/projects/ui/ProjectTopbar.svelte b/apps/web/src/lib/projects/ui/ProjectTopbar.svelte
new file mode 100644
index 00000000..8d2f6158
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/ProjectTopbar.svelte
@@ -0,0 +1,49 @@
+
+
+
+
+ Projects
+ /
+ {projectName}
+
+
+ {@render children?.()}
+
diff --git a/apps/web/src/lib/projects/ui/ProjectUnsavedNavGuard.svelte b/apps/web/src/lib/projects/ui/ProjectUnsavedNavGuard.svelte
index c1cb296e..78cbbd2e 100644
--- a/apps/web/src/lib/projects/ui/ProjectUnsavedNavGuard.svelte
+++ b/apps/web/src/lib/projects/ui/ProjectUnsavedNavGuard.svelte
@@ -2,23 +2,24 @@
import { browser } from "$app/environment";
import { beforeNavigate, goto } from "$app/navigation";
import { tick } from "svelte";
- import { fade } from "svelte/transition";
- import { Command } from "lucide-svelte";
import { secretsEditorNavGuard } from "$lib/secrets/secrets-editor-nav-guard.svelte";
+ import Button from "$lib/ui/Button.svelte";
+ import Dialog from "$lib/ui/Dialog.svelte";
+ import Kbd from "$lib/ui/Kbd.svelte";
let dialogOpen = $state(false);
let saving = $state(false);
let saveFailed = $state(false);
let pendingDestination = $state
(null);
let snapshot = $state({ projectName: "", externallyUpdated: false });
- let firstButton: HTMLButtonElement | undefined = $state();
-
- const kbdClass =
- "pointer-events-none inline-flex h-6 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm border-0 bg-primary-foreground/20 px-1.5 font-sans text-xs font-medium text-primary-foreground";
const canSave = $derived(
!saving && !secretsEditorNavGuard.readOnly && !snapshot.externallyUpdated,
);
+ const canPush = $derived(
+ secretsEditorNavGuard.hasIntegrations &&
+ Boolean(secretsEditorNavGuard.push),
+ );
function shouldBlockNavigation(fromUrl: URL, toUrl: URL): boolean {
if (!secretsEditorNavGuard.isDirty) return false;
@@ -54,7 +55,6 @@
};
saveFailed = false;
dialogOpen = true;
- void tick().then(() => firstButton?.focus());
});
$effect(() => {
@@ -68,15 +68,12 @@
$effect(() => {
if (!dialogOpen) return;
- // Capture phase so the editor's own ⌘S handler doesn't also fire.
+ // Capture phase so the editor's own ⌘S handler doesn't also fire. Esc is the dialog's.
const handler = (event: KeyboardEvent) => {
if ((event.metaKey || event.ctrlKey) && event.key === "s") {
event.preventDefault();
event.stopImmediatePropagation();
void handleSave();
- } else if (event.key === "Escape" && !saving) {
- event.preventDefault();
- closeDialog();
}
};
document.addEventListener("keydown", handler, true);
@@ -98,7 +95,7 @@
if (dest) void goto(dest);
}
- async function handleSave() {
+ async function handleSave(push = false) {
if (!canSave || !secretsEditorNavGuard.save) return;
saving = true;
saveFailed = false;
@@ -108,6 +105,7 @@
saveFailed = true;
return;
}
+ if (push) await secretsEditorNavGuard.push?.();
await proceed();
} finally {
saving = false;
@@ -120,92 +118,55 @@
}
-{#if dialogOpen}
-
-
-
-
- Save your changes?
-
-
- {#if snapshot.projectName}
- You have unsaved edits to {snapshot.projectName}. Save now, discard them, or keep editing.
- {:else}
- You have unsaved edits. Save now, discard them, or keep editing.
- {/if}
-
-
-
- {#if snapshot.externallyUpdated}
-
- This project was updated elsewhere. Refresh to load the latest version
- before saving.
-
+
diff --git a/apps/web/src/lib/projects/ui/ProjectsPage.svelte b/apps/web/src/lib/projects/ui/ProjectsPage.svelte
index 34d3451b..03f7f5f5 100644
--- a/apps/web/src/lib/projects/ui/ProjectsPage.svelte
+++ b/apps/web/src/lib/projects/ui/ProjectsPage.svelte
@@ -1,262 +1,100 @@
-{#if loadError}
-
-
- {loadError}
-
-
-
-{:else if profileError}
-
-
- {profileError}
-
-
-
-{:else if !profileLoading && !projectsLoading && projects && projects.length === 0}
-
-
-
-
- New project
-
-
- Name your first project.
-
-
- Secrets you store in it are encrypted in your browser — before they
+
+ Projects · Cryptly
+
+
+{#if empty}
+
+
+
+
+
+
+
-{:else}
-
{/if}
diff --git a/apps/web/src/lib/projects/ui/RevealOnPicker.svelte b/apps/web/src/lib/projects/ui/RevealOnPicker.svelte
index 10d03d8e..289b3bcc 100644
--- a/apps/web/src/lib/projects/ui/RevealOnPicker.svelte
+++ b/apps/web/src/lib/projects/ui/RevealOnPicker.svelte
@@ -1,122 +1,54 @@
-
-
- {#each REVEAL_ON_OPTIONS as option, index (option.key)}
- {@const Icon = option.icon}
- {@const isActive = index === activeIndex}
-
- {/each}
-
-
-
-
-
-
- {#each REVEAL_ON_OPTIONS as option, index (option.key)}
-
- {/each}
-
-
-
-
- {active.label}
- {active.description}
-
-
+
diff --git a/apps/web/src/lib/projects/ui/YearHeatmap.svelte b/apps/web/src/lib/projects/ui/YearHeatmap.svelte
deleted file mode 100644
index a265e89f..00000000
--- a/apps/web/src/lib/projects/ui/YearHeatmap.svelte
+++ /dev/null
@@ -1,216 +0,0 @@
-
-
-
-
- {#each heatmapData.monthLabels as month (month.weekIdx)}
-
- {month.label}
-
- {/each}
-
-
-
-
- Mon
- Wed
- Fri
-
-
-
(hover = null)}
- >
- {#each heatmapData.weeks as week, weekIndex (weekIndex)}
-
- {#each week as day (day.key)}
- {#if day.isFuture}
-
- {:else}
- {@const isSelected = selectedDayKey === day.key}
-
- {/if}
- {/each}
-
- {/each}
-
-
-
-
- Less
- {#each [0, 1, 3, 6, 9] as level (level)}
-
- {/each}
- More
-
-
- {#if hover}
-
-
- {formatTooltip(hover.day.date, hover.day.count)}
-
-
- {/if}
-
diff --git a/apps/web/src/lib/projects/ui/settings/AddPeopleDialog.svelte b/apps/web/src/lib/projects/ui/settings/AddPeopleDialog.svelte
new file mode 100644
index 00000000..7d646f97
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/AddPeopleDialog.svelte
@@ -0,0 +1,354 @@
+
+
+{#snippet option(
+ Icon: typeof Link,
+ label: string,
+ hint: string,
+ onclick: () => void,
+)}
+
+{/snippet}
+
+{#snippet field(id: "link" | "code", label: string, value: string)}
+
+{/snippet}
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/ConfirmDialog.svelte b/apps/web/src/lib/projects/ui/settings/ConfirmDialog.svelte
new file mode 100644
index 00000000..35c55afe
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/ConfirmDialog.svelte
@@ -0,0 +1,81 @@
+
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/ConnectRepositoryDialog.svelte b/apps/web/src/lib/projects/ui/settings/ConnectRepositoryDialog.svelte
new file mode 100644
index 00000000..458cdcdc
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/ConnectRepositoryDialog.svelte
@@ -0,0 +1,286 @@
+
+
+{#snippet repoRow(repo: Repo)}
+
+{/snippet}
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/DangerSection.svelte b/apps/web/src/lib/projects/ui/settings/DangerSection.svelte
new file mode 100644
index 00000000..611d6edd
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/DangerSection.svelte
@@ -0,0 +1,71 @@
+
+
+{#snippet deleteAction()}
+
+{/snippet}
+
+
+
+ {isAdmin
+ ? "Removes the project and every version, for all members."
+ : "Remove yourself from this project."}
+
+
+
+{#if isAdmin}
+
+{:else}
+
+{/if}
diff --git a/apps/web/src/lib/projects/ui/settings/GeneralSection.svelte b/apps/web/src/lib/projects/ui/settings/GeneralSection.svelte
new file mode 100644
index 00000000..a002597f
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/GeneralSection.svelte
@@ -0,0 +1,160 @@
+
+
+{#snippet nameActions()}
+ {#if renaming}
+
+
+ {:else}
+
+ {/if}
+{/snippet}
+
+{#snippet revealActions()}
+
void saveRevealOn(next)}
+ />
+{/snippet}
+
+{#snippet idActions()}
+ void copyId()}>
+ {#if copiedId}
+
+ {:else}
+
+ {/if}
+
+{/snippet}
+
+
+
+ {#if renaming}
+ input.select()}
+ aria-label="Project name"
+ autocomplete="off"
+ spellcheck="false"
+ data-1p-ignore
+ disabled={savingName}
+ class="-my-1 -ml-2 h-[30px] min-w-0 flex-1 rounded-lg bg-field px-2 shadow-field outline-none focus:shadow-[inset_0_0_0_1px_var(--fg3)]"
+ onkeydown={(event) => {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ void saveName();
+ } else if (event.key === "Escape") {
+ event.preventDefault();
+ renaming = false;
+ }
+ }}
+ />
+ {:else}
+ {project.name}
+ {/if}
+
+
+ {reveal.label}
+ {reveal.description}
+
+
+ {project.id}
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/GithubSection.svelte b/apps/web/src/lib/projects/ui/settings/GithubSection.svelte
new file mode 100644
index 00000000..8df9084d
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/GithubSection.svelte
@@ -0,0 +1,196 @@
+
+
+
+
+{#snippet connect()}
+
+{/snippet}
+
+
+ {#each integrations ?? [] as integration (integration.id)}
+ {@const url = repoUrl(integration)}
+ {@const status = syncStatus(integration)}
+ {@const StatusIcon = status.icon}
+
+ {#if url}
+
+ {repoName(integration)}
+
+ {:else}
+ {repoName(integration)}
+ {/if}
+ {#snippet actions()}
+ {#if isAdmin}
+ {
+ removing = integration;
+ removeOpen = true;
+ }}
+ >
+
+
+ {/if}
+
+ {status.text}
+
+ {/snippet}
+
+ {:else}
+
+ {integrations === null ? "Loading…" : "No repositories connected"}
+
+ {/each}
+
+
+{#if isAdmin}
+ void loadIntegrations()}
+ />
+{/if}
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/MembersSection.svelte b/apps/web/src/lib/projects/ui/settings/MembersSection.svelte
new file mode 100644
index 00000000..0d6139fa
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/MembersSection.svelte
@@ -0,0 +1,330 @@
+
+
+
+
+{#snippet roleText(role: ProjectRole)}
+ {roleLabel(role)}
+{/snippet}
+
+{#snippet addPeople()}
+
+{/snippet}
+
+
+ {#each members as member (member.id)}
+ {@const isMe = member.id === me}
+ {@const name = memberName(member)}
+
+
+ {name}
+ {#if member.email && member.email !== name}
+ {member.email}
+ {/if}
+ {#snippet actions()}
+ {#if isAdmin && !isMe}
+ {
+ removing = member;
+ removeOpen = true;
+ }}
+ >
+
+
+
+ {:else}
+ {@render roleText(member.role)}
+ {/if}
+ {/snippet}
+
+ {/each}
+ {#each invites as invite (invite.data.id)}
+
+
+ {invite.type === "link"
+ ? "Invite link"
+ : invite.data.invitedUser.displayName}
+ {shortDate(invite.data.createdAt)}
+ {#snippet actions()}
+ {#if invite.type === "link"}
+ {@const inviteId = invite.data.id}
+ void copyInviteLink(inviteId)}
+ >
+ {#if copiedInviteId === inviteId}
+
+ {:else}
+
+ {/if}
+
+ {/if}
+ void revoke(invite)}
+ >
+
+
+ {@render roleText(invite.data.role)}
+ {/snippet}
+
+ {/each}
+
+
+{#if isAdmin}
+ void loadInvites()}
+ />
+{/if}
+
+
diff --git a/apps/web/src/lib/projects/ui/settings/ProjectSettingsView.svelte b/apps/web/src/lib/projects/ui/settings/ProjectSettingsView.svelte
new file mode 100644
index 00000000..e2f0077f
--- /dev/null
+++ b/apps/web/src/lib/projects/ui/settings/ProjectSettingsView.svelte
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/web/src/lib/secrets/env-doc.ts b/apps/web/src/lib/secrets/env-doc.ts
new file mode 100644
index 00000000..d251868f
--- /dev/null
+++ b/apps/web/src/lib/secrets/env-doc.ts
@@ -0,0 +1,412 @@
+/**
+ * The secrets document is plain `.env` text: the single source of truth that gets encrypted
+ * and saved. The table view reads groups and secrets from it and edits it with line surgery:
+ * each operation replaces exactly the lines it touches, so everything else round-trips byte
+ * for byte (line endings included).
+ *
+ * Groups: blank lines split them; a `#` comment as a group's first line names it.
+ */
+
+const SECRET_LINE = /^\s*(export\s+)?([A-Za-z_][A-Za-z0-9_.-]*)\s*=(.*)$/;
+export const KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
+
+export type Quote = '"' | "'" | "";
+
+export interface EnvSecret {
+ /** Key plus occurrence ("API_KEY", then "API_KEY#2"), stable while other lines change. */
+ id: string;
+ key: string;
+ /** Decoded value: quotes stripped, escapes in double quotes resolved. */
+ value: string;
+ quote: Quote;
+ exported: boolean;
+ /** First and last line index (inclusive); multiline quoted values span several lines. */
+ start: number;
+ end: number;
+ /** Where the value starts in the first line (right after `=`). */
+ valueCol: number;
+ /** The value exactly as written (quotes and escapes included), lines joined with `\n`. */
+ raw: string;
+ /** What follows the value on its last line, e.g. ` # default`. */
+ tail: string;
+}
+
+export interface EnvGroup {
+ index: number;
+ /** From the group's leading `#` comment; null when it has none ("Untitled"). */
+ name: string | null;
+ /** Line index of that comment. */
+ header: number | null;
+ start: number;
+ end: number;
+ secrets: EnvSecret[];
+}
+
+export interface EnvDoc {
+ lines: string[];
+ eol: string;
+ groups: EnvGroup[];
+ secrets: EnvSecret[];
+}
+
+export function parseEnv(text: string): EnvDoc {
+ const lines = text.split(/\r?\n/);
+ const eol = text.includes("\r\n") ? "\r\n" : "\n";
+ const groups: EnvGroup[] = [];
+ const secrets: EnvSecret[] = [];
+ const seen = new Map();
+ let group: EnvGroup | null = null;
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+ if (line.trim() === "") {
+ group = null;
+ continue;
+ }
+ if (!group) {
+ group = {
+ index: groups.length,
+ name: null,
+ header: null,
+ start: i,
+ end: i,
+ secrets: [],
+ };
+ groups.push(group);
+ }
+ group.end = i;
+
+ if (line.trimStart().startsWith("#")) {
+ // A commented-out secret (`# OLD_KEY=...`) is a note, never a group name: its value
+ // would show in plain text as the title.
+ const body = line.replace(/^\s*#\s*/, "");
+ if (group.start === i && !SECRET_LINE.test(body)) {
+ group.header = i;
+ group.name = groupName(line);
+ }
+ continue;
+ }
+
+ const match = SECRET_LINE.exec(line);
+ if (!match) continue;
+ const [, exported, key, rest] = match;
+ const read = readValue(lines, i, rest);
+ const n = (seen.get(key) ?? 0) + 1;
+ seen.set(key, n);
+ const secret: EnvSecret = {
+ id: n === 1 ? key : `${key}#${n}`,
+ key,
+ exported: Boolean(exported),
+ start: i,
+ valueCol: line.length - rest.length,
+ ...read,
+ };
+ const end = read.end;
+ group.secrets.push(secret);
+ secrets.push(secret);
+ group.end = end;
+ i = end;
+ }
+
+ return { lines, eol, groups, secrets };
+}
+
+/** `# --- Payments ---` → "Payments"; null when nothing is left. */
+function groupName(line: string): string | null {
+ const name = line.replace(/^\s*#[\s#=-]*/, "").replace(/[\s#=-]*$/, "");
+ return name || null;
+}
+
+/**
+ * Same rules as dotenv. The GitHub push (`monaco/parser.ts`) and the .env view masking use it too:
+ * a quoted value runs to its first closing quote, across lines if needed, and that quote must
+ * end its line (a `# comment` may follow). Otherwise the quote is just a character of a
+ * one-line unquoted value, so an unclosed quote never swallows the lines below it.
+ */
+function readValue(
+ lines: string[],
+ start: number,
+ rest: string,
+): Pick {
+ const q = rest[0];
+ if (q === '"' || q === "'") {
+ let text = rest;
+ let end = start;
+ let pos = 1;
+ for (;;) {
+ for (; pos < text.length; pos++) {
+ if (q === '"' && text[pos] === "\\") {
+ pos++;
+ continue;
+ }
+ if (text[pos] === q) {
+ if (!/^\s*(#.*)?$/.test(text.slice(pos + 1))) break;
+ const body = text.slice(1, pos);
+ return {
+ value: q === '"' ? unescape(body) : body,
+ quote: q,
+ end,
+ raw: text.slice(0, pos + 1),
+ tail: text.slice(pos + 1),
+ };
+ }
+ }
+ if (pos < text.length || end + 1 >= lines.length) break;
+ end++;
+ text += "\n" + lines[end];
+ }
+ }
+ const tail = /\s+#.*$/.exec(rest)?.[0] ?? "";
+ const raw = rest.slice(0, rest.length - tail.length);
+ return { value: raw.trim(), quote: "", end: start, raw, tail };
+}
+
+function unescape(body: string): string {
+ return body.replace(/\\([\\"nr])/g, (_, c: string) =>
+ c === "n" ? "\n" : c === "r" ? "\r" : c,
+ );
+}
+
+/**
+ * Writes a value the way dotenv reads it back, never adding backslash escapes (other tools
+ * would keep them): unquoted when nothing needs quoting, else `prefer` when it can hold the
+ * value, else single quotes, else double quotes.
+ */
+export function formatValue(value: string, prefer: Quote = ""): string {
+ const single = !value.includes("'");
+ // Inside double quotes \n \r \" \\ are escapes for us and the GitHub push.
+ const double = !value.includes('"') && !/\\[nr"\\]/.test(value);
+ if (prefer === "" && !/[\s#"'`]/.test(value)) return value;
+ if (prefer === '"' && double) return `"${value}"`;
+ if (single) return `'${value}'`;
+ if (double) return `"${value}"`;
+ // Both quote characters inside: the one case that needs escaping.
+ return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+
+function secretLine(key: string, value: string) {
+ return `${key}=${formatValue(value)}`;
+}
+
+function splice(
+ doc: EnvDoc,
+ start: number,
+ remove: number,
+ insert: string[] = [],
+): string {
+ const lines = doc.lines.slice();
+ lines.splice(start, remove, ...insert.flatMap((l) => l.split("\n")));
+ return lines.join(doc.eol);
+}
+
+/** Adds a blank line and `block` after the last non-blank line: a new group at the end. */
+function appendBlock(doc: EnvDoc, block: string[]): string {
+ let last = doc.lines.length - 1;
+ while (last >= 0 && doc.lines[last].trim() === "") last--;
+ if (last < 0) return block.join(doc.eol);
+ return splice(doc, last + 1, 0, ["", ...block]);
+}
+
+/**
+ * Changes one secret in place: a rename replaces only the key, a new value keeps the quote
+ * style when it can, and `export`, spacing and a trailing `# comment` always stay.
+ */
+export function setSecret(
+ text: string,
+ id: string,
+ key: string,
+ value: string,
+): string {
+ const doc = parseEnv(text);
+ const s = doc.secrets.find((x) => x.id === id);
+ if (!s || (s.key === key && s.value === value)) return text;
+ const prefix = doc.lines[s.start]
+ .slice(0, s.valueCol)
+ .replace(
+ /^(\s*(?:export\s+)?)[A-Za-z_][A-Za-z0-9_.-]*/,
+ (_, lead) => lead + key,
+ );
+ const lead = s.quote ? "" : (/^\s*/.exec(s.raw)?.[0] ?? "");
+ const raw = value === s.value ? s.raw : lead + formatValue(value, s.quote);
+ return splice(doc, s.start, s.end - s.start + 1, [prefix + raw + s.tail]);
+}
+
+/** Appends a secret to group `index`, or starts a new group at the end if there is none. */
+export function addSecret(
+ text: string,
+ index: number,
+ key: string,
+ value: string,
+): string {
+ const doc = parseEnv(text);
+ const g = doc.groups[index];
+ const line = secretLine(key, value);
+ return g ? splice(doc, g.end + 1, 0, [line]) : appendBlock(doc, [line]);
+}
+
+export function removeSecrets(text: string, ids: Iterable): string {
+ const doc = parseEnv(text);
+ const remove = new Set(ids);
+ const lines = doc.lines.slice();
+ for (const s of doc.secrets.filter((x) => remove.has(x.id)).reverse())
+ lines.splice(s.start, s.end - s.start + 1);
+ return lines.join(doc.eol);
+}
+
+export function addGroup(text: string, name: string): string {
+ return appendBlock(parseEnv(text), [`# ${name}`]);
+}
+
+/** Rewrites the group's naming comment (keeping its dashes), or adds one. */
+export function renameGroup(text: string, index: number, name: string): string {
+ const doc = parseEnv(text);
+ const g = doc.groups[index];
+ if (!g || g.name === name) return text;
+ if (g.header === null) return splice(doc, g.start, 0, [`# ${name}`]);
+ const m = /^(\s*#[\s#=-]*)(.*?)([\s#=-]*)$/.exec(doc.lines[g.header]);
+ const line = m?.[2] ? m[1] + name + m[3] : `# ${name}`;
+ return splice(doc, g.header, 1, [line]);
+}
+
+/** Removes a whole group block plus one neighbouring blank line. */
+export function removeGroup(text: string, index: number): string {
+ const doc = parseEnv(text);
+ const g = doc.groups[index];
+ if (!g) return text;
+ let { start, end } = g;
+ if (start > 0 && doc.lines[start - 1].trim() === "") start--;
+ else if (end + 1 < doc.lines.length && doc.lines[end + 1].trim() === "")
+ end++;
+ return splice(doc, start, end - start + 1);
+}
+
+export type Anchor =
+ | { kind: "after" | "before"; id: string }
+ | { kind: "top"; group: number };
+
+/**
+ * Where a secret from `base` (the saved version) belongs in `doc`: after its nearest earlier
+ * neighbour that still exists, before its nearest later one, or at the top of its group
+ * (matched by name). Places crossed-out deleted rows and restores them.
+ */
+export function anchorOf(
+ doc: EnvDoc,
+ base: EnvDoc,
+ secret: EnvSecret,
+): Anchor | null {
+ const group = base.groups.find((g) => g.secrets.includes(secret));
+ if (!group) return null;
+ // Stay in the group of the same name when there is one.
+ const named = group.name
+ ? doc.groups.find((g) => g.name === group.name)
+ : undefined;
+ const ids = new Set((named ?? doc).secrets.map((s) => s.id));
+ const at = group.secrets.indexOf(secret);
+ for (let i = at - 1; i >= 0; i--)
+ if (ids.has(group.secrets[i].id))
+ return { kind: "after", id: group.secrets[i].id };
+ for (let i = at + 1; i < group.secrets.length; i++)
+ if (ids.has(group.secrets[i].id))
+ return { kind: "before", id: group.secrets[i].id };
+ return named ? { kind: "top", group: named.index } : null;
+}
+
+/** Puts a secret deleted since `baseline` back where it was, with its original lines. */
+export function restoreSecret(
+ text: string,
+ baseline: string,
+ id: string,
+): string {
+ const doc = parseEnv(text);
+ const base = parseEnv(baseline);
+ const s = base.secrets.find((x) => x.id === id);
+ if (!s || doc.secrets.some((x) => x.id === id)) return text;
+ const lines = base.lines.slice(s.start, s.end + 1);
+ const anchor = anchorOf(doc, base, s);
+ if (!anchor) return appendBlock(doc, lines);
+ if (anchor.kind === "top") {
+ const g = doc.groups[anchor.group];
+ return splice(doc, g.header === null ? g.start : g.header + 1, 0, lines);
+ }
+ const ref = doc.secrets.find((x) => x.id === anchor.id)!;
+ return splice(
+ doc,
+ anchor.kind === "after" ? ref.end + 1 : ref.start,
+ 0,
+ lines,
+ );
+}
+
+/**
+ * Merges pasted `.env` text: existing keys are updated in place, new ones are appended to
+ * `target`. When the paste has named groups, new keys go to the group with the same name
+ * (created at the end if missing), so pasting a whole file keeps its structure.
+ */
+export function pasteEnv(
+ text: string,
+ pasted: string,
+ target: number,
+): { text: string; updated: number; added: number } {
+ const src = parseEnv(pasted);
+ let out = text;
+ let updated = 0;
+ let added = 0;
+ for (const pg of src.groups) {
+ let dest: number | null = pg.name ? null : target;
+ for (const s of pg.secrets) {
+ // The last copy of a duplicated key is the one dotenv uses: update that one.
+ const existing = parseEnv(out).secrets.findLast((x) => x.key === s.key);
+ if (existing) {
+ if (existing.value === s.value) continue;
+ out = setSecret(out, existing.id, existing.key, s.value);
+ updated++;
+ continue;
+ }
+ if (dest === null) {
+ const doc = parseEnv(out);
+ const named = doc.groups.find((g) => g.name === pg.name);
+ if (!named) out = appendBlock(doc, [src.lines[pg.header!]]);
+ dest = named ? named.index : parseEnv(out).groups.length - 1;
+ }
+ // New secrets keep the pasted lines exactly as typed.
+ const lines = src.lines.slice(s.start, s.end + 1);
+ const doc = parseEnv(out);
+ const g = doc.groups[dest];
+ out = g ? splice(doc, g.end + 1, 0, lines) : appendBlock(doc, lines);
+ if (!g) dest = parseEnv(out).groups.length - 1;
+ added++;
+ }
+ }
+ return { text: out, updated, added };
+}
+
+/** The exact lines of the given secrets, as `.env` text for the clipboard. */
+export function secretsText(doc: EnvDoc, ids: Iterable): string {
+ const want = new Set(ids);
+ return doc.secrets
+ .filter((s) => want.has(s.id))
+ .map((s) => doc.lines.slice(s.start, s.end + 1).join("\n"))
+ .join("\n");
+}
+
+export function groupText(doc: EnvDoc, index: number): string {
+ const g = doc.groups[index];
+ return g ? doc.lines.slice(g.start, g.end + 1).join("\n") : "";
+}
+
+/**
+ * Up to 4 characters at each end, so `sk_live…` and `sk_test…` tell apart, and a fixed-width
+ * mask that never reveals the length. Values under 8 characters stay fully masked.
+ */
+export function peek(value: string): { head: string; tail: string } | null {
+ const n = Math.min(4, Math.floor(value.length / 8));
+ if (!n) return null;
+ return {
+ head: oneLine(value.slice(0, n)),
+ tail: oneLine(value.slice(-n)),
+ };
+}
+
+export function oneLine(value: string): string {
+ return value.replace(/\r?\n/g, "↵");
+}
diff --git a/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte b/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
index 9fd63359..8b90f584 100644
--- a/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
+++ b/apps/web/src/lib/secrets/monaco/SecretsFileEditor.svelte
@@ -1,32 +1,31 @@
-
+
diff --git a/apps/web/src/lib/secrets/monaco/assembler.ts b/apps/web/src/lib/secrets/monaco/assembler.ts
deleted file mode 100644
index 6a541a31..00000000
--- a/apps/web/src/lib/secrets/monaco/assembler.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type * as Monaco from "monaco-editor";
-import { lineColToOffset, type MonacoSelectionLike } from "./parser";
-
-/**
- * Walk the tracking decorations sorted by start offset, splice in real values
- * for collapsed ranges, leave model text in place for ranges whose decoration
- * id is in `expandedIds` (the user is currently looking at / editing the real
- * value). O(L + R).
- */
-export function assembleRealText(
- model: Monaco.editor.ITextModel | null,
- decorationToReal: Map,
- expandedIds: Set,
- monaco: typeof Monaco,
-): string {
- if (!model || decorationToReal.size === 0) {
- return model?.getValue() ?? "";
- }
-
- const fullText = model.getValue();
- const lines = fullText.split("\n");
- const lineLengths = lines.map((l: string) => l.length);
-
- type Entry = { id: string; start: number; end: number };
- const entries: Entry[] = [];
-
- for (const id of decorationToReal.keys()) {
- if (expandedIds.has(id)) continue;
- const range = model.getDecorationRange(id);
- if (!range) continue;
- if (
- range.startLineNumber === range.endLineNumber &&
- range.startColumn === range.endColumn
- ) {
- continue;
- }
- const start = lineColToOffset(
- lineLengths,
- range.startLineNumber,
- range.startColumn,
- );
- const end = lineColToOffset(
- lineLengths,
- range.endLineNumber,
- range.endColumn,
- );
- entries.push({ id, start, end });
- }
-
- entries.sort((a, b) => a.start - b.start);
-
- const out: string[] = [];
- let cursor = 0;
- for (const e of entries) {
- if (e.start < cursor) continue;
- out.push(fullText.slice(cursor, e.start));
- out.push(decorationToReal.get(e.id) ?? fullText.slice(e.start, e.end));
- cursor = e.end;
- }
- out.push(fullText.slice(cursor));
-
- return out.join("");
- void monaco;
-}
-
-/**
- * Given an assembled real-text buffer and a Monaco selection (which is in
- * model coordinates), return the slice of the real buffer that corresponds
- * to that selection. Used by the clipboard intercept.
- *
- * IMPORTANT: this assumes lengths-of-lines in the assembled text equal the
- * model line lengths for collapsed ranges (true: bullets are same width)
- * AND for expanded ranges (true: model already holds the real text). So
- * model line/col coordinates map 1:1 to real-text offsets.
- */
-export function sliceRealByMonacoRange(
- realText: string,
- sel: MonacoSelectionLike,
-): string {
- const lines = realText.split("\n");
- const lineLengths = lines.map((l) => l.length);
- const start = lineColToOffset(
- lineLengths,
- sel.startLineNumber,
- sel.startColumn,
- );
- const end = lineColToOffset(lineLengths, sel.endLineNumber, sel.endColumn);
- return realText.slice(start, end);
-}
diff --git a/apps/web/src/lib/secrets/monaco/dotenv-language.ts b/apps/web/src/lib/secrets/monaco/dotenv-language.ts
index 5b9ef363..fe97bacf 100644
--- a/apps/web/src/lib/secrets/monaco/dotenv-language.ts
+++ b/apps/web/src/lib/secrets/monaco/dotenv-language.ts
@@ -16,7 +16,7 @@ export function registerDotenvLanguage(monaco: typeof Monaco): void {
tokenizer: {
root: [
[/#.*$/, "comment"],
- [/^[a-zA-Z_][a-zA-Z0-9_.]*(?=\s*=)/, "variable"],
+ [/^\s*(?:export\s+)?[a-zA-Z_][a-zA-Z0-9_.-]*(?=\s*=)/, "variable"],
[/=/, "delimiter"],
[/"(?:[^"\\]|\\.)*"/, "string"],
[/'(?:[^'\\]|\\.)*'/, "string"],
@@ -24,23 +24,4 @@ export function registerDotenvLanguage(monaco: typeof Monaco): void {
],
},
});
-
- monaco.editor.defineTheme("dotenvTheme", {
- base: "vs-dark",
- inherit: true,
- rules: [
- { token: "variable", foreground: "DDA15E" },
- { token: "delimiter", foreground: "CCCCCC" },
- { token: "identifier", foreground: "CCCCCC" },
- { token: "string", foreground: "CCCCCC" },
- { token: "string.escape", foreground: "D7BA7D" },
- { token: "comment", foreground: "545C66", fontStyle: "italic" },
- ],
- colors: {
- "editor.foreground": "#CCCCCC",
- "editor.background": "#000000",
- "editor.lineHighlightBackground": "#0a0a0a",
- focusBorder: "#00000000",
- },
- });
}
diff --git a/apps/web/src/lib/secrets/monaco/masking-css.ts b/apps/web/src/lib/secrets/monaco/masking-css.ts
index 39f050d5..73bde441 100644
--- a/apps/web/src/lib/secrets/monaco/masking-css.ts
+++ b/apps/web/src/lib/secrets/monaco/masking-css.ts
@@ -1,16 +1,27 @@
+// Design tokens (lib/appearance/theme.css), so both themes and every grey preset just work.
const MASKING_CSS = `
- .secret-masked {
- color: transparent !important;
- background-image: radial-gradient(circle, #6e7681 1.5px, transparent 1.5px);
- background-size: 8.4px 100%;
- background-repeat: repeat-x;
- background-position: 2px center;
- border-radius: 3px;
+ /* The fixed mask injected where a hidden value goes. */
+ /* !important beats the token colour class Monaco puts on the same span. */
+ .secret-mask {
+ color: var(--faint) !important;
cursor: pointer;
}
- .secret-masked::selection {
- background: rgba(100, 148, 237, 0.3);
+ /* Peek: n plain characters, 6 faint bullets, n plain characters. */
+ .secret-mask-1, .secret-mask-2, .secret-mask-3, .secret-mask-4 {
+ color: transparent !important;
+ -webkit-background-clip: text;
+ background-clip: text;
+ background-image: linear-gradient(
+ to right,
+ var(--fg2) var(--n),
+ var(--faint) var(--n) calc(var(--n) + 6ch),
+ var(--fg2) calc(var(--n) + 6ch)
+ );
}
+ .secret-mask-1 { --n: 1ch; }
+ .secret-mask-2 { --n: 2ch; }
+ .secret-mask-3 { --n: 3ch; }
+ .secret-mask-4 { --n: 4ch; }
.secret-group-zone-hover .view-line,
.secret-group-zone-hover .view-lines,
.secret-group-zone-hover .view-overlays,
@@ -19,11 +30,11 @@ const MASKING_CSS = `
cursor: pointer !important;
}
.secret-copied {
- animation: secret-copied-flash 1.5s ease-out forwards;
+ animation: secret-copied-flash 1.5s steps(1, end) forwards;
}
@keyframes secret-copied-flash {
- 0%, 20% {
- background-color: rgba(34, 197, 94, 0.15);
+ 0% {
+ background-color: color-mix(in oklab, var(--success) 18%, transparent);
}
100% {
background-color: transparent;
@@ -33,21 +44,19 @@ const MASKING_CSS = `
position: absolute;
top: 0;
left: 0;
- padding: 4px 8px;
- background: #1c2128;
- color: #adbac7;
- font-size: 12px;
+ padding: 3px 8px;
+ background: var(--elev);
+ color: var(--fg2);
+ font: 500 12px/18px "Geist Variable", system-ui, sans-serif;
border-radius: 6px;
- border: 1px solid #373e47;
+ box-shadow: 0 0 0 0.5px var(--elev-border), var(--elev-shadow);
pointer-events: none;
white-space: nowrap;
z-index: 100;
will-change: transform;
}
.secret-tooltip.copied {
- background: #14271c;
- border-color: rgba(34, 197, 94, 0.55);
- color: #b6f0c2;
+ color: var(--success);
}
.secret-group-zone {
display: flex;
@@ -59,26 +68,23 @@ const MASKING_CSS = `
}
.secret-group-pill {
display: inline-block;
- color: #6e7681;
- font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
- font-size: 10.5px;
- line-height: 1.2;
+ color: var(--fg3);
+ font: 500 11px/1.2 "Geist Variable", system-ui, sans-serif;
text-decoration: underline;
text-underline-offset: 2px;
- text-decoration-color: #4d5562;
+ text-decoration-color: var(--faint);
cursor: pointer;
pointer-events: auto;
user-select: none;
- transition: color 120ms ease, text-decoration-color 120ms ease;
}
.secret-group-pill:hover,
.secret-group-pill.hover {
- color: #adbac7;
- text-decoration-color: #adbac7;
+ color: var(--fg);
+ text-decoration-color: var(--fg3);
}
.secret-group-pill.copied {
- color: #b6f0c2;
- text-decoration-color: #b6f0c2;
+ color: var(--success);
+ text-decoration-color: var(--success);
}
`;
diff --git a/apps/web/src/lib/secrets/monaco/monaco.ts b/apps/web/src/lib/secrets/monaco/monaco.ts
new file mode 100644
index 00000000..082deccf
--- /dev/null
+++ b/apps/web/src/lib/secrets/monaco/monaco.ts
@@ -0,0 +1,10 @@
+// Monaco is bundled with the app, never fetched from a CDN at runtime: it runs
+// in the page that holds decrypted secrets and the unwrapped private key.
+// Import this module lazily (`await import(...)`) so it stays out of the main chunk.
+import "monaco-editor/esm/vs/editor/edcore.main.js";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+
+self.MonacoEnvironment = { getWorker: () => new EditorWorker() };
+
+export default monaco;
diff --git a/apps/web/src/lib/secrets/monaco/parser.ts b/apps/web/src/lib/secrets/monaco/parser.ts
index 2466f748..4425ccd1 100644
--- a/apps/web/src/lib/secrets/monaco/parser.ts
+++ b/apps/web/src/lib/secrets/monaco/parser.ts
@@ -1,7 +1,6 @@
-import type * as Monaco from "monaco-editor";
-
-const BULLET = "\u2022";
+import { parseEnv } from "$lib/secrets/env-doc";
+/** 1-based line/column coordinates of a value, quotes included. */
export interface ValueRange {
startLine: number;
startCol: number;
@@ -15,266 +14,34 @@ export interface ParsedSecret {
closed: boolean;
}
-export interface MonacoSelectionLike {
- startLineNumber: number;
- startColumn: number;
- endLineNumber: number;
- endColumn: number;
-}
-
-export interface MaskEntry {
- range: ValueRange;
- original: string;
- key: string;
-}
-
-export interface MaskResult {
- masked: string;
- entries: MaskEntry[];
-}
-
-export interface ValueGroup {
- startLine: number;
- endLine: number;
- ranges: ValueRange[];
-}
-
-export function getValueRanges(
- model: Monaco.editor.ITextModel,
-): ParsedSecret[] {
- const lineCount = model.getLineCount();
- const ranges: ParsedSecret[] = [];
-
- let inQuote: string | null = null;
- let current: { startLine: number; startCol: number; key: string } | null =
- null;
-
- for (let line = 1; line <= lineCount; line++) {
- const text = model.getLineContent(line);
-
- if (inQuote) {
- for (let i = 0; i < text.length; i++) {
- if (inQuote === '"' && text[i] === "\\") {
- i++;
- continue;
- }
- if (text[i] === inQuote) {
- const { startLine, startCol, key } = current!;
- ranges.push({
- range: {
- startLine,
- startCol,
- endLine: line,
- endCol: i + 2,
- },
- key,
- closed: true,
- });
- inQuote = null;
- current = null;
- break;
- }
- }
- continue;
- }
-
- const trimmed = text.trim();
- if (trimmed === "" || trimmed.startsWith("#")) continue;
-
- const eqIdx = text.indexOf("=");
- if (eqIdx === -1) continue;
-
- const key = text.substring(0, eqIdx).trim();
- if (!/^[A-Z_][A-Z0-9_]*$/.test(key)) continue;
-
- const afterEq = text.substring(eqIdx + 1);
- if (afterEq.length === 0) continue;
-
- const valueStartCol = eqIdx + 2;
- const firstChar = afterEq[0];
-
- if (firstChar === '"' || firstChar === "'") {
- let closed = false;
- for (let i = 1; i < afterEq.length; i++) {
- if (firstChar === '"' && afterEq[i] === "\\") {
- i++;
- continue;
- }
- if (afterEq[i] === firstChar) {
- ranges.push({
- range: {
- startLine: line,
- startCol: valueStartCol,
- endLine: line,
- endCol: eqIdx + 1 + i + 2,
- },
- key,
- closed: true,
- });
- closed = true;
- break;
- }
- }
- if (!closed) {
- inQuote = firstChar;
- current = { startLine: line, startCol: valueStartCol, key };
- }
- } else {
- ranges.push({
- range: {
- startLine: line,
- startCol: valueStartCol,
- endLine: line,
- endCol: text.length + 1,
- },
- key,
- closed: true,
- });
- }
- }
-
- if (inQuote && current) {
- const lastLine = lineCount;
- const { startLine, startCol, key } = current;
- ranges.push({
- range: {
- startLine,
- startCol,
- endLine: lastLine,
- endCol: model.getLineContent(lastLine).length + 1,
- },
- key,
- closed: false,
- });
- }
-
- return ranges;
-}
+/** Keys the GitHub push picks up. */
+const PUSHED_KEY = /^[A-Z_][A-Z0-9_]*$/;
/**
- * String-based clone of `getValueRanges` that does NOT need a Monaco model.
- * Required so we can pre-mask the initial `value` synchronously, before
- * Monaco mounts, ensuring plaintext never appears in the DOM.
- *
- * MUST stay in lockstep with `getValueRanges`. There is a dev-mode runtime
- * assertion (see `assertParserParity`) that compares the two.
+ * Value ranges for the GitHub push and the ⌘K search, read by the same parser as the table
+ * and the .env view (`env-doc.ts`), so they all agree on where a value starts and ends (an
+ * unclosed quote, for one, is a one-line value). `KEY=` with nothing after it has no range.
*/
-export function parseValueRangesFromString(text: string): ParsedSecret[] {
- const lines = text.split("\n");
- const ranges: ParsedSecret[] = [];
-
- let inQuote: string | null = null;
- let current: { startLine: number; startCol: number; key: string } | null =
- null;
-
- for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
- const line = lineIdx + 1;
- const lineText = lines[lineIdx];
-
- if (inQuote) {
- for (let i = 0; i < lineText.length; i++) {
- if (inQuote === '"' && lineText[i] === "\\") {
- i++;
- continue;
- }
- if (lineText[i] === inQuote) {
- const { startLine, startCol, key } = current!;
- ranges.push({
- range: {
- startLine,
- startCol,
- endLine: line,
- endCol: i + 2,
- },
- key,
- closed: true,
- });
- inQuote = null;
- current = null;
- break;
- }
- }
- continue;
- }
-
- const trimmed = lineText.trim();
- if (trimmed === "" || trimmed.startsWith("#")) continue;
-
- const eqIdx = lineText.indexOf("=");
- if (eqIdx === -1) continue;
-
- const key = lineText.substring(0, eqIdx).trim();
- if (!/^[A-Z_][A-Z0-9_]*$/.test(key)) continue;
-
- const afterEq = lineText.substring(eqIdx + 1);
- if (afterEq.length === 0) continue;
-
- const valueStartCol = eqIdx + 2;
- const firstChar = afterEq[0];
-
- if (firstChar === '"' || firstChar === "'") {
- let closed = false;
- for (let i = 1; i < afterEq.length; i++) {
- if (firstChar === '"' && afterEq[i] === "\\") {
- i++;
- continue;
- }
- if (afterEq[i] === firstChar) {
- ranges.push({
- range: {
- startLine: line,
- startCol: valueStartCol,
- endLine: line,
- endCol: eqIdx + 1 + i + 2,
- },
- key,
- closed: true,
- });
- closed = true;
- break;
- }
- }
- if (!closed) {
- inQuote = firstChar;
- current = { startLine: line, startCol: valueStartCol, key };
- }
- } else {
- ranges.push({
- range: {
- startLine: line,
- startCol: valueStartCol,
- endLine: line,
- endCol: lineText.length + 1,
- },
- key,
- closed: true,
- });
- }
- }
-
- if (inQuote && current) {
- const lastLine = lines.length;
- const { startLine, startCol, key } = current;
- ranges.push({
+export function parseValueRangesFromString(
+ text: string,
+ keyPattern = PUSHED_KEY,
+): ParsedSecret[] {
+ const doc = parseEnv(text);
+ return doc.secrets
+ .filter((s) => s.raw !== "" && keyPattern.test(s.key))
+ .map((s) => ({
+ key: s.key,
+ closed: true,
range: {
- startLine,
- startCol,
- endLine: lastLine,
- endCol: lines[lastLine - 1].length + 1,
+ startLine: s.start + 1,
+ startCol: s.valueCol + 1,
+ endLine: s.end + 1,
+ endCol: doc.lines[s.end].length - s.tail.length + 1,
},
- key,
- closed: false,
- });
- }
-
- return ranges;
+ }));
}
-/**
- * Convert (line, col) 1-based positions into a flat string offset against
- * a `\n`-joined text buffer. Mirrors how Monaco offsets work for the model
- * we use (we ignore CRLF — Monaco normalizes on paste).
- */
+/** 1-based (line, col) to an offset in the `\n`-joined text with these line lengths. */
export function lineColToOffset(
lineLengths: number[],
line: number,
@@ -286,170 +53,3 @@ export function lineColToOffset(
}
return offset + (col - 1);
}
-
-export function bulletsForSubstring(s: string): string {
- return s.replace(/[^\n]/g, BULLET);
-}
-
-/**
- * Parse `text`, then replace each value range with same-width bullet
- * placeholders (preserving newlines inside multiline quoted values).
- * Returns the masked string AND the per-range originals so callers can
- * stash them keyed by decoration id after the editor mounts.
- */
-export function maskText(text: string): MaskResult {
- const parsed = parseValueRangesFromString(text);
- if (parsed.length === 0) {
- return { masked: text, entries: [] };
- }
-
- const lines = text.split("\n");
- const lineLengths = lines.map((l) => l.length);
-
- const sorted = [...parsed].sort((a, b) => {
- if (a.range.startLine !== b.range.startLine)
- return a.range.startLine - b.range.startLine;
- return a.range.startCol - b.range.startCol;
- });
-
- const out: string[] = [];
- const entries: MaskEntry[] = [];
- let cursor = 0;
-
- for (const p of sorted) {
- const r = p.range;
- const start = lineColToOffset(lineLengths, r.startLine, r.startCol);
- const end = lineColToOffset(lineLengths, r.endLine, r.endCol);
- if (start < cursor) continue;
- out.push(text.slice(cursor, start));
- const original = text.slice(start, end);
- out.push(bulletsForSubstring(original));
- entries.push({ range: r, original, key: p.key });
- cursor = end;
- }
- out.push(text.slice(cursor));
-
- return { masked: out.join(""), entries };
-}
-
-/**
- * Dev-only sanity check: confirm `parseValueRangesFromString` agrees with
- * `getValueRanges` for the given model. Catches drift between the two
- * implementations early. No-op in production.
- */
-export function assertParserParity(model: Monaco.editor.ITextModel): void {
- if (!import.meta.env?.DEV) return;
- try {
- const fromModel = getValueRanges(model);
- const fromString = parseValueRangesFromString(model.getValue());
- if (fromModel.length !== fromString.length) {
- console.warn("[BaseFileEditor] parser parity mismatch: lengths differ", {
- fromModel,
- fromString,
- });
- return;
- }
- for (let i = 0; i < fromModel.length; i++) {
- if (
- !rangesEqual(fromModel[i].range, fromString[i].range) ||
- fromModel[i].closed !== fromString[i].closed
- ) {
- console.warn("[BaseFileEditor] parser parity mismatch at index", i, {
- fromModel: fromModel[i],
- fromString: fromString[i],
- });
- return;
- }
- }
- } catch (err) {
- console.warn("[BaseFileEditor] parser parity check failed", err);
- }
-}
-
-export function posInRange(
- pos: { lineNumber: number; column: number },
- r: ValueRange,
-): boolean {
- if (pos.lineNumber < r.startLine || pos.lineNumber > r.endLine) return false;
- if (pos.lineNumber === r.startLine && pos.column < r.startCol) return false;
- if (pos.lineNumber === r.endLine && pos.column >= r.endCol) return false;
- return true;
-}
-
-export function selectionTouchesRange(
- sel: MonacoSelectionLike,
- r: ValueRange,
-): boolean {
- const selStartBeforeOrAtRangeEnd =
- sel.startLineNumber < r.endLine ||
- (sel.startLineNumber === r.endLine && sel.startColumn <= r.endCol);
- const selEndAfterOrAtRangeStart =
- sel.endLineNumber > r.startLine ||
- (sel.endLineNumber === r.startLine && sel.endColumn >= r.startCol);
- return selStartBeforeOrAtRangeEnd && selEndAfterOrAtRangeStart;
-}
-
-export function rangesEqual(a: ValueRange, b: ValueRange): boolean {
- return (
- a.startLine === b.startLine &&
- a.startCol === b.startCol &&
- a.endLine === b.endLine &&
- a.endCol === b.endCol
- );
-}
-
-/** Group = max run of non-blank lines containing ≥1 KEY=VALUE pair, bounded by blank lines or file edges. */
-export function getValueGroups(
- model: Monaco.editor.ITextModel,
- parsed: ParsedSecret[],
-): ValueGroup[] {
- const lineCount = model.getLineCount();
- const ranges = parsed.map((p) => p.range);
- const linesWithValues = new Set();
- for (const r of ranges) {
- for (let l = r.startLine; l <= r.endLine; l++) linesWithValues.add(l);
- }
-
- const groups: ValueGroup[] = [];
- let blockStart: number | null = null;
- let blockEnd = 0;
- let blockHasValue = false;
-
- const flush = () => {
- if (blockStart !== null && blockHasValue) {
- const start = blockStart;
- const end = blockEnd;
- groups.push({
- startLine: start,
- endLine: end,
- ranges: ranges.filter((r) => r.startLine >= start && r.endLine <= end),
- });
- }
- blockStart = null;
- blockHasValue = false;
- };
-
- for (let line = 1; line <= lineCount; line++) {
- const text = model.getLineContent(line);
- if (text.trim() === "") {
- flush();
- continue;
- }
- if (blockStart === null) blockStart = line;
- blockEnd = line;
- if (linesWithValues.has(line)) blockHasValue = true;
- }
- flush();
-
- return groups;
-}
-
-export function stripQuotes(text: string): string {
- if (text.length < 2) return text;
- const first = text[0];
- const last = text[text.length - 1];
- if ((first === '"' || first === "'") && first === last) {
- return text.slice(1, -1);
- }
- return text;
-}
diff --git a/apps/web/src/lib/secrets/monaco/secretMasking.ts b/apps/web/src/lib/secrets/monaco/secretMasking.ts
index c965a0dc..ad287712 100644
--- a/apps/web/src/lib/secrets/monaco/secretMasking.ts
+++ b/apps/web/src/lib/secrets/monaco/secretMasking.ts
@@ -1,1280 +1,732 @@
import type * as Monaco from "monaco-editor";
+import { toast } from "svelte-sonner";
import type { ProjectRevealOn } from "$lib/auth/domain/project-settings";
-import { assembleRealText, sliceRealByMonacoRange } from "./assembler";
-import {
- assertParserParity,
- bulletsForSubstring,
- getValueGroups,
- getValueRanges,
- maskText,
- posInRange,
- selectionTouchesRange,
- stripQuotes,
- type MaskEntry,
- type MaskResult,
- type ParsedSecret,
- type ValueGroup,
- type ValueRange,
-} from "./parser";
-
-const TOOLTIP_DEFAULT_TEXT = "Click to copy";
+import { parseEnv, peek, type EnvDoc } from "$lib/secrets/env-doc";
/**
- * Monaco's runtime TextModel exposes `changeDecorations`, but the public
- * `ITextModel` typings omit it.
+ * Masking for the .env editor. A masked value is not in the Monaco model at all: its line ends
+ * right after `KEY=` and a zero-width tracking decoration ("anchor") marks where the value
+ * goes, with a fixed mask injected there (the peek, or 8 bullets in Hidden mode). The page
+ * therefore never holds a masked value, its length or its line count. Revealing (caret or
+ * hover in Peek mode, or typing a new value) puts the text back into the model.
+ *
+ * The editor stands for `real`, the plain text: the model with every hidden value put back.
+ * Undo/redo work on `real` snapshots, because the model is rewritten as values hide and show.
*/
-type TextModelWithChangeDecorations = Monaco.editor.ITextModel & {
+
+type Editor = Monaco.editor.IStandaloneCodeEditor;
+type Model = Monaco.editor.ITextModel;
+/** The runtime model has `changeDecorations`; the public typings omit it. */
+type DecoratableModel = Model & {
changeDecorations(
- callback: (accessor: {
- changeDecoration(id: string, newRange: Monaco.IRange): void;
+ fn: (accessor: {
+ changeDecoration(id: string, range: Monaco.IRange): void;
}) => void,
): void;
};
-interface UseSecretMaskingArgs {
- value: string;
- onChange: (value: string) => void;
- revealOn: ProjectRevealOn;
-}
+const TOOLTIP = "Click to copy";
+const HIDDEN_HINT =
+ "Values are hidden in this project. Edit them in the table view.";
-interface SecretMaskingResult {
- maskedInitialValue: string;
- handleEditorMount: (
- editor: Monaco.editor.IStandaloneCodeEditor,
- monaco: typeof Monaco,
- ) => void;
- syncExternalValue: (value: string, revealOn: ProjectRevealOn) => void;
- setOnChange: (onChange: (value: string) => void) => void;
- dispose: () => void;
+interface Span {
+ startLineNumber: number;
+ startColumn: number;
+ endLineNumber: number;
+ endColumn: number;
}
-export function createSecretMasking({
- value,
- onChange,
- revealOn,
-}: UseSecretMaskingArgs): SecretMaskingResult {
- const editorRef = {
- current: null as Monaco.editor.IStandaloneCodeEditor | null,
- };
- const monacoRef = { current: null as typeof Monaco | null };
- const decorationsRef = {
- current: null as Monaco.editor.IEditorDecorationsCollection | null,
- };
- const flashDecorationsRef = {
- current: null as Monaco.editor.IEditorDecorationsCollection | null,
- };
- const tooltipRef = { current: null as HTMLDivElement | null };
- const hoveredDecIdRef = { current: null as string | null };
- const groupZoneIdsRef = { current: [] as string[] };
- const groupZoneMapRef = {
- current: new Map(),
+/** A value and whatever follows it on its last line (`"…" # note`), in 1-based coordinates. */
+function valueSpan(doc: EnvDoc, index: number): Span | null {
+ const s = doc.secrets[index];
+ if (!`${s.raw}${s.tail}`.trim()) return null;
+ return {
+ startLineNumber: s.start + 1,
+ startColumn: s.valueCol + 1,
+ endLineNumber: s.end + 1,
+ endColumn: doc.lines[s.end].length + 1,
};
+}
- const hoverRevealedDecIdRef = { current: null as string | null };
- const caretRevealedDecIdsRef = { current: new Set() };
-
- const trackingDecorationIdsRef = { current: new Set() };
- const decorationToRealRef = { current: new Map() };
+/** `text` with every value removed, plus where each one was and what it was. */
+function hideAll(text: string) {
+ const doc = parseEnv(text);
+ const lines: string[] = [];
+ const slots: { line: number; column: number; text: string }[] = [];
+ const at = new Map(doc.secrets.map((s, i) => [s.start, i]));
+ for (let i = 0; i < doc.lines.length; i++) {
+ const index = at.get(i);
+ const span = index === undefined ? null : valueSpan(doc, index);
+ if (index === undefined || !span) {
+ lines.push(doc.lines[i]);
+ continue;
+ }
+ const s = doc.secrets[index];
+ const first = doc.lines[i];
+ lines.push(first.slice(0, s.valueCol));
+ slots.push({
+ line: lines.length,
+ column: s.valueCol + 1,
+ text: [
+ first.slice(s.valueCol),
+ ...doc.lines.slice(i + 1, s.end + 1),
+ ].join(doc.eol),
+ });
+ i = s.end;
+ }
+ return { masked: lines.join(doc.eol), slots, eol: doc.eol };
+}
- // Pre-edit offset snapshot per tracking decoration. Refreshed after every
- // internal edit (ingest, expand/collapse, mask-after-typing, drift
- // reconcile, initial mount) so that the NEXT user-driven keystroke's
- // change events can be mapped onto the right slot inside each stored real
- // value.
- const decorationPreEditOffsetsRef = {
- current: new Map(),
- };
+/** The value as the app uses it (quotes stripped, escapes resolved). */
+function decode(valueText: string): string {
+ return parseEnv(`K=${valueText}`).secrets[0]?.value ?? "";
+}
- // Re-entrancy counter. depth > 0 means "this content change is ours".
- const internalEditDepthRef = { current: 0 };
+function touches(sel: Monaco.Selection, r: Span): boolean {
+ const before =
+ sel.startLineNumber < r.endLineNumber ||
+ (sel.startLineNumber === r.endLineNumber && sel.startColumn <= r.endColumn);
+ const after =
+ sel.endLineNumber > r.startLineNumber ||
+ (sel.endLineNumber === r.startLineNumber && sel.endColumn >= r.startColumn);
+ return before && after;
+}
- const lastParentValueRef = { current: value };
+export function createSecretMasking({
+ value,
+ onChange,
+ revealOn,
+}: {
+ value: string;
+ onChange: (value: string) => void;
+ revealOn: ProjectRevealOn;
+}) {
+ const plain = revealOn === "always";
+ // Peek mode shows a value while the caret is in it or the pointer is on its line.
+ const reveals = revealOn === "hover";
+
+ let editor: Editor | null = null;
+ let monaco: typeof Monaco | null = null;
+ let emit = onChange;
+ let real = value;
+ let lastEmitted = value;
+
+ const tracked = new Set();
+ /** Text of each hidden value, by anchor decoration. */
+ const hidden = new Map();
+ /** Values currently in the model (revealed or being typed). */
+ const shown = new Set();
+ /** Values typed in this session: shown while the caret is in them, in every mode. */
+ const fresh = new Set();
+ let hoverId: string | null = null;
+ let internal = 0;
+ let masks: Monaco.editor.IEditorDecorationsCollection | null = null;
+ let flashes: Monaco.editor.IEditorDecorationsCollection | null = null;
+ let tooltip: HTMLDivElement | null = null;
+ let tooltipTimer: number | null = null;
+ let zoneIds: string[] = [];
+ const zones = new Map string; pill: HTMLElement }>();
+ /** Anchor offsets before the next user edit, to tell deleted values apart. */
+ let anchorsBefore = new Map();
+ let past: string[] = [];
+ let future: string[] = [];
+ let lastEditAt = 0;
+ const disposers: (() => void)[] = [];
+
+ const maskedInitialValue = plain ? value : hideAll(value).masked;
+
+ const model = () => editor?.getModel() ?? null;
+ const rangeOf = (id: string) => model()?.getDecorationRange(id) ?? null;
+ const isEmpty = (r: Span) =>
+ r.startLineNumber === r.endLineNumber && r.startColumn === r.endColumn;
+
+ function quietly(fn: () => void) {
+ internal++;
+ try {
+ fn();
+ } finally {
+ internal--;
+ }
+ }
- const pendingInitialMaskRef = { current: null as MaskResult | null };
+ function setRange(id: string, range: Span) {
+ (model() as DecoratableModel | null)?.changeDecorations((a) =>
+ a.changeDecoration(id, range),
+ );
+ }
- const onChangeRef = { current: onChange };
- const lastEmittedValueRef = { current: value };
+ function track(range: Span): string {
+ const [id] = editor!.deltaDecorations(
+ [],
+ [
+ {
+ range,
+ options: {
+ stickiness:
+ monaco!.editor.TrackedRangeStickiness
+ .AlwaysGrowsWhenTypingAtEdges,
+ },
+ },
+ ],
+ );
+ tracked.add(id);
+ return id;
+ }
- const revealOnRef = { current: revealOn };
- // Pre-mount masking: synchronously mask `value` BEFORE Monaco mounts,
- // so plaintext never enters the DOM, not even for one frame.
- const maskedInitialValue = (() => {
- if (revealOn === "always") {
- pendingInitialMaskRef.current = null;
- lastParentValueRef.current = value;
- return value;
- }
- const result = maskText(value);
- pendingInitialMaskRef.current = result;
- lastParentValueRef.current = value;
- return result.masked;
- })();
+ function untrack(id: string) {
+ editor?.deltaDecorations([id], []);
+ tracked.delete(id);
+ hidden.delete(id);
+ shown.delete(id);
+ fresh.delete(id);
+ if (hoverId === id) hoverId = null;
+ }
- const tooltipResetTimerRef = { current: null as number | null };
+ /** The plain text: the model with every hidden value put back. */
+ function assemble(from?: Span): string {
+ const m = model();
+ if (!m) return real;
+ const start = from
+ ? m.getOffsetAt({
+ lineNumber: from.startLineNumber,
+ column: from.startColumn,
+ })
+ : 0;
+ const end = from
+ ? m.getOffsetAt({
+ lineNumber: from.endLineNumber,
+ column: from.endColumn,
+ })
+ : m.getValueLength();
+ let text = m.getValue().slice(start, end);
+ const inside: { offset: number; text: string }[] = [];
+ for (const [id, t] of hidden) {
+ const r = rangeOf(id);
+ const offset = r ? m.getOffsetAt(r.getStartPosition()) - start : -1;
+ if (offset >= 0 && offset <= end - start)
+ inside.push({ offset, text: t });
+ }
+ // Back to front, so earlier offsets stay valid.
+ for (const x of inside.sort((a, b) => b.offset - a.offset))
+ text = text.slice(0, x.offset) + x.text + text.slice(x.offset);
+ return text;
+ }
- const getExpandedIds = (): Set => {
- const ids = new Set(caretRevealedDecIdsRef.current);
- if (hoverRevealedDecIdRef.current) ids.add(hoverRevealedDecIdRef.current);
- return ids;
- };
+ /** Puts a hidden value back into the model. */
+ function show(id: string) {
+ const m = model();
+ const r = rangeOf(id);
+ const text = hidden.get(id);
+ if (!m || !r || text === undefined) return;
+ const pos = r.getStartPosition();
+ quietly(() =>
+ m.applyEdits([
+ {
+ range: monaco!.Range.fromPositions(pos),
+ text,
+ forceMoveMarkers: false,
+ },
+ ]),
+ );
+ const end = m.getPositionAt(m.getOffsetAt(pos) + text.length);
+ setRange(id, monaco!.Range.fromPositions(pos, end));
+ hidden.delete(id);
+ shown.add(id);
+ }
- const refreshMaskDecorations = () => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- const model = editor?.getModel();
- if (!editor || !monacoInstance || !model) return;
+ /** Takes a value out of the model again, re-reading where it starts and ends. */
+ function hide(id: string) {
+ const m = model();
+ const r = rangeOf(id);
+ if (!m || !r) return untrack(id);
+ const doc = parseEnv(m.getValue());
+ const index = doc.secrets.findIndex(
+ (s) => s.start + 1 === r.startLineNumber,
+ );
+ const span = index < 0 ? null : valueSpan(doc, index);
+ // No longer a value (e.g. its `=` was deleted): the text stays as typed.
+ if (!span) return untrack(id);
+ const text = m.getValueInRange(span);
+ quietly(() => m.applyEdits([{ range: span, text: "" }]));
+ setRange(
+ id,
+ monaco!.Range.fromPositions({
+ lineNumber: span.startLineNumber,
+ column: span.startColumn,
+ }),
+ );
+ hidden.set(id, text);
+ shown.delete(id);
+ fresh.delete(id);
+ }
- const expanded = getExpandedIds();
+ function refreshMasks() {
+ if (!editor || !monaco) return;
const decorations: Monaco.editor.IModelDeltaDecoration[] = [];
-
- for (const decId of trackingDecorationIdsRef.current) {
- if (expanded.has(decId)) continue;
- const range = model.getDecorationRange(decId);
- if (!range) continue;
- if (
- range.startLineNumber === range.endLineNumber &&
- range.startColumn === range.endColumn
- ) {
- continue;
- }
+ for (const [id, text] of hidden) {
+ const r = rangeOf(id);
+ if (!r) continue;
+ const p = reveals ? peek(decode(text)) : null;
decorations.push({
- range,
- options: { inlineClassName: "secret-masked" },
+ range: monaco.Range.fromPositions(r.getStartPosition()),
+ options: {
+ showIfCollapsed: true,
+ before: {
+ content: p ? `${p.head}••••••${p.tail}` : "••••••••",
+ inlineClassName: `secret-mask secret-mask-${p?.head.length ?? 0}`,
+ cursorStops: monaco.editor.InjectedTextCursorStops.Left,
+ },
+ },
});
}
+ if (!masks) masks = editor.createDecorationsCollection(decorations);
+ else masks.set(decorations);
+ }
- if (!decorationsRef.current) {
- decorationsRef.current = editor.createDecorationsCollection(decorations);
- } else {
- decorationsRef.current.set(decorations);
- }
- };
-
- const withInternalEdit = (fn: () => T): T => {
- internalEditDepthRef.current++;
- try {
- return fn();
- } finally {
- internalEditDepthRef.current--;
- }
- };
+ /** Shows exactly the values the caret is in (and the hovered one), hides the rest. */
+ function syncShown() {
+ if (!editor) return;
+ const selections = editor.getSelections() ?? [];
+ const want = new Set();
+ for (const id of tracked) {
+ if (!reveals && !fresh.has(id)) continue;
+ const r = rangeOf(id);
+ if (r && selections.some((sel) => touches(sel, r))) want.add(id);
+ }
+ if (reveals && hoverId && tracked.has(hoverId)) want.add(hoverId);
+ for (const id of [...shown]) if (!want.has(id)) hide(id);
+ for (const id of want) if (!shown.has(id)) show(id);
+ refreshMasks();
+ snapshotAnchors();
+ }
- const snapshotDecorationOffsets = () => {
- const model = editorRef.current?.getModel();
- const snap = decorationPreEditOffsetsRef.current;
- snap.clear();
- if (!model) return;
- for (const decId of trackingDecorationIdsRef.current) {
- const range = model.getDecorationRange(decId);
- if (!range) continue;
- const start = model.getOffsetAt({
- lineNumber: range.startLineNumber,
- column: range.startColumn,
- });
- const end = model.getOffsetAt({
- lineNumber: range.endLineNumber,
- column: range.endColumn,
+ function snapshotAnchors() {
+ const m = model();
+ anchorsBefore = new Map();
+ if (!m) return;
+ for (const id of hidden.keys()) {
+ const r = rangeOf(id);
+ if (!r) continue;
+ anchorsBefore.set(id, {
+ offset: m.getOffsetAt(r.getStartPosition()),
+ lineStart: m.getOffsetAt({ lineNumber: r.startLineNumber, column: 1 }),
});
- snap.set(decId, { start, length: end - start });
}
- };
-
- const applyTypingChangesToReal = (
- model: Monaco.editor.ITextModel,
- changes: Array<{
- rangeOffset: number;
- rangeLength: number;
- text: string;
- }>,
- ) => {
- const editor = editorRef.current;
- if (!editor || !model || changes.length === 0) return;
- const snap = decorationPreEditOffsetsRef.current;
- if (snap.size === 0) return;
- const expanded = getExpandedIds();
+ }
- const touched = new Map<
- string,
- Array<{ offsetWithin: number; rangeLength: number; text: string }>
- >();
- for (const [decId, { start: decStart, length: decLen }] of snap) {
- if (expanded.has(decId)) continue;
- const decEnd = decStart + decLen;
- const relevant: Array<{
- offsetWithin: number;
- rangeLength: number;
- text: string;
- }> = [];
- for (const ch of changes) {
- const chStart = ch.rangeOffset;
- const chEnd = ch.rangeOffset + ch.rangeLength;
- if (chStart >= decStart && chEnd <= decEnd) {
- relevant.push({
- offsetWithin: chStart - decStart,
- rangeLength: ch.rangeLength,
- text: ch.text,
- });
- }
- }
- if (relevant.length > 0) touched.set(decId, relevant);
+ /** Shows `text` from scratch: everything hidden, nothing shown. */
+ function render(text: string) {
+ const m = model();
+ if (!editor || !monaco || !m) return;
+ const view = editor.saveViewState();
+ const { masked, slots, eol } = hideAll(text);
+ for (const id of [...tracked]) untrack(id);
+ quietly(() => {
+ m.setValue(masked);
+ m.setEOL(
+ eol === "\r\n"
+ ? monaco!.editor.EndOfLineSequence.CRLF
+ : monaco!.editor.EndOfLineSequence.LF,
+ );
+ });
+ for (const slot of slots) {
+ const id = track(
+ monaco.Range.fromPositions({
+ lineNumber: slot.line,
+ column: slot.column,
+ }),
+ );
+ hidden.set(id, slot.text);
}
+ real = text;
+ if (view) editor.restoreViewState(view);
+ syncShown();
+ refreshZones();
+ }
- if (touched.size === 0) return;
-
- for (const [decId, decChanges] of touched) {
- const oldReal = decorationToRealRef.current.get(decId) ?? "";
- decChanges.sort((a, b) => b.offsetWithin - a.offsetWithin);
- let newReal = oldReal;
- for (const ch of decChanges) {
- newReal =
- newReal.slice(0, ch.offsetWithin) +
- ch.text +
- newReal.slice(ch.offsetWithin + ch.rangeLength);
- }
- decorationToRealRef.current.set(decId, newReal);
+ /** After a user edit: drop deleted values, pick up typed ones, keep the rest in place. */
+ function reconcile(
+ changes: readonly Monaco.editor.IModelContentChange[],
+ ): boolean {
+ const m = model();
+ if (!editor || !monaco || !m) return true;
+
+ // A value goes away with its line: the edit covered its key and its anchor.
+ for (const [id, a] of anchorsBefore) {
+ if (!hidden.has(id)) continue;
+ const deleted = changes.some(
+ (c) =>
+ c.rangeLength > 0 &&
+ c.rangeOffset <= a.lineStart &&
+ c.rangeOffset + c.rangeLength >= a.offset,
+ );
+ if (deleted) untrack(id);
}
- withInternalEdit(() => {
- const maskEdits: Array<{ range: Monaco.IRange; text: string }> = [];
- for (const decId of touched.keys()) {
- const postRange = model.getDecorationRange(decId);
- if (!postRange) continue;
- const real = decorationToRealRef.current.get(decId) ?? "";
- const expectedBullets = bulletsForSubstring(real);
- const currentText = model.getValueInRange(postRange);
- if (currentText === expectedBullets) continue;
- maskEdits.push({ range: postRange, text: expectedBullets });
+ // A hidden value is valid only at the very end of a `KEY=` line.
+ let doc = parseEnv(m.getValue());
+ for (const id of [...hidden.keys()]) {
+ const r = rangeOf(id);
+ if (!r) {
+ untrack(id);
+ continue;
}
- if (maskEdits.length > 0) {
- editor.executeEdits("mask-after-typing", maskEdits);
+ const s = doc.secrets.find((x) => x.start + 1 === r.startLineNumber);
+ const ok =
+ s &&
+ s.valueCol + 1 === r.startColumn &&
+ r.startColumn === m.getLineMaxColumn(r.startLineNumber);
+ if (ok) {
+ if (!isEmpty(r))
+ setRange(id, monaco.Range.fromPositions(r.getStartPosition()));
+ continue;
}
- });
- };
-
- const expandDecorationInModel = (decId: string) => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- const model = editor?.getModel();
- if (!editor || !monacoInstance || !model) return;
- const real = decorationToRealRef.current.get(decId);
- if (real == null) return;
- const range = model.getDecorationRange(decId);
- if (!range) return;
- const current = model.getValueInRange(range);
- if (current === real) return;
- if (current.length !== real.length) return;
- withInternalEdit(() => {
- editor.executeEdits("mask-expand", [
- {
- range,
- text: real,
- },
- ]);
- });
- snapshotDecorationOffsets();
- };
-
- const collapseDecorationInModel = (decId: string) => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- const model = editor?.getModel();
- if (!editor || !monacoInstance || !model) return;
- const range = model.getDecorationRange(decId);
- if (!range) return;
- const current = model.getValueInRange(range);
- if (current.length === 0) return;
- decorationToRealRef.current.set(decId, current);
- const bullets = bulletsForSubstring(current);
- if (current === bullets) return;
- withInternalEdit(() => {
- editor.executeEdits("mask-collapse", [
- {
- range,
- text: bullets,
- },
- ]);
- });
- snapshotDecorationOffsets();
- };
-
- const hideTooltip = () => {
- if (tooltipResetTimerRef.current !== null) {
- window.clearTimeout(tooltipResetTimerRef.current);
- tooltipResetTimerRef.current = null;
- }
- const tip = tooltipRef.current;
- if (tip && tip.style.display !== "none") {
- tip.style.display = "none";
- }
- hoveredDecIdRef.current = null;
- const revealedId = hoverRevealedDecIdRef.current;
- if (revealedId) {
- hoverRevealedDecIdRef.current = null;
- if (!caretRevealedDecIdsRef.current.has(revealedId)) {
- collapseDecorationInModel(revealedId);
+ // Text was typed or joined onto a hidden value. Peek mode reveals it in place; Hidden
+ // mode never reveals, so the edit is undone.
+ if (!reveals) return false;
+ show(id);
+ doc = parseEnv(m.getValue());
+ }
+
+ // Shown values follow their line; typed values start being tracked.
+ const claimed = new Set();
+ for (const id of [...shown]) {
+ const r = rangeOf(id);
+ const index = r
+ ? doc.secrets.findIndex((s) => s.start + 1 === r.startLineNumber)
+ : -1;
+ const span = index < 0 ? null : valueSpan(doc, index);
+ if (!span || claimed.has(index)) {
+ untrack(id);
+ continue;
}
- refreshMaskDecorations();
+ claimed.add(index);
+ setRange(id, span);
}
- };
-
- const showTooltipAtDecoration = (decId: string) => {
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!editor || !model) return;
-
- const range = model.getDecorationRange(decId);
- if (!range) return;
-
- const domNode = editor.getDomNode();
- if (!domNode) return;
-
- const visiblePos = editor.getScrolledVisiblePosition({
- lineNumber: range.startLineNumber,
- column: range.startColumn,
+ const anchored = new Set(
+ [...hidden.keys()].map((id) => rangeOf(id)?.startLineNumber),
+ );
+ doc.secrets.forEach((s, index) => {
+ const span = valueSpan(doc, index);
+ if (!span || claimed.has(index) || anchored.has(s.start + 1)) return;
+ const id = track(span);
+ shown.add(id);
+ fresh.add(id);
});
- if (!visiblePos) return;
- let tip = tooltipRef.current;
- if (!tip) {
- tip = document.createElement("div");
- tip.className = "secret-tooltip";
- tip.textContent = TOOLTIP_DEFAULT_TEXT;
- domNode.appendChild(tip);
- tooltipRef.current = tip;
- } else {
- if (tooltipResetTimerRef.current !== null) {
- window.clearTimeout(tooltipResetTimerRef.current);
- tooltipResetTimerRef.current = null;
- }
- if (tip.classList.contains("copied")) {
- tip.classList.remove("copied");
- }
- if (tip.textContent !== TOOLTIP_DEFAULT_TEXT) {
- tip.textContent = TOOLTIP_DEFAULT_TEXT;
- }
- }
-
- if (tip.style.display === "none") tip.style.display = "";
- tip.style.transform = `translate3d(${visiblePos.left}px, ${visiblePos.top}px, 0) translateY(-100%) translateY(-6px)`;
- };
-
- const flashTooltipCopied = () => {
- const tip = tooltipRef.current;
- if (!tip) return;
- if (tooltipResetTimerRef.current !== null) {
- window.clearTimeout(tooltipResetTimerRef.current);
- }
- tip.classList.add("copied");
- tip.textContent = "Copied!";
- tooltipResetTimerRef.current = window.setTimeout(() => {
- tooltipResetTimerRef.current = null;
- const t = tooltipRef.current;
- if (t) {
- t.classList.remove("copied");
- t.textContent = TOOLTIP_DEFAULT_TEXT;
- }
- }, 1200);
- };
-
- const flashCopied = (rangesToFlash: Array<{ range: Monaco.IRange }>) => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- if (!editor || !monacoInstance || rangesToFlash.length === 0) return;
-
- // `secret-copied` is ONLY the green-flash animation (no bullet overlay).
- // We intentionally don't stack `secret-masked` here: the underlying
- // mask decoration already paints bullets for collapsed values, and
- // for group-copy flashes this range covers whole lines including
- // keys — masking those would briefly turn key names into dots.
- const decorations = rangesToFlash.map((entry) => ({
- range: entry.range,
- options: {
- inlineClassName: "secret-copied",
- },
- }));
-
- if (!flashDecorationsRef.current) {
- flashDecorationsRef.current =
- editor.createDecorationsCollection(decorations);
- } else {
- flashDecorationsRef.current.set(decorations);
- }
+ syncShown();
+ refreshZones();
+ return true;
+ }
- window.setTimeout(() => {
- if (flashDecorationsRef.current) {
- flashDecorationsRef.current.clear();
- }
- }, 1500);
- };
+ function commit(next: string) {
+ if (next === real) return;
+ const now = Date.now();
+ if (now - lastEditAt > 600 || !past.length) past.push(real);
+ if (past.length > 200) past.shift();
+ future = [];
+ lastEditAt = now;
+ real = next;
+ lastEmitted = next;
+ emit(next);
+ }
- const flashCopiedDecorations = (decIds: string[]) => {
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!model) return;
- const items: Array<{ range: Monaco.IRange }> = [];
- for (const id of decIds) {
- const r = model.getDecorationRange(id);
- if (r) items.push({ range: r });
- }
- flashCopied(items);
- };
+ function travel(from: string[], to: string[]) {
+ const next = from.pop();
+ if (next === undefined) return;
+ to.push(real);
+ render(next);
+ lastEmitted = next;
+ lastEditAt = 0;
+ emit(next);
+ }
- const copyGroup = (group: ValueGroup, pill: HTMLElement) => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- if (!editor || !monacoInstance) return;
- const model = editor.getModel();
- if (!model) return;
+ function hideTooltip() {
+ if (tooltip) tooltip.style.display = "none";
+ }
- const realFile = assembleRealText(
- model,
- decorationToRealRef.current,
- getExpandedIds(),
- monacoInstance,
- );
- const realLines = realFile.split("\n");
- const text = realLines.slice(group.startLine - 1, group.endLine).join("\n");
+ function showTooltip(id: string, text = TOOLTIP) {
+ const r = rangeOf(id);
+ const dom = editor?.getDomNode();
+ if (!editor || !r || !dom) return;
+ const pos = editor.getScrolledVisiblePosition(r.getStartPosition());
+ if (!pos) return;
+ if (!tooltip) {
+ tooltip = document.createElement("div");
+ tooltip.className = "secret-tooltip";
+ dom.appendChild(tooltip);
+ }
+ tooltip.textContent = text;
+ tooltip.classList.toggle("copied", text !== TOOLTIP);
+ tooltip.style.display = "";
+ tooltip.style.transform = `translate3d(${pos.left}px, ${pos.top}px, 0) translateY(-100%) translateY(-6px)`;
+ }
- if (navigator.clipboard?.writeText) {
- navigator.clipboard.writeText(text).catch(() => {});
+ function idOnLine(line: number): string | null {
+ for (const id of tracked) {
+ const r = rangeOf(id);
+ if (r && line >= r.startLineNumber && line <= r.endLineNumber) return id;
}
+ return null;
+ }
- const original = pill.textContent;
- pill.classList.add("copied");
- pill.textContent = "Copied!";
- window.setTimeout(() => {
- if (pill.isConnected) {
- pill.classList.remove("copied");
- pill.textContent = original;
- }
- }, 1200);
-
- flashCopied([
- {
- range: new monacoInstance.Range(
- group.startLine,
- 1,
- group.endLine,
- model.getLineMaxColumn(group.endLine),
- ),
- },
- ]);
- };
-
- const applyGroupZones = (groups: ValueGroup[]) => {
- const editor = editorRef.current;
+ function flash(range: Span) {
if (!editor) return;
+ const d = [{ range, options: { inlineClassName: "secret-copied" } }];
+ if (!flashes) flashes = editor.createDecorationsCollection(d);
+ else flashes.set(d);
+ window.setTimeout(() => flashes?.clear(), 1500);
+ }
- const groupsToShow = groups.filter((g) => g.ranges.length >= 2);
+ function copyValue(id: string) {
+ const r = rangeOf(id);
+ const m = model();
+ if (!r || !m) return;
+ const text = hidden.get(id) ?? m.getValueInRange(r);
+ void navigator.clipboard?.writeText(decode(text)).catch(() => {});
+ if (!isEmpty(r)) flash(r);
+ showTooltip(id, "Copied!");
+ if (tooltipTimer !== null) window.clearTimeout(tooltipTimer);
+ tooltipTimer = window.setTimeout(() => {
+ tooltipTimer = null;
+ if (hoverId === id || idOnLine(r.startLineNumber) === id) showTooltip(id);
+ }, 1200);
+ }
+ /** "Copy whole group" above every group with two or more values. */
+ function refreshZones() {
+ const m = model();
+ if (!editor || !m) return;
+ const groups = parseEnv(m.getValue()).groups.filter(
+ (g) => g.secrets.length >= 2,
+ );
editor.changeViewZones((accessor) => {
- for (const id of groupZoneIdsRef.current) {
- accessor.removeZone(id);
- }
- groupZoneIdsRef.current = [];
- groupZoneMapRef.current.clear();
-
- for (const group of groupsToShow) {
- const zoneNode = document.createElement("div");
- zoneNode.className = "secret-group-zone";
-
+ for (const id of zoneIds) accessor.removeZone(id);
+ zoneIds = [];
+ zones.clear();
+ for (const g of groups) {
+ const node = document.createElement("div");
+ node.className = "secret-group-zone";
const pill = document.createElement("span");
pill.className = "secret-group-pill";
pill.textContent = "Copy whole group";
-
- zoneNode.appendChild(pill);
-
+ node.appendChild(pill);
const id = accessor.addZone({
- afterLineNumber: group.startLine - 1,
+ afterLineNumber: g.start,
heightInPx: 22,
- domNode: zoneNode,
+ domNode: node,
suppressMouseDown: true,
});
- groupZoneIdsRef.current.push(id);
- groupZoneMapRef.current.set(id, { group, pill });
- }
- });
- };
-
- const clearGroupZones = () => {
- const editor = editorRef.current;
- if (!editor) return;
- editor.changeViewZones((accessor) => {
- for (const id of groupZoneIdsRef.current) {
- accessor.removeZone(id);
- }
- groupZoneIdsRef.current = [];
- groupZoneMapRef.current.clear();
- });
- };
-
- const recomputeInFlightRef = { current: false };
-
- const recomputeCaretReveals = () => {
- // tight: never reveal via caret; yolo: hook not wired.
- if (revealOnRef.current !== "hover") return;
- if (recomputeInFlightRef.current) return;
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!editor || !model) return;
-
- recomputeInFlightRef.current = true;
- try {
- const selections = editor.getSelections() ?? [];
- const next = new Set();
-
- for (const decId of trackingDecorationIdsRef.current) {
- const range = model.getDecorationRange(decId);
- if (!range) continue;
- const rValueRange: ValueRange = {
- startLine: range.startLineNumber,
- startCol: range.startColumn,
- endLine: range.endLineNumber,
- endCol: range.endColumn,
+ const span: Span = {
+ startLineNumber: g.start + 1,
+ startColumn: 1,
+ endLineNumber: g.end + 1,
+ endColumn: m.getLineMaxColumn(g.end + 1),
};
- for (const sel of selections) {
- if (selectionTouchesRange(sel, rValueRange)) {
- next.add(decId);
- break;
- }
- }
- }
-
- const prev = caretRevealedDecIdsRef.current;
- let unchanged = false;
- if (prev.size === next.size) {
- unchanged = true;
- for (const id of prev) {
- if (!next.has(id)) {
- unchanged = false;
- break;
- }
- }
- }
-
- if (!unchanged) {
- const hoverId = hoverRevealedDecIdRef.current;
- for (const id of prev) {
- if (!next.has(id) && id !== hoverId) {
- collapseDecorationInModel(id);
- }
- }
- for (const id of next) {
- if (!prev.has(id)) {
- expandDecorationInModel(id);
- }
- }
-
- caretRevealedDecIdsRef.current = next;
- refreshMaskDecorations();
- }
- } finally {
- recomputeInFlightRef.current = false;
- }
- };
-
- const findOverlappingTrackingDecoration = (
- model: Monaco.editor.ITextModel,
- parsedRange: ValueRange,
- ): string | null => {
- for (const decId of trackingDecorationIdsRef.current) {
- const r = model.getDecorationRange(decId);
- if (!r) continue;
- if (
- r.startLineNumber === r.endLineNumber &&
- r.startColumn === r.endColumn
- ) {
- continue;
- }
- if (
- r.startLineNumber > parsedRange.endLine ||
- r.endLineNumber < parsedRange.startLine
- ) {
- continue;
- }
- return decId;
- }
- return null;
- };
-
- const applySecretDecorations = () => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- const model = editor?.getModel();
- if (!editor || !monacoInstance || !model) return;
-
- assertParserParity(model);
-
- const parsed = getValueRanges(model);
- const expanded = getExpandedIds();
-
- const toIngest: ParsedSecret[] = [];
- for (const pr of parsed) {
- const existing = findOverlappingTrackingDecoration(model, pr.range);
- if (existing == null) toIngest.push(pr);
- }
-
- if (toIngest.length > 0) {
- const ingestPlan: Array<{
- range: ValueRange;
- original: string;
- key: string;
- }> = [];
- for (const pr of toIngest) {
- const r = pr.range;
- const monacoRange = new monacoInstance.Range(
- r.startLine,
- r.startCol,
- r.endLine,
- r.endCol,
- );
- const original = model.getValueInRange(monacoRange);
- ingestPlan.push({ range: r, original, key: pr.key });
- }
-
- withInternalEdit(() => {
- const edits = ingestPlan.map(({ range, original }) => ({
- range: new monacoInstance.Range(
- range.startLine,
- range.startCol,
- range.endLine,
- range.endCol,
- ),
- text: bulletsForSubstring(original),
- }));
- editor.executeEdits("mask-ingest", edits);
-
- const newDecs = ingestPlan.map(({ range }) => ({
- range: new monacoInstance.Range(
- range.startLine,
- range.startCol,
- range.endLine,
- range.endCol,
- ),
- options: {
- stickiness:
- monacoInstance.editor.TrackedRangeStickiness
- ?.AlwaysGrowsWhenTypingAtEdges ?? 0,
+ zoneIds.push(id);
+ zones.set(id, {
+ pill,
+ text: () => {
+ flash(span);
+ return assemble(span);
},
- }));
- const newIds = editor.deltaDecorations([], newDecs);
- for (let i = 0; i < newIds.length; i++) {
- const id = newIds[i];
- trackingDecorationIdsRef.current.add(id);
- decorationToRealRef.current.set(id, ingestPlan[i].original);
- }
- });
- }
-
- const driftEdits: Array<{
- range: Monaco.Range;
- text: string;
- }> = [];
- const driftUpdates: Array<{
- decId: string;
- real: string;
- range: Monaco.Range;
- }> = [];
- for (const pr of parsed) {
- if (!pr.closed) continue;
- const decId = findOverlappingTrackingDecoration(model, pr.range);
- if (decId == null) continue;
- if (expanded.has(decId)) continue;
- const parsedRange = new monacoInstance.Range(
- pr.range.startLine,
- pr.range.startCol,
- pr.range.endLine,
- pr.range.endCol,
- );
- const curr = model.getValueInRange(parsedRange);
- if (curr.length === 0) continue;
- let pure = true;
- for (let i = 0; i < curr.length; i++) {
- const c = curr.charCodeAt(i);
- if (c !== 0x2022 && c !== 0x0a) {
- pure = false;
- break;
- }
- }
- if (pure) continue;
- const storedReal = decorationToRealRef.current.get(decId);
- const newReal =
- storedReal != null && storedReal.length === curr.length
- ? storedReal
- : curr;
- driftUpdates.push({ decId, real: newReal, range: parsedRange });
- driftEdits.push({
- range: parsedRange,
- text: bulletsForSubstring(newReal),
- });
- }
- if (driftEdits.length > 0) {
- withInternalEdit(() => {
- editor.executeEdits("mask-drift-reconcile", driftEdits);
- (model as TextModelWithChangeDecorations).changeDecorations(
- (accessor) => {
- for (const { decId, range } of driftUpdates) {
- accessor.changeDecoration(decId, range);
- }
- },
- );
- });
- for (const { decId, real } of driftUpdates) {
- decorationToRealRef.current.set(decId, real);
- }
- }
-
- // Range sync: snap every tracked decoration's range back to the
- // parser's canonical range for the value it covers. `AlwaysGrows`
- // stickiness will happily extend a decoration across a newline (e.g.
- // user hits Enter at the end of an unquoted value) — without this
- // step the decoration stays inflated and caret-reveal keeps thinking
- // the caret is still inside the value (because the inflated `endCol`
- // reaches wherever the caret went), so it never collapses back to
- // bullets.
- //
- // Expanded decorations are synced too: we only touch the range, not
- // the model text. For a collapsed decoration we also trim the stored
- // real to match the new length (typical excess is a trailing `\n`);
- // for an expanded decoration the model holds plaintext, so we take
- // the parsed text directly as the new real when lengths differ.
- const rangeSyncUpdates: Array<{
- decId: string;
- newRange: Monaco.Range;
- newReal: string;
- }> = [];
- for (const pr of parsed) {
- if (!pr.closed) continue;
- const decId = findOverlappingTrackingDecoration(model, pr.range);
- if (decId == null) continue;
- const decRange = model.getDecorationRange(decId);
- if (!decRange) continue;
- if (
- decRange.startLineNumber === pr.range.startLine &&
- decRange.startColumn === pr.range.startCol &&
- decRange.endLineNumber === pr.range.endLine &&
- decRange.endColumn === pr.range.endCol
- ) {
- continue;
- }
- const pRange = new monacoInstance.Range(
- pr.range.startLine,
- pr.range.startCol,
- pr.range.endLine,
- pr.range.endCol,
- );
- const parsedText = model.getValueInRange(pRange);
- const storedReal = decorationToRealRef.current.get(decId) ?? "";
- const isExpanded = expanded.has(decId);
- let newReal: string;
- if (isExpanded) {
- // Model holds the live value — trust it.
- newReal = parsedText;
- } else if (storedReal.length === parsedText.length) {
- newReal = storedReal;
- } else if (storedReal.length > parsedText.length) {
- // Trim trailing overflow (typical case: an inserted `\n`).
- newReal = storedReal.slice(0, parsedText.length);
- } else {
- // Stored is shorter than parsed: fall back to model text.
- newReal = parsedText;
- }
- rangeSyncUpdates.push({ decId, newRange: pRange, newReal });
- }
- if (rangeSyncUpdates.length > 0) {
- (model as TextModelWithChangeDecorations).changeDecorations(
- (accessor) => {
- for (const { decId, newRange } of rangeSyncUpdates) {
- accessor.changeDecoration(decId, newRange);
- }
- },
- );
- for (const { decId, newReal } of rangeSyncUpdates) {
- decorationToRealRef.current.set(decId, newReal);
- }
- }
-
- const decHasParsedOverlap = (r: {
- startLineNumber: number;
- endLineNumber: number;
- }): boolean => {
- for (const pr of parsed) {
- if (r.startLineNumber > pr.range.endLine) continue;
- if (r.endLineNumber < pr.range.startLine) continue;
- return true;
- }
- return false;
- };
-
- const toDrop: string[] = [];
- for (const decId of trackingDecorationIdsRef.current) {
- if (expanded.has(decId)) continue;
- const r = model.getDecorationRange(decId);
- if (!r) {
- toDrop.push(decId);
- continue;
- }
- const empty =
- r.startLineNumber === r.endLineNumber && r.startColumn === r.endColumn;
- if (empty || !decHasParsedOverlap(r)) {
- toDrop.push(decId);
- }
- }
-
- if (toDrop.length > 0) {
- editor.deltaDecorations(toDrop, []);
- for (const id of toDrop) {
- trackingDecorationIdsRef.current.delete(id);
- decorationToRealRef.current.delete(id);
+ });
}
- }
-
- refreshMaskDecorations();
- recomputeCaretReveals();
-
- const groups = getValueGroups(model, parsed);
- applyGroupZones(groups);
-
- snapshotDecorationOffsets();
- };
-
- const revealDecoration = (decId: string) => {
- // tight / yolo never hover-reveal.
- if (revealOnRef.current !== "hover") return;
- if (hoverRevealedDecIdRef.current === decId) return;
- const prev = hoverRevealedDecIdRef.current;
- if (prev && !caretRevealedDecIdsRef.current.has(prev)) {
- collapseDecorationInModel(prev);
- }
- hoverRevealedDecIdRef.current = decId;
- if (!caretRevealedDecIdsRef.current.has(decId)) {
- expandDecorationInModel(decId);
- }
- refreshMaskDecorations();
- };
-
- const findDecorationAtPosition = (pos: {
- lineNumber: number;
- column: number;
- }): string | null => {
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!model) return null;
- for (const decId of trackingDecorationIdsRef.current) {
- const r = model.getDecorationRange(decId);
- if (!r) continue;
- const valueRange: ValueRange = {
- startLine: r.startLineNumber,
- startCol: r.startColumn,
- endLine: r.endLineNumber,
- endCol: r.endColumn,
- };
- if (posInRange(pos, valueRange)) return decId;
- }
- return null;
- };
-
- const findDecorationOnLine = (line: number): string | null => {
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!model) return null;
- for (const decId of trackingDecorationIdsRef.current) {
- const r = model.getDecorationRange(decId);
- if (!r) continue;
- if (line >= r.startLineNumber && line <= r.endLineNumber) return decId;
- }
- return null;
- };
-
- const buildRealText = (): string => {
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
- const model = editor?.getModel();
- if (!model || !monacoInstance) return "";
- return assembleRealText(
- model,
- decorationToRealRef.current,
- getExpandedIds(),
- monacoInstance,
- );
- };
-
- const handleEditorChange = () => {
- if (internalEditDepthRef.current > 0) return;
- let out = buildRealText();
- out = out.replace(/\n*$/, "") + "\n";
- lastEmittedValueRef.current = out;
- onChangeRef.current(out);
- };
-
- const handleYoloChange = () => {
- const editor = editorRef.current;
- const model = editor?.getModel();
- if (!model) return;
- let out = model.getValue();
- out = out.replace(/\n*$/, "") + "\n";
- lastEmittedValueRef.current = out;
- onChangeRef.current(out);
- };
+ });
+ }
- const handleEditorMount = (
- editor: Monaco.editor.IStandaloneCodeEditor,
- monaco: typeof Monaco,
- ) => {
- editorRef.current = editor;
- monacoRef.current = monaco;
+ function copyZone(id: string) {
+ const zone = zones.get(id);
+ if (!zone) return;
+ void navigator.clipboard?.writeText(zone.text()).catch(() => {});
+ zone.pill.classList.add("copied");
+ zone.pill.textContent = "Copied!";
+ window.setTimeout(() => {
+ zone.pill.classList.remove("copied");
+ zone.pill.textContent = "Copy whole group";
+ }, 1200);
+ }
- if (revealOn === "always") {
- // yolo: plain text editor. No masking, no decorations, no listeners
- // beyond forwarding content changes to the parent.
- editor.onDidChangeModelContent(() => {
- handleYoloChange();
+ function handleEditorMount(e: Editor, m: typeof Monaco) {
+ editor = e;
+ monaco = m;
+ if (plain) {
+ const sub = e.onDidChangeModelContent(() => {
+ if (internal) return;
+ const next = e.getValue();
+ lastEmitted = next;
+ real = next;
+ emit(next);
});
+ disposers.push(() => sub.dispose());
return;
}
- const initial = pendingInitialMaskRef.current;
- pendingInitialMaskRef.current = null;
- if (initial && initial.entries.length > 0) {
- const decs = initial.entries.map((entry: MaskEntry) => ({
- range: new monaco.Range(
- entry.range.startLine,
- entry.range.startCol,
- entry.range.endLine,
- entry.range.endCol,
- ),
- options: {
- stickiness:
- monaco.editor.TrackedRangeStickiness
- ?.AlwaysGrowsWhenTypingAtEdges ?? 0,
- },
- }));
- const ids = editor.deltaDecorations([], decs);
- for (let i = 0; i < ids.length; i++) {
- trackingDecorationIdsRef.current.add(ids[i]);
- decorationToRealRef.current.set(ids[i], initial.entries[i].original);
- }
- editor.getModel()?.pushStackElement();
- }
+ render(value);
+ e.updateOptions({ emptySelectionClipboard: false, dragAndDrop: false });
- const model = editor.getModel();
- if (model) {
- const groups = getValueGroups(model, getValueRanges(model));
- applyGroupZones(groups);
- }
- refreshMaskDecorations();
-
- snapshotDecorationOffsets();
-
- editor.onDidChangeModelContent(
- (e: {
- changes?: Array<{
- rangeOffset: number;
- rangeLength: number;
- text: string;
- }>;
- }) => {
- if (internalEditDepthRef.current > 0) return;
- const m = editor.getModel();
- if (m && e?.changes) {
- applyTypingChangesToReal(m, e.changes);
- }
- applySecretDecorations();
- handleEditorChange();
- },
+ // The model is rewritten as values hide and show, so undo works on plain-text snapshots.
+ const { KeyMod, KeyCode } = m;
+ e.addCommand(KeyMod.CtrlCmd | KeyCode.KeyZ, () => travel(past, future));
+ e.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyZ, () =>
+ travel(future, past),
);
-
- const VIEW_ZONE_TARGET_TYPE =
- monaco.editor.MouseTargetType?.CONTENT_VIEW_ZONE ?? 8;
- const CONTENT_TEXT_TARGET_TYPE =
- monaco.editor.MouseTargetType?.CONTENT_TEXT ?? 6;
-
- let mouseDownInfo: {
- pos: { lineNumber: number; column: number };
- time: number;
- } | null = null;
- let mouseDownZoneId: string | null = null;
-
- editor.onMouseDown((e) => {
- if (e.target?.type === VIEW_ZONE_TARGET_TYPE) {
- mouseDownInfo = null;
- mouseDownZoneId = e.target.detail?.viewZoneId ?? null;
- return;
- }
-
- mouseDownZoneId = null;
- const pos = e.target?.position;
- if (!pos) {
- mouseDownInfo = null;
- return;
- }
- mouseDownInfo = { pos, time: Date.now() };
- });
-
- editor.onMouseUp((e) => {
- if (mouseDownZoneId !== null) {
- const downZoneId = mouseDownZoneId;
- mouseDownZoneId = null;
- if (
- e.target?.type === VIEW_ZONE_TARGET_TYPE &&
- e.target.detail?.viewZoneId === downZoneId
- ) {
- const entry = groupZoneMapRef.current.get(downZoneId);
- if (entry) copyGroup(entry.group, entry.pill);
+ e.addCommand(KeyMod.CtrlCmd | KeyCode.KeyY, () => travel(future, past));
+
+ const zoneOf = (t: Monaco.editor.IMouseTarget) =>
+ t.type === m.editor.MouseTargetType.CONTENT_VIEW_ZONE
+ ? t.detail.viewZoneId
+ : undefined;
+
+ const subs = [
+ e.onDidChangeModelContent((event) => {
+ if (internal) return;
+ if (reconcile(event.changes)) {
+ commit(assemble());
+ return;
}
- return;
- }
-
- if (!mouseDownInfo) return;
- const downInfo = mouseDownInfo;
- mouseDownInfo = null;
-
- const pos = e.target?.position;
- if (!pos) return;
-
- const samePos =
- pos.lineNumber === downInfo.pos.lineNumber &&
- pos.column === downInfo.pos.column;
- const fast = Date.now() - downInfo.time < 300;
-
- if (!samePos || !fast) return;
-
- const decId = findDecorationAtPosition(pos);
- if (!decId) return;
-
- const real = decorationToRealRef.current.get(decId);
- if (real == null) return;
- const toCopy = stripQuotes(real);
- if (navigator.clipboard?.writeText) {
- navigator.clipboard.writeText(toCopy).catch(() => {});
- }
- flashCopiedDecorations([decId]);
- flashTooltipCopied();
- });
-
- const editorDom = editor.getDomNode();
- let hoveredZoneId: string | null = null;
- editor.onMouseMove((e) => {
- const targetType = e.target?.type;
-
- if (targetType === VIEW_ZONE_TARGET_TYPE) {
- const zoneId: string | undefined = e.target.detail?.viewZoneId;
- if (zoneId && groupZoneMapRef.current.has(zoneId)) {
- if (zoneId !== hoveredZoneId) {
- if (hoveredZoneId) {
- groupZoneMapRef.current
- .get(hoveredZoneId)
- ?.pill.classList.remove("hover");
- }
- hoveredZoneId = zoneId;
- groupZoneMapRef.current.get(zoneId)?.pill.classList.add("hover");
- editorDom?.classList.add("secret-group-zone-hover");
- }
+ // Hidden mode: the edit touched a hidden value. Put the text back as it was.
+ const before = real;
+ queueMicrotask(() => render(before));
+ toast(HIDDEN_HINT, { id: "secrets-hidden-edit" });
+ }),
+ e.onDidChangeCursorSelection(() => {
+ if (!internal) syncShown();
+ }),
+ e.onMouseMove((event) => {
+ const dom = e.getDomNode();
+ const zone = zoneOf(event.target);
+ if (zone) {
+ dom?.classList.toggle("secret-group-zone-hover", zones.has(zone));
hideTooltip();
return;
}
- }
-
- if (hoveredZoneId) {
- groupZoneMapRef.current
- .get(hoveredZoneId)
- ?.pill.classList.remove("hover");
- hoveredZoneId = null;
- editorDom?.classList.remove("secret-group-zone-hover");
- }
-
- if (targetType !== CONTENT_TEXT_TARGET_TYPE) {
- hideTooltip();
- return;
- }
-
- const pos = e.target?.position;
- if (!pos) {
- hideTooltip();
- return;
- }
-
- const decId = findDecorationOnLine(pos.lineNumber);
- if (!decId) {
- hideTooltip();
- return;
- }
-
- if (hoveredDecIdRef.current === decId) return;
-
- hoveredDecIdRef.current = decId;
- // `tight` keeps the tooltip ("Click to copy") but never reveals.
- revealDecoration(decId);
- showTooltipAtDecoration(decId);
- });
-
- editor.onDidChangeCursorSelection(() => {
- recomputeCaretReveals();
- });
-
- editor.onDidScrollChange(() => {
- const id = hoveredDecIdRef.current;
- if (id) {
- showTooltipAtDecoration(id);
- } else if (
- tooltipRef.current &&
- tooltipRef.current.style.display !== "none"
- ) {
- tooltipRef.current.style.display = "none";
- }
- });
-
- const domNode = editor.getDomNode();
- if (domNode) {
- domNode.addEventListener("mouseleave", () => {
+ dom?.classList.remove("secret-group-zone-hover");
+ const line = event.target.position?.lineNumber;
+ const id = line ? idOnLine(line) : null;
+ if (!id) {
+ hideTooltip();
+ if (hoverId) {
+ hoverId = null;
+ syncShown();
+ }
+ return;
+ }
+ showTooltip(id);
+ // Multi-line values reveal on click only: showing them would move the lines under
+ // the pointer.
+ const r = rangeOf(id);
+ const oneLine =
+ r?.startLineNumber === r?.endLineNumber &&
+ !hidden.get(id)?.includes("\n");
+ const next = reveals && oneLine ? id : null;
+ if (hoverId !== next) {
+ hoverId = next;
+ syncShown();
+ }
+ }),
+ e.onMouseLeave(() => {
hideTooltip();
- domNode.classList.remove("secret-group-zone-hover");
- });
- }
-
- const handleCopy = (e: ClipboardEvent) => {
- const sel = editor.getSelection();
- if (!sel || sel.isEmpty()) return;
- const realFile = buildRealText();
- const realSliced = sliceRealByMonacoRange(realFile, sel);
- if (e.clipboardData) {
- e.clipboardData.setData("text/plain", realSliced);
- e.preventDefault();
- }
- };
-
- const handleCut = (e: ClipboardEvent) => {
- const sel = editor.getSelection();
- const m = editor.getModel();
- if (!sel || sel.isEmpty() || !m) return;
- const realFile = buildRealText();
- const realSliced = sliceRealByMonacoRange(realFile, sel);
- if (e.clipboardData) {
- e.clipboardData.setData("text/plain", realSliced);
- e.preventDefault();
- }
- withInternalEdit(() => {
- editor.executeEdits("clipboard-cut", [
- { range: sel, text: "", forceMoveMarkers: true },
- ]);
- });
- applySecretDecorations();
- handleEditorChange();
- };
-
- if (editorDom) {
- editorDom.addEventListener("copy", handleCopy as EventListener);
- editorDom.addEventListener("cut", handleCut as EventListener);
- }
- };
-
- function syncExternalValue(value: string, revealOn: ProjectRevealOn) {
- revealOnRef.current = revealOn;
- if (value === lastParentValueRef.current) return;
- if (value === lastEmittedValueRef.current) {
- lastParentValueRef.current = value;
- return;
- }
- lastParentValueRef.current = value;
- lastEmittedValueRef.current = value;
-
- const editor = editorRef.current;
- const monacoInstance = monacoRef.current;
-
- if (revealOn === "always") {
- if (!editor) return;
- const model = editor.getModel();
- if (!model) return;
- if (model.getValue() === value) return;
- withInternalEdit(() => {
- const fullRange = model.getFullModelRange();
- editor.executeEdits("external-value-reset", [
- { range: fullRange, text: value, forceMoveMarkers: true },
- ]);
- if (model.getValue() !== value) {
- model.setValue(value);
+ e.getDomNode()?.classList.remove("secret-group-zone-hover");
+ if (hoverId) {
+ hoverId = null;
+ syncShown();
}
- model.pushStackElement();
- });
- return;
- }
-
- if (!editor || !monacoInstance) {
- const result = maskText(value);
- pendingInitialMaskRef.current = result;
- return;
- }
-
- const model = editor.getModel();
- if (!model) return;
-
- hoverRevealedDecIdRef.current = null;
- caretRevealedDecIdsRef.current = new Set();
-
- const oldIds = Array.from(trackingDecorationIdsRef.current);
- if (oldIds.length > 0) {
- editor.deltaDecorations(oldIds, []);
- }
- trackingDecorationIdsRef.current.clear();
- decorationToRealRef.current.clear();
-
- const result = maskText(value);
-
- withInternalEdit(() => {
- const fullRange = model.getFullModelRange();
- editor.executeEdits("external-value-reset", [
- { range: fullRange, text: result.masked, forceMoveMarkers: true },
- ]);
- if (model.getValue() !== result.masked) {
- model.setValue(result.masked);
- }
-
- if (result.entries.length > 0) {
- const decs = result.entries.map((entry: MaskEntry) => ({
- range: new monacoInstance.Range(
- entry.range.startLine,
- entry.range.startCol,
- entry.range.endLine,
- entry.range.endCol,
- ),
- options: {
- stickiness:
- monacoInstance.editor.TrackedRangeStickiness
- ?.AlwaysGrowsWhenTypingAtEdges ?? 0,
- },
- }));
- const ids = editor.deltaDecorations([], decs);
- for (let i = 0; i < ids.length; i++) {
- trackingDecorationIdsRef.current.add(ids[i]);
- decorationToRealRef.current.set(ids[i], result.entries[i].original);
+ }),
+ ];
+
+ let down: {
+ line: number;
+ column: number;
+ at: number;
+ zone?: string;
+ } | null = null;
+ subs.push(
+ e.onMouseDown((event) => {
+ const zone = zoneOf(event.target);
+ const pos = event.target.position;
+ down = zone
+ ? { line: 0, column: 0, at: Date.now(), zone }
+ : pos
+ ? { line: pos.lineNumber, column: pos.column, at: Date.now() }
+ : null;
+ }),
+ e.onMouseUp((event) => {
+ const start = down;
+ down = null;
+ if (!start || Date.now() - start.at > 300) return;
+ if (start.zone) {
+ if (zoneOf(event.target) === start.zone) copyZone(start.zone);
+ return;
}
- }
-
- model.pushStackElement();
+ const pos = event.target.position;
+ if (
+ !pos ||
+ pos.lineNumber !== start.line ||
+ pos.column !== start.column
+ )
+ return;
+ const id = idOnLine(pos.lineNumber);
+ const r = id ? rangeOf(id) : null;
+ // Clicking the value (not its key) copies it.
+ if (
+ id &&
+ r &&
+ (pos.lineNumber > r.startLineNumber || pos.column >= r.startColumn)
+ )
+ copyValue(id);
+ }),
+ );
+ disposers.push(() => subs.forEach((s) => s.dispose()));
+
+ // Hidden values are not in the model, so copy and cut put them back in. Capture phase,
+ // before Monaco's own handler on its textarea writes the model text.
+ const dom = e.getDomNode();
+ const onCopy = (event: ClipboardEvent, cut: boolean) => {
+ const sel = e.getSelection();
+ if (!sel || sel.isEmpty() || !event.clipboardData) return;
+ event.clipboardData.setData("text/plain", assemble(sel));
+ event.preventDefault();
+ event.stopPropagation();
+ if (cut && !e.getOption(m.editor.EditorOption.readOnly))
+ e.executeEdits("cut", [{ range: sel, text: "" }]);
+ };
+ const copy = (event: ClipboardEvent) => onCopy(event, false);
+ const cut = (event: ClipboardEvent) => onCopy(event, true);
+ dom?.addEventListener("copy", copy, true);
+ dom?.addEventListener("cut", cut, true);
+ disposers.push(() => {
+ dom?.removeEventListener("copy", copy, true);
+ dom?.removeEventListener("cut", cut, true);
});
-
- refreshMaskDecorations();
- const groups = getValueGroups(model, getValueRanges(model));
- applyGroupZones(groups);
}
- function setOnChange(onChange: (value: string) => void) {
- onChangeRef.current = onChange;
- }
-
- function dispose() {
- if (tooltipRef.current) {
- tooltipRef.current.remove();
- tooltipRef.current = null;
+ function syncExternalValue(next: string) {
+ if (next === lastEmitted || next === real) return;
+ lastEmitted = next;
+ if (plain) {
+ const m = model();
+ real = next;
+ if (m && m.getValue() !== next) quietly(() => m.setValue(next));
+ return;
}
- clearGroupZones();
+ past = [];
+ future = [];
+ render(next);
}
return {
maskedInitialValue,
handleEditorMount,
syncExternalValue,
- setOnChange,
- dispose,
+ setOnChange(next: (value: string) => void) {
+ emit = next;
+ },
+ dispose() {
+ disposers.forEach((d) => d());
+ tooltip?.remove();
+ tooltip = null;
+ if (tooltipTimer !== null) window.clearTimeout(tooltipTimer);
+ },
};
}
diff --git a/apps/web/src/lib/secrets/monaco/theme.ts b/apps/web/src/lib/secrets/monaco/theme.ts
new file mode 100644
index 00000000..401b357d
--- /dev/null
+++ b/apps/web/src/lib/secrets/monaco/theme.ts
@@ -0,0 +1,57 @@
+import type * as Monaco from "monaco-editor";
+
+/** A design token (lib/appearance/theme.css) as the hex colour Monaco expects. */
+function token(name: string): string {
+ const raw = getComputedStyle(document.documentElement)
+ .getPropertyValue(`--${name}`)
+ .trim();
+ if (/^#[0-9a-f]{6}$/i.test(raw)) return raw;
+ // Anything else (short hex, rgb(), oklch()) goes through canvas, which normalises to hex.
+ const ctx = document.createElement("canvas").getContext("2d");
+ if (!ctx) return "#808080";
+ ctx.fillStyle = raw;
+ return ctx.fillStyle;
+}
+
+/**
+ * Defines and applies the editor theme from the current tokens. Monaco has one global theme,
+ * so call this on mount and again whenever the app theme or grey preset changes.
+ */
+export function applyEditorTheme(monaco: typeof Monaco, dark: boolean) {
+ const name = dark ? "cryptly-dark" : "cryptly-light";
+ const fg = (n: string) => token(n).slice(1);
+ const clear = "#00000000";
+ monaco.editor.defineTheme(name, {
+ base: dark ? "vs-dark" : "vs",
+ inherit: true,
+ rules: [
+ { token: "", foreground: fg("fg2") },
+ { token: "variable", foreground: fg("fg") },
+ { token: "delimiter", foreground: fg("faint") },
+ { token: "string", foreground: fg("fg2") },
+ { token: "comment", foreground: fg("fg3") },
+ ],
+ colors: {
+ "editor.background": token("s100"),
+ "editor.foreground": token("fg2"),
+ "editorGutter.background": token("s100"),
+ "editorLineNumber.foreground": token("faint"),
+ "editorLineNumber.activeForeground": token("fg3"),
+ "editorCursor.foreground": token("fg"),
+ "editor.selectionBackground": token("s100-sel"),
+ "editor.inactiveSelectionBackground": token("s100-hover"),
+ "editor.lineHighlightBackground": clear,
+ "editor.lineHighlightBorder": clear,
+ "editorWidget.background": token("elev"),
+ "editorWidget.border": token("elev-border"),
+ "input.background": token("field"),
+ "input.border": token("field-border"),
+ focusBorder: clear,
+ "scrollbar.shadow": clear,
+ "scrollbarSlider.background": `${token("fg3")}33`,
+ "scrollbarSlider.hoverBackground": `${token("fg3")}55`,
+ "scrollbarSlider.activeBackground": `${token("fg3")}77`,
+ },
+ });
+ monaco.editor.setTheme(name);
+}
diff --git a/apps/web/src/lib/secrets/secrets-editor-nav-guard.svelte.ts b/apps/web/src/lib/secrets/secrets-editor-nav-guard.svelte.ts
index 2938dbce..948aaddb 100644
--- a/apps/web/src/lib/secrets/secrets-editor-nav-guard.svelte.ts
+++ b/apps/web/src/lib/secrets/secrets-editor-nav-guard.svelte.ts
@@ -13,4 +13,9 @@ export const secretsEditorNavGuard = $state({
save: null as null | (() => Promise),
discard: null as null | (() => void),
push: null as null | (() => Promise),
+ /**
+ * Replaces the working document (History's Restore). The saved version stays the baseline,
+ * so the result shows as unsaved changes and ⌘Z undoes it. Null until secrets are decrypted.
+ */
+ replaceDoc: null as null | ((content: string) => void),
});
diff --git a/apps/web/src/lib/secrets/ui/MobileSavePushButtons.svelte b/apps/web/src/lib/secrets/ui/MobileSavePushButtons.svelte
deleted file mode 100644
index 72f7259b..00000000
--- a/apps/web/src/lib/secrets/ui/MobileSavePushButtons.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-
-
-
-
-
- {#if menuOpen}
-
-
-
-
- {/if}
-
+
onkeydown(event, "key")}
+ onpaste={onKeyPaste}
+ />
+
+
+
+ {#if error}
+ {error}
+ {:else if duplicate}
+ {name} already exists
+ {/if}
+
+
+
+
- Loading project…
-
-{:else if loadPhase === "error" || loadPhase === "forbidden"}
-
- {loadMessage ?? "Something went wrong."}
-
-{:else if loadPhase === "locked"}
-
-{:else if loadPhase === "ready"}
-
- {#if isExternallyUpdated}
-
- This project was updated elsewhere. Refresh the project before saving or
- pushing.
-
- {/if}
- {#key revealOn}
-
- {/key}
- {#if changedBy}
-
-
- {changedBy}
-
-
- {/if}
- {#if active && ftux.step === "editor"}
-
- Store API keys, tokens, and sensitive data.
- Everything is end-to-end encrypted.
-
- {/if}
-
-
- {#if active && ftux.step === "save"}
-
- Click Save or press
- +
- S. Your data is encrypted before it
- ever leaves your device.
-
- {/if}
-
-
- {#if active && showSaveShortcut}
-
-
- +
- S
-
- {:else if saveDisabledReason}
-
- {/if}
-
-
-
-
-
-
- {#if pushDisabledReason && !showSlideToConfirm}
-
- {/if}
-
- {#if showSlideToConfirm}
-
-
-
-
-
-
-
Slide to confirm
-
- Slide to confirm
-
-
-
-
-
-
-
-
- {/if}
-
-
-
+ {s.key}
+ {@render value(s, revealOn === "always" ? "line" : "peek")}
+ {#if !readOnly}
+
+ {/if}
+
+ {/each}
+{/snippet}
+
+{#snippet row(s: EnvSecret)}
+ {@const sel = selected.has(s.id)}
+ {@const tone = status(s)}
+ {@const mode =
+ revealed === s.id ? "wrap" : revealOn === "always" ? "line" : "peek"}
+ button:focus-visible]:shadow-[inset_0_0_0_1px_var(--fg3)]",
+ mode === "wrap"
+ ? "min-h-[26px] items-start py-[3px]"
+ : "h-[26px] items-center",
+ sel
+ ? "bg-s100-sel"
+ : tone
+ ? "bg-[color-mix(in_oklab,var(--tone)_6%,transparent)] hover:bg-s100-hover"
+ : "hover:bg-s100-hover",
+ )}
+ style:--tone={tone}
+ onpointerleave={() => {
+ if (revealed === s.id) revealed = null;
+ }}
+ onfocusout={(event) => {
+ if (
+ revealed === s.id &&
+ !event.currentTarget.contains(event.relatedTarget as Node | null)
+ )
+ revealed = null;
+ }}
+ >
+
+
+ {#if revealOn === "hover"}
+ (revealed = revealed === s.id ? null : s.id)}
+ >
+ {#if revealed === s.id}{:else}{/if}
+
+ {/if}
+ copy(s.value, `row:${s.id}`)}
+ >
+
+
+ {#if !readOnly}
+ startEdit(s.id)}>
+
+
+ remove([s.id])}>
+
+
+ {/if}
+
+
+
+
+ {#if !readOnly}
+ remove([...selected])}
+ >
+
+
+ {/if}
+
+
(hovered = g.index < 0 ? null : g.index)}
+ onpointerleave={() => (hovered = null)}
+ >
+
+ {#snippet head()}
+ {#if editing?.kind === "rename" && editing.group === g.index}
+
+ nameKeydown(event, () =>
+ commitRename(g.index, event.currentTarget),
+ )}
+ onblur={(event) => commitRename(g.index, event.currentTarget)}
+ />
+ {:else if readOnly || g.index < 0}
+
+ {g.name ?? "Untitled"}
+
+ {:else}
+
+
+
+ {/if}
+ {/snippet}
+ {#snippet trail()}
+ {#if g.secrets.length}
+
+ {:else if !readOnly && g.index >= 0}
+ onedit(removeGroup(doc, g.index))}
+ >
+
+
+ {/if}
+ {/snippet}
+ {@render gone(deleted[`top:${g.index}`])}
+ {#each rows as s (s.id)}
+ {@render gone(deleted[`before:${s.id}`])}
+ {#if editing?.kind === "edit" && editing.id === s.id}
+ finish(s.id)}
+ onsubmit={(key, value) => {
+ onedit(setSecret(doc, s.id, key, value));
+ void finish(key);
+ }}
+ />
+ {:else}
+ {@render row(s)}
+ {/if}
+ {@render gone(deleted[`after:${s.id}`])}
+ {/each}
+ {#if editing?.kind === "add" && editing.group === g.index}
+ finish()}
+ onsubmit={(key, value) => {
+ onedit(addSecret(doc, g.index, key, value));
+ void finish(key);
+ }}
+ />
+ {:else if !readOnly}
+
+ {:else if !g.secrets.length}
+ No secrets yet
+ {/if}
+
+
+
+ {#each columns as column, c (c)}
+
+ {#each column as i (visible[i].g.index)}
+ {@render group(visible[i].g, visible[i].rows, i === 0)}
+ {/each}
+ {#if c === lastColumn && !readOnly && !query && parsed.groups.length}
+ {#if editing?.kind === "group"}
+
+ {#snippet head()}
+
+ nameKeydown(event, () => commitGroup(event.currentTarget))}
+ onblur={(event) => commitGroup(event.currentTarget)}
+ />
+ {/snippet}
+
+ {:else}
+
+ {/if}
+ {/if}
+
+ {/each}
+
+
+ {#if readOnly}
+ Read only
+ {:else if saving}
+ Saving…
+ {:else if isDirty}
+
+
+
+ {:else}
+ Saved
+ {/if}
+ {#if integrations.length && !readOnly}
+
+
+
+ {/if}
+
+ {#if !readOnly}
+
+ {/if}
+ localStorage.setItem(VIEW_KEY, next)}
+ />
+
+{/snippet}
+
+
+
+ {#if phase === "ready"}
+ {@render controls()}
+ {/if}
+
+
+ {#if phase === "loading"}
+
Decrypting…
+ {:else if phase === "error" || phase === "forbidden"}
+
+
+ {message ?? "Something went wrong."}
+
+
+ {:else if phase === "ready"}
+
+ {@render controls()}
+
+ {#if externallyUpdated}
+
+
+
+ This project was updated elsewhere. Copy anything you need, then
+ reload to get the latest version.
+
+
+
+ {/if}
+ {#if view === "table"}
+
+ {:else}
+
+
+
+ {#if active}
+ {#key revealOn}
+ (doc = next)}
+ {revealOn}
+ {readOnly}
+ />
+ {/key}
+ {/if}
+
+
+ {/if}
+
+ {#if active && ftux.step === "editor"}
+
+ Store API keys, tokens and other secrets here. Everything is end-to-end
+ encrypted.
+
+ {:else if active && ftux.step === "save"}
+
+ Press Save or ⌘S. Your secrets are encrypted on
+ this device before they leave it.
+
+ {:else if active && ftux.step === "integrations"}
+
+ Connect GitHub in Settings to push these secrets to your repositories.
+
+ {/if}
+ {/if}
+
-
-
-
-
-
-
+
+ Step {step} of {FTUX_TOTAL_STEPS}
-
+
+
+
-
- {@render children()}
-
-
-
-
+{/if}
diff --git a/apps/web/src/lib/shared/ui/GripLoader.svelte b/apps/web/src/lib/shared/ui/GripLoader.svelte
deleted file mode 100644
index 83f9fc26..00000000
--- a/apps/web/src/lib/shared/ui/GripLoader.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
diff --git a/apps/web/src/lib/shared/ui/HistoryIcon.svelte b/apps/web/src/lib/shared/ui/HistoryIcon.svelte
deleted file mode 100644
index 890eaeb5..00000000
--- a/apps/web/src/lib/shared/ui/HistoryIcon.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/apps/web/src/lib/shared/ui/ShellLoader.svelte b/apps/web/src/lib/shared/ui/ShellLoader.svelte
deleted file mode 100644
index 25d5ad28..00000000
--- a/apps/web/src/lib/shared/ui/ShellLoader.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
- {label}
-
-
diff --git a/apps/web/src/lib/shared/ui/SlidersIcon.svelte b/apps/web/src/lib/shared/ui/SlidersIcon.svelte
deleted file mode 100644
index d5ea8766..00000000
--- a/apps/web/src/lib/shared/ui/SlidersIcon.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/apps/web/src/lib/shell/shell.svelte.ts b/apps/web/src/lib/shell/shell.svelte.ts
new file mode 100644
index 00000000..a28187bd
--- /dev/null
+++ b/apps/web/src/lib/shell/shell.svelte.ts
@@ -0,0 +1,103 @@
+import { goto } from "$app/navigation";
+import { resolve } from "$app/paths";
+import {
+ InvitationsApi,
+ type PersonalInvitation,
+} from "$lib/invitations/invitations.api";
+import { ProjectsApi, type Project } from "$lib/projects/projects.api";
+import {
+ accountLoadErrorMessage,
+ auth,
+ loadUserData,
+} from "$lib/stores/auth.svelte";
+
+/**
+ * App shell state shared by the sidebar and every page in the panel. Projects come from one
+ * list request; pages read their project from here and write updates back so the sidebar,
+ * breadcrumbs and settings stay in sync.
+ */
+export const shell = $state({
+ projects: null as Project[] | null,
+ /** Direct invitations waiting for this user (the sidebar's Invitations row). */
+ invitations: [] as PersonalInvitation[],
+ loading: false,
+ loadError: null as string | null,
+});
+
+let loadSeq = 0;
+
+export async function loadShell(): Promise
{
+ const seq = ++loadSeq;
+ if (!auth.jwtToken) {
+ void goto(resolve("/app/login"));
+ return;
+ }
+ shell.loading = true;
+ shell.loadError = null;
+ try {
+ const ok = await loadUserData();
+ if (seq !== loadSeq) return;
+ if (!ok) {
+ if (auth.jwtToken) shell.loadError = accountLoadErrorMessage();
+ return;
+ }
+ const jwt = auth.jwtToken;
+ if (!jwt) return;
+ void loadInvitations();
+ const projects = await ProjectsApi.getProjects(jwt);
+ if (seq !== loadSeq) return;
+ shell.projects = dedupe(projects);
+ } catch (error) {
+ if (seq !== loadSeq) return;
+ shell.loadError =
+ error instanceof Error ? error.message : "Failed to load projects";
+ } finally {
+ if (seq === loadSeq) shell.loading = false;
+ }
+}
+
+/** Re-fetch the project list without showing the loading state. */
+export async function refreshProjects(): Promise {
+ const jwt = auth.jwtToken;
+ if (!jwt) return;
+ const projects = dedupe(await ProjectsApi.getProjects(jwt));
+ // A list-shaped write even when nothing changed, so pages waiting on it re-evaluate.
+ shell.projects = projects;
+}
+
+/** Replace a project in place; a new project goes first, like the server orders it. */
+export function upsertProject(project: Project) {
+ const list = shell.projects ?? [];
+ shell.projects = list.some((p) => p.id === project.id)
+ ? list.map((p) => (p.id === project.id ? project : p))
+ : [project, ...list];
+}
+
+export async function loadInvitations(): Promise {
+ const jwt = auth.jwtToken;
+ if (!jwt) return;
+ try {
+ const invitations = await InvitationsApi.getMyPersonalInvitations(jwt);
+ if (auth.jwtToken === jwt) shell.invitations = invitations;
+ } catch {
+ // Keep the last known list; the next shell load retries.
+ }
+}
+
+export function removeProject(projectId: string) {
+ shell.projects = (shell.projects ?? []).filter((p) => p.id !== projectId);
+}
+
+export function clearShell() {
+ loadSeq++;
+ shell.projects = null;
+ shell.invitations = [];
+ shell.loading = false;
+ shell.loadError = null;
+}
+
+function dedupe(list: Project[]): Project[] {
+ return list.filter(
+ (p, index) => list.findIndex((other) => other.id === p.id) === index,
+ );
+}
diff --git a/apps/web/src/lib/shell/ui/AccountMenu.svelte b/apps/web/src/lib/shell/ui/AccountMenu.svelte
new file mode 100644
index 00000000..dc165feb
--- /dev/null
+++ b/apps/web/src/lib/shell/ui/AccountMenu.svelte
@@ -0,0 +1,130 @@
+
+
+
+
+ {
+ if (event.newState === "open") items()[0]?.focus();
+ }}
+ {onkeydown}
+>
+
+
{name}
+ {#if auth.userData?.email && auth.userData.email !== name}
+
{auth.userData.email}
+ {/if}
+
+
+
menu?.hidePopover()}
+ >
+ Settings
+ ⌘,
+
+ {#if keyAuth.hasMasterKey}
+
+ {/if}
+
+
+
+
+ (drawerOpen = true)}
+ >
+
+
+ (searchOpen = true)}
+ >
+
+
+
+
+ {#if shell.loadError && !shell.projects}
+
+
+
We couldn't finish loading
+
{shell.loadError}
+
+
+
+
+
+
+
![]()
(failed = true)}
+ />
+{:else}
+ {initial}
+{/if}
diff --git a/apps/web/src/lib/ui/Button.svelte b/apps/web/src/lib/ui/Button.svelte
new file mode 100644
index 00000000..3bab3307
--- /dev/null
+++ b/apps/web/src/lib/ui/Button.svelte
@@ -0,0 +1,52 @@
+
+
+{#if rest.href !== undefined}
+ {@render children?.()}
+{:else}
+
+{/if}
diff --git a/apps/web/src/lib/ui/Dialog.svelte b/apps/web/src/lib/ui/Dialog.svelte
new file mode 100644
index 00000000..fd13b9fa
--- /dev/null
+++ b/apps/web/src/lib/ui/Dialog.svelte
@@ -0,0 +1,90 @@
+
+
+
diff --git a/apps/web/src/lib/ui/IconButton.svelte b/apps/web/src/lib/ui/IconButton.svelte
new file mode 100644
index 00000000..204b4939
--- /dev/null
+++ b/apps/web/src/lib/ui/IconButton.svelte
@@ -0,0 +1,35 @@
+
+
+
diff --git a/apps/web/src/lib/ui/Kbd.svelte b/apps/web/src/lib/ui/Kbd.svelte
new file mode 100644
index 00000000..559d4e88
--- /dev/null
+++ b/apps/web/src/lib/ui/Kbd.svelte
@@ -0,0 +1,14 @@
+
+
+{@render children()}
diff --git a/apps/web/src/lib/ui/SearchField.svelte b/apps/web/src/lib/ui/SearchField.svelte
new file mode 100644
index 00000000..56083eb1
--- /dev/null
+++ b/apps/web/src/lib/ui/SearchField.svelte
@@ -0,0 +1,89 @@
+
+
+
+
+
diff --git a/apps/web/src/lib/ui/Segmented.svelte b/apps/web/src/lib/ui/Segmented.svelte
new file mode 100644
index 00000000..b31f5b0b
--- /dev/null
+++ b/apps/web/src/lib/ui/Segmented.svelte
@@ -0,0 +1,51 @@
+
+
+
+ {#each options as option (option.value)}
+ {@const on = option.value === value}
+
+ {/each}
+
diff --git a/apps/web/src/lib/ui/SettingsItem.svelte b/apps/web/src/lib/ui/SettingsItem.svelte
new file mode 100644
index 00000000..2d00d3a3
--- /dev/null
+++ b/apps/web/src/lib/ui/SettingsItem.svelte
@@ -0,0 +1,40 @@
+
+
+
+
{label}
+
+ {@render children?.()}
+
+ {#if actions}
+
+ {@render actions()}
+
+ {/if}
+
+ {title}
+
+ {/if}
+ {#if note !== undefined && note !== ""}
+ {note}
+ {/if}
+ {#if trail}
+ {@render trail()}
+ {/if}
+
+ {#if children}
+ {#if bare}
+ {@render children()}
+ {:else}
+
+ {@render children()}
+
+ {/if}
+ {/if}
+
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 2fa7dbe1..81163426 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -43,10 +43,12 @@ export function getRelativeTime(dateString: string): string {
}
}
-export function getCompactRelativeTime(dateString: string): string {
+export function getCompactRelativeTime(
+ dateString: string,
+ now: number = Date.now(),
+): string {
const date = new Date(dateString);
- const now = new Date();
- const diffInMs = now.getTime() - date.getTime();
+ const diffInMs = now - date.getTime();
const diffInSeconds = Math.floor(diffInMs / 1000);
if (diffInSeconds < 60) return "now";
diff --git a/apps/web/src/params/projectTab.ts b/apps/web/src/params/projectTab.ts
new file mode 100644
index 00000000..2f1fae0e
--- /dev/null
+++ b/apps/web/src/params/projectTab.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from "@sveltejs/kit";
+
+/** `/app/project/:id` is Secrets; History and Settings get their own path segment. */
+export const match = ((param: string): param is "history" | "settings" =>
+ param === "history" || param === "settings") satisfies ParamMatcher;
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 9f337c0f..834e31d3 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
import { installAuthFetchInterceptor } from "$lib/auth/fetch-interceptor";
import BlogHeader from "$lib/components/blog/BlogHeader.svelte";
import PassphraseGate from "$lib/components/shell/PassphraseGate.svelte";
- import PersonalInvitationsInbox from "$lib/invitations/ui/PersonalInvitationsInbox.svelte";
+ import { appearance } from "$lib/appearance/appearance.svelte";
import { startKeyAutoLock } from "$lib/keys/auto-lock";
import UnlockBrowserDialog from "$lib/keys/ui/UnlockBrowserDialog.svelte";
import { auth } from "$lib/stores/auth.svelte";
@@ -49,10 +49,9 @@
-
diff --git a/apps/web/src/routes/app/(shell)/+layout.svelte b/apps/web/src/routes/app/(shell)/+layout.svelte
new file mode 100644
index 00000000..1ef877ac
--- /dev/null
+++ b/apps/web/src/routes/app/(shell)/+layout.svelte
@@ -0,0 +1,7 @@
+
+
+{@render children()}
diff --git a/apps/web/src/routes/app/project/+page.svelte b/apps/web/src/routes/app/(shell)/project/+page.svelte
similarity index 100%
rename from apps/web/src/routes/app/project/+page.svelte
rename to apps/web/src/routes/app/(shell)/project/+page.svelte
diff --git a/apps/web/src/routes/app/project/[projectId]/+page.svelte b/apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.svelte
similarity index 67%
rename from apps/web/src/routes/app/project/[projectId]/+page.svelte
rename to apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.svelte
index f2526811..9fbfce88 100644
--- a/apps/web/src/routes/app/project/[projectId]/+page.svelte
+++ b/apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.svelte
@@ -4,4 +4,4 @@
let { data } = $props();
-
+
diff --git a/apps/web/src/routes/app/project/[projectId]/+page.ts b/apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.ts
similarity index 56%
rename from apps/web/src/routes/app/project/[projectId]/+page.ts
rename to apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.ts
index 721e6bca..5f151f1b 100644
--- a/apps/web/src/routes/app/project/[projectId]/+page.ts
+++ b/apps/web/src/routes/app/(shell)/project/[projectId]/[[tab=projectTab]]/+page.ts
@@ -1,7 +1,9 @@
+import type { ProjectTab } from "$lib/projects/project-tab";
import type { PageLoad } from "./$types";
export const load: PageLoad = ({ params }) => {
return {
projectId: params.projectId,
+ tab: (params.tab ?? "secrets") as ProjectTab,
};
};
diff --git a/apps/web/src/routes/app/(shell)/settings/+page.svelte b/apps/web/src/routes/app/(shell)/settings/+page.svelte
new file mode 100644
index 00000000..e76e829c
--- /dev/null
+++ b/apps/web/src/routes/app/(shell)/settings/+page.svelte
@@ -0,0 +1,9 @@
+
+
+
+ Settings · Cryptly
+
+
+
diff --git a/apps/web/src/routes/app/callbacks/integrations/github/+page.svelte b/apps/web/src/routes/app/callbacks/integrations/github/+page.svelte
index 568e43d3..0974f40f 100644
--- a/apps/web/src/routes/app/callbacks/integrations/github/+page.svelte
+++ b/apps/web/src/routes/app/callbacks/integrations/github/+page.svelte
@@ -4,7 +4,10 @@
import { resolve } from "$app/paths";
import { toast } from "svelte-sonner";
import { consumeGitHubAppInstallState } from "$lib/auth/browser-state";
+ import { ApiResponseError } from "$lib/api/backend";
import { IntegrationsApi } from "$lib/api/integrations.api";
+ import { projectPath } from "$lib/paths";
+ import { CONNECT_AFTER_INSTALL_KEY } from "$lib/projects/ui/settings/GithubSection.svelte";
import { publicEnv } from "$lib/shared/env/public-env";
import { auth } from "$lib/stores/auth.svelte";
@@ -37,11 +40,19 @@
try {
if (!publicEnv.githubLocalMock) {
+ // 409: already registered (the app was re-configured to share more repositories).
await IntegrationsApi.createInstallation(auth.jwtToken, {
githubInstallationId: installationId,
+ }).catch((error: unknown) => {
+ if (!(error instanceof ApiResponseError && error.status === 409))
+ throw error;
});
}
- await goto(resolve(`/app/project/${projectId}`));
+ // Back to GitHub sync with the connect dialog open, to pick the repository.
+ sessionStorage.setItem(CONNECT_AFTER_INSTALL_KEY, projectId);
+ await goto(resolve(projectPath(projectId, "settings", "github")), {
+ replaceState: true,
+ });
} catch {
await goto(resolve("/app/project"));
toast.error("Failed to connect GitHub");
diff --git a/backend/src/external-connection/github/core/entities/github-integration.entity.ts b/backend/src/external-connection/github/core/entities/github-integration.entity.ts
index 8a085d55..d0e45f2b 100644
--- a/backend/src/external-connection/github/core/entities/github-integration.entity.ts
+++ b/backend/src/external-connection/github/core/entities/github-integration.entity.ts
@@ -20,6 +20,10 @@ export class GithubIntegrationEntity {
@Prop({ required: true })
public githubRepositoryPublicKeyId: string;
+ /** When a member last pushed the project's secrets to this repository (pushes run in the browser). */
+ @Prop()
+ public lastPushedAt?: Date;
+
@Prop()
public createdAt: Date;
diff --git a/backend/src/external-connection/github/core/entities/github-integration.interface.ts b/backend/src/external-connection/github/core/entities/github-integration.interface.ts
index 12a81621..b2e3d499 100644
--- a/backend/src/external-connection/github/core/entities/github-integration.interface.ts
+++ b/backend/src/external-connection/github/core/entities/github-integration.interface.ts
@@ -8,6 +8,7 @@ export interface GithubIntegrationNormalized {
githubRepositoryPublicKey: string;
githubRepositoryPublicKeyId: string;
installationEntityId: string;
+ lastPushedAt?: Date;
createdAt: Date;
updatedAt: Date;
}
@@ -34,6 +35,9 @@ export class GithubIntegrationSerialized {
@ApiProperty({ type: GithubRepositorySerialized, required: false })
repositoryData?: GithubRepository;
+ @ApiProperty({ required: false })
+ lastPushedAt?: string;
+
@ApiProperty()
createdAt: string;
diff --git a/backend/src/external-connection/github/core/entities/github-integration.serializer.ts b/backend/src/external-connection/github/core/entities/github-integration.serializer.ts
index dc387dea..90dde8c9 100644
--- a/backend/src/external-connection/github/core/entities/github-integration.serializer.ts
+++ b/backend/src/external-connection/github/core/entities/github-integration.serializer.ts
@@ -14,6 +14,7 @@ export class GithubIntegrationSerializer {
githubRepositoryPublicKey: entity.githubRepositoryPublicKey,
githubRepositoryPublicKeyId: entity.githubRepositoryPublicKeyId,
installationEntityId: entity.installationEntityId.toString(),
+ lastPushedAt: entity.lastPushedAt,
createdAt: entity.createdAt,
updatedAt: entity.updatedAt,
};
@@ -33,6 +34,7 @@ export class GithubIntegrationSerializer {
githubRepositoryPublicKeyId: normalized.githubRepositoryPublicKeyId,
installationEntityId: normalized.installationEntityId,
repositoryData: extraProps?.repositoryData,
+ lastPushedAt: normalized.lastPushedAt?.toISOString(),
createdAt: normalized.createdAt.toISOString(),
updatedAt: normalized.updatedAt.toISOString(),
};
diff --git a/backend/src/external-connection/github/write/github-integration-write.service.ts b/backend/src/external-connection/github/write/github-integration-write.service.ts
index f0f705c4..e214d9da 100644
--- a/backend/src/external-connection/github/write/github-integration-write.service.ts
+++ b/backend/src/external-connection/github/write/github-integration-write.service.ts
@@ -25,6 +25,17 @@ export class GithubIntegrationWriteService {
return GithubIntegrationSerializer.normalize(integration);
}
+ /** Only touches integrations of `projectId`, so ids from other projects are ignored. */
+ public async markPushed(projectId: string, integrationIds: string[], at: Date): Promise {
+ await this.githubIntegrationModel.updateMany(
+ {
+ _id: { $in: integrationIds.map((id) => new Types.ObjectId(id)) },
+ projectId: new Types.ObjectId(projectId),
+ },
+ { $set: { lastPushedAt: at } },
+ );
+ }
+
public async deleteById(integrationId: string): Promise {
await this.githubIntegrationModel.deleteOne({ _id: new Types.ObjectId(integrationId) });
}
diff --git a/backend/src/project/core/dto/secrets-pushed.body.ts b/backend/src/project/core/dto/secrets-pushed.body.ts
new file mode 100644
index 00000000..403fac31
--- /dev/null
+++ b/backend/src/project/core/dto/secrets-pushed.body.ts
@@ -0,0 +1,14 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+import { ArrayMaxSize, IsArray, IsMongoId, IsOptional } from 'class-validator';
+
+export class SecretsPushedBody {
+ @ApiPropertyOptional({
+ type: [String],
+ description: 'GitHub integrations of this project the secrets were pushed to.',
+ })
+ @IsOptional()
+ @IsArray()
+ @ArrayMaxSize(100)
+ @IsMongoId({ each: true })
+ public integrationIds?: string[];
+}
diff --git a/backend/src/project/core/project-core.controller.ts b/backend/src/project/core/project-core.controller.ts
index f578f2ee..3250f87a 100644
--- a/backend/src/project/core/project-core.controller.ts
+++ b/backend/src/project/core/project-core.controller.ts
@@ -32,6 +32,7 @@ import { ProjectWriteService } from '../write/project-write.service';
import { AddEncryptedSecretsKeyBody } from './dto/add-encrypted-secrets-key.body';
import { CreateProjectBody } from './dto/create-project.body';
import { ProjectSearchResponse } from './dto/project-search.response';
+import { SecretsPushedBody } from './dto/secrets-pushed.body';
import { UpdateMemberRoleBody } from './dto/update-member-role.body';
import { UpdateProjectBody } from './dto/update-project.body';
import { ProjectSerialized } from './entities/project.interface';
@@ -39,6 +40,7 @@ import { ProjectSerializer } from './entities/project.serializer';
import { ProjectMemberGuard } from './guards/project-member.guard';
import { RemoveProjectMemberGuard } from './guards/remove-project-member.guard';
import { ProductAnalyticsService } from '../../shared/posthog/product-analytics.service';
+import { GithubIntegrationWriteService } from '../../external-connection/github/write/github-integration-write.service';
@Controller('')
@ApiTags('Projects')
@@ -53,6 +55,7 @@ export class ProjectCoreController {
private readonly personalInvitationReadService: PersonalInvitationReadService,
private readonly eventEmitter: EventEmitter2,
private readonly productAnalytics: ProductAnalyticsService,
+ private readonly githubIntegrationWriteService: GithubIntegrationWriteService,
) {}
@Sse('projects/:projectId/events')
@@ -269,7 +272,15 @@ export class ProjectCoreController {
public async trackSecretsPushed(
@Param('projectId') projectId: string,
@CurrentUserId() userId: string,
+ @Body() body: SecretsPushedBody,
): Promise {
+ if (body.integrationIds?.length) {
+ await this.githubIntegrationWriteService.markPushed(
+ projectId,
+ body.integrationIds,
+ new Date(),
+ );
+ }
this.productAnalytics.capture(userId, 'secrets_pushed', { project_id: projectId });
}
diff --git a/backend/src/project/core/project-core.module.ts b/backend/src/project/core/project-core.module.ts
index 9627d367..4649c76f 100644
--- a/backend/src/project/core/project-core.module.ts
+++ b/backend/src/project/core/project-core.module.ts
@@ -1,4 +1,5 @@
import { Module } from '@nestjs/common';
+import { GithubExternalConnectionWriteModule } from '../../external-connection/github/write/github-external-connection-write.module';
import { PersonalInvitationReadModule } from '../../personal-invitation/read/personal-invitation-read.module';
import { ProjectSecretsVersionReadModule } from '../../project-secrets-version/read/project-secrets-version-read.module';
import { UserReadModule } from '../../user/read/user-read.module';
@@ -18,6 +19,7 @@ import { PROJECT_MEMBER_GUARD_REQUIRED_IMPORTS } from './guards/project-member.g
ProjectSecretsVersionReadModule,
PersonalInvitationReadModule,
ProjectEventModule,
+ GithubExternalConnectionWriteModule,
...PROJECT_MEMBER_GUARD_REQUIRED_IMPORTS,
],
controllers: [ProjectCoreController],
diff --git a/backend/test/external-connections/integrations.spec.ts b/backend/test/external-connections/integrations.spec.ts
index 4f6e2708..055a7543 100644
--- a/backend/test/external-connections/integrations.spec.ts
+++ b/backend/test/external-connections/integrations.spec.ts
@@ -593,4 +593,149 @@ describe('GithubExternalConnectionCoreController (integrations)', () => {
expect(response.status).toEqual(401);
});
});
+ describe('POST /projects/:projectId/analytics/secrets-pushed', () => {
+ async function connectRepository(
+ token: string,
+ projectId: string,
+ installationEntityId: string,
+ repositoryId: number,
+ ) {
+ clientMock.getRepositoryInfoByInstallationIdAndRepositoryId.mockResolvedValue({
+ id: repositoryId,
+ owner: 'test-owner',
+ name: `repo-${repositoryId}`,
+ avatarUrl: 'https://github.com/avatar.png',
+ url: `https://github.com/test-owner/repo-${repositoryId}`,
+ isPrivate: false,
+ });
+ clientMock.getRepositoryPublicKey.mockResolvedValue({
+ key: 'test-public-key',
+ keyId: 'test-key-id',
+ });
+ return bootstrap.utils.githubExternalConnectionUtils.createIntegration(token, {
+ repositoryId,
+ installationEntityId,
+ projectId,
+ });
+ }
+
+ function lastPushedAt(integrationId: string) {
+ return bootstrap.models.githubIntegrationModel
+ .findById(integrationId)
+ .lean()
+ .then((integration) => integration?.lastPushedAt);
+ }
+
+ it('records the push on the listed integrations only', async () => {
+ const setup = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setup.token);
+ const installation = await bootstrap.utils.githubExternalConnectionUtils.createInstallation(
+ setup.token,
+ );
+ const pushed = await connectRepository(setup.token, project.id, installation.id, 789);
+ const notPushed = await connectRepository(setup.token, project.id, installation.id, 790);
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setup.token}`)
+ .send({ integrationIds: [pushed.id] });
+
+ expect(response.status).toEqual(204);
+ expect(await lastPushedAt(pushed.id)).toBeInstanceOf(Date);
+ expect(await lastPushedAt(notPushed.id)).toBeUndefined();
+
+ const integrations =
+ await bootstrap.utils.githubExternalConnectionUtils.getProjectIntegrations(
+ setup.token,
+ project.id,
+ );
+ const byId = new Map(integrations.map((i: any) => [i.id, i]));
+ expect((byId.get(pushed.id) as any).lastPushedAt).toEqual(expect.any(String));
+ expect((byId.get(notPushed.id) as any).lastPushedAt).toBeUndefined();
+ });
+
+ it('ignores integrations of other projects', async () => {
+ const setup = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setup.token);
+ const otherProject = await bootstrap.utils.projectUtils.createProject(setup.token);
+ const installation = await bootstrap.utils.githubExternalConnectionUtils.createInstallation(
+ setup.token,
+ );
+ const otherIntegration = await connectRepository(
+ setup.token,
+ otherProject.id,
+ installation.id,
+ 789,
+ );
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setup.token}`)
+ .send({ integrationIds: [otherIntegration.id] });
+
+ expect(response.status).toEqual(204);
+ expect(await lastPushedAt(otherIntegration.id)).toBeUndefined();
+ });
+
+ it('accepts a push without integration ids', async () => {
+ const setup = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setup.token);
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setup.token}`);
+
+ expect(response.status).toEqual(204);
+ });
+
+ it('returns 400 for malformed integration ids', async () => {
+ const setup = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setup.token);
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setup.token}`)
+ .send({ integrationIds: ['not-an-id'] });
+
+ expect(response.status).toEqual(400);
+ });
+
+ it('returns 403 for read role and keeps the integration untouched', async () => {
+ const setupA = await bootstrap.utils.userUtils.createDefault();
+ const setupB = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setupA.token);
+ await bootstrap.utils.projectUtils.addMemberToProject(project.id, setupB.user.id, Role.Read);
+ const installation = await bootstrap.utils.githubExternalConnectionUtils.createInstallation(
+ setupA.token,
+ );
+ const integration = await connectRepository(setupA.token, project.id, installation.id, 789);
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setupB.token}`)
+ .send({ integrationIds: [integration.id] });
+
+ expect(response.status).toEqual(403);
+ expect(await lastPushedAt(integration.id)).toBeUndefined();
+ });
+
+ it('records the push for write role', async () => {
+ const setupA = await bootstrap.utils.userUtils.createDefault();
+ const setupB = await bootstrap.utils.userUtils.createDefault();
+ const project = await bootstrap.utils.projectUtils.createProject(setupA.token);
+ await bootstrap.utils.projectUtils.addMemberToProject(project.id, setupB.user.id, Role.Write);
+ const installation = await bootstrap.utils.githubExternalConnectionUtils.createInstallation(
+ setupA.token,
+ );
+ const integration = await connectRepository(setupA.token, project.id, installation.id, 789);
+
+ const response = await request(bootstrap.app.getHttpServer())
+ .post(`/projects/${project.id}/analytics/secrets-pushed`)
+ .set('authorization', `Bearer ${setupB.token}`)
+ .send({ integrationIds: [integration.id] });
+
+ expect(response.status).toEqual(204);
+ expect(await lastPushedAt(integration.id)).toBeInstanceOf(Date);
+ });
+ });
});
diff --git a/backend/test/projects/writes.spec.ts b/backend/test/projects/writes.spec.ts
index 6f1ea90c..6085fbcb 100644
--- a/backend/test/projects/writes.spec.ts
+++ b/backend/test/projects/writes.spec.ts
@@ -1,5 +1,4 @@
import { advanceBy, advanceTo } from 'jest-date-mock';
-import { describe } from 'node:test';
import { firstValueFrom, of } from 'rxjs';
import { catchError, take, timeout, toArray } from 'rxjs/operators';
import * as request from 'supertest';
diff --git a/backend/test/utils/bootstrap.ts b/backend/test/utils/bootstrap.ts
index 78c755d1..db2c10f8 100644
--- a/backend/test/utils/bootstrap.ts
+++ b/backend/test/utils/bootstrap.ts
@@ -105,7 +105,10 @@ export async function createTestApp(): Promise {
transformOptions: { enableImplicitConversion: true },
}),
);
- await app.init();
+ // Listen once on 127.0.0.1, the host supertest sends requests to. Otherwise supertest calls
+ // listen(0) on `::` per request, and on macOS that can pick a port another process already
+ // holds on 127.0.0.1, so the request hits that process (random 404s / socket hang ups).
+ await app.listen(0, '127.0.0.1');
const userModel: Model = module.get(getModelToken(UserEntity.name));
const projectModel: Model = module.get(getModelToken(ProjectEntity.name));
diff --git a/packages/backend-sdk/openapi.json b/packages/backend-sdk/openapi.json
index ec5a6799..bd3abb7a 100644
--- a/packages/backend-sdk/openapi.json
+++ b/packages/backend-sdk/openapi.json
@@ -434,6 +434,16 @@
}
}
],
+ "requestBody": {
+ "required": true,
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/SecretsPushedBody"
+ }
+ }
+ }
+ },
"responses": {
"204": {
"description": ""
@@ -2268,6 +2278,18 @@
}
}
},
+ "SecretsPushedBody": {
+ "type": "object",
+ "properties": {
+ "integrationIds": {
+ "description": "GitHub integrations of this project the secrets were pushed to.",
+ "type": "array",
+ "items": {
+ "type": "string"
+ }
+ }
+ }
+ },
"AddEncryptedSecretsKeyBody": {
"type": "object",
"properties": {
@@ -2812,6 +2834,9 @@
"repositoryData": {
"$ref": "#/components/schemas/GithubRepositorySerialized"
},
+ "lastPushedAt": {
+ "type": "string"
+ },
"createdAt": {
"type": "string"
},
diff --git a/packages/backend-sdk/src/openapi.generated.ts b/packages/backend-sdk/src/openapi.generated.ts
index 52bd9cc3..0794fca0 100644
--- a/packages/backend-sdk/src/openapi.generated.ts
+++ b/packages/backend-sdk/src/openapi.generated.ts
@@ -875,6 +875,10 @@ export interface components {
encryptedSecrets?: string;
settings?: components["schemas"]["ProjectSettingsBody"];
};
+ SecretsPushedBody: {
+ /** @description GitHub integrations of this project the secrets were pushed to. */
+ integrationIds?: string[];
+ };
AddEncryptedSecretsKeyBody: {
userId: string;
encryptedSecretsKey: string;
@@ -1029,6 +1033,7 @@ export interface components {
githubRepositoryPublicKeyId: string;
installationEntityId: string;
repositoryData?: components["schemas"]["GithubRepositorySerialized"];
+ lastPushedAt?: string;
createdAt: string;
updatedAt: string;
};
@@ -1362,7 +1367,11 @@ export interface operations {
};
cookie?: never;
};
- requestBody?: never;
+ requestBody: {
+ content: {
+ "application/json": components["schemas"]["SecretsPushedBody"];
+ };
+ };
responses: {
204: {
headers: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f849166a..ca62de0f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,9 +13,12 @@ importers:
'@fontsource-variable/funnel-display':
specifier: ^5.2.8
version: 5.2.8
- '@monaco-editor/loader':
- specifier: ^1.5.0
- version: 1.7.0
+ '@fontsource-variable/geist':
+ specifier: ^5.3.0
+ version: 5.3.0
+ '@fontsource-variable/geist-mono':
+ specifier: ^5.3.0
+ version: 5.3.0
'@packages/backend-sdk':
specifier: workspace:*
version: link:../../packages/backend-sdk
@@ -1947,6 +1950,12 @@ packages:
'@fontsource-variable/funnel-display@5.2.8':
resolution: {integrity: sha512-krvlZmy6EoFdmCKldTHpAzxxt5gFRXebueyDZ7DUIQ37YRAD8SrH0ljwoLOL/ZSCD5jHqKS6EhFPXLuhuJrOGA==}
+ '@fontsource-variable/geist-mono@5.3.0':
+ resolution: {integrity: sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw==}
+
+ '@fontsource-variable/geist@5.3.0':
+ resolution: {integrity: sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==}
+
'@grpc/grpc-js@1.14.3':
resolution: {integrity: sha512-Iq8QQQ/7X3Sac15oB6p0FmUg/klxQvXLeileoqrTRGJYLV+/9tubbr9ipz0GKHjmXVsgFPo/+W+2cA8eNcR+XA==}
engines: {node: '>=12.10.0'}
@@ -9932,6 +9941,10 @@ snapshots:
'@fontsource-variable/funnel-display@5.2.8': {}
+ '@fontsource-variable/geist-mono@5.3.0': {}
+
+ '@fontsource-variable/geist@5.3.0': {}
+
'@grpc/grpc-js@1.14.3':
dependencies:
'@grpc/proto-loader': 0.8.0