feat(board): rework quick-peek modal (Linear-style) + board toolbar

Modal redesign — compact summary instead of two long cards:
- Topbar: breadcrumb + state pill + copyable task-id/link chip; review
  actions (approve / request changes) live in the modal header too
- Main column: title, meta chips (ball, created, last update), compact
  description, then square summary tiles (done/total with progress,
  active, open, blocked) + per-agent pills — details stay in Vollansicht
- Right sidebar: properties as slim Linear-style rows (status, priority,
  assignee, due, source) with hover-reveal controls; activity moved next
  to properties as a compact timeline with a new comment composer
  (POST tasks/{id}/activity via new store action postTaskActivity)
- Unified button system (32px: primary/ghost/approve/changes/icon)
- flattenBoard includes nested children again so quick-peek works for
  child rows inside master cards

Board (issue-tracker basics):
- Toolbar with search (title/detail/id/child titles) and ball filters:
  Alle / Du bist dran / Bei Iris / Haengt

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/dashboard/v2/AgentDetailModal.vue

@@ -298,7 +298,7 @@ function avatarLabel() {
 
 .m-av.iris {
   background: var(--grad);
-  color: var(--tx);
+  color: #fff;
   box-shadow: var(--glow-purple);
 }
 
@@ -328,13 +328,13 @@ function avatarLabel() {
   font-weight: 600;
   border: 1px solid transparent;
 }
-.badge-blue   { background:rgba(79,124,255,.14);  color:var(--a-blue);   border-color:rgba(79,124,255,.3); }
-.badge-purple { background:rgba(181,87,246,.14);  color:var(--a-purple);  border-color:rgba(181,87,246,.3); }
-.badge-amber  { background:rgba(251,191,36,.13);  color:var(--st-queue);  border-color:rgba(251,191,36,.3); }
-.badge-green  { background:rgba(61,220,151,.13);  color:var(--st-work);   border-color:rgba(61,220,151,.3); }
-.badge-cyan   { background:rgba(52,214,245,.13);  color:var(--st-think);  border-color:rgba(52,214,245,.3); }
-.badge-rose   { background:rgba(251,113,133,.13); color:var(--st-block);  border-color:rgba(251,113,133,.3); }
-.badge-slate  { background:rgba(150,140,255,.08); color:var(--tx-2);      border-color:var(--line-2); }
+.badge-blue   { background:rgba(79,124,255,.14);  color:#9db6ff;     border-color:rgba(79,124,255,.3); }
+.badge-purple { background:rgba(181,87,246,.14);  color:#d7a8ff;     border-color:rgba(181,87,246,.3); }
+.badge-amber  { background:rgba(251,191,36,.13);  color:#fcd34d;     border-color:rgba(251,191,36,.3); }
+.badge-green  { background:rgba(61,220,151,.13);  color:#7ef0bd;     border-color:rgba(61,220,151,.3); }
+.badge-cyan   { background:rgba(52,214,245,.13);  color:#8ee9fb;     border-color:rgba(52,214,245,.3); }
+.badge-rose   { background:rgba(251,113,133,.13); color:#fda4b0;     border-color:rgba(251,113,133,.3); }
+.badge-slate  { background:rgba(150,140,255,.08); color:var(--tx-2); border-color:var(--line-2); }
 
 .m-pill {
   display: inline-flex;
@@ -428,7 +428,7 @@ function avatarLabel() {
 }
 
 .m-bar.work i {
-  background: linear-gradient(90deg, var(--st-work), var(--st-work));
+  background: linear-gradient(90deg, #2bb87f, #3ddc97);
   box-shadow: var(--glow-work);
 }
 
@@ -510,7 +510,7 @@ function avatarLabel() {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   line-height: 1.7;
-  color: var(--st-think);
+  color: #9fe8fb;
   min-height: 72px;
   position: relative;
   overflow: hidden;
@@ -593,7 +593,7 @@ function avatarLabel() {
 .m-model-btn.active {
   background: var(--grad);
   border: none;
-  color: var(--tx);
+  color: #fff;
   box-shadow: var(--glow-purple);
 }