tweak(ui): group edited files list styling

3 files changed, 113 insertions, 69 deletions

diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css
index 7395da1b1..79c62d334 100644
--- a/packages/ui/src/components/session-review.css
+++ b/packages/ui/src/components/session-review.css
@@ -68,7 +68,7 @@
   [data-slot="session-review-diffs-group"] {
     background-color: var(--background-stronger);
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-xs-border-base);
+    border: 1px solid var(--border-weak-base);
     overflow: clip;
 
     [data-component="accordion"] {
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index e7da2b6f0..9dbc1bf63 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -127,7 +127,49 @@
     padding-top: 8px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+  }
+
+  [data-slot="session-turn-diffs-group"] {
+    background-color: var(--background-stronger);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-weak-base);
+    overflow: clip;
+
+    [data-component="accordion"] {
+      gap: 0;
+    }
+
+    [data-component="accordion"]
+      [data-slot="accordion-item"]
+      [data-slot="accordion-header"]
+      [data-slot="accordion-trigger"] {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      background-color: transparent;
+
+      &:hover {
+        background-color: var(--surface-base-hover);
+      }
+
+      &:active {
+        background-color: var(--surface-base-active);
+      }
+    }
+
+    [data-component="accordion"]
+      [data-slot="accordion-item"]
+      + [data-slot="accordion-item"]
+      [data-slot="accordion-header"]
+      [data-slot="accordion-trigger"] {
+      border-top: 1px solid var(--border-weak-base);
+    }
+
+    [data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
+      border: 0;
+      border-top: 1px solid var(--border-weak-base);
+      border-radius: 0;
+    }
   }
 
   [data-slot="session-turn-diff-trigger"] {
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index a418fddd9..191daa1e3 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -315,76 +315,78 @@ export function SessionTurn(
                       <Collapsible.Content>
                         <Show when={open()}>
                           <div data-component="session-turn-diffs-content">
-                            <Accordion
-                              multiple
-                              value={expanded()}
-                              onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
-                            >
-                              <For each={diffs()}>
-                                {(diff) => {
-                                  const active = createMemo(() => expanded().includes(diff.file))
-                                  const [visible, setVisible] = createSignal(false)
-
-                                  createEffect(
-                                    on(
-                                      active,
-                                      (value) => {
-                                        if (!value) {
-                                          setVisible(false)
-                                          return
-                                        }
-
-                                        requestAnimationFrame(() => {
-                                          if (!active()) return
-                                          setVisible(true)
-                                        })
-                                      },
-                                      { defer: true },
-                                    ),
-                                  )
-
-                                  return (
-                                    <Accordion.Item value={diff.file}>
-                                      <Accordion.Header>
-                                        <Accordion.Trigger>
-                                          <div data-slot="session-turn-diff-trigger">
-                                            <span data-slot="session-turn-diff-path">
-                                              <Show when={diff.file.includes("/")}>
-                                                <span data-slot="session-turn-diff-directory">
-                                                  {getDirectory(diff.file)}
+                            <div data-slot="session-turn-diffs-group">
+                              <Accordion
+                                multiple
+                                value={expanded()}
+                                onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
+                              >
+                                <For each={diffs()}>
+                                  {(diff) => {
+                                    const active = createMemo(() => expanded().includes(diff.file))
+                                    const [visible, setVisible] = createSignal(false)
+
+                                    createEffect(
+                                      on(
+                                        active,
+                                        (value) => {
+                                          if (!value) {
+                                            setVisible(false)
+                                            return
+                                          }
+
+                                          requestAnimationFrame(() => {
+                                            if (!active()) return
+                                            setVisible(true)
+                                          })
+                                        },
+                                        { defer: true },
+                                      ),
+                                    )
+
+                                    return (
+                                      <Accordion.Item value={diff.file}>
+                                        <Accordion.Header>
+                                          <Accordion.Trigger>
+                                            <div data-slot="session-turn-diff-trigger">
+                                              <span data-slot="session-turn-diff-path">
+                                                <Show when={diff.file.includes("/")}>
+                                                  <span data-slot="session-turn-diff-directory">
+                                                    {getDirectory(diff.file)}
+                                                  </span>
+                                                </Show>
+                                                <span data-slot="session-turn-diff-filename">
+                                                  {getFilename(diff.file)}
                                                 </span>
-                                              </Show>
-                                              <span data-slot="session-turn-diff-filename">
-                                                {getFilename(diff.file)}
-                                              </span>
-                                            </span>
-                                            <div data-slot="session-turn-diff-meta">
-                                              <span data-slot="session-turn-diff-changes">
-                                                <DiffChanges changes={diff} />
-                                              </span>
-                                              <span data-slot="session-turn-diff-chevron">
-                                                <Icon name="chevron-down" size="small" />
                                               </span>
+                                              <div data-slot="session-turn-diff-meta">
+                                                <span data-slot="session-turn-diff-changes">
+                                                  <DiffChanges changes={diff} />
+                                                </span>
+                                                <span data-slot="session-turn-diff-chevron">
+                                                  <Icon name="chevron-down" size="small" />
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </Accordion.Trigger>
+                                        </Accordion.Header>
+                                        <Accordion.Content>
+                                          <Show when={visible()}>
+                                            <div data-slot="session-turn-diff-view" data-scrollable>
+                                              <Dynamic
+                                                component={diffComponent}
+                                                before={{ name: diff.file, contents: diff.before }}
+                                                after={{ name: diff.file, contents: diff.after }}
+                                              />
                                             </div>
-                                          </div>
-                                        </Accordion.Trigger>
-                                      </Accordion.Header>
-                                      <Accordion.Content>
-                                        <Show when={visible()}>
-                                          <div data-slot="session-turn-diff-view" data-scrollable>
-                                            <Dynamic
-                                              component={diffComponent}
-                                              before={{ name: diff.file, contents: diff.before }}
-                                              after={{ name: diff.file, contents: diff.after }}
-                                            />
-                                          </div>
-                                        </Show>
-                                      </Accordion.Content>
-                                    </Accordion.Item>
-                                  )
-                                }}
-                              </For>
-                            </Accordion>
+                                          </Show>
+                                        </Accordion.Content>
+                                      </Accordion.Item>
+                                    )
+                                  }}
+                                </For>
+                              </Accordion>
+                            </div>
                           </div>
                         </Show>
                       </Collapsible.Content>