Rebuild the shell, add Calendar and Learn, and govern reads

Seven parallel agents and an adversarial verification pass. The three things
worth knowing before reading the diff:

RBAC WAS ALREADY BUILT. docs/build-plan.md marks F2 and F3 outstanding and is
stale — packages/core/src/permissions.ts and lib/mutation.ts shipped long ago.
So this does not rebuild them; it closes the gaps an audit found. The big one
is that reads were entirely ungoverned: every GET was "any authenticated
member", so a junior demand rep and a research contractor could both pull
per-block supplier cost and break-even prices from /api/capacity/margin, and
every contract's negotiated terms. For a company whose margin is the business,
that was the hole that mattered. Adds book:read / economics:read / team:read,
a readGuard middleware, and a `viewer` role below member.

THE BUTTON AND THE 403 DISAGREED — the exact thing F3 said must never happen.
Contracts.tsx never called can() at all, so its save button was always enabled
against a server requiring contract:sign; Capacity.tsx gated commitment
creation on deal:write/demand while the server wanted commitment:write/supply.

POST /api/activities was the one write bypassing executeMutation: no capability
check, and any member could mutate accounts.lastActivityAt as a side effect.
It is now a proper mutation() behind activity:write.

The shell becomes three panes — a collapsible shadcn sidebar with an account
switcher on the Piggy accent, a header with real search, and Piggy docked to
the right, page-aware and persistent across navigation. The phone keeps its
bottom tab bar, which is the thing this product already beat trycompai/crm on,
and gains the sidebar as a sheet.

Calendar is a projection over thirteen dated sources rather than a new table,
because a table would duplicate dates that already live on contracts, deals and
commitments and would drift — and one ledger answering the question is the
whole argument. It surfaces export_authorizations and compliance_artifacts,
which had indexed expires_at columns, schema comments saying they must be
alerted on, and no read endpoint or UI anywhere.

Learn carries two tracks. Concepts are members-only; the platform track can be
opened with a share code by someone with no account. The code mints a scoped
learn-only token and never a Principal — every route here resolves a principal
and then checks capabilities, so a principal-minting code would be one missing
check away from leaking the book. "Only platform-track rows may be code-visible"
is a database CHECK constraint as well as a write-path rule, and a test asserts
a valid learn token still gets 401 on /api/dashboard, /api/accounts and
/api/contracts — the same invariant scripts/deploy.sh refuses to ship without.

CD becomes tag-to-ship. CI publishes an image to the Gitea registry on a
release-* tag and cloud-2 pulls it, so no credential on the shared runner can
execute anything on production — by construction rather than by policy. Both
halves of deploy.sh's original rule survive: nothing on the runner reaches the
host, and a human still decides when it ships. deploy.sh gains a rollback and a
public-origin check, and PIG_IMAGE now reaches compose through `sudo env`,
without which sudo's env_reset silently resolved every release to pig:local.

Tests 141 -> 261.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/src/hooks/use-media-query.ts

@@ -0,0 +1,46 @@
+/**
+ * Viewport queries, with the breakpoints named once.
+ *
+ * They were not named once before, and it cost: the Piggy sheet-versus-drawer
+ * switch used `md` (768px) while the shell switched navigation at `lg`
+ * (1024px), so between those two widths a tablet got the desktop side sheet
+ * *and* the phone tab bar, and the sheet slid in underneath it. Anything that
+ * needs "is this the phone layout?" must ask the same question the shell asks.
+ */
+import { useEffect, useState } from 'react';
+
+/** Tailwind `lg`. Below this the shell shows the tab bar and the nav Sheet. */
+export const NAV_BREAKPOINT = 1024;
+
+/**
+ * Tailwind `xl`. The Piggy dock only earns a permanent column once the middle
+ * pane still clears ~640px with both gutters taken: 1280 − 256 − 352 = 672.
+ * At `lg` it would leave 416px, which is narrower than the phone layout.
+ */
+export const DOCK_BREAKPOINT = 1280;
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const update = () => setMatches(media.matches);
+    // Re-read on subscribe: the query may have changed between the initial
+    // state and this effect, and a resize would otherwise be needed to notice.
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, [query]);
+
+  return matches;
+}
+
+/** True on the phone/small-tablet layout: tab bar, nav in a Sheet, Piggy in a Drawer. */
+export function useIsMobile(): boolean {
+  return !useMediaQuery(`(min-width: ${NAV_BREAKPOINT}px)`);
+}
+
+/** True when there is room for Piggy to sit in a permanent right-hand column. */
+export function useHasDockRoom(): boolean {
+  return useMediaQuery(`(min-width: ${DOCK_BREAKPOINT}px)`);
+}