@startsimpli/ui 0.4.42 → 0.4.44

package/src/components/index.ts

@@ -60,6 +60,18 @@ export * from './workspace'
 // Chat surface primitives (ChatThread, ChatMessage, ChatComposer)
 export * from './chat'
 
+// Terminal (xterm.js) — generic presentational terminal + skeleton + themes
+// (startsim-768w.16.7.E). Import styles from '@startsimpli/ui/terminal/styles'.
+export * from './terminal'
+
+// Diff viewer — presentational unified-diff renderer (no fetching)
+export * from './diff'
+
+// Agent-session surfaces (startsim-768w.16.7.E): SessionCard/List/StatusBadge,
+// ConversationTimeline, and the live AgentSessionConsole (driven by
+// @startsimpli/realtime/react). All generic — decoupled from any app model.
+export * from './session'
+
 // Slide-deck viewer (Google-Slides-style canvas + filmstrip)
 export * from './slide-deck'
 
@@ -147,3 +159,6 @@ export type {
   ActivityTypeOption,
   OutcomeOption,
 } from './LogActivityDialog'
+
+// Record detail read-view
+export * from './record-detail'

package/src/components/kanban/KanbanBoard.tsx

@@ -1,6 +1,12 @@
 'use client'
 
 import * as React from 'react'
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type DropResult,
+} from '@hello-pangea/dnd'
 import { cn } from '../../lib/utils'
 
 export interface KanbanColumnConfig {
@@ -9,6 +15,36 @@ export interface KanbanColumnConfig {
   color?: string
 }
 
+/** A resolved card move derived from a drag, in board terms (not DnD terms). */
+export interface KanbanMove {
+  cardId: string
+  fromColumnId: string
+  toColumnId: string
+  toIndex: number
+}
+
+/**
+ * Pure resolver: turn a @hello-pangea/dnd DropResult into a KanbanMove, or null
+ * when the drag is a no-op (dropped outside any column, or back onto the same slot).
+ * Exported so consumers and tests can reason about a move without a DOM.
+ */
+export function resolveKanbanMove(result: DropResult): KanbanMove | null {
+  const { draggableId, source, destination } = result
+  if (!destination) return null
+  if (
+    source.droppableId === destination.droppableId &&
+    source.index === destination.index
+  ) {
+    return null
+  }
+  return {
+    cardId: draggableId,
+    fromColumnId: source.droppableId,
+    toColumnId: destination.droppableId,
+    toIndex: destination.index,
+  }
+}
+
 export interface KanbanBoardProps<T> {
   columns: KanbanColumnConfig[]
   items: Record<string, T[]>
@@ -20,6 +56,15 @@ export interface KanbanBoardProps<T> {
   columnRef?: (columnId: string) => React.Ref<HTMLDivElement> | undefined
   isColumnOver?: (columnId: string) => boolean
   className?: string
+  /**
+   * DnD (opt-in). Provide BOTH `getCardId` and `onCardMove` to make cards draggable
+   * between columns via @hello-pangea/dnd — all drag mechanics live here in
+   * @startsimpli/ui; consumers stay dnd-agnostic and just persist the move in
+   * `onCardMove`. Omit either and the board renders exactly as before (no DnD;
+   * `columnRef`/`isColumnOver` honored for a parent's own manual wiring).
+   */
+  getCardId?: (item: T) => string
+  onCardMove?: (move: KanbanMove) => void
 }
 
 export function KanbanBoard<T>({
@@ -33,71 +78,135 @@ export function KanbanBoard<T>({
   columnRef,
   isColumnOver,
   className,
+  getCardId,
+  onCardMove,
 }: KanbanBoardProps<T>) {
-  return (
-    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
-      {columns.map((column) => {
-        const columnItems = items[column.id] ?? []
-        const ref = columnRef?.(column.id)
-        const isOver = isColumnOver?.(column.id) ?? false
+  const dndEnabled = !!(getCardId && onCardMove)
 
-        return (
-          <div
-            key={column.id}
-            ref={ref}
-            style={{ minWidth: columnWidth, maxWidth: columnWidth }}
-            className={cn(
-              'flex flex-col rounded-lg border bg-muted/50 transition-colors',
-              isOver && 'border-primary ring-2 ring-primary/20',
-            )}
-          >
-            {/* Column Header */}
-            {renderColumnHeader ? (
-              renderColumnHeader(column, columnItems)
-            ) : (
-              <div className="flex items-center justify-between px-3 py-2 border-b">
-                <div className="flex items-center gap-2">
-                  {column.color && (
-                    <span
-                      className="w-2.5 h-2.5 rounded-full shrink-0"
-                      style={{ backgroundColor: column.color }}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <h3 className="text-sm font-semibold text-foreground truncate">
-                    {column.label}
-                  </h3>
-                </div>
-                <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
-                  {columnItems.length}
-                </span>
-              </div>
-            )}
+  const handleDragEnd = React.useCallback(
+    (result: DropResult) => {
+      const move = resolveKanbanMove(result)
+      if (move) onCardMove?.(move)
+    },
+    [onCardMove],
+  )
+
+  const columnHeader = (column: KanbanColumnConfig, columnItems: T[]) =>
+    renderColumnHeader ? (
+      renderColumnHeader(column, columnItems)
+    ) : (
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <div className="flex items-center gap-2">
+          {column.color && (
+            <span
+              className="w-2.5 h-2.5 rounded-full shrink-0"
+              style={{ backgroundColor: column.color }}
+              aria-hidden="true"
+            />
+          )}
+          <h3 className="text-sm font-semibold text-foreground truncate">
+            {column.label}
+          </h3>
+        </div>
+        <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          {columnItems.length}
+        </span>
+      </div>
+    )
+
+  const emptyState = (
+    <p className="text-xs text-muted-foreground text-center py-8">
+      {emptyColumnMessage}
+    </p>
+  )
 
-            {/* Column Body */}
-            <div className="flex-1 overflow-y-auto p-2 space-y-2">
-              {columnItems.length === 0 ? (
-                <p className="text-xs text-muted-foreground text-center py-8">
-                  {emptyColumnMessage}
-                </p>
-              ) : (
-                columnItems.map((item, index) => (
-                  <React.Fragment key={index}>
-                    {renderCard(item)}
-                  </React.Fragment>
-                ))
-              )}
-            </div>
+  const renderColumn = (column: KanbanColumnConfig) => {
+    const columnItems = items[column.id] ?? []
+    const footer = renderColumnFooter && (
+      <div className="border-t px-3 py-2">{renderColumnFooter(column)}</div>
+    )
 
-            {/* Column Footer */}
-            {renderColumnFooter && (
-              <div className="border-t px-3 py-2">
-                {renderColumnFooter(column)}
+    if (dndEnabled) {
+      return (
+        <div
+          key={column.id}
+          style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+          className="flex flex-col rounded-lg border bg-muted/50 transition-colors"
+        >
+          {columnHeader(column, columnItems)}
+          <Droppable droppableId={column.id}>
+            {(provided, snapshot) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+                className={cn(
+                  'flex-1 overflow-y-auto p-2 space-y-2 transition-colors',
+                  snapshot.isDraggingOver && 'bg-primary/5',
+                )}
+              >
+                {columnItems.length === 0 && !snapshot.isDraggingOver
+                  ? emptyState
+                  : columnItems.map((item, index) => {
+                      const id = getCardId!(item)
+                      return (
+                        <Draggable key={id} draggableId={id} index={index}>
+                          {(dp, ds) => (
+                            <div
+                              ref={dp.innerRef}
+                              {...dp.draggableProps}
+                              {...dp.dragHandleProps}
+                              className={cn(ds.isDragging && 'opacity-80')}
+                            >
+                              {renderCard(item)}
+                            </div>
+                          )}
+                        </Draggable>
+                      )
+                    })}
+                {provided.placeholder}
               </div>
             )}
-          </div>
-        )
-      })}
+          </Droppable>
+          {footer}
+        </div>
+      )
+    }
+
+    // Non-DnD (backward compatible): honor columnRef/isColumnOver for a parent's own
+    // manual drag wiring, render cards keyed by index as before.
+    const ref = columnRef?.(column.id)
+    const isOver = isColumnOver?.(column.id) ?? false
+    return (
+      <div
+        key={column.id}
+        ref={ref}
+        style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+        className={cn(
+          'flex flex-col rounded-lg border bg-muted/50 transition-colors',
+          isOver && 'border-primary ring-2 ring-primary/20',
+        )}
+      >
+        {columnHeader(column, columnItems)}
+        <div className="flex-1 overflow-y-auto p-2 space-y-2">
+          {columnItems.length === 0
+            ? emptyState
+            : columnItems.map((item, index) => (
+                <React.Fragment key={index}>{renderCard(item)}</React.Fragment>
+              ))}
+        </div>
+        {footer}
+      </div>
+    )
+  }
+
+  const board = (
+    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+      {columns.map(renderColumn)}
     </div>
   )
+
+  if (dndEnabled) {
+    return <DragDropContext onDragEnd={handleDragEnd}>{board}</DragDropContext>
+  }
+  return board
 }

package/src/components/kanban/__tests__/kanban.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import { KanbanBoard } from '../KanbanBoard'
+import type { DropResult } from '@hello-pangea/dnd'
+import { KanbanBoard, resolveKanbanMove } from '../KanbanBoard'
 
 interface Card {
   id: string
@@ -154,4 +155,66 @@ describe('KanbanBoard', () => {
     const firstCol = container.querySelector('[style*="320"]')
     expect(firstCol).toHaveClass('ring-2')
   })
+
+  it('renders draggable cards when getCardId + onCardMove are provided (DnD enabled)', () => {
+    const onCardMove = jest.fn()
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        getCardId={(c) => c.id}
+        onCardMove={onCardMove}
+      />
+    )
+    // cards still render through the @hello-pangea/dnd path without crashing
+    expect(screen.getByTestId('card-1')).toBeInTheDocument()
+    expect(screen.getByTestId('card-3')).toBeInTheDocument()
+    expect(screen.getByText('To Do')).toBeInTheDocument()
+  })
+})
+
+describe('resolveKanbanMove', () => {
+  const drop = (
+    draggableId: string,
+    from: string,
+    fromIndex: number,
+    to?: string,
+    toIndex?: number,
+  ): DropResult =>
+    ({
+      draggableId,
+      type: 'DEFAULT',
+      source: { droppableId: from, index: fromIndex },
+      destination: to === undefined ? null : { droppableId: to, index: toIndex ?? 0 },
+      reason: 'DROP',
+      mode: 'FLUID',
+      combine: null,
+    } as unknown as DropResult)
+
+  it('resolves a cross-column move', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0, 'surfaced', 2))).toEqual({
+      cardId: 'c1',
+      fromColumnId: 'new',
+      toColumnId: 'surfaced',
+      toIndex: 2,
+    })
+  })
+
+  it('returns null when dropped outside any column', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0))).toBeNull()
+  })
+
+  it('returns null when dropped back onto the same slot', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 1, 'new', 1))).toBeNull()
+  })
+
+  it('resolves a within-column reorder', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0, 'new', 3))).toEqual({
+      cardId: 'c1',
+      fromColumnId: 'new',
+      toColumnId: 'new',
+      toIndex: 3,
+    })
+  })
 })

