feat(projects): GitHub repo link on cards + compact list view (#20)

GitHub octocat button on each card/list row for repos with a github.com
remote — clicking opens the repo page. The renderer passes only the project
path (project:openRepo); main re-reads + validates the remote (https +
github.com) before shell.openExternal, leaving the external-URL allowlist
untouched so a compromised renderer can't open an arbitrary URL.

Plus a cards/list view toggle in the projects toolbar (persisted): a dense
one-line-per-project list for scanning many projects fast.

- gitParse.ts: parseRemoteUrl (scp/https/ssh github forms -> browsable URL)
- gitInfo.ts: remote.origin.url -> GitInfo.repoUrl + getRepoUrl() helper
- externalUrl.ts: isSafeRepoUrl (https github.com, defense-in-depth)
- types/projects: repoUrl threaded into the view model
- ipc project:openRepo (path-guarded) + settings:setViewMode; store viewMode
- projectsView: octocat button, makeMenuWrap shared by card+row, makeRow,
  view toggle; i18n proj.open_github/view_cards/view_list
- tests +10 (172 total); Playwright QA 0 console/page errors

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: writingdeveloper

qa/screenshot.mjs

@@ -76,6 +76,13 @@ await shot('new-project-modal-error');
 await win.keyboard.press('Escape').catch(() => {});
 await win.waitForTimeout(200);
 
+// Compact list view toggle (+ GitHub octocat on rows for repos with a github remote)
+await win.click('#view-list').catch(() => {});
+await win.waitForSelector('#cards.as-list .prow', { timeout: 5000 }).catch(() => {});
+await shot('projects-list-view');
+await win.click('#view-cards').catch(() => {});
+await win.waitForTimeout(300);
+
 // Narrow window to check responsive card grid
 await win.setViewportSize({ width: 520, height: 760 }).catch(() => {});
 await shot('projects-narrow');

src/main/gitInfo.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getGitInfo } from './gitInfo';
+import { getGitInfo, getRepoUrl } from './gitInfo';
 
 // Fake runner keyed by the git subcommand.
 function fakeRunner(map: Record<string, string>) {
@@ -8,6 +8,7 @@ function fakeRunner(map: Record<string, string>) {
     if (args.includes('rev-list')) return map.ahead ?? '';
     if (args.includes('log')) return map.log ?? '';
     if (args.includes('status')) return map.status ?? '';
+    if (args.includes('config')) return map.remote ?? '';
     return '';
   };
 }
@@ -19,16 +20,30 @@ describe('getGitInfo', () => {
       log: '1717287840|scaffold\n',
       status: ' M a.ts\n?? b.ts\n',
       ahead: '2\n',
+      remote: 'git@github.com:writingdeveloper/devdeck.git\n',
     });
     expect(await getGitInfo('C:\\g\\x', run)).toEqual({
       branch: 'main',
       lastCommitMs: 1717287840000,
       lastSubject: 'scaffold',
       uncommitted: 2,
       ahead: 2,
+      repoUrl: 'https://github.com/writingdeveloper/devdeck',
     });
   });
 
