jazz-tools 0.18.31 → 0.18.33

package/src/inspector/viewer/history-view.tsx

@@ -0,0 +1,379 @@
+import {
+  AccountRole,
+  BinaryStreamStart,
+  CoID,
+  JsonValue,
+  LocalNode,
+  OpID,
+  RawCoValue,
+  Role,
+} from "cojson";
+import { useMemo } from "react";
+import { styled } from "goober";
+import { isCoId } from "./types";
+import { AccountOrGroupText } from "./account-or-group-text";
+import { DataTable, ColumnDef } from "../ui/data-table";
+import { Heading } from "../ui/heading";
+import { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+import {
+  DeletionOpPayload,
+  InsertionOpPayload,
+} from "cojson/dist/coValues/coList.js";
+import {
+  BinaryStreamChunk,
+  BinaryStreamEnd,
+} from "cojson/dist/coValues/coStream.js";
+import { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
+import { Icon } from "../ui";
+
+type HistoryEntry = {
+  id: string;
+  author: string;
+  action: string;
+  timestamp: Date;
+  isValid: boolean;
+};
+
+export function HistoryView({
+  coValue,
+  node,
+}: {
+  coValue: RawCoValue;
+  node: LocalNode;
+}) {
+  const transactions = useMemo(
+    () => getHistory(coValue),
+    [coValue.core.verifiedTransactions.length],
+  );
+
+  const columns: ColumnDef<HistoryEntry>[] = [
+    {
+      id: "author",
+      header: "Author",
+      accessor: (row) => (
+        <>
+          {row.isValid || (
+            <RedTooltip data-text="This transaction is invalid and is not used">
+              <Icon
+                name="caution"
+                size="xs"
+                color="red"
+                style={{
+                  display: "inline-block",
+                  verticalAlign: "middle",
+                  marginRight: "0.25rem",
+                }}
+              />
+            </RedTooltip>
+          )}
+          {row.author.startsWith("co_") ? (
+            <AccountOrGroupText
+              coId={row.author as CoID<RawCoValue>}
+              node={node}
+              showId
+            />
+          ) : (
+            row.author
+          )}
+        </>
+      ),
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.author.localeCompare(b.author),
+      filterFn: (row, filterValue) =>
+        row.author.toLowerCase().includes(filterValue.toLowerCase()),
+    },
+    {
+      id: "action",
+      header: "Action",
+      accessor: (row) => row.action,
+      sortable: false,
+      filterable: true,
+      sortFn: (a, b) => a.action.localeCompare(b.action),
+    },
+    {
+      id: "timestamp",
+      header: "Timestamp",
+      accessor: (row) => row.timestamp.toISOString(),
+      sortable: true,
+      filterable: true,
+      sortFn: (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
+    },
+  ];
+
+  return (
+    <section style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <Heading>CoValue history</Heading>
+      <DataTable
+        columns={columns}
+        data={transactions}
+        pageSize={10}
+        initialSort={{ columnId: "timestamp", direction: "desc" }}
+        getRowKey={(row) => row.id}
+        emptyMessage="No history available"
+      />
+    </section>
+  );
+}
+
+function getTransactionChanges(
+  tx: VerifiedTransaction,
+  coValue: RawCoValue,
+): JsonValue[] {
+  if (tx.isValid === false && tx.tx.privacy === "private") {
+    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
+    if (!readKey) {
+      throw new Error("Read key not found");
+    }
+
+    return (
+      coValue.core.verified.decryptTransaction(
+        tx.txID.sessionID,
+        tx.txID.txIndex,
+        readKey,
+      ) ?? []
+    );
+
+    // const decryptedString = coValue.core.verified.sessions.get(tx.txID.sessionID)?.impl.decryptNextTransactionChangesJson(tx.txID.txIndex, readKey);
+
+    // return decryptedString ? [decryptedString] : [];
+  }
+
+  return tx.changes ?? (tx.tx as any).changes ?? [];
+}
+
+function getHistory(coValue: RawCoValue): HistoryEntry[] {
+  return coValue.core.verifiedTransactions.flatMap((tx, index) => {
+    const changes = getTransactionChanges(tx, coValue);
+
+    return changes.map((change, changeIndex) => ({
+      id: `${tx.txID.sessionID.toString()}-${tx.txID.txIndex}-${index}-${changeIndex}`,
+      author: tx.author,
+      action: mapTransactionToAction(change, coValue),
+      timestamp: new Date(tx.currentMadeAt),
+      isValid: tx.isValid,
+    }));
+  });
+}
+
+function mapTransactionToAction(
+  change: JsonValue,
+  coValue: RawCoValue,
+): string {
+  // Group changes
+  if (isUserPromotion(change)) {
+    if (change.value === "revoked") {
+      return `${change.key} has been revoked`;
+    }
+
+    return `${change.key} has been promoted to ${change.value}`;
+  }
+
+  if (isGroupExtension(change)) {
+    const child = change.key.slice(6);
+    return `Group became a member of ${child}`;
+  }
+
+  if (isGroupExtendRevocation(change)) {
+    const child = change.key.slice(6);
+    return `Group's membership of ${child} has been revoked.`;
+  }
+
+  if (isGroupPromotion(change)) {
+    const parent = change.key.slice(7);
+    return `Group ${parent} has been promoted to ${change.value}`;
+  }
+
+  if (isKeyRevelation(change)) {
+    const [key, target] = change.key.split("_for_");
+    return `Key "${key}" has been revealed to "${target}"`;
+  }
+
+  // coList changes
+  if (isItemAppend(change)) {
+    if (change.after === "start") {
+      return `"${change.value}" has been appended`;
+    }
+
+    const after = findListChange(change.after, coValue);
+
+    if (after === undefined) {
+      return `"${change.value}" has been inserted after undefined item`;
+    }
+
+    return `"${change.value}" has been inserted after "${(after as any).value}"`;
+  }
+
+  if (isItemPrepend(change)) {
+    if (change.before === "end") {
+      return `"${change.value}" has been prepended`;
+    }
+
+    const before = findListChange(change.before, coValue);
+
+    if (before === undefined) {
+      return `"${change.value}" has been inserted before undefined item`;
+    }
+
+    return `"${change.value}" has been inserted before "${(before as any).value}"`;
+  }
+
+  if (isItemDeletion(change)) {
+    const insertion = findListChange(change.insertion, coValue);
+    if (insertion === undefined) {
+      return `An undefined item has been deleted`;
+    }
+
+    return `"${(insertion as any).value}" has been deleted`;
+  }
+
+  // coStream changes
+  if (isStreamStart(change)) {
+    return `Stream started with mime type "${change.mimeType}" and file name "${change.fileName}"`;
+  }
+
+  if (isStreamChunk(change)) {
+    return `Stream chunk added`;
+  }
+
+  if (isStreamEnd(change)) {
+    return `Stream ended`;
+  }
+
+  // coMap changes
+  if (isPropertySet(change)) {
+    return `Property "${change.key}" has been set to "${change.value}"`;
+  }
+
+  if (isPropertyDeletion(change)) {
+    return `Property "${change.key}" has been deleted`;
+  }
+
+  return "Unknown action: " + JSON.stringify(change);
+}
+
+const findListChange = (
+  opId: OpID,
+  coValue: RawCoValue,
+): JsonValue | undefined => {
+  return coValue.core.verifiedTransactions.find(
+    (tx) =>
+      tx.txID.sessionID === opId.sessionID && tx.txID.txIndex === opId.txIndex,
+  )?.changes?.[opId.changeIdx];
+};
+
+const isGroupExtension = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "extend">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "extend";
+};
+
+const isGroupExtendRevocation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "revoked">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "revoked";
+};
+
+const isGroupPromotion = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`parent_co_${string}`, AccountRole>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.startsWith("parent_co_");
+};
+
+const isUserPromotion = (
+  change: any,
+): change is Extract<MapOpPayload<CoID<RawCoValue>, Role>, { op: "set" }> => {
+  return (
+    change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone")
+  );
+};
+
+const isKeyRevelation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`${string}_for_${string}`, string>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.includes("_for_");
+};
+
+const isPropertySet = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "set" }> => {
+  return change?.op === "set" && "key" in change && "value" in change;
+};
+const isPropertyDeletion = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "del" }> => {
+  return change?.op === "del" && "key" in change;
+};
+
+const isItemAppend = (
+  change: any,
+): change is Extract<InsertionOpPayload<any>, { op: "app" }> => {
+  return change?.op === "app" && "after" in change && "value" in change;
+};
+const isItemPrepend = (
+  change: any,
+): change is Extract<InsertionOpPayload<any>, { op: "pre" }> => {
+  return change?.op === "pre" && "before" in change && "value" in change;
+};
+
+const isItemDeletion = (
+  change: any,
+): change is Extract<DeletionOpPayload, { op: "del" }> => {
+  return change?.op === "del" && "insertion" in change;
+};
+
+const isStreamStart = (change: any): change is BinaryStreamStart => {
+  return change?.type === "start" && "mimeType" in change;
+};
+
+const isStreamChunk = (change: any): change is BinaryStreamChunk => {
+  return change?.type === "chunk" && "chunk" in change;
+};
+
+const isStreamEnd = (change: any): change is BinaryStreamEnd => {
+  return change?.type === "end";
+};
+
+const RedTooltip = styled("span")`
+  position:relative; /* making the .tooltip span a container for the tooltip text */
+  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
+
+  &:before {
+    content: attr(data-text);
+    background-color: red;
+    position:absolute;
+
+    /* vertically center */
+    top:50%;
+    transform:translateY(-50%);
+
+    /* move to right */
+    left:100%;
+    margin-left:15px; /* and add a small left margin */
+
+    /* basic styles */
+    width:200px;
+    padding:10px;
+    border-radius:10px;
+    color: #fff;
+    text-align:center;
+
+    display:none; /* hide by default */
+  }
+
+  &:hover:before {
+    display:block;
+  }
+`;

