From b8c9996a3b23667603d86bbeb42dad08c1623c4d Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Fri, 21 Aug 2026 18:29:20 -0400
Subject: [PATCH 1/3] fix(settings): responsive permissions matrix,
 black-on-yellow tag ink, drop Theme row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Permissions tab
- The directory × action matrix was a fixed `1fr 90px×4 32px` grid with no
  breakpoint; at the dialog's normal width a tier card is ~390px, so the
  Network column fell off the card. The tier card is now an inline-size
  container: the default layout stacks (pattern + remove on one line, then
  a 2×2 of labelled selects) and the five-column table only switches on at
  ≥540px, where it actually fits.
- Each select is wrapped in a real <label> (visible in stacked mode,
  visually-hidden in table mode where the header row carries the names).
- Card header wraps instead of squeezing the badge; badge no longer breaks
  "Full Access" onto two lines inside a 16px chip.
- ⚠️ emoji removed from the badge (no emoji as UI glyphs); up/down/remove
  controls get aria-labels; remove-rule uses the xmark icon.
- Permissions CSS migrated from literals to the design-system tokens
  (radius / space / type / border-width), with hover + focus-visible states
  on the selects and model options.

Tag accent variant (design-polish.css)
- badge-v2's `variant="accent"` painted --v2-text-text-contrast over
  bg-accent — light text on yellow, the pairing the accent law forbids.
  Now --accent fill + --accent-ink (near-black), both schemes; nowrap.
  Element selector is deliberate: badge-v2.css is injected when the
  component lazy-loads, after this skin, so equal specificity loses.
  Also fixes the "New" badge on the General tab.

General tab
- Remove the Theme row (and its opencode.ai docs link) from Appearance.
  Colour scheme and fonts stay.
---
 .../src/components/settings-v2/general.tsx    |  25 --
 .../components/settings-v2/permissions.tsx    |  61 +++--
 .../components/settings-v2/settings-v2.css    | 246 +++++++++++++-----
 packages/app/src/design-polish.css            |  14 +
 4 files changed, 233 insertions(+), 113 deletions(-)

diff --git a/packages/app/src/components/settings-v2/general.tsx b/packages/app/src/components/settings-v2/general.tsx
index 8a72701fd..b7e11ba9e 100644
--- a/packages/app/src/components/settings-v2/general.tsx
+++ b/packages/app/src/components/settings-v2/general.tsx
@@ -9,7 +9,6 @@ import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useUpdaterAction } from "../updater-action"
 import { useSettings } from "@/context/settings"
-import { ExternalLink } from "../external-link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
@@ -147,30 +146,6 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
           />
         </SettingsRowV2>
 
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <ExternalLink class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </ExternalLink>
-            </>
-          }
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-theme"
-            options={props.controller.theme.options()}
-            current={props.controller.theme.current()}
-            placement="bottom-end"
-            gutter={6}
-            value={(option) => option.id}
-            label={(option) => option.name}
-            onSelect={props.controller.theme.select}
-          />
-        </SettingsRowV2>
-
         <FontSetting kind="ui" fonts={props.controller.fonts} />
         <FontSetting kind="code" fonts={props.controller.fonts} />
         <FontSetting kind="terminal" fonts={props.controller.fonts} />
