feat(design): the NavRail primitive with optional short labels, the flat surfaces onto roles (E28 S3d3, B7/B5)

frontend/src/components/IssueComposer.tsx

@@ -27,6 +27,7 @@ import { LoadingState, StateMessage } from "./ui/QueryState";
 import SegmentedToggle from "./ui/SegmentedToggle";
 import { Textarea, Input } from "./ui/Input";
 import { Checkbox } from "./ui/NativeControls";
+import { SURFACE } from "./ui/surfaces";
 
 // The issue composer (E16 S3, D4 A): one dialog — the draft on the left (title, description, the
 // steps drafted from the session, the environment), what goes with it on the right (the two logs,
@@ -627,7 +628,7 @@ function Attachments({
   const logRow = (source: Source, icon: React.ReactNode) => {
     const [kept, total] = counts[source];
     return (
-      <div className="flex items-center gap-3 rounded-xl border border-border bg-card/60 px-3 py-2.5">
+      <div className="flex items-center gap-3 rounded-lg border border-border px-3 py-2.5">
         {icon}
         <div className="flex min-w-0 flex-1 flex-col">
           <span className="text-sm">
@@ -657,7 +658,7 @@ function Attachments({
   };
 
   return (
-    <div className="flex flex-col gap-3 min-w-0 rounded-xl bg-surface/40 p-3 md:p-4">
+    <div className={`${SURFACE.card} flex flex-col gap-3 min-w-0 p-3 md:p-4`}>
       <div className="text-sm text-muted">{t("recorder.composer.attachments")}</div>
       {logRow("web", <FileText className="w-4.5 h-4.5 shrink-0 text-muted" aria-hidden />)}
       {logRow("server", <Server className="w-4.5 h-4.5 shrink-0 text-muted" aria-hidden />)}
@@ -669,7 +670,7 @@ function Attachments({
       {shots.map((shot, i) => (
         <div
           key={shot.id}
-          className="flex items-center gap-3 rounded-xl border border-border bg-card/60 px-3 py-2"
+          className="flex items-center gap-3 rounded-lg border border-border px-3 py-2"
         >
           <img
             src={api.debugScreenshotUrl(session.id, shot.id)}