LOTS OF STYLING STUFF FINALLY THAT I HAD TO DO FINALYL AAUUFH

webui/src/components/AdminPanel/AdminIpLogPanel.jsx

@@ -1,15 +1,13 @@
 // Admin Ip Log Panel
 // Purpose: Defines the Admin Ip Log Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
+import CardFrame from '../CardFrame/index.jsx';
+
 export default function AdminIpLogPanel({ entries }) {
   const logs = entries || [];
   return (
-    <div className="panel-section space-y-0.5 text-base">
-      <div className="flex items-center justify-between text-sm text-slate-400">
-        <span>Admin IP log</span>
-        <span>{logs.length}</span>
-      </div>
-      <div className="surface h-64 overflow-y-auto font-mono text-xs">
+    <CardFrame title="Admin IP log" meta={logs.length} bodyClassName="space-y-0.5 text-base">
+      <div className="h-64 overflow-y-auto font-mono text-xs">
         {logs.length === 0 ? (
           <p>No admin log entries yet.</p>
         ) : (
@@ -17,7 +15,7 @@ export default function AdminIpLogPanel({ entries }) {
             .slice()
             .reverse()
             .map((entry) => (
-              <div key={entry.id} className="surface">
+              <div key={entry.id}>
                 <span className="text-amber-400">{entry.ts ? new Date(entry.ts).toLocaleTimeString() : '--'}</span>{' '}
                 {entry.label && <span className="text-teal-400">[{entry.label}]</span>}{' '}
                 <span className="text-slate-200">{entry.message}</span>{' '}
@@ -28,6 +26,6 @@ export default function AdminIpLogPanel({ entries }) {
         )}
       </div>
       <p className="text-xs text-slate-500">Admin-only log stream; IPs never appear in user data.</p>
-    </div>
+    </CardFrame>
   );
 }

webui/src/components/AdminPanel/AdminPanelContent.jsx

@@ -8,6 +8,7 @@ import LlmCommentaryPanel from './LlmCommentaryPanel.jsx';
 import OverseerControlPanel from './OverseerControlPanel.jsx';
 import ReplaySnapshotHealth from './ReplaySnapshotHealth.jsx';
 import AdminIpLogPanel from './AdminIpLogPanel.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 const MODES = [
   { key: 'open', label: 'Open' },
@@ -279,10 +280,7 @@ export default function AdminPanelContent() {
 
   if (!isAdmin) return null;
 
-  return (
-    <section className="panel-section space-y-0.5 text-base">
-      <div className="flex items-center justify-between gap-0.5 text-sm">
-        <span>Admin controls</span>
+  const actions = (
         <select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
           {MODES.map((mode) => (
             <option key={mode.key} value={mode.key}>
@@ -290,7 +288,10 @@ export default function AdminPanelContent() {
             </option>
           ))}
         </select>
-      </div>
+  );
+
+  return (
+    <CardFrame title="Admin controls" actions={actions} bodyClassName="space-y-0.5 text-base">
       <div className="flex gap-0.5 text-xs">
         <button
           type="button"
@@ -514,6 +515,6 @@ export default function AdminPanelContent() {
         clearingHistory={clearingOverseerHistory}
       />
       <AdminIpLogPanel entries={adminLogs} />
-    </section>
+    </CardFrame>
   );
 }