feat(rules): the check is editable, visible, and sweepable in the UI (#3098, milestone 312 step 4)

Rule 27 — the milestone was backend-only until this. Four surfaces:

RULE EDITOR — verify_with and expires_when under a legend that asks the
actual question ("Can this rule go stale?") and says empty is the normal
answer, because most rules are decisions and a form that implies a missing
field would get them filled in out of tidiness. When the SAVED rule carries
a check, the stamp shows with Still true / No longer true beside it. The
stamp reads the stored value, not the draft: an unsaved edit to the textarea
has not been run against anything.

SWEEP PANE — its own surface, not a filter on the rule list. That list can
only ever show one topic of one rulebook, and a rule that has gone false
belongs to no one rulebook; filtering it would under-report, which is the
failure this whole surface exists to catch. Reached from the rulebook list,
below the rulebooks, because that is where you go to look at rules.

RULE ROWS — a chip only on rules carrying a check, so its presence is the
signal. PROJECT RULES TAB — the check shows beside `why` when a rule has
one, read-only: that tab is the project's view of what binds it.

NO AGE-GRADED COLOUR anywhere, deliberately. The sweep is already ordered by
urgency, so a red/amber ramp would restate the ordering AND require an
invented "stale after N days" threshold — a magic number nobody could defend
and the first thing to go out of date. --fs-overdue is error red and reserved
for a broken promise like a missed due date; a verification age is not one,
and colouring it that way makes a rule someone just wrote look broken. Only
"never" is marked, because it is categorically different from a date rather
than a worse one — and it is marked by weight, not hue.

An empty sweep says "Nothing to check", not nothing: good news must not read
as a broken page.

Two chips (tier, then verification) turned out byte-identical, so .rule-chip
moves to rules-shared.css and snippet #2906 is updated to match rather than
left describing a file that has moved on. Its header comment counted the
panes it served; that count went stale the moment a fourth arrived, so it no
longer counts.

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

frontend/src/components/rules/ProjectRulesTab.vue

@@ -24,7 +24,10 @@ const allRulebooks = ref<Rulebook[]>([]);
 const showPicker = ref(false);
 const expandedRuleIds = ref<Set<number>>(new Set());
 
-const ruleDetails = ref<Record<number, { why: string; how_to_apply: string }>>({});
+const ruleDetails = ref<Record<number, {
+  why: string; how_to_apply: string;
+  verify_with: string; expires_when: string; verified_at: string | null;
+}>>({});
 
 const showProjectRuleForm = ref(false);
 const newProjectRule = ref({
@@ -67,6 +70,9 @@ async function toggleRuleExpand(ruleId: number) {
       ruleDetails.value[ruleId] = {
         why: rule.why || "",
         how_to_apply: rule.how_to_apply || "",
+        verify_with: rule.verify_with || "",
+        expires_when: rule.expires_when || "",
+        verified_at: rule.verified_at,
       };
     }
   }
@@ -74,6 +80,11 @@ async function toggleRuleExpand(ruleId: number) {
   expandedRuleIds.value = new Set(expandedRuleIds.value);
 }
 
+/** "never run" reads as a stronger claim than an absent date — and it is. */
+function checkAge(verifiedAt: string | null): string {
+  return verifiedAt ? `last passed ${verifiedAt.slice(0, 10)}` : "never run";
+}
+
 function openInRulesView(rulebookId: number, ruleId?: number) {
   const query: Record<string, string> = { rb: String(rulebookId) };
   if (ruleId) query.rule = String(ruleId);
@@ -279,6 +290,16 @@ watch(() => props.projectId, load);
             <div v-if="ruleDetails[r.id].how_to_apply">
               <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
             </div>
+            <!-- Shown only when the rule carries a check. Read-only here: this
+                 tab is the project's view of what binds it, and editing a rule
+                 belongs on the rulebook surface that owns it. -->
+            <div v-if="ruleDetails[r.id].verify_with">
+              <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
+              <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
+            </div>
+            <div v-if="ruleDetails[r.id].expires_when">
+              <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
+            </div>
             <button class="delete-link" @click="removeProjectRule(r.id)">Delete</button>
           </div>
         </li>
@@ -332,6 +353,13 @@ watch(() => props.projectId, load);
                 <div v-if="ruleDetails[r.id].how_to_apply">
                   <strong>How to apply:</strong> {{ ruleDetails[r.id].how_to_apply }}
                 </div>
+                <div v-if="ruleDetails[r.id].verify_with">
+                  <strong>Check:</strong> {{ ruleDetails[r.id].verify_with }}
+                  <span class="rule-check-age">{{ checkAge(ruleDetails[r.id].verified_at) }}</span>
+                </div>
+                <div v-if="ruleDetails[r.id].expires_when">
+                  <strong>Ends when:</strong> {{ ruleDetails[r.id].expires_when }}
+                </div>
                 <button
                   class="edit-link"
                   @click="openInRulesView(r.rulebook_id, r.id)"
@@ -428,6 +456,11 @@ ul { list-style: none; padding: 0; margin: 0; }
 }
 .rule-head { cursor: pointer; }
 .rule-title { font-weight: 500; }
+.rule-check-age {
+  margin-left: var(--fs-space-2);
+  color: var(--fs-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
 .rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
 .rule-detail {
   margin-top: 0.5rem; padding: 0.5rem;