Process 1 build 0703261729

frontend/app/globals.css

@@ -6558,3 +6558,222 @@ textarea {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+/* Portal */
+.portal-page {
+  display: grid;
+  gap: 16px;
+}
+
+.portal-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.portal-overview-card {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+  padding: 12px 14px;
+  display: grid;
+  gap: 4px;
+}
+
+.portal-overview-card span {
+  color: var(--muted);
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.portal-overview-card strong {
+  font-size: 1.25rem;
+  color: var(--text);
+}
+
+.portal-create-panel {
+  display: grid;
+  gap: 12px;
+}
+
+.portal-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.portal-field-span-2 {
+  grid-column: span 2;
+}
+
+.portal-toolbar {
+  display: grid;
+  grid-template-columns: 160px 180px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: end;
+}
+
+.portal-toolbar label span {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.portal-search-filter input {
+  width: 100%;
+}
+
+.portal-mine-toggle {
+  align-self: center;
+  margin-top: 20px;
+}
+
+.portal-workspace {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.portal-list-panel,
+.portal-detail-panel {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.portal-item-list {
+  display: grid;
+  gap: 10px;
+  max-height: 900px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.portal-item-row {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel-soft);
+  padding: 12px;
+  text-align: left;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.portal-item-row.is-active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px rgba(107, 146, 255, 0.25);
+}
+
+.portal-item-row-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.portal-item-row p {
+  margin: 8px 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.portal-item-row-meta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.portal-comments-block {
+  border-top: 1px solid var(--line);
+  padding-top: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.portal-comment-list {
+  display: grid;
+  gap: 8px;
+  max-height: 420px;
+  overflow: auto;
+  padding-right: 2px;
+}
+
+.portal-comment-card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: var(--panel-soft);
+}
+
+.portal-comment-card header {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.portal-comment-card p {
+  margin: 0;
+  color: var(--text);
+  white-space: pre-wrap;
+  line-height: 1.45;
+}
+
+.portal-comment-form {
+  display: grid;
+  gap: 10px;
+}
+
+@media (max-width: 1200px) {
+  .portal-overview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .portal-toolbar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .portal-search-filter,
+  .portal-mine-toggle {
+    grid-column: span 2;
+  }
+
+  .portal-mine-toggle {
+    margin-top: 0;
+  }
+
+  .portal-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .portal-item-list {
+    max-height: 460px;
+  }
+}
+
+@media (max-width: 760px) {
+  .portal-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .portal-field-span-2 {
+    grid-column: span 1;
+  }
+
+  .portal-overview-grid,
+  .portal-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .portal-search-filter,
+  .portal-mine-toggle {
+    grid-column: span 1;
+  }
+}

frontend/app/portal/page.tsx

@@ -0,0 +1,839 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+
+type PortalPermissions = {
+  can_edit?: boolean
+  can_comment?: boolean
+  can_moderate?: boolean
+}
+
+type PortalItem = {
+  id: number
+  kind: 'request' | 'issue' | 'feature'
+  title: string
+  description: string
+  media_type?: 'movie' | 'tv' | null
+  year?: number | null
+  external_ref?: string | null
+  source_system?: string | null
+  source_request_id?: number | null
+  status: string
+  priority: string
+  created_by_username: string
+  assignee_username?: string | null
+  created_at: string
+  updated_at: string
+  last_activity_at: string
+  permissions?: PortalPermissions
+}
+
+type PortalComment = {
+  id: number
+  item_id: number
+  author_username: string
+  author_role: string
+  message: string
+  is_internal: boolean
+  created_at: string
+}
+
+type PortalOverview = {
+  overview?: {
+    total_items?: number
+    total_comments?: number
+    by_kind?: Record<string, number>
+    by_status?: Record<string, number>
+  }
+  my_items?: number
+}
+
+type UserProfile = {
+  username: string
+  role: string
+}
+
+const KIND_OPTIONS = [
+  { value: 'request', label: 'Request' },
+  { value: 'issue', label: 'Issue' },
+  { value: 'feature', label: 'Feature' },
+] as const
+
+const STATUS_OPTIONS = [
+  { value: 'new', label: 'New' },
+  { value: 'triaging', label: 'Triaging' },
+  { value: 'planned', label: 'Planned' },
+  { value: 'in_progress', label: 'In progress' },
+  { value: 'blocked', label: 'Blocked' },
+  { value: 'done', label: 'Done' },
+  { value: 'declined', label: 'Declined' },
+  { value: 'closed', label: 'Closed' },
+] as const
+
+const PRIORITY_OPTIONS = [
+  { value: 'low', label: 'Low' },
+  { value: 'normal', label: 'Normal' },
+  { value: 'high', label: 'High' },
+  { value: 'urgent', label: 'Urgent' },
+] as const
+
+const MEDIA_TYPE_OPTIONS = [
+  { value: '', label: 'None' },
+  { value: 'movie', label: 'Movie' },
+  { value: 'tv', label: 'TV' },
+] as const
+
+const formatDate = (value?: string | null) => {
+  if (!value) return 'Never'
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.valueOf())) return value
+  return parsed.toLocaleString()
+}
+
+const toPositiveInt = (value: string) => {
+  const parsed = Number.parseInt(value, 10)
+  if (Number.isNaN(parsed) || parsed <= 0) return null
+  return parsed
+}
+
+export default function PortalPage() {
+  const router = useRouter()
+  const [me, setMe] = useState<UserProfile | null>(null)
+  const [overview, setOverview] = useState<PortalOverview | null>(null)
+  const [items, setItems] = useState<PortalItem[]>([])
+  const [selectedItemId, setSelectedItemId] = useState<number | null>(null)
+  const [selectedItem, setSelectedItem] = useState<PortalItem | null>(null)
+  const [comments, setComments] = useState<PortalComment[]>([])
+  const [loadingItems, setLoadingItems] = useState(true)
+  const [loadingItem, setLoadingItem] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [commenting, setCommenting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [status, setStatus] = useState<string | null>(null)
+  const [totalItems, setTotalItems] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+
+  const [filterKind, setFilterKind] = useState('')
+  const [filterStatus, setFilterStatus] = useState('')
+  const [filterMine, setFilterMine] = useState(false)
+  const [filterSearch, setFilterSearch] = useState('')
+
+  const [createKind, setCreateKind] = useState<'request' | 'issue' | 'feature'>('request')
+  const [createTitle, setCreateTitle] = useState('')
+  const [createDescription, setCreateDescription] = useState('')
+  const [createMediaType, setCreateMediaType] = useState('')
+  const [createYear, setCreateYear] = useState('')
+  const [createExternalRef, setCreateExternalRef] = useState('')
+  const [createPriority, setCreatePriority] = useState<'low' | 'normal' | 'high' | 'urgent'>('normal')
+
+  const [editTitle, setEditTitle] = useState('')
+  const [editDescription, setEditDescription] = useState('')
+  const [editMediaType, setEditMediaType] = useState('')
+  const [editYear, setEditYear] = useState('')
+  const [editExternalRef, setEditExternalRef] = useState('')
+  const [editStatus, setEditStatus] = useState('new')
+  const [editPriority, setEditPriority] = useState('normal')
+  const [editAssignee, setEditAssignee] = useState('')
+
+  const [commentText, setCommentText] = useState('')
+  const [commentInternal, setCommentInternal] = useState(false)
+  const [preselectedItemId, setPreselectedItemId] = useState<number | null>(null)
+
+  const isAdmin = me?.role === 'admin'
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const raw = new URLSearchParams(window.location.search).get('item')
+    if (!raw) {
+      setPreselectedItemId(null)
+      return
+    }
+    const parsed = Number.parseInt(raw, 10)
+    setPreselectedItemId(Number.isNaN(parsed) || parsed <= 0 ? null : parsed)
+  }, [])
+
+  const loadMe = async () => {
+    const baseUrl = getApiBase()
+    const response = await authFetch(`${baseUrl}/auth/me`)
+    if (!response.ok) {
+      if (response.status === 401) {
+        clearToken()
+        router.push('/login')
+        return null
+      }
+      throw new Error(`Failed to load session (${response.status})`)
+    }
+    const data = await response.json()
+    const profile: UserProfile = {
+      username: data?.username ?? 'unknown',
+      role: data?.role ?? 'user',
+    }
+    setMe(profile)
+    return profile
+  }
+
+  const loadOverview = async () => {
+    try {
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/portal/overview`)
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        throw new Error(`Failed to load portal overview (${response.status})`)
+      }
+      const data = await response.json()
+      setOverview(data)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  const loadItem = async (itemId: number) => {
+    setLoadingItem(true)
+    try {
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/portal/items/${itemId}`)
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        if (response.status === 404) {
+          setSelectedItem(null)
+          setComments([])
+          return
+        }
+        throw new Error(`Failed to load portal item (${response.status})`)
+      }
+      const data = await response.json()
+      const item = (data?.item ?? null) as PortalItem | null
+      setSelectedItem(item)
+      setComments(Array.isArray(data?.comments) ? data.comments : [])
+    } catch (err) {
+      console.error(err)
+      setError('Could not load portal item details.')
+    } finally {
+      setLoadingItem(false)
+    }
+  }
+
+  const loadItems = async (options?: { preferItemId?: number | null }) => {
+    setLoadingItems(true)
+    try {
+      const baseUrl = getApiBase()
+      const params = new URLSearchParams({
+        limit: '60',
+        offset: '0',
+      })
+      if (filterKind) params.set('kind', filterKind)
+      if (filterStatus) params.set('status', filterStatus)
+      if (filterMine) params.set('mine', '1')
+      const trimmedSearch = filterSearch.trim()
+      if (trimmedSearch) params.set('search', trimmedSearch)
+
+      const response = await authFetch(`${baseUrl}/portal/items?${params.toString()}`)
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        throw new Error(`Failed to load portal items (${response.status})`)
+      }
+      const data = await response.json()
+      const loadedItems = Array.isArray(data?.items) ? (data.items as PortalItem[]) : []
+      setItems(loadedItems)
+      setTotalItems(Number(data?.total ?? loadedItems.length ?? 0))
+      setHasMore(Boolean(data?.has_more))
+
+      const preferred = options?.preferItemId ?? selectedItemId ?? preselectedItemId
+      if (preferred && loadedItems.some((item) => item.id === preferred)) {
+        setSelectedItemId(preferred)
+      } else if (loadedItems.length > 0) {
+        setSelectedItemId(loadedItems[0].id)
+      } else {
+        setSelectedItemId(null)
+        setSelectedItem(null)
+        setComments([])
+      }
+    } catch (err) {
+      console.error(err)
+      setError('Could not load portal items.')
+    } finally {
+      setLoadingItems(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!getToken()) {
+      router.push('/login')
+      return
+    }
+    const bootstrap = async () => {
+      try {
+        setError(null)
+        await loadMe()
+        await Promise.all([loadOverview(), loadItems({ preferItemId: preselectedItemId })])
+      } catch (err) {
+        console.error(err)
+        setError('Could not load request portal.')
+      }
+    }
+    void bootstrap()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router])
+
+  useEffect(() => {
+    if (!getToken()) {
+      return
+    }
+    void loadItems({ preferItemId: preselectedItemId })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterKind, filterStatus, filterMine, filterSearch])
+
+  useEffect(() => {
+    if (selectedItemId == null) return
+    void loadItem(selectedItemId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedItemId])
+
+  useEffect(() => {
+    if (!selectedItem) return
+    setEditTitle(selectedItem.title ?? '')
+    setEditDescription(selectedItem.description ?? '')
+    setEditMediaType(selectedItem.media_type ?? '')
+    setEditYear(selectedItem.year == null ? '' : String(selectedItem.year))
+    setEditExternalRef(selectedItem.external_ref ?? '')
+    setEditStatus(selectedItem.status ?? 'new')
+    setEditPriority(selectedItem.priority ?? 'normal')
+    setEditAssignee(selectedItem.assignee_username ?? '')
+  }, [selectedItem])
+
+  const createItem = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setCreating(true)
+    setError(null)
+    setStatus(null)
+    try {
+      const payload: Record<string, any> = {
+        kind: createKind,
+        title: createTitle,
+        description: createDescription,
+        media_type: createMediaType || null,
+        year: createYear.trim() ? toPositiveInt(createYear) : null,
+        external_ref: createExternalRef || null,
+        priority: createPriority,
+      }
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/portal/items`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const text = await response.text()
+        throw new Error(text || 'Could not create portal item.')
+      }
+      const data = await response.json()
+      const item = data?.item as PortalItem | undefined
+      setStatus('Portal item created.')
+      setCreateTitle('')
+      setCreateDescription('')
+      setCreateMediaType('')
+      setCreateYear('')
+      setCreateExternalRef('')
+      setCreatePriority('normal')
+      await Promise.all([
+        loadItems({ preferItemId: item?.id ?? null }),
+        loadOverview(),
+      ])
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Could not create portal item.')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const saveItem = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!selectedItem) return
+    setSaving(true)
+    setError(null)
+    setStatus(null)
+    try {
+      const payload: Record<string, any> = {
+        title: editTitle,
+        description: editDescription,
+        media_type: editMediaType || null,
+        year: editYear.trim() ? toPositiveInt(editYear) : null,
+        external_ref: editExternalRef || null,
+      }
+      if (selectedItem.permissions?.can_moderate) {
+        payload.status = editStatus
+        payload.priority = editPriority
+        payload.assignee_username = editAssignee || null
+      }
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/portal/items/${selectedItem.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const text = await response.text()
+        throw new Error(text || 'Could not update portal item.')
+      }
+      const data = await response.json()
+      setSelectedItem((data?.item ?? null) as PortalItem | null)
+      setComments(Array.isArray(data?.comments) ? data.comments : [])
+      setStatus('Portal item updated.')
+      await Promise.all([
+        loadItems({ preferItemId: selectedItem.id }),
+        loadOverview(),
+      ])
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Could not update portal item.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const postComment = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!selectedItem) return
+    if (!commentText.trim()) {
+      setError('Comment message is required.')
+      return
+    }
+    setCommenting(true)
+    setError(null)
+    setStatus(null)
+    try {
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/portal/items/${selectedItem.id}/comments`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: commentText,
+          is_internal: commentInternal,
+        }),
+      })
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const text = await response.text()
+        throw new Error(text || 'Could not add comment.')
+      }
+      setCommentText('')
+      setCommentInternal(false)
+      setStatus('Comment added.')
+      await Promise.all([
+        loadItem(selectedItem.id),
+        loadItems({ preferItemId: selectedItem.id }),
+        loadOverview(),
+      ])
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Could not add comment.')
+    } finally {
+      setCommenting(false)
+    }
+  }
+
+  if (loadingItems && !items.length) {
+    return <main className="card">Loading request portal...</main>
+  }
+
+  return (
+    <main className="card portal-page">
+      <div className="user-directory-panel-header">
+        <div>
+          <h1>Request portal</h1>
+          <p className="lede">
+            Raise requests, issues, and feature ideas. Track progress and keep discussion in one place.
+          </p>
+        </div>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+      {status && <div className="status-banner">{status}</div>}
+
+      <section className="portal-overview-grid">
+        <div className="portal-overview-card">
+          <span>Total items</span>
+          <strong>{Number(overview?.overview?.total_items ?? totalItems ?? 0)}</strong>
+        </div>
+        <div className="portal-overview-card">
+          <span>Total comments</span>
+          <strong>{Number(overview?.overview?.total_comments ?? 0)}</strong>
+        </div>
+        <div className="portal-overview-card">
+          <span>My items</span>
+          <strong>{Number(overview?.my_items ?? 0)}</strong>
+        </div>
+        <div className="portal-overview-card">
+          <span>Visible</span>
+          <strong>{items.length}</strong>
+        </div>
+      </section>
+
+      <section className="admin-panel portal-create-panel">
+        <h2>Create item</h2>
+        <p className="lede">
+          Use <strong>Request</strong> for new content, <strong>Issue</strong> for broken behavior, and <strong>Feature</strong> for improvements.
+        </p>
+        <form onSubmit={createItem} className="admin-form compact-form portal-form-grid">
+          <label>
+            <span>Type</span>
+            <select
+              value={createKind}
+              onChange={(event) =>
+                setCreateKind(event.target.value as 'request' | 'issue' | 'feature')
+              }
+            >
+              {KIND_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            <span>Priority</span>
+            <select
+              value={createPriority}
+              onChange={(event) =>
+                setCreatePriority(event.target.value as 'low' | 'normal' | 'high' | 'urgent')
+              }
+            >
+              {PRIORITY_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="portal-field-span-2">
+            <span>Title</span>
+            <input
+              required
+              value={createTitle}
+              onChange={(event) => setCreateTitle(event.target.value)}
+              placeholder="Short summary of the request or issue"
+            />
+          </label>
+          <label className="portal-field-span-2">
+            <span>Description</span>
+            <textarea
+              required
+              rows={4}
+              value={createDescription}
+              onChange={(event) => setCreateDescription(event.target.value)}
+              placeholder="Add details, expected behavior, and any context."
+            />
+          </label>
+          <label>
+            <span>Media type</span>
+            <select value={createMediaType} onChange={(event) => setCreateMediaType(event.target.value)}>
+              {MEDIA_TYPE_OPTIONS.map((option) => (
+                <option key={option.value || 'none'} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            <span>Year</span>
+            <input
+              value={createYear}
+              onChange={(event) => setCreateYear(event.target.value)}
+              inputMode="numeric"
+              placeholder="Optional"
+            />
+          </label>
+          <label className="portal-field-span-2">
+            <span>External reference</span>
+            <input
+              value={createExternalRef}
+              onChange={(event) => setCreateExternalRef(event.target.value)}
+              placeholder="Optional: URL, ticket number, or request id"
+            />
+          </label>
+          <div className="admin-inline-actions portal-field-span-2">
+            <button type="submit" disabled={creating}>
+              {creating ? 'Creating…' : 'Create portal item'}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section className="portal-toolbar">
+        <label>
+          <span>Type</span>
+          <select value={filterKind} onChange={(event) => setFilterKind(event.target.value)}>
+            <option value="">All</option>
+            {KIND_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          <span>Status</span>
+          <select value={filterStatus} onChange={(event) => setFilterStatus(event.target.value)}>
+            <option value="">All</option>
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="portal-search-filter">
+          <span>Search</span>
+          <input
+            value={filterSearch}
+            onChange={(event) => setFilterSearch(event.target.value)}
+            placeholder="Title, description, or item id"
+          />
+        </label>
+        <label className="inline-checkbox portal-mine-toggle">
+          <input
+            type="checkbox"
+            checked={filterMine}
+            onChange={(event) => setFilterMine(event.target.checked)}
+          />
+          My items only
+        </label>
+      </section>
+
+      <div className="portal-workspace">
+        <section className="admin-panel portal-list-panel">
+          <div className="user-directory-panel-header">
+            <div>
+              <h2>Items</h2>
+              <p className="lede">
+                {totalItems} total
+                {hasMore ? ' (showing first 60)' : ''}
+              </p>
+            </div>
+          </div>
+          {items.length === 0 ? (
+            <div className="status-banner">No portal items match this filter.</div>
+          ) : (
+            <div className="portal-item-list">
+              {items.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`portal-item-row ${selectedItemId === item.id ? 'is-active' : ''}`}
+                  onClick={() => setSelectedItemId(item.id)}
+                >
+                  <div className="portal-item-row-main">
+                    <div className="portal-item-row-title">
+                      <strong>{item.title}</strong>
+                      <span className="small-pill">{item.kind}</span>
+                      <span className="small-pill is-muted">{item.priority}</span>
+                    </div>
+                    <p>{item.description}</p>
+                    <div className="portal-item-row-meta">
+                      <span>#{item.id}</span>
+                      <span>Status: {item.status}</span>
+                      <span>By: {item.created_by_username}</span>
+                      <span>Updated: {formatDate(item.last_activity_at)}</span>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section className="admin-panel portal-detail-panel">
+          {!selectedItemId ? (
+            <div className="status-banner">Select an item to view details.</div>
+          ) : loadingItem ? (
+            <div className="status-banner">Loading details…</div>
+          ) : !selectedItem ? (
+            <div className="status-banner">Item not found.</div>
+          ) : (
+            <>
+              <div className="user-directory-panel-header">
+                <div>
+                  <h2>Item #{selectedItem.id}</h2>
+                  <p className="lede">
+                    Created by {selectedItem.created_by_username} on {formatDate(selectedItem.created_at)}
+                  </p>
+                </div>
+              </div>
+
+              <form className="admin-form compact-form portal-form-grid" onSubmit={saveItem}>
+                <label className="portal-field-span-2">
+                  <span>Title</span>
+                  <input
+                    value={editTitle}
+                    onChange={(event) => setEditTitle(event.target.value)}
+                    disabled={!selectedItem.permissions?.can_edit}
+                  />
+                </label>
+                <label className="portal-field-span-2">
+                  <span>Description</span>
+                  <textarea
+                    rows={4}
+                    value={editDescription}
+                    onChange={(event) => setEditDescription(event.target.value)}
+                    disabled={!selectedItem.permissions?.can_edit}
+                  />
+                </label>
+                <label>
+                  <span>Media type</span>
+                  <select
+                    value={editMediaType}
+                    onChange={(event) => setEditMediaType(event.target.value)}
+                    disabled={!selectedItem.permissions?.can_edit}
+                  >
+                    {MEDIA_TYPE_OPTIONS.map((option) => (
+                      <option key={option.value || 'none'} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span>Year</span>
+                  <input
+                    value={editYear}
+                    onChange={(event) => setEditYear(event.target.value)}
+                    inputMode="numeric"
+                    disabled={!selectedItem.permissions?.can_edit}
+                  />
+                </label>
+                <label className="portal-field-span-2">
+                  <span>External reference</span>
+                  <input
+                    value={editExternalRef}
+                    onChange={(event) => setEditExternalRef(event.target.value)}
+                    disabled={!selectedItem.permissions?.can_edit}
+                  />
+                </label>
+                {selectedItem.permissions?.can_moderate && (
+                  <>
+                    <label>
+                      <span>Status</span>
+                      <select value={editStatus} onChange={(event) => setEditStatus(event.target.value)}>
+                        {STATUS_OPTIONS.map((option) => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label>
+                      <span>Priority</span>
+                      <select
+                        value={editPriority}
+                        onChange={(event) => setEditPriority(event.target.value)}
+                      >
+                        {PRIORITY_OPTIONS.map((option) => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="portal-field-span-2">
+                      <span>Assignee username</span>
+                      <input
+                        value={editAssignee}
+                        onChange={(event) => setEditAssignee(event.target.value)}
+                        placeholder="Optional assignee"
+                      />
+                    </label>
+                  </>
+                )}
+                <div className="admin-inline-actions portal-field-span-2">
+                  <button
+                    type="submit"
+                    disabled={saving || !selectedItem.permissions?.can_edit}
+                  >
+                    {saving ? 'Saving…' : 'Save changes'}
+                  </button>
+                </div>
+              </form>
+
+              <div className="portal-comments-block">
+                <h3>Comments</h3>
+                {comments.length === 0 ? (
+                  <div className="status-banner">No comments yet.</div>
+                ) : (
+                  <div className="portal-comment-list">
+                    {comments.map((comment) => (
+                      <article key={comment.id} className="portal-comment-card">
+                        <header>
+                          <strong>{comment.author_username}</strong>
+                          <span className="small-pill">{comment.author_role}</span>
+                          {comment.is_internal && <span className="small-pill is-muted">internal</span>}
+                          <span>{formatDate(comment.created_at)}</span>
+                        </header>
+                        <p>{comment.message}</p>
+                      </article>
+                    ))}
+                  </div>
+                )}
+                <form onSubmit={postComment} className="admin-form compact-form portal-comment-form">
+                  <label>
+                    <span>Add comment</span>
+                    <textarea
+                      rows={3}
+                      value={commentText}
+                      onChange={(event) => setCommentText(event.target.value)}
+                      placeholder="Add an update, troubleshooting note, or next step."
+                    />
+                  </label>
+                  {isAdmin && (
+                    <label className="inline-checkbox">
+                      <input
+                        type="checkbox"
+                        checked={commentInternal}
+                        onChange={(event) => setCommentInternal(event.target.checked)}
+                      />
+                      Internal comment (admin only)
+                    </label>
+                  )}
+                  <div className="admin-inline-actions">
+                    <button type="submit" disabled={commenting}>
+                      {commenting ? 'Posting…' : 'Post comment'}
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </>
+          )}
+        </section>
+      </div>
+    </main>
+  )
+}

frontend/app/ui/HeaderActions.tsx

@@ -42,6 +42,7 @@ export default function HeaderActions() {
       <div className="header-actions-right">
         <a href="/">Requests</a>
         <a href="/profile/invites">Invites</a>
+        <a href="/portal">Portal</a>
       </div>
     </div>
   )