Nomos

Your resident operator. Ask about the fleet, or tell it to act.

{#if suggestions.length}

{#each suggestions as q} {/each}

{/if}

{/if} {#each messages as msg, idx (msg.id)}

{#if msg.role === 'user'}

You {#if msg.created_at} {formatTime(msg.created_at)} {/if}

{msg.text}

{:else}

Nomos {#if msg.created_at} {formatTime(msg.created_at)} {/if}

{#if msg.text}

{@html render(msg.text)} {#if idx === messages.length - 1 && streaming} {/if}

{/if} {#if msg.tools.length > 0}

{#each msg.tools as tool (tool.id)} {/each}

{/if} {#if idx === messages.length - 1 && msg.text === '' && (streaming || indicatorDone || error)}

{#if error} {:else if indicatorDone} {:else} {/if} {indicatorLabel}

{/if}

{/each} {#if question} {/if}

{#if connectionState === 'disconnected'}

{:else if connectionState === 'reconnecting'}

{/if} {#if error}

{error}

{/if} {#each chatErrors as err (err.id)}

{err.message} {#if err.action} {/if}

{/each}

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

{#if streaming}
            <Button
              type="button"
              size="icon-sm"
              variant="secondary"
              class="absolute right-2 bottom-2 rounded-lg"
              onclick={onCancel}
              aria-label="Stop"
            >
              <SquareIcon class="size-3.5" />
            </Button>
          {:else}
            <Button
              type="submit"
              size="icon-sm"
              variant="secondary"
              class="absolute right-2 bottom-2 rounded-lg"
              disabled={!input.trim()}
              aria-label="Send"
            >
              <CornerDownLeftIcon class="size-3.5" />
            </Button>
          {/if}
        </form>
      </div>
    </Pane>
  </Splitpanes>
</div>

/* Assistant message wrapper */
  .assistant-msg {
    position: relative;
  }

/* User message — soft terracotta bubble, gentle lift */
  .user-msg {
    box-shadow: 0 1px 8px -4px var(--primary);
    overflow-wrap: break-word;
  }

/* Prose overrides */
  .prose-chat :global(p) {
    margin: 0 0 0.5rem;
  }
  .prose-chat :global(p:last-child) {
    margin-bottom: 0;
  }

.prose-chat :global(ul),
  .prose-chat :global(ol) {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
  }
  .prose-chat :global(ul) {
    list-style-type: disc;
  }
  .prose-chat :global(ol) {
    list-style-type: decimal;
  }
  .prose-chat :global(li) {
    margin-bottom: 0.125rem;
    padding-left: 0.25rem;
  }
  .prose-chat :global(li::marker) {
    color: var(--primary);
  }

.prose-chat :global(code) {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--primary);
  }

.prose-chat :global(pre) {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    margin: 0 0 0.5rem;
    position: relative;
  }
  .prose-chat :global(pre)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
    opacity: 0.4;
  }
  .prose-chat :global(pre code) {
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    color: inherit;
    border: none;
  }

/* Section headings — serif (Inknut) with a short accent rule. Extra top
     margin separates sections; the first heading in a message doesn't. */
  .prose-chat :global(h1) {
    font-size: 1.15em;
    font-weight: 600;
    margin: 1.15rem 0 0.4rem;
    letter-spacing: 0.01em;
    position: relative;
    display: inline-block;
  }
  .prose-chat :global(h2) {
    font-size: 1.08em;
    font-weight: 600;
    margin: 1.15rem 0 0.4rem;
    letter-spacing: 0.01em;
    position: relative;
    display: inline-block;
  }
  .prose-chat :global(h3) {
    font-size: 1.02em;
    font-weight: 600;
    margin: 1.15rem 0 0.4rem;
    letter-spacing: 0.01em;
    position: relative;
    display: inline-block;
  }
  .prose-chat :global(> h1:first-child),
  .prose-chat :global(> h2:first-child),
  .prose-chat :global(> h3:first-child) {
    margin-top: 0;
  }
  .prose-chat :global(h1)::after,
  .prose-chat :global(h2)::after,
  .prose-chat :global(h3)::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: 4px;
    border-radius: 1px;
    background: linear-gradient(to right, var(--primary), transparent);
    opacity: 0.55;
  }

.prose-chat :global(table) {
    border-collapse: collapse;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
  }
  .prose-chat :global(.table-wrapper) {
    overflow-x: auto;
    margin: 0 0 0.5rem;
  }
  .prose-chat :global(.table-wrapper table) {
    margin: 0;
  }
  .prose-chat :global(th) {
    background: var(--muted);
    font-weight: 600;
  }
  .prose-chat :global(th),
  .prose-chat :global(td) {
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    text-align: left;
  }

.prose-chat :global(blockquote) {
    border-left: 3px solid var(--primary);
    padding-left: 0.75rem;
    color: var(--muted-foreground);
    margin: 0 0 0.5rem;
    font-style: italic;
    position: relative;
  }
  .prose-chat :global(blockquote)::before {
    content: '“';
    position: absolute;
    left: -0.15rem;
    top: -0.35rem;
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.6;
    font-style: normal;
    line-height: 1;
  }

.prose-chat :global(hr) {
    border: none;
    height: 1px;
    margin: 0.75rem 0;
    background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  }

/* Bold is emphasis, not color — dark weight reads cleanly and lets the
     terracotta accent stay meaningful (code, headings, links). */
  .prose-chat :global(strong) {
    color: var(--foreground);
    font-weight: 600;
  }

.prose-chat :global(a) {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
  }

/* Input area ornament */
  .input-ornament::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
    opacity: 0.3;
  }

/* Code copy button — global: injected via render() into {html} blocks */
  .prose-chat :global(.code-block-wrapper) {
    position: relative;
  }
  .prose-chat :global(.code-copy-btn) {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: var(--muted-foreground);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    cursor: pointer;
    border: none;
    background: transparent;
  }
  .prose-chat :global(.code-block-wrapper:hover .code-copy-btn) {
    opacity: 1;
  }
  .prose-chat :global(.code-copy-btn:hover) {
    color: var(--foreground);
    background: var(--muted);
  }

/* Streaming cursor — blinking block appended after streaming text */
  .stream-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--primary);
    opacity: 0.75;
    border-radius: 1px;
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.9s ease-in-out infinite;
  }

@keyframes cursor-blink {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 0; }
  }
</style>