package/src/components/kanban/index.ts

@@ -1,2 +1,2 @@
-export { KanbanBoard } from './KanbanBoard'
-export type { KanbanBoardProps, KanbanColumnConfig } from './KanbanBoard'
+export { KanbanBoard, resolveKanbanMove } from './KanbanBoard'
+export type { KanbanBoardProps, KanbanColumnConfig, KanbanMove } from './KanbanBoard'

package/src/components/record-detail/RecordDetail.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export type RecordFieldKind = 'text' | 'longtext' | 'url' | 'boolean' | 'json'
+
+export interface RecordField {
+  label: string
+  value: string
+  kind?: RecordFieldKind
+}
+
+export interface RecordDetailProps {
+  fields: RecordField[]
+  emptyMessage?: string
+  className?: string
+}
+
+const URL_RE = /^https?:\/\//i
+
+/**
+ * Read-optimized view of a record's fields (startsim-768w.17.4). Renders short
+ * fields as a compact label/value list (auto-linking urls), long-text fields as
+ * readable, newline-preserving prose blocks (right for extracted article bodies),
+ * and json as a scrollable code block. Generic: a consumer maps its own schema to
+ * `fields` and this owns the layout, so every Foundry tenant's detail drawer reads
+ * the same without duplicating the view.
+ */
+export function RecordDetail({ fields, emptyMessage = 'No details.', className }: RecordDetailProps) {
+  const present = fields.filter((f) => f.value != null && String(f.value).trim() !== '')
+  const shorts = present.filter((f) => f.kind !== 'longtext' && f.kind !== 'json')
+  const longs = present.filter((f) => f.kind === 'longtext')
+  const jsons = present.filter((f) => f.kind === 'json')
+
+  if (present.length === 0) {
+    return <p className={cn('text-sm text-muted-foreground', className)}>{emptyMessage}</p>
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {shorts.length > 0 && (
+        <dl className="space-y-1.5">
+          {shorts.map((f, i) => {
+            const isUrl = f.kind === 'url' || URL_RE.test(f.value)
+            return (
+              <div key={i} className="flex gap-2 text-sm">
+                <dt className="w-28 shrink-0 capitalize text-muted-foreground">{f.label}</dt>
+                <dd className="min-w-0 flex-1 break-words">
+                  {isUrl ? (
+                    <a
+                      href={f.value}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="break-all text-primary underline underline-offset-2 hover:no-underline"
+                    >
+                      {f.value}
+                    </a>
+                  ) : (
+                    f.value
+                  )}
+                </dd>
+              </div>
+            )
+          })}
+        </dl>
+      )}
+
+      {longs.map((f, i) => (
+        <section key={i} className="space-y-1.5">
+          <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {f.label}
+          </h4>
+          <div className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
+            {f.value}
+          </div>
+        </section>
+      ))}
+
+      {jsons.map((f, i) => (
+        <section key={i} className="space-y-1.5">
+          <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {f.label}
+          </h4>
+          <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed">
+            {f.value}
+          </pre>
+        </section>
+      ))}
+    </div>
+  )
+}

