@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryOperationRail.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import CornerLeftUpIcon from "@lucide/svelte/icons/corner-left-up";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  let {
+    operation,
+    onSelect,
+    copyText,
+  }: {
+    operation: LocalGraphOperationNode;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+  } = $props();
+</script>
+
+<section class="operation-rail" aria-label="Selected operation metadata">
+  <div class="operation-meta">
+    <span>Author:</span>
+    <RepositoryAuthorAvatar
+      name={operation.user}
+      handle={`${operation.user}@${operation.host}`}
+      size="md"
+    />
+    <span title={`${operation.user}@${operation.host}`}>{operation.user}</span>
+    <span aria-hidden="true">•</span>
+    <RelativeTime timestamp={Number(operation.end.millis)} />
+    <span aria-hidden="true">•</span>
+    <RepositoryIdentifiers
+      commitId={operation.id}
+      commitLabel="operation ID"
+      placement="inline"
+      {copyText}
+    />
+  </div>
+  <nav class="operation-parents" aria-label="Operation parents">
+    <Tooltip.Provider delayDuration={0}>
+      {#each operation.parents as parent (parent)}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                type="button"
+                class="parent-pill"
+                aria-label={`Inspect parent operation ${parent.slice(0, 8)}…${parent.slice(-4)} (${parent})`}
+                onclick={() => onSelect(parent)}
+              >
+                <CornerLeftUpIcon aria-hidden="true" />
+                <code>{parent.slice(0, 8)}…{parent.slice(-4)}</code>
+              </button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top" sideOffset={6}
+            >Parent operation</Tooltip.Content
+          >
+        </Tooltip.Root>
+      {:else}<p>Root operation</p>{/each}
+    </Tooltip.Provider>
+  </nav>
+</section>
+
+<style>
+  .operation-rail {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    background: var(--background);
+  }
+  .operation-meta {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+  }
+  .operation-parents {
+    display: flex;
+    flex: none;
+    min-width: 0;
+    max-width: 50%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.35rem;
+    margin-inline-start: auto;
+  }
+  .parent-pill {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 1.65rem;
+    gap: 0.35rem;
+    padding: 0 0.45rem;
+    border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+    border-radius: 0.4rem;
+    color: var(--muted-foreground);
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .parent-pill:hover,
+  .parent-pill:focus-visible {
+    border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+    background: color-mix(in srgb, var(--foreground) 11%, transparent);
+    color: var(--foreground);
+  }
+  .parent-pill :global(svg) {
+    width: 1rem;
+    height: 1rem;
+    flex: none;
+  }
+  .parent-pill code {
+    min-width: 0;
+    overflow: hidden;
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  p {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--muted-foreground);
+  }
+</style>

package/dist/repository/components/RepositoryOperationRail.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    operation: LocalGraphOperationNode;
+    onSelect(id: string): void;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryOperationRail: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationRail = ReturnType<typeof RepositoryOperationRail>;
+export default RepositoryOperationRail;

package/dist/repository/components/RepositoryOperationTarget.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import { formatRelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  let {
+    target,
+    operation,
+  }: { target: string; operation?: LocalGraphOperationNode } = $props();
+  let now = $state(Date.now());
+  onMount(() => {
+    const timer = setInterval(() => {
+      now = Date.now();
+    }, 30_000);
+    return () => clearInterval(timer);
+  });
+  const time = $derived(
+    operation
+      ? formatRelativeTime(Number(operation.end.millis), { now })
+      : undefined,
+  );
+</script>
+
+<div class="operation-target">
+  <RepositoryAuthorAvatar name={operation?.user ?? "Unknown author"} />
+  <div class="operation-target-body">
+    <span class="operation-target-description" title={operation?.description}>
+      {operation?.description.split("\n")[0] ||
+        (target ? "Parent details unavailable" : "Choose a parent")}
+    </span>
+    <div class="operation-target-metadata">
+      {#if operation}<span title={`${operation.user}@${operation.host}`}
+          >{operation.user}@{operation.host}</span
+        >{/if}
+      {#if time}<time datetime={time.datetime} title={time.full}
+          >{time.text}</time
+        >{/if}
+      {#if operation?.workspace}<Badge variant="secondary"
+          >{operation.workspace}</Badge
+        >{/if}
+      {#if operation?.is_snapshot}<Badge variant="secondary">Snapshot</Badge
+        >{/if}
+    </div>
+    {#if target}<span
+        class="operation-target-id"
+        title={`Operation ID ${target}`}
+      >
+        <Badge variant="secondary">OP</Badge><code
+          >{target.slice(0, 12)}…{target.slice(-4)}</code
+        >
+      </span>{/if}
+  </div>
+</div>
+
+<style>
+  .operation-target {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    gap: 0.5rem;
+    text-align: start;
+    color: inherit;
+  }
+  .operation-target-body {
+    display: grid;
+    min-width: 0;
+    gap: 0.15rem;
+  }
+  .operation-target-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 550;
+  }
+  .operation-target-metadata {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .operation-target-metadata > span {
+    overflow-wrap: anywhere;
+  }
+  .operation-target-id {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.75rem;
+  }
+  time {
+    white-space: nowrap;
+  }
+</style>

package/dist/repository/components/RepositoryOperationTarget.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocalGraphOperationNode } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    target: string;
+    operation?: LocalGraphOperationNode;
+};
+declare const RepositoryOperationTarget: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperationTarget = ReturnType<typeof RepositoryOperationTarget>;
+export default RepositoryOperationTarget;

package/dist/repository/components/RepositoryOperations.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { HistorySourcePicker } from "../controllers/history-source.js";
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import { repositoryWorkspaces } from "../controllers/workspaces.js";
+  import { onMount, onDestroy, untrack } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RepositoryLogHeader from "./RepositoryLogHeader.svelte";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import type { OperationController } from "../controllers/operation-controller.js";
+  import { initialOperationState } from "../controllers/operation-state.js";
+  import { operationRows } from "../controllers/graph/model.js";
+  import { createLogCanvas } from "../controllers/log-canvas.js";
+  import RepositoryOperationFiles from "./RepositoryOperationFiles.svelte";
+  import RepositoryOperationColumn from "./RepositoryOperationColumn.svelte";
+  import RepositoryShell from "./RepositoryShell.svelte";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  let {
+    controller,
+    sources,
+    initialOperation,
+    copyText,
+    onHistory,
+  }: {
+    sources?: HistorySourcePicker;
+    controller: OperationController;
+    initialOperation?: string;
+    copyText(value: string): Promise<void>;
+    onHistory?(operation: string): void;
+  } = $props();
+  let state = $state(initialOperationState());
+  const pins = $derived([
+    ...new Set([...state.heads, ...(state.operation ? [state.operation] : [])]),
+  ]);
+  const rows = $derived(operationRows(state.nodes));
+  const selection = $derived(
+    `${state.selected?.id ?? ""}/${state.files.path ?? ""}`,
+  );
+  const canvas = createLogCanvas();
+  let selectedOperation: string | undefined;
+  onDestroy(() => void canvas.dispose());
+  $effect(() => {
+    selection;
+    const id = untrack(() => state.selected?.id);
+    const path = untrack(() => state.files.path);
+    untrack(() => {
+      canvas.clear();
+      if (id) {
+        canvas.select(0, id);
+      }
+      if (id && id !== selectedOperation) canvas.open("diff");
+      selectedOperation = id;
+      if (path) {
+        canvas.select(1, path);
+        canvas.open("diff");
+      } else if (!id) canvas.close("diff");
+    });
+  });
+  onMount(() => {
+    const unsubscribe = controller.subscribe((value) => (state = value));
+    void controller.refresh(initialOperation);
+    return unsubscribe;
+  });
+</script>
+
+<RepositoryShell>
+  <section
+    class="repository-operations"
+    aria-label="Repository operation log"
+    aria-busy={state.busy}
+  >
+    <div class="operation-columns">
+      <ColumnCanvas.Root controller={canvas} aria-label="Operation log columns">
+        <ColumnCanvas.Column
+          id="revisions"
+          columnTitle="Op Log"
+          aria-label="Operations"
+        >
+          <RepositoryLogHeader
+            {sources}
+            {copyText}
+            nodes={state.nodes}
+            workspaces={repositoryWorkspaces(state.workspaceCommits)}
+            workspace={state.workspace}
+            onWorkspaceSelect={(next) => void controller.selectWorkspace(next)}
+            onWorkspaceOpen={() => void controller.loadWorkspaces()}
+            title="Op Log"
+            count={state.nodes.length}
+            operations={pins}
+            operation={state.operation}
+            selectionLabel="Pinned operation"
+            busy={state.busy}
+            onSelect={(operation) => controller.selectPin(operation)}
+            onRefresh={() => controller.refresh()}
+          />
+          <ColumnCanvas.Body>
+            {#if state.phase === "loading"}<RepositorySkeleton
+                label="Preparing operation log…"
+              />
+            {:else if state.phase === "unavailable"}<p role="status">
+                Operation log is unavailable for this vault. Refresh to try
+                again.
+              </p>
+            {:else if !state.headsReady}<RepositorySkeleton
+                label="Loading repository operations…"
+              />
+            {:else if !state.operation}<p role="status">
+                {state.heads.length > 1
+                  ? "Choose an operation to inspect its ancestry."
+                  : "No repository operations available."}
+              </p>{/if}
+            {#if state.snapshot}
+              {#if state.selected && !state.nodes.some((node) => node.id === state.selected?.id)}
+                <section aria-label="Selected operation outside loaded graph">
+                  <p>The selected operation is outside this graph page.</p>
+                  <RepositoryOperationFiles
+                    {copyText}
+                    commits={state.commits}
+                    onHistory={onHistory && state.selected
+                      ? () => onHistory?.(state.selected!.id)
+                      : undefined}
+                    {state}
+                    {controller}
+                    onOpenDiff={() => canvas.open("diff")}
+                    onOpenDetails={() => canvas.open("diff")}
+                  />
+                </section>
+              {/if}
+              {#if !state.ready && !state.busy}<p role="status">
+                  Operations are unavailable. Refresh to try again.
+                </p>
+              {:else if state.ready && !state.nodes.length}<p>
+                  No operations in this history.
+                </p>{/if}
+              <RepositoryGraph
+                operationTitles
+                {copyText}
+                commitLabel="operation ID"
+                revisions={rows}
+                selectedId={state.selected?.id}
+                label="Operation graph"
+                onSelect={(id) => {
+                  const node = state.nodes.find((item) => item.id === id);
+                  if (node)
+                    void (state.selected?.id === id
+                      ? controller.clearSelection()
+                      : controller.select(node));
+                }}
+              >
+                {#snippet selectedFiles()}<RepositoryOperationFiles
+                    {copyText}
+                    commits={state.commits}
+                    onHistory={onHistory && state.selected
+                      ? () => onHistory?.(state.selected!.id)
+                      : undefined}
+                    {state}
+                    {controller}
+                    onOpenDiff={() => canvas.open("diff")}
+                    onOpenDetails={() => canvas.open("diff")}
+                  />{/snippet}
+              </RepositoryGraph>
+              {#if state.next}<Button
+                  size="sm"
+                  disabled={state.busy}
+                  onclick={() => controller.more()}>More operations</Button
+                >{/if}
+              {#if state.nodes.length === 200}<p>
+                  Showing the first 200 operations.
+                </p>{/if}
+            {/if}
+          </ColumnCanvas.Body>
+        </ColumnCanvas.Column>
+        <RepositoryOperationColumn {state} {controller} {copyText} />
+      </ColumnCanvas.Root>
+    </div>
+  </section>
+</RepositoryShell>
+
+<style>
+  .repository-operations {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    background: var(--ui-workspace-view-background, var(--background));
+    color: var(--ui-workspace-view-foreground, var(--foreground));
+    font-size: 0.875rem;
+  }
+  .operation-columns {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+  p {
+    padding: 0.75rem;
+  }
+</style>

package/dist/repository/components/RepositoryOperations.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+import type { OperationController } from "../controllers/operation-controller.js";
+type $$ComponentProps = {
+    sources?: HistorySourcePicker;
+    controller: OperationController;
+    initialOperation?: string;
+    copyText(value: string): Promise<void>;
+    onHistory?(operation: string): void;
+};
+declare const RepositoryOperations: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperations = ReturnType<typeof RepositoryOperations>;
+export default RepositoryOperations;

package/dist/repository/components/RepositoryPanel.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import type { HistorySourcePicker } from "../controllers/history-source.js";
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import RepositoryConflictResolution from "./conflicts/RepositoryConflictResolution.svelte";
+  import { repositoryWorkspaces } from "../controllers/workspaces.js";
+  import { onMount, onDestroy, untrack } from "svelte";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import { createLogCanvas } from "../controllers/log-canvas.js";
+  import RepositoryLogHeader from "./RepositoryLogHeader.svelte";
+  import type { HistoryController } from "../controllers/history-controller.js";
+  import { initialHistoryState } from "../controllers/history-state.js";
+  import RepositoryRevisions from "./RepositoryRevisions.svelte";
+  import RepositoryDiffColumn from "./RepositoryDiffColumn.svelte";
+  import RepositoryShell from "./RepositoryShell.svelte";
+  import RepositoryRestoreDialog from "./RepositoryRestoreDialog.svelte";
+  import type { RestoreController } from "../controllers/restore.js";
+  import { openHistoryRevision } from "../controllers/open-history-revision.js";
+  let {
+    controller,
+    sources,
+    initialOperation,
+    initialRevision,
+    initialLoad,
+    copyText,
+    restore,
+  }: {
+    sources?: HistorySourcePicker;
+    controller: HistoryController;
+    initialOperation?: string;
+    initialRevision?: string;
+    initialLoad?: Promise<void>;
+    copyText(value: string): Promise<void>;
+    restore?: RestoreController;
+  } = $props();
+  let snapshot = $state(initialHistoryState());
+  let conflictsOpen = $state(false);
+  const selectionContext = $derived(
+    `${snapshot.operation ?? ""}/${snapshot.revision?.id ?? ""}`,
+  );
+  $effect(() => {
+    selectionContext;
+    untrack(() => {
+      conflictsOpen = false;
+    });
+  });
+  const operations = $derived([
+    ...new Set([
+      ...snapshot.heads,
+      ...(snapshot.operation ? [snapshot.operation] : []),
+    ]),
+  ]);
+  const canvas = createLogCanvas();
+  onDestroy(() => void canvas.dispose());
+  const selection = $derived(
+    `${snapshot.revision?.id ?? ""}/${snapshot.path ?? ""}`,
+  );
+  const restoreCheckpoint = $derived(
+    snapshot.revision
+      ? snapshot.revision.workspaces.length &&
+        snapshot.revision.parents.length === 1
+        ? snapshot.revision.parents[0]
+        : snapshot.revision.id
+      : undefined,
+  );
+  $effect(() => {
+    selection;
+    const revision = untrack(() => snapshot.revision?.id);
+    const path = untrack(() => snapshot.path);
+    untrack(() => {
+      canvas.clear();
+      if (revision) {
+        canvas.select(0, revision);
+      }
+      if (path) {
+        canvas.select(1, path);
+        canvas.open("diff");
+      } else canvas.close("diff");
+    });
+  });
+  onMount(() => {
+    let mounted = true;
+    const unsubscribe = controller.subscribe((value) => (snapshot = value));
+    void (initialLoad ?? controller.refresh(initialOperation)).then(() => {
+      if (mounted && initialRevision)
+        return openHistoryRevision(controller, initialRevision);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  });
+</script>
+
+<RepositoryShell>
+  <section
+    class="repository-panel"
+    aria-label="Repository history"
+    aria-busy={snapshot.busy}
+  >
+    <div class="repository-columns">
+      <ColumnCanvas.Root
+        controller={canvas}
+        aria-label="Repository history columns"
+      >
+        <ColumnCanvas.Column
+          id="revisions"
+          columnTitle="JJ Log"
+          aria-label="Revisions"
+        >
+          <RepositoryLogHeader
+            {sources}
+            {copyText}
+            workspaces={repositoryWorkspaces(snapshot.commits)}
+            workspace={snapshot.workspace}
+            onWorkspaceSelect={(next) => void controller.selectWorkspace(next)}
+            title="JJ Log"
+            count={snapshot.commits.length}
+            {operations}
+            operation={snapshot.operation}
+            busy={snapshot.busy}
+            onSelect={(operation) => controller.selectOperation(operation)}
+            onRefresh={() => controller.refresh()}
+          />
+          <ColumnCanvas.Body>
+            {#if snapshot.phase === "loading"}<RepositorySkeleton
+                label="Preparing repository history…"
+              />
+            {:else if snapshot.phase === "unavailable"}<p role="status">
+                Repository history is unavailable for this vault. Refresh to try
+                again.
+              </p>
+            {:else if !snapshot.headsReady}<RepositorySkeleton
+                label="Loading repository operations…"
+              />
+            {:else if !snapshot.operation}<p role="status">
+                {snapshot.heads.length > 1
+                  ? "Choose an operation to inspect its history."
+                  : "No repository operations available."}
+              </p>
+            {/if}
+
+            {#if snapshot.snapshot}
+              <RepositoryRevisions
+                state={snapshot}
+                {controller}
+                {copyText}
+                onOpenDiff={() => canvas.open("diff")}
+                onResolveConflicts={() => (conflictsOpen = true)}
+                onRestoreVault={restore?.service.previewVault &&
+                restoreCheckpoint
+                  ? () => restore.prepareVault(restoreCheckpoint!)
+                  : undefined}
+              />
+            {/if}
+          </ColumnCanvas.Body>
+        </ColumnCanvas.Column>
+        <RepositoryDiffColumn
+          state={snapshot}
+          {controller}
+          onRestore={restore && snapshot.revision && snapshot.path
+            ? () => restore.prepare(restoreCheckpoint!, snapshot.path!)
+            : undefined}
+        />
+      </ColumnCanvas.Root>
+    </div>
+  </section>
+  {#snippet surface()}
+    {#if snapshot.revision?.conflicted}
+      {#key snapshot.revision.id}
+        <RepositoryConflictResolution
+          open={conflictsOpen}
+          conflicts={snapshot.conflicts}
+          ready={snapshot.conflictsReady}
+          busy={snapshot.busy}
+          onLoad={() => void controller.loadConflicts()}
+          onClose={() => (conflictsOpen = false)}
+        />
+      {/key}
+    {/if}
+  {/snippet}
+</RepositoryShell>
+{#if restore}<RepositoryRestoreDialog controller={restore} />{/if}
+
+<style>
+  .repository-panel {
+    container: repository-history / inline-size;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    color: var(--ui-workspace-view-foreground, var(--foreground));
+    background: var(--ui-workspace-view-background, var(--background));
+    font-size: 0.875rem;
+  }
+  p {
+    margin: 0;
+    padding: 1rem;
+  }
+  .repository-columns {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+</style>

package/dist/repository/components/RepositoryPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+import type { HistoryController } from "../controllers/history-controller.js";
+import type { RestoreController } from "../controllers/restore.js";
+type $$ComponentProps = {
+    sources?: HistorySourcePicker;
+    controller: HistoryController;
+    initialOperation?: string;
+    initialRevision?: string;
+    initialLoad?: Promise<void>;
+    copyText(value: string): Promise<void>;
+    restore?: RestoreController;
+};
+declare const RepositoryPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryPanel = ReturnType<typeof RepositoryPanel>;
+export default RepositoryPanel;