@pennyfarthing/cyclist 9.2.0 → 9.3.0

package/src/public/components/panels/AuditLogPanel.tsx

@@ -19,6 +19,18 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 // Types
 // =============================================================================
 
+interface DiffSummary {
+  added: number;
+  removed: number;
+}
+
+interface OutputSummary {
+  firstLines: string[];
+  lastLines: string[];
+  totalLines: number;
+  truncated: boolean;
+}
+
 interface ToolEvent {
   toolName: string;
   input?: string;
@@ -27,6 +39,23 @@ interface ToolEvent {
   success: boolean;
   error?: string;
   timestamp: number;
+  // File enrichment (Read/Edit/Write)
+  filePath?: string;
+  fileSize?: number;
+  lineCount?: number;
+  language?: string;
+  gitStatus?: 'clean' | 'modified' | 'new' | 'untracked' | null;
+  diff?: DiffSummary;
+  // Bash enrichment
+  command?: string;
+  exitCode?: number | null;
+  outputSummary?: OutputSummary;
+  workingDirectory?: string;
+  // Task enrichment
+  subagentType?: string;
+  promptSummary?: string;
+  resultSummary?: string;
+  isBackground?: boolean;
 }
 
 interface AuditLogStats {
@@ -56,6 +85,32 @@ function truncateInput(input: string | undefined, maxLength = 60): string {
   return input.substring(0, maxLength) + '...';
 }
 
+function formatBytes(bytes: number | undefined): string {
+  if (bytes === undefined) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatFilePath(path: string | undefined): string {
+  if (!path) return '';
+  // Show last 3 segments for brevity
+  const parts = path.split('/');
+  if (parts.length <= 3) return path;
+  return '.../' + parts.slice(-3).join('/');
+}
+
+/** Render enrichment detail rows as label/value pairs */
+function DetailRow({ label, value, mono }: { label: string; value: React.ReactNode; mono?: boolean }) {
+  if (value === undefined || value === null || value === '') return null;
+  return (
+    <div className="detail-row">
+      <span className="detail-label">{label}</span>
+      <span className={mono ? 'detail-value font-mono' : 'detail-value'}>{value}</span>
+    </div>
+  );
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -222,11 +277,10 @@ export function AuditLogPanel(): React.ReactElement {
       )}
 
       {/* Filters and Actions */}
-      <div className="audit-log-toolbar flex gap-2 p-2 items-center flex-wrap">
+      <div className="audit-log-toolbar flex p-2 items-center">
         <select
           value={selectedType}
           onChange={(e) => setSelectedType(e.target.value)}
-          className="audit-log-select px-2 py-1 bg-surface border border-border rounded text-sm"
         >
           <option value="">All Tools</option>
           {toolTypes.map(type => (
@@ -237,7 +291,6 @@ export function AuditLogPanel(): React.ReactElement {
         <select
           value={selectedStatus}
           onChange={(e) => setSelectedStatus(e.target.value)}
-          className="audit-log-select px-2 py-1 bg-surface border border-border rounded text-sm"
         >
           <option value="">All Status</option>
           <option value="success">Success</option>
@@ -248,12 +301,7 @@ export function AuditLogPanel(): React.ReactElement {
 
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handleExport('json')}
-              className="audit-log-btn px-2 py-1 bg-surface border border-border rounded text-sm hover:bg-hover"
-            >
+            <Button variant="ghost" size="sm" className="audit-log-btn" onClick={() => handleExport('json')}>
               JSON
             </Button>
           </TooltipTrigger>
@@ -261,12 +309,7 @@ export function AuditLogPanel(): React.ReactElement {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handleExport('csv')}
-              className="audit-log-btn px-2 py-1 bg-surface border border-border rounded text-sm hover:bg-hover"
-            >
+            <Button variant="ghost" size="sm" className="audit-log-btn" onClick={() => handleExport('csv')}>
               CSV
             </Button>
           </TooltipTrigger>
@@ -274,49 +317,41 @@ export function AuditLogPanel(): React.ReactElement {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={handleClear}
-              className="audit-log-btn px-2 py-1 bg-surface border border-error text-error rounded text-sm hover:bg-error hover:text-white"
-            >
+            <Button variant="ghost" size="sm" className="audit-log-btn audit-log-btn-clear" onClick={handleClear}>
               Clear
             </Button>
           </TooltipTrigger>
           <TooltipContent>Clear audit log</TooltipContent>
         </Tooltip>
       </div>
-      <Separator />
 
       {/* Entries List */}
       <ScrollArea className="audit-log-entries flex-1">
         {entries.length === 0 ? (
           <div className="p-4 text-muted text-center">No entries</div>
         ) : (
-          <table className="w-full text-sm">
-            <thead className="sticky top-0 bg-surface">
-              <tr className="border-b border-border">
-                <th className="p-2 text-left text-muted font-normal">Time</th>
-                <th className="p-2 text-left text-muted font-normal">Tool</th>
-                <th className="p-2 text-left text-muted font-normal">Input</th>
-                <th className="p-2 text-right text-muted font-normal">Duration</th>
-                <th className="p-2 text-center text-muted font-normal">Status</th>
+          <table>
+            <thead>
+              <tr>
+                <th className="text-left">Time</th>
+                <th className="text-left">Tool</th>
+                <th className="text-left">Input</th>
+                <th className="text-right">Duration</th>
+                <th className="text-center">Status</th>
               </tr>
             </thead>
             <tbody>
               {entries.map((entry, idx) => (
                 <React.Fragment key={`${entry.timestamp}-${idx}`}>
                   <tr
-                    className={`border-b border-border/50 hover:bg-hover cursor-pointer ${
-                      expandedEntry === idx ? 'bg-hover' : ''
-                    }`}
+                    className={expandedEntry === idx ? 'expanded' : ''}
                     onClick={() => setExpandedEntry(expandedEntry === idx ? null : idx)}
                   >
-                    <td className="p-2 text-muted whitespace-nowrap">
+                    <td className="whitespace-nowrap">
                       {formatTimestamp(entry.timestamp)}
                     </td>
-                    <td className="p-2 font-mono">{entry.toolName}</td>
-                    <td className="p-2 text-muted truncate max-w-[200px]">
+                    <td className="tool-name font-mono" data-tool={entry.toolName.toLowerCase()}>{entry.toolName}</td>
+                    <td className="truncate max-w-[200px]">
                       {entry.input ? (
                         <Tooltip>
                           <TooltipTrigger asChild>
@@ -328,16 +363,16 @@ export function AuditLogPanel(): React.ReactElement {
                         truncateInput(entry.input)
                       )}
                     </td>
-                    <td className="p-2 text-right text-muted whitespace-nowrap">
+                    <td className="text-right whitespace-nowrap">
                       {formatDuration(entry.durationMs)}
                     </td>
-                    <td className="p-2 text-center">
+                    <td className="text-center">
                       {entry.success ? (
-                        <span className="text-success">✓</span>
+                        <span className="status-ok">✓</span>
                       ) : (
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <span className="text-error">✗</span>
+                            <span className="status-err">✗</span>
                           </TooltipTrigger>
                           <TooltipContent>{entry.error}</TooltipContent>
                         </Tooltip>
@@ -345,35 +380,74 @@ export function AuditLogPanel(): React.ReactElement {
                     </td>
                   </tr>
                   {expandedEntry === idx && (
-                    <tr className="bg-surface-alt">
-                      <td colSpan={5} className="p-3">
-                        <div className="space-y-2 text-sm">
-                          {entry.input && (
-                            <div>
-                              <div className="text-muted text-xs mb-1">Input:</div>
-                              <pre className="bg-surface p-2 rounded overflow-x-auto max-h-32 text-xs">
-                                {entry.input}
-                              </pre>
-                            </div>
-                          )}
-                          {entry.output && (
-                            <div>
-                              <div className="text-muted text-xs mb-1">Output:</div>
-                              <pre className="bg-surface p-2 rounded overflow-x-auto max-h-32 text-xs">
-                                {entry.output.substring(0, 500)}
-                                {entry.output.length > 500 && '...'}
-                              </pre>
-                            </div>
+                    <tr className="expanded-detail">
+                      <td colSpan={5}>
+                        <div className="detail-grid">
+                          {/* Common fields */}
+                          <DetailRow label="Tool" value={entry.toolName} />
+                          <DetailRow label="Duration" value={entry.durationMs !== undefined ? formatDuration(entry.durationMs) : undefined} />
+                          {entry.exitCode !== undefined && entry.exitCode !== null && (
+                            <DetailRow label="Exit Code" value={entry.exitCode} mono />
                           )}
-                          {entry.error && (
-                            <div>
-                              <div className="text-error text-xs mb-1">Error:</div>
-                              <pre className="bg-surface p-2 rounded text-error text-xs">
-                                {entry.error}
-                              </pre>
-                            </div>
+
+                          {/* File enrichment (Read/Edit/Write) */}
+                          <DetailRow label="File" value={entry.filePath} mono />
+                          {entry.language && <DetailRow label="Language" value={entry.language} />}
+                          {entry.fileSize !== undefined && <DetailRow label="Size" value={formatBytes(entry.fileSize)} />}
+                          {entry.lineCount !== undefined && <DetailRow label="Lines" value={entry.lineCount.toLocaleString()} />}
+                          {entry.gitStatus && <DetailRow label="Git" value={entry.gitStatus} />}
+                          {entry.diff && (
+                            <DetailRow label="Diff" value={
+                              <span>
+                                <span style={{color: 'var(--success, #22c55e)'}}>+{entry.diff.added}</span>
+                                {' '}
+                                <span style={{color: 'var(--error, #ef4444)'}}>-{entry.diff.removed}</span>
+                              </span>
+                            } />
                           )}
+
+                          {/* Bash enrichment */}
+                          {entry.command && <DetailRow label="Command" value={entry.command} mono />}
+                          {entry.workingDirectory && <DetailRow label="CWD" value={formatFilePath(entry.workingDirectory)} mono />}
+
+                          {/* Task enrichment */}
+                          {entry.subagentType && <DetailRow label="Agent" value={entry.subagentType} />}
+                          {entry.isBackground && <DetailRow label="Background" value="Yes" />}
+                          {entry.promptSummary && <DetailRow label="Prompt" value={entry.promptSummary} />}
+                          {entry.resultSummary && <DetailRow label="Result" value={entry.resultSummary} />}
                         </div>
+
+                        {/* Output summary (Bash) */}
+                        {entry.outputSummary && entry.outputSummary.totalLines > 0 && (
+                          <div className="detail-output">
+                            <div className="detail-label">Output ({entry.outputSummary.totalLines} lines{entry.outputSummary.truncated ? ', truncated' : ''})</div>
+                            <pre>{entry.outputSummary.firstLines.join('\n')}{entry.outputSummary.truncated && entry.outputSummary.lastLines.length > 0 ? '\n...\n' + entry.outputSummary.lastLines.join('\n') : ''}</pre>
+                          </div>
+                        )}
+
+                        {/* Raw input (fallback when no enrichment) */}
+                        {entry.input && !entry.command && !entry.filePath && !entry.subagentType && (
+                          <div className="detail-output">
+                            <div className="detail-label">Input</div>
+                            <pre>{entry.input}</pre>
+                          </div>
+                        )}
+
+                        {/* Raw output (when no outputSummary) */}
+                        {entry.output && !entry.outputSummary && (
+                          <div className="detail-output">
+                            <div className="detail-label">Output</div>
+                            <pre>{entry.output.substring(0, 500)}{entry.output.length > 500 && '...'}</pre>
+                          </div>
+                        )}
+
+                        {/* Error */}
+                        {entry.error && (
+                          <div className="detail-output">
+                            <div className="detail-label status-err">Error</div>
+                            <pre className="status-err">{entry.error}</pre>
+                          </div>
+                        )}
                       </td>
                     </tr>
                   )}

package/src/public/components/panels/SettingsPanel.tsx

@@ -403,7 +403,7 @@ export function SettingsPanel(): React.ReactElement {
 
       <section className="settings-section">
         <h4>Workflow</h4>
-        <label className="toggle-setting">
+        <div className="toggle-setting">
           <Switch
             checked={settings.workflow?.bell_mode || false}
             onCheckedChange={(checked: boolean) => handleToggle('workflow', 'bell_mode', checked)}
@@ -411,8 +411,8 @@ export function SettingsPanel(): React.ReactElement {
           />
           Bell Mode
           <span className="setting-description">Inject queued messages via PostToolUse hook instead of waiting</span>
-        </label>
-        <label className="toggle-setting">
+        </div>
+        <div className="toggle-setting">
           <Switch
             checked={settings.workflow?.relay_mode || false}
             onCheckedChange={(checked: boolean) => handleToggle('workflow', 'relay_mode', checked)}
@@ -420,29 +420,29 @@ export function SettingsPanel(): React.ReactElement {
           />
           Relay Mode
           <span className="setting-description">Auto-handoff to next agent</span>
-        </label>
+        </div>
       </section>
 
       <Separator className="my-2" />
 
       <section className="settings-section">
         <h4>Notifications</h4>
-        <label className="toggle-setting">
+        <div className="toggle-setting">
           <Switch
             checked={settings.notifications?.phase_change || false}
             onCheckedChange={(checked: boolean) => handleToggle('notifications', 'phase_change', checked)}
             disabled={saving}
           />
           Phase change alerts
-        </label>
-        <label className="toggle-setting">
+        </div>
+        <div className="toggle-setting">
           <Switch
             checked={settings.notifications?.sound || false}
             onCheckedChange={(checked: boolean) => handleToggle('notifications', 'sound', checked)}
             disabled={saving}
           />
           Sound effects
-        </label>
+        </div>
       </section>
 
       <Separator className="my-2" />
@@ -456,7 +456,7 @@ export function SettingsPanel(): React.ReactElement {
             const displayName = PANEL_DISPLAY_NAMES[panelId] || panelId;
 
             return (
-              <label key={panelId} className="toggle-setting">
+              <div key={panelId} className="toggle-setting">
                 <Switch
                   checked={isVisible}
                   onCheckedChange={(checked: boolean) => handlePanelToggle(panelId, checked)}
@@ -466,7 +466,7 @@ export function SettingsPanel(): React.ReactElement {
                 {isProtected && (
                   <span className="setting-description">(always visible)</span>
                 )}
-              </label>
+              </div>
             );
           })}
         </div>

package/src/public/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "cyclist-switch peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "cyclist-switch-thumb pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

package/src/public/css/theme-system.css

@@ -438,11 +438,30 @@
   transition: transform 0.2s ease;
 }
 
-/* Tool count with status context */
-.tool-stack-count {
+/* Tool count - small de-emphasized badge */
+.tool-stack-count-badge {
   font-weight: 600;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  background-color: var(--bg-tertiary);
+  padding: 0.0625rem 0.375rem;
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  min-width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+/* Active tool summary - the main visual element while running */
+.tool-stack-active-summary {
+  font-weight: 500;
   font-size: 0.8125rem;
   color: var(--text-primary);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Mini tool badges in collapsed header */
@@ -472,10 +491,11 @@
 .tool-mini-badge.badge-edit { background-color: var(--tool-edit-color); }
 .tool-mini-badge.badge-task { background-color: var(--tool-task-color); }
 
-/* Summary in collapsed state */
+/* Summary in collapsed state - still prominent */
 .tool-stack-summary {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/public/styles/tailwind.css

@@ -1,6 +1,7 @@
 /* Tailwind CSS for Cyclist React components */
 
 @import "tailwindcss";
+@config "../../../tailwind.config.js";
 
 /* =============================================================================
    Docking Workspace Styles
@@ -2313,25 +2314,34 @@
 }
 
 .settings-panel .toggle-setting {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 36px 1fr;
   align-items: center;
-  gap: 8px;
-  padding: 6px 0;
+  gap: 4px 8px;
+  padding: 4px 0;
   font-size: 0.8rem;
   cursor: pointer;
 }
 
-.settings-panel .toggle-setting input {
-  accent-color: var(--accent-color, #007acc);
-}
-
 .settings-panel .setting-description {
-  width: 100%;
+  grid-column: 2;
   font-size: 0.7rem;
   color: var(--text-secondary, #8b8b8b);
-  margin-left: 24px;
-  margin-top: -4px;
+}
+
+/* Switch (Radix) - explicit colors since Tailwind v4 data-[state] variants don't generate */
+.cyclist-switch {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-color: var(--border-color, #3c3c3c);
+}
+
+.cyclist-switch[data-state="checked"] {
+  background: var(--accent, #4f46e5);
+  border-color: var(--accent, #4f46e5);
+}
+
+.cyclist-switch-thumb {
+  background: var(--text-primary, #e4e4e7);
 }
 
 /* ThemePalette in settings - ensure solid background for dropdown */
@@ -2339,6 +2349,177 @@
   background: var(--bg-secondary, #252526);
 }
 
+/* Audit Log panel - Tufte-inspired: maximize data-ink, minimize chrome */
+.audit-log-panel {
+  font-size: 0.8rem;
+}
+
+.audit-log-panel .audit-log-stats {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.audit-log-panel .audit-log-stats .text-success {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.audit-log-panel .audit-log-stats .text-error {
+  color: var(--error, #ef4444);
+}
+
+/* Only highlight error count when there are actual errors */
+.audit-log-panel .audit-log-stats .text-error:has(strong:empty),
+.audit-log-panel .audit-log-stats .text-error strong:only-child {
+  opacity: 0.6;
+}
+
+.audit-log-panel .audit-log-toolbar {
+  gap: 6px;
+}
+
+.audit-log-panel select {
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.75rem;
+}
+
+.audit-log-panel .audit-log-btn {
+  padding: 4px 10px !important;
+  background: transparent !important;
+  border: none !important;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.7rem;
+  font-weight: normal;
+  letter-spacing: 0.03em;
+  opacity: 0.7;
+}
+
+.audit-log-panel .audit-log-btn:hover {
+  background: var(--bg-tertiary, #2d2d2d) !important;
+  color: var(--text-primary, #d4d4d4);
+  opacity: 1;
+}
+
+.audit-log-panel .audit-log-btn-clear {
+  color: var(--error, #ef4444);
+  border-color: transparent !important;
+  background: transparent;
+  opacity: 0.6;
+}
+
+.audit-log-panel .audit-log-btn-clear:hover {
+  opacity: 1;
+  background: transparent;
+}
+
+.audit-log-panel table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.audit-log-panel thead th {
+  font-size: 0.65rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted, #666);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  padding: 6px 8px;
+  background: var(--bg-primary, #1e1e1e);
+}
+
+.audit-log-panel tbody tr {
+  border-bottom: none;
+}
+
+.audit-log-panel tbody td {
+  padding: 3px 8px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+}
+
+.audit-log-panel tbody tr:hover {
+  background: var(--bg-secondary, #252526);
+}
+
+.audit-log-panel tbody .tool-name {
+  font-weight: 500;
+}
+.audit-log-panel tbody .tool-name[data-tool="read"] { color: var(--tool-read-color, #3b82f6); }
+.audit-log-panel tbody .tool-name[data-tool="write"] { color: var(--tool-write-color, #f97316); }
+.audit-log-panel tbody .tool-name[data-tool="bash"] { color: var(--tool-bash-color, #22c55e); }
+.audit-log-panel tbody .tool-name[data-tool="glob"] { color: var(--tool-glob-color, #a855f7); }
+.audit-log-panel tbody .tool-name[data-tool="grep"] { color: var(--tool-grep-color, #06b6d4); }
+.audit-log-panel tbody .tool-name[data-tool="edit"] { color: var(--tool-edit-color, #eab308); }
+.audit-log-panel tbody .tool-name[data-tool="task"] { color: var(--tool-task-color, #ec4899); }
+.audit-log-panel tbody .tool-name[data-tool="skill"] { color: var(--text-secondary, #8b8b8b); }
+
+.audit-log-panel tbody .status-ok {
+  color: var(--success, #22c55e);
+  opacity: 0.4;
+}
+
+.audit-log-panel tbody .status-err {
+  color: var(--error, #ef4444);
+  opacity: 0.9;
+}
+
+.audit-log-panel .expanded-detail {
+  background: var(--bg-secondary, #252526);
+}
+
+.audit-log-panel .expanded-detail > td {
+  padding: 8px 12px !important;
+}
+
+.audit-log-panel .detail-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px 12px;
+  font-size: 0.72rem;
+}
+
+.audit-log-panel .detail-row {
+  display: contents;
+}
+
+.audit-log-panel .detail-label {
+  color: var(--text-muted, #666);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  padding: 1px 0;
+}
+
+.audit-log-panel .detail-value {
+  color: var(--text-primary, #d4d4d4);
+  word-break: break-all;
+  padding: 1px 0;
+}
+
+.audit-log-panel .detail-output {
+  margin-top: 6px;
+}
+
+.audit-log-panel .detail-output .detail-label {
+  margin-bottom: 3px;
+}
+
+.audit-log-panel .expanded-detail pre {
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 0.68rem;
+  overflow-x: auto;
+  max-height: 10rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0;
+}
+
 /* Changed panel (FileTree) */
 .changed-panel {
   display: flex;