+  it('reports null repoUrl when there is no github remote', async () => {
+    const run = fakeRunner({ branch: 'main\n', remote: 'git@gitlab.com:o/r.git\n' });
+    expect((await getGitInfo('C:\\g\\x', run)).repoUrl).toBeNull();
+  });
+
+  it('getRepoUrl returns the normalized URL, or null when the config call throws', async () => {
+    const run = fakeRunner({ remote: 'https://github.com/o/r.git\n' });
+    expect(await getRepoUrl('C:\\g\\x', run)).toBe('https://github.com/o/r');
+    const throwing = async (args: string[]): Promise<string> => { if (args.includes('config')) throw new Error('x'); return ''; };
+    expect(await getRepoUrl('C:\\g\\x', throwing)).toBeNull();
+  });
+
   it('reports null ahead when there is no upstream (rev-list throws)', async () => {
     const run = async (args: string[]): Promise<string> => {
       if (args.includes('rev-list')) throw new Error('no upstream');

src/main/gitInfo.ts

@@ -1,7 +1,7 @@
 import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
 import type { GitInfo } from '../shared/types';
-import { parseBranch, parseLastCommit, parsePorcelainCount, parseAheadCount } from '../shared/gitParse';
+import { parseBranch, parseLastCommit, parsePorcelainCount, parseAheadCount, parseRemoteUrl } from '../shared/gitParse';
 
 const execFileAsync = promisify(execFile);
 
@@ -21,11 +21,12 @@ async function safe(run: GitRunner, args: string[]): Promise<string | null> {
 }
 
 export async function getGitInfo(dir: string, run: GitRunner = defaultRunner): Promise<GitInfo> {
-  const [branchOut, logOut, statusOut, aheadOut] = await Promise.all([
+  const [branchOut, logOut, statusOut, aheadOut, remoteOut] = await Promise.all([
     safe(run, ['-C', dir, 'rev-parse', '--abbrev-ref', 'HEAD']),
     safe(run, ['-C', dir, 'log', '-1', '--format=%ct|%s']),
     safe(run, ['-C', dir, 'status', '--porcelain']),
     safe(run, ['-C', dir, 'rev-list', '--count', '@{upstream}..HEAD']),
+    safe(run, ['-C', dir, 'config', '--get', 'remote.origin.url']),
   ]);
   const { lastCommitMs, lastSubject } = parseLastCommit(logOut ?? '');
   return {
@@ -34,5 +35,12 @@ export async function getGitInfo(dir: string, run: GitRunner = defaultRunner): P
     lastSubject,
     uncommitted: parsePorcelainCount(statusOut ?? ''),
     ahead: aheadOut == null ? null : parseAheadCount(aheadOut),
+    repoUrl: parseRemoteUrl(remoteOut ?? ''),
   };
 }
+
+/** Read just the GitHub repo URL for a directory (used on-demand when opening the repo page). */
+export async function getRepoUrl(dir: string, run: GitRunner = defaultRunner): Promise<string | null> {
+  const out = await safe(run, ['-C', dir, 'config', '--get', 'remote.origin.url']);
+  return parseRemoteUrl(out ?? '');
+}

src/main/ipc.ts

@@ -5,11 +5,11 @@ import { stat } from 'node:fs/promises';
 import type { Store } from './store';
 import { applyOpenAtLogin, effectiveOpenAtLogin } from './autostart';
 import { scanFolders, isRepo } from './scanner';
-import { getGitInfo } from './gitInfo';
+import { getGitInfo, getRepoUrl } from './gitInfo';
 import { getProvider, availableAgents } from './agents';
 import type { AgentId, Folder } from '../shared/types';
 import { isAllowedPath } from '../shared/pathGuard';
-import { isAllowedExternalUrl } from '../shared/externalUrl';
+import { isAllowedExternalUrl, isSafeRepoUrl } from '../shared/externalUrl';
 import { buildProjectList } from './projects';
 import { createProject } from './createProject';
 import { openProjects, openInEditor } from './launcher';
@@ -81,12 +81,16 @@ export function registerIpc(cfg: IpcConfig): void {
   ipcMain.handle('settings:get', () => ({
     baseDir: effBaseDir(), thresholds: effThresholds(), language: cfg.store.getLanguage() ?? cfg.defaultLanguage,
     openAtLogin: effectiveOpenAtLogin(cfg.store.getOpenAtLogin()), platform: process.platform,
+    viewMode: cfg.store.getViewMode(),
   }));
   ipcMain.handle('settings:setOpenAtLogin', (_e, enabled: boolean) => {
     const on = !!enabled;
     cfg.store.setOpenAtLogin(on);
     applyOpenAtLogin(on);
   });
+  ipcMain.handle('settings:setViewMode', (_e, mode: string) => {
+    cfg.store.setViewMode(mode === 'list' ? 'list' : 'cards');
+  });
   ipcMain.handle('settings:setBaseDir', (_e, dir: string) => cfg.store.setBaseDir(String(dir).slice(0, 2000)));
   ipcMain.handle('settings:getFolders', () => effFolders());
   ipcMain.handle('settings:addFolder', async (_e, p: string) => {
@@ -178,6 +182,19 @@ export function registerIpc(cfg: IpcConfig): void {
     return createProject(effFolders(), String(parent), String(name));
   });
 
+  // Open the project's GitHub page. The renderer passes only the path (never a URL);
+  // main re-reads the repo URL from git and validates it, so a compromised renderer
+  // can't open an arbitrary external URL.
+  ipcMain.handle('project:openRepo', async (_e, p: string) => {
+    if (!isAllowedPath(effFolders(), p)) {
+      cfg.sendError(`Path outside allowed folders: ${p}`);
+      return;
+    }
+    const url = await getRepoUrl(p);
+    if (url && isSafeRepoUrl(url)) await shell.openExternal(url);
+    else cfg.sendError(`No GitHub remote found for: ${p}`);
+  });
+
   // Frameless-window controls (the title bar draws its own buttons).
   ipcMain.handle('win:minimize', () => cfg.win.minimize());
   ipcMain.handle('win:toggleMaximize', () => {

src/main/projects.test.ts

@@ -20,6 +20,7 @@ function deps(over: Partial<BuildDeps>): BuildDeps {
       lastSubject: 'x',
       uncommitted: 0,
       ahead: null,
+      repoUrl: null,
     }),
     sessions: () => [],
     resumeCue: () => null,
@@ -59,7 +60,7 @@ describe('buildProjectList', () => {
   it('wires sessions + sessionCount and uses the latest session for activity', async () => {
     const NOW2 = NOW;
     const list = await buildProjectList(deps({
-      git: async (): Promise<GitInfo> => ({ branch: 'main', lastCommitMs: null, lastSubject: null, uncommitted: 0, ahead: 4 }),
+      git: async (): Promise<GitInfo> => ({ branch: 'main', lastCommitMs: null, lastSubject: null, uncommitted: 0, ahead: 4, repoUrl: 'https://github.com/acme/proj' }),
       sessions: (p) => p.endsWith('fresh')
         ? [{ id: 'x', mtimeMs: NOW2 - 3_600_000, firstMessage: 'hi' }]
         : [],
@@ -70,6 +71,7 @@ describe('buildProjectList', () => {
     expect(fresh.lastSessionMs).toBe(NOW2 - 3_600_000);
     expect(fresh.stale.level).toBe('fresh');
     expect(fresh.ahead).toBe(4); // unpushed count threaded through
+    expect(fresh.repoUrl).toBe('https://github.com/acme/proj'); // github remote threaded through
   });
 
   it('derives resumeCue from the newest session via the dep', async () => {

src/main/projects.ts

@@ -46,6 +46,7 @@ export async function buildProjectList(deps: BuildDeps): Promise<ProjectViewMode
         hidden: entry.hidden,
         lastOpened: entry.lastOpened,
         resumeCue: cueText ? ({ kind: 'lastMessage', text: cueText } satisfies ResumeCue) : null,
+        repoUrl: git.repoUrl,
       };
     }),
   );

src/main/store.test.ts

@@ -75,6 +75,15 @@ describe('Store', () => {
     expect(new Store(file).getOpenAtLogin()).toBe(false);
   });
 
+  it('persists viewMode and defaults to cards', () => {
+    const s = new Store(file);
+    expect(s.getViewMode()).toBe('cards');
+    s.setViewMode('list');
+    expect(new Store(file).getViewMode()).toBe('list');
+    s.setViewMode('cards');
+    expect(new Store(file).getViewMode()).toBe('cards');
+  });
+
   it('round-trips folders: add, dedupe, remove', () => {
     const s = new Store(file);
     expect(s.getFolders()).toEqual([]);

src/main/store.ts

@@ -4,7 +4,7 @@ import type { StoreEntry, Folder } from '../shared/types';
 
 interface StateFile {
   projects: Record<string, StoreEntry>;
-  settings?: { language?: string; baseDir?: string; folders?: Folder[]; thresholds?: { freshDays: number; warnDays: number; neglectedDays: number }; agent?: string; openAtLogin?: boolean };
+  settings?: { language?: string; baseDir?: string; folders?: Folder[]; thresholds?: { freshDays: number; warnDays: number; neglectedDays: number }; agent?: string; openAtLogin?: boolean; viewMode?: 'cards' | 'list' };
 }
 
 const EMPTY: StoreEntry = {
@@ -87,6 +87,9 @@ export class Store {
   getOpenAtLogin(): boolean { return this.state.settings?.openAtLogin ?? false; }
   setOpenAtLogin(openAtLogin: boolean): void { this.state.settings = { ...(this.state.settings ?? {}), openAtLogin }; this.save(); }
 
+  getViewMode(): 'cards' | 'list' { return this.state.settings?.viewMode === 'list' ? 'list' : 'cards'; }
+  setViewMode(viewMode: 'cards' | 'list'): void { this.state.settings = { ...(this.state.settings ?? {}), viewMode }; this.save(); }
+
   setNote(path: string, note: string): void { this.mutate(path, { note }); }
   setPinned(path: string, pinned: boolean): void { this.mutate(path, { pinned }); }
   setHidden(path: string, hidden: boolean): void { this.mutate(path, { hidden }); }

src/preload/preload.ts

@@ -24,7 +24,9 @@ contextBridge.exposeInMainWorld('devdeck', {
   pickFolder: () => ipcRenderer.invoke('settings:pickFolder'),
   openFolder: (path: string) => ipcRenderer.invoke('project:openFolder', path),
   openEditor: (path: string) => ipcRenderer.invoke('project:openEditor', path),
+  openRepo: (path: string) => ipcRenderer.invoke('project:openRepo', path),
   createProject: (parent: string, name: string) => ipcRenderer.invoke('project:create', parent, name),
+  setViewMode: (mode: 'cards' | 'list') => ipcRenderer.invoke('settings:setViewMode', mode),
   onUpdate: (cb: (p: import('../shared/update').UpdatePayload) => void) =>
     ipcRenderer.on('devdeck:update', (_e, p) => cb(p as import('../shared/update').UpdatePayload)),
   downloadUpdate: () => ipcRenderer.invoke('update:download'),

src/renderer/global.d.ts

@@ -15,7 +15,7 @@ declare global {
       getAgent(): Promise<import('../shared/types').AgentId>;
       setAgent(id: string): Promise<void>;
       availableAgents(): Promise<import('../shared/types').AgentId[]>;
-      getSettings(): Promise<{ baseDir: string; thresholds: { freshDays: number; warnDays: number; neglectedDays: number }; language: string; openAtLogin: boolean; platform: string }>;
+      getSettings(): Promise<{ baseDir: string; thresholds: { freshDays: number; warnDays: number; neglectedDays: number }; language: string; openAtLogin: boolean; platform: string; viewMode: 'cards' | 'list' }>;
       setBaseDir(dir: string): Promise<void>;
       getFolders(): Promise<import('../shared/types').Folder[]>;
       addFolder(path: string): Promise<import('../shared/types').Folder[]>;
@@ -25,7 +25,9 @@ declare global {
       pickFolder(): Promise<string | null>;
       openFolder(path: string): Promise<void>;
       openEditor(path: string): Promise<void>;
+      openRepo(path: string): Promise<void>;
       createProject(parent: string, name: string): Promise<import('../main/createProject').CreateProjectResult>;
+      setViewMode(mode: 'cards' | 'list'): Promise<void>;
       onUpdate(cb: (p: import('../shared/update').UpdatePayload) => void): void;
       downloadUpdate(): Promise<void>;
       installUpdate(): Promise<void>;