@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryBackupStatus.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import RepositoryUpstreamActions from "./RepositoryUpstreamActions.svelte";
+  import type { SyncController } from "../controllers/sync-controller.js";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import History from "@lucide/svelte/icons/history";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import Check from "@lucide/svelte/icons/check";
+  import CircleAlert from "@lucide/svelte/icons/circle-alert";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import type {
+    BackupController,
+    BackupStatus,
+  } from "../controllers/backup.js";
+  let {
+    controller,
+    openRevision,
+    copyText,
+    upstream,
+  }: {
+    controller: BackupController;
+    openRevision(operation: string, revision: string): Promise<void>;
+    copyText(value: string): Promise<void>;
+    upstream?: SyncController;
+  } = $props();
+  let value: BackupStatus = $state({
+    phase: "saving",
+    checkpoint: null,
+    error: null,
+  });
+  let open = $state(false);
+  const label = $derived(
+    value.phase === "saving"
+      ? "Saving locally"
+      : value.phase === "ready"
+        ? "Saved locally"
+        : value.phase === "closed"
+          ? "History paused"
+          : "History needs attention",
+  );
+  onMount(() => controller.subscribe((status) => (value = status)));
+  async function inspect() {
+    if (!value.checkpoint) return;
+    open = false;
+    await openRevision(value.checkpoint.operation, value.checkpoint.commit);
+  }
+</script>
+
+<div
+  class="backup-status"
+  aria-label="Vault backup"
+  aria-busy={value.phase === "saving"}
+>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="summary"
+          aria-label={`Vault history: ${label}`}
+        >
+          {#if value.phase === "ready"}<Check aria-hidden="true" />
+          {:else if value.phase === "failed"}<CircleAlert aria-hidden="true" />
+          {:else}<History aria-hidden="true" />{/if}
+          {label}
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      side="top"
+      align="end"
+      collisionPadding={8}
+      sideOffset={6}
+      style="width:min(26rem,calc(100vw - 1rem));padding:0"
+    >
+      <section class="backup-card" aria-label="Vault history details">
+        <header>
+          <History aria-hidden="true" /><strong>Local history</strong>
+          <RepositoryUpstreamActions
+            controller={upstream}
+            unavailable={value.phase !== "ready"}
+          />
+        </header>
+        {#if value.checkpoint}
+          <button type="button" class="subject" onclick={inspect}
+            >{value.checkpoint.description}</button
+          >
+          <RepositoryIdentifiers
+            {copyText}
+            placement="inline"
+            commitId={value.checkpoint.commit}
+            changeId={encodeJjChangeId(value.checkpoint.change_id)}
+          />
+          <span
+            >Last saved <RelativeTime
+              timestamp={value.checkpoint.timestamp_millis}
+            /></span
+          >
+          <p>
+            Saved editor and external file changes are captured automatically.
+            Unsaved editor changes appear after saving.
+          </p>
+          <button type="button" class="open-log" onclick={inspect}
+            >Open in JJ Log</button
+          >
+        {:else if value.phase === "saving"}
+          <div
+            class="loading"
+            role="status"
+            aria-label="Preparing local history"
+          >
+            <Skeleton style="height:1rem;width:90%" /><Skeleton
+              style="height:1rem;width:65%"
+            />
+          </div>
+        {:else}<p>
+            {value.phase === "closed"
+              ? "Automatic history is paused in Repository History settings."
+              : "History is unavailable. Retry to resume automatic capture."}
+          </p>{/if}
+      </section>
+    </Popover.Content>
+  </Popover.Root>
+  <button
+    type="button"
+    class="refresh"
+    aria-label="Save vault checkpoint now"
+    title="Save vault checkpoint now"
+    disabled={value.phase === "saving" || value.phase === "closed"}
+    onclick={() => controller.refresh()}
+    ><RefreshCw aria-hidden="true" /></button
+  >
+</div>
+
+<style>
+  .backup-status {
+    display: inline-flex;
+    min-height: 1.25rem;
+    align-items: stretch;
+    border: 0;
+    border-radius: var(--radius);
+    color: inherit;
+    font: inherit;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 6%,
+      var(--ui-workspace-panel)
+    );
+  }
+  button {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button:hover {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+  button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 1px;
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .summary,
+  .refresh {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0 0.4rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .summary {
+    border-radius: var(--radius) 0 0 var(--radius);
+  }
+  .refresh {
+    border-radius: 0 var(--radius) var(--radius) 0;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 12%,
+      var(--ui-workspace-panel)
+    );
+  }
+  .backup-status :global(svg),
+  header :global(svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex: none;
+  }
+  .backup-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    padding: 0.85rem;
+    color: var(--foreground);
+    font-size: 0.8rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .subject {
+    padding: 0;
+    text-align: left;
+    font-weight: 600;
+  }
+  .subject:hover {
+    background: transparent;
+    color: var(--primary);
+  }
+  p {
+    margin: 0;
+    color: var(--muted-foreground);
+    line-height: 1.5;
+  }
+  .open-log {
+    align-self: flex-start;
+    padding: 0.35rem 0.5rem;
+    border-radius: var(--radius);
+  }
+  .loading {
+    display: grid;
+    gap: 0.6rem;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { SyncController } from "../controllers/sync-controller.js";
+import type { BackupController } from "../controllers/backup.js";
+type $$ComponentProps = {
+    controller: BackupController;
+    openRevision(operation: string, revision: string): Promise<void>;
+    copyText(value: string): Promise<void>;
+    upstream?: SyncController;
+};
+declare const RepositoryBackupStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBackupStatus = ReturnType<typeof RepositoryBackupStatus>;
+export default RepositoryBackupStatus;

package/dist/repository/components/RepositoryChangedFiles.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import {
+    FileListing,
+    FileListingViewModeToggle,
+    type FileListingFile,
+    type FileListingViewMode,
+  } from "@lapismd/design-core/diff";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  let {
+    files,
+    selectedPath,
+    initialLoading = false,
+    loading = false,
+    hasMore = false,
+    onSelect,
+    onMore,
+  }: {
+    files: FileListingFile[];
+    selectedPath?: string;
+    initialLoading?: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    onSelect(path: string): void;
+    onMore(): void;
+  } = $props();
+  let mode = $state<FileListingViewMode>("tree");
+</script>
+
+<section
+  class="repository-changed-files"
+  aria-label="Changed files"
+  aria-busy={loading || initialLoading}
+>
+  <header>
+    <strong>Changed files</strong><span class="file-count"
+      >{#if initialLoading}<Skeleton />{:else}{files.length}{/if}</span
+    ><FileListingViewModeToggle bind:mode />
+  </header>
+  <div class="file-list">
+    {#if initialLoading}<RepositorySkeleton
+        kind="files"
+        label="Loading changed files…"
+      />
+    {:else}<FileListing
+        {files}
+        {mode}
+        {selectedPath}
+        virtualize={false}
+        {hasMore}
+        {loading}
+        onSelectPath={onSelect}
+        onLoadMore={onMore}
+      />{/if}
+  </div>
+</section>
+
+<style>
+  .repository-changed-files {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    max-height: 16rem;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: var(--background);
+    --ui-diff-row-hover: color-mix(
+      in srgb,
+      var(--foreground) 7%,
+      var(--background)
+    );
+    --ui-diff-selected: color-mix(
+      in srgb,
+      var(--foreground) 12%,
+      var(--background)
+    );
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.65rem;
+    border-bottom: 1px solid var(--border);
+  }
+  strong {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8125rem;
+  }
+  .file-count {
+    display: inline-flex;
+    border-radius: 999px;
+    padding: 0.05rem 0.4rem;
+    background: var(--muted);
+    font-size: 0.75rem;
+  }
+  .file-list {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    padding: 0.25rem 0.35rem;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import { type FileListingFile } from "@lapismd/design-core/diff";
+type $$ComponentProps = {
+    files: FileListingFile[];
+    selectedPath?: string;
+    initialLoading?: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    onSelect(path: string): void;
+    onMore(): void;
+};
+declare const RepositoryChangedFiles: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryChangedFiles = ReturnType<typeof RepositoryChangedFiles>;
+export default RepositoryChangedFiles;

package/dist/repository/components/RepositoryCommitMessage.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { MarkdownContent } from "@lapismd/design-core/chat";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  let { description }: { description: string } = $props();
+  const id = $props.id();
+  let expanded = $state(false),
+    overflowing = $state(false);
+  // The graph row owns the subject; its expanded area retains the full body.
+  const body = $derived(description.split("\n").slice(1).join("\n").trim());
+  $effect(() => {
+    void description;
+    expanded = false;
+  });
+  function measure(node: HTMLDivElement) {
+    const update = () => {
+      const rem = parseFloat(
+        getComputedStyle(node.ownerDocument.documentElement).fontSize,
+      );
+      overflowing = node.getBoundingClientRect().height > 9 * rem + 1;
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+  }
+</script>
+
+{#if body}
+  <section
+    class="repository-review-commit-message"
+    aria-label="Commit message body"
+  >
+    <div
+      {id}
+      class="repository-review-message-viewport"
+      data-clamped={(overflowing && !expanded) || undefined}
+      onfocusin={() => {
+        // Keyboard focus on Markdown links must reveal their full context.
+        if (overflowing) expanded = true;
+      }}
+    >
+      <div use:measure>
+        <MarkdownContent content={body} compact fullWidth />
+      </div>
+    </div>
+    {#if overflowing}
+      <div class="repository-review-message-action">
+        <Button
+          variant="ghost"
+          size="xs"
+          aria-controls={id}
+          aria-expanded={expanded}
+          aria-label={expanded
+            ? "View less of commit message"
+            : "View more of commit message"}
+          onclick={() => (expanded = !expanded)}
+        >
+          {expanded ? "View less" : "View more"}
+          <ChevronDownIcon
+            data-icon="inline-end"
+            data-expanded={expanded}
+            aria-hidden="true"
+          />
+        </Button>
+      </div>
+    {/if}
+  </section>
+{/if}
+
+<style>
+  .repository-review-commit-message {
+    min-width: 0;
+    margin: 0.25rem 0.75rem 0.75rem;
+    padding: 0.75rem;
+    border-radius: calc(var(--radius) * 0.8);
+    background: color-mix(in srgb, var(--foreground) 5%, var(--background));
+    --ui-chat-markdown-padding: 0;
+    --ui-chat-markdown-font-size: 0.8125rem;
+    --ui-chat-markdown-line-height: 1.5;
+  }
+  .repository-review-message-viewport[data-clamped] {
+    max-height: 9rem;
+    overflow: hidden;
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+  }
+  .repository-review-message-action {
+    display: flex;
+    margin-block-start: 0.375rem;
+  }
+  .repository-review-message-action :global([data-expanded="true"]) {
+    transform: rotate(180deg);
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    description: string;
+};
+declare const RepositoryCommitMessage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryCommitMessage = ReturnType<typeof RepositoryCommitMessage>;
+export default RepositoryCommitMessage;

package/dist/repository/components/RepositoryCommitPicker.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { LocalGraphCommit } from "@lapismd/jj-history";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { TagList } from "@lapismd/design-core/shadcn/tag-list";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import RepositoryRevisionOption from "./RepositoryRevisionOption.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import RepositoryParentSummary from "./RepositoryParentSummary.svelte";
+  import RepositoryComparisonBar from "./RepositoryComparisonBar.svelte";
+  import RepositoryComparisonTime from "./RepositoryComparisonTime.svelte";
+  import {
+    repositoryCommitSearch,
+    repositoryCommitTags,
+  } from "../controllers/tags.js";
+  import "./repository-commit-picker.css";
+  let {
+    parents,
+    revisions,
+    target,
+    loading = false,
+    onOpen,
+    onSelect,
+    statistics,
+    copyText,
+    comparisonLabel = "Comparison parent",
+  }: {
+    parents: readonly string[];
+    revisions: readonly LocalGraphCommit[];
+    target?: string;
+    loading?: boolean;
+    onOpen(): void;
+    onSelect(id: string): void;
+    statistics?: Snippet;
+    copyText(value: string): Promise<void>;
+    comparisonLabel?: string;
+  } = $props();
+  const id = $props.id();
+  let open = $state(false),
+    query = $state(""),
+    highlighted = $state("");
+  let searchInput = $state<HTMLInputElement | null>(null);
+  const options = $derived(
+    parents.map((id) => ({
+      id,
+      commit: revisions.find((commit) => commit.id === id),
+    })),
+  );
+  const selected = $derived(options.find((option) => option.id === target));
+  const preview = $derived(
+    options.find((option) => option.id === highlighted) ?? selected,
+  );
+  const visible = $derived(
+    options.filter((option) =>
+      repositoryCommitSearch(option.id, option.commit).includes(
+        query.trim().toLocaleLowerCase(),
+      ),
+    ),
+  );
+  const missing = $derived(options.some((option) => !option.commit));
+  function handleOpen(next: boolean) {
+    open = next;
+    if (next) {
+      query = "";
+      highlighted = target ?? parents[0] ?? "";
+      onOpen();
+    }
+  }
+  function choose(id: string) {
+    open = false;
+    onSelect(id);
+  }
+</script>
+
+<Popover.Root {open} onOpenChange={handleOpen}>
+  <RepositoryComparisonBar inset label={comparisonLabel}>
+    <div class="repository-review-parent-selector">
+      <Popover.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="outline"
+            size="xs"
+            class="repository-review-parent-trigger"
+            role="combobox"
+            aria-label={comparisonLabel === "Previous version"
+              ? "Compare with previous version"
+              : "Compare with parent"}
+            aria-describedby={`${id}-value`}
+            value={target ?? ""}
+            data-parent={target}
+          >
+            <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
+          </Button>
+        {/snippet}
+      </Popover.Trigger>
+      <div class="repository-review-parent-value" id={`${id}-value`}>
+        <RepositoryParentSummary
+          {target}
+          author={selected?.commit?.author.name}
+          email={selected?.commit?.author.email}
+          description={selected?.commit?.description}
+        />
+        <span class="repository-review-parent-identifiers">
+          <RepositoryIdentifiers
+            {copyText}
+            commitId={target ?? ""}
+            changeId={selected?.commit
+              ? encodeJjChangeId(selected.commit.change_id)
+              : ""}
+            placement="inline"
+          />
+        </span>
+        <RepositoryComparisonTime
+          timestamp={selected?.commit
+            ? Number(selected.commit.author.timestamp.millis)
+            : undefined}
+        />
+      </div>
+    </div>
+  </RepositoryComparisonBar>
+  <Popover.Content
+    align="start"
+    sideOffset={6}
+    class="repository-commit-picker repository-review-identifier-surface"
+    role="dialog"
+    aria-label={`Choose ${comparisonLabel.toLocaleLowerCase()}`}
+    onOpenAutoFocus={(event) => {
+      event.preventDefault();
+      searchInput?.focus();
+    }}
+    style="--ui-popover-width: min(42rem, calc(100vw - 2rem)); --ui-popover-padding: 0; --ui-popover-gap: 0"
+  >
+    <CommandView.Root
+      class="repository-review-picker-options"
+      bind:value={highlighted}
+      label={`Select ${comparisonLabel.toLocaleLowerCase()}`}
+      shouldFilter={false}
+    >
+      <RepositoryPickerSearch
+        grid
+        bind:inputRef={searchInput}
+        bind:query
+        placeholder="Find commit"
+        label={`Select ${comparisonLabel.toLocaleLowerCase()}`}
+        closeLabel="Close commit selector"
+      />
+      <CommandView.List role="grid">
+        {#if !visible.length}<CommandView.Empty role="row"
+            ><span role="gridcell">No matching commits</span></CommandView.Empty
+          >
+        {:else}<CommandView.Group role="rowgroup">
+            {#each visible as option (option.id)}
+              <CommandView.Item
+                role="row"
+                value={option.id}
+                keywords={[repositoryCommitSearch(option.id, option.commit)]}
+                aria-label={`Select ${comparisonLabel.toLocaleLowerCase()} ${option.commit?.description.split("\n")[0] || "Unknown version"} (${option.id})`}
+                data-commit={option.id}
+                class="repository-commit-picker-option"
+                data-current={option.id === target || undefined}
+                onSelect={() => choose(option.id)}
+              >
+                <span role="gridcell" class="repository-commit-picker-selection"
+                  >{#if option.id === target}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{/if}</span
+                >
+                <RepositoryRevisionOption
+                  target={option.id}
+                  commit={option.commit}
+                  {copyText}
+                />
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+      <CommandView.Footer>
+        <section aria-label="Commit tag preview" data-commit={preview?.id}>
+          <TagList
+            tags={repositoryCommitTags(preview?.commit)}
+            label="Preview commit tags"
+          />
+        </section>
+        {#if statistics}{@render statistics()}{/if}
+        {#if missing}<Button
+            variant="ghost"
+            size="sm"
+            disabled={loading}
+            onclick={onOpen}
+            >{loading
+              ? "Loading parent details…"
+              : "Retry parent details"}</Button
+          >{/if}
+      </CommandView.Footer>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { LocalGraphCommit } from "@lapismd/jj-history";
+import "./repository-commit-picker.css";
+type $$ComponentProps = {
+    parents: readonly string[];
+    revisions: readonly LocalGraphCommit[];
+    target?: string;
+    loading?: boolean;
+    onOpen(): void;
+    onSelect(id: string): void;
+    statistics?: Snippet;
+    copyText(value: string): Promise<void>;
+    comparisonLabel?: string;
+};
+declare const RepositoryCommitPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryCommitPicker = ReturnType<typeof RepositoryCommitPicker>;
+export default RepositoryCommitPicker;