package/src/components/record-detail/__tests__/record-detail.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import { RecordDetail, type RecordField } from '../RecordDetail'
+
+const fields: RecordField[] = [
+  { label: 'url', value: 'https://example.com/a', kind: 'url' },
+  { label: 'source', value: 'The National', kind: 'text' },
+  { label: 'content', value: 'Para one.\nPara two.', kind: 'longtext' },
+  { label: 'empty', value: '', kind: 'text' },
+]
+
+describe('RecordDetail', () => {
+  it('renders a url field as a new-tab clickable link', () => {
+    render(<RecordDetail fields={fields} />)
+    const link = screen.getByRole('link', { name: 'https://example.com/a' })
+    expect(link).toHaveAttribute('href', 'https://example.com/a')
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'))
+  })
+
+  it('renders long-text as a newline-preserving prose block', () => {
+    const { container } = render(<RecordDetail fields={fields} />)
+    const prose = container.querySelector('.whitespace-pre-wrap')
+    expect(prose).toBeInTheDocument()
+    expect(prose?.textContent).toContain('Para one.')
+    expect(prose?.textContent).toContain('Para two.')
+  })
+
+  it('skips empty fields', () => {
+    render(<RecordDetail fields={fields} />)
+    expect(screen.queryByText('empty')).not.toBeInTheDocument()
+  })
+
+  it('auto-links a text field whose value looks like a url', () => {
+    render(<RecordDetail fields={[{ label: 'link', value: 'https://x.io', kind: 'text' }]} />)
+    expect(screen.getByRole('link', { name: 'https://x.io' })).toBeInTheDocument()
+  })
+
+  it('shows the empty message when no field has a value', () => {
+    render(<RecordDetail fields={[{ label: 'a', value: '' }]} emptyMessage="Nothing here" />)
+    expect(screen.getByText('Nothing here')).toBeInTheDocument()
+  })
+})

package/src/components/record-detail/index.ts

@@ -0,0 +1,2 @@
+export { RecordDetail } from './RecordDetail'
+export type { RecordDetailProps, RecordField, RecordFieldKind } from './RecordDetail'