Icons, docs formats

webapp/src/components/Docs.tsx

@@ -150,6 +150,65 @@ const SECTIONS: DocSection[] = [
       </div>
     ),
   },
+  {
+    id: 'auto-formats',
+    title: 'Auto-detected formats',
+    body: (
+      <div className="flex flex-col gap-2">
+        <p>
+          Every ingested line is classified into one of four formats, exposed as the reserved{' '}
+          <Code>ottyl_fmt</Code> param (see <em>Filtering</em> above). The format also decides what — if anything —
+          gets auto-declared as a param without you doing anything:
+        </p>
+        <ul className="list-disc pl-5">
+          <li>
+            <span className="font-semibold text-text">
+              <Code>log_stream</Code>
+            </span>{' '}
+            — macOS <Code>{'log stream'}</Code> output's fixed-column shape (timestamp, thread, type, activity id,
+            pid, ttl, then <Code>process: message</Code>). The first such line seen auto-declares{' '}
+            <Code>log_type</Code>, <Code>process</Code>, and <Code>pid</Code> as params, parsed straight out of those
+            columns.
+          </li>
+          <li>
+            <span className="font-semibold text-text">
+              <Code>json</Code>
+            </span>{' '}
+            — the line parses as a JSON object (a bare array or scalar doesn't count). Every leaf scalar field
+            (string/number/bool) auto-declares a param named after its dot-separated path, extracted by JSON field
+            path rather than regex — a nested field like <Code>{'{"request":{"path":"/x"}}'}</Code> becomes a param
+            named <Code>request.path</Code>. Nested objects are walked into automatically; arrays and <Code>null</Code>{' '}
+            fields are skipped since there's no single scalar value to declare a param against.
+          </li>
+          <li>
+            <span className="font-semibold text-text">
+              <Code>logfmt</Code>
+            </span>{' '}
+            — the line contains at least one <Code>key=value</Code>/<Code>{'key="value"'}</Code> pair anywhere in its
+            text (it doesn't need to be logfmt end-to-end — a free-text prefix or suffix around the pairs is fine).
+            Every distinct key auto-declares a param of the same name, type-inferred as <Code>number</Code> if its
+            first-seen value parses as one, else <Code>string</Code>.
+          </li>
+          <li>
+            <span className="font-semibold text-text">
+              <Code>none</Code>
+            </span>{' '}
+            — none of the above; plain prose with no structure ottyl can key off of. Nothing is auto-declared, though
+            the line is still fully searchable via <Code>regex(...)</Code> in the filter bar.
+          </li>
+        </ul>
+        <p>
+          Auto-declared params are flagged <Code>auto_derived</Code> in <Code>GET /api/params</Code> and show up as
+          log-table columns immediately, same as a manually declared param — but they can't be edited or removed
+          individually, and they're never persisted to a profile (so they're rediscovered fresh each run rather than
+          traveling with a profile like manual declarations do). A manual param declaration for a name always takes
+          precedence and is never overwritten by auto-detection. To keep one unusual line from flooding the params
+          list, auto-detection is capped at 64 auto-derived params total and 8 new ones per line — once either cap is
+          hit, further would-be auto-declarations from new keys/fields are simply skipped.
+        </p>
+      </div>
+    ),
+  },
   {
     id: 'parameters',
     title: 'Parameters',

webapp/src/components/NavMenu.tsx

@@ -6,6 +6,7 @@ import { useDocsNav, type DocsTarget } from '../lib/docsNav'
 import { DocsPanel } from './Docs'
 import { HelpIcon } from './HelpIcon'
 import { BUILTIN_THEMES, downloadThemeFile, generateThemeCss, parseThemeCss } from '../lib/themes'
+import ottylIcon from '../assets/ottyl-icon.svg'
 
 type PanelName = 'settings' | 'docs' | null
 
@@ -67,7 +68,10 @@ export function NavMenu({ stats }: { stats: Stats | null }) {
     <div className="flex h-full">
       <div className="flex h-full w-48 shrink-0 flex-col justify-between border-r border-border p-3">
         <div>
-          <div className="mb-4 text-lg font-semibold text-text">ottyl</div>
+          <div className="mb-4 flex items-center gap-2 text-lg font-semibold text-text">
+            <img src={ottylIcon} alt="" className="h-5 w-5" />
+            ottyl
+          </div>
           <PresetsDropdown panel={panel} />
           <nav className="mt-2 flex flex-col gap-1 text-sm text-text-muted">
             <button