package/src/inspector/viewer/page.tsx

@@ -22,6 +22,7 @@ import { TableView } from "./table-viewer.js";
 import { TypeIcon } from "./type-icon.js";
 import { PageInfo } from "./types.js";
 import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue.js";
+import { HistoryView } from "./history-view.js";
 
 interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   isTopLevel?: boolean;
@@ -240,6 +241,7 @@ export function Page(props: PageProps) {
             </Text>
           </>
         )}
+        {value && <HistoryView coValue={value} node={node} />}
       </ContentContainer>
     </PageContainer>
   );

package/src/media/create-image-factory.test.ts

@@ -74,7 +74,7 @@ describe("createImage", async () => {
 
     getImageSize.mockResolvedValue({ width: 1, height: 1 });
     getPlaceholderBase64.mockResolvedValue(
-      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
     );
 
     const image = await createImage(imageBlob, {
@@ -204,7 +204,7 @@ describe("createImage", async () => {
 
 // 1x1 png
 const OnePixel = atob(
-  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
 );
 
 // Image 1920x400

package/src/svelte/media/image.svelte

@@ -113,7 +113,7 @@
     [
       Uint8Array.from(
         atob(
-          "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+          "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
         ),
         (c) => c.charCodeAt(0),
       ),

package/src/svelte/tests/media/image.svelte.test.ts

@@ -626,7 +626,7 @@ describe("Image", async () => {
 
       const img = container.querySelector("img");
       expect(img).toBeDefined();
-      expect(img!.src).toBe("blob:test-70");
+      expect(img!.src).toBe("blob:test-68");
     });
 
     it("should load the image when threshold is reached", async () => {

package/src/tools/coValues/coFeed.ts

@@ -286,12 +286,12 @@ export class CoFeed<out Item = any> extends CoValueBase implements CoValue {
   static load<F extends CoFeed, const R extends RefsToResolve<F> = true>(
     this: CoValueClass<F>,
     id: ID<F>,
-    options: {
+    options?: {
       resolve?: RefsToResolveStrict<F, R>;
       loadAs?: Account | AnonymousJazzAgent;
     },
   ): Promise<Resolved<F, R> | null> {
-    return loadCoValueWithoutMe(this, id, options);
+    return loadCoValueWithoutMe(this, id, options ?? {});
   }
 
   /**

package/src/tools/coValues/interfaces.ts

@@ -709,7 +709,7 @@ function loadContentPiecesFromCoValue(
     }
   }
 
-  const pieces = core.verified.newContentSince(undefined) ?? [];
+  const pieces = core.newContentSince() ?? [];
 
   for (const piece of pieces) {
     contentPieces.push(piece);

package/src/tools/implementation/zodSchema/schemaTypes/FileStreamSchema.ts

@@ -78,7 +78,7 @@ export class FileStreamSchema implements CoreFileStreamSchema {
 
   load(
     id: string,
-    options: { loadAs: Account | AnonymousJazzAgent },
+    options?: { loadAs?: Account | AnonymousJazzAgent },
   ): Promise<FileStream | null> {
     return this.coValueClass.load(id, options);
   }

package/src/tools/tests/CoValueCoreSubscription.test.ts

@@ -1251,7 +1251,7 @@ describe("CoValueCoreSubscription", async () => {
     subscription.unsubscribe();
   });
 
-  test.skip("should wait for the full streaming of the parent group", async () => {
+  test("should wait for the full streaming of the parent group", async () => {
     disableJazzTestSync();
 
     const alice = await createJazzTestAccount({

package/src/tools/tests/coFeed.test.ts

@@ -773,7 +773,7 @@ describe("FileStream large file loading", async () => {
 
     const loadedChunks = loadedStream.getChunks({ allowUnfinished: true });
     expect(loadedChunks).not.toBeNull();
-    expect(loadedChunks?.finished).toBe(undefined);
+    expect(loadedChunks?.finished).toBeFalsy();
 
     expect(loadedStream.$jazz.raw.core.knownState()).not.toEqual(
       largeStream.$jazz.raw.core.knownState(),

package/src/tools/tests/load.test.ts

@@ -337,7 +337,7 @@ test("should wait for the full streaming of the group", async () => {
   );
 });
 
-test.skip("should wait for the full streaming of the parent groups", async () => {
+test("should wait for the full streaming of the parent groups", async () => {
   disableJazzTestSync();
 
   const alice = await createJazzTestAccount({

package/src/worker/index.ts

@@ -1,4 +1,10 @@
-import { AgentSecret, CryptoProvider, LocalNode, Peer } from "cojson";
+import {
+  AgentSecret,
+  CryptoProvider,
+  LocalNode,
+  Peer,
+  StorageAPI,
+} from "cojson";
 import {
   type AnyWebSocketConstructor,
   WebSocketPeerWithReconnection,
@@ -35,6 +41,7 @@ type WorkerOptions<
    * If false, the worker will not set in the global account context
    */
   asActiveAccount?: boolean;
+  storage?: StorageAPI;
 };
 
 /** @category Context Creation */
@@ -95,6 +102,7 @@ export async function startWorker<
     peers,
     crypto: options.crypto ?? (await WasmCrypto.create()),
     asActiveAccount,
+    storage: options.storage,
   });
 
   const account = context.account as InstanceOfSchema<S>;