@phenx-inc/ctlsurf 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {

package/src/main/index.ts

@@ -220,7 +220,10 @@ const orchestrator = new Orchestrator(
     },
     onCwdChanged: () => {
       mainWindow?.webContents.send('app:cwdChanged')
-      updateProjectBadge(orchestrator.cwd)
+      // Reflect the active tab's bound project (remote SSH sessions bind to a
+      // chosen ctlsurf project whose root_path is meaningful), falling back to
+      // the local launch cwd for unbound/local tabs.
+      updateProjectBadge(orchestrator.getActiveTabProjectPath() || orchestrator.cwd)
     },
   }
 )

package/src/main/orchestrator.ts

@@ -627,12 +627,19 @@ export class Orchestrator {
   }
 
   setActiveTab(tabId: string): void {
+    const prevProjectPath = this.getActiveTabProjectPath()
     this.activeTabId = tabId
     const tab = this.tabs.get(tabId)
     if (tab) {
       this.currentAgent = tab.agent
       this.currentCwd = tab.cwd
     }
+    // Switching tabs changes which project the dock badge / window title and
+    // the renderer's ticket/ctlsurf panels should reflect. Only signal when the
+    // effective project path actually changed to avoid needless renderer churn.
+    if (this.getActiveTabProjectPath() !== prevProjectPath) {
+      this.events.onCwdChanged()
+    }
   }
 
   getTabIds(): string[] {

package/src/renderer/App.tsx

@@ -438,6 +438,10 @@ export default function App() {
     return () => window.removeEventListener('ctlsurf-open-url', onOpen)
   }, [layout, togglePane])
 
