diff --git a/packages/frontend/src/pages/CustomCommands.test.tsx b/packages/frontend/src/pages/CustomCommands.test.tsx
index 9e1165eaf..ac310cf5d 100644
--- a/packages/frontend/src/pages/CustomCommands.test.tsx
+++ b/packages/frontend/src/pages/CustomCommands.test.tsx
@@ -450,7 +450,7 @@ describe('CustomCommandsPage', () => {
 
         const coinflipCard = screen
             .getByText('/coinflip')
-            .closest('[class*="p-4"]')
+            .closest('[class*="surface-panel"]')
         expect(coinflipCard).toHaveClass('opacity-60')
     })
 
diff --git a/packages/frontend/src/pages/CustomCommands.tsx b/packages/frontend/src/pages/CustomCommands.tsx
index 1e6280575..f4b99412f 100644
--- a/packages/frontend/src/pages/CustomCommands.tsx
+++ b/packages/frontend/src/pages/CustomCommands.tsx
@@ -1,7 +1,5 @@
 import { useState, useEffect, useMemo } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Terminal, Search, X, Code } from 'lucide-react'
-import Card from '@/components/ui/Card'
+import { Search, X, Code, ChevronDown } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
@@ -30,9 +28,8 @@ export default function CustomCommandsPage() {
     const [commands, setCommands] = useState<Command[]>([])
     const [loading, setLoading] = useState(true)
     const [searchQuery, setSearchQuery] = useState('')
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(
-        null,
-    )
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+    const [expandedCommand, setExpandedCommand] = useState<string | null>(null)
 
     useEffect(() => {
         if (!selectedGuild?.id) return
@@ -53,9 +50,7 @@ export default function CustomCommandsPage() {
             const matchesSearch =
                 !searchQuery ||
                 cmd.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                cmd.description
-                    .toLowerCase()
-                    .includes(searchQuery.toLowerCase())
+                cmd.description.toLowerCase().includes(searchQuery.toLowerCase())
             const matchesCat =
                 !selectedCategory || cmd.category === selectedCategory
             return matchesSearch && matchesCat
@@ -79,7 +74,7 @@ export default function CustomCommandsPage() {
     if (!selectedGuild) {
         return (
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
-                <Terminal className='w-16 h-16 text-lucky-text-tertiary mb-4' />
+                <Code className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
                     No Server Selected
                 </h2>
@@ -92,6 +87,7 @@ export default function CustomCommandsPage() {
 
     return (
         <div className='space-y-6'>
+            {/* Header */}
             <header>
                 <h1 className='type-h1 text-lucky-text-primary'>
                     Custom Commands
@@ -101,38 +97,36 @@ export default function CustomCommandsPage() {
                 </p>
             </header>
 
-            {/* Filters */}
-            <Card className='p-4'>
-                <div className='flex flex-col sm:flex-row gap-3'>
-                    <div className='relative flex-1'>
-                        <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
-                        <Input
-                            placeholder='Search commands...'
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className='pl-9 bg-lucky-bg-tertiary border-lucky-border text-white placeholder:text-lucky-text-tertiary'
-                        />
-                        {searchQuery && (
-                            <button
-                                onClick={() => setSearchQuery('')}
-                                className='absolute right-3 top-1/2 -translate-y-1/2 text-lucky-text-tertiary hover:text-white'
-                            >
-                                <X className='w-4 h-4' />
-                            </button>
-                        )}
-                    </div>
+            {/* Search + Filters */}
+            <div className='surface-panel rounded-lg p-4 space-y-3 border border-lucky-border'>
+                <div className='relative'>
+                    <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
+                    <Input
+                        placeholder='Search commands...'
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className='pl-9 bg-lucky-bg-tertiary border-lucky-border text-lucky-text-primary placeholder:text-lucky-text-tertiary'
+                    />
+                    {searchQuery && (
+                        <button
+                            onClick={() => setSearchQuery('')}
+                            className='absolute right-3 top-1/2 -translate-y-1/2 text-lucky-text-tertiary hover:text-lucky-text-primary transition-colors'
+                        >
+                            <X className='w-4 h-4' />
+                        </button>
+                    )}
                 </div>
 
                 {/* Category chips */}
                 {categories.length > 0 && (
-                    <div className='flex flex-wrap gap-1.5 mt-3'>
+                    <div className='flex flex-wrap gap-2'>
                         <button
                             onClick={() => setSelectedCategory(null)}
                             className={cn(
-                                'px-2.5 py-1 rounded-full text-xs font-medium transition-all border',
+                                'px-3 py-1.5 rounded-full text-xs font-medium transition-all border',
                                 !selectedCategory
-                                    ? 'bg-lucky-red/15 text-lucky-red border-lucky-red/30'
-                                    : 'bg-lucky-bg-tertiary text-lucky-text-secondary border-lucky-border hover:text-white',
+                                    ? 'bg-lucky-red/20 text-lucky-red border-lucky-red/40'
+                                    : 'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border hover:bg-lucky-surface-elevated',
                             )}
                         >
                             All ({commands.length})
@@ -146,102 +140,110 @@ export default function CustomCommandsPage() {
                                     )
                                 }
                                 className={cn(
-                                    'px-2.5 py-1 rounded-full text-xs font-medium transition-all border',
+                                    'px-3 py-1.5 rounded-full text-xs font-medium transition-all border',
                                     selectedCategory === cat
                                         ? CATEGORY_COLORS[cat] ||
-                                              'bg-lucky-bg-active text-white border-lucky-border'
-                                        : 'bg-lucky-bg-tertiary text-lucky-text-secondary border-lucky-border hover:text-white',
+                                              'bg-lucky-brand/20 text-lucky-brand border-lucky-brand/40'
+                                        : 'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border hover:bg-lucky-surface-elevated',
                                 )}
                             >
-                                {cat} (
-                                {
-                                    commands.filter((c) => c.category === cat)
-                                        .length
-                                }
-                                )
+                                {cat} ({commands.filter((c) => c.category === cat).length})
                             </button>
                         ))}
                     </div>
                 )}
-            </Card>
+            </div>
 
-            {/* Commands Grid */}
-            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
+            {/* Commands List */}
+            <div className='space-y-1'>
                 {loading ? (
-                    Array.from({ length: 9 }).map((_, i) => (
-                        <Card key={i} className='p-4 space-y-3'>
-                            <div className='flex items-center gap-3'>
-                                <Skeleton className='w-8 h-8 rounded-lg' />
-                                <div className='flex-1'>
-                                    <Skeleton className='h-4 w-24 mb-1' />
-                                    <Skeleton className='h-3 w-16' />
-                                </div>
-                                <Skeleton className='w-10 h-5 rounded-full' />
+                    Array.from({ length: 6 }).map((_, i) => (
+                        <div
+                            key={i}
+                            className='surface-panel rounded-lg p-4 border border-lucky-border flex items-center gap-3'
+                        >
+                            <Skeleton className='w-8 h-8 rounded' />
+                            <div className='flex-1'>
+                                <Skeleton className='h-4 w-40 mb-2' />
+                                <Skeleton className='h-3 w-60' />
                             </div>
-                            <Skeleton className='h-3 w-full' />
-                        </Card>
+                            <Skeleton className='w-10 h-6 rounded' />
+                        </div>
                     ))
                 ) : filtered.length > 0 ? (
-                    <AnimatePresence mode='popLayout'>
-                        {filtered.map((cmd, i) => (
-                            <motion.div
-                                key={cmd.id}
-                                layout
-                                initial={{ opacity: 0, scale: 0.95 }}
-                                animate={{ opacity: 1, scale: 1 }}
-                                exit={{ opacity: 0, scale: 0.95 }}
-                                transition={{ duration: 0.15, delay: i * 0.02 }}
+                    filtered.map((cmd) => (
+                        <div
+                            key={cmd.id}
+                            className={cn(
+                                'surface-panel rounded-lg border border-lucky-border transition-all',
+                                !cmd.enabled && 'opacity-60',
+                            )}
+                        >
+                            {/* Row header */}
+                            <button
+                                onClick={() =>
+                                    setExpandedCommand(
+                                        expandedCommand === cmd.id ? null : cmd.id,
+                                    )
+                                }
+                                className='w-full px-4 py-3 flex items-center gap-3 hover:bg-lucky-surface-elevated transition-colors'
                             >
-                                <Card
-                                    className={cn(
-                                        'p-4 transition-all hover:border-lucky-border/80',
-                                        !cmd.enabled && 'opacity-60',
-                                    )}
-                                >
-                                    <div className='flex items-start gap-3'>
-                                        <div className='p-2 rounded-lg bg-lucky-bg-active shrink-0'>
-                                            <Code className='w-4 h-4 text-lucky-text-secondary' />
-                                        </div>
-                                        <div className='flex-1 min-w-0'>
-                                            <div className='flex items-center gap-2'>
-                                                <h3 className='type-body-sm font-semibold text-lucky-text-primary truncate'>
-                                                    /{cmd.name}
-                                                </h3>
-                                                <Badge
-                                                    variant='outline'
-                                                    className={cn(
-                                                        'text-[9px] uppercase border',
-                                                        CATEGORY_COLORS[
-                                                            cmd.category
-                                                        ] ||
-                                                            'bg-lucky-bg-tertiary text-lucky-text-secondary border-lucky-border',
-                                                    )}
-                                                >
-                                                    {cmd.category}
-                                                </Badge>
-                                            </div>
-                                            <p className='text-xs text-lucky-text-tertiary mt-1 line-clamp-2'>
-                                                {cmd.description}
-                                            </p>
-                                        </div>
-                                        <Switch
-                                            checked={cmd.enabled}
-                                            onCheckedChange={() =>
-                                                handleToggle(cmd)
-                                            }
-                                        />
+                                <div className='p-2 rounded bg-lucky-bg-active shrink-0'>
+                                    <Code className='w-4 h-4 text-lucky-text-secondary' />
+                                </div>
+                                <div className='flex-1 min-w-0 text-left'>
+                                    <div className='flex items-center gap-2 mb-1'>
+                                        <h3 className='type-body-sm font-semibold text-lucky-text-primary truncate'>
+                                            /{cmd.name}
+                                        </h3>
+                                        <Badge
+                                            className={cn(
+                                                'text-[10px] uppercase border shrink-0',
+                                                CATEGORY_COLORS[cmd.category] ||
+                                                    'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border',
+                                            )}
+                                        >
+                                            {cmd.category}
+                                        </Badge>
                                     </div>
-                                </Card>
-                            </motion.div>
-                        ))}
-                    </AnimatePresence>
+                                    <p className='text-xs text-lucky-text-tertiary line-clamp-1'>
+                                        {cmd.description}
+                                    </p>
+                                </div>
+                                <div className='flex items-center gap-2 shrink-0'>
+                                    <Switch
+                                        checked={cmd.enabled}
+                                        onCheckedChange={() => handleToggle(cmd)}
+                                    />
+                                    <ChevronDown
+                                        className={cn(
+                                            'w-4 h-4 text-lucky-text-tertiary transition-transform',
+                                            expandedCommand === cmd.id && 'rotate-180',
+                                        )}
+                                    />
+                                </div>
+                            </button>
+
+                            {/* Expanded details */}
+                            {expandedCommand === cmd.id && (
+                                <div className='border-t border-lucky-border px-4 py-3 bg-lucky-bg-tertiary/30 text-xs text-lucky-text-secondary space-y-2'>
+                                    <div>
+                                        <p className='font-medium text-lucky-text-primary mb-1'>
+                                            Description
+                                        </p>
+                                        <p>{cmd.description}</p>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    ))
                 ) : (
-                    <div className='col-span-full py-16 text-center'>
-                        <Terminal className='w-12 h-12 text-lucky-text-tertiary mx-auto mb-3' />
-                        <p className='text-sm text-lucky-text-secondary'>
+                    <div className='surface-panel rounded-lg p-12 border border-lucky-border text-center'>
+                        <Code className='w-12 h-12 text-lucky-text-tertiary mx-auto mb-3' />
+                        <p className='text-sm text-lucky-text-secondary mb-1'>
                             No commands found
                         </p>
-                        <p className='text-xs text-lucky-text-tertiary mt-1'>
+                        <p className='text-xs text-lucky-text-tertiary'>
                             {searchQuery || selectedCategory
                                 ? 'Try adjusting your filters'
                                 : 'Commands will appear here'}
diff --git a/packages/frontend/src/pages/GuildAutomation.test.tsx b/packages/frontend/src/pages/GuildAutomation.test.tsx
index 2dd55f500..7f665100d 100644
--- a/packages/frontend/src/pages/GuildAutomation.test.tsx
+++ b/packages/frontend/src/pages/GuildAutomation.test.tsx
@@ -135,7 +135,7 @@ describe('GuildAutomation', () => {
 
         await waitFor(() => {
             expect(screen.getByText('Guild Automation')).toBeInTheDocument()
-            expect(screen.getByText('Automation Status')).toBeInTheDocument()
+            expect(screen.getByText(/Automation Status/)).toBeInTheDocument()
         })
     })
 
@@ -362,7 +362,7 @@ describe('GuildAutomation', () => {
 
         await waitFor(() => screen.getByText('Manifest'))
 
-        const expandButton = screen.getByText('Expand')
+        const expandButton = screen.getByRole('button', { name: /Expand/i })
         await user.click(expandButton)
 
         await waitFor(() => {
@@ -392,7 +392,7 @@ describe('GuildAutomation', () => {
 
         await waitFor(() => screen.getByText('Manifest'))
 
-        const expandButton = screen.getByText('Expand')
+        const expandButton = screen.getByRole('button', { name: /Expand/i })
         await user.click(expandButton)
 
         await waitFor(() => screen.getByText('Save Manifest'))
@@ -425,7 +425,7 @@ describe('GuildAutomation', () => {
 
         await waitFor(() => screen.getByText('Manifest'))
 
-        const expandButton = screen.getByText('Expand')
+        const expandButton = screen.getByRole('button', { name: /Expand/i })
         await user.click(expandButton)
 
         await waitFor(() => screen.getByText('Save Manifest'))
@@ -515,6 +515,7 @@ describe('GuildAutomation', () => {
     })
 
     test('displays error message in run card when error exists', async () => {
+        const user = userEvent.setup()
         const runWithError: AutomationRun = {
             ...mockRun,
             status: 'failed',
@@ -534,6 +535,15 @@ describe('GuildAutomation', () => {
             </MemoryRouter>,
         )
 
+        // Wait for the run card to render
+        await waitFor(() => {
+            expect(screen.getByText('plan')).toBeInTheDocument()
+        })
+
+        // Expand the run card to show the error message
+        const runCard = screen.getByText('plan').closest('button')
+        await user.click(runCard!)
+
         await waitFor(() => {
             expect(
                 screen.getByText('Failed to create role: permission denied'),
@@ -556,7 +566,7 @@ describe('GuildAutomation', () => {
             </MemoryRouter>,
         )
 
-        await waitFor(() => screen.getByText('Automation Status'))
+        await waitFor(() => screen.getByText(/Automation Status/))
 
         vi.clearAllMocks()
 
@@ -612,7 +622,7 @@ describe('GuildAutomation', () => {
 
         await waitFor(() => screen.getByText('Manifest'))
 
-        const expandButton = screen.getByText('Expand')
+        const expandButton = screen.getByRole('button', { name: /Expand/i })
         await user.click(expandButton)
 
         await waitFor(() => {
diff --git a/packages/frontend/src/pages/GuildAutomation.tsx b/packages/frontend/src/pages/GuildAutomation.tsx
index e7c5a66d7..88256c997 100644
--- a/packages/frontend/src/pages/GuildAutomation.tsx
+++ b/packages/frontend/src/pages/GuildAutomation.tsx
@@ -1,5 +1,4 @@
 import { useState, useCallback, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
 import {
     GitBranch,
     Play,
@@ -16,7 +15,6 @@ import {
 } from 'lucide-react'
 import { useGuildStore } from '@/stores/guildStore'
 import { api } from '@/services/api'
-import Card from '@/components/ui/Card'
 import Button from '@/components/ui/Button'
 import EmptyState from '@/components/ui/EmptyState'
 import SectionHeader from '@/components/ui/SectionHeader'
@@ -66,46 +64,45 @@ function RunCard({ run }: { run: AutomationRun }) {
     const [expanded, setExpanded] = useState(false)
     const date = new Date(run.createdAt).toLocaleString()
     return (
-        <motion.div
-            layout
-            className='surface-panel rounded-lg p-4 space-y-2'
-        >
-            <div className='flex items-start justify-between gap-2'>
-                <div className='flex items-center gap-2'>
+        <div className='surface-panel rounded-lg border border-lucky-border overflow-hidden'>
+            <button
+                onClick={() => setExpanded(!expanded)}
+                className='w-full p-3 flex items-center justify-between gap-2 hover:bg-lucky-bg-active/30 transition-colors text-left'
+            >
+                <div className='flex items-center gap-2 min-w-0'>
                     <StatusIcon status={run.status} />
-                    <span className='text-sm font-medium text-lucky-text-strong capitalize'>{run.type}</span>
-                    <Badge className={`text-xs border ${statusColor(run.status)}`}>{run.status}</Badge>
+                    <span className='text-sm font-medium text-lucky-text-strong capitalize truncate'>
+                        {run.type}
+                    </span>
+                    <Badge className={`text-xs border flex-shrink-0 ${statusColor(run.status)}`}>
+                        {run.status}
+                    </Badge>
                 </div>
-                <div className='flex items-center gap-2'>
+                <div className='flex items-center gap-2 flex-shrink-0'>
                     <span className='text-xs text-lucky-text-muted'>{date}</span>
                     {run.summary && (
-                        <button
-                            onClick={() => setExpanded(!expanded)}
-                            className='text-lucky-text-muted hover:text-lucky-text-body'
-                        >
-                            {expanded ? <ChevronUp className='h-3 w-3' /> : <ChevronDown className='h-3 w-3' />}
-                        </button>
+                        expanded ? <ChevronUp className='h-4 w-4' /> : <ChevronDown className='h-4 w-4' />
                     )}
                 </div>
-            </div>
-            <AnimatePresence>
-                {expanded && run.summary && (
-                    <motion.div
-                        initial={{ height: 0, opacity: 0 }}
-                        animate={{ height: 'auto', opacity: 1 }}
-                        exit={{ height: 0, opacity: 0 }}
-                        className='overflow-hidden'
-                    >
-                        <p className='text-xs text-lucky-text-muted font-mono bg-lucky-bg-primary/60 rounded p-2 break-all'>
-                            {run.summary}
-                        </p>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-            {run.error && (
-                <p className='text-xs text-red-400 font-mono bg-red-500/5 rounded p-2 break-all'>{run.error}</p>
+            </button>
+            {expanded && (
+                <>
+                    <div className='border-t border-lucky-border' />
+                    <div className='p-3 space-y-2 bg-lucky-bg-active/20'>
+                        {run.summary && (
+                            <p className='text-xs text-lucky-text-muted font-mono bg-lucky-bg-primary/60 rounded p-2 break-all'>
+                                {run.summary}
+                            </p>
+                        )}
+                        {run.error && (
+                            <p className='text-xs text-red-400 font-mono bg-red-500/5 rounded p-2 break-all'>
+                                {run.error}
+                            </p>
+                        )}
+                    </div>
+                </>
             )}
-        </motion.div>
+        </div>
     )
 }
 
@@ -118,9 +115,17 @@ function PlanResultView({ result }: { result: PlanResult }) {
                     {result.changes.map((change, i) => (
                         <div
                             key={i}
-                            className='surface-panel rounded p-3 flex items-center gap-3'
+                            className='surface-panel rounded border border-lucky-border p-3 flex items-center gap-3'
                         >
-                            <Badge className={`text-xs border ${change.action === 'create' ? 'bg-green-500/10 text-green-400 border-green-500/20' : change.action === 'delete' ? 'bg-red-500/10 text-red-400 border-red-500/20' : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'}`}>
+                            <Badge
+                                className={`text-xs border flex-shrink-0 ${
+                                    change.action === 'create'
+                                        ? 'bg-green-500/10 text-green-400 border-green-500/20'
+                                        : change.action === 'delete'
+                                          ? 'bg-red-500/10 text-red-400 border-red-500/20'
+                                          : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'
+                                }`}
+                            >
                                 {change.action}
                             </Badge>
                             <span className='text-xs text-lucky-text-muted capitalize'>{change.type}</span>
@@ -140,9 +145,7 @@ function ApplyResultView({ result }: { result: ApplyResult }) {
         <div className='space-y-3'>
             <div className='flex gap-4'>
                 <span className='text-sm text-green-400'>{result.applied} applied</span>
-                {result.failed > 0 && (
-                    <span className='text-sm text-red-400'>{result.failed} failed</span>
-                )}
+                {result.failed > 0 && <span className='text-sm text-red-400'>{result.failed} failed</span>}
             </div>
             <p className='text-sm text-lucky-text-body'>{result.summary}</p>
             {result.changes.length > 0 && (
@@ -150,10 +153,12 @@ function ApplyResultView({ result }: { result: ApplyResult }) {
                     {result.changes.map((change, i) => (
                         <div
                             key={i}
-                            className='surface-panel rounded p-3 flex items-center gap-3'
+                            className='surface-panel rounded border border-lucky-border p-3 flex items-center gap-3'
                         >
                             <StatusIcon status={change.status} />
-                            <Badge className={`text-xs border ${statusColor(change.status)}`}>{change.status}</Badge>
+                            <Badge className={`text-xs border flex-shrink-0 ${statusColor(change.status)}`}>
+                                {change.status}
+                            </Badge>
                             <span className='text-xs text-lucky-text-muted capitalize'>{change.type}</span>
                             <span className='text-xs text-lucky-text-strong font-mono'>{change.resource}</span>
                             {change.error && (
@@ -295,9 +300,9 @@ export default function GuildAutomation() {
                 description='Manage your guild configuration as code — plan, apply, and track changes.'
             />
 
-            {/* Status + Actions */}
-            <Card className='p-5 space-y-4'>
-                <div className='flex items-center justify-between flex-wrap gap-3'>
+            {/* Status + Action Bar (Polaris structured actions) */}
+            <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-4'>
+                <div className='flex items-center justify-between'>
                     <div className='flex items-center gap-3'>
                         <h2 className='text-sm font-semibold text-lucky-text-strong'>Automation Status</h2>
                         {loading ? (
@@ -305,17 +310,21 @@ export default function GuildAutomation() {
                         ) : status ? (
                             <Badge className={`text-xs border ${statusColor(status)}`}>{status}</Badge>
                         ) : (
-                            <Badge className='text-xs border bg-lucky-bg-active/60 text-lucky-text-muted border-lucky-border'>unknown</Badge>
+                            <Badge className='text-xs border bg-lucky-bg-active/60 text-lucky-text-muted border-lucky-border'>
+                                unknown
+                            </Badge>
                         )}
                     </div>
                     <button
                         onClick={() => void fetchData()}
                         disabled={loading}
                         className='text-lucky-text-muted hover:text-lucky-text-body disabled:opacity-40 transition-colors'
+                        title='Refresh status'
                     >
                         <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
                     </button>
                 </div>
+                <div className='border-t border-lucky-border' />
                 <div className='flex flex-wrap gap-2'>
                     <Button
                         variant='secondary'
@@ -357,45 +366,37 @@ export default function GuildAutomation() {
                         Reconcile
                     </Button>
                 </div>
-            </Card>
+            </div>
 
-            {/* Plan / Apply Results */}
-            <AnimatePresence>
-                {planResult && (
-                    <motion.div
-                        initial={{ opacity: 0, y: 8 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: -8 }}
-                    >
-                        <Card className='p-5 space-y-3'>
-                            <div className='flex items-center gap-2'>
-                                <GitBranch className='h-4 w-4 text-lucky-brand' />
-                                <h2 className='text-sm font-semibold text-lucky-text-strong'>Plan Result</h2>
-                            </div>
-                            <PlanResultView result={planResult} />
-                        </Card>
-                    </motion.div>
-                )}
-                {applyResult && (
-                    <motion.div
-                        initial={{ opacity: 0, y: 8 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: -8 }}
-                    >
-                        <Card className='p-5 space-y-3'>
-                            <div className='flex items-center gap-2'>
-                                <Zap className='h-4 w-4 text-lucky-accent' />
-                                <h2 className='text-sm font-semibold text-lucky-text-strong'>Apply Result</h2>
-                            </div>
-                            <ApplyResultView result={applyResult} />
-                        </Card>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+            {/* Plan / Apply Results (surface-panel groups) */}
+            {planResult && (
+                <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-3'>
+                    <div className='flex items-center gap-2'>
+                        <GitBranch className='h-4 w-4 text-lucky-brand' />
+                        <h2 className='text-sm font-semibold text-lucky-text-strong'>Plan Result</h2>
+                    </div>
+                    <div className='border-t border-lucky-border' />
+                    <PlanResultView result={planResult} />
+                </div>
+            )}
+            {applyResult && (
+                <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-3'>
+                    <div className='flex items-center gap-2'>
+                        <Zap className='h-4 w-4 text-lucky-accent' />
+                        <h2 className='text-sm font-semibold text-lucky-text-strong'>Apply Result</h2>
+                    </div>
+                    <div className='border-t border-lucky-border' />
+                    <ApplyResultView result={applyResult} />
+                </div>
+            )}
 
-            {/* Manifest Editor */}
-            <Card className='p-5 space-y-4'>
-                <div className='flex items-center justify-between'>
+            {/* Manifest Editor (collapsible surface-panel) */}
+            <div className='surface-panel rounded-lg border border-lucky-border overflow-hidden'>
+                <button
+                    onClick={() => setManifestExpanded(!manifestExpanded)}
+                    aria-label='Expand'
+                    className='w-full p-4 flex items-center justify-between gap-2 hover:bg-lucky-bg-active/30 transition-colors text-left'
+                >
                     <div className='flex items-center gap-2'>
                         <FileJson className='h-4 w-4 text-lucky-brand' />
                         <h2 className='text-sm font-semibold text-lucky-text-strong'>Manifest</h2>
@@ -405,63 +406,59 @@ export default function GuildAutomation() {
                             </Badge>
                         )}
                     </div>
-                    <button
-                        onClick={() => setManifestExpanded(!manifestExpanded)}
-                        className='text-lucky-text-muted hover:text-lucky-text-body transition-colors text-xs flex items-center gap-1'
-                    >
-                        {manifestExpanded ? 'Collapse' : 'Expand'}
-                        {manifestExpanded ? <ChevronUp className='h-3 w-3' /> : <ChevronDown className='h-3 w-3' />}
-                    </button>
-                </div>
-                {loading ? (
-                    <Skeleton className='h-40 w-full rounded' />
-                ) : (
-                    <AnimatePresence initial={false}>
-                        {manifestExpanded && (
-                            <motion.div
-                                initial={{ height: 0, opacity: 0 }}
-                                animate={{ height: 'auto', opacity: 1 }}
-                                exit={{ height: 0, opacity: 0 }}
-                                className='overflow-hidden space-y-3'
-                            >
-                                {!manifest && (
-                                    <p className='text-sm text-lucky-text-muted flex items-center gap-2'>
-                                        <AlertTriangle className='h-4 w-4 text-yellow-400' />
-                                        No manifest found. Paste or write a manifest below to get started.
-                                    </p>
-                                )}
-                                <textarea
-                                    value={manifestJson}
-                                    onChange={(e) => setManifestJson(e.target.value)}
-                                    rows={16}
-                                    spellCheck={false}
-                                    className='w-full rounded-lg bg-lucky-bg-primary/80 border border-lucky-border text-lucky-text-body font-mono text-xs p-3 resize-y focus:outline-none focus:border-lucky-brand transition-colors'
-                                    placeholder='{ "guildId": "...", "version": "1", "roles": {}, "channels": {} }'
-                                />
-                                {manifestError && (
-                                    <p className='text-xs text-red-400 flex items-center gap-1'>
-                                        <XCircle className='h-3 w-3' />
-                                        {manifestError}
-                                    </p>
-                                )}
-                                <div className='flex gap-2'>
-                                    <Button
-                                        variant='primary'
-                                        size='sm'
-                                        onClick={() => void handleSaveManifest()}
-                                        disabled={actionLoading === 'save'}
-                                    >
-                                        {actionLoading === 'save' ? (
-                                            <Loader2 className='h-3 w-3 animate-spin' />
-                                        ) : null}
-                                        Save Manifest
-                                    </Button>
-                                </div>
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
+                    {manifestExpanded ? (
+                        <ChevronUp className='h-4 w-4' />
+                    ) : (
+                        <ChevronDown className='h-4 w-4' />
+                    )}
+                </button>
+                {manifestExpanded && (
+                    <>
+                        <div className='border-t border-lucky-border' />
+                        <div className='p-4 space-y-3 bg-lucky-bg-active/20'>
+                            {loading ? (
+                                <Skeleton className='h-40 w-full rounded' />
+                            ) : (
+                                <>
+                                    {!manifest && (
+                                        <p className='text-sm text-lucky-text-muted flex items-center gap-2'>
+                                            <AlertTriangle className='h-4 w-4 text-yellow-400' />
+                                            No manifest found. Paste or write a manifest below to get started.
+                                        </p>
+                                    )}
+                                    <textarea
+                                        value={manifestJson}
+                                        onChange={(e) => setManifestJson(e.target.value)}
+                                        rows={16}
+                                        spellCheck={false}
+                                        className='w-full rounded-lg bg-lucky-bg-primary/80 border border-lucky-border text-lucky-text-body font-mono text-xs p-3 resize-y focus:outline-none focus:border-lucky-brand transition-colors'
+                                        placeholder='{ "guildId": "...", "version": "1", "roles": {}, "channels": {} }'
+                                    />
+                                    {manifestError && (
+                                        <p className='text-xs text-red-400 flex items-center gap-1'>
+                                            <XCircle className='h-3 w-3' />
+                                            {manifestError}
+                                        </p>
+                                    )}
+                                    <div className='flex gap-2'>
+                                        <Button
+                                            variant='primary'
+                                            size='sm'
+                                            onClick={() => void handleSaveManifest()}
+                                            disabled={actionLoading === 'save'}
+                                        >
+                                            {actionLoading === 'save' ? (
+                                                <Loader2 className='h-3 w-3 animate-spin' />
+                                            ) : null}
+                                            Save Manifest
+                                        </Button>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </>
                 )}
-            </Card>
+            </div>
 
             {/* Run History */}
             <div className='space-y-3'>
@@ -480,11 +477,9 @@ export default function GuildAutomation() {
                     />
                 ) : (
                     <div className='space-y-2'>
-                        <AnimatePresence>
-                            {runs.map((run) => (
-                                <RunCard key={run.id} run={run} />
-                            ))}
-                        </AnimatePresence>
+                        {runs.map((run) => (
+                            <RunCard key={run.id} run={run} />
+                        ))}
                     </div>
                 )}
             </div>
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 8948c37f9..380d254fb 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,4 +1,5 @@
 export * from './config'
+export * from './constants'
 export * from './services'
 export * from './utils'
 export * from './types'