feat: public projects, project deletion and sagas

Public projects: - Project.isPublic (create/update, owners and admins). Anyone can read a public project without a token: project, board, tickets, comments, history, releases, activity, tracking and statistics, over GraphQL and REST. Writes stay for members (401 anonymous, 403 outsiders). - @OptionalAuth() / @ApiOptionalPireonAuth(): anonymous callers allowed, invalid tokens still rejected. ReadAccess lets anonymous viewers read public projects only; linked tickets are filtered by visibility. - publicProjects (GraphQL) and GET /api/explore/projects (REST). - Web: «Explorar» page, project pages open without a session (read-only notice, sign-in hints), public badge, visibility switch in settings, no realtime subscriptions without a session. Project deletion: - Owner only, confirming the key (deleteProject / DELETE /api/projects/{project}?confirm=KEY). The key is freed; the read model drops the project and members are notified (web goes home). Sagas (run by the EventsBridge after projections, durable and ordered): - ProjectDeletionSaga: project deleted → delete its tickets and releases; ticket deleted → purge its comments and drop links from other tickets. - ReleaseArchivedSaga: unfinished tickets leave an archived release. - UserDeactivatedSaga: the Pireon webhook records UserDeactivatedEvent in the event store (EventRecorder); the tracker unassigns that user's open tickets as the system actor. - Internal idempotent commands; domain refusals are logged and skipped, concurrency conflicts retried. Affected streams come from the event store (TrackerStreamsRepository). Tests: domain lifecycle specs, saga specs run like the bridge, facade tests, e2e for public access, cascade deletion, archived releases and deactivation webhook. Docs, READMEs, schema.gql/openapi.json and Word/PDF updated. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-07 07:04:20 +02:00
parent 0e301ad545
commit e656222b54
164 changed files with 3862 additions and 414 deletions
--- a/libs/web/identity/presenters/src/lib/pages/login.page.scss
+++ b/libs/web/identity/presenters/src/lib/pages/login.page.scss
@@ -59,7 +59,7 @@

 .ts-login__lead {
  max-width: 46ch;
-  margin: 0 0 2.25rem;
+  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ts-muted);
@@ -192,3 +192,19 @@
 .ts-login__form {
  row-gap: 1.75rem;
 }