+  // The active tab's agent — remote SSH sessions (id `remote-…`) can't have
+  // their replies spoken, so the speaker toggle is disabled for them.
+  const activeAgentIsRemote = !!tabs.find(t => t.id === activeTabId)?.agent?.id?.startsWith('remote-')
+
   // Build pane contents (always rendered, layout controls visibility)
   const panes: PaneContent[] = [
     { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
@@ -562,7 +566,7 @@ export default function App() {
               <line x1="8" y1="23" x2="16" y2="23" />
             </svg>
           </button>
-          <SpeakControls />
+          <SpeakControls remote={activeAgentIsRemote} />
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)

package/src/renderer/components/SpeakControls.tsx

@@ -18,7 +18,10 @@ import {
 
 const SAMPLE = 'This is how spoken agent replies will sound.'
 
-export function SpeakControls() {
+// `remote` is true while the active tab is a remote SSH session, where spoken
+// replies can't work: the agent's transcript is written on the remote machine,
+// so there's nothing local to read aloud. The toggle is disabled in that case.
+export function SpeakControls({ remote = false }: { remote?: boolean }) {
   const [enabled, setEnabled] = useState(false)
   const [engine, setEngineState] = useState<TtsEngineId>(getEngine)
   const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
@@ -124,7 +127,9 @@ export function SpeakControls() {
     speech.enqueue(SAMPLE)
   }, [])
 
-  const title = enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
+  const title = remote
+    ? "Spoken replies aren't available for remote SSH sessions — the agent's transcript lives on the remote machine"
+    : enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
 
   return (
     <div className="speak-controls" ref={wrapRef}>
@@ -133,6 +138,7 @@ export function SpeakControls() {
         className={`titlebar-btn titlebar-icon-btn speak-btn ${enabled ? 'active' : ''}`}
         onClick={toggle}
         title={title}
+        disabled={remote}
         aria-label="Toggle spoken agent replies"
         aria-pressed={enabled}
       >

package/src/renderer/components/TerminalPanel.tsx

@@ -67,27 +67,72 @@ interface TerminalPanelProps {
 // Keyed by tabId so each tab has its own xterm + pty listeners.
 // Survives React re-renders but cleaned up when tab is closed.
 
-const _terminals = new Map<string, {
+type TermState = {
   terminal: Terminal
   fitAddon: FitAddon
   unsubData: (() => void) | null
   unsubExit: (() => void) | null
   spawnedAgentId: string | null
+  // Follow mode: while true, new output keeps the view pinned to the bottom.
   pinnedToBottom: boolean
-}>()
+  // When NOT following, the absolute buffer line held at the top of the
+  // viewport — restored after each write so redraws can't drag the view
+  // (neither down to the bottom, nor up to the top — the old bug).
+  anchorLine: number | null
+  // One-shot flag set by a real user scroll gesture (wheel / scroll keys) and
+  // consumed by the very next onScroll, so a redraw firing onScroll right after
+  // a gesture isn't mistaken for one. Spinner redraws (~10x/s while "thinking")
+  // would otherwise be misread as user intent and re-pin to the bottom.
+  userScrollPending: boolean
+  // Guard so our own programmatic scrolls don't feed back through onScroll.
+  holding: boolean
+  // Subscribers (the jump-to-latest button) notified when follow mode flips.
+  pinListeners: Set<(pinned: boolean) => void>
+}
+
+const _terminals = new Map<string, TermState>()
 
+// Within a couple of lines of the bottom still counts as "at bottom", so a
+// small redraw delta doesn't strand the view just shy of the end.
 function isAtBottom(terminal: Terminal): boolean {
   const buf = terminal.buffer.active
-  return buf.viewportY >= buf.baseY
+  return buf.baseY - buf.viewportY <= 2
 }
 
-function scrollIfPinned(tabId: string, terminal: Terminal) {
-  const state = _terminals.get(tabId)
-  if (state?.pinnedToBottom) {
-    terminal.scrollToBottom()
+function notifyPin(state: TermState): void {
+  state.pinListeners.forEach((fn) => fn(state.pinnedToBottom))
+}
+
+function setPinned(state: TermState, pinned: boolean): void {
+  if (pinned) state.anchorLine = null
+  if (state.pinnedToBottom === pinned) return
+  state.pinnedToBottom = pinned
+  notifyPin(state)
+}
+
+// Re-assert the intended scroll position: follow the bottom while pinned,
+// otherwise hold the user's anchored line. Guarded so the resulting onScroll
+// is recognised as ours and ignored. This both keeps output pinned AND stops
+// involuntary redraw jumps (the old "scrolls to the top" bug) from sticking.
+function reassert(state: TermState): void {
+  const { terminal } = state
+  state.holding = true
+  try {
+    if (state.pinnedToBottom) {
+      terminal.scrollToBottom()
+    } else if (state.anchorLine != null && terminal.buffer.active.viewportY !== state.anchorLine) {
+      terminal.scrollToLine(state.anchorLine)
+    }
+  } finally {
+    state.holding = false
   }
 }
 
+function markGesture(tabId: string): void {
+  const s = _terminals.get(tabId)
+  if (s) s.userScrollPending = true
+}
+
 function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): { terminal: Terminal; fitAddon: FitAddon } {
   const existing = _terminals.get(tabId)
   if (existing) {
@@ -137,6 +182,10 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   // is running, where right-click is forwarded to the program instead.
   terminal.attachCustomKeyEventHandler((e) => {
     if (e.type !== 'keydown') return true
+    // Buffer-scroll keys count as a user gesture (see onScroll).
+    if (e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Home' || e.key === 'End') {
+      markGesture(tabId)
+    }
     const isCombo = (e.metaKey || e.ctrlKey) && e.shiftKey && e.code === 'KeyE'
     if (!isCombo) return true
     e.preventDefault()
@@ -144,32 +193,53 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
     return false // consume — don't forward to the pty
   })
 
-  const state = {
+  const state: TermState = {
     terminal,
     fitAddon,
-    unsubData: null as (() => void) | null,
-    unsubExit: null as (() => void) | null,
-    spawnedAgentId: null as string | null,
+    unsubData: null,
+    unsubExit: null,
+    spawnedAgentId: null,
     pinnedToBottom: true,
+    anchorLine: null,
+    userScrollPending: false,
+    holding: false,
+    pinListeners: new Set(),
   }
 
-  // Track scroll position
+  // Track scroll position. Distinguish a real user scroll (recent wheel/key
+  // gesture) from the involuntary viewport jumps TUI redraws cause: trust the
+  // former to set follow/anchor; for the latter, re-assert our target so the
+  // view neither snaps to the bottom nor jumps to the top.
   terminal.onScroll(() => {
-    state.pinnedToBottom = isAtBottom(terminal)
+    if (state.holding) return
+    if (!state.userScrollPending) {
+      // Not tied to a user gesture → an involuntary scroll from a redraw.
+      // Hold our target instead of trusting it (this is the spinner case:
+      // every screen update would otherwise drag the view back to the bottom).
+      reassert(state)
+      return
+    }
+    state.userScrollPending = false
+    if (isAtBottom(terminal)) {
+      setPinned(state, true)
+    } else {
+      state.anchorLine = terminal.buffer.active.viewportY
+      setPinned(state, false)
+    }
   })
 
-  // Send keystrokes to pty
+  // Send keystrokes to pty — typing always returns to (and follows) the bottom.
   terminal.onData((data) => {
-    state.pinnedToBottom = true
+    setPinned(state, true)
     terminal.scrollToBottom()
     window.worker.writePty(tabId, data)
   })
 
-  // Receive pty output for this tab
+  // Receive pty output for this tab. Re-assert AFTER the write is parsed (the
+  // write callback) so we read settled buffer coordinates.
   state.unsubData = window.worker.onPtyData((eventTabId, data) => {
     if (eventTabId === tabId) {
-      terminal.write(data)
-      scrollIfPinned(tabId, terminal)
+      terminal.write(data, () => reassert(state))
     }
   })
 
@@ -206,6 +276,17 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
   const containerRef = useRef<HTMLDivElement>(null)
   const [menu, setMenu] = useState<{ x: number; y: number } | null>(null)
   const [toast, setToast] = useState<string | null>(null)
+  // Mirrors the terminal's follow-mode; drives the "jump to latest" overlay,
+  // which only shows while the user has scrolled up.
+  const [followBottom, setFollowBottom] = useState(true)
+
+  const jumpToLatest = () => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setPinned(s, true)
+    s.terminal.scrollToBottom()
+    s.terminal.focus()
+  }
 
   // Right-click → offer "Copy as email table", but only when the current
   // selection actually parses as a table; otherwise fall through to default.
@@ -270,7 +351,13 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
 
     fitAddon.fit()
-    scrollIfPinned(tabId, terminal)
+    const attached = _terminals.get(tabId)
+    if (attached) reassert(attached)
+
+    // Wheel over the terminal is an explicit user scroll — stamp it so onScroll
+    // treats the resulting move as intentional (not an involuntary redraw jump).
+    const onWheel = () => markGesture(tabId)
+    terminal.element?.addEventListener('wheel', onWheel, { passive: true })
 
     // Resize handling — skip when the container is hidden (display:none → 0x0),
     // otherwise fit() reports a tiny size and the PTY gets stuck at ~4 cols
@@ -286,7 +373,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
         state.fitAddon.fit()
         const { cols, rows } = state.terminal
         if (cols < 10 || rows < 5) return
-        scrollIfPinned(tabId, state.terminal)
+        reassert(state)
         window.worker.resizePty(tabId, cols, rows)
       }, 150)
     }
@@ -299,6 +386,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       clearTimeout(resizeTimeout)
       window.removeEventListener('resize', handleResize)
       observer.disconnect()
+      terminal.element?.removeEventListener('wheel', onWheel)
       // Do NOT dispose terminal or unsub PTY listeners — they persist across remounts
     }
   }, [tabId, onExit])
@@ -317,7 +405,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
       const s = _terminals.get(tabId)
       if (s) {
         s.fitAddon.fit()
-        s.pinnedToBottom = true
+        setPinned(s, true)
         s.terminal.scrollToBottom()
         const { cols, rows } = s.terminal
         window.worker.resizePty(tabId, cols, rows)
@@ -337,7 +425,7 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
           if (state) {
             state.fitAddon.fit()
             state.terminal.focus()
-            scrollIfPinned(tabId, state.terminal)
+            reassert(state)
             const { cols, rows } = state.terminal
             window.worker.resizePty(tabId, cols, rows)
           }
@@ -346,9 +434,32 @@ export function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }: Termi
     }
   }, [isActive, tabId])
 
+  // Subscribe to follow-mode flips so the jump button shows/hides. Runs after
+  // the attach effect has created the terminal for this tab.
+  useEffect(() => {
+    const s = _terminals.get(tabId)
+    if (!s) return
+    setFollowBottom(s.pinnedToBottom)
+    const fn = (p: boolean) => setFollowBottom(p)
+    s.pinListeners.add(fn)
+    return () => { s.pinListeners.delete(fn) }
+  }, [tabId])
+
   return (
     <>
-      <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+      <div className="terminal-wrap">
+        <div className="terminal-container" ref={containerRef} onContextMenu={handleContextMenu} />
+        {!followBottom && (
+          <button
+            type="button"
+            className="term-jump-latest"
+            onMouseDown={(e) => { e.preventDefault(); jumpToLatest() }}
+            title="Jump to latest output"
+          >
+            ↓ Latest
+          </button>
+        )}
+      </div>
       {menu && (
         <div className="term-context-menu" style={{ position: 'fixed', left: menu.x, top: menu.y }}>
           <button type="button" onMouseDown={(e) => { e.preventDefault(); runConvert() }}>

package/src/renderer/components/TicketPanel.tsx

@@ -74,6 +74,32 @@ function Segmented({ options, value, onChange }: SegmentedProps) {
   )
 }
 
+// A single ticket row. Shared between the open list and the (collapsible)
+// Done section so both render identically.
+function TicketCard({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
+  return (
+    <button className="ticket-card" onClick={onClick}>
+      <span className="ticket-card-bar" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
+      <div className="ticket-card-main">
+        <span className="ticket-card-title">{ticket.title || 'Untitled'}</span>
+        <div className="ticket-card-meta">
+          <span className="ticket-card-status" style={{ color: colorOf(STATUS_OPTIONS, ticket.status) }}>
+            <span className="ticket-seg-dot" style={{ background: colorOf(STATUS_OPTIONS, ticket.status) }} />
+            {ticket.status}
+          </span>
+          {ticket.created && <span className="ticket-card-date">{formatDate(ticket.created)}</span>}
+        </div>
+      </div>
+      <span
+        className="ticket-card-pri"
+        style={{ color: colorOf(PRIORITY_OPTIONS, ticket.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, ticket.priority)}66` }}
+      >
+        {ticket.priority}
+      </span>
+    </button>
+  )
+}
+
 // Docked side-pane variant of the ticket UI: header + list/form body + footer.
 // It only mounts when its pane is visible, so it loads on mount and refreshes
 // when the connected project (cwd) changes. Closed via the pane's own header.
@@ -85,6 +111,9 @@ export function TicketPane() {
   const [tickets, setTickets] = useState<Ticket[]>([])
   const [listLoading, setListLoading] = useState(false)
   const [listError, setListError] = useState<string | null>(null)
+  // Done tickets are tucked into a collapsed section so the list stays focused
+  // on what's still open; the user can expand to review completed work.
+  const [showDone, setShowDone] = useState(false)
 
   // form state
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -178,6 +207,10 @@ export function TicketPane() {
     return () => window.removeEventListener('keydown', onKey)
   }, [view, handleSave])
 
+  // Split out Done tickets so they can live in their own collapsed section.
+  const activeTickets = tickets.filter(t => t.status !== 'Done')
+  const doneTickets = tickets.filter(t => t.status === 'Done')
+
   return (
     <div className="ticket-pane" role="region" aria-label="Tickets">
       <div className="ticket-drawer-header">
@@ -198,6 +231,9 @@ export function TicketPane() {
               </span>
             </div>
           </div>
+          {view === 'list' && (
+            <button className="ticket-drawer-new" onClick={openNewForm} title="New ticket">+ New</button>
+          )}
         </div>
 
         {view === 'list' ? (
@@ -214,34 +250,39 @@ export function TicketPane() {
                   <span className="ticket-empty-hint">Log the first one for this project.</span>
                 </div>
               )}
-              {!listLoading && tickets.map(t => (
-                <button key={t.id} className="ticket-card" onClick={() => openEditForm(t)}>
-                  <span className="ticket-card-bar" style={{ background: colorOf(STATUS_OPTIONS, t.status) }} />
-                  <div className="ticket-card-main">
-                    <span className="ticket-card-title">{t.title || 'Untitled'}</span>
-                    <div className="ticket-card-meta">
-                      <span className="ticket-card-status" style={{ color: colorOf(STATUS_OPTIONS, t.status) }}>
-                        <span className="ticket-seg-dot" style={{ background: colorOf(STATUS_OPTIONS, t.status) }} />
-                        {t.status}
-                      </span>
-                      {t.created && <span className="ticket-card-date">{formatDate(t.created)}</span>}
-                    </div>
-                  </div>
-                  <span
-                    className="ticket-card-pri"
-                    style={{ color: colorOf(PRIORITY_OPTIONS, t.priority), borderColor: `${colorOf(PRIORITY_OPTIONS, t.priority)}66` }}
-                  >
-                    {t.priority}
-                  </span>
-                </button>
+              {!listLoading && activeTickets.map(t => (
+                <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} />
               ))}
+              {!listLoading && activeTickets.length === 0 && doneTickets.length > 0 && (
+                <div className="ticket-list-msg">Nothing open — all caught up.</div>
+              )}
+              {!listLoading && doneTickets.length > 0 && (
+                <>
+                  <button
+                    type="button"
+                    className="ticket-done-toggle"
+                    onClick={() => setShowDone(v => !v)}
+                    aria-expanded={showDone}
+                  >
+                    <span className={`ticket-done-caret ${showDone ? 'open' : ''}`} aria-hidden="true">▸</span>
+                    <span className="ticket-done-label">Done</span>
+                    <span className="ticket-done-count">{doneTickets.length}</span>
+                  </button>
+                  {showDone && doneTickets.map(t => (
+                    <TicketCard key={t.id} ticket={t} onClick={() => openEditForm(t)} />
+                  ))}
+                </>
+              )}
             </div>
-            <div className="ticket-drawer-footer">
-              <span className="ticket-drawer-hint">
-                {tickets.length > 0 && `${tickets.length} ticket${tickets.length === 1 ? '' : 's'}`}
-              </span>
-              <button className="ticket-btn-primary" onClick={openNewForm}>+ New ticket</button>
-            </div>
+            {tickets.length > 0 && (
+              <div className="ticket-drawer-footer">
+                <span className="ticket-drawer-hint">
+                  {doneTickets.length > 0
+                    ? `${activeTickets.length} open · ${doneTickets.length} done`
+                    : `${tickets.length} ticket${tickets.length === 1 ? '' : 's'}`}
+                </span>
+              </div>
+            )}
           </>
         ) : (
           <>

package/src/renderer/styles.css

@@ -100,6 +100,17 @@ html, body, #root {
   background: #1f2335;
 }
 
+.titlebar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Keep the greyed-out look stable on hover for disabled buttons. */
+.titlebar-btn:disabled:hover {
+  color: #565f89;
+  border-color: #3b3d57;
+}
+
 .titlebar-separator {
   width: 1px;
   height: 16px;
@@ -266,6 +277,15 @@ html, body, #root {
 }
 
 /* Terminal container */
+.terminal-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .terminal-container {
   width: 100%;
   height: 100%;
@@ -277,6 +297,34 @@ html, body, #root {
   height: 100%;
 }
 
+/* Floating "jump to latest" pill — shown only while scrolled up. */
+.term-jump-latest {
+  position: absolute;
+  bottom: 14px;
+  right: 20px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border-radius: 14px;
+  background: #2a2b3d;
+  border: 1px solid #7aa2f7;
+  color: #c0caf5;
+  font-family: inherit;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+  transition: background 0.13s ease, transform 0.06s ease;
+}
+.term-jump-latest:hover {
+  background: #343650;
+}
+.term-jump-latest:active {
+  transform: translateY(1px);
+}
+
 .terminal-fullscreen {
   width: 100%;
   height: 100%;
@@ -1712,6 +1760,32 @@ html, body, #root {
   color: #7aa2f7;
   font-weight: 600;
 }
+/* "+ New" action in the header (replaces the old footer button). */
+.ticket-drawer-new {
+  flex-shrink: 0;
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px 11px;
+  border-radius: 7px;
+  background: rgba(122, 162, 247, 0.14);
+  border: 1px solid rgba(122, 162, 247, 0.3);
+  color: #9db4f5;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.06s ease;
+}
+.ticket-drawer-new:hover {
+  background: rgba(122, 162, 247, 0.22);
+  border-color: rgba(122, 162, 247, 0.5);
+  color: #c0d0fb;
+}
+.ticket-drawer-new:active {
+  transform: translateY(1px);
+}
 .ticket-drawer-warn {
   color: #e0af68;
 }
@@ -1909,6 +1983,49 @@ html, body, #root {
   text-align: center;
 }
 
+/* ── collapsible "Done" section header ── */
+.ticket-done-toggle {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  margin-top: 3px;
+  padding: 7px 4px;
+  background: none;
+  border: none;
+  border-top: 1px solid #262a3f;
+  color: #6b739b;
+  font-family: inherit;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.13s ease;
+}
+.ticket-done-toggle:hover {
+  color: #a9b1d6;
+}
+.ticket-done-caret {
+  display: inline-block;
+  font-size: 10px;
+  transition: transform 0.13s ease;
+}
+.ticket-done-caret.open {
+  transform: rotate(90deg);
+}
+.ticket-done-count {
+  margin-left: auto;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 9px;
+  background: #262a3f;
+  color: #8088ac;
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
+
 .ticket-empty {
   display: flex;
   flex-direction: column;