style(design): /design-review fixes — FINDING-001..004

- Settings: format JSON config as readable key-value pairs instead of raw output
- Memory: warm empty state with icon and guidance copy
- Dashboard: epic card titles 14px→15px, weight 500→600 for hierarchy
- TaskSidebar: close button 26x26px → 44x44px (WCAG touch target)

Design audit: Design Score B, AI Slop Score A.
Responsive (mobile/tablet/desktop) is genuinely well-designed.

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

Author: z23cc

frontend/src/components/TaskSidebar.tsx

@@ -91,7 +91,8 @@ export default function TaskSidebar() {
           </h2>
           <button
             onClick={close}
-            className="p-1 rounded hover:bg-bg-tertiary text-text-muted hover:text-text-primary transition-colors"
+            aria-label="Close task details"
+            className="p-1 rounded hover:bg-bg-tertiary text-text-muted hover:text-text-primary transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
           >
             <X size={18} />
           </button>

frontend/src/pages/Dashboard.tsx

@@ -248,7 +248,7 @@ export default function Dashboard() {
                 className="block rounded-lg border border-border bg-bg-secondary p-4 hover:border-accent transition-colors"
               >
                 <div className="flex items-start justify-between gap-2 mb-3">
-                  <h3 className="text-sm font-medium truncate">{epic.title}</h3>
+                  <h3 className="text-[15px] font-semibold truncate">{epic.title}</h3>
                   <Badge status={epicStatusKey(epic.status)} label={epic.status.replace("_", " ")} />
                 </div>
                 <ProgressBar tasks={epic.tasks} />

frontend/src/pages/Memory.tsx

@@ -77,8 +77,15 @@ export default function Memory() {
       )}
 
       {!isLoading && entries.length === 0 && (
-        <div className="flex-1 flex items-center justify-center">
-          <p className="text-text-muted text-sm">No memory entries found.</p>
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center">
+          <div className="text-4xl opacity-40">🧠</div>
+          <p className="text-text-primary text-sm font-medium">
+            No memory entries yet
+          </p>
+          <p className="text-text-muted text-xs max-w-md">
+            Memory accumulates automatically as agents work. Lessons from
+            completed tasks, pitfalls, and conventions will appear here.
+          </p>
         </div>
       )}
 

frontend/src/pages/Settings.tsx

@@ -37,13 +37,32 @@ export default function Settings() {
               {entries.map(([key, value]) => (
                 <tr
                   key={key}
-                  className="border-t border-border bg-bg-secondary"
+                  className="border-t border-border bg-bg-secondary align-top"
                 >
-                  <td className="px-4 py-2 font-mono text-accent">{key}</td>
-                  <td className="px-4 py-2 text-text-primary">
-                    {typeof value === "object"
-                      ? JSON.stringify(value)
-                      : String(value)}
+                  <td className="px-4 py-3 font-mono text-accent whitespace-nowrap">
+                    {key}
+                  </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {typeof value === "object" && value !== null ? (
+                      <div className="flex flex-col gap-1 text-xs">
+                        {Object.entries(value as Record<string, unknown>).map(
+                          ([k, v]) => (
+                            <div key={k} className="flex gap-2">
+                              <span className="text-text-muted font-mono">
+                                {k}:
+                              </span>
+                              <span className="font-mono">
+                                {typeof v === "object"
+                                  ? JSON.stringify(v)
+                                  : String(v)}
+                              </span>
+                            </div>
+                          ),
+                        )}
+                      </div>
+                    ) : (
+                      <span className="font-mono text-xs">{String(value)}</span>
+                    )}
                   </td>
                 </tr>
               ))}