QueueLane

queue-lane

Shows prioritized queue items in read-only lanes with depth, average-wait, and throughput metrics.

Usage

Basic usage

lanes defines the lane (id/label/tone color bar/meta indicator), items is grouped by laneId, and the order within the lane is FIFO. The default rendering number of track headers + meta.

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

tsx

<QueueLane
  lanes={[
    { id: "p0", label: "P0 Emergency", tone: "var(--color-chart-3)", meta: "Equal 0.4s" },
    { id: "p1", label: "P1 High", tone: "var(--color-chart-4)", meta: "Equal 1.2s" },
    { id: "p2", label: "P2 Normal", tone: "var(--color-primary)", meta: "Equal 3.5s" },
  ]}
  items={jobs}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

Super long queue collapse

maxVisible limits the number of directly displayed items per channel, and will be folded as "N items remain" if exceeded.

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

tsx

<QueueLane
  lanes={lanes}
  items={jobs}
  maxVisible={4}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

Click to drill down

The card is read-only by default; after passing onItemClick, the card can be clicked/keyboard accessible (Enter/Space) for viewing details without changing the queue order.

Text generation2 itemsThroughput 42/min

Marketing copywriting rewriting#1
Sonnet 4.6etc. 0.8s
Email Drafting#2
Haiku 4.5etc. 1.1s

Code2 itemsThroughput 18/min

Single test completion#1
Sonnet 4.6etc. 1.6s
SQL Optimization Suggestions#2
Opus 4.7etc. 2.2s

Image1 itemThroughput 9/min

Poster generation#1
Image Organizeretc. 4.5s

Search enhancement2 itemsThroughput 65/min

Policy Q&A Recall#1
Haiku 4.5etc. 0.3s
Work order similar search#2
Haiku 4.5etc. 0.5s

tsx

<QueueLane
  lanes={lanes}
  items={jobs}
  onItemClick={(job) => openDetail(job.id)}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

When to use

Use QueueLane to monitor ordered queues grouped by priority or category, such as a task bus or P0–P3 scheduler. The scheduler owns FIFO order and users cannot drag it. Use Kanban for manual workflow movement.

Import

import { QueueLane, groupByLane } from "@hulianui/ui"

Props

Name	Type	Default	Description
lanes*	`QueueLaneDef[]`	—	Ordered `{id, label, tone?, meta?}` lanes; tone is written directly as a CSS color.
items*	`T[]`	—	Controlled `{id, laneId}` items grouped by lane while preserving input order; unmatched items are omitted.
maxVisible	`number`	—	Maximum directly visible items per lane; omission shows all.
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Lane layout direction.
className	`string`	—	Root class name.

Events

Event	Type	Description
onItemClick	`(item: T) => void`	Read-only item drill-down.

Slots

Slot	Type	Description
renderItem*	`(item: T, index: number) => ReactNode`	Renders an item; index is its zero-based position within the lane.
renderLaneHeader	`(lane: QueueLaneDef, items: T[]) => ReactNode`	Custom lane metrics; default shows label, count, and metadata.

Example

tsx

interface Job extends QueueItem { title: string; wait: string; executor: string }

const lanes: QueueLaneDef[] = [
  { id: "p0", label: "P0 Critical", tone: "var(--color-chart-3)", meta: "Avg 0.4s" },
  { id: "p1", label: "P1 High", tone: "var(--color-chart-4)", meta: "Avg 1.2s" },
];
const jobs: Job[] = [
  { id: "t1", laneId: "p0", title: "Real-time risk approval", wait: "0.2s", executor: "Sonnet 4.6" },
  { id: "t3", laneId: "p1", title: "Ticket intent classification", wait: "0.9s", executor: "Haiku 4.5" },
];

<QueueLane<Job>
  lanes={lanes}
  items={jobs}
  maxVisible={5}
  onItemClick={(job) => console.log(job.id)}
  renderItem={(job, index) => (
    <div>#{index + 1} {job.title} · waiting {job.wait}</div>
  )}
/>

Usage notes

Items are controlled and input order is FIFO. Apply sorting or aging before passing them.
An unknown laneId silently omits the item; update lane definitions and mappings together.
Tone is a raw inline CSS value. Token variables need the --color- prefix; see [[hulian-token-color-var-needs-color-prefix]].
Overflow copy is built from Chinese "\u8fd8\u6709 N \u6761", meaning “N more items.”
Lane counts append " \u6761" (“ items”), and empty lanes show "\u961f\u5217\u7a7a\u95f2" (“Queue idle”).

Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable

Playground

Lane DimensionsNumber of items displayed directly in each channel

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

<QueueLane
  lanes={[
    { id: "p0", label: "P0 Emergency", tone: "var(--color-chart-3)", meta: "Equal 0.4s" },
    { id: "p1", label: "P1 High", tone: "var(--color-chart-4)" },
  ]}
  items={queue}
  maxVisible={4}
  onItemClick={(job) => openDetail(job.id)}
  renderItem={(job, i) => <JobCard job={job} rank={i + 1} />}
/>

Usage

Basic usage

lanes defines the lane (id/label/tone color bar/meta indicator), items is grouped by laneId, and the order within the lane is FIFO. The default rendering number of track headers + meta.

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

tsx

<QueueLane
  lanes={[
    { id: "p0", label: "P0 Emergency", tone: "var(--color-chart-3)", meta: "Equal 0.4s" },
    { id: "p1", label: "P1 High", tone: "var(--color-chart-4)", meta: "Equal 1.2s" },
    { id: "p2", label: "P2 Normal", tone: "var(--color-primary)", meta: "Equal 3.5s" },
  ]}
  items={jobs}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

