Improve local rules persistence and dirty-state handling

src/web/styles.css

@@ -783,6 +783,14 @@ p {
   color: var(--client-accent);
 }
 
+.client-local-rules-toggle.has-pending:not(.is-open) {
+  color: oklch(0.68 0.14 72);
+}
+
+.client-local-rules-toggle.has-pending:not(.is-open) svg {
+  filter: drop-shadow(0 0 7px oklch(0.68 0.14 72 / 0.42));
+}
+
 .client-local-rules-toggle.is-open svg {
   transform: rotate(90deg);
 }
@@ -821,6 +829,7 @@ p {
 
 .client-local-rules-header {
   display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 9px;
   margin: 0 8px 34px;
 }
@@ -835,17 +844,46 @@ p {
 }
 
 .client-local-rules-header h2 {
+  grid-column: 1 / -1;
   font-size: 22px;
   letter-spacing: -0.045em;
 }
 
 .client-local-rules-header p {
+  grid-column: 1 / -1;
   max-width: 46ch;
   color: var(--client-muted);
   font-size: 11px;
   line-height: 1.7;
 }
 
+.client-local-rules-save {
+  align-self: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-accent);
+  font-size: 10px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 200ms ease, filter 300ms ease, opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-local-rules-save:hover:not(:disabled) {
+  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 42%, transparent));
+  transform: translateY(-1px);
+}
+
+.client-local-rules-save:disabled {
+  opacity: 0.28;
+  cursor: default;
+}
+
+.client-local-rules-header .client-local-rules-runtime {
+  color: oklch(0.68 0.14 72);
+  animation: client-local-rules-notice 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 .client-local-rules-form,
 .client-local-rules-group,
 .client-local-rules-list {
@@ -871,7 +909,7 @@ p {
   align-items: center;
   gap: 10px;
   padding: 7px 0;
-  animation: client-local-rule-enter 560ms calc(var(--rule-index) * 55ms) cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: client-local-rule-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
   transition: opacity 260ms ease, filter 360ms ease;
 }
 
@@ -1093,6 +1131,8 @@ p {
 .client-rule-type-trigger:focus-visible,
 .client-local-rule > button:last-child:focus-visible,
 .client-local-rule-add:focus-visible,
+.client-local-rules-save:focus-visible,
+.client-local-rules-discard button:focus-visible,
 .client-local-rules-actions button:focus-visible {
   outline: 0;
   color: var(--client-accent);
@@ -1163,6 +1203,39 @@ p {
   transform: none;
 }
 
+.client-local-rules-discard {
+  display: grid;
+  gap: 8px;
+  color: var(--client-muted);
+  font-size: 9px;
+  line-height: 1.55;
+  animation: client-local-rules-notice 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-local-rules-discard strong {
+  color: oklch(0.68 0.15 28);
+  font-size: 10px;
+}
+
+.client-local-rules-discard div {
+  display: flex;
+  gap: 12px;
+}
+
+.client-local-rules-discard button {
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--client-text);
+  font-size: 9px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.client-local-rules-discard .is-danger {
+  color: oklch(0.68 0.15 28);
+}
+
 .client-local-rules-actions {
   display: flex;
   justify-content: flex-end;
@@ -1186,10 +1259,6 @@ p {
   transform: translateY(-1px);
 }
 
-.client-local-rules-actions .is-primary {
-  color: var(--client-accent);
-}
-
 .client-local-rules-actions button:disabled {
   opacity: 0.45;
   cursor: wait;
@@ -1205,6 +1274,11 @@ p {
   to { opacity: 0; filter: blur(8px); transform: translateX(18px) scale(0.97); }
 }
 
+@keyframes client-local-rules-notice {
+  from { opacity: 0; filter: blur(6px); transform: translateY(-6px); }
+  to { opacity: 1; filter: blur(0); transform: translateY(0); }
+}
+
 .client-instructions {
   position: fixed;
   inset: 0 auto 0 0;
@@ -1310,6 +1384,11 @@ p {
   mix-blend-mode: normal;
 }
 
+::view-transition-group(*) {
+  animation-duration: 420ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 ::view-transition-group(instruction-proxybridge),
 ::view-transition-group(instruction-switchyomega),
 ::view-transition-group(instruction-vscode),
@@ -2801,6 +2880,9 @@ p {
   .client-local-rule > button:last-child,
   .client-local-rule-add,
   .client-local-rule-add-slot > span,
+  .client-local-rules-save,
+  .client-local-rules-runtime,
+  .client-local-rules-discard,
   .client-local-rules-actions button {
     transition: none;
     animation: none;