Move log sort selector from Log Preview to Timeline header

The "Sort by" / "fall back to ottyl_seq" control now lives in
LogTimeline's header next to the time-range presets, since the setting
actually drives the shared range/log fetch rather than being a
Log-Preview-only concern. LogSortSettings and its load/save helpers
moved into LogTimeline.tsx alongside SortPicker; the localStorage key
was renamed to ottyl.logTimeline.sort, with loadLogSortSettings falling
back to the old ottyl.logPreview.sort key so an existing choice isn't
lost on first load after the move. LogPreview now just renders logs in
whatever order the caller already sorted them.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/LogPreview.tsx

@@ -25,87 +25,6 @@ function saveVisibleParamColumns(columns: string[]) {
   }
 }
 
-// Ticket 045: ordering key + missing-param handling for the log preview / timeline. Scoped like
-// `VISIBLE_PARAM_COLUMNS_STORAGE_KEY` and `App.tsx`'s `LOG_VIEWER_HEIGHT_STORAGE_KEY` above — one
-// shared "log viewer" concept, so a single localStorage key covers both the inline viewer
-// (`FullApp`) and its popout (`StandaloneLog`) rather than each keeping its own copy, which would
-// surprise a user switching between the two. There's no dashboard/panel-scoped analog for this
-// setting to divide by (unlike e.g. per-dashboard panels), so a single global key matches how the
-// rest of the log viewer's own settings are scoped.
-const LOG_SORT_STORAGE_KEY = 'ottyl.logPreview.sort'
-
-export interface LogSortSettings {
-  /** An already-declared param name to order log lines by, or `null` for the default (`ottyl_ts`-tracking) order. */
-  sortBy: string | null
-  /** Only meaningful when `sortBy` is set. `true` (default) orders lines missing that param by `ottyl_seq`, appended after the sorted lines; `false` drops them from view. */
-  sortMissingFallback: boolean
-}
-
-const DEFAULT_LOG_SORT_SETTINGS: LogSortSettings = { sortBy: null, sortMissingFallback: true }
-
-export function loadLogSortSettings(): LogSortSettings {
-  try {
-    const raw = localStorage.getItem(LOG_SORT_STORAGE_KEY)
-    if (!raw) return DEFAULT_LOG_SORT_SETTINGS
-    const parsed = JSON.parse(raw)
-    if (!parsed || typeof parsed !== 'object') return DEFAULT_LOG_SORT_SETTINGS
-    const sortBy = typeof parsed.sortBy === 'string' ? parsed.sortBy : null
-    const sortMissingFallback = typeof parsed.sortMissingFallback === 'boolean' ? parsed.sortMissingFallback : true
-    return { sortBy, sortMissingFallback }
-  } catch {
-    return DEFAULT_LOG_SORT_SETTINGS
-  }
-}
-
-export function saveLogSortSettings(settings: LogSortSettings) {
-  try {
-    localStorage.setItem(LOG_SORT_STORAGE_KEY, JSON.stringify(settings))
-  } catch {
-    // best-effort — private browsing or full storage just means the selection won't persist across reloads
-  }
-}
-
-function SortPicker({
-  paramNames,
-  settings,
-  onChange,
-}: {
-  paramNames: string[]
-  settings: LogSortSettings
-  onChange: (next: LogSortSettings) => void
-}) {
-  return (
-    <div className="flex items-center gap-2 text-xs text-text-secondary">
-      <label className="flex items-center gap-1">
-        Sort by
-        <select
-          value={settings.sortBy ?? ''}
-          onChange={(e) => onChange({ ...settings, sortBy: e.target.value || null })}
-          className="rounded border border-border-soft bg-surface-0 px-1 py-0.5 text-text"
-        >
-          <option value="">ottyl_ts (default)</option>
-          {paramNames.map((name) => (
-            <option key={name} value={name}>
-              {name}
-            </option>
-          ))}
-        </select>
-      </label>
-      {settings.sortBy && (
-        <label className="flex cursor-pointer items-center gap-1" title="How lines missing the sort param are handled">
-          <input
-            type="checkbox"
-            checked={settings.sortMissingFallback}
-            onChange={(e) => onChange({ ...settings, sortMissingFallback: e.target.checked })}
-            className="accent-text-muted"
-          />
-          Fall back to ottyl_seq
-        </label>
-      )}
-    </div>
-  )
-}
-
 function ColumnPicker({
   paramNames,
   visible,
@@ -293,14 +212,10 @@ function useScrollAnchor(containerRef: React.RefObject<HTMLDivElement | null>, d
 export function LogPreview({
   logs,
   params,
-  sortSettings,
-  onSortSettingsChange,
 }: {
   logs: LogEntry[]
+  /** Ticket 045/053: already sorted by the caller's `fetchLogs` call per its own sort setting (owned and rendered up in `LogTimeline`'s header now) — this component just renders whatever order it's given. */
   params: ParamDeclaration[]
-  /** Ticket 045: current ordering choice, owned by the caller (it also feeds `fetchLogs`) rather than internally like `visibleParamColumns` — see `App.tsx`'s poll loop. */
-  sortSettings: LogSortSettings
-  onSortSettingsChange: (next: LogSortSettings) => void
 }) {
   const paramNames = params.map((d) => d.name)
   const [visibleParamColumns, setVisibleParamColumns] = useState<string[]>(loadVisibleParamColumns)
@@ -330,7 +245,6 @@ export function LogPreview({
           <HelpIcon sectionId="log-preview" label="Help: Log preview" />
         </div>
         <div className="flex items-center gap-3">
-          <SortPicker paramNames={paramNames} settings={sortSettings} onChange={onSortSettingsChange} />
           <ColumnPicker paramNames={paramNames} visible={visible} onToggle={toggleColumn} />
         </div>
       </div>