gitmaps 1.1.0 → 1.1.2

package/app/lib/initial-route-hydration.test.ts

@@ -0,0 +1,283 @@
+import { describe, expect, mock, test } from 'bun:test';
+import {
+  bootstrapInitialRouteUi,
+  getInitialRouteParts,
+  handleInitialRouteError,
+  hideInitialRouteLanding,
+  hydrateInitialRouteRepo,
+  isGithubOwnerRepoSlug,
+  migrateLegacyHashRoute,
+  resolveInitialRepoPath,
+  showInitialRouteCloneStart,
+} from './initial-route-hydration';
+import { installFetchMock, setupDomTest } from './test-dom';
+
+describe('initial route hydration helper', () => {
+  test('parses path and legacy hash route parts', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/galaxy-canvas/team/platform/tools/gitmaps#legacy-slug' });
+    try {
+      expect(getInitialRouteParts()).toEqual({
+        rawPath: 'galaxy-canvas/team/platform/tools/gitmaps',
+        pathSlug: 'team/platform/tools/gitmaps',
+        hashSlug: 'legacy-slug',
+        urlSlug: 'team/platform/tools/gitmaps',
+      });
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('detects cloneable GitHub owner/repo slugs', () => {
+    expect(isGithubOwnerRepoSlug('7flash/gitmaps')).toBe(true);
+    expect(isGithubOwnerRepoSlug('team/platform/tools/gitmaps')).toBe(false);
+    expect(isGithubOwnerRepoSlug('C:/Code/gitmaps')).toBe(false);
+  });
+
+  test('uses cached mapped path for non-github slugs', async () => {
+    const handle = setupDomTest();
+    try {
+      localStorage.setItem('gitcanvas:slug:team/platform/tools/gitmaps', 'C:/Code/gitmaps');
+      await expect(resolveInitialRepoPath('team/platform/tools/gitmaps')).resolves.toBe('C:/Code/gitmaps');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('resolves github slug via resolve-slug api before cloning', async () => {
+    const handle = setupDomTest();
+    const fetchMock = mock(async (input: string) => {
+      expect(input).toBe('/api/repo/resolve-slug');
+      return new Response(JSON.stringify({ path: 'C:/Code/gitmaps' }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    });
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      await expect(resolveInitialRepoPath('7flash/gitmaps')).resolves.toBe('C:/Code/gitmaps');
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(localStorage.getItem('gitcanvas:slug:7flash/gitmaps')).toBe('C:/Code/gitmaps');
+    } finally {
+      fetchHandle.restore();
+      handle.cleanup();
+    }
+  });
+
+  test('falls back to cloning when github slug cannot be resolved locally', async () => {
+    const handle = setupDomTest();
+    const onCloneStart = mock(() => undefined);
+    const fetchMock = mock(async (input: string) => {
+      if (input === '/api/repo/resolve-slug') {
+        return new Response(JSON.stringify({}), {
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      if (input === '/api/repo/clone') {
+        return new Response(JSON.stringify({ path: 'C:/Code/gitmaps' }), {
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+      throw new Error(`Unexpected fetch: ${input}`);
+    });
+    const fetchHandle = installFetchMock(fetchMock as any);
+
+    try {
+      await expect(resolveInitialRepoPath('7flash/gitmaps', { onCloneStart })).resolves.toBe('C:/Code/gitmaps');
+      expect(onCloneStart).toHaveBeenCalledWith('7flash/gitmaps');
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+      expect(localStorage.getItem('gitcanvas:slug:7flash/gitmaps')).toBe('C:/Code/gitmaps');
+    } finally {
+      fetchHandle.restore();
+      handle.cleanup();
+    }
+  });
+
+  test('hides the landing overlay for route hydration', () => {
+    const handle = setupDomTest({
+      html: '<div id="landingOverlay" style="display:block"></div>',
+    });
+
+    try {
+      hideInitialRouteLanding();
+      expect((document.getElementById('landingOverlay') as HTMLElement).style.display).toBe('none');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('migrates legacy hash routes into encoded path routes', () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/#7flash/jsx-ai' });
+
+    try {
+      migrateLegacyHashRoute('7flash/jsx-ai');
+      expect(window.location.pathname).toBe('/7flash%2Fjsx-ai');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('shows clone-start loading ui for github route hydration', () => {
+    const handle = setupDomTest({
+      html: '<div id="landingOverlay" style="display:block"></div><div id="loadingProgress" style="display:none"><span class="loading-message"></span></div>',
+    });
+
+    try {
+      showInitialRouteCloneStart('7flash/gitmaps');
+
+      expect((document.getElementById('landingOverlay') as HTMLElement).style.display).toBe('none');
+      expect((document.getElementById('loadingProgress') as HTMLElement).style.display).toBe('flex');
+      expect(document.querySelector('.loading-message')?.textContent).toBe('Cloning 7flash/gitmaps from GitHub...');
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('reports initial route errors and shows toast through injected helpers', async () => {
+    const reportError = mock(() => undefined);
+    const showToast = mock(() => undefined);
+
+    const result = await handleInitialRouteError(new Error('boom'), {
+      reportError,
+      showToast,
+    });
+
+    expect(result).toBeNull();
+    expect(reportError).toHaveBeenCalledTimes(1);
+    expect(showToast).toHaveBeenCalledWith('Failed to load route: boom', 'error');
+  });
+
+  test('bootstraps initial route ui in a small reusable sequence', async () => {
+    const handle = setupDomTest({
+      html: '<select id="repoSelect"><option value="">Select</option><option value="C:/Code/gitmaps">gitmaps</option></select>',
+    });
+
+    try {
+      const calls: string[] = [];
+      const snapshot = { context: { repoPath: '' } };
+      const ctx = {
+        actor: { send: mock((event: any) => calls.push(`send:${event.type}:${event.path}`)) },
+        snap: () => snapshot,
+      } as any;
+
+      await bootstrapInitialRouteUi(ctx, 'C:/Code/gitmaps', {
+        applySharedLayout: mock(async () => { calls.push('applySharedLayout'); }),
+        syncSelection: mock((path: string) => {
+          calls.push(`syncSelection:${path}`);
+          (document.getElementById('repoSelect') as HTMLSelectElement).value = path;
+        }),
+        loadPositions: mock(async () => { calls.push('loadPositions'); }),
+        initRouteLayers: mock(() => { calls.push('initLayers'); }),
+        renderRouteLayers: mock(() => { calls.push('renderLayersUI'); }),
+        restoreRouteViewport: mock(() => { calls.push('restoreViewport'); }),
+        updateRouteCanvasTransform: mock(() => { calls.push('updateCanvasTransform'); }),
+        updateRouteZoomUi: mock(() => { calls.push('updateZoomUI'); }),
+      });
+
+      expect((document.getElementById('repoSelect') as HTMLSelectElement).value).toBe('C:/Code/gitmaps');
+      expect(ctx.snap().context.repoPath).toBe('C:/Code/gitmaps');
+      expect(calls).toEqual([
+        'syncSelection:C:/Code/gitmaps',
+        'send:LOAD_REPO:C:/Code/gitmaps',
+        'loadPositions',
+        'applySharedLayout',
+        'initLayers',
+        'renderLayersUI',
+        'restoreViewport',
+        'updateCanvasTransform',
+        'updateZoomUI',
+      ]);
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('bootstrap initial route ui stops after positions when disposed', async () => {
+    const handle = setupDomTest();
+
+    try {
+      const applySharedLayout = mock(async () => undefined);
+      const initRouteLayers = mock(() => undefined);
+      const snapshot = { context: { repoPath: '' } };
+      const ctx = {
+        actor: { send: mock(() => undefined) },
+        snap: () => snapshot,
+      } as any;
+
+      await bootstrapInitialRouteUi(ctx, 'C:/Code/gitmaps', {
+        disposed: true,
+        applySharedLayout,
+        loadPositions: mock(async () => undefined),
+        initRouteLayers,
+        renderRouteLayers: mock(() => undefined),
+        restoreRouteViewport: mock(() => undefined),
+        updateRouteCanvasTransform: mock(() => undefined),
+        updateRouteZoomUi: mock(() => undefined),
+      });
+
+      expect(ctx.snap().context.repoPath).toBe('C:/Code/gitmaps');
+      expect(applySharedLayout).not.toHaveBeenCalled();
+      expect(initRouteLayers).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('hydrates initial route through shared repo handoff seam', async () => {
+    const handle = setupDomTest({
+      url: 'http://localhost:3335/team/platform/tools/gitmaps',
+      html: '<select id="repoSelect"><option value="">Select</option><option value="C:/Code/gitmaps">gitmaps</option></select><div id="landingOverlay"></div>',
+    });
+
+    try {
+      const onRepoReady = mock(() => undefined);
+      const bootstrapRepoUi = mock(async () => undefined);
+      const showLandingPlaceholder = mock(() => undefined);
+      const updateFavoriteStar = mock(() => undefined);
+      const hideLanding = mock(() => {
+        const landing = document.getElementById('landingOverlay') as HTMLElement;
+        landing.style.display = 'none';
+      });
+
+      const resolvedPath = await hydrateInitialRouteRepo({ onRepoReady } as any, {
+        resolveRepoPath: async () => 'C:/Code/gitmaps',
+        showLandingPlaceholder,
+        hideLanding,
+        bootstrapRepoUi,
+        updateFavoriteStar,
+      });
+
+      expect(resolvedPath).toBe('C:/Code/gitmaps');
+      expect((document.getElementById('repoSelect') as HTMLSelectElement).value).toBe('C:/Code/gitmaps');
+      expect(hideLanding).toHaveBeenCalledTimes(1);
+      expect(bootstrapRepoUi).toHaveBeenCalledWith('C:/Code/gitmaps');
+      expect(onRepoReady).toHaveBeenCalledWith('C:/Code/gitmaps');
+      expect(updateFavoriteStar).toHaveBeenCalledWith('C:/Code/gitmaps');
+      expect(showLandingPlaceholder).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('shows landing on root route without trying hydration', async () => {
+    const handle = setupDomTest({ url: 'http://localhost:3335/' });
+    try {
+      const bootstrapRepoUi = mock(async () => undefined);
+      const showLandingPlaceholder = mock(() => undefined);
+      const updateFavoriteStar = mock(() => undefined);
+
+      const resolvedPath = await hydrateInitialRouteRepo({} as any, {
+        showLandingPlaceholder,
+        hideLanding: mock(() => undefined),
+        bootstrapRepoUi,
+        updateFavoriteStar,
+      });
+
+      expect(resolvedPath).toBeNull();
+      expect(showLandingPlaceholder).toHaveBeenCalledTimes(1);
+      expect(bootstrapRepoUi).not.toHaveBeenCalled();
+      expect(updateFavoriteStar).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/initial-route-hydration.ts

@@ -0,0 +1,202 @@
+import type { CanvasContext } from './context';
+import { loadSavedPositions } from './positions';
+import { restoreViewport, updateCanvasTransform, updateZoomUI } from './canvas';
+import { initLayers, renderLayersUI } from './layers';
+import { handoffRepoLoad, syncRepoSelection } from './repo-handoff';
+
+export interface InitialRouteParts {
+  rawPath: string;
+  pathSlug: string;
+  hashSlug: string;
+  urlSlug: string;
+}
+
+export function getInitialRouteParts(
+  pathname = window.location.pathname,
+  hash = window.location.hash,
+): InitialRouteParts {
+  const rawPath = decodeURIComponent(pathname.replace(/^\//, ''));
+  const pathSlug = rawPath.replace(/^galaxy-canvas\/?/, '');
+  const hashSlug = decodeURIComponent(hash.replace('#', ''));
+  return {
+    rawPath,
+    pathSlug,
+    hashSlug,
+    urlSlug: pathSlug || hashSlug,
+  };
+}
+
+export function isGithubOwnerRepoSlug(slug: string): boolean {
+  return /^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(slug) && !slug.includes('\\') && !slug.includes(':');
+}
+
+export async function resolveInitialRepoPath(
+  urlSlug: string,
+  options: {
+    fetchImpl?: typeof fetch;
+    onCloneStart?: (slug: string) => void;
+  } = {},
+): Promise<string | null> {
+  if (!urlSlug) return null;
+
+  if (!isGithubOwnerRepoSlug(urlSlug)) {
+    return localStorage.getItem(`gitcanvas:slug:${urlSlug}`) || urlSlug;
+  }
+
+  const cached = localStorage.getItem(`gitcanvas:slug:${urlSlug}`);
+  if (cached) return cached;
+
+  const fetchImpl = options.fetchImpl || fetch;
+
+  try {
+    const resolveRes = await fetchImpl('/api/repo/resolve-slug', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ slug: urlSlug }),
+    });
+    if (resolveRes.ok) {
+      const resolveData = await resolveRes.json();
+      if (resolveData?.path) {
+        localStorage.setItem(`gitcanvas:slug:${urlSlug}`, resolveData.path);
+        return resolveData.path;
+      }
+    }
+  } catch {
+    // Fall through to clone path below.
+  }
+
+  options.onCloneStart?.(urlSlug);
+  const cloneRes = await fetchImpl('/api/repo/clone', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      url: `https://github.com/${urlSlug}.git`,
+    }),
+  });
+
+  if (!cloneRes.ok) {
+    const err = await cloneRes.json().catch(() => ({ error: 'Clone failed' }));
+    throw new Error(err.error || 'Clone failed');
+  }
+
+  const cloneData = await cloneRes.json();
+  localStorage.setItem(`gitcanvas:slug:${urlSlug}`, cloneData.path);
+  return cloneData.path;
+}
+
+export function hideInitialRouteLanding() {
+  const landing = document.getElementById('landingOverlay');
+  if (landing) landing.style.display = 'none';
+}
+
+export function migrateLegacyHashRoute(hashSlug: string) {
+  window.history.replaceState(null, '', '/' + encodeURIComponent(hashSlug));
+}
+
+export function showInitialRouteCloneStart(slug: string) {
+  hideInitialRouteLanding();
+
+  const loadingEl = document.getElementById('loadingProgress');
+  if (loadingEl) {
+    loadingEl.style.display = 'flex';
+    const msgEl = loadingEl.querySelector('.loading-message');
+    if (msgEl) {
+      msgEl.textContent = `Cloning ${slug} from GitHub...`;
+    }
+  }
+}
+
+export async function handleInitialRouteError(err: any, options?: {
+  reportError?: (err: any) => void;
+  showToast?: (message: string, type: string) => void;
+}) {
+  const reportError = options?.reportError || ((error) => {
+    console.error(`[gitmaps] Failed to hydrate initial route:`, error);
+  });
+
+  reportError(err);
+
+  if (options?.showToast) {
+    options.showToast(`Failed to load route: ${err.message}`, 'error');
+    return null;
+  }
+
+  const { showToast } = await import('./utils');
+  showToast(`Failed to load route: ${err.message}`, 'error');
+  return null;
+}
+
+export async function bootstrapInitialRouteUi(
+  ctx: CanvasContext,
+  resolvedPath: string,
+  options: {
+    disposed?: boolean;
+    applySharedLayout: () => Promise<void>;
+    syncSelection?: (path: string) => void;
+    loadPositions?: (ctx: CanvasContext) => Promise<void>;
+    initRouteLayers?: (ctx: CanvasContext) => void;
+    renderRouteLayers?: (ctx: CanvasContext) => void;
+    restoreRouteViewport?: (ctx: CanvasContext) => void;
+    updateRouteCanvasTransform?: (ctx: CanvasContext) => void;
+    updateRouteZoomUi?: (ctx: CanvasContext) => void;
+  },
+) {
+  const syncSelection = options.syncSelection || syncRepoSelection;
+  const loadPositions = options.loadPositions || loadSavedPositions;
+  const initRouteLayers = options.initRouteLayers || initLayers;
+  const renderRouteLayers = options.renderRouteLayers || renderLayersUI;
+  const restoreRouteViewport = options.restoreRouteViewport || restoreViewport;
+  const updateRouteCanvasTransform = options.updateRouteCanvasTransform || updateCanvasTransform;
+  const updateRouteZoomUi = options.updateRouteZoomUi || updateZoomUI;
+
+  syncSelection(resolvedPath);
+  ctx.actor.send({ type: 'LOAD_REPO', path: resolvedPath });
+  ctx.snap().context.repoPath = resolvedPath;
+  await loadPositions(ctx);
+  if (options.disposed) return;
+  await options.applySharedLayout();
+  initRouteLayers(ctx);
+  renderRouteLayers(ctx);
+  restoreRouteViewport(ctx);
+  updateRouteCanvasTransform(ctx);
+  updateRouteZoomUi(ctx);
+}
+
+export async function hydrateInitialRouteRepo(
+  ctx: CanvasContext,
+  options: {
+    disposed?: boolean;
+    resolveRepoPath?: (slug: string) => Promise<string | null>;
+    showLandingPlaceholder: () => void;
+    hideLanding: () => void;
+    migrateLegacyHashRoute?: (hashSlug: string) => void;
+    bootstrapRepoUi: (path: string) => Promise<void>;
+    updateFavoriteStar: (path: string) => void;
+  },
+) {
+  const { pathSlug, hashSlug, urlSlug } = getInitialRouteParts();
+
+  if (!urlSlug) {
+    options.showLandingPlaceholder();
+    return null;
+  }
+
+  if (hashSlug && !pathSlug) {
+    options.migrateLegacyHashRoute?.(hashSlug);
+  }
+
+  const resolveRepoPath = options.resolveRepoPath || ((slug: string) => resolveInitialRepoPath(slug));
+  const resolvedPath = await resolveRepoPath(urlSlug);
+  if (!resolvedPath) return null;
+
+  options.hideLanding();
+  syncRepoSelection(resolvedPath);
+  await options.bootstrapRepoUi(resolvedPath);
+
+  if (!options.disposed) {
+    handoffRepoLoad(ctx, resolvedPath);
+    options.updateFavoriteStar(resolvedPath);
+  }
+
+  return resolvedPath;
+}

package/app/lib/landing-reset.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { showLandingPlaceholder } from './landing-reset';
+import { setupDomTest } from './test-dom';
+
+describe('landing reset helper', () => {
+  test('clears repo ui and resets shared canvas state back to landing mode', () => {
+    const handle = setupDomTest({
+      html: `
+        <div id="landingOverlay" style="display:none"></div>
+        <select id="repoSelect"><option value="">Select</option><option value="C:/Code/gitmaps" selected>gitmaps</option></select>
+        <div id="fileCount">42</div>
+        <div id="commitCount">9</div>
+        <div id="currentCommitInfo">commit info</div>
+        <div id="timelineContainer">timeline</div>
+        <div id="changedFilesList">changed</div>
+        <div id="changedFilesPanel" style="display:flex"></div>
+        <div id="connectionsPanel" style="display:flex"></div>
+        <div id="arrangeToolbar" style="display:flex"></div>
+        <button id="toggleConnections" class="active"></button>
+        <button id="showHidden" style="display:block"></button>
+        <span id="hiddenCount">7</span>
+        <div id="commitProgressBar" style="display:flex"></div>
+      `,
+    });
+
+    try {
+      const snapshot = { context: { repoPath: 'C:/Code/gitmaps' } };
+      const ctx = {
+        actor: { send: mock(() => undefined) },
+        snap: () => snapshot,
+        fileCards: new Map([['a.ts', document.createElement('div')]]),
+        deferredCards: new Map([['b.ts', { x: 0, y: 0, size: null, isChanged: false, file: {} }]]),
+        allFilesData: [{ path: 'a.ts' }],
+        commitFilesData: [{ path: 'b.ts' }],
+        changedFilePaths: new Set(['a.ts']),
+      } as any;
+
+      const clearWorkspace = mock(() => undefined);
+      const clearCanvasUi = mock(() => undefined);
+      const hideLoading = mock(() => undefined);
+      const updateCanvas = mock(() => undefined);
+      const updateZoom = mock(() => undefined);
+      const updateFavorite = mock(() => undefined);
+      const updateRepoStatus = mock(() => undefined);
+      const updateCommitStatus = mock(() => undefined);
+      const updateFileStatus = mock(() => undefined);
+      const updateSelectedStatus = mock(() => undefined);
+
+      showLandingPlaceholder(ctx, {
+        clearWorkspace,
+        clearCanvasUi,
+        hideLoading,
+        updateCanvas,
+        updateZoom,
+        updateFavorite,
+        updateRepoStatus,
+        updateCommitStatus,
+        updateFileStatus,
+        updateSelectedStatus,
+      });
+
+      expect(document.body.classList.contains('landing-placeholder-visible')).toBe(true);
+      expect(ctx.actor.send).toHaveBeenCalledWith({ type: 'RESET_APP_STATE' });
+      expect(clearWorkspace).toHaveBeenCalledWith(ctx);
+      expect(clearCanvasUi).toHaveBeenCalledWith(ctx);
+      expect(snapshot.context.repoPath).toBe('');
+      expect(ctx.fileCards.size).toBe(0);
+      expect(ctx.deferredCards.size).toBe(0);
+      expect(ctx.allFilesData).toEqual([]);
+      expect(ctx.commitFilesData).toEqual([]);
+      expect(Array.from(ctx.changedFilePaths)).toEqual([]);
+      expect((document.getElementById('landingOverlay') as HTMLElement).style.display).toBe('flex');
+      expect((document.getElementById('repoSelect') as HTMLSelectElement).value).toBe('');
+      expect(document.getElementById('fileCount')?.textContent).toBe('0');
+      expect(document.getElementById('commitCount')?.textContent).toBe('0');
+      expect(document.getElementById('currentCommitInfo')?.textContent).toContain('No commit selected');
+      expect(document.getElementById('timelineContainer')?.textContent).toContain('Load a repository');
+      expect(document.getElementById('changedFilesList')?.textContent).toBe('');
+      expect((document.getElementById('changedFilesPanel') as HTMLElement).style.display).toBe('none');
+      expect((document.getElementById('connectionsPanel') as HTMLElement).style.display).toBe('none');
+      expect((document.getElementById('arrangeToolbar') as HTMLElement).style.display).toBe('none');
+      expect(document.getElementById('toggleConnections')?.classList.contains('active')).toBe(false);
+      expect((document.getElementById('showHidden') as HTMLElement).style.display).toBe('none');
+      expect(document.getElementById('hiddenCount')?.textContent).toBe('0');
+      expect((document.getElementById('commitProgressBar') as HTMLElement).style.display).toBe('none');
+      expect(localStorage.getItem('gitcanvas:changedFilesPanelClosed')).toBe('true');
+      expect(hideLoading).toHaveBeenCalledWith(ctx);
+      expect(updateCanvas).toHaveBeenCalledWith(ctx);
+      expect(updateZoom).toHaveBeenCalledWith(ctx);
+      expect(updateFavorite).toHaveBeenCalledWith('');
+      expect(updateRepoStatus).toHaveBeenCalledWith('', '', '');
+      expect(updateCommitStatus).toHaveBeenCalledWith('');
+      expect(updateFileStatus).toHaveBeenCalledWith(0);
+      expect(updateSelectedStatus).toHaveBeenCalledWith(0);
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/landing-reset.ts

@@ -0,0 +1,106 @@
+import type { CanvasContext } from './context';
+import { clearCanvas, updateCanvasTransform, updateZoomUI } from './canvas';
+import { hideLoadingProgress } from './loading';
+import { clearMultiRepoWorkspace } from './multi-repo';
+import {
+  updateStatusBarCommit,
+  updateStatusBarFiles,
+  updateStatusBarRepo,
+  updateStatusBarSelected,
+} from './status-bar';
+import { updateFavoriteStar } from './user';
+
+export function showLandingPlaceholder(
+  ctx: CanvasContext,
+  options: {
+    clearWorkspace?: (ctx: CanvasContext) => void;
+    clearCanvasUi?: (ctx: CanvasContext) => void;
+    hideLoading?: (ctx: CanvasContext) => void;
+    updateCanvas?: (ctx: CanvasContext) => void;
+    updateZoom?: (ctx: CanvasContext) => void;
+    updateFavorite?: (repoPath: string) => void;
+    updateRepoStatus?: (repoPath: string, canonicalSlug?: string, canonicalSource?: string) => void;
+    updateCommitStatus?: (hash: string) => void;
+    updateFileStatus?: (count: number) => void;
+    updateSelectedStatus?: (count: number) => void;
+  } = {},
+) {
+  const clearWorkspace = options.clearWorkspace || clearMultiRepoWorkspace;
+  const clearCanvasUi = options.clearCanvasUi || clearCanvas;
+  const hideLoading = options.hideLoading || hideLoadingProgress;
+  const updateCanvas = options.updateCanvas || updateCanvasTransform;
+  const updateZoom = options.updateZoom || updateZoomUI;
+  const updateFavorite = options.updateFavorite || updateFavoriteStar;
+  const updateRepoStatus = options.updateRepoStatus || updateStatusBarRepo;
+  const updateCommitStatus = options.updateCommitStatus || updateStatusBarCommit;
+  const updateFileStatus = options.updateFileStatus || updateStatusBarFiles;
+  const updateSelectedStatus = options.updateSelectedStatus || updateStatusBarSelected;
+
+  document.body.classList.add('landing-placeholder-visible');
+  ctx.actor.send({ type: 'RESET_APP_STATE' });
+  clearWorkspace(ctx);
+  clearCanvasUi(ctx);
+  ctx.fileCards.clear();
+  ctx.deferredCards.clear();
+  ctx.allFilesData = [];
+  ctx.commitFilesData = [];
+  ctx.changedFilePaths = new Set();
+  ctx.snap().context.repoPath = '';
+
+  const landing = document.getElementById('landingOverlay');
+  if (landing) landing.style.display = 'flex';
+
+  const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement | null;
+  if (repoSelect) repoSelect.value = '';
+
+  const fileCount = document.getElementById('fileCount');
+  if (fileCount) fileCount.textContent = '0';
+
+  const commitCount = document.getElementById('commitCount');
+  if (commitCount) commitCount.textContent = '0';
+
+  const commitInfo = document.getElementById('currentCommitInfo');
+  if (commitInfo) {
+    commitInfo.innerHTML = '<span class="commit-hash-label">No commit selected</span>';
+  }
+
+  const timeline = document.getElementById('timelineContainer');
+  if (timeline) {
+    timeline.innerHTML = '<div class="empty-state"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg><p>Load a repository</p></div>';
+  }
+
+  const changedFilesList = document.getElementById('changedFilesList');
+  if (changedFilesList) changedFilesList.innerHTML = '';
+
+  const changedFilesPanel = document.getElementById('changedFilesPanel');
+  if (changedFilesPanel) changedFilesPanel.style.display = 'none';
+
+  const connectionsPanel = document.getElementById('connectionsPanel');
+  if (connectionsPanel) connectionsPanel.style.display = 'none';
+
+  const arrangeToolbar = document.getElementById('arrangeToolbar');
+  if (arrangeToolbar) arrangeToolbar.style.display = 'none';
+
+  const toggleConnections = document.getElementById('toggleConnections');
+  if (toggleConnections) toggleConnections.classList.remove('active');
+
+  const showHidden = document.getElementById('showHidden');
+  if (showHidden) showHidden.style.display = 'none';
+
+  const hiddenCount = document.getElementById('hiddenCount');
+  if (hiddenCount) hiddenCount.textContent = '0';
+
+  const commitProgressBar = document.getElementById('commitProgressBar');
+  if (commitProgressBar) commitProgressBar.style.display = 'none';
+
+  localStorage.setItem('gitcanvas:changedFilesPanelClosed', 'true');
+
+  hideLoading(ctx);
+  updateCanvas(ctx);
+  updateZoom(ctx);
+  updateFavorite('');
+  updateRepoStatus('', '', '');
+  updateCommitStatus('');
+  updateFileStatus(0);
+  updateSelectedStatus(0);
+}