diff --git a/packages/app/src/components/settings-v2/permissions.tsx b/packages/app/src/components/settings-v2/permissions.tsx
index 167386e68..bcda1e1f3 100644
--- a/packages/app/src/components/settings-v2/permissions.tsx
+++ b/packages/app/src/components/settings-v2/permissions.tsx
@@ -208,8 +208,11 @@ export const SettingsPermissionsV2: Component = () => {
                       fallback={
                         <>
                           <h3 class="settings-v2-permissions-card-title">{tier.label}</h3>
-                          <Tag variant={badgeVariant(summary()) === "danger" ? "accent" : "neutral"} class="settings-v2-permissions-badge">
-                            <Show when={summary() === "Full Access"}>⚠️ </Show>
+                          <Tag
+                            variant={badgeVariant(summary()) === "danger" ? "accent" : "neutral"}
+                            class="settings-v2-permissions-badge"
+                            title={summary() === "Full Access" ? "Every action is allowed everywhere" : undefined}
+                          >
                             {summary()}
                           </Tag>
                           <Show when={!isUnassigned()}>
@@ -243,10 +246,22 @@ export const SettingsPermissionsV2: Component = () => {
                     </Show>
                   </div>
                   <div class="settings-v2-permissions-card-actions">
-                    <ButtonV2 size="small" variant="ghost-muted" disabled={tiers().indexOf(tier) === 0} onClick={() => moveTier(tier.id, -1)}>
+                    <ButtonV2
+                      size="small"
+                      variant="ghost-muted"
+                      aria-label="Move tier up"
+                      disabled={tiers().indexOf(tier) === 0}
+                      onClick={() => moveTier(tier.id, -1)}
+                    >
                       ↑
                     </ButtonV2>
-                    <ButtonV2 size="small" variant="ghost-muted" disabled={tiers().indexOf(tier) === tiers().length - 1} onClick={() => moveTier(tier.id, 1)}>
+                    <ButtonV2
+                      size="small"
+                      variant="ghost-muted"
+                      aria-label="Move tier down"
+                      disabled={tiers().indexOf(tier) === tiers().length - 1}
+                      onClick={() => moveTier(tier.id, 1)}
+                    >
                       ↓
                     </ButtonV2>
                     <Show when={!isUnassigned()}>
@@ -259,7 +274,7 @@ export const SettingsPermissionsV2: Component = () => {
 
                 {/* Directory × Action Matrix */}
                 <div class="settings-v2-permissions-matrix">
-                  <div class="settings-v2-permissions-matrix-header">
+                  <div class="settings-v2-permissions-matrix-header" aria-hidden="true">
                     <span class="settings-v2-permissions-matrix-corner">Directory</span>
                     <For each={ACTION_GROUPS}>{(g) => (
                       <span class="settings-v2-permissions-matrix-head" data-group={g} title={GROUP_TOOLS[g]}>
@@ -275,20 +290,30 @@ export const SettingsPermissionsV2: Component = () => {
                         const effect = () => perms[group]
                         const isDanger = () => (group === "execute" || group === "network") && effect() === "allow"
                         return (
-                          <select
-                            value={effect()}
-                            onChange={(e) => updateDirectoryEffect(tier.id, pattern, group, e.currentTarget.value as Effect)}
-                            class={isDanger() ? "settings-v2-permissions-select settings-v2-permissions-select--danger" : "settings-v2-permissions-select"}
-                          >
-                            <option value="allow">Allow</option>
-                            <option value="deny">Deny</option>
-                            <option value="ask">Ask</option>
-                          </select>
+                          <label class="settings-v2-permissions-matrix-cell" data-group={group}>
+                            <span class="settings-v2-permissions-matrix-cell-label">{GROUP_LABEL[group]}</span>
+                            <select
+                              value={effect()}
+                              title={GROUP_TOOLS[group]}
+                              onChange={(e) => updateDirectoryEffect(tier.id, pattern, group, e.currentTarget.value as Effect)}
+                              class={isDanger() ? "settings-v2-permissions-select settings-v2-permissions-select--danger" : "settings-v2-permissions-select"}
+                            >
+                              <option value="allow">Allow</option>
+                              <option value="deny">Deny</option>
+                              <option value="ask">Ask</option>
+                            </select>
+                          </label>
                         )
                       }}</For>
-                      <ButtonV2 size="small" variant="ghost-muted" disabled={pattern === "**"} onClick={() => removeDirectoryRule(tier.id, pattern)}>
-                        ×
-                      </ButtonV2>
+                      <ButtonV2
+                        size="small"
+                        variant="ghost-muted"
+                        icon="xmark-small"
+                        class="settings-v2-permissions-matrix-remove"
+                        aria-label={`Remove rule ${pattern}`}
+                        disabled={pattern === "**"}
+                        onClick={() => removeDirectoryRule(tier.id, pattern)}
+                      />
                     </div>
                   )}</For>
                   <ButtonV2 size="small" variant="ghost-muted" onClick={() => addDirectoryRule(tier.id)}>
@@ -305,7 +330,7 @@ export const SettingsPermissionsV2: Component = () => {
                       <For each={assignedModels()}>{(mid) => (
                         <span class="settings-v2-permissions-model-chip">
                           {mid}
-                          <button type="button" class="settings-v2-permissions-model-remove" onClick={() => assignModel(mid, "unassigned")}>×</button>
+                          <button type="button" class="settings-v2-permissions-model-remove" aria-label={`Unassign ${mid}`} onClick={() => assignModel(mid, "unassigned")}>×</button>
                         </span>
                       )}</For>
                     </div>
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index f6f1528ec..02a33b9a0 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -728,94 +728,158 @@
   color: var(--v2-state-fg-danger);
 }
 
-/* Permissions tab */
+/* Permissions tab
+   Geometry/colour via the design-system tokens (design-polish.css). The
+   directory × action matrix is responsive: the tier card is an inline-size
+   container; the DEFAULT layout is stacked (pattern line, then a 2×2 of
+   labelled selects) because the settings dialog gives a tier card ~390px at
+   a normal window, and the table layout only switches on once the card is
+   wide enough to hold five columns. */
 .settings-v2-permissions-intro {
-  font-size: 13px;
-  font-weight: 440;
+  font-size: var(--font-size-md);
+  font-weight: 400;
   line-height: 18px;
   color: var(--v2-text-text-muted);
   margin: 0;
 }
 .settings-v2-permissions {
-  gap: 20px;
+  gap: var(--space-5);
+  min-width: 0;
 }
 .settings-v2-permissions-card {
-  border-radius: 8px;
+  container-type: inline-size;
+  min-width: 0;
+  border-radius: var(--radius-lg);
   background-color: var(--v2-background-bg-layer-01);
-  padding: 16px 20px;
-  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+  padding: var(--space-4);
+  box-shadow: inset 0 0 0 var(--border-width) var(--v2-border-border-muted);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-4);
 }
 .settings-v2-permissions-card-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-2) var(--space-3);
 }
 .settings-v2-permissions-card-title-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
