Merge issue-204-slice-1: own visible feedback in workspace surfaces

Author: alexeygrigorev

backend/e2e/canonical-capability-behavior.spec.js

@@ -1181,15 +1181,18 @@ test.describe('issue 159 retained canonical capability behavior', () => {
 
     await adminPage.getByRole('button', { name: 'Add user' }).click();
     await adminPage.getByRole('button', { name: 'Create user' }).click();
-    await expect(adminPage.getByRole('status')).toContainText('Name and email are required');
+    // Validation is owned by the fields it is about (#204 slice 1).
+    await expect(adminPage.locator('.ops-user-form .field-error').first()).toContainText('Name is required.');
+    await expect(adminPage.getByLabel('Name')).toHaveAttribute('aria-invalid', 'true');
     await adminPage.getByRole('button', { name: 'Cancel' }).click();
     await setFaults(admin.request, [{ method: 'POST', path: '/api/users', status: 503 }]);
     await adminPage.getByRole('button', { name: 'Add user' }).click();
     await adminPage.getByLabel('Name').fill('Synthetic Failed User');
     await adminPage.getByLabel('Email').fill(`${unique('failed')}@example.invalid`);
     await adminPage.getByLabel('Password').fill('synthetic-password');
     await adminPage.getByRole('button', { name: 'Create user' }).click();
-    await expect(adminPage.getByRole('status')).toContainText('Synthetic route failure (503)');
+    await expect(adminPage.locator('.ops-user-form-result .form-feedback-error')).toContainText('Synthetic route failure (503)');
+    await expect(adminPage.getByLabel('Name')).toHaveValue('Synthetic Failed User');
     await clearFaults(admin.request);
 
     const operatorPage = await operator.newPage();
@@ -1577,7 +1580,10 @@ test.describe('issue 159 retained canonical capability behavior', () => {
     await expect(recurringRow).toBeVisible();
     await setFaults(admin.request, [{ method: 'PUT', path: `/api/recurring/${recurring.id}`, status: 503 }]);
     await recurringRow.getByRole('button', { name: 'Pause' }).click();
-    await expect(page.locator('#status-text')).toContainText('Could not update recurring operation: Synthetic route failure (503)');
+    // The failure belongs to the row whose control was used, not to a hidden
+    // shell status line (#204 slice 1).
+    await expect(recurringRow.locator('.recurring-row-error')).toContainText('Could not pause this schedule: Synthetic route failure (503)');
+    await expect(recurringRow.locator('.recurring-row-error')).toContainText('Select Pause to retry.');
     await clearFaults(admin.request);
     await recurringRow.getByRole('button', { name: 'Pause' }).click();
     await expect(recurringSection.locator('.ops-recurring-item', { hasText: `Synthetic recurring ${id}` }).getByRole('button', { name: 'Resume' })).toBeVisible();

backend/e2e/runtime-template-readonly.spec.js

@@ -51,7 +51,11 @@ test.describe('Git-authored runtime templates', () => {
     });
     await page.goto('/#/templates');
     await expect(page.getByText('Runtime templates unavailable')).toBeVisible();
-    await expect(page.getByText('Synthetic route failure (503)')).toBeVisible();
+    await expect(page.locator('.runtime-template-inspector')).toContainText('Synthetic route failure (503)');
+    // The Templates section also states its own load outcome (#204 slice 1).
+    const templatesSummary = page.locator('[data-summary-id="tasks-templates"]');
+    await expect(templatesSummary).toHaveAttribute('data-summary-state', /partial|unavailable/);
+    await expect(templatesSummary.locator('.surface-summary-detail')).toHaveText('Synthetic route failure (503)');
     await request.delete('/__e2e__/route-faults');
 
     await page.goto('/#/templates?templateId=missing-git-template');

backend/e2e/surface-feedback-states.spec.js

@@ -345,6 +345,7 @@ const {
   formatHomeCalendarDate,
   formatHomeTaskTiming,
   isActiveWorkCard,
+  getActiveWorkspaceRouteToken,
   isOpenWorkTask,
   isOperationsHomeVisible,
   isWorkflowTemplateDoc,
@@ -372,7 +373,6 @@ const {
   resolveCardLabel: (...args) => resolveCardLabel(...args),
   resolveDocReference,
   setRouteTitle,
-  setStatus,
   settledPayload,
   state: homeSurfaceState,
   summarizeWorkflowTemplate,
@@ -396,6 +396,8 @@ const {
   currentOperatorIdFromPayload,
   documentList,
   getActiveWorkspaceView: () => workspaceState.activeWorkspaceView,
+  getActiveWorkspaceRouteToken,
+  isWorkspaceRouteFresh,
   getOperationsQualitySnapshot: () => workspaceState.qualitySnapshot,
   getOperationsRecurringSnapshot: () => workspaceState.recurringSnapshot,
   getOperationsWorkSnapshot: () => workspaceState.workSnapshot,
@@ -406,13 +408,10 @@ const {
   renderSurfaceHeader,
   request,
   setRouteTitle,
-  setStatus,
   settledPayload,
   showCreate,
-  showErrorToast,
   showWorkspaceSurface,
   surfaceDescription,
-  surfaceStatusText,
   usersFromWorkPayload,
   workApiUrl,
 });
@@ -478,7 +477,6 @@ const {
   request,
   resolveDocReference,
   scheduleAnimationFrame: (callback) => requestAnimationFrame(callback),
-  setStatus,
   settledPayload,
   showUndoToast,
   state: workDetailState,
@@ -559,15 +557,12 @@ const {
   renderHonestState,
   renderOperationsRuntimeState,
   renderSurfaceHeader,
-  reportError,
   resolveAssigneeLabel,
   request,
   scheduleAnimationFrame: (callback) => requestAnimationFrame(callback),
   setRouteTitle,
-  setStatus,
   setWorkspaceEntityState,
   shellBody: body,
-  showErrorToast,
   sortWorkTasks,
   state: tasksSurfaceState,
   surfaceDescription,

frontend/src/runtime/application.js

@@ -1507,6 +1507,12 @@ body[data-workspace-view="tasks"] .document-list.is-operations-home {
   padding: 14px 16px;
 }
 
+.home-attention-empty {
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+}
+
 .ops-runtime-state {
   display: grid;
   gap: 4px;
@@ -1523,6 +1529,147 @@ body[data-workspace-view="tasks"] .document-list.is-operations-home {
   overflow-wrap: anywhere;
 }
 
+/* Owning-surface feedback (#204): each surface states its own load, pending,
+   validation and failure outcomes where the operator is already looking. */
+.surface-summary {
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+  width: min(var(--content-width), 100%);
+  min-width: 0;
+  border: 1px solid var(--border-muted);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  padding: 10px 14px;
+}
+
+.surface-summary-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  min-width: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+
+.surface-summary-state {
+  border: 1px solid var(--border-muted);
+  border-radius: 999px;
+  background: var(--surface-bg);
+  color: var(--text-muted);
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.surface-summary[data-summary-state="unavailable"] {
+  border-color: var(--danger-border);
+}
+
+.surface-summary[data-summary-state="partial"] {
+  border-color: var(--warning-border);
+}
+
+.surface-summary-detail {
+  color: var(--text-muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.surface-summary-retry,
+.quick-form-retry {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius);
+  background: var(--control-bg);
+  color: var(--text-primary);
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.surface-summary-retry[disabled],
+.quick-form-retry[disabled] {
+  opacity: 0.7;
+}
+
+/* The Home strip lays its counts out in three columns; the summary explains
+   all three, so it spans them instead of taking one count's place. */
+.home-status-strip > .surface-summary {
+  grid-column: 1 / -1;
+  border: 0;
+  border-bottom: 1px solid var(--border-muted);
+  border-radius: 0;
+  background: transparent;
+  width: 100%;
+}
+
+.form-feedback {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.form-feedback-status,
+.form-feedback-error,
+.field-error {
+  margin: 0;
+  min-width: 0;
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.form-feedback-status {
+  color: var(--text-muted);
+}
+
+.form-feedback-error,
+.field-error,
+.ops-user-row-error,
+.recurring-row-error {
+  color: var(--danger-text);
+}
+
+.field-error {
+  display: block;
+  margin-top: 4px;
+  font-weight: 600;
+}
+
+.ops-users-outcome {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.ops-user-row-error {
+  margin: 6px 0 0;
+  font-size: 13px;
+}
+
+.ops-admin-diagnostics-summary {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .surface-summary-retry,
+  .quick-form-retry {
+    min-height: 44px;
+    padding-inline: 16px;
+  }
+}
+
 /* Process document availability: one shared outage/empty state. */
 .ops-docs-state {
   display: grid;
@@ -3353,7 +3500,7 @@ body.dark .danger-button {
 /* Recurring create/edit dialog. */
 .recurring-form-intro,
 .recurring-form-preview,
-.recurring-form-error {
+.recurring-form-feedback {
   margin: 0;
   font-size: 13px;
 }
@@ -3371,7 +3518,7 @@ body.dark .danger-button {
   font-weight: 600;
 }
 
-.recurring-form-error {
+.recurring-form-feedback .form-feedback-error {
   color: var(--danger-text);
   font-weight: 600;
 }
@@ -6508,13 +6655,13 @@ body[data-workspace-view="calendar"] .document-list {
 
 .ops-user-form-result {
   min-height: 20px;
-  margin: 0;
-  color: var(--success-text);
-  font-size: 13px;
+  grid-column: 1 / -1;
 }
 
-.ops-user-form-result.ops-error {
-  color: var(--danger-text);
+.ops-user-form-result
+  .form-feedback[data-feedback-state="success"]
+  .form-feedback-status {
+  color: var(--success-text);
 }
 
 .device-panel {
@@ -9060,6 +9207,34 @@ body[data-workspace-view="tasks"] .recurring-form-footer button {
   min-height: 42px;
 }
 
+/* Slice 1 controls must remain operable at phone widths without enlarging
+   desktop density or unrelated surfaces. */
+@media (max-width: 768px) {
+  .ops-surface-recurring .recurring-action,
+  .ops-surface-users .primary-button,
+  .ops-users-table .ops-user-actions .quiet-button,
+  .ops-user-form input:not([type="checkbox"]),
+  .ops-user-form select,
+  .ops-user-form-actions button,
+  .quick-form-overlay .quiet-button,
+  .quick-form-label input:not([type="checkbox"]),
+  .quick-form-label select,
+  .quick-form > .task-action-btn,
+  .recurring-form-footer button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .quick-form-label.quick-form-checkbox input {
+    box-sizing: border-box;
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+    margin: 0;
+  }
+}
+
 @keyframes task-state-shimmer {
   0% { background-position: 100% 0; }
   100% { background-position: -100% 0; }
@@ -11257,3 +11432,36 @@ body[data-workspace-view="tasks"] .ops-queue-row strong {
     overflow-y: auto;
   }
 }
+
+/* Slice 1 controls must remain operable at phone widths without enlarging
+   desktop density or unrelated surfaces. Keep this override after the denser
+   Tasks-view rules so equal-specificity mobile declarations cannot lose. */
+@media (max-width: 768px) {
+  body[data-workspace-view="tasks"] .ops-surface-recurring .recurring-action,
+  body[data-workspace-view="tasks"] .recurring-row-actions .task-action-btn,
+  .ops-surface-users .primary-button,
+  .ops-users-table .ops-user-actions .quiet-button,
+  .ops-user-form input:not([type="checkbox"]),
+  .ops-user-form select,
+  .ops-user-form-actions button,
+  body[data-workspace-view="tasks"] .quick-form-overlay .quiet-button,
+  body[data-workspace-view="tasks"] .quick-form-label input:not([type="checkbox"]),
+  body[data-workspace-view="tasks"] .quick-form-label select,
+  body[data-workspace-view="tasks"] .quick-form > .task-action-btn,
+  body[data-workspace-view="tasks"] .recurring-form-footer button,
+  .home-quick-action,
+  .home-task-action,
+  .home-view-all {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  body[data-workspace-view="tasks"] .quick-form-label.quick-form-checkbox input {
+    box-sizing: border-box;
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+    margin: 0;
+  }
+}