+
+.ts-login__explore {
+  margin: 0 0 2.25rem;
+  font-size: 0.9375rem;
+  color: var(--ts-muted);
+
+  a {
+    font-weight: 600;
+    color: var(--ts-brand);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
--- a/libs/web/identity/presenters/src/lib/pages/login.page.ts
+++ b/libs/web/identity/presenters/src/lib/pages/login.page.ts
@@ -1,3 +1,4 @@
+import { RouterLink } from '@angular/router';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -85,6 +86,7 @@ const SAMPLE_FEED = [
  selector: 'ts-login-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
+    RouterLink,
    LogoComponent,
    PiActionButtonComponent,
    PiDividerComponent,
@@ -109,6 +111,10 @@ const SAMPLE_FEED = [
          Bugs, cambios de UI, features y QA de tu equipo en un tablero que se
          mueve solo. Front, back y QA, enlazados de punta a punta.
        </p>
+        <p class="ts-login__explore">
+          ¿Solo quieres mirar?
+          <a routerLink="/explorar">Proyectos públicos →</a>
+        </p>
        <div class="ts-feed ts-panel" aria-hidden="true">
          <div class="ts-feed__track">
            @for (event of feed; track $index) {
--- a/libs/web/tracker/application/README.md
+++ b/libs/web/tracker/application/README.md
@@ -9,7 +9,9 @@ Estado del tracker (NgRx Signals con eventos) detrás de facades.

 - Facades (lo que se exporta): `ProjectsFacade` y `HomeFacade` («Mi trabajo») (raíz) y `ProjectFacade`, `BoardFacade`, `IssueFacade` (de ruta, con
  `provideProjectFacade()`, `provideBoardFacade()`, `provideIssueFacade()`). Tests en `facades/facades.spec.ts`.
- `ProjectFacade` también da la configuración del proyecto (`workflow`, `saveSettings`) y sus estadísticas
+- `ExploreFacade` (raíz): proyectos públicos, también sin sesión.
+- `ProjectFacade` también da la visibilidad (`setPublic`) y el borrado (`deleteProject`, vuelve a la portada; y si otro
+  lo borra, también), y la configuración del proyecto (`workflow`, `saveSettings`) y sus estadísticas
  (`loadAnalytics`, `loadBurnup`).
 - Interno: stores `ProjectsStore`, `ProjectStore`, `HomeStore`, `BoardStore`, `IssueStore` y eventos por origen
  (`*PageEvents`, `*ApiEvents`, `*RealtimeEvents`).
--- a/libs/web/tracker/application/src/index.ts
+++ b/libs/web/tracker/application/src/index.ts
@@ -4,3 +4,4 @@ export * from './lib/facades/project.facade';
 export * from './lib/facades/board.facade';
 export * from './lib/facades/issue.facade';
 export * from './lib/facades/home.facade';
+export * from './lib/facades/explore.facade';
--- a/libs/web/tracker/application/src/lib/events/explore.events.ts
+++ b/libs/web/tracker/application/src/lib/events/explore.events.ts
@@ -0,0 +1,18 @@
+import { type } from '@ngrx/signals';
+import { eventGroup } from '@ngrx/signals/events';
+import { Project } from '@task-stream/web/tracker/domain';
+
+export const explorePageEvents = eventGroup({
+  source: 'Explore Page',
+  events: {
+    opened: type<void>(),
+  },
+});
+
+export const exploreApiEvents = eventGroup({
+  source: 'Explore API',
+  events: {
+    loaded: type<Project[]>(),
+    loadFailed: type<string>(),
+  },
+});
--- a/libs/web/tracker/application/src/lib/events/project.events.ts
+++ b/libs/web/tracker/application/src/lib/events/project.events.ts
@@ -30,6 +30,8 @@ export const projectPageEvents = eventGroup({
    }>(),
    analyticsRequested: type<{ projectId: string; days: number }>(),
    burnupRequested: type<{ releaseId: string }>(),
+    visibilityChangeRequested: type<{ projectId: string; isPublic: boolean }>(),
+    deleteRequested: type<{ projectId: string; confirmKey: string }>(),
  },
 });

@@ -48,6 +50,8 @@ export const projectApiEvents = eventGroup({
    analyticsFailed: type<string>(),
    burnupLoaded: type<ReleaseBurnup>(),
    settingsSaved: type<string>(),
+    /** I deleted the open project. */
+    deleted: type<string>(),
  },
 });

@@ -55,6 +59,8 @@ export const projectRealtimeEvents = eventGroup({
  source: 'Project Realtime',
  events: {
    projectChanged: type<Project>(),
+    /** Someone else deleted the open project. */
+    projectDeleted: type<Project>(),
    activityAdded: type<Activity>(),
    releaseChanged: type<Release>(),
  },
--- a/libs/web/tracker/application/src/lib/facades/explore.facade.ts
+++ b/libs/web/tracker/application/src/lib/facades/explore.facade.ts
@@ -0,0 +1,22 @@
+import { inject, Injectable } from '@angular/core';
+import { injectDispatch } from '@ngrx/signals/events';
+import { explorePageEvents } from '../events/explore.events';
+import { ExploreStore } from '../stores/explore.store';
+
+/** "Explorar": public projects, for anyone (no sign-in needed). */
+@Injectable({ providedIn: 'root' })
+export class ExploreFacade {
+  private readonly store = inject(ExploreStore);
+  private readonly dispatch = injectDispatch(explorePageEvents);
+
+  /** By name. */
+  readonly projects = this.store.projects;
+  /** False until the first load: show skeletons, not empty states. */
+  readonly loaded = this.store.loaded;
+  readonly loading = this.store.loading;
+  readonly error = this.store.error;
+
+  load(): void {
+    this.dispatch.opened();
+  }
+}
--- a/libs/web/tracker/application/src/lib/facades/facades.spec.ts
+++ b/libs/web/tracker/application/src/lib/facades/facades.spec.ts
@@ -13,7 +13,8 @@ import {
  TrackerRealtimeGateway,
  UsersGateway,
 } from '@task-stream/web/tracker/domain';
-import { NEVER, of } from 'rxjs';
+import { Router } from '@angular/router';
+import { NEVER, of, Subject } from 'rxjs';
 import { boardPageEvents } from '../events/board.events';
 import { projectPageEvents } from '../events/project.events';
 import { Notifications } from '../notifications';
@@ -35,6 +36,8 @@ function gateways() {
      stats: vi.fn(() => NEVER),
      addMember: vi.fn(() => of(ok)),
      updateSettings: vi.fn(() => of(ok)),
+      update: vi.fn(() => of(ok)),
+      delete: vi.fn(() => of(ok)),
      analytics: vi.fn(() => of(analytics)),
    },
    issues: {
@@ -48,7 +51,7 @@ function gateways() {
      commentChanges: () => NEVER,
      activity: () => NEVER,
      releaseChanges: () => NEVER,
-      projectChanges: () => NEVER,
+      projectChanges: vi.fn((): unknown => NEVER),
    },
  };
 }
@@ -86,8 +89,12 @@ function setup() {
      { provide: AuthFacade, useValue: { user: signal({ id: 'me' }) } },
    ],
  });
+  const navigate = vi
+    .spyOn(TestBed.inject(Router), 'navigateByUrl')
+    .mockResolvedValue(true);
+  const notifications = TestBed.inject(Notifications);
  const host = TestBed.createComponent(Host).componentInstance;
-  return { ...host, fakes };
+  return { ...host, fakes, navigate, notifications };
 }

 describe('BoardFacade', () => {
@@ -152,6 +159,40 @@ describe('ProjectFacade', () => {
    expect(project.workflow().status('IN_REVIEW').name).toBe('In review');
  });

+  it('makes the project public and deletes it, then goes home', () => {
+    const { project, fakes, navigate, notifications } = setup();
+    project.open('WEB');
+
+    project.setPublic(true);
+    expect(fakes.projects.update).toHaveBeenCalledWith({
+      projectId: 'p1',
+      isPublic: true,
+    });
+
+    project.deleteProject('WEB');
+    expect(fakes.projects.delete).toHaveBeenCalledWith('p1', 'WEB');
+    expect(project.deleting()).toBe(false);
+    expect(notifications.success).toHaveBeenLastCalledWith(
+      'Proyecto WEB eliminado',
+    );
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+
+  it('leaves when someone else deletes the open project', () => {
+    const live = new Subject<unknown>();
+    const { project, fakes, navigate, notifications } = setup();
+    fakes.realtime.projectChanges.mockReturnValue(live);
+    project.open('WEB');
+
+    live.next({ project, deleted: false });
+    expect(navigate).not.toHaveBeenCalled();
+    live.next({ project: { key: 'WEB' }, deleted: true });
+    expect(notifications.success).toHaveBeenCalledWith(
+      'El proyecto WEB se ha eliminado',
+    );
+    expect(navigate).toHaveBeenCalledWith('/');
+  });
+
  it('searches the directory from two characters', () => {
    const { project } = setup();
    const seen: string[] = [];
--- a/libs/web/tracker/application/src/lib/facades/project.facade.ts
+++ b/libs/web/tracker/application/src/lib/facades/project.facade.ts
@@ -1,4 +1,4 @@
-import { inject, Injectable, Provider } from '@angular/core';
+import { computed, inject, Injectable, Provider } from '@angular/core';
 import { injectDispatch } from '@ngrx/signals/events';
 import {
  CreateReleaseInput,
@@ -41,6 +41,9 @@ export class ProjectFacade {
  readonly analyticsError = this.store.analyticsError;
  /** Burnup of the release asked for with `loadBurnup`. */
  readonly burnup = this.store.burnup;
+  readonly deleting = this.store.deleting;
+  /** Only the owner can delete the project. */
+  readonly isOwner = computed(() => this.store.myRole() === ProjectRole.OWNER);

  /** Loads the project (by id or key) and follows its changes. */
  open(idOrKey: string): void {
@@ -91,6 +94,22 @@ export class ProjectFacade {
    if (projectId) this.dispatch.settingsSaveRequested({ projectId, settings });
  }

+  /** Public: anyone (also without signing in) can read it. Owners and admins. */
+  setPublic(isPublic: boolean): void {
+    const projectId = this.projectId();
+    if (projectId)
+      this.dispatch.visibilityChangeRequested({ projectId, isPublic });
+  }
+
+  /**
+   * Owner only, typing the key to confirm. Tickets, comments and releases go
+   * too; on success it navigates home.
+   */
+  deleteProject(confirmKey: string): void {
+    const projectId = this.projectId();
+    if (projectId) this.dispatch.deleteRequested({ projectId, confirmKey });
+  }
+
  loadAnalytics(days = this.store.analyticsDays()): void {
    const projectId = this.projectId();
    if (projectId) this.dispatch.analyticsRequested({ projectId, days });
--- a/libs/web/tracker/application/src/lib/stores/explore.store.ts
+++ b/libs/web/tracker/application/src/lib/stores/explore.store.ts
@@ -0,0 +1,58 @@
+import { inject } from '@angular/core';
+import { mapResponse } from '@ngrx/operators';
+import { signalStore, withState } from '@ngrx/signals';
+import {
+  Events,
+  on,
+  withEventHandlers,
+  withReducer,
+} from '@ngrx/signals/events';
+import { Project, ProjectsGateway } from '@task-stream/web/tracker/domain';
+import { switchMap } from 'rxjs';
+import { exploreApiEvents, explorePageEvents } from '../events/explore.events';
+import { describeError } from '../notifications';
+
+interface ExploreState {
+  projects: Project[];
+  loaded: boolean;
+  loading: boolean;
+  error: string | null;
+}
+
+/** Public projects, readable by anyone (also without signing in). */
+export const ExploreStore = signalStore(
+  { providedIn: 'root' },
+  withState<ExploreState>({
+    projects: [],
+    loaded: false,
+    loading: false,
+    error: null,
+  }),
+  withReducer(
+    on(explorePageEvents.opened, () => ({ loading: true, error: null })),
+    on(exploreApiEvents.loaded, ({ payload }) => ({
+      projects: payload,
+      loaded: true,
+      loading: false,
+    })),
+    on(exploreApiEvents.loadFailed, ({ payload }) => ({
+      loading: false,
+      error: payload,
+    })),
+  ),
+  withEventHandlers(
+    (_store, events = inject(Events), projects = inject(ProjectsGateway)) => ({
+      load$: events.on(explorePageEvents.opened).pipe(
+        switchMap(() =>
+          projects.publicProjects().pipe(
+            mapResponse({
+              next: (list) => exploreApiEvents.loaded(list),
+              error: (error) =>
+                exploreApiEvents.loadFailed(describeError(error)),
+            }),
+          ),
+        ),
+      ),
+    }),
+  ),
+);
--- a/libs/web/tracker/application/src/lib/stores/project.store.ts
+++ b/libs/web/tracker/application/src/lib/stores/project.store.ts
@@ -24,8 +24,11 @@ import {
  UsersGateway,
  Workflow,
 } from '@task-stream/web/tracker/domain';
+import { Router } from '@angular/router';
 import {
  debounceTime,
+  exhaustMap,
+  filter,
  map,
  merge,
  mergeMap,
@@ -56,6 +59,8 @@ interface ProjectState {
  burnup: ReleaseBurnup | null;
  /** True while settings are being saved (until the project comes back changed). */
  savingSettings: boolean;
+  /** True from asking to delete the project until the answer. */
+  deleting: boolean;
  loading: boolean;
  error: string | null;
 }
@@ -74,6 +79,7 @@ export const ProjectStore = signalStore(
    analyticsError: null,
    burnup: null,
    savingSettings: false,
+    deleting: false,
    loading: false,
    error: null,
  }),
@@ -120,10 +126,12 @@ export const ProjectStore = signalStore(
    on(projectPageEvents.settingsSaveRequested, () => ({
      savingSettings: true,
    })),
+    on(projectPageEvents.deleteRequested, () => ({ deleting: true })),
+    on(projectApiEvents.deleted, () => ({ deleting: false })),
    on(
      projectApiEvents.commandSucceeded,
      projectApiEvents.commandFailed,
-      () => ({ savingSettings: false }),
+      () => ({ savingSettings: false, deleting: false }),
    ),
    on(projectPageEvents.analyticsRequested, ({ payload }) => ({
      analyticsDays: payload.days,
@@ -171,6 +179,7 @@ export const ProjectStore = signalStore(
      realtime = inject(TrackerRealtimeGateway),
      notifications = inject(Notifications),
      users = inject(UsersGateway),
+      router = inject(Router),
    ) => {
      const loaded$ = events.on(projectApiEvents.loaded);
      const reloadReleases = (projectId: string) =>
@@ -218,7 +227,13 @@ export const ProjectStore = signalStore(
            merge(
              realtime
                .projectChanges(payload.id)
-                .pipe(map((p) => projectRealtimeEvents.projectChanged(p))),
+                .pipe(
+                  map(({ project, deleted }) =>
+                    deleted
+                      ? projectRealtimeEvents.projectDeleted(project)
+                      : projectRealtimeEvents.projectChanged(project),
+                  ),
+                ),
              realtime
                .activity(payload.id)
                .pipe(map((a) => projectRealtimeEvents.activityAdded(a))),
@@ -335,6 +350,20 @@ export const ProjectStore = signalStore(
                ),
              ),
            ),
+          events
+            .on(projectPageEvents.visibilityChangeRequested)
+            .pipe(
+              mergeMap(({ payload }) =>
+                runCommand(
+                  projects.update(payload),
+                  payload.isPublic
+                    ? 'Proyecto público: cualquiera puede verlo'
+                    : 'Proyecto privado: solo para sus miembros',
+                  projectApiEvents.commandSucceeded,
+                  projectApiEvents.commandFailed,
+                ),
+              ),
+            ),
          events
            .on(projectPageEvents.releaseCreateRequested)
            .pipe(
@@ -372,6 +401,36 @@ export const ProjectStore = signalStore(
              ),
            ),
        ),
+        delete$: events.on(projectPageEvents.deleteRequested).pipe(
+          exhaustMap(({ payload }) =>
+            projects.delete(payload.projectId, payload.confirmKey).pipe(
+              mapResponse({
+                next: () =>
+                  projectApiEvents.deleted(
+                    `Proyecto ${store.project()?.key ?? ''} eliminado`,
+                  ),
+                error: (error) =>
+                  projectApiEvents.commandFailed(describeError(error)),
+              }),
+            ),
+          ),
+        ),
+        /** Gone (by me or by someone else): back to the home page. */
+        leave$: merge(
+          events
+            .on(projectApiEvents.deleted)
+            .pipe(map(({ payload }) => payload)),
+          events.on(projectRealtimeEvents.projectDeleted).pipe(
+            // My own deletion already said so.
+            filter(() => !store.deleting()),
+            map(({ payload }) => `El proyecto ${payload.key} se ha eliminado`),
+          ),
+        ).pipe(
+          tap((message) => {
+            notifications.success(message);
+            void router.navigateByUrl('/');
+          }),
+        ),
        feedback$: merge(
          events
            .on(projectApiEvents.commandSucceeded)
--- a/libs/web/tracker/application/src/lib/stores/projects.store.ts
+++ b/libs/web/tracker/application/src/lib/stores/projects.store.ts
@@ -88,12 +88,12 @@ export const ProjectsStore = signalStore(
      /** One live subscription for the whole session. */
      live$: events.on(projectsPageEvents.opened).pipe(
        exhaustMap(() => realtime.myProjectsChanges()),
-        map((project) =>
+        map(({ project, deleted }) =>
          projectsRealtimeEvents.projectChanged({
            project,
-            stillMember: project.members.some(
-              (m) => m.user.id === auth.user()?.id,
-            ),
+            stillMember:
+              !deleted &&
+              project.members.some((m) => m.user.id === auth.user()?.id),
          }),
        ),
      ),
--- a/libs/web/tracker/domain/src/lib/models/inputs.ts
+++ b/libs/web/tracker/domain/src/lib/models/inputs.ts
@@ -9,6 +9,14 @@ export interface CreateProjectInput {
  key: string;
  name: string;
  description?: string | null;
+  isPublic?: boolean;
+}
+
+export interface UpdateProjectInput {
+  projectId: string;
+  name?: string;
+  description?: string | null;
+  isPublic?: boolean;
 }

 export interface CreateIssueInput {
--- a/libs/web/tracker/domain/src/lib/models/models.ts
+++ b/libs/web/tracker/domain/src/lib/models/models.ts
@@ -22,6 +22,8 @@ export interface Project {
  key: string;
  name: string;
  description: string | null;
+  /** Anyone can read it, also without signing in. */
+  isPublic: boolean;
  owner: UserRef;
  members: ProjectMember[];
  settings: ProjectSettings;
--- a/libs/web/tracker/domain/src/lib/ports/gateways.ts
+++ b/libs/web/tracker/domain/src/lib/ports/gateways.ts
@@ -25,6 +25,7 @@ import {
  MemberInput,
  MyIssuesFilter,
  UpdateIssueInput,
+  UpdateProjectInput,
 } from '../models/inputs';

 /*
@@ -34,6 +35,8 @@ import {

 export abstract class ProjectsGateway {
  abstract myProjects(): Observable<Project[]>;
+  /** Projects anyone can read (no sign-in needed). */
+  abstract publicProjects(): Observable<Project[]>;
  abstract project(idOrKey: string): Observable<Project>;
  abstract stats(projectId: string): Observable<ProjectStats>;
  /** Statistics of the last `days` days. */
@@ -47,6 +50,13 @@ export abstract class ProjectsGateway {
    settings: ProjectSettings,
  ): Observable<CommandResult>;
  abstract create(input: CreateProjectInput): Observable<CommandResult>;
+  /** Name, description or visibility (owners and admins). */
+  abstract update(input: UpdateProjectInput): Observable<CommandResult>;
+  /** Owner only; `confirmKey` must be the project key. */
+  abstract delete(
+    projectId: string,
+    confirmKey: string,
+  ): Observable<CommandResult>;
  abstract addMember(input: MemberInput): Observable<CommandResult>;
  abstract changeMemberRole(input: MemberInput): Observable<CommandResult>;
  abstract removeMember(
@@ -118,11 +128,18 @@ export interface CommentChanged {
  comment: Comment | null;
 }

+/** A project changed, or was deleted (then `project` is its last state). */
+export interface ProjectChanged {
+  project: Project;
+  deleted: boolean;
+}
+
+/** Realtime needs a session: without one, these streams stay silent. */
 export abstract class TrackerRealtimeGateway {
  abstract issueChanges(projectId: string): Observable<IssueChanged>;
  abstract commentChanges(issueId: string): Observable<CommentChanged>;
  abstract activity(projectId: string): Observable<Activity>;
  abstract releaseChanges(projectId: string): Observable<Release>;
-  abstract projectChanges(projectId: string): Observable<Project>;
-  abstract myProjectsChanges(): Observable<Project>;
+  abstract projectChanges(projectId: string): Observable<ProjectChanged>;
+  abstract myProjectsChanges(): Observable<ProjectChanged>;
 }
--- a/libs/web/tracker/infrastructure/src/lib/adapters/graphql-projects.gateway.ts
+++ b/libs/web/tracker/infrastructure/src/lib/adapters/graphql-projects.gateway.ts
@@ -8,17 +8,21 @@ import {
  ProjectSettings,
  ProjectsGateway,
  ProjectStats,
+  UpdateProjectInput,
 } from '@task-stream/web/tracker/domain';
 import { map, Observable } from 'rxjs';
 import {
  AddProjectMemberDocument,
  ChangeProjectMemberRoleDocument,
  CreateProjectDocument,
+  DeleteProjectDocument,
  MyProjectsDocument,
  ProjectAnalyticsDocument,
  ProjectDocument,
  ProjectStatsDocument,
+  PublicProjectsDocument,
  RemoveProjectMemberDocument,
+  UpdateProjectDocument,
  UpdateProjectSettingsDocument,
 } from '../graphql/generated';
 import { GraphqlOperations } from './graphql-operations';
@@ -39,6 +43,12 @@ export class GraphqlProjectsGateway extends ProjectsGateway {
      .pipe(map((d) => d.myProjects.map(toProject)));
  }

+  publicProjects(): Observable<Project[]> {
+    return this.gql
+      .query(PublicProjectsDocument)
+      .pipe(map((d) => d.publicProjects.map(toProject)));
+  }
+
  project(idOrKey: string): Observable<Project> {
    return this.gql
      .query(ProjectDocument, { idOrKey })
@@ -75,6 +85,18 @@ export class GraphqlProjectsGateway extends ProjectsGateway {
      .pipe(map((d) => toCommandResult(d.createProject)));
  }

+  update(input: UpdateProjectInput): Observable<CommandResult> {
+    return this.gql
+      .mutate(UpdateProjectDocument, { input })
+      .pipe(map((d) => toCommandResult(d.updateProject)));
+  }
+
+  delete(projectId: string, confirmKey: string): Observable<CommandResult> {
+    return this.gql
+      .mutate(DeleteProjectDocument, { projectId, confirmKey })
+      .pipe(map((d) => toCommandResult(d.deleteProject)));
+  }
+
  addMember(input: MemberInput): Observable<CommandResult> {
    return this.gql
      .mutate(AddProjectMemberDocument, { input: input as never })
--- a/libs/web/tracker/infrastructure/src/lib/adapters/graphql-realtime.gateway.ts
+++ b/libs/web/tracker/infrastructure/src/lib/adapters/graphql-realtime.gateway.ts
@@ -1,13 +1,14 @@
 import { inject, Injectable } from '@angular/core';
+import { AccessTokenSource } from '@task-stream/web/shared/infrastructure';
 import {
  Activity,
  CommentChanged,
  IssueChanged,
-  Project,
+  ProjectChanged,
  Release,
  TrackerRealtimeGateway,
 } from '@task-stream/web/tracker/domain';
-import { map, Observable } from 'rxjs';
+import { defer, EMPTY, map, Observable, switchMap } from 'rxjs';
 import {
  ActivityAddedDocument,
  CommentChangedDocument,
@@ -25,53 +26,84 @@ import {
  toRelease,
 } from './mappers';

-/** GraphQL subscriptions (graphql-ws). Each stream lives while it is subscribed. */
+/**
+ * GraphQL subscriptions (graphql-ws). Each stream lives while it is
+ * subscribed. The API only accepts signed-in sockets, so anonymous visitors
+ * of public projects get no live updates (instead of a socket retrying forever).
+ */
@Injectable()
 export class GraphqlRealtimeGateway extends TrackerRealtimeGateway {
  private readonly gql = inject(GraphqlOperations);
+  private readonly tokens = inject(AccessTokenSource);
+
+  private signedIn<T>(stream: () => Observable<T>): Observable<T> {
+    return defer(() => this.tokens.accessToken()).pipe(
+      switchMap((token) => (token ? stream() : EMPTY)),
+    );
+  }

  issueChanges(projectId: string): Observable<IssueChanged> {
-    return this.gql.subscribe(IssueChangedDocument, { projectId }).pipe(
-      map(({ issueChanged }) => ({
-        ...issueChanged,
-        issue: toIssueSummary(issueChanged.issue),
-      })),
+    return this.signedIn(() =>
+      this.gql.subscribe(IssueChangedDocument, { projectId }).pipe(
+        map(({ issueChanged }) => ({
+          ...issueChanged,
+          issue: toIssueSummary(issueChanged.issue),
+        })),
+      ),
    );
  }

  commentChanges(issueId: string): Observable<CommentChanged> {
-    return this.gql.subscribe(CommentChangedDocument, { issueId }).pipe(
-      map(({ commentChanged }) => ({
-        action: commentChanged.action,
-        commentId: commentChanged.commentId,
-        comment: commentChanged.comment
-          ? toComment(commentChanged.comment)
-          : null,
-      })),
+    return this.signedIn(() =>
+      this.gql.subscribe(CommentChangedDocument, { issueId }).pipe(
+        map(({ commentChanged }) => ({
+          action: commentChanged.action,
+          commentId: commentChanged.commentId,
+          comment: commentChanged.comment
+            ? toComment(commentChanged.comment)
+            : null,
+        })),
+      ),
    );
  }

  activity(projectId: string): Observable<Activity> {
-    return this.gql
-      .subscribe(ActivityAddedDocument, { projectId })
-      .pipe(map((d) => toActivity(d.activityAdded)));
+    return this.signedIn(() =>
+      this.gql
+        .subscribe(ActivityAddedDocument, { projectId })
+        .pipe(map((d) => toActivity(d.activityAdded))),
+    );
  }

  releaseChanges(projectId: string): Observable<Release> {
-    return this.gql
-      .subscribe(ReleaseChangedDocument, { projectId })
-      .pipe(map((d) => toRelease(d.releaseChanged.release)));
+    return this.signedIn(() =>
+      this.gql
+        .subscribe(ReleaseChangedDocument, { projectId })
+        .pipe(map((d) => toRelease(d.releaseChanged.release))),
+    );
  }

-  projectChanges(projectId: string): Observable<Project> {
-    return this.gql
-      .subscribe(ProjectChangedDocument, { projectId })
-      .pipe(map((d) => toProject(d.projectChanged.project)));
+  projectChanges(projectId: string): Observable<ProjectChanged> {
+    return this.signedIn(() =>
+      this.gql
+        .subscribe(ProjectChangedDocument, { projectId })
+        .pipe(map((d) => toProjectChanged(d.projectChanged))),
+    );
  }

-  myProjectsChanges(): Observable<Project> {
-    return this.gql
-      .subscribe(MyProjectsChangedDocument)
-      .pipe(map((d) => toProject(d.myProjectsChanged.project)));
+  myProjectsChanges(): Observable<ProjectChanged> {
+    return this.signedIn(() =>
+      this.gql
+        .subscribe(MyProjectsChangedDocument)
+        .pipe(map((d) => toProjectChanged(d.myProjectsChanged))),
+    );
  }
 }
+
+const toProjectChanged = (change: {
+  action: string;
+  project: Parameters<typeof toProject>[0];
+}): ProjectChanged => ({
+  project: toProject(change.project),
+  deleted: change.action === 'ProjectDeletedEvent',
+});
--- a/libs/web/tracker/infrastructure/src/lib/graphql/fragments.graphql
+++ b/libs/web/tracker/infrastructure/src/lib/graphql/fragments.graphql
@@ -8,6 +8,7 @@ fragment ProjectFields on Project {
  key
  name
  description
+  isPublic
  updatedAt
  version
  owner {
--- a/libs/web/tracker/infrastructure/src/lib/graphql/generated.ts
+++ b/libs/web/tracker/infrastructure/src/lib/graphql/generated.ts
@@ -41,6 +41,8 @@ export type CreateIssueInput = {

 export type CreateProjectInput = {
  description?: string | null | undefined;
+  /** Readable by anyone, also without signing in */
+  isPublic?: boolean | null | undefined;
  /** 2-10 chars, e.g. "TS" → tickets TS-1, TS-2... */
  key: string;
  name: string;
@@ -141,6 +143,13 @@ export type UpdateIssueInput = {
  type?: string | null | undefined;
 };

+export type UpdateProjectInput = {
+  description?: string | null | undefined;
+  isPublic?: boolean | null | undefined;
+  name?: string | null | undefined;
+  projectId: string;
+};
+
 export type WorkflowStatusInput = {
  archived?: boolean;
  category: StatusCategory;
@@ -157,6 +166,7 @@ export type ProjectFieldsFragment = {
  key: string;
  name: string;
  description: string | null;
+  isPublic: boolean;
  updatedAt: string;
  version: number;
  owner: { id: string; name: string };
@@ -504,6 +514,7 @@ export type MyProjectsQuery = {
    key: string;
    name: string;
    description: string | null;
+    isPublic: boolean;
    updatedAt: string;
    version: number;
    owner: { id: string; name: string };
@@ -540,6 +551,7 @@ export type ProjectQuery = {
    key: string;
    name: string;
    description: string | null;
+    isPublic: boolean;
    updatedAt: string;
    version: number;
    owner: { id: string; name: string };
@@ -678,6 +690,58 @@ export type ProjectAnalyticsQuery = {
  };
 };

+export type PublicProjectsQueryVariables = Exact<{ [key: string]: never }>;
+
+export type PublicProjectsQuery = {
+  publicProjects: Array<{
+    id: string;
+    key: string;
+    name: string;
+    description: string | null;
+    isPublic: boolean;
+    updatedAt: string;
+    version: number;
+    owner: { id: string; name: string };
+    members: Array<{ role: ProjectRole; user: { id: string; name: string } }>;
+    settings: {
+      statuses: Array<{
+        id: string;
+        name: string;
+        category: StatusCategory;
+        color: string;
+        requiresReason: boolean;
+        archived: boolean;
+      }>;
+      transitions: Array<{ from: string; to: Array<string> }>;
+      issueTypes: Array<{
+        id: string;
+        name: string;
+        icon: string;
+        color: string;
+        archived: boolean;
+      }>;
+      areas: Array<{ id: string; name: string; archived: boolean }>;
+    };
+  }>;
+};
+
+export type UpdateProjectMutationVariables = Exact<{
+  input: UpdateProjectInput;
+}>;
+
+export type UpdateProjectMutation = {
+  updateProject: { id: string; key: string | null; version: number };
+};
+
+export type DeleteProjectMutationVariables = Exact<{
+  projectId: string;
+  confirmKey: string;
+}>;
+
+export type DeleteProjectMutation = {
+  deleteProject: { id: string; key: string | null; version: number };
+};
+
 export type ReleasesQueryVariables = Exact<{
  idOrKey: string;
 }>;
@@ -862,11 +926,13 @@ export type ProjectChangedSubscriptionVariables = Exact<{

 export type ProjectChangedSubscription = {
  projectChanged: {
+    action: string;
    project: {
      id: string;
      key: string;
      name: string;
      description: string | null;
+      isPublic: boolean;
      updatedAt: string;
      version: number;
      owner: { id: string; name: string };
@@ -900,11 +966,13 @@ export type MyProjectsChangedSubscriptionVariables = Exact<{

 export type MyProjectsChangedSubscription = {
  myProjectsChanged: {
+    action: string;
    project: {
      id: string;
      key: string;
      name: string;
      description: string | null;
+      isPublic: boolean;
      updatedAt: string;
      version: number;
      owner: { id: string; name: string };
@@ -969,6 +1037,7 @@ export const ProjectFieldsFragmentDoc = {
          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
          {
@@ -3067,6 +3136,7 @@ export const MyProjectsDocument = {
          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
          {
@@ -3267,6 +3337,7 @@ export const ProjectDocument = {
          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
          {
@@ -4263,6 +4334,346 @@ export const ProjectAnalyticsDocument = {
  ProjectAnalyticsQuery,
  ProjectAnalyticsQueryVariables
 >;
+export const PublicProjectsDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'PublicProjects' },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'publicProjects' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'FragmentSpread',
+                  name: { kind: 'Name', value: 'ProjectFields' },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'UserRefFields' },
+      typeCondition: {
+        kind: 'NamedType',
+        name: { kind: 'Name', value: 'UserRef' },
+      },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+        ],
+      },
+    },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'ProjectFields' },
+      typeCondition: {
+        kind: 'NamedType',
+        name: { kind: 'Name', value: 'Project' },
+      },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'owner' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'FragmentSpread',
+                  name: { kind: 'Name', value: 'UserRefFields' },
+                },
+              ],
+            },
+          },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'members' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'role' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'user' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'FragmentSpread',
+                        name: { kind: 'Name', value: 'UserRefFields' },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'settings' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'statuses' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'category' },
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'color' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'requiresReason' },
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'archived' },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'transitions' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'from' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'to' } },
+                    ],
+                  },
+                },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'issueTypes' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'icon' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'color' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'archived' },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'areas' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'archived' },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<PublicProjectsQuery, PublicProjectsQueryVariables>;
+export const UpdateProjectDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'UpdateProject' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'input' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'UpdateProjectInput' },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'updateProject' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'input' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'input' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'FragmentSpread',
+                  name: { kind: 'Name', value: 'CommandResultFields' },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'CommandResultFields' },
+      typeCondition: {
+        kind: 'NamedType',
+        name: { kind: 'Name', value: 'CommandResult' },
+      },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  UpdateProjectMutation,
+  UpdateProjectMutationVariables
+>;
+export const DeleteProjectDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'DeleteProject' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'projectId' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'ID' } },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'confirmKey' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'String' },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'deleteProject' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'projectId' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'projectId' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'confirmKey' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'confirmKey' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'FragmentSpread',
+                  name: { kind: 'Name', value: 'CommandResultFields' },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'CommandResultFields' },
+      typeCondition: {
+        kind: 'NamedType',
+        name: { kind: 'Name', value: 'CommandResult' },
+      },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  DeleteProjectMutation,
+  DeleteProjectMutationVariables
+>;
 export const ReleasesDocument = {
  kind: 'Document',
  definitions: [
@@ -5344,6 +5755,7 @@ export const ProjectChangedDocument = {
            selectionSet: {
              kind: 'SelectionSet',
              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'action' } },
                {
                  kind: 'Field',
                  name: { kind: 'Name', value: 'project' },
@@ -5392,6 +5804,7 @@ export const ProjectChangedDocument = {
          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
          {
@@ -5530,6 +5943,7 @@ export const MyProjectsChangedDocument = {
            selectionSet: {
              kind: 'SelectionSet',
              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'action' } },
                {
                  kind: 'Field',
                  name: { kind: 'Name', value: 'project' },
@@ -5578,6 +5992,7 @@ export const MyProjectsChangedDocument = {
          { kind: 'Field', name: { kind: 'Name', value: 'key' } },
          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
          { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'isPublic' } },
          { kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
          { kind: 'Field', name: { kind: 'Name', value: 'version' } },
          {
--- a/libs/web/tracker/infrastructure/src/lib/graphql/projects.graphql
+++ b/libs/web/tracker/infrastructure/src/lib/graphql/projects.graphql
@@ -126,3 +126,21 @@ query ProjectAnalytics($idOrKey: String!, $days: Int!) {
    }
  }
 }
+
+query PublicProjects {
+  publicProjects {
+    ...ProjectFields
+  }
+}
+
+mutation UpdateProject($input: UpdateProjectInput!) {
+  updateProject(input: $input) {
+    ...CommandResultFields
+  }
+}
+
+mutation DeleteProject($projectId: ID!, $confirmKey: String!) {
+  deleteProject(projectId: $projectId, confirmKey: $confirmKey) {
+    ...CommandResultFields
+  }
+}
--- a/libs/web/tracker/infrastructure/src/lib/graphql/subscriptions.graphql
+++ b/libs/web/tracker/infrastructure/src/lib/graphql/subscriptions.graphql
@@ -35,6 +35,7 @@ subscription ReleaseChanged($projectId: ID!) {

 subscription ProjectChanged($projectId: ID!) {
  projectChanged(projectId: $projectId) {
+    action
    project {
      ...ProjectFields
    }
@@ -43,6 +44,7 @@ subscription ProjectChanged($projectId: ID!) {

 subscription MyProjectsChanged {
  myProjectsChanged {
+    action
    project {
      ...ProjectFields
    }
--- a/libs/web/tracker/presenters/README.md
+++ b/libs/web/tracker/presenters/README.md
@@ -8,8 +8,9 @@ Pantallas del tracker con `@pi/ui`.
 ## Contenido

 - Rutas `trackerRoutes`: inicio (proyectos + «Mi trabajo», `pages/my-work.ts`), tablero kanban (drag & drop), ticket,
-  releases, seguimiento, estadísticas, actividad, miembros y configuración.
- `ui/`: `IssueCardComponent`, `AvatarsComponent`, `GoToComponent` («Ir a… WEB-12»), `SeriesChartComponent` (gráficas
+  releases, seguimiento, estadísticas, actividad, miembros y configuración (con visibilidad y borrado), más
+  «Explorar» (`pages/explore.page.ts`). Solo la portada exige sesión.
+- `ui/`: `IssueCardComponent`, `AvatarsComponent`, `GoToComponent` («Ir a… WEB-12»), `ProjectCardComponent`, `SeriesChartComponent` (gráficas
  SVG de líneas y áreas apiladas) y `copy.ts` (textos y tonos; estados, tipos y áreas salen del `Workflow` del proyecto).

 ## Comandos
--- a/libs/web/tracker/presenters/src/lib/pages/explore.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/explore.page.ts
@@ -0,0 +1,94 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+  PiEmptyStateComponent,
+  PiNoteComponent,
+  PiSkeletonComponent,
+} from '@pi/ui';
+import { AuthFacade } from '@task-stream/web/identity/application';
+import { ExploreFacade } from '@task-stream/web/tracker/application';
+import { ProjectCardComponent } from '../ui/project-card';
+
+/** /explorar — public projects, for anyone (no sign-in needed). */
+@Component({
+  selector: 'ts-explore-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterLink,
+    PiEmptyStateComponent,
+    PiNoteComponent,
+    PiSkeletonComponent,
+    ProjectCardComponent,
+  ],
+  template: `
+    <header class="ts-page-header">
+      <div>
+        <p class="ts-eyebrow">Pireon · TaskStream</p>
+        <h1>Proyectos <span class="ts-gradient-text">públicos</span></h1>
+        <p>
+          Su tablero, tickets, releases, actividad y estadísticas se pueden ver
+          sin iniciar sesión.
+          @if (!auth.isAuthenticated()) {
+            <a class="ts-plain-link ts-strong" routerLink="/login"
+              >Inicia sesión</a
+            >
+            para ver los de tu equipo.
+          }
+        </p>
+      </div>
+    </header>
+
+    @if (facade.error(); as error) {
+      <pi-note
+        gap="xs"
+        status="error"
+        appearance="fill"
+        type="status"
+        title="No se pudieron cargar los proyectos"
+        [text]="error"
+      />
+    } @else if (!facade.loaded()) {
+      <div class="ts-projects">
+        @for (i of [1, 2, 3]; track i) {
+          <pi-skeleton shape="block" height="12rem" />
+        }
+      </div>
+    } @else if (!facade.projects().length) {
+      <pi-empty-state
+        icon="kanban"
+        title="Aún no hay proyectos públicos"
+        description="Un propietario o admin puede hacer público su proyecto en Configuración."
+      />
+    } @else {
+      <div class="ts-projects">
+        @for (project of facade.projects(); track project.id) {
+          <ts-project-card [project]="project" />
+        }
+      </div>
+    }
+  `,
+  styles: `
+    .ts-strong {
+      font-weight: 600;
+      color: var(--ts-brand);
+    }
+    .ts-projects {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+      gap: 1.25rem;
+    }
+  `,
+})
+export class ExplorePage implements OnInit {
+  protected readonly facade = inject(ExploreFacade);
+  protected readonly auth = inject(AuthFacade);
+
+  ngOnInit(): void {
+    this.facade.load();
+  }
+}
--- a/libs/web/tracker/presenters/src/lib/pages/project-shell.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/project-shell.page.ts
@@ -6,14 +6,20 @@ import {
  inject,
  input,
 } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import {
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet,
+} from '@angular/router';
+import { AuthFacade } from '@task-stream/web/identity/application';
 import { PiNoteComponent, PiSpinnerComponent } from '@pi/ui';
 import {
  ProjectFacade,
  provideProjectFacade,
 } from '@task-stream/web/tracker/application';
 import { AvatarsComponent } from '../ui/avatars';
-import { projectTone, ROLE } from '../ui/copy';
+import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';

 /** /p/:key — loads the project once for all its tabs (its store and facade are scoped here). */
@Component({
@@ -33,11 +39,18 @@ import { projectTone, ROLE } from '../ui/copy';
      <header class="ts-project-header" [style.--tone]="tone(project.key)">
        <div class="ts-project-header__main">
          <p class="ts-eyebrow">
-            <a class="ts-plain-link" routerLink="/">Proyectos</a> /
+            @if (auth.isAuthenticated()) {
+              <a class="ts-plain-link" routerLink="/">Proyectos</a> /
+            } @else {
+              <a class="ts-plain-link" routerLink="/explorar">Explorar</a> /
+            }
            {{ project.key }}
            @if (facade.myRole(); as role) {
              · {{ roleLabel(role) }}
            }
+            @if (project.isPublic) {
+              <span class="ts-pill" [style.--tone]="publicTone">Público</span>
+            }
          </p>
          <h1>
            <span class="ts-project-header__key">{{ project.key }}</span>
@@ -56,6 +69,20 @@ import { projectTone, ROLE } from '../ui/copy';
          >
        </div>
      </header>
+      @if (!facade.myRole()) {
+        <p class="ts-readonly" role="note">
+          Proyecto público: lo estás viendo en modo lectura.
+          @if (!auth.isAuthenticated()) {
+            <a
+              class="ts-plain-link"
+              routerLink="/login"
+              [queryParams]="{ returnUrl: url() }"
+              >Inicia sesión</a
+            >
+            si eres del equipo.
+          }
+        </p>
+      }
      <nav class="ts-tabs" aria-label="Secciones del proyecto">
        <a routerLink="board" routerLinkActive="is-active">Tablero</a>
        <a routerLink="releases" routerLinkActive="is-active">Releases</a>
@@ -77,8 +104,26 @@ import { projectTone, ROLE } from '../ui/copy';
        appearance="fill"
        type="status"
        title="No se pudo abrir el proyecto"
-        [text]="error"
+        [text]="
+          auth.isAuthenticated()
+            ? error
+            : 'No existe o no es público. Si es de tu equipo, inicia sesión.'
+        "
      />
+      @if (!auth.isAuthenticated()) {
+        <p class="ts-center-actions">
+          <a
+            class="ts-plain-link"
+            routerLink="/login"
+            [queryParams]="{ returnUrl: url() }"
+            >Iniciar sesión</a
+          >
+          ·
+          <a class="ts-plain-link" routerLink="/explorar"
+            >Ver proyectos públicos</a
+          >
+        </p>
+      }
    } @else {
      <div class="ts-center">
        <pi-spinner [isLoading]="true" [diameter]="40" />
@@ -86,6 +131,33 @@ import { projectTone, ROLE } from '../ui/copy';
    }
  `,
  styles: `
+    .ts-eyebrow .ts-pill {
+      margin-left: 0.5rem;
+      letter-spacing: 0;
+      text-transform: none;
+      vertical-align: middle;
+    }
+    .ts-readonly {
+      margin: 1rem 0 0;
+      padding: 0.625rem 0.875rem;
+      border-radius: 0.625rem;
+      background: color-mix(in srgb, var(--ts-c-teal) 8%, var(--ts-surface));
+      border: 1px solid color-mix(in srgb, var(--ts-c-teal) 25%, transparent);
+      font-size: 0.875rem;
+      color: var(--ts-ink-soft);
+      a {
+        font-weight: 600;
+        color: var(--ts-brand);
+      }
+    }
+    .ts-center-actions {
+      margin: 1rem 0 0;
+      font-size: 0.875rem;
+      a {
+        font-weight: 600;
+        color: var(--ts-brand);
+      }
+    }
    .ts-project-header {
      display: flex;
      align-items: flex-end;
@@ -138,6 +210,11 @@ export class ProjectShellPage {
  readonly key = input.required<string>();

  protected readonly facade = inject(ProjectFacade);
+  protected readonly auth = inject(AuthFacade);
+  private readonly router = inject(Router);
+  protected readonly publicTone = PUBLIC_TONE;
+  /** Where to come back after signing in. */
+  protected readonly url = () => this.router.url;
  protected readonly roleLabel = (role: keyof typeof ROLE) => ROLE[role];
  protected readonly tone = projectTone;
  protected readonly memberNames = computed(() =>
--- a/libs/web/tracker/presenters/src/lib/pages/projects.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/projects.page.ts
@@ -15,7 +15,6 @@ import {
  pattern,
  required,
 } from '@angular/forms/signals';
-import { RouterLink } from '@angular/router';
 import {
  PiActionButtonComponent,
  PiEmptyStateComponent,
@@ -27,19 +26,17 @@ import {
 import { DrawerService } from '@task-stream/web/shared/ui';
 import { ProjectsFacade } from '@task-stream/web/tracker/application';
 import { AuthFacade } from '@task-stream/web/identity/application';
-import { AvatarsComponent } from '../ui/avatars';
 import { GoToComponent } from '../ui/go-to';
+import { ProjectCardComponent } from '../ui/project-card';
 import { MyWorkComponent } from './my-work';
-import { projectTone, timeAgo } from '../ui/copy';

@Component({
  selector: 'ts-projects-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
-    RouterLink,
    FormField,
-    AvatarsComponent,
    GoToComponent,
+    ProjectCardComponent,
    MyWorkComponent,
    PiActionButtonComponent,
    PiEmptyStateComponent,
@@ -101,32 +98,7 @@ import { projectTone, timeAgo } from '../ui/copy';
    } @else {
      <div class="ts-projects">
        @for (project of facade.sorted(); track project.id) {
-          <a
-            class="ts-project ts-card-link"
-            [routerLink]="['/p', project.key]"
-            [style.--tone]="tone(project.key)"
-          >
-            <div class="ts-project__top">
-              <span class="ts-project__key">{{ project.key }}</span>
-              <span class="ts-project__updated ts-mono">{{
-                ago(project.updatedAt)
-              }}</span>
-            </div>
-            <h2 class="ts-project__name">{{ project.name }}</h2>
-            @if (project.description) {
-              <p class="ts-project__description">{{ project.description }}</p>
-            }
-            <div class="ts-project__bottom">
-              <ts-avatars [names]="memberNames(project.members)" />
-              <span class="ts-project__count ts-mono"
-                >{{ project.members.length }}
-                {{
-                  project.members.length === 1 ? 'persona' : 'personas'
-                }}</span
-              >
-              <span class="ts-project__go" aria-hidden="true">→</span>
-            </div>
-          </a>
+          <ts-project-card [project]="project" />
        }
      </div>
    }
@@ -151,6 +123,14 @@ import { projectTone, timeAgo } from '../ui/copy';
        >
          <pi-label>Descripción</pi-label>
        </pi-textarea>
+        <label class="ts-public-check">
+          <input type="checkbox" [formField]="f.isPublic" />
+          <span>
+            <strong>Proyecto público</strong>
+            Cualquiera, también sin iniciar sesión, podrá verlo (solo lectura).
+            Se puede cambiar después en Configuración.
+          </span>
+        </label>
        <pi-action-button
          size="w100"
          color="primary"
@@ -183,77 +163,30 @@ import { projectTone, timeAgo } from '../ui/copy';
        font-weight: 400;
      }
    }
+    .ts-public-check {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.625rem;
+      font-size: 0.8125rem;
+      color: var(--ts-muted);
+      cursor: pointer;
+      input {
+        width: 1rem;
+        height: 1rem;
+        margin-top: 0.125rem;
+        accent-color: var(--ts-brand);
+      }
+      strong {
+        display: block;
+        color: var(--ts-ink);
+        font-size: 0.875rem;
+      }
+    }
    .ts-projects {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
      gap: 1.25rem;
    }
-    .ts-project {
-      display: grid;
-      grid-template-rows: auto auto 1fr auto;
-      gap: 0.375rem;
-      min-height: 12rem;
-      padding: 1.5rem 1.5rem 1.25rem;
-      &:hover .ts-project__go {
-        opacity: 1;
-        transform: none;
-      }
-    }
-    .ts-project__top {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 1rem;
-    }
-    .ts-project__key {
-      font-family: var(--ts-font-mono);
-      font-size: 1.75rem;
-      font-weight: 600;
-      letter-spacing: -0.04em;
-      color: var(--tone);
-    }
-    .ts-project__updated {
-      font-size: 0.75rem;
-      color: var(--ts-muted);
-    }
-    .ts-project__name {
-      margin: 0;
-      font-size: 1.25rem;
-      font-weight: 700;
-      line-height: 1.15;
-    }
-    .ts-project__description {
-      margin: 0;
-      color: var(--ts-muted);
-      font-size: 0.9rem;
-      line-height: 1.45;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .ts-project__bottom {
-      display: flex;
-      align-items: center;
-      gap: 0.625rem;
-      margin-top: 0.75rem;
-      padding-top: 0.875rem;
-      border-top: 1px dashed var(--ts-line);
-    }
-    .ts-project__count {
-      font-size: 0.75rem;
-      color: var(--ts-muted);
-    }
-    .ts-project__go {
-      margin-left: auto;
-      font-size: 1.125rem;
-      color: var(--tone);
-      opacity: 0;
-      transform: translateX(-4px);
-      transition:
-        opacity 0.18s ease,
-        transform 0.18s ease;
-    }
  `,
 })
 export class ProjectsPage implements OnInit {
@@ -266,7 +199,12 @@ export class ProjectsPage implements OnInit {
  private readonly createForm =
    viewChild.required<TemplateRef<unknown>>('createForm');

-  private readonly model = signal({ key: '', name: '', description: '' });
+  private readonly model = signal({
+    key: '',
+    name: '',
+    description: '',
+    isPublic: false,
+  });
  protected readonly f = form(this.model, (p) => {
    required(p.key);
    pattern(p.key, /^[A-Za-z][A-Za-z0-9]{1,9}$/, {
@@ -276,28 +214,25 @@ export class ProjectsPage implements OnInit {
    maxLength(p.name, 120);
  });

-  protected readonly ago = timeAgo;
-  protected readonly tone = projectTone;
  protected readonly pad = (n: number) => String(n).padStart(2, '0');
-  protected readonly memberNames = (members: { user: { name: string } }[]) =>
-    members.map((m) => m.user.name);

  ngOnInit(): void {
    this.facade.load();
  }

  protected openCreate(): void {
-    this.model.set({ key: '', name: '', description: '' });
+    this.model.set({ key: '', name: '', description: '', isPublic: false });
    this.drawer.open('Nuevo proyecto', this.createForm());
  }

  protected create(): void {
    if (this.f().invalid()) return;
-    const { key, name, description } = this.model();
+    const { key, name, description, isPublic } = this.model();
    this.facade.create({
      key: key.toUpperCase(),
      name,
      description: description || null,
+      isPublic,
    });
    this.drawer.closeAll();
  }
--- a/libs/web/tracker/presenters/src/lib/pages/settings.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/settings.page.ts
@@ -80,6 +80,38 @@ function idFrom(name: string): string {
      />
    }

+    @if (facade.project(); as project) {
+      <section
+        class="ts-panel ts-block ts-visibility"
+        aria-labelledby="vis-title"
+      >
+        <div>
+          <h3 id="vis-title">Visibilidad</h3>
+          <p class="ts-muted">
+            @if (project.isPublic) {
+              Público: cualquiera, también sin iniciar sesión, ve el tablero,
+              los tickets, los comentarios, las releases, la actividad y las
+              estadísticas (en la web, por GraphQL y por REST). Solo los
+              miembros pueden cambiar algo.
+            } @else {
+              Privado: solo los miembros del proyecto lo ven.
+            }
+          </p>
+        </div>
+        <label class="ts-switch">
+          <input
+            type="checkbox"
+            role="switch"
+            [checked]="project.isPublic"
+            [disabled]="!facade.canManage()"
+            (change)="facade.setPublic($any($event.target).checked)"
+          />
+          <span class="ts-switch__track" aria-hidden="true"></span>
+          <span>{{ project.isPublic ? 'Público' : 'Privado' }}</span>
+        </label>
+      </section>
+    }
+
    @if (draft(); as d) {
      <form
        class="ts-settings"
@@ -412,6 +444,47 @@ function idFrom(name: string): string {
          </footer>
        }
      </form>
+
+      @if (facade.isOwner() && facade.project(); as project) {
+        <section
+          class="ts-panel ts-block ts-danger"
+          aria-labelledby="danger-title"
+        >
+          <div>
+            <h3 id="danger-title">Eliminar el proyecto</h3>
+            <p class="ts-muted">
+              Se borran sus tickets, comentarios y releases, y los enlaces que
+              tickets de otros proyectos tengan hacia los suyos. La clave
+              {{ project.key }} queda libre. No se puede deshacer.
+            </p>
+          </div>
+          <div class="ts-danger__confirm">
+            <label class="ts-danger__label">
+              <span
+                >Escribe <code>{{ project.key }}</code> para confirmar</span
+              >
+              <input
+                class="ts-input"
+                autocomplete="off"
+                spellcheck="false"
+                [value]="confirmKey()"
+                (input)="confirmKey.set($any($event.target).value)"
+              />
+            </label>
+            <button
+              type="button"
+              class="ts-delete"
+              [disabled]="
+                confirmKey().trim().toUpperCase() !== project.key ||
+                facade.deleting()
+              "
+              (click)="facade.deleteProject(confirmKey())"
+            >
+              {{ facade.deleting() ? 'Eliminando…' : 'Eliminar proyecto' }}
+            </button>
+          </div>
+        </section>
+      }
    }

    <ng-template
@@ -452,10 +525,120 @@ function idFrom(name: string): string {
    </ng-template>
  `,
  styles: `
+    :host {
+      display: grid;
+      gap: 1rem;
+    }
+    .ts-block.ts-visibility,
+    .ts-block.ts-danger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1.5rem;
+      flex-wrap: wrap;
+      > div {
+        flex: 1 1 26rem;
+      }
+      p {
+        max-width: 46rem;
+        margin: 0.25rem 0 0;
+        font-size: 0.8125rem;
+      }
+    }
+    .ts-switch {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.625rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      input {
+        position: absolute;
+        opacity: 0;
+        width: 1px;
+        height: 1px;
+      }
+      input:focus-visible + .ts-switch__track {
+        outline: 2px solid var(--ts-brand);
+        outline-offset: 2px;
+      }
+      input:disabled ~ * {
+        opacity: 0.6;
+        cursor: default;
+      }
+    }
+    .ts-switch__track {
+      position: relative;
+      width: 2.5rem;
+      height: 1.375rem;
+      border-radius: 999px;
+      background: var(--ts-line-strong);
+      transition: background-color 0.15s ease;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--ts-surface);
+        box-shadow: var(--ts-shadow);
+        transition: transform 0.15s ease;
+      }
+    }
+    .ts-switch input:checked + .ts-switch__track {
+      background: var(--ts-brand);
+      &::after {
+        transform: translateX(1.125rem);
+      }
+    }
+    .ts-danger {
+      border: 1px solid color-mix(in srgb, var(--ts-c-red) 45%, transparent);
+      h3 {
+        color: var(--ts-c-red);
+      }
+    }
+    .ts-danger__confirm {
+      display: flex;
+      align-items: flex-end;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+    .ts-danger__label {
+      display: grid;
+      gap: 0.375rem;
+      font-size: 0.8125rem;
+      color: var(--ts-ink-soft);
+      code {
+        font-family: var(--ts-font-mono);
+        font-weight: 600;
+      }
+      .ts-input {
+        width: 12rem;
+      }
+    }
+    .ts-delete {
+      min-width: 0 !important;
+      height: 2.125rem;
+      padding: 0 1rem !important;
+      border: 0 !important;
+      border-radius: 999px !important;
+      background: var(--ts-c-red) !important;
+      color: #fff !important;
+      font: inherit;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+    }
    .ts-settings {
      display: grid;
      gap: 1rem;
-      padding-bottom: 5rem;
+      padding-bottom: 0;
    }
    fieldset {
      display: grid;
@@ -745,6 +928,8 @@ export class SettingsPage {
    () => this.facade.project()?.settings ?? null,
  );
  protected readonly draft = signal<ProjectSettings | null>(null);
+  /** The key, typed to confirm deleting the project. */
+  protected readonly confirmKey = signal('');

  protected readonly dirty = computed(
    () =>
--- a/libs/web/tracker/presenters/src/lib/tracker.routes.ts
+++ b/libs/web/tracker/presenters/src/lib/tracker.routes.ts
@@ -1,13 +1,25 @@
 import { Routes } from '@angular/router';
+import { authGuard } from '@task-stream/web/identity/presenters';

-/** Everything behind authentication. */
+/**
+ * The tracker. Home needs a session; project pages and «Explorar» don't:
+ * public projects can be read by anyone (the API decides what each visitor
+ * sees, and pages hide what they cannot change).
+ */
 export const trackerRoutes: Routes = [
  {
    path: '',
+    canActivate: [authGuard],
    title: 'Proyectos · TaskStream',
    loadComponent: () =>
      import('./pages/projects.page').then((m) => m.ProjectsPage),
  },
+  {
+    path: 'explorar',
+    title: 'Proyectos públicos · TaskStream',
+    loadComponent: () =>
+      import('./pages/explore.page').then((m) => m.ExplorePage),
+  },
  {
    path: 'p/:key',
    loadComponent: () =>
--- a/libs/web/tracker/presenters/src/lib/ui/copy.ts
+++ b/libs/web/tracker/presenters/src/lib/ui/copy.ts
@@ -22,6 +22,9 @@ type ChipColor =
 /** CSS colour of a settings colour token (`--ts-c-*` in styles.scss). */
 export const tone = (color: string) => `var(--ts-c-${color}, var(--ts-muted))`;

+/** Badge of public projects (readable without signing in). */
+export const PUBLIC_TONE = tone('teal');
+
 /** A status as the UI shows it: the project's name and colour. */
 export function statusLook(workflow: Workflow, id: string) {
  const status = workflow.status(id);
--- a/libs/web/tracker/presenters/src/lib/ui/project-card.ts
+++ b/libs/web/tracker/presenters/src/lib/ui/project-card.ts
@@ -0,0 +1,126 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { Project } from '@task-stream/web/tracker/domain';
+import { AvatarsComponent } from './avatars';
+import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
+
+/** A project in a list (my projects, public projects): key, name, team. */
+@Component({
+  selector: 'ts-project-card',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, AvatarsComponent],
+  template: `
+    <a
+      class="ts-project ts-card-link"
+      [routerLink]="['/p', project().key]"
+      [style.--tone]="tone()"
+    >
+      <div class="ts-project__top">
+        <span class="ts-project__key">{{ project().key }}</span>
+        @if (project().isPublic) {
+          <span class="ts-pill" [style.--tone]="publicTone">Público</span>
+        }
+        <span class="ts-project__updated ts-mono">{{
+          ago(project().updatedAt)
+        }}</span>
+      </div>
+      <h2 class="ts-project__name">{{ project().name }}</h2>
+      @if (project().description) {
+        <p class="ts-project__description">{{ project().description }}</p>
+      }
+      <div class="ts-project__bottom">
+        <ts-avatars [names]="memberNames()" />
+        <span class="ts-project__count ts-mono"
+          >{{ project().members.length }}
+          {{ project().members.length === 1 ? 'persona' : 'personas' }}</span
+        >
+        <span class="ts-project__go" aria-hidden="true">→</span>
+      </div>
+    </a>
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+    .ts-project {
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      gap: 0.375rem;
+      min-height: 12rem;
+      padding: 1.5rem 1.5rem 1.25rem;
+      &:hover .ts-project__go {
+        opacity: 1;
+        transform: none;
+      }
+    }
+    .ts-project__top {
+      display: flex;
+      align-items: center;
+      gap: 0.625rem;
+    }
+    .ts-project__key {
+      font-family: var(--ts-font-mono);
+      font-size: 1.75rem;
+      font-weight: 600;
+      letter-spacing: -0.04em;
+      color: var(--tone);
+    }
+    .ts-project__updated {
+      margin-left: auto;
+      font-size: 0.75rem;
+      color: var(--ts-muted);
+    }
+    .ts-project__name {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 700;
+      line-height: 1.15;
+    }
+    .ts-project__description {
+      margin: 0;
+      color: var(--ts-muted);
+      font-size: 0.9rem;
+      line-height: 1.45;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .ts-project__bottom {
+      display: flex;
+      align-items: center;
+      gap: 0.625rem;
+      margin-top: 0.75rem;
+      padding-top: 0.875rem;
+      border-top: 1px dashed var(--ts-line);
+    }
+    .ts-project__count {
+      font-size: 0.75rem;
+      color: var(--ts-muted);
+    }
+    .ts-project__go {
+      margin-left: auto;
+      font-size: 1.125rem;
+      color: var(--tone);
+      opacity: 0;
+      transform: translateX(-4px);
+      transition:
+        opacity 0.18s ease,
+        transform 0.18s ease;
+    }
+  `,
+})
+export class ProjectCardComponent {
+  readonly project = input.required<Project>();
+  protected readonly tone = computed(() => projectTone(this.project().key));
+  protected readonly memberNames = computed(() =>
+    this.project().members.map((m) => m.user.name),
+  );
+  protected readonly ago = timeAgo;
+  protected readonly publicTone = PUBLIC_TONE;
+}