-  flex: 1;
+  gap: var(--space-2);
+  flex: 1 1 auto;
   min-width: 0;
 }
 .settings-v2-permissions-card-title {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: var(--font-size-base, 14px);
+  font-weight: var(--font-weight-emphasis);
   color: var(--v2-text-text-base);
   margin: 0;
 }
 .settings-v2-permissions-badge {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .settings-v2-permissions-card-actions {
   display: flex;
-  gap: 4px;
+  gap: var(--space-1);
   flex-shrink: 0;
+  margin-left: auto;
 }
+
+/* ── directory × action matrix ── */
 .settings-v2-permissions-matrix {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-}
-.settings-v2-permissions-matrix-header,
-.settings-v2-permissions-matrix-row {
-  display: grid;
-  grid-template-columns: 1fr 90px 90px 90px 90px 32px;
-  gap: 8px;
-  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
 }
 .settings-v2-permissions-matrix-header {
-  font-size: 11px;
-  font-weight: 600;
+  display: none; /* table mode only — see the container query below */
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-emphasis);
   color: var(--v2-text-text-faint);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
-.settings-v2-permissions-matrix-corner {
-  font-size: 11px;
+.settings-v2-permissions-matrix-head {
+  text-align: center;
+}
+.settings-v2-permissions-matrix-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  grid-template-areas:
+    "pattern pattern remove"
+    "read    write   ."
+    "execute network .";
+  gap: var(--space-2);
+  align-items: center;
+  min-width: 0;
+  padding-bottom: var(--space-3);
+  border-bottom: var(--border-width) solid var(--v2-border-border-muted);
+}
+.settings-v2-permissions-matrix-row:last-of-type {
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 .settings-v2-permissions-matrix-pattern {
-  font-size: 13px;
+  grid-area: pattern;
+  font-size: var(--font-size-md);
   font-family: var(--font-mono, monospace);
   color: var(--v2-text-text-base);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
-.settings-v2-permissions-matrix-head {
-  text-align: center;
+.settings-v2-permissions-matrix-remove {
+  grid-area: remove;
+}
+.settings-v2-permissions-matrix-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+.settings-v2-permissions-matrix-cell[data-group="read"] {
+  grid-area: read;
+}
+.settings-v2-permissions-matrix-cell[data-group="write"] {
+  grid-area: write;
+}
+.settings-v2-permissions-matrix-cell[data-group="execute"] {
+  grid-area: execute;
+}
+.settings-v2-permissions-matrix-cell[data-group="network"] {
+  grid-area: network;
+}
+.settings-v2-permissions-matrix-cell-label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-emphasis);
+  color: var(--v2-text-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .settings-v2-permissions-select {
   width: 100%;
-  padding: 4px 6px;
-  border-radius: 6px;
-  border: 0.5px solid var(--v2-border-border-base);
+  min-width: 0;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid var(--v2-border-border-base);
   background: var(--v2-background-bg-base);
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--v2-text-text-base);
+  cursor: pointer;
+}
+.settings-v2-permissions-select:hover {
+  border-color: var(--v2-border-border-strong);
+}
+.settings-v2-permissions-select:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
 }
 .settings-v2-permissions-select--danger {
   border-color: var(--v2-state-fg-danger);
@@ -823,99 +887,141 @@
   color: var(--v2-state-fg-danger);
 }
 .settings-v2-permissions-matrix-help {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--v2-text-text-faint);
   margin: 0;
 }
+
+/* table mode: five columns once the card can actually hold them */
+@container (min-width: 540px) {
+  .settings-v2-permissions-matrix {
+    gap: var(--space-2);
+  }
+  .settings-v2-permissions-matrix-header,
+  .settings-v2-permissions-matrix-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) repeat(4, minmax(84px, 112px)) 28px;
+    grid-template-areas: none;
+    gap: var(--space-2);
+    align-items: center;
+  }
+  .settings-v2-permissions-matrix-row {
+    padding-bottom: 0;
+    border-bottom: 0;
+  }
+  .settings-v2-permissions-matrix-pattern,
+  .settings-v2-permissions-matrix-remove,
+  .settings-v2-permissions-matrix-cell[data-group] {
+    grid-area: auto;
+  }
+  /* the header row carries the column names; keep the per-cell label for
+     assistive tech only */
+  .settings-v2-permissions-matrix-cell-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* ── model assignment ── */
 .settings-v2-permissions-models {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 0.5px solid var(--v2-border-border-base);
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: var(--border-width) solid var(--v2-border-border-base);
+  min-width: 0;
 }
 .settings-v2-permissions-models-title {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-emphasis);
   color: var(--v2-text-text-base);
   margin: 0;
 }
 .settings-v2-permissions-models-empty {
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--v2-text-text-muted);
   margin: 0;
 }
 .settings-v2-permissions-models-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: var(--space-2);
 }
 .settings-v2-permissions-model-chip {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 999px;
+  gap: var(--space-2);
+  max-width: 100%;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-full);
   background: var(--v2-background-bg-layer-02);
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--v2-text-text-base);
-  border: 0.5px solid var(--v2-border-border-muted);
+  border: var(--border-width) solid var(--v2-border-border-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .settings-v2-permissions-model-remove {
   border: 0;
   background: transparent;
   color: var(--v2-text-text-muted);
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-sm);
 }
 .settings-v2-permissions-model-remove:hover {
   color: var(--v2-state-fg-danger);
 }
-.settings-v2-permissions-model-select {
-  max-width: 320px;
-  width: 100%;
-  padding: 6px 8px;
-  border-radius: 6px;
-  border: 0.5px solid var(--v2-border-border-base);
-  background: var(--v2-background-bg-base);
-  font-size: 12px;
+.settings-v2-permissions-model-remove:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
 }
 .settings-v2-permissions-models-hint {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--v2-text-text-faint);
 }
-[data-component="permissions-tab"] .settings-v2-permissions-select--danger {
-  box-shadow: 0 0 0 1px var(--v2-state-fg-danger);
-}
 .settings-v2-permissions-model-picker-help {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--v2-text-text-faint);
-  margin: 0 0 6px;
+  margin: 0 0 var(--space-2);
 }
 .settings-v2-permissions-model-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 6px;
+  gap: var(--space-1);
   max-height: 180px;
   overflow-y: auto;
-  padding: 8px;
-  border: 0.5px solid var(--v2-border-border-base);
-  border-radius: 6px;
+  padding: var(--space-2);
+  border: var(--border-width) solid var(--v2-border-border-base);
+  border-radius: var(--radius-md);
   background: var(--v2-background-bg-base);
+  min-width: 0;
 }
 .settings-v2-permissions-model-option {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
+  gap: var(--space-2);
+  font-size: var(--font-size-sm);
   color: var(--v2-text-text-base);
   cursor: pointer;
-  padding: 4px 6px;
-  border-radius: 4px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  min-width: 0;
 }
 .settings-v2-permissions-model-option:hover {
   background: var(--v2-background-bg-layer-02);
 }
