-
+
+
+
+
+
);
}
diff --git a/apps/desktop/src/assets/react.svg b/apps/desktop/src/assets/react.svg
deleted file mode 100644
index fd4ba6b..0000000
--- a/apps/desktop/src/assets/react.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
diff --git a/apps/desktop/src/components/arrangement-map.tsx b/apps/desktop/src/components/arrangement-map.tsx
new file mode 100644
index 0000000..ed18afd
--- /dev/null
+++ b/apps/desktop/src/components/arrangement-map.tsx
@@ -0,0 +1,278 @@
+import { useState } from "react";
+import { abletonColor } from "@/lib/ableton-colors";
+import { displayTrackName } from "@/lib/track-name";
+import type { ClipAnalysis, SaveAnalysis, TrackAnalysis } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+const LABEL_WIDTH = "9.5rem";
+
+export interface SelectedClip {
+ clip: ClipAnalysis;
+ track: TrackAnalysis;
+}
+
+function pct(beats: number, length: number) {
+ return `${(beats / Math.max(length, 1)) * 100}%`;
+}
+
+function barRange(clip: ClipAnalysis, perBar: number): string {
+ const first = Math.floor(clip.start / perBar) + 1;
+ const last = Math.max(first, Math.ceil(clip.end / perBar));
+ return first === last ? `bar ${first}` : `bars ${first}–${last}`;
+}
+
+const STATUS_TEXT: Record
+
+
+
- {selectedProject && previewSave && (
-
+
+ {selectedProject && previewSave && (
+
+
+ );
+}
+
+/** Bar numbers along the top of the arrangement map. */
+export function BarRuler({
+ scaleBeats,
+ beatsPerBar,
+ className,
+}: {
+ scaleBeats: number;
+ beatsPerBar: number;
+ className?: string;
+}) {
+ const totalBars = Math.max(1, Math.ceil(scaleBeats / beatsPerBar));
+ const step = [1, 2, 4, 8, 16, 32, 64].find((s) => totalBars / s <= 8) ?? 128;
+ const marks: number[] = [];
+ for (let bar = 1; bar <= totalBars; bar += step) {
+ marks.push(bar);
+ }
+ return (
+
+
+
+ + Arrangement +
+ {changed.length > 0 && hidden > 0 && ( + + )} +
+
+
+
+
+
+
+ {tracks.length === 0 ? (
+
+
+ + No clips in the arrangement. +
+ ) : ( + tracks.map((track) => ( +
+
+ ))
+ )}
+
+
+
+ {displayTrackName(track.name)}
+
+
+
+ {track.clips.map((clip) => (
+ onSelectClip({ clip, track })}
+ perBar={analysis.beatsPerBar}
+ selected={selected?.clip === clip}
+ track={track}
+ />
+ ))}
+
+
+
+ new
+
+
+
+
+
+ edited
+
+
+
+ removed
+
+
+
+ moved from
+
+
+ {" "}
+ unchanged
+
+
+
+ {marks.map((bar) => (
+
+ {bar}
+
+ ))}
+
+ );
+}
diff --git a/apps/desktop/src/components/change-list.tsx b/apps/desktop/src/components/change-list.tsx
new file mode 100644
index 0000000..2490523
--- /dev/null
+++ b/apps/desktop/src/components/change-list.tsx
@@ -0,0 +1,397 @@
+import type { ReactNode } from "react";
+import { abletonColor } from "@/lib/ableton-colors";
+import { displayTrackName } from "@/lib/track-name";
+import type {
+ ClipAnalysis,
+ SaveAnalysis,
+ SetChange,
+ TrackAnalysis,
+ TrackChange,
+} from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+function bars(start: number, end: number, perBar: number): string {
+ const first = Math.floor(start / perBar) + 1;
+ const last = Math.max(first, Math.ceil(end / perBar));
+ return first === last ? `bar ${first}` : `bars ${first}–${last}`;
+}
+
+function db(value: number): string {
+ if (!Number.isFinite(value)) {
+ return "−∞";
+ }
+ return `${value > 0 ? "+" : value < 0 ? "−" : ""}${Math.abs(value).toFixed(1)}`;
+}
+
+function pan(value: number): string {
+ const amount = Math.round(Math.abs(value) * 50);
+ if (amount === 0) {
+ return "C";
+ }
+ return `${amount}${value < 0 ? "L" : "R"}`;
+}
+
+function number(value: number): string {
+ return Number.isInteger(value) ? String(value) : value.toFixed(2);
+}
+
+const Value = ({ children }: { children: ReactNode }) => (
+ {children}
+);
+
+const Arrow = () => →;
+
+interface Line {
+ key: string;
+ quiet?: boolean;
+ text: ReactNode;
+ tone?: "added" | "removed" | "edited";
+}
+
+function clipLines(track: TrackAnalysis, perBar: number): Line[] {
+ const lines: Line[] = [];
+ const by = (status: ClipAnalysis["status"]) =>
+ track.clips.filter((c) => c.status === status);
+ const span = (clips: ClipAnalysis[]) =>
+ bars(
+ Math.min(...clips.map((c) => c.start)),
+ Math.max(...clips.map((c) => c.end)),
+ perBar
+ );
+
+ const added = by("added");
+ if (added.length > 0 && track.status !== "added") {
+ const notes = added.reduce(
+ (sum, c) => sum + (c.notes?.added.length ?? 0),
+ 0
+ );
+ lines.push({
+ key: "added",
+ text: (
+ <>
+ {added.length === 1 ? "New clip" : `${added.length} new clips`} in{" "}
+ {span(added)}
+ {notes > 0 && (
+ · {notes} notes
+ )}
+
+ ),
+ tone: "added",
+ });
+ }
+ const edited = by("edited");
+ if (edited.length > 0) {
+ const plus = edited.reduce(
+ (sum, c) => sum + (c.notes?.added.length ?? 0),
+ 0
+ );
+ const minus = edited.reduce(
+ (sum, c) => sum + (c.notes?.removed.length ?? 0),
+ 0
+ );
+ lines.push({
+ key: "edited",
+ text: (
+ <>
+ {edited.some((c) => c.kind === "midi")
+ ? "Notes edited"
+ : "Clips edited"}{" "}
+ in {span(edited)}
+ {plus + minus > 0 && (
+
+ {" "}
+ +{plus}{" "}
+ −{minus}
+
+ )}
+
+ ),
+ tone: "edited",
+ });
+ }
+ const removed = by("removed");
+ if (removed.length > 0 && track.status !== "removed") {
+ lines.push({
+ key: "removed",
+ text: <>Cleared {span(removed)},
+ tone: "removed",
+ });
+ }
+ const moved = by("moved");
+ if (moved.length > 0) {
+ const first = moved[0]!;
+ lines.push({
+ key: "moved",
+ text:
+ moved.length === 1 && first.movedFrom !== null ? (
+ bars(first.movedFrom, first.movedFrom + 1, perBar) ===
+ bars(first.start, first.start + 1, perBar) ? (
+ <>Clip nudged within {bars(first.start, first.start + 1, perBar)}
+ ) : (
+ <>
+ Clip moved from{" "}
+ {bars(first.movedFrom, first.movedFrom + 1, perBar)} to{" "}
+ {bars(first.start, first.start + 1, perBar)}
+
+ )
+ ) : (
+ <>{moved.length} clips moved
+ ),
+ });
+ }
+ const samples = [...new Set(added.map((c) => c.sample).filter(Boolean))];
+ if (samples.length > 0) {
+ lines.push({
+ key: "samples",
+ quiet: true,
+ text: <>Audio: {samples.slice(0, 3).join(", ")},
+ });
+ }
+ return lines;
+}
+
+function changeLine(change: TrackChange, index: number): Line {
+ const key = `${change.type}-${index}`;
+ switch (change.type) {
+ case "renamed":
+ return { key, text: <>Renamed from “{change.from}” };
+ case "device-added":
+ return { key, text: <>{change.device} added, tone: "added" };
+ case "device-removed":
+ return { key, text: <>{change.device} removed, tone: "removed" };
+ case "device-on":
+ return { key, text: <>{change.device} turned on };
+ case "device-off":
+ return { key, text: <>{change.device} turned off };
+ case "device-state":
+ return {
+ key,
+ quiet: true,
+ text: <>{change.device}: plugin state changed (details not readable),
+ };
+ case "device-settings":
+ return {
+ key,
+ text:
+ change.params.length === 0 ? (
+ <>{change.device} settings changed
+ ) : (
+ <>
+ {change.device}
+ {change.params.slice(0, 4).map((p) => (
+
+ {p.name} -
+ {lines.map((line) => (
+
- + + {line.text} + + ))} +
+ {analysis.summary.first + ? "This is the first checkpoint of this set, so there is nothing earlier to compare with." + : "Nothing in the song changed in this save."} +
+ ); + } + + return ( +
+ {setLines.length > 0 && (
+
+
+ )}
+ {tracks.map(({ track, lines }) => (
+
+
+ ))}
+
+ );
+}
diff --git a/apps/desktop/src/components/expanded-card.test.tsx b/apps/desktop/src/components/checkpoint-detail.test.tsx
similarity index 91%
rename from apps/desktop/src/components/expanded-card.test.tsx
rename to apps/desktop/src/components/checkpoint-detail.test.tsx
index 6c78684..7ce4b21 100644
--- a/apps/desktop/src/components/expanded-card.test.tsx
+++ b/apps/desktop/src/components/checkpoint-detail.test.tsx
@@ -1,8 +1,9 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import type { Idea, Project, Save } from "@/lib/types";
-import { ExpandedCard } from "./expanded-card";
+import { CheckpointDetail } from "./checkpoint-detail";
const { sendDaemonCommand } = vi.hoisted(() => ({
sendDaemonCommand: vi.fn(),
@@ -77,14 +78,19 @@ const project: Project = {
};
function renderCard() {
+ const client = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
return render(
- + Song +
++ + {displayTrackName(track.name)} +
++ {title} +
+ {children} +
+
+
+ Reading the Ableton set…
+
+ );
+ }
+ if (query.isError) {
+ return (
+ + {query.error.message} +
+ ); + } + + const analysis = query.data; + const selection = picked ?? defaultClip(analysis); + return ( +
+
+
+
+ );
+}
+
+interface CheckpointDetailProps {
+ idea: Idea | undefined;
+ isHead: boolean;
+ onClose: () => void;
+ project: Project;
+ save: Save;
+}
+
+export function CheckpointDetail({
+ save,
+ idea,
+ isHead,
+ project,
+ onClose,
+}: CheckpointDetailProps) {
+ const openPreviewPlayer = usePreviewStore((s) => s.openPreviewPlayer);
+ const projectId = project.id;
+ const editRequestGenerationRef = useRef(0);
+ const savedLabel = save.customLabel ? save.label : "";
+ const [labelVal, setLabelVal] = useState(savedLabel);
+ const [noteVal, setNoteVal] = useState(save.note);
+ const [edit, setEdit] = useState<{
+ error: string | null;
+ pending: boolean;
+ saved: boolean;
+ }>({ error: null, pending: false, saved: false });
+ const [pin, setPin] = useState<{ error: string | null; pending: boolean }>({
+ error: null,
+ pending: false,
+ });
+ const [dialog, setDialog] = useState<
+ "none" | "branch" | "delete" | "preview"
+ >("none");
+ const [branch, setBranch] = useState<{
+ advanced: boolean;
+ error: string | null;
+ pending: boolean;
+ }>({ advanced: false, error: null, pending: false });
+ const [remove, setRemove] = useState<{
+ error: string | null;
+ pending: boolean;
+ }>({ error: null, pending: false });
+
+ const keepReasons = getKeepReasons(project, save);
+ const isBranchStart = !save.auto && Boolean(project.continuedFrom);
+
+ const commitEdit = async () => {
+ const nextLabel = labelVal.trim();
+ if (nextLabel === savedLabel && noteVal === save.note) {
+ return;
+ }
+ const generation = editRequestGenerationRef.current + 1;
+ editRequestGenerationRef.current = generation;
+ setEdit({ error: null, pending: true, saved: false });
+ try {
+ await sendDaemonCommand(
+ {
+ projectId,
+ saveId: save.id,
+ type: "update-save",
+ ...(noteVal === save.note ? {} : { note: noteVal }),
+ ...(nextLabel === savedLabel ? {} : { label: nextLabel }),
+ },
+ { reportError: false }
+ );
+ if (editRequestGenerationRef.current === generation) {
+ setEdit({ error: null, pending: false, saved: true });
+ }
+ } catch (error) {
+ if (editRequestGenerationRef.current === generation) {
+ setEdit({
+ error:
+ error instanceof Error
+ ? error.message
+ : "Checkpoint details were not saved.",
+ pending: false,
+ saved: false,
+ });
+ }
+ }
+ };
+
+ const handlePin = async () => {
+ setPin({ error: null, pending: true });
+ try {
+ await sendDaemonCommand(
+ {
+ pinned: !save.pinned,
+ projectId,
+ saveId: save.id,
+ type: "update-save",
+ },
+ { reportError: false }
+ );
+ setPin({ error: null, pending: false });
+ } catch (error) {
+ setPin({
+ error:
+ error instanceof Error
+ ? error.message
+ : "The checkpoint pin was not changed.",
+ pending: false,
+ });
+ }
+ };
+
+ const handleBranch = async () => {
+ setBranch((b) => ({ ...b, error: null, pending: true }));
+ try {
+ await sendDaemonCommand(
+ {
+ open: true,
+ projectId,
+ saveId: save.id,
+ type: "recover-save",
+ },
+ { reportError: false }
+ );
+ posthog.capture("save_recovered");
+ setBranch({ advanced: false, error: null, pending: false });
+ setDialog("none");
+ } catch (error) {
+ setBranch((b) => ({
+ ...b,
+ error:
+ error instanceof Error
+ ? error.message
+ : "The copy could not be created.",
+ pending: false,
+ }));
+ }
+ };
+
+ const handleDelete = async () => {
+ setRemove({ error: null, pending: true });
+ try {
+ await sendDaemonCommand(
+ { projectId, saveId: save.id, type: "delete-save" },
+ { reportError: false }
+ );
+ posthog.capture("save_deleted", { auto: save.auto });
+ setRemove({ error: null, pending: false });
+ setDialog("none");
+ } catch (error) {
+ setRemove({
+ error:
+ error instanceof Error
+ ? error.message
+ : "Checkpoint was not deleted.",
+ pending: false,
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ setLabelVal(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.currentTarget.blur();
+ }
+ }}
+ placeholder="Name this checkpoint…"
+ value={labelVal}
+ />
+
+
+
+
+
+ {formatTime(save.createdAt)}
+
+ {isHead && (
+
+ Latest
+
+ )}
+ {isBranchStart && (
+
+
+
+ {formatFullDateTime(save.createdAt)}
+ {idea ? ` · ${fileTabName(idea)}.als` : ""}
+
+ + {describeSave(project, save)} +
+ +
+
+
+ {save.previewStatus === "ready" && (
+
+ )}
+
+ + Continue from here opens this version in Ableton as a separate copy. + Your current project is not changed. +
+ {(save.previewStatus === "missing" || + save.previewStatus === "error") && ( ++ {save.previewStatus === "missing" + ? "The audio preview file is missing. Attach it again." + : "The audio preview couldn't be imported. Attach it again."} +
+ )} +