slackhive 0.1.41 → 0.1.43

package/apps/web/src/app/jobs/page.tsx

@@ -1,543 +0,0 @@
-'use client';
-
-/**
- * @fileoverview Scheduled jobs page — create, manage, and monitor recurring tasks.
- *
- * Jobs are executed by the boss agent on a cron schedule.
- * Results are posted to a Slack channel or DM.
- *
- * @module web/app/jobs
- */
-
-import React, { useEffect, useState } from 'react';
-import { useAuth } from '@/lib/auth-context';
-import { Portal } from '@/lib/portal';
-import { Hash, MessageSquare, CalendarClock } from 'lucide-react';
-
-interface JobRun {
-  id: string;
-  jobId: string;
-  startedAt: string;
-  finishedAt?: string;
-  status: 'running' | 'success' | 'error';
-  output?: string;
-  error?: string;
-}
-
-interface Job {
-  id: string;
-  agentId: string;
-  name: string;
-  prompt: string;
-  cronSchedule: string;
-  targetType: 'channel' | 'dm';
-  targetId: string;
-  enabled: boolean;
-  createdAt: string;
-  updatedAt: string;
-  lastRun?: JobRun;
-}
-
-const PRESETS = [
-  { label: 'Every hour', cron: '0 * * * *' },
-  { label: 'Every 6 hours', cron: '0 */6 * * *' },
-  { label: 'Daily at 8 AM', cron: '0 8 * * *' },
-  { label: 'Daily at 9 AM', cron: '0 9 * * *' },
-  { label: 'Mon-Fri at 9 AM', cron: '0 9 * * 1-5' },
-  { label: 'Weekly Mon 9 AM', cron: '0 9 * * 1' },
-];
-
-/**
- * Converts a cron expression to a human-readable string.
- * Simple implementation — covers common patterns.
- */
-function cronToHuman(cron: string): string {
-  const parts = cron.split(' ');
-  if (parts.length !== 5) return cron;
-  const [min, hour, dom, mon, dow] = parts;
-
-  if (min === '0' && hour === '*') return 'Every hour';
-  if (min === '0' && hour.startsWith('*/')) return `Every ${hour.slice(2)} hours`;
-  if (min === '0' && dow === '1-5' && dom === '*' && mon === '*') return `Weekdays at ${hour}:00`;
-  if (min === '0' && dow === '1' && dom === '*' && mon === '*') return `Mondays at ${hour}:00`;
-  if (min === '0' && dow === '*' && dom === '*' && mon === '*') return `Daily at ${hour}:00`;
-  if (dom !== '*' && mon === '*') return `Day ${dom} at ${hour}:${min.padStart(2, '0')}`;
-  return cron;
-}
-
-/**
- * Scheduled jobs management page.
- *
- * @returns {JSX.Element}
- */
-interface AgentOption { id: string; name: string; slug: string; isBoss: boolean; }
-
-export default function JobsPage() {
-  const { canEdit } = useAuth();
-  const [jobs, setJobs] = useState<Job[]>([]);
-  const [agents, setAgents] = useState<AgentOption[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [showForm, setShowForm] = useState(false);
-  const [editingJob, setEditingJob] = useState<Job | null>(null);
-  const [expandedRuns, setExpandedRuns] = useState<Set<string>>(new Set());
-  const [runs, setRuns] = useState<Record<string, JobRun[]>>({});
-
-  const load = () => {
-    setLoading(true);
-    Promise.all([
-      fetch('/api/jobs').then(r => r.json()),
-      fetch('/api/agents').then(r => r.json()),
-    ]).then(([j, a]) => { setJobs(j); setAgents(a); }).catch(() => {}).finally(() => setLoading(false));
-  };
-  useEffect(() => { load(); }, []);
-
-  const toggleRuns = async (jobId: string) => {
-    const next = new Set(expandedRuns);
-    if (next.has(jobId)) {
-      next.delete(jobId);
-    } else {
-      next.add(jobId);
-      if (!runs[jobId]) {
-        const r = await fetch(`/api/jobs/${jobId}/runs`);
-        const data = await r.json();
-        setRuns(prev => ({ ...prev, [jobId]: data }));
-      }
-    }
-    setExpandedRuns(next);
-  };
-
-  const toggleEnabled = async (job: Job) => {
-    await fetch(`/api/jobs/${job.id}`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ enabled: !job.enabled }),
-    });
-    load();
-  };
-
-  const deleteJob = async (job: Job) => {
-    if (!confirm(`Delete job "${job.name}"?`)) return;
-    await fetch(`/api/jobs/${job.id}`, { method: 'DELETE' });
-    load();
-  };
-
-  const openEdit = (job: Job) => { setEditingJob(job); setShowForm(true); };
-  const openCreate = () => { setEditingJob(null); setShowForm(true); };
-
-  return (
-    <div className="fade-up" style={{ padding: '36px 40px' }}>
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
-        <div>
-          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>
-            Scheduled Jobs
-          </h1>
-          <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--muted)' }}>
-            Recurring tasks executed by any agent on a cron schedule.
-          </p>
-        </div>
-        {canEdit && (
-          <button onClick={openCreate} style={{
-            display: 'inline-flex', alignItems: 'center', gap: 6,
-            background: 'var(--accent)', color: '#fff',
-            padding: '9px 18px', borderRadius: 8,
-            fontSize: 13, fontWeight: 500, border: 'none', cursor: 'pointer',
-            fontFamily: 'var(--font-sans)',
-          }}>
-            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
-              <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
-            </svg>
-            New Job
-          </button>
-        )}
-      </div>
-
-      {/* Job list */}
-      {loading ? (
-        <p style={{ color: 'var(--muted)', fontSize: 13 }}>Loading...</p>
-      ) : jobs.length === 0 ? (
-        <div style={{
-          textAlign: 'center', padding: '60px 20px',
-          border: '1px solid var(--border)', borderRadius: 12, background: '#fff',
-        }}>
-          <CalendarClock size={32} style={{ marginBottom: 12, color: 'var(--border-2)' }} />
-          <p style={{ margin: '0 0 4px', fontSize: 16, fontWeight: 600, color: 'var(--text)' }}>No scheduled jobs</p>
-          <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)', maxWidth: 300, marginInline: 'auto' }}>
-            {canEdit ? 'Create a recurring task for the boss agent to execute on a schedule.' : 'No jobs have been configured yet.'}
-          </p>
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {jobs.map(job => (
-            <div key={job.id} style={{
-              background: '#fff', border: '1px solid var(--border)',
-              borderRadius: 12, boxShadow: 'var(--shadow-sm)', overflow: 'hidden',
-            }}>
-              {/* Job row */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px' }}>
-                {/* Status indicator */}
-                <div style={{
-                  width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
-                  background: !job.enabled ? 'var(--border-2)'
-                    : job.lastRun?.status === 'error' ? '#dc2626'
-                    : job.lastRun?.status === 'success' ? '#059669'
-                    : job.lastRun?.status === 'running' ? '#2563eb'
-                    : 'var(--border-2)',
-                }} />
-
-                {/* Info */}
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>{job.name}</span>
-                    {!job.enabled && (
-                      <span style={{
-                        fontSize: 10, fontWeight: 600, color: 'var(--subtle)',
-                        background: 'var(--surface-2)', padding: '1px 6px', borderRadius: 4,
-                        textTransform: 'uppercase', letterSpacing: '0.04em',
-                      }}>Paused</span>
-                    )}
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                    <span>{cronToHuman(job.cronSchedule)}</span>
-                    {job.agentId && (() => {
-                      const a = agents.find(x => x.id === job.agentId);
-                      return a ? (
-                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: a.isBoss ? 'var(--accent)' : 'var(--muted)', display: 'inline-block' }} />
-                          {a.name}
-                        </span>
-                      ) : null;
-                    })()}
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
-                      {job.targetType === 'dm' ? <MessageSquare size={11} /> : <Hash size={11} />}
-                      {job.targetType === 'dm' ? 'DM' : 'Channel'}: <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{job.targetId}</code>
-                    </span>
-                  </div>
-                </div>
-
-                {/* Last run */}
-                <div style={{ textAlign: 'right', flexShrink: 0 }}>
-                  {job.lastRun ? (
-                    <>
-                      <div style={{
-                        fontSize: 11, fontWeight: 600,
-                        color: job.lastRun.status === 'success' ? '#059669'
-                          : job.lastRun.status === 'error' ? '#dc2626'
-                          : '#2563eb',
-                        textTransform: 'uppercase',
-                      }}>{job.lastRun.status}</div>
-                      <div style={{ fontSize: 11, color: 'var(--subtle)' }}>
-                        {new Date(job.lastRun.startedAt).toLocaleString()}
-                      </div>
-                    </>
-                  ) : (
-                    <div style={{ fontSize: 11, color: 'var(--subtle)' }}>Never run</div>
-                  )}
-                </div>
-
-                {/* Actions */}
-                <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
-                  {/* History toggle */}
-                  <button onClick={() => toggleRuns(job.id)} title="Run history" style={{
-                    background: 'none', border: '1px solid var(--border)', borderRadius: 6,
-                    width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    cursor: 'pointer', color: 'var(--muted)', transition: 'color 0.12s, border-color 0.12s',
-                  }}
-                    onMouseEnter={e => { (e.currentTarget as HTMLElement).style.color = 'var(--text)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--border-2)'; }}
-                    onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = 'var(--muted)'; (e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'; }}
-                  >
-                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
-                      <path d="M2 3h12M2 7h12M2 11h8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
-                    </svg>
-                  </button>
-                  {canEdit && (
-                    <>
-                      {/* Toggle enabled */}
-                      <button onClick={() => toggleEnabled(job)} title={job.enabled ? 'Pause' : 'Enable'} style={{
-                        background: 'none', border: '1px solid var(--border)', borderRadius: 6,
-                        width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        cursor: 'pointer', color: job.enabled ? '#059669' : 'var(--subtle)',
-                        transition: 'color 0.12s',
-                      }}>
-                        {job.enabled ? (
-                          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M6 3v10M10 3v10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
-                        ) : (
-                          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 3l9 5-9 5V3z" fill="currentColor"/></svg>
-                        )}
-                      </button>
-                      <button onClick={() => openEdit(job)} title="Edit" style={{
-                        background: 'none', border: '1px solid var(--border)', borderRadius: 6,
-                        width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        cursor: 'pointer', color: 'var(--muted)',
-                      }}>
-                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>
-                      </button>
-                      <button onClick={() => deleteJob(job)} title="Delete" style={{
-                        background: 'none', border: '1px solid var(--border)', borderRadius: 6,
-                        width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        cursor: 'pointer', color: '#dc2626', opacity: 0.6,
-                      }}>
-                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3 4h10M6 4V2h4v2M5 4v9h6V4" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/></svg>
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              {/* Prompt preview */}
-              <div style={{
-                padding: '0 20px 14px', fontSize: 12, color: 'var(--muted)',
-                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-              }}>
-                <span style={{ color: 'var(--subtle)', fontSize: 11 }}>Prompt:</span> {job.prompt}
-              </div>
-
-              {/* Run history (expanded) */}
-              {expandedRuns.has(job.id) && (
-                <div style={{ borderTop: '1px solid var(--border)', background: 'var(--surface-2)' }}>
-                  <div style={{ padding: '10px 20px', fontSize: 11, fontWeight: 600, color: 'var(--muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
-                    Run History
-                  </div>
-                  {(runs[job.id] ?? []).length === 0 ? (
-                    <div style={{ padding: '12px 20px', fontSize: 12, color: 'var(--subtle)' }}>No runs yet</div>
-                  ) : (
-                    (runs[job.id] ?? []).slice(0, 10).map(run => (
-                      <div key={run.id} style={{
-                        display: 'flex', alignItems: 'flex-start', gap: 10,
-                        padding: '10px 20px', borderTop: '1px solid var(--border)',
-                        fontSize: 12,
-                      }}>
-                        <div style={{
-                          width: 6, height: 6, borderRadius: '50%', marginTop: 5, flexShrink: 0,
-                          background: run.status === 'success' ? '#059669' : run.status === 'error' ? '#dc2626' : '#2563eb',
-                        }} />
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ display: 'flex', gap: 10, color: 'var(--muted)' }}>
-                            <span style={{
-                              fontWeight: 600, textTransform: 'uppercase',
-                              color: run.status === 'success' ? '#059669' : run.status === 'error' ? '#dc2626' : '#2563eb',
-                            }}>{run.status}</span>
-                            <span>{new Date(run.startedAt).toLocaleString()}</span>
-                            {run.finishedAt && (
-                              <span style={{ color: 'var(--subtle)' }}>
-                                ({Math.round((new Date(run.finishedAt).getTime() - new Date(run.startedAt).getTime()) / 1000)}s)
-                              </span>
-                            )}
-                          </div>
-                          {run.output && (
-                            <pre style={{
-                              margin: '4px 0 0', fontSize: 11, color: 'var(--text)',
-                              whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                              fontFamily: 'var(--font-mono)', maxHeight: 100, overflow: 'auto',
-                              background: '#fff', padding: '6px 8px', borderRadius: 6,
-                              border: '1px solid var(--border)',
-                            }}>{run.output.slice(0, 500)}</pre>
-                          )}
-                          {run.error && (
-                            <div style={{ margin: '4px 0 0', fontSize: 11, color: '#dc2626' }}>
-                              {run.error}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Create/edit modal */}
-      {showForm && (
-        <JobFormModal
-          job={editingJob}
-          agents={agents}
-          onClose={() => { setShowForm(false); setEditingJob(null); }}
-          onSaved={() => { setShowForm(false); setEditingJob(null); load(); }}
-        />
-      )}
-    </div>
-  );
-}
-
-// =============================================================================
-// Job form modal
-// =============================================================================
-
-function JobFormModal({ job, agents, onClose, onSaved }: {
-  job: Job | null; agents: AgentOption[]; onClose: () => void; onSaved: () => void;
-}) {
-  const isEdit = !!job;
-  const [agentId, setAgentId] = useState(job?.agentId ?? agents[0]?.id ?? '');
-  const [name, setName] = useState(job?.name ?? '');
-  const [prompt, setPrompt] = useState(job?.prompt ?? '');
-  const [cronSchedule, setCronSchedule] = useState(job?.cronSchedule ?? '0 8 * * *');
-  const [targetType, setTargetType] = useState<'channel' | 'dm'>(job?.targetType ?? 'channel');
-  const [targetId, setTargetId] = useState(job?.targetId ?? '');
-  const [enabled, setEnabled] = useState(job?.enabled ?? true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState('');
-
-  const save = async () => {
-    if (!agentId || !name || !prompt || !cronSchedule || !targetId) {
-      setError('All fields are required');
-      return;
-    }
-    setSaving(true);
-    setError('');
-    try {
-      const body = { agentId, name, prompt, cronSchedule, targetType, targetId, enabled };
-      const r = isEdit
-        ? await fetch(`/api/jobs/${job!.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-        : await fetch('/api/jobs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      if (!r.ok) {
-        const data = await r.json();
-        setError(data.error || 'Failed');
-        return;
-      }
-      onSaved();
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <Portal>
-    <div style={{
-      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
-      background: 'rgba(0,0,0,0.4)',
-      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
-      zIndex: 9999, padding: '40px 16px',
-      overflowY: 'auto',
-      backdropFilter: 'blur(2px)',
-    }}>
-      <div style={{
-        background: '#fff', borderRadius: 14, border: '1px solid var(--border)',
-        padding: 28, width: 480, maxWidth: '100%', boxShadow: 'var(--shadow-lg)',
-        display: 'flex', flexDirection: 'column', gap: 16,
-        flexShrink: 0,
-      }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--text)' }}>
-            {isEdit ? 'Edit Job' : 'New Scheduled Job'}
-          </h3>
-          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--muted)', fontSize: 18, cursor: 'pointer' }}>&times;</button>
-        </div>
-
-        {/* Agent */}
-        <div>
-          <label style={labelStyle}>Agent</label>
-          <select value={agentId} onChange={e => setAgentId(e.target.value)} style={inputStyle}>
-            {agents.length === 0 && <option value="">No agents available</option>}
-            {agents.map(a => (
-              <option key={a.id} value={a.id}>{a.name}{a.isBoss ? ' (Boss)' : ''}</option>
-            ))}
-          </select>
-          <p style={{ margin: '4px 0 0', fontSize: 11, color: 'var(--subtle)' }}>
-            The agent that will receive and execute this prompt.
-          </p>
-        </div>
-
-        {/* Name */}
-        <div>
-          <label style={labelStyle}>Name</label>
-          <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Daily Booking Report"
-            style={inputStyle} />
-        </div>
-
-        {/* Prompt */}
-        <div>
-          <label style={labelStyle}>Prompt</label>
-          <textarea value={prompt} onChange={e => setPrompt(e.target.value)}
-            placeholder="What should this agent do? e.g. Generate a summary of yesterday's bookings with key metrics"
-            rows={3} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'var(--font-sans)' }} />
-          <p style={{ margin: '4px 0 0', fontSize: 11, color: 'var(--subtle)' }}>
-            Sent to the agent on each scheduled run.
-          </p>
-        </div>
-
-        {/* Schedule */}
-        <div>
-          <label style={labelStyle}>Schedule</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
-            {PRESETS.map(p => (
-              <button key={p.cron} onClick={() => setCronSchedule(p.cron)}
-                style={{
-                  padding: '4px 10px', borderRadius: 6, fontSize: 11, fontWeight: 500,
-                  border: cronSchedule === p.cron ? '1px solid var(--accent)' : '1px solid var(--border)',
-                  background: cronSchedule === p.cron ? 'rgba(23,23,23,0.06)' : '#fff',
-                  color: cronSchedule === p.cron ? 'var(--text)' : 'var(--muted)',
-                  cursor: 'pointer', fontFamily: 'var(--font-sans)',
-                }}>{p.label}</button>
-            ))}
-          </div>
-          <input type="text" value={cronSchedule} onChange={e => setCronSchedule(e.target.value)}
-            placeholder="0 8 * * *" style={{ ...inputStyle, fontFamily: 'var(--font-mono)' }} />
-          <p style={{ margin: '4px 0 0', fontSize: 11, color: 'var(--subtle)' }}>
-            Cron expression: minute hour day month weekday — <span style={{ color: 'var(--text)' }}>{cronToHuman(cronSchedule)}</span>
-          </p>
-        </div>
-
-        {/* Target */}
-        <div>
-          <label style={labelStyle}>Deliver to</label>
-          <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-            {(['channel', 'dm'] as const).map(t => (
-              <label key={t} style={{
-                display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px',
-                border: targetType === t ? '1px solid var(--accent)' : '1px solid var(--border)',
-                borderRadius: 7, cursor: 'pointer', fontSize: 13,
-                background: targetType === t ? 'rgba(23,23,23,0.06)' : '#fff',
-                color: targetType === t ? 'var(--text)' : 'var(--muted)',
-              }}>
-                <input type="radio" name="targetType" checked={targetType === t} onChange={() => setTargetType(t)} style={{ display: 'none' }} />
-                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-                  {t === 'channel' ? <Hash size={13} /> : <MessageSquare size={13} />}
-                  {t === 'channel' ? 'Channel' : 'DM'}
-                </span>
-              </label>
-            ))}
-          </div>
-          <input type="text" value={targetId} onChange={e => setTargetId(e.target.value)}
-            placeholder={targetType === 'channel' ? 'Channel ID (e.g. C0ANTCQ918U)' : 'User ID (e.g. U095GQAM6PL)'}
-            style={inputStyle} />
-        </div>
-
-        {/* Enabled */}
-        <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
-          <input type="checkbox" checked={enabled} onChange={e => setEnabled(e.target.checked)}
-            style={{ accentColor: 'var(--accent)', width: 14, height: 14 }} />
-          <span style={{ fontSize: 13, color: 'var(--text)' }}>Enabled</span>
-        </label>
-
-        {error && <div style={{ fontSize: 12, color: '#dc2626', background: 'rgba(220,38,38,0.06)', padding: '6px 10px', borderRadius: 6 }}>{error}</div>}
-
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-          <button onClick={onClose} style={{
-            padding: '8px 16px', borderRadius: 7, border: '1px solid var(--border)',
-            background: '#fff', fontSize: 13, cursor: 'pointer', fontFamily: 'var(--font-sans)',
-          }}>Cancel</button>
-          <button onClick={save} disabled={saving} style={{
-            padding: '8px 18px', borderRadius: 7, border: 'none',
-            background: 'var(--accent)', color: '#fff', fontSize: 13, fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'var(--font-sans)',
-          }}>{saving ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Job'}</button>
-        </div>
-      </div>
-    </div>
-    </Portal>
-  );
-}
-
-const labelStyle: React.CSSProperties = {
-  display: 'block', fontSize: 12, fontWeight: 500, color: 'var(--muted)', marginBottom: 5,
-};
-
-const inputStyle: React.CSSProperties = {
-  width: '100%', padding: '8px 12px', borderRadius: 7,
-  border: '1px solid var(--border)', fontSize: 13, outline: 'none',
-  boxSizing: 'border-box' as const, fontFamily: 'var(--font-sans)',
-  color: 'var(--text)',
-};

package/apps/web/src/app/layout-shell.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-/**
- * @fileoverview Client layout shell — auth provider + responsive sidebar + main.
- *
- * On mobile (<768px), sidebar is hidden by default and shown as an overlay.
- * A hamburger button is shown in the top-left of the main area.
- *
- * @module web/app/layout-shell
- */
-
-import { useContext, useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import { Sidebar, SidebarContext } from './sidebar';
-import { AuthProvider } from '@/lib/auth-context';
-
-/**
- * Renders auth provider + sidebar + main content.
- * Login page gets no sidebar.
- *
- * @param {{ children: React.ReactNode }} props
- */
-export function LayoutShell({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-
-  if (pathname === '/login') {
-    return <>{children}</>;
-  }
-
-  return (
-    <AuthProvider>
-      <ResponsiveLayout>{children}</ResponsiveLayout>
-    </AuthProvider>
-  );
-}
-
-function ResponsiveLayout({ children }: { children: React.ReactNode }) {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const pathname = usePathname();
-
-  useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth <= 768);
-    check();
-    window.addEventListener('resize', check);
-    return () => window.removeEventListener('resize', check);
-  }, []);
-
-  // Close mobile sidebar on navigation
-  useEffect(() => { setMobileOpen(false); }, [pathname]);
-
-  return (
-    <Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)}>
-      <Main isMobile={isMobile} onHamburger={() => setMobileOpen(true)}>
-        {children}
-      </Main>
-    </Sidebar>
-  );
-}
-
-function Main({ children, isMobile, onHamburger }: { children: React.ReactNode; isMobile: boolean; onHamburger: () => void }) {
-  const { width } = useContext(SidebarContext);
-  return (
-    <main style={{
-      marginLeft: isMobile ? 0 : width,
-      transition: 'margin-left 0.25s cubic-bezier(0.16,1,0.3,1)',
-    }}>
-      {/* Mobile hamburger */}
-      {isMobile && (
-        <button
-          onClick={onHamburger}
-          style={{
-            position: 'fixed', top: 12, left: 12, zIndex: 48,
-            width: 36, height: 36, borderRadius: 8,
-            background: '#fff', border: '1px solid var(--border)',
-            boxShadow: 'var(--shadow-md)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', color: 'var(--text)',
-          }}
-        >
-          <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
-            <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
-          </svg>
-        </button>
-      )}
-      {children}
-    </main>
-  );
-}

package/apps/web/src/app/layout.tsx

@@ -1,18 +0,0 @@
-import type { Metadata } from 'next';
-import './globals.css';
-import { LayoutShell } from './layout-shell';
-
-export const metadata: Metadata = {
-  title: 'SlackHive',
-  description: 'Claude Code agent control plane',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body style={{ margin: 0 }}>
-        <LayoutShell>{children}</LayoutShell>
-      </body>
-    </html>
-  );
-}

package/apps/web/src/app/login/layout.tsx

@@ -1,9 +0,0 @@
-/**
- * @fileoverview Login layout — no sidebar, just centered content.
- *
- * @module web/app/login/layout
- */
-
-export default function LoginLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}