+.settings-v2-permissions-model-option:focus-within {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -2px;
+}
 .settings-v2-permissions-model-option input[type="checkbox"] {
   flex-shrink: 0;
 }
diff --git a/packages/app/src/design-polish.css b/packages/app/src/design-polish.css
index 37a8b3237..a87626a55 100644
--- a/packages/app/src/design-polish.css
+++ b/packages/app/src/design-polish.css
@@ -129,6 +129,20 @@ button, [role="button"], a, input, textarea, [data-slot="card"] {
 [data-action="prompt-submit"] svg { color: var(--accent-ink) !important; }
 [data-action="prompt-submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
 
+/* accent tag (badge-v2 `variant="accent"`): the shared primitive paints
+   --v2-text-text-contrast over bg-accent, which on dark is LIGHT text on
+   yellow — the one pairing the accent law forbids. Ink on a yellow fill is
+   always near-black, both schemes. Chips never wrap: the label is a single
+   line or it isn't a chip. The element selector is deliberate: badge-v2.css
+   is injected when the component lazy-loads (AFTER this file), so an
+   equal-specificity rule here would lose the cascade. */
+span[data-component="tag"][data-variant="accent"] {
+  background: var(--accent);
+  color: var(--accent-ink);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* the rail: controls use the control corner */
 [data-component="sidebar-rail"] button,
 [data-component="chat-first-rail"] button { border-radius: var(--radius-md); }

From 6d61d46612942c7480040cadf4e87b6bcf78ca19 Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Fri, 21 Aug 2026 18:45:21 -0400
Subject: [PATCH 2/3] fix(settings): permissions matrix as settings rows,
 full-width card, real edit icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The tab body was nested INSIDE the sticky tab header, so tier cards got
  both paddings (80px a side) and sat inset from the intro text. Body is a
  sibling now, like the other tabs — the card takes the content width.
- Stacked mode is the Settings row idiom instead of a 2×2 form: each
  directory rule is a bordered group — pattern + remove as its heading, then
  Read / Write / Execute / Network rows with the inline SelectV2 the General
  tab uses. Native <select>s gone in both modes.
- Table mode (container ≥ 540px) uses the same inline selects, so the five
  columns fit at the dialog's normal width.
- Risky cells (execute / network = allow): value in the danger colour with a
  dotted underline, plus a "· risky" marker in stacked mode — colour isn't
  the only signal. Selector outranks select-v2's value-text rule, which
  lazy-loads after settings-v2.css.
- Rename used icon="pencil", which doesn't exist in the icon set — Icon
  falls back to "plus", hence the "+ Rename" in the screenshot. Now the
  real "edit" glyph, icon-only so the card header stays on one line.
---
 .../components/settings-v2/permissions.tsx    |  67 ++++++----
 .../components/settings-v2/settings-v2.css    | 115 ++++++++++--------
 2 files changed, 107 insertions(+), 75 deletions(-)

diff --git a/packages/app/src/components/settings-v2/permissions.tsx b/packages/app/src/components/settings-v2/permissions.tsx
index bcda1e1f3..bc56ae7a8 100644
--- a/packages/app/src/components/settings-v2/permissions.tsx
+++ b/packages/app/src/components/settings-v2/permissions.tsx
@@ -1,6 +1,7 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { showToast } from "@/utils/toast"
 import { createMemo, createSignal, For, Show, type Component } from "solid-js"
 import { useLanguage } from "@/context/language"
@@ -21,6 +22,8 @@ const DEFAULT_TIERS: TrustTier[] = [
 ]
 const DEFAULT_CONFIG: ProviderPermissionsConfig = { defaultTier: "unassigned", tiers: DEFAULT_TIERS, assignments: {} }
 
+const EFFECTS: Effect[] = ["allow", "deny", "ask"]
+const EFFECT_LABEL: Record<Effect, string> = { allow: "Allow", deny: "Deny", ask: "Ask" }
 const ACTION_GROUPS = ["read", "write", "execute", "network"] as const
 type ActionGroup = (typeof ACTION_GROUPS)[number]
 const GROUP_LABEL: Record<ActionGroup, string> = { read: "Read", write: "Write", execute: "Execute", network: "Network" }
@@ -182,16 +185,18 @@ export const SettingsPermissionsV2: Component = () => {
   const [editValue, setEditValue] = createSignal("")
 
   return (
-    <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-      <div class="settings-v2-tab-header-row">
-        <h2 class="settings-v2-tab-title">{language.t("settings.permissions.title") ?? "Permissions"}</h2>
-        <ButtonV2 size="small" variant="neutral" icon="plus" onClick={addTier}>
-          {language.t("settings.permissions.action.addTier") ?? "Add tier"}
-        </ButtonV2>
+    <>
+      <div class="settings-v2-tab-header settings-v2-tab-header--stacked settings-v2-permissions-header">
+        <div class="settings-v2-tab-header-row">
+          <h2 class="settings-v2-tab-title">{language.t("settings.permissions.title") ?? "Permissions"}</h2>
+          <ButtonV2 size="small" variant="neutral" icon="plus" onClick={addTier}>
+            {language.t("settings.permissions.action.addTier") ?? "Add tier"}
+          </ButtonV2>
+        </div>
+        <p class="settings-v2-permissions-intro">
+          {language.t("settings.permissions.description") ?? "Trust tiers control which directories and actions each model can access. Assigned models inherit their tier's matrix; unassigned models use Unassigned."}
+        </p>
       </div>
-      <p class="settings-v2-permissions-intro">
-        {language.t("settings.permissions.description") ?? "Trust tiers control which directories and actions each model can access. Assigned models inherit their tier's matrix; unassigned models use Unassigned."}
-      </p>
 
       <div class="settings-v2-tab-body settings-v2-permissions" data-component="permissions-tab">
         <For each={tiers()}>
@@ -216,9 +221,14 @@ export const SettingsPermissionsV2: Component = () => {
                             {summary()}
                           </Tag>
                           <Show when={!isUnassigned()}>
-                            <ButtonV2 size="small" variant="ghost-muted" icon="pencil" onClick={() => { setEditingLabel(tier.id); setEditValue(tier.label) }}>
-                              {language.t("common.rename") ?? "Rename"}
-                            </ButtonV2>
+                            <ButtonV2
+                              size="small"
+                              variant="ghost-muted"
+                              icon="edit"
+                              aria-label={language.t("common.rename") ?? "Rename"}
+                              title={language.t("common.rename") ?? "Rename"}
+                              onClick={() => { setEditingLabel(tier.id); setEditValue(tier.label) }}
+                            />
                           </Show>
                         </>
                       }
@@ -284,25 +294,27 @@ export const SettingsPermissionsV2: Component = () => {
                     <span class="settings-v2-permissions-matrix-head settings-v2-permissions-matrix-head-actions" />
                   </div>
                   <For each={Object.entries(tier.directories)}>{([pattern, perms]) => (
-                    <div class="settings-v2-permissions-matrix-row">
+                    <div class="settings-v2-permissions-rule">
                       <span class="settings-v2-permissions-matrix-pattern" title={pattern}>{pattern}</span>
                       <For each={ACTION_GROUPS}>{(group) => {
                         const effect = () => perms[group]
                         const isDanger = () => (group === "execute" || group === "network") && effect() === "allow"
                         return (
-                          <label class="settings-v2-permissions-matrix-cell" data-group={group}>
-                            <span class="settings-v2-permissions-matrix-cell-label">{GROUP_LABEL[group]}</span>
-                            <select
-                              value={effect()}
-                              title={GROUP_TOOLS[group]}
-                              onChange={(e) => updateDirectoryEffect(tier.id, pattern, group, e.currentTarget.value as Effect)}
-                              class={isDanger() ? "settings-v2-permissions-select settings-v2-permissions-select--danger" : "settings-v2-permissions-select"}
-                            >
-                              <option value="allow">Allow</option>
-                              <option value="deny">Deny</option>
-                              <option value="ask">Ask</option>
-                            </select>
-                          </label>
+                          <div class="settings-v2-permissions-matrix-cell" data-group={group} data-danger={isDanger() ? "" : undefined}>
+                            <span class="settings-v2-permissions-matrix-cell-label" title={GROUP_TOOLS[group]}>
+                              {GROUP_LABEL[group]}
+                            </span>
+                            <SelectV2
+                              appearance="inline"
+                              options={EFFECTS}
+                              current={effect()}
+                              placement="bottom-end"
+                              gutter={6}
+                              label={(o) => EFFECT_LABEL[o]}
+                              valueClass={isDanger() ? "settings-v2-permissions-effect--danger" : undefined}
+                              onSelect={(o) => o && updateDirectoryEffect(tier.id, pattern, group, o)}
+                            />
+                          </div>
                         )
                       }}</For>
                       <ButtonV2
@@ -311,6 +323,7 @@ export const SettingsPermissionsV2: Component = () => {
                         icon="xmark-small"
                         class="settings-v2-permissions-matrix-remove"
                         aria-label={`Remove rule ${pattern}`}
+                        title="Remove rule"
                         disabled={pattern === "**"}
                         onClick={() => removeDirectoryRule(tier.id, pattern)}
                       />
@@ -370,6 +383,6 @@ export const SettingsPermissionsV2: Component = () => {
           }}
         </For>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index 02a33b9a0..2359f8d84 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -735,6 +735,10 @@
    labelled selects) because the settings dialog gives a tier card ~390px at
    a normal window, and the table layout only switches on once the card is
    wide enough to hold five columns. */
+.settings-v2-tab-header.settings-v2-permissions-header {
+  gap: var(--space-4);
+  padding-bottom: var(--space-6);
+}
 .settings-v2-permissions-intro {
   font-size: var(--font-size-md);
   font-weight: 400;
@@ -759,19 +763,22 @@
 }
 .settings-v2-permissions-card-header {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-2) var(--space-3);
+  gap: var(--space-3);
 }
 .settings-v2-permissions-card-title-row {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: var(--space-2);
   flex: 1 1 auto;
   min-width: 0;
 }
+.settings-v2-permissions-card-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .settings-v2-permissions-card-title {
   font-size: var(--font-size-base, 14px);
   font-weight: var(--font-weight-emphasis);
@@ -790,7 +797,11 @@
   margin-left: auto;
 }
 
-/* ── directory × action matrix ── */
+/* ── directory × action matrix ──
+   Stacked (default): each directory rule is a small settings list — the
+   pattern as its heading with the remove control, then one row per action
+   in the General-tab idiom (label left, inline select right). Table mode
+   (container ≥ 540px): header row + one grid row per pattern. */
 .settings-v2-permissions-matrix {
   display: flex;
   flex-direction: column;
@@ -806,24 +817,24 @@
   letter-spacing: 0.05em;
 }
 .settings-v2-permissions-matrix-head {
-  text-align: center;
+  text-align: right;
 }
-.settings-v2-permissions-matrix-row {
+.settings-v2-permissions-rule {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   grid-template-areas:
-    "pattern pattern remove"
-    "read    write   ."
-    "execute network .";
-  gap: var(--space-2);
+    "pattern remove"
+    "read    read"
+    "write   write"
+    "execute execute"
+    "network network";
+  column-gap: var(--space-2);
+  row-gap: 0;
   align-items: center;
   min-width: 0;
-  padding-bottom: var(--space-3);
-  border-bottom: var(--border-width) solid var(--v2-border-border-muted);
-}
-.settings-v2-permissions-matrix-row:last-of-type {
-  padding-bottom: 0;
-  border-bottom: 0;
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid var(--v2-border-border-muted);
+  padding: var(--space-1) var(--space-3);
 }
 .settings-v2-permissions-matrix-pattern {
   grid-area: pattern;
@@ -834,15 +845,19 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  padding-block: var(--space-2);
 }
 .settings-v2-permissions-matrix-remove {
   grid-area: remove;
 }
 .settings-v2-permissions-matrix-cell {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
   min-width: 0;
+  padding-block: var(--space-1);
+  border-top: var(--border-width) solid var(--v2-border-border-muted);
 }
 .settings-v2-permissions-matrix-cell[data-group="read"] {
   grid-area: read;
@@ -857,33 +872,24 @@
   grid-area: network;
 }
 .settings-v2-permissions-matrix-cell-label {
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-emphasis);
-  color: var(--v2-text-text-faint);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.settings-v2-permissions-select {
-  width: 100%;
-  min-width: 0;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-md);
-  border: var(--border-width) solid var(--v2-border-border-base);
-  background: var(--v2-background-bg-base);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
+  font-weight: 500;
   color: var(--v2-text-text-base);
-  cursor: pointer;
-}
-.settings-v2-permissions-select:hover {
-  border-color: var(--v2-border-border-strong);
+  cursor: default;
 }
-.settings-v2-permissions-select:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
+/* execute / network = allow is the risky cell: value reads in the danger
+   colour, and a small marker so colour isn't the only signal */
+/* outranks select-v2's own value-text rule (lazy-loaded after this file) */
+[data-component="select-v2"][data-appearance]
+  [data-slot="select-v2-value-text"].settings-v2-permissions-effect--danger {
+  color: var(--v2-state-fg-danger);
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
 }
-.settings-v2-permissions-select--danger {
-  border-color: var(--v2-state-fg-danger);
-  background: color-mix(in srgb, var(--v2-state-fg-danger) 8%, var(--v2-background-bg-base));
+.settings-v2-permissions-matrix-cell[data-danger] .settings-v2-permissions-matrix-cell-label::after {
+  content: " · risky";
+  font-size: var(--font-size-xs);
+  font-weight: 400;
   color: var(--v2-state-fg-danger);
 }
 .settings-v2-permissions-matrix-help {
@@ -898,22 +904,35 @@
     gap: var(--space-2);
   }
   .settings-v2-permissions-matrix-header,
-  .settings-v2-permissions-matrix-row {
+  .settings-v2-permissions-rule {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) repeat(4, minmax(84px, 112px)) 28px;
+    grid-template-columns: minmax(0, 1fr) repeat(4, minmax(72px, 96px)) 28px;
     grid-template-areas: none;
     gap: var(--space-2);
     align-items: center;
   }
-  .settings-v2-permissions-matrix-row {
-    padding-bottom: 0;
-    border-bottom: 0;
+  .settings-v2-permissions-rule {
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  .settings-v2-permissions-rule + .settings-v2-permissions-rule {
+    border-top: var(--border-width) solid var(--v2-border-border-muted);
+    padding-top: var(--space-2);
   }
   .settings-v2-permissions-matrix-pattern,
   .settings-v2-permissions-matrix-remove,
   .settings-v2-permissions-matrix-cell[data-group] {
     grid-area: auto;
   }
+  .settings-v2-permissions-matrix-pattern {
+    padding-block: 0;
+  }
+  .settings-v2-permissions-matrix-cell {
+    justify-content: flex-end;
+    border-top: 0;
+    padding-block: 0;
+  }
   /* the header row carries the column names; keep the per-cell label for
      assistive tech only */
   .settings-v2-permissions-matrix-cell-label {

From 5c38d13ad667963466e18b00326467b86d18a7e1 Mon Sep 17 00:00:00 2001
From: kate bonner <katebonner277@gmail.com>
Date: Sat, 22 Aug 2026 00:27:54 -0400
Subject: [PATCH 3/3] fix(settings): permissions tier = Everywhere defaults +
 folder exceptions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page presented a tier as a list of glob rules, with the default rule
shown as a literal "**" — nobody should need to know globs to read it, and
the only way to add an exception hardcoded src/private/** with no way to
ever edit the pattern.

- The ** rule renders as "Everywhere": its four rows sit directly in the
  card with no box, no glob, no remove control.
- Exceptions live under a "Folder exceptions" label, boxed (stacked) or as
  rows (table), each with a click-to-edit pattern (Enter/blur commits,
  Escape cancels; renames the key, refuses empty / "**" / duplicates) and
  a remove control.
- "Add folder exception" creates a unique folder/** rule and opens its
  pattern for editing immediately.
- Help copy now explains the model ("exceptions override the defaults for
  matching folders") instead of just listing glob syntax.
---
 .../components/settings-v2/permissions.tsx    | 161 +++++++++++++-----
 .../components/settings-v2/settings-v2.css    |  58 +++++++
 2 files changed, 176 insertions(+), 43 deletions(-)

diff --git a/packages/app/src/components/settings-v2/permissions.tsx b/packages/app/src/components/settings-v2/permissions.tsx
index bc56ae7a8..61dadf1f3 100644
--- a/packages/app/src/components/settings-v2/permissions.tsx
+++ b/packages/app/src/components/settings-v2/permissions.tsx
@@ -165,10 +165,26 @@ export const SettingsPermissionsV2: Component = () => {
   }
 
   const addDirectoryRule = (tierId: string) => {
-    const pattern = `src/private/**`
+    const tier = tiers().find((t) => t.id === tierId)
+    if (!tier) return
+    let pattern = "folder/**"
+    for (let n = 2; tier.directories[pattern]; n++) pattern = `folder-${n}/**`
+    updateTier(tierId, (t) => ({
+      ...t,
+      directories: { ...t.directories, [pattern]: { read: "deny", write: "deny", execute: "deny", network: "deny" } },
+    }))
+    setEditingPattern(`${tierId}:${pattern}`)
+    setPatternValue(pattern)
+  }
+
+  const renameDirectoryRule = (tierId: string, from: string, to: string) => {
+    const next = to.trim()
+    if (!next || next === from || next === "**") return
     updateTier(tierId, (t) => {
-      if (t.directories[pattern]) return t
-      return { ...t, directories: { ...t.directories, [pattern]: { read: "deny", write: "deny", execute: "deny", network: "deny" } } }
+      if (!t.directories[from] || t.directories[next]) return t
+      const directories: Record<string, DirectoryPermissions> = {}
+      for (const [k, v] of Object.entries(t.directories)) directories[k === from ? next : k] = v
+      return { ...t, directories }
     })
   }
 
@@ -183,6 +199,9 @@ export const SettingsPermissionsV2: Component = () => {
 
   const [editingLabel, setEditingLabel] = createSignal<string | null>(null)
   const [editValue, setEditValue] = createSignal("")
+  // exception pattern being edited, keyed `${tierId}:${pattern}`
+  const [editingPattern, setEditingPattern] = createSignal<string | null>(null)
+  const [patternValue, setPatternValue] = createSignal("")
 
   return (
     <>
@@ -204,6 +223,91 @@ export const SettingsPermissionsV2: Component = () => {
             const summary = () => tierSummary(tier)
             const isUnassigned = () => tier.id === "unassigned"
             const assignedModels = () => modelsByTier().get(tier.id) ?? []
+            const exceptions = () => Object.entries(tier.directories).filter(([p]) => p !== "**")
+
+            const renderRule = (t: TrustTier, pattern: string, perms: DirectoryPermissions) => {
+              const isDefault = pattern === "**"
+              const editKey = `${t.id}:${pattern}`
+              const commitPattern = () => {
+                renameDirectoryRule(t.id, pattern, patternValue())
+                setEditingPattern(null)
+              }
+              return (
+                <div class="settings-v2-permissions-rule" data-default={isDefault ? "" : undefined}>
+                  <Show
+                    when={isDefault}
+                    fallback={
+                      <Show
+                        when={editingPattern() === editKey}
+                        fallback={
+                          <button
+                            type="button"
+                            class="settings-v2-permissions-matrix-pattern"
+                            title="Edit pattern"
+                            onClick={() => { setEditingPattern(editKey); setPatternValue(pattern) }}
+                          >
+                            {pattern}
+                          </button>
+                        }
+                      >
+                        <TextInputV2
+                          class="settings-v2-permissions-pattern-input"
+                          value={patternValue()}
+                          placeholder="e.g. ~/secrets/**"
+                          onInput={(e) => setPatternValue(e.currentTarget.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") commitPattern()
+                            if (e.key === "Escape") setEditingPattern(null)
+                          }}
+                          onBlur={commitPattern}
+                          // eslint-disable-next-line jsx-a11y/no-autofocus
+                          autofocus
+                        />
+                      </Show>
+                    }
+                  >
+                    <span
+                      class="settings-v2-permissions-matrix-pattern settings-v2-permissions-matrix-pattern--default"
+                      title="Applies to every directory unless a folder exception matches"
+                    >
+                      Everywhere
+                    </span>
+                  </Show>
+                  <For each={ACTION_GROUPS}>{(group) => {
+                    const effect = () => perms[group]
+                    const isDanger = () => (group === "execute" || group === "network") && effect() === "allow"
+                    return (
+                      <div class="settings-v2-permissions-matrix-cell" data-group={group} data-danger={isDanger() ? "" : undefined}>
+                        <span class="settings-v2-permissions-matrix-cell-label" title={GROUP_TOOLS[group]}>
+                          {GROUP_LABEL[group]}
+                        </span>
+                        <SelectV2
+                          appearance="inline"
+                          options={EFFECTS}
+                          current={effect()}
+                          placement="bottom-end"
+                          gutter={6}
+                          label={(o) => EFFECT_LABEL[o]}
+                          valueClass={isDanger() ? "settings-v2-permissions-effect--danger" : undefined}
+                          onSelect={(o) => o && updateDirectoryEffect(t.id, pattern, group, o)}
+                        />
+                      </div>
+                    )
+                  }}</For>
+                  <Show when={!isDefault} fallback={<span class="settings-v2-permissions-matrix-remove" aria-hidden="true" />}>
+                    <ButtonV2
+                      size="small"
+                      variant="ghost-muted"
+                      icon="xmark-small"
+                      class="settings-v2-permissions-matrix-remove"
+                      aria-label={`Remove exception ${pattern}`}
+                      title="Remove exception"
+                      onClick={() => removeDirectoryRule(t.id, pattern)}
+                    />
+                  </Show>
+                </div>
+              )
+            }
             return (
               <div class="settings-v2-permissions-card" data-tier-id={tier.id}>
                 <div class="settings-v2-permissions-card-header">
@@ -282,7 +386,7 @@ export const SettingsPermissionsV2: Component = () => {
                   </div>
                 </div>
 
-                {/* Directory × Action Matrix */}
+                {/* Default permissions ("Everywhere" = the ** rule) + folder exceptions */}
                 <div class="settings-v2-permissions-matrix">
                   <div class="settings-v2-permissions-matrix-header" aria-hidden="true">
                     <span class="settings-v2-permissions-matrix-corner">Directory</span>
@@ -293,46 +397,17 @@ export const SettingsPermissionsV2: Component = () => {
                     )}</For>
                     <span class="settings-v2-permissions-matrix-head settings-v2-permissions-matrix-head-actions" />
                   </div>
-                  <For each={Object.entries(tier.directories)}>{([pattern, perms]) => (
-                    <div class="settings-v2-permissions-rule">
-                      <span class="settings-v2-permissions-matrix-pattern" title={pattern}>{pattern}</span>
-                      <For each={ACTION_GROUPS}>{(group) => {
-                        const effect = () => perms[group]
-                        const isDanger = () => (group === "execute" || group === "network") && effect() === "allow"
-                        return (
-                          <div class="settings-v2-permissions-matrix-cell" data-group={group} data-danger={isDanger() ? "" : undefined}>
-                            <span class="settings-v2-permissions-matrix-cell-label" title={GROUP_TOOLS[group]}>
-                              {GROUP_LABEL[group]}
-                            </span>
-                            <SelectV2
-                              appearance="inline"
-                              options={EFFECTS}
-                              current={effect()}
-                              placement="bottom-end"
-                              gutter={6}
-                              label={(o) => EFFECT_LABEL[o]}
-                              valueClass={isDanger() ? "settings-v2-permissions-effect--danger" : undefined}
-                              onSelect={(o) => o && updateDirectoryEffect(tier.id, pattern, group, o)}
-                            />
-                          </div>
-                        )
-                      }}</For>
-                      <ButtonV2
-                        size="small"
-                        variant="ghost-muted"
-                        icon="xmark-small"
-                        class="settings-v2-permissions-matrix-remove"
-                        aria-label={`Remove rule ${pattern}`}
-                        title="Remove rule"
-                        disabled={pattern === "**"}
-                        onClick={() => removeDirectoryRule(tier.id, pattern)}
-                      />
-                    </div>
-                  )}</For>
-                  <ButtonV2 size="small" variant="ghost-muted" onClick={() => addDirectoryRule(tier.id)}>
-                    + Add directory rule
+                  <Show when={tier.directories["**"]}>{(perms) => renderRule(tier, "**", perms())}</Show>
+                  <Show when={exceptions().length > 0}>
+                    <h5 class="settings-v2-permissions-group-label">Folder exceptions</h5>
+                    <For each={exceptions()}>{([pattern, perms]) => renderRule(tier, pattern, perms)}</For>
+                  </Show>
+                  <ButtonV2 size="small" variant="ghost-muted" icon="plus" onClick={() => addDirectoryRule(tier.id)}>
+                    Add folder exception
                   </ButtonV2>
-                  <p class="settings-v2-permissions-matrix-help">Glob patterns supported, e.g. ~/secrets/**, src/private/**. Most-specific pattern wins.</p>
+                  <p class="settings-v2-permissions-matrix-help">
+                    Exceptions override the defaults for matching folders. Glob patterns, e.g. ~/secrets/**, src/private/**. Most-specific pattern wins.
+                  </p>
                 </div>
 
                 {/* Model Assignment — multi-select picker inside tier card */}
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index 2359f8d84..a8e3c29bb 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -846,6 +846,54 @@
   white-space: nowrap;
   min-width: 0;
   padding-block: var(--space-2);
+  justify-self: start;
+  max-width: 100%;
+}
+/* exception patterns are click-to-edit */
+button.settings-v2-permissions-matrix-pattern {
+  border: 0;
+  background: transparent;
+  padding-inline: 0;
+  cursor: text;
+  text-align: left;
+  border-radius: var(--radius-sm);
+  text-decoration: underline dotted transparent;
+  text-underline-offset: 3px;
+  transition: text-decoration-color 0.16s ease;
+}
+button.settings-v2-permissions-matrix-pattern:hover {
+  text-decoration-color: var(--v2-text-text-muted);
+}
+button.settings-v2-permissions-matrix-pattern:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+.settings-v2-permissions-pattern-input {
+  grid-area: pattern;
+  font-family: var(--font-mono, monospace);
+  min-width: 0;
+}
+/* the ** rule reads as a plain label, not a glob */
+.settings-v2-permissions-matrix-pattern--default {
+  font-family: inherit;
+  font-weight: var(--font-weight-emphasis);
+}
+.settings-v2-permissions-group-label {
+  margin: var(--space-2) 0 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-emphasis);
+  color: var(--v2-text-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+/* the default rule sits directly in the card — no box, its rows are the
+   card's own rows; exceptions are boxed so they read as overrides */
+.settings-v2-permissions-rule[data-default] {
+  border: 0;
+  padding-inline: 0;
+}
+.settings-v2-permissions-rule[data-default] .settings-v2-permissions-matrix-remove {
+  display: none;
 }
 .settings-v2-permissions-matrix-remove {
   grid-area: remove;
@@ -920,6 +968,16 @@
     border-top: var(--border-width) solid var(--v2-border-border-muted);
     padding-top: var(--space-2);
   }
+  .settings-v2-permissions-rule[data-default] .settings-v2-permissions-matrix-remove {
+    display: block;
+    visibility: hidden;
+  }
+  .settings-v2-permissions-group-label {
+    margin-top: var(--space-1);
+  }
+  .settings-v2-permissions-pattern-input {
+    grid-area: auto;
+  }
   .settings-v2-permissions-matrix-pattern,
   .settings-v2-permissions-matrix-remove,
   .settings-v2-permissions-matrix-cell[data-group] {