What should Nomos do?

Describe a goal — Nomos will plan it, execute it, and report the outcome.

{ e.preventDefault() submit() }} >

<div class="flex items-center justify-between px-3 pb-3">
            <span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
            <Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
              <ArrowUpIcon />
            </Button>
          </div>
        </form>
      </div>
      </div>

<span class="justify-self-center text-[11px] text-muted-foreground/70">Scroll to see all tasks ↓</span>
    </section>

<section class="mx-auto w-full max-w-5xl px-4 pb-16">
      <div class="rounded-xl border bg-card/70 backdrop-blur">
        <div class="flex flex-wrap items-center gap-1.5 border-b p-3">
          {#each FILTERS as f}
            <button
              type="button"
              onclick={() => (filter = f.id)}
              class="rounded-full border px-2.5 py-1 text-xs transition-colors {filter === f.id
                ? 'border-primary bg-primary/10 text-foreground'
                : 'border-border text-muted-foreground hover:bg-muted/50'}"
            >
              {f.label}
              <span class="ml-1 opacity-60">{counts[f.id] ?? 0}</span>
            </button>
          {/each}
        </div>

{#if visible.length === 0}
          <div class="flex flex-col items-center gap-2 px-4 py-16 text-center">
            <p class="max-w-sm text-sm text-muted-foreground">
              {filter === 'all'
                ? 'No tasks yet. Start one above and Nomos will plan it, execute it, and report the outcome.'
                : `No ${FILTERS.find((f) => f.id === filter)?.label.toLowerCase()} tasks.`}
            </p>
          </div>
        {:else}
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead>
                <tr class="border-b text-left text-xs text-muted-foreground">
                  <th class="w-36 px-4 py-2 font-medium">Status</th>
                  <th class="px-4 py-2 font-medium">Task</th>
                  <th class="hidden px-4 py-2 font-medium md:table-cell">Summary</th>
                  <th class="w-28 px-4 py-2 text-right font-medium">Last active</th>
                </tr>
              </thead>
              <tbody>
                {#each visible as s (s.id)}
                  {@const st = statusStyle(s)}
                  <tr
                    class="cursor-pointer border-b last:border-0 transition-colors hover:bg-muted/40"
                    onclick={() => openTask(s.id)}
                  >
                    <td class="px-4 py-2.5">
                      <span class="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                        <span class="size-2 rounded-full {st.dot} {st.pulse ? 'animate-pulse' : ''}"></span>
                        {st.label}
                      </span>
                    </td>
                    <td class="max-w-0 px-4 py-2.5">
                      <span class="line-clamp-1 font-medium">{heading(s)}</span>
                    </td>
                    <td class="hidden max-w-0 px-4 py-2.5 md:table-cell">
                      <span class="line-clamp-1 text-xs text-muted-foreground">{s.summary || '—'}</span>
                    </td>
                    <td class="whitespace-nowrap px-4 py-2.5 text-right text-[11px] text-muted-foreground">
                      {relativeTime(s.last_active_at)}
                    </td>
                  </tr>
                {/each}
              </tbody>
            </table>
          </div>
        {/if}
      </div>
    </section>
  </div>
</div>