AI Assistants

Interface surfaces for products built on LLMs.

01

Loading State

A pixel-grid loader with a shimmering label and live elapsed timer.

Churning0.0s
02

Reasoning Trace

An expandable chain-of-thought trace with a live thinking timer.

  1. 01The question is about a specific lane and a specific week, so I should pull lane performance for week 28 before anything else.
03

Streaming Text

A streamed answer with inline citations, sources, and follow-ups.

04

Prompt Composer

A prompt input with attachments, a model picker, and a stop state.

  • lane-report-w28.pdf242 KB
0/2000
05

Chat Empty State

A first-run greeting with staggered suggestion chips.

What do you want to know about your freight?

Portside can query lane performance, investigate incidents, compare carriers against contracted SLAs, and draft the follow-up.

06

Message Actions

Per-message controls — copy, regenerate, and thumb feedback.

Average transit ran 6.3 days against a contracted 4.0 — that reads as an SLA breach rather than acceptable variance.

07

Citation Sources

Inline citation markers with hover previews or a footnote list.

Rotterdam–Felixstowe on-time delivery fell to 71.4% last week Lane performance — week 28portside.internalRotterdam–Felixstowe on-time delivery fell to 71.4%, down 18.2 points week over week.. The cause was terminal congestion at Rotterdam following a crane fault at Berth 3 Incident: Rotterdam terminal congestionportside.internalBerth availability at RTM dropped to one of four across 14–17 July following a crane fault., and average transit ran 2.3 days over the contracted SLA with Meridian Lines Meridian Lines — contracted SLAportside.internalContracted transit 4 days port-to-port, with a 48-hour grace window before penalties apply..

08

Agent Steps

A timeline of tool calls with status, arguments, results, and parallel sub-steps.

  1. {"lane":"RTM→FXT","window":"week_28","metrics":["on_time_rate","avg_transit_days"]}

    on_time_rate: 0.714 (−0.182 WoW) · avg_transit_days: 6.3 (contracted 4.0)

  2. {"port":"RTM","from":"2026-07-13","to":"2026-07-20"}

    1 incident: terminal congestion, 14–17 July, crane fault at Berth 3.

    fetch_berth_availabilityparallel

    1 of 4 berths available

    fetch_weather_windowparallel

    No weather holds recorded

  3. {"carrier":"meridian-lines","observed_transit_days":6.3}

    Breach: 2.3 days over contracted transit, outside the 48-hour grace window.

  4. {"carrier":"meridian-lines","basis":"sla_breach_w28"}

09

Tool Chips

Compact tool-call chips that expand into their arguments and result.

10

Approval Card

A human-in-the-loop approval for an action an agent wants to take.

Send carrier notice?

A formal SLA-breach notice to Meridian Lines for the Rotterdam–Felixstowe lane, citing 2.3 days over contracted transit.

drafted by agent · draft_carrier_notice

11

Model Selector

A model picker as a radio list or segmented control, with badges and disabled states.

12

Usage Meter

A context-window meter with token counts and estimated cost.

Context window320 / 128.0k · 0%
prompt 320 · completion 0≈ $0.0021
13

Voice Input

A voice recorder pill with animated level bars and a live timer.

Tap to speak
14

Inline Edit

A selection-anchored AI edit: suggestion toolbar, word diff, accept or reject.

Meridian Lines ran 2.3 days over the contracted transit window, which is a situation that we think may possibly warrant some kind of formal follow-up before the next sailing.

15

Thinking Dots

A minimal typing indicator — bouncing dots or a sliding bar.

Portside is thinking
16

Task Rows

Live agent task rows with status badges and expandable notes.

  • All cold-chain certifications present; two renewals due next month.

  • Week 28 figures now include the Rotterdam congestion window.

17

Agent Plan

An editable plan checklist the agent proposes before running.

Proposed plan

4/4 steps
19

Diff View

Proposed file changes with per-file accept and reject.

reports/weekly-lanes.ts+4 −1
const lanes = await fetchLanes(week);
const flagged = [];
const flagged = lanes.filter(
(lane) => lane.transitDays > lane.slaDays + GRACE,
);
report.append(breachSection(flagged));
20

Code Block

An AI code block with a file header, copy, and line collapse.

lane-report.ts
export function breachSection(lanes: Lane[]) {
if (lanes.length === 0) return null;
const rows = lanes.map((lane) => ({
lane: lane.code,
overBy: lane.transitDays - lane.slaDays,
carrier: lane.carrier,
}));
21

Insight Cards

Metric cards with spark bars, trend deltas, and an AI note.

On-time delivery

71.4%

-18.2%

Dip traces to the Rotterdam crane fault, not carrier performance.

Avg transit — RTM→FXT

6.3d

+57.5%

2.3 days over the contracted SLA window.

22

Error State

A failed-generation state with a preserved prompt and retry.

23

Quota Banner

A message-quota banner with a live reset countdown.

2 messages left today

18/20· resets in 4:12

24

Memory Chips

What the assistant remembers, as removable chips.

Assistant memory

4 saved
  • Prefers weekly digests on Monday
  • Meridian Lines is the primary carrier
  • Escalate breaches over 48h
  • Reports in metric units
25

Suggestion Banner

An inline AI suggestion with apply and dismiss.

Flag Meridian Lines in the weekly carrier report

Based on the SLA breach found on the Rotterdam–Felixstowe lane.

26

Status Tracker

A staged progress tracker for long-running AI jobs.

  1. Queued
  2. Embedding
  3. Indexing
  4. Ready

Indexing 1,204 documents

27

Conversation List

A date-grouped conversation sidebar with pinning.