Super long queue collapse

maxVisible limits the number of directly displayed items per channel, and will be folded as "N items remain" if exceeded.

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

tsx

<QueueLane
  lanes={lanes}
  items={jobs}
  maxVisible={4}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

Click to drill down

The card is read-only by default; after passing onItemClick, the card can be clicked/keyboard accessible (Enter/Space) for viewing details without changing the queue order.

Text generation2 itemsThroughput 42/min

Marketing copywriting rewriting#1
Sonnet 4.6etc. 0.8s
Email Drafting#2
Haiku 4.5etc. 1.1s

Code2 itemsThroughput 18/min

Single test completion#1
Sonnet 4.6etc. 1.6s
SQL Optimization Suggestions#2
Opus 4.7etc. 2.2s

Image1 itemThroughput 9/min

Poster generation#1
Image Organizeretc. 4.5s

Search enhancement2 itemsThroughput 65/min

Policy Q&A Recall#1
Haiku 4.5etc. 0.3s
Work order similar search#2
Haiku 4.5etc. 0.5s

tsx

<QueueLane
  lanes={lanes}
  items={jobs}
  onItemClick={(job) => openDetail(job.id)}
  renderItem={(job, i) => <JobCard job={job} index={i} />}
/>

Props

Name	Type	Default	Description
lanes*	`QueueLaneDef[]`	—	Ordered `{id, label, tone?, meta?}` lanes; tone is written directly as a CSS color.
items*	`T[]`	—	Controlled `{id, laneId}` items grouped by lane while preserving input order; unmatched items are omitted.
maxVisible	`number`	—	Maximum directly visible items per lane; omission shows all.
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Lane layout direction.
className	`string`	—	Root class name.

Event

Type

Description

onItemClick

(item: T) => void

Read-only item drill-down.

Slot

Type

Description

renderItem*

(item: T, index: number) => ReactNode

Renders an item; index is its zero-based position within the lane.

renderLaneHeader

(lane: QueueLaneDef, items: T[]) => ReactNode

Custom lane metrics; default shows label, count, and metadata.

interface Job extends QueueItem { title: string; wait: string; executor: string } const lanes: QueueLaneDef[] = [ { id: "p0", label: "P0 Critical", tone: "var(--color-chart-3)", meta: "Avg 0.4s" }, { id: "p1", label: "P1 High", tone: "var(--color-chart-4)", meta: "Avg 1.2s" }, ]; const jobs: Job[] = [ { id: "t1", laneId: "p0", title: "Real-time risk approval", wait: "0.2s", executor: "Sonnet 4.6" }, { id: "t3", laneId: "p1", title: "Ticket intent classification", wait: "0.9s", executor: "Haiku 4.5" }, ]; <QueueLane<Job> lanes={lanes} items={jobs} maxVisible={5} onItemClick={(job) => console.log(job.id)} renderItem={(job, index) => ( <div>#{index + 1} {job.title} · waiting {job.wait}</div> )} />

Usage notes

Items are controlled and input order is FIFO. Apply sorting or aging before passing them.

An unknown laneId silently omits the item; update lane definitions and mappings together.

Tone is a raw inline CSS value. Token variables need the --color- prefix; see [[hulian-token-color-var-needs-color-prefix]].

Overflow copy is built from Chinese "\u8fd8\u6709 N \u6761", meaning “N more items.”

Lane counts append " \u6761" (“ items”), and empty lanes show "\u961f\u5217\u7a7a\u95f2" (“Queue idle”).

Playground

Lane DimensionsNumber of items displayed directly in each channel

P0 Emergency2 itemsEqual 0.4s

Real-time risk control approval#1
Sonnet 4.6etc. 0.2s
Payment abnormality diagnosis#2
Opus 4.7etc. 0.5s

P1 High3 itemsEqual 1.2s

Work order intent classification#1
Haiku 4.5etc. 0.9s
Code review suggestions#2
Sonnet 4.6etc. 1.4s
Contract terms extraction#3
Opus 4.7etc. 1.8s

P2 Normal4 itemsEqual 3.5s

Weekly report summary generation#1
Haiku 4.5etc. 3.1s
Image content review#2
DeepSeek V4etc. 4.0s
FAQ Vector Recall#3
Haiku 4.5etc. 2.7s
Translation batch processing#4
DeepSeek V4etc. 5.2s

P3 Low2 itemsEqual 12s

Historical log archive analysis#1
Haiku 4.5etc. 11s
Offline knowledge base reconstruction#2
DeepSeek V4etc. 18s

<QueueLane
  lanes={[
    { id: "p0", label: "P0 Emergency", tone: "var(--color-chart-3)", meta: "Equal 0.4s" },
    { id: "p1", label: "P1 High", tone: "var(--color-chart-4)" },
  ]}
  items={queue}
  maxVisible={4}
  onItemClick={(job) => openDetail(job.id)}
  renderItem={(job, i) => <JobCard job={job} rank={i + 1} />}
/>

QueueLane

Usage

Basic usage

Super long queue collapse

Click to drill down

When to use

Import

Props

Events

Slots

Example

Usage notes

Related

Playground

QueueLane

Usage

Basic usage

Super long queue collapse

Click to drill down

When to use

Import

Props

Events

Slots

Example

Usage notes

Related

Playground