feat(web): a home page in two columns, with four figures on top

The home page was two grids of panels side by side, each row as tall as
its tallest panel, which left gaps. Now: four figures of the same size
(my open tickets, waiting for QA, finished by me and by the team this
week), the week, my views, and two columns that stack on their own: my
tickets and the latest on the left; sprints, QA, following, releases,
who is online and «Retomar» on the right. Project cards are as tall as
their row, with the team at the bottom, and a phone only lists the
days of the week that have something.

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

docs/04-cliente-web.md

@@ -286,7 +286,7 @@ visualización de la plataforma:
 | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `/login`                   | Inicio de sesión (solo sin sesión)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `/auth/callback`           | Retorno de Pireon (PKCE)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `/`                        | Inicio: saludo según la hora con el resumen del día, «Ir a…» (`WEB-12`), primeros pasos, la semana (`ts-week-agenda`), mis vistas guardadas, mi trabajo (`ts-my-work`), lo último en mis proyectos, la semana en cifras, sprints en curso, quién está ahora, «Retomar» y mis proyectos con su actividad                                                                                                                                                                                                                                                            |
+| `/`                        | Inicio: saludo según la hora con el resumen del día, «Ir a…» (`WEB-12`), primeros pasos, cuatro cifras (`ts-home-kpis`: abiertos míos, esperando QA, terminados por mí y por el equipo esta semana), la semana (`ts-week-agenda`), mis vistas guardadas y dos columnas: mis tickets y lo último en mis proyectos; sprints en curso, esperando QA, que sigo, próximas releases, quién está ahora y «Retomar». Debajo, mis proyectos con su actividad                                                                                                                |
 | `/cartera`                 | Cartera (con sesión): una tarjeta por proyecto activo con lo abierto y en riesgo, el sprint en curso (¿llega?), las próximas releases con su previsión y las épicas abiertas                                                                                                                                                                                                                                                                                                                                                                                       |
 | `/explorar`                | Proyectos públicos (sin sesión)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `/p/:key/board`            | Tablero kanban (`?release=` y `?assignee=` preseleccionan los filtros)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

libs/web/tracker/presenters/src/lib/pages/my-work.ts

@@ -5,6 +5,7 @@ import {
   DestroyRef,
   DOCUMENT,
   inject,
+  input,
   OnInit,
   TemplateRef,
   viewChild,
@@ -34,7 +35,6 @@ import {
   typeLook,
 } from '../ui/copy';
 import { CalendarFeedComponent } from '../ui/calendar-feed';
-import { MyViewsComponent } from '../ui/my-views';
 
 const VISIBLE = 12;
 
@@ -52,213 +52,199 @@ const VISIBLE = 12;
     PiIconComponent,
     PiSkeletonComponent,
     CalendarFeedComponent,
-    MyViewsComponent,
   ],
   template: `
     @if (!home.loaded()) {
-      <div class="ts-work">
+      @if (part() === 'main') {
         <pi-skeleton shape="block" height="18rem" />
-        <div class="ts-work__side">
+      } @else {
-          <pi-skeleton shape="block" height="8rem" />
+        <pi-skeleton shape="block" height="8rem" />
-          <pi-skeleton shape="block" height="8rem" />
+        <pi-skeleton shape="block" height="8rem" />
-        </div>
+      }
-      </div>
+    } @else if (part() === 'main') {
-    } @else {
+      <section class="ts-panel ts-work__panel" aria-labelledby="mine-title">
-      <ts-my-views />
+        <header class="ts-work__head">
-      <div class="ts-work">
+          <h2 id="mine-title">Mis tickets</h2>
-        <section class="ts-panel ts-work__panel" aria-labelledby="mine-title">
+          <span class="ts-muted ts-mono">{{ home.mineTotal() }} abiertos</span>
-          <header class="ts-work__head">
+          <button
-            <h2 id="mine-title">Mis tickets</h2>
+            type="button"
-            <span class="ts-muted ts-mono"
+            class="ts-plain-link ts-work__calendar"
-              >{{ home.mineTotal() }} abiertos</span
+            (click)="openCalendar()"
+          >
+            <pi-icon icon="calendar" size="x-small" aria-hidden="true" />
+            Calendario
+          </button>
+        </header>
+        @if (home.qaFailed()) {
+          <p class="ts-work__alert" role="status">
+            <pi-icon icon="exclamation" size="small" aria-hidden="true" />
+            {{ home.qaFailed() }}
+            {{
+              home.qaFailed() === 1
+                ? 'ticket tuyo ha fallado en QA'
+                : 'tickets tuyos han fallado en QA'
+            }}
+          </p>
+        }
+        @for (group of visibleGroups(); track group.category) {
+          <h3 class="ts-work__group">
+            <span
+              class="ts-pill"
+              [style.--tone]="categoryTone(group.category)"
+              >{{ categoryLabel(group.category) }}</span
             >
-            <button
+            <span class="ts-mono">{{ group.issues.length }}</span>
-              type="button"
+          </h3>
-              class="ts-plain-link ts-work__calendar"
+          <ul class="ts-work__list">
-              (click)="openCalendar()"
+            @for (issue of group.issues; track issue.id) {
-            >
+              <li>
-              <pi-icon icon="calendar" size="x-small" aria-hidden="true" />
+                <a
-              Calendario
+                  class="ts-work__row"
-            </button>
+                  [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
-          </header>
+                  [style.--type]="typeTone(issue)"
-          @if (home.qaFailed()) {
+                >
-            <p class="ts-work__alert" role="status">
+                  <span class="ts-key">{{ issue.key }}</span>
-              <pi-icon icon="exclamation" size="small" aria-hidden="true" />
+                  <span class="ts-work__title"
-              {{ home.qaFailed() }}
+                    ><span
-              {{
+                      class="ts-work__status"
-                home.qaFailed() === 1
+                      [style.--tone]="statusTone(issue)"
-                  ? 'ticket tuyo ha fallado en QA'
+                      >{{ statusLabel(issue) }}</span
-                  : 'tickets tuyos han fallado en QA'
+                    >
-              }}
+                    {{ issue.title }}</span
-            </p>
-          }
-          @for (group of visibleGroups(); track group.category) {
-            <h3 class="ts-work__group">
-              <span
-                class="ts-pill"
-                [style.--tone]="categoryTone(group.category)"
-                >{{ categoryLabel(group.category) }}</span
-              >
-              <span class="ts-mono">{{ group.issues.length }}</span>
-            </h3>
-            <ul class="ts-work__list">
-              @for (issue of group.issues; track issue.id) {
-                <li>
-                  <a
-                    class="ts-work__row"
-                    [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
-                    [style.--type]="typeTone(issue)"
                   >
-                    <span class="ts-key">{{ issue.key }}</span>
+                  <span
-                    <span class="ts-work__title"
+                    class="ts-work__project"
-                      ><span
+                    [style.--tone]="projectToneOf(issue.key)"
-                        class="ts-work__status"
+                    >{{ keyOf(issue.key) }}</span
-                        [style.--tone]="statusTone(issue)"
+                  >
-                        >{{ statusLabel(issue) }}</span
+                </a>
-                      >
+              </li>
-                      {{ issue.title }}</span
-                    >
-                    <span
-                      class="ts-work__project"
-                      [style.--tone]="projectToneOf(issue.key)"
-                      >{{ keyOf(issue.key) }}</span
-                    >
-                  </a>
-                </li>
-              }
-            </ul>
-          } @empty {
-            <p class="ts-work__empty">No tienes tickets abiertos asignados.</p>
-            @if (suggestions().length) {
-              <ul class="ts-work__ideas">
-                @for (s of suggestions(); track s.kind + s.projectKey) {
-                  <li>
-                    <a
-                      [routerLink]="suggestionLink(s)"
-                      [queryParams]="suggestionQuery(s)"
-                      >{{ suggestionText(s) }}</a
-                    >
-                  </li>
-                }
-              </ul>
             }
+          </ul>
+        } @empty {
+          <p class="ts-work__empty">No tienes tickets abiertos asignados.</p>
+          @if (suggestions().length) {
+            <ul class="ts-work__ideas">
+              @for (s of suggestions(); track s.kind + s.projectKey) {
+                <li>
+                  <a
+                    [routerLink]="suggestionLink(s)"
+                    [queryParams]="suggestionQuery(s)"
+                    >{{ suggestionText(s) }}</a
+                  >
+                </li>
+              }
+            </ul>
           }
-          @if (home.mineTotal() > shown()) {
+        }
-            <p class="ts-muted ts-work__more">
+        @if (home.mineTotal() > shown()) {
-              y {{ home.mineTotal() - shown() }} más, en los tableros de cada
+          <p class="ts-muted ts-work__more">
-              proyecto
+            y {{ home.mineTotal() - shown() }} más, en los tableros de cada
-            </p>
+            proyecto
+          </p>
+        }
+      </section>
+    } @else {
+      <section class="ts-panel ts-work__panel" aria-labelledby="qa-title">
+        <header class="ts-work__head">
+          <h2 id="qa-title">Esperando QA</h2>
+          <span class="ts-muted ts-mono">{{ home.awaitingQaTotal() }}</span>
+        </header>
+        <ul class="ts-work__list">
+          @for (issue of home.awaitingQa().slice(0, 6); track issue.id) {
+            <li>
+              <a
+                class="ts-work__row ts-work__row--qa"
+                [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
+                [style.--type]="statusTone(issue)"
+              >
+                <span class="ts-key">{{ issue.key }}</span>
+                <span class="ts-work__title">{{ issue.title }}</span>
+                @if (issue.assignee; as assignee) {
+                  <span class="ts-work__who" [attr.title]="assignee.name">{{
+                    initialsOf(assignee.name)
+                  }}</span>
+                }
+              </a>
+            </li>
+          } @empty {
+            <li class="ts-work__empty">Nada esperando QA.</li>
           }
-        </section>
+        </ul>
+      </section>
 
-        <div class="ts-work__side">
+      <section
-          <section class="ts-panel ts-work__panel" aria-labelledby="qa-title">
+        class="ts-panel ts-work__panel"
-            <header class="ts-work__head">
+        aria-labelledby="following-title"
-              <h2 id="qa-title">Esperando QA</h2>
+      >
-              <span class="ts-muted ts-mono">{{ home.awaitingQaTotal() }}</span>
+        <header class="ts-work__head">
-            </header>
+          <h2 id="following-title">Que sigo</h2>
-            <ul class="ts-work__list">
+          <span class="ts-muted ts-mono">{{ home.followingTotal() }}</span>
-              @for (issue of home.awaitingQa().slice(0, 6); track issue.id) {
+        </header>
-                <li>
+        <ul class="ts-work__list">
-                  <a
+          @for (issue of home.following().slice(0, 6); track issue.id) {
-                    class="ts-work__row ts-work__row--qa"
+            <li>
-                    [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
+              <a
-                    [style.--type]="statusTone(issue)"
+                class="ts-work__row ts-work__row--qa"
-                  >
+                [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
-                    <span class="ts-key">{{ issue.key }}</span>
+                [style.--type]="statusTone(issue)"
-                    <span class="ts-work__title">{{ issue.title }}</span>
+              >
-                    @if (issue.assignee; as assignee) {
+                <span class="ts-key">{{ issue.key }}</span>
-                      <span class="ts-work__who" [attr.title]="assignee.name">{{
+                <span class="ts-work__title">{{ issue.title }}</span>
-                        initialsOf(assignee.name)
+                @if (issue.assignee; as assignee) {
-                      }}</span>
+                  <span class="ts-work__who" [attr.title]="assignee.name">{{
-                    }
+                    initialsOf(assignee.name)
-                  </a>
+                  }}</span>
-                </li>
+                }
-              } @empty {
+              </a>
-                <li class="ts-work__empty">Nada esperando QA.</li>
+            </li>
-              }
+          } @empty {
-            </ul>
+            <li class="ts-work__empty">
-          </section>
+              No sigues ningún ticket abierto. En la ficha de uno, «Seguir».
+            </li>
+          }
+        </ul>
+      </section>
 
-          <section
+      <section class="ts-panel ts-work__panel" aria-labelledby="releases-title">
-            class="ts-panel ts-work__panel"
+        <header class="ts-work__head">
-            aria-labelledby="following-title"
+          <h2 id="releases-title">Próximas releases</h2>
-          >
+        </header>
-            <header class="ts-work__head">
+        <ul class="ts-work__list">
-              <h2 id="following-title">Que sigo</h2>
+          @for (release of home.releases(); track release.id) {
-              <span class="ts-muted ts-mono">{{ home.followingTotal() }}</span>
+            <li>
-            </header>
+              <a
-            <ul class="ts-work__list">
+                class="ts-work__release"
-              @for (issue of home.following().slice(0, 6); track issue.id) {
+                [routerLink]="['/p', projectOf(release), 'releases']"
-                <li>
+              >
-                  <a
+                <span class="ts-work__version">{{ release.name }}</span>
-                    class="ts-work__row ts-work__row--qa"
+                <span
-                    [routerLink]="['/p', keyOf(issue.key), 'issues', issue.key]"
+                  class="ts-work__project"
-                    [style.--type]="statusTone(issue)"
+                  [style.--tone]="tone(projectOf(release))"
-                  >
+                  >{{ projectOf(release) }}</span
-                    <span class="ts-key">{{ issue.key }}</span>
+                >
-                    <span class="ts-work__title">{{ issue.title }}</span>
+                <span class="ts-work__when ts-mono">{{ when(release) }}</span>
-                    @if (issue.assignee; as assignee) {
+                <span
-                      <span class="ts-work__who" [attr.title]="assignee.name">{{
+                  class="ts-work__meter"
-                        initialsOf(assignee.name)
+                  role="progressbar"
-                      }}</span>
+                  aria-valuemin="0"
-                    }
+                  aria-valuemax="100"
-                  </a>
+                  [attr.aria-valuenow]="release.progress.percent"
-                </li>
+                  [attr.aria-label]="'Progreso de ' + release.name"
-              } @empty {
+                  ><span [style.width.%]="release.progress.percent"></span
-                <li class="ts-work__empty">
+                ></span>
-                  No sigues ningún ticket abierto. En la ficha de uno, «Seguir».
+                <span class="ts-work__percent ts-mono"
-                </li>
+                  >{{ release.progress.finished }}/{{
-              }
+                    release.progress.total
-            </ul>
+                  }}</span
-          </section>
+                >
-
+              </a>
-          <section
+            </li>
-            class="ts-panel ts-work__panel"
+          } @empty {
-            aria-labelledby="releases-title"
+            <li class="ts-work__empty">Ninguna release planificada.</li>
-          >
+          }
-            <header class="ts-work__head">
+        </ul>
-              <h2 id="releases-title">Próximas releases</h2>
+      </section>
-            </header>
-            <ul class="ts-work__list">
-              @for (release of home.releases(); track release.id) {
-                <li>
-                  <a
-                    class="ts-work__release"
-                    [routerLink]="['/p', projectOf(release), 'releases']"
-                  >
-                    <span class="ts-work__version">{{ release.name }}</span>
-                    <span
-                      class="ts-work__project"
-                      [style.--tone]="tone(projectOf(release))"
-                      >{{ projectOf(release) }}</span
-                    >
-                    <span class="ts-work__when ts-mono">{{
-                      when(release)
-                    }}</span>
-                    <span
-                      class="ts-work__meter"
-                      role="progressbar"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                      [attr.aria-valuenow]="release.progress.percent"
-                      [attr.aria-label]="'Progreso de ' + release.name"
-                      ><span [style.width.%]="release.progress.percent"></span
-                    ></span>
-                    <span class="ts-work__percent ts-mono"
-                      >{{ release.progress.finished }}/{{
-                        release.progress.total
-                      }}</span
-                    >
-                  </a>
-                </li>
-              } @empty {
-                <li class="ts-work__empty">Ninguna release planificada.</li>
-              }
-            </ul>
-          </section>
-        </div>
-      </div>
     }
     <ng-template #calendarPanel>
       <ts-calendar-feed />
@@ -266,21 +252,9 @@ const VISIBLE = 12;
   `,
   styles: `
     :host {
-      display: block;
-      margin-bottom: 2.5rem;
-    }
-    .ts-work {
-      display: grid;
-      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
-      gap: 1.25rem;
-      align-items: start;
-      @media (max-width: 960px) {
-        grid-template-columns: minmax(0, 1fr);
-      }
-    }
-    .ts-work__side {
       display: grid;
       gap: 1.25rem;
+      align-content: start;
     }
     .ts-work__panel {
       padding: 1.375rem 1.5rem 1.25rem;
@@ -466,6 +440,8 @@ const VISIBLE = 12;
   `,
 })
 export class MyWorkComponent implements OnInit {
+  /** «main»: my tickets (and my views); «side»: QA, following, releases. */
+  readonly part = input<'main' | 'side'>('main');
   protected readonly home = inject(HomeFacade);
   private readonly myHome = inject(MyHomeFacade);
   /** What to do when nothing is mine (from the home reading). */
@@ -545,6 +521,8 @@ export class MyWorkComponent implements OnInit {
     projectTone(projectKeyOf(issueKey));
 
   ngOnInit(): void {
+    // Both parts read the same store: the main one keeps it fresh.
+    if (this.part() !== 'main') return;
     this.home.load();
     // Back to the tab after a while: refresh my work.
     const onVisible = () => {

libs/web/tracker/presenters/src/lib/pages/projects.page.ts

@@ -51,7 +51,8 @@ import { HomeSprintsComponent } from '../ui/home/home-sprints';
 import { OnlineNowComponent } from '../ui/home/online-now';
 import { ResumeComponent } from '../ui/home/resume';
 import { WeekAgendaComponent } from '../ui/home/week-agenda';
-import { WeekStatsComponent } from '../ui/home/week-stats';
+import { HomeKpisComponent } from '../ui/home/kpis';
+import { MyViewsComponent } from '../ui/my-views';
 
 /** How often the home page refreshes its reading while open. */
 const REFRESH_MS = 60_000;
@@ -72,7 +73,8 @@ const REFRESH_MS = 60_000;
     OnlineNowComponent,
     ResumeComponent,
     WeekAgendaComponent,
-    WeekStatsComponent,
+    HomeKpisComponent,
+    MyViewsComponent,
     PiActionButtonComponent,
     PiEmptyStateComponent,
     PiSkeletonComponent,
@@ -106,29 +108,43 @@ const REFRESH_MS = 60_000;
         [firstKey]="facade.sorted()[0]?.key ?? null"
         (createProject)="openCreate()"
       />
-      @if (facade.projects().length) {
-        <ts-week-agenda [items]="h.agenda" />
-      }
     }
 
     @if (facade.projects().length) {
-      <ts-my-work />
       @if (myHome.home(); as h) {
-        <div class="ts-home">
+        <ts-home-kpis
-          <ts-activity-feed
+          [mine]="home.mineTotal()"
-            [activity]="h.activity"
+          [dueToday]="dueToday()"
-            [projectKeys]="projectKeys()"
+          [overdue]="overdue()"
-          />
+          [awaitingQa]="home.awaitingQaTotal()"
-          <div class="ts-home__side">
+          [me]="h.me"
-            <ts-week-stats [me]="h.me" [team]="h.team" />
+          [team]="h.team"
-            @if (h.sprints.length) {
+        />
-              <ts-home-sprints [sprints]="h.sprints" />
+        <ts-week-agenda [items]="h.agenda" />
-            }
-            <ts-online-now [online]="h.online" />
-            <ts-resume />
-          </div>
-        </div>
       }
+      <ts-my-views />
+      <!-- Two columns that stack on their own: no gaps between rows. -->
+      <div class="ts-home">
+        <div class="ts-home__column">
+          <ts-my-work />
+          @if (myHome.home(); as h) {
+            <ts-activity-feed
+              [activity]="h.activity"
+              [projectKeys]="projectKeys()"
+            />
+          }
+        </div>
+        <div class="ts-home__column">
+          @if (myHome.home()?.sprints?.length) {
+            <ts-home-sprints [sprints]="myHome.home()!.sprints" />
+          }
+          <ts-my-work part="side" />
+          @if (myHome.home(); as h) {
+            <ts-online-now [online]="h.online" />
+          }
+          <ts-resume />
+        </div>
+      </div>
       <div class="ts-section-header">
         <h2>
           Proyectos
@@ -245,22 +261,25 @@ const REFRESH_MS = 60_000;
       font-size: 0.8125rem;
     }
     ts-first-steps,
-    ts-week-agenda {
+    ts-home-kpis,
+    ts-week-agenda,
+    ts-my-views {
       margin-bottom: 1.25rem;
     }
     .ts-home {
       display: grid;
-      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
       gap: 1.25rem;
       align-items: start;
-      margin: 1.25rem 0 2rem;
+      margin-bottom: 2.5rem;
       @media (max-width: 960px) {
         grid-template-columns: minmax(0, 1fr);
       }
     }
-    .ts-home__side {
+    .ts-home__column {
       display: grid;
       gap: 1.25rem;
+      min-width: 0;
     }
     .ts-public-check {
       p {

libs/web/tracker/presenters/src/lib/ui/home/kpis.ts

@@ -0,0 +1,180 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { Home } from '@task-stream/web/tracker/domain';
+
+/** «+30 %» or «−10 %» against the week before (nothing when there was none). */
+function change(now: number, before: number): string {
+  if (!before) return now ? 'nuevo' : '';
+  const pct = Math.round(((now - before) / before) * 100);
+  return `${pct >= 0 ? '+' : '−'}${Math.abs(pct)} %`;
+}
+
+/** The home page's figures, four tiles of the same size. */
+@Component({
+  selector: 'ts-home-kpis',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: 'region', 'aria-label': 'Cifras' },
+  template: `
+    <div class="ts-panel ts-kpi">
+      <p class="ts-kpi__label">Abiertos tuyos</p>
+      <p class="ts-kpi__value">{{ mine() }}</p>
+      <p class="ts-kpi__sub" [class.is-late]="overdue() > 0">
+        @if (overdue()) {
+          {{ overdue() }} {{ overdue() === 1 ? 'vencido' : 'vencidos' }}
+          @if (dueToday()) {
+            · {{ dueToday() }} hoy
+          }
+        } @else if (dueToday()) {
+          {{ dueToday() }} {{ dueToday() === 1 ? 'vence' : 'vencen' }} hoy
+        } @else {
+          Nada vence hoy
+        }
+      </p>
+    </div>
+    <div class="ts-panel ts-kpi">
+      <p class="ts-kpi__label">Esperando QA</p>
+      <p class="ts-kpi__value">{{ awaitingQa() }}</p>
+      <p class="ts-kpi__sub">En tus proyectos</p>
+    </div>
+    <div class="ts-panel ts-kpi">
+      <p class="ts-kpi__label">Terminados por ti</p>
+      <p class="ts-kpi__value">
+        {{ me().thisWeek }}
+        @if (myChange(); as c) {
+          <span class="ts-kpi__change" [class.is-down]="c.startsWith('−')">{{
+            c
+          }}</span>
+        }
+      </p>
+      <p class="ts-kpi__sub">
+        @if (me().streak > 1) {
+          {{ me().streak }} días seguidos
+        } @else if (me().streak === 1) {
+          Esta semana · racha de 1 día
+        } @else {
+          Esta semana · sin racha
+        }
+      </p>
+    </div>
+    <div class="ts-panel ts-kpi">
+      <p class="ts-kpi__label">Terminados por el equipo</p>
+      <p class="ts-kpi__value">
+        {{ team().thisWeek }}
+        @if (teamChange(); as c) {
+          <span class="ts-kpi__change" [class.is-down]="c.startsWith('−')">{{
+            c
+          }}</span>
+        }
+      </p>
+      <div
+        class="ts-kpi__bars"
+        role="img"
+        [attr.aria-label]="'Terminados por día: ' + team().perDay.join(', ')"
+      >
+        @for (n of team().perDay; track $index) {
+          <span
+            [style.height.%]="height(n)"
+            [class.is-this-week]="$index >= 7"
+            [attr.title]="n + ' terminados'"
+          ></span>
+        }
+      </div>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 1.25rem;
+      @media (max-width: 900px) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.75rem;
+      }
+    }
+    .ts-kpi {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      min-width: 0;
+      padding: 1.125rem 1.25rem;
+    }
+    .ts-kpi__label {
+      margin: 0;
+      color: var(--ts-muted);
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .ts-kpi__value {
+      display: flex;
+      align-items: baseline;
+      gap: 0.5rem;
+      margin: 0.25rem 0 0;
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+    }
+    .ts-kpi__change {
+      color: var(--ts-c-green);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      letter-spacing: 0;
+      &.is-down {
+        color: var(--ts-muted);
+      }
+    }
+    .ts-kpi__sub {
+      margin: auto 0 0;
+      padding-top: 0.375rem;
+      color: var(--ts-ink-soft);
+      font-size: 0.8125rem;
+      &.is-late {
+        color: var(--ts-c-red);
+        font-weight: 600;
+      }
+    }
+    .ts-kpi__bars {
+      display: flex;
+      align-items: flex-end;
+      gap: 2px;
+      height: 1.5rem;
+      margin-top: auto;
+      padding-top: 0.375rem;
+      span {
+        flex: 1;
+        min-height: 2px;
+        border-radius: 2px 2px 0 0;
+        background: color-mix(in srgb, var(--ts-brand) 30%, transparent);
+        &.is-this-week {
+          background: var(--ts-brand);
+        }
+      }
+    }
+  `,
+})
+export class HomeKpisComponent {
+  readonly mine = input.required<number>();
+  readonly dueToday = input.required<number>();
+  readonly overdue = input.required<number>();
+  readonly awaitingQa = input.required<number>();
+  readonly me = input.required<Home['me']>();
+  readonly team = input.required<Home['team']>();
+
+  protected readonly myChange = computed(() =>
+    change(this.me().thisWeek, this.me().lastWeek),
+  );
+  protected readonly teamChange = computed(() =>
+    change(this.team().thisWeek, this.team().lastWeek),
+  );
+  private readonly max = computed(() => Math.max(1, ...this.team().perDay));
+
+  protected height(n: number): number {
+    return (n / this.max()) * 100;
+  }
+}

libs/web/tracker/presenters/src/lib/ui/home/week-agenda.ts

@@ -32,7 +32,7 @@ const KIND: Record<AgendaItem['kind'], string> = {
     </header>
     <ol class="ts-agenda">
       @for (day of days(); track day.date) {
-        <li [class.is-today]="day.today">
+        <li [class.is-today]="day.today" [class.is-empty]="!day.items.length">
           <p class="ts-agenda__day">
             <span>{{ day.weekday }}</span> <strong>{{ day.number }}</strong>
           </p>
@@ -128,6 +128,10 @@ const KIND: Record<AgendaItem['kind'], string> = {
         li {
           min-height: 0;
         }
+        /* On a phone, only the days with something (and today). */
+        li.is-empty:not(.is-today) {
+          display: none;
+        }
       }
     }
   `,

libs/web/tracker/presenters/src/lib/ui/home/week-stats.ts

@@ -1,142 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { Home } from '@task-stream/web/tracker/domain';
-
-/** «+30 %» or «−10 %» against the week before (nothing when there was none). */
-function change(now: number, before: number): string {
-  if (!before) return now ? 'nuevo' : '';
-  const pct = Math.round(((now - before) / before) * 100);
-  return `${pct >= 0 ? '+' : '−'}${Math.abs(pct)} %`;
-}
-
-/** How the week goes: mine (and my streak) and my projects' teams. */
-@Component({
-  selector: 'ts-week-stats',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'ts-panel',
-    role: 'region',
-    'aria-labelledby': 'stats-title',
-  },
-  styleUrl: './home-panel.scss',
-  template: `
-    <header class="ts-panel__head">
-      <h2 id="stats-title">La semana</h2>
-      <span class="ts-muted">Tickets terminados, últimos 7 días</span>
-    </header>
-    <div class="ts-week">
-      <div>
-        <p class="ts-week__label">Tú</p>
-        <p class="ts-week__value">
-          {{ me().thisWeek }}
-          @if (myChange(); as c) {
-            <span class="ts-week__change" [class.is-down]="c.startsWith('−')">{{
-              c
-            }}</span>
-          }
-        </p>
-        <p class="ts-week__sub">
-          @if (me().streak > 1) {
-            {{ me().streak }} días seguidos terminando algo
-          } @else if (me().streak === 1) {
-            Terminaste algo hoy o ayer
-          } @else {
-            Sin racha: hoy puede empezar una
-          }
-        </p>
-      </div>
-      <div>
-        <p class="ts-week__label">Tus equipos</p>
-        <p class="ts-week__value">
-          {{ team().thisWeek }}
-          @if (teamChange(); as c) {
-            <span class="ts-week__change" [class.is-down]="c.startsWith('−')">{{
-              c
-            }}</span>
-          }
-        </p>
-        <div
-          class="ts-week__bars"
-          role="img"
-          [attr.aria-label]="'Terminados por día: ' + team().perDay.join(', ')"
-        >
-          @for (n of team().perDay; track $index) {
-            <span
-              [style.height.%]="height(n)"
-              [class.is-this-week]="$index >= 7"
-              [attr.title]="n + ' terminados'"
-            ></span>
-          }
-        </div>
-      </div>
-    </div>
-  `,
-  styles: `
-    .ts-week {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 1rem;
-    }
-    .ts-week__label {
-      margin: 0;
-      color: var(--ts-muted);
-      font-size: 0.75rem;
-    }
-    .ts-week__value {
-      display: flex;
-      align-items: baseline;
-      gap: 0.5rem;
-      margin: 0.125rem 0 0.25rem;
-      font-size: 1.75rem;
-      font-weight: 700;
-    }
-    .ts-week__change {
-      color: var(--ts-c-green, #2e9e6a);
-      font-size: 0.8125rem;
-      font-weight: 600;
-      &.is-down {
-        color: var(--ts-muted);
-      }
-    }
-    .ts-week__sub {
-      margin: 0;
-      color: var(--ts-ink-soft);
-      font-size: 0.8125rem;
-    }
-    .ts-week__bars {
-      display: flex;
-      align-items: flex-end;
-      gap: 2px;
-      height: 2.5rem;
-      span {
-        flex: 1;
-        min-height: 2px;
-        border-radius: 2px 2px 0 0;
-        background: color-mix(in srgb, var(--ts-brand) 35%, transparent);
-        &.is-this-week {
-          background: var(--ts-brand);
-        }
-      }
-    }
-  `,
-})
-export class WeekStatsComponent {
-  readonly me = input.required<Home['me']>();
-  readonly team = input.required<Home['team']>();
-
-  protected readonly myChange = computed(() =>
-    change(this.me().thisWeek, this.me().lastWeek),
-  );
-  protected readonly teamChange = computed(() =>
-    change(this.team().thisWeek, this.team().lastWeek),
-  );
-  private readonly max = computed(() => Math.max(1, ...this.team().perDay));
-
-  protected height(n: number): number {
-    return (n / this.max()) * 100;
-  }
-}

libs/web/tracker/presenters/src/lib/ui/project-card.ts

@@ -60,6 +60,8 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
                 <span class="ts-project__late">· no llega</span>
               }
             </span>
+          } @else {
+            <span class="ts-project__sprint ts-muted">Sin sprint en curso</span>
           }
         </div>
       }
@@ -74,12 +76,13 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
     </a>
   `,
   styles: `
+    /* As tall as the tallest card of its row, the team always at the bottom. */
     :host {
-      display: block;
+      display: grid;
     }
     .ts-project {
-      display: grid;
+      display: flex;
-      grid-template-rows: auto auto 1fr auto;
+      flex-direction: column;
       gap: 0.375rem;
       min-height: 12rem;
       padding: 1.5rem 1.5rem 1.25rem;
@@ -103,7 +106,7 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
     .ts-project__stats {
       display: grid;
       gap: 0.25rem;
-      margin-top: 0.25rem;
+      margin: 0.25rem 0 0.75rem;
       color: var(--ts-ink-soft);
       font-size: 0.75rem;
     }
@@ -145,7 +148,7 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
       display: flex;
       align-items: center;
       gap: 0.625rem;
-      margin-top: 0.75rem;
+      margin-top: auto;
       padding-top: 0.875rem;
       border-top: 1px dashed var(--ts-line);
     }