@pstdio/ui 0.0.1

package/src/components/chat-ui/components/message-types.ts

@@ -0,0 +1,40 @@
+import type { SessionMessage, SessionMessagePart, ToolPart } from "../agent-types";
+
+export type { SessionMessage, SessionMessagePart, ToolPart };
+
+export type MessageOrigin = "user" | "assistant" | "developer";
+
+export const getMessageOrigin = (role: string): MessageOrigin => {
+  if (role === "user" || role === "assistant" || role === "developer") return role;
+  return "assistant";
+};
+
+export const isReasoningToolOnlyMessage = (message: SessionMessage) => {
+  const parts = message.parts ?? [];
+  if (parts.length === 0) return false;
+
+  const hasTextPart = parts.some((part) => part.type === "text" && "text" in part);
+  if (hasTextPart) return false;
+
+  return parts.some((part) => part.type === "reasoning" || part.type === "tool");
+};
+
+export const mergeReasoningToolOnlyMessages = (messages: SessionMessage[]) => {
+  const merged: SessionMessage[] = [];
+
+  for (const message of messages) {
+    const previous = merged[merged.length - 1];
+
+    if (previous && previous.role === message.role && isReasoningToolOnlyMessage(message)) {
+      previous.parts = [...(previous.parts ?? []), ...(message.parts ?? [])];
+      continue;
+    }
+
+    merged.push({
+      ...message,
+      parts: [...(message.parts ?? [])],
+    });
+  }
+
+  return merged;
+};

package/src/components/chat-ui/components/model-swap-separator.stories.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ModelSwapSeparator } from "./model-swap-separator";
+
+const meta: Meta<typeof ModelSwapSeparator> = {
+  title: "Chat UI/Model Swap Separator",
+  component: ModelSwapSeparator,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModelSwapSeparator>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
+      <ModelSwapSeparator {...args} />
+    </Box>
+  ),
+  args: {
+    fromModel: "GPT-5.3-Codex",
+    toModel: "GPT-5.2",
+  },
+};

package/src/components/chat-ui/components/model-swap-separator.tsx

@@ -0,0 +1,20 @@
+import { HStack, Separator, Text } from "@chakra-ui/react";
+
+export interface ModelSwapSeparatorProps {
+  fromModel: string;
+  toModel: string;
+}
+
+export const ModelSwapSeparator = (props: ModelSwapSeparatorProps) => {
+  const { fromModel, toModel } = props;
+
+  return (
+    <HStack width="full" gap="xs" py="xs" align="center">
+      <Separator flex="1" variant="dashed" />
+      <Text textStyle="label/XS/regular" color="fg.muted" textAlign="center" flexShrink="0">
+        Model changed from {fromModel} to {toModel}.
+      </Text>
+      <Separator flex="1" variant="dashed" />
+    </HStack>
+  );
+};

package/src/components/chat-ui/components/send-button.tsx

@@ -0,0 +1,56 @@
+import { IconButton, type IconButtonProps, Kbd, Portal, Tooltip } from "@chakra-ui/react";
+import { ArrowUp, Square } from "lucide-react";
+
+export interface SendButtonProps extends IconButtonProps {
+  shortcut?: string;
+  title?: string;
+  canInterrupt: boolean;
+}
+
+export const SendButton = (props: SendButtonProps) => {
+  const { title, shortcut, canInterrupt, ...rest } = props;
+  const ariaLabel = rest["aria-label"] ?? title;
+
+  const icon = canInterrupt ? (
+    <Square size={16} strokeWidth={2} fill="currentColor" />
+  ) : (
+    <ArrowUp size={16} strokeWidth={2} />
+  );
+
+  const button = (
+    <IconButton
+      size="sm"
+      variant="solid"
+      borderRadius="full"
+      colorPalette="primary"
+      aria-label={ariaLabel}
+      title={title}
+      {...rest}
+    >
+      {icon}
+    </IconButton>
+  );
+
+  if (title) {
+    const tooltipContent = shortcut ? (
+      <>
+        {title} <Kbd fontSize="xs">{shortcut}</Kbd>
+      </>
+    ) : (
+      title
+    );
+
+    return (
+      <Tooltip.Root closeDelay={50} openDelay={100}>
+        <Tooltip.Trigger asChild>{button}</Tooltip.Trigger>
+        <Portal>
+          <Tooltip.Positioner>
+            <Tooltip.Content>{tooltipContent}</Tooltip.Content>
+          </Tooltip.Positioner>
+        </Portal>
+      </Tooltip.Root>
+    );
+  }
+
+  return button;
+};

package/src/components/chat-ui/components/timeline.tsx

@@ -0,0 +1,414 @@
+import { Avatar, Box, Button, Card, Timeline as ChakraTimeline, Link, Span, Stack, Text } from "@chakra-ui/react";
+import { ChevronUpIcon } from "lucide-react";
+import type { MouseEvent, ReactNode } from "react";
+import { useState } from "react";
+import { DiffBubble } from "@/components/diff-bubble";
+import { DiffEditor } from "@/components/diff-editor";
+import { ResourceBadge } from "@/components/resource-badge";
+import type { IconName } from "../utils/get-icon";
+import { getIconComponent } from "../utils/get-icon";
+
+export const Timeline = ChakraTimeline;
+
+export type TimelineDoc = {
+  items: Item[];
+};
+
+export type Item = {
+  id?: string;
+  timestamp?: string;
+  indicator?: Indicator;
+  title: TitleSegment[];
+  blocks?: Block[];
+  expandable?: boolean;
+};
+
+export type Indicator =
+  | { type: "icon"; icon: IconName; color?: string }
+  | { type: "avatar"; src: string; alt?: string }
+  | { type: "none" };
+
+export type TitleSegment =
+  | { kind: "text"; text: string; bold?: boolean; muted?: boolean }
+  | { kind: "avatar"; src: string; alt?: string }
+  | { kind: "diff"; fileName: string; filePath?: string; additions?: number; deletions?: number }
+  | {
+      kind: "link";
+      text: string;
+      href?: string;
+      filePath?: string;
+      bold?: boolean;
+      muted?: boolean;
+      variant?: "default" | "bubble";
+    };
+
+export type Block =
+  | { type: "comment"; text: string; reactions?: { clap?: number } }
+  | { type: "code"; language: string; code: string; editable?: boolean }
+  | { type: "diff"; language?: string; original: string; modified: string; sideBySide?: boolean }
+  | { type: "input"; placeholder?: string }
+  | { type: "text"; text: string }
+  | { type: "references"; references: string[] }
+  | { type: "component"; render: (ctx: { onOpenFile?: (filePath: string) => void }) => ReactNode };
+
+const handleTitleLinkClick = (
+  event: MouseEvent<HTMLAnchorElement>,
+  seg: Extract<TitleSegment, { kind: "link" }>,
+  onOpenFile?: (filePath: string) => void,
+  stopPropagation = false,
+) => {
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+
+  if (!seg.href) {
+    event.preventDefault();
+  }
+  if (seg.filePath) {
+    onOpenFile?.(seg.filePath);
+  }
+};
+
+function AvatarTitleSegment({ seg }: { seg: Extract<TitleSegment, { kind: "avatar" }> }) {
+  return (
+    <Avatar.Root width="1.5rem" height="1.5rem">
+      <Avatar.Image src={seg.src} alt={seg.alt} />
+      <Avatar.Fallback />
+    </Avatar.Root>
+  );
+}
+
+function DiffTitleSegment({
+  seg,
+  onOpenFile,
+}: {
+  seg: Extract<TitleSegment, { kind: "diff" }>;
+  onOpenFile?: (filePath: string) => void;
+}) {
+  return (
+    <DiffBubble
+      fileName={seg.fileName}
+      additions={seg.additions ?? 0}
+      deletions={seg.deletions ?? 0}
+      onClickFileLink={() => {
+        const path = seg.filePath ?? seg.fileName;
+        onOpenFile?.(path);
+      }}
+    />
+  );
+}
+
+function BubbleLinkTitleSegment({
+  seg,
+  onOpenFile,
+}: {
+  seg: Extract<TitleSegment, { kind: "link" }>;
+  onOpenFile?: (filePath: string) => void;
+}) {
+  const fontWeight = seg.bold ? "medium" : undefined;
+  const isInteractive = Boolean(seg.href || seg.filePath);
+
+  return (
+    <Link
+      href={seg.href ?? "#"}
+      fontWeight={fontWeight}
+      color={seg.muted ? "fg.muted" : "fg.muted"}
+      textDecoration="none"
+      cursor={isInteractive ? "pointer" : "default"}
+      onClick={(event) => handleTitleLinkClick(event, seg, onOpenFile, true)}
+      _hover={{
+        textDecoration: "underline",
+        color: seg.muted ? "fg.muted" : "fg.blue-dark",
+      }}
+    >
+      {seg.text}
+    </Link>
+  );
+}
+
+function DefaultLinkTitleSegment({
+  seg,
+  onOpenFile,
+}: {
+  seg: Extract<TitleSegment, { kind: "link" }>;
+  onOpenFile?: (filePath: string) => void;
+}) {
+  const fontWeight = seg.bold ? "medium" : undefined;
+
+  return (
+    <Link
+      href={seg.href ?? "#"}
+      fontWeight={fontWeight}
+      color={seg.muted ? "fg.muted" : "accent.primary"}
+      textDecoration="underline"
+      onClick={(event) => handleTitleLinkClick(event, seg, onOpenFile)}
+      _hover={{
+        color: seg.muted ? "fg.muted" : "accent.primary",
+        textDecoration: "underline",
+      }}
+    >
+      {seg.text}
+    </Link>
+  );
+}
+
+function TextTitleSegment({
+  seg,
+  isClickable,
+}: {
+  seg: Extract<TitleSegment, { kind: "text" }>;
+  isClickable?: boolean;
+}) {
+  return (
+    <Span
+      fontWeight={seg.bold ? "medium" : undefined}
+      color="fg.muted"
+      _groupHover={{
+        color: isClickable && !seg.muted ? "fg" : "fg.muted",
+      }}
+    >
+      {seg.text}
+    </Span>
+  );
+}
+
+function TitleInline({
+  seg,
+  isClickable,
+  onOpenFile,
+}: {
+  seg: TitleSegment;
+  isClickable?: boolean;
+  onOpenFile?: (filePath: string) => void;
+}) {
+  switch (seg.kind) {
+    case "avatar":
+      return <AvatarTitleSegment seg={seg} />;
+    case "diff":
+      return <DiffTitleSegment seg={seg} onOpenFile={onOpenFile} />;
+    case "link":
+      return seg.variant === "bubble" ? (
+        <BubbleLinkTitleSegment seg={seg} onOpenFile={onOpenFile} />
+      ) : (
+        <DefaultLinkTitleSegment seg={seg} onOpenFile={onOpenFile} />
+      );
+    case "text":
+      return <TextTitleSegment seg={seg} isClickable={isClickable} />;
+    default:
+      return null;
+  }
+}
+
+function IndicatorView({ ind }: { ind?: Indicator }) {
+  if (!ind || ind.type === "none") return null;
+
+  if (ind.type === "icon") {
+    const IndicatorIcon = getIconComponent(ind.icon);
+    return (
+      <Timeline.Indicator outline="none" shadow="none" border="none" background="bg" color="fg">
+        <Span display="inline-flex" alignItems="center">
+          <IndicatorIcon size={14} strokeWidth={1} />
+        </Span>
+      </Timeline.Indicator>
+    );
+  }
+
+  return (
+    <Timeline.Indicator>
+      <Avatar.Root boxSize="full">
+        <Avatar.Image src={ind.src} alt={ind.alt} />
+        <Avatar.Fallback />
+      </Avatar.Root>
+    </Timeline.Indicator>
+  );
+}
+
+function CodeBlock({ code, language }: { code: string; language?: string }) {
+  return (
+    <Box
+      as="pre"
+      background="bg.muted"
+      color="fg"
+      borderRadius="md"
+      padding="sm"
+      fontFamily="mono"
+      fontSize="xs"
+      lineHeight="shorter"
+      overflowX="auto"
+      whiteSpace="pre"
+      aria-label={language ? `${language} code block` : "code block"}
+    >
+      <Box as="code">{code}</Box>
+    </Box>
+  );
+}
+
+function BlockView({ b, onOpenFile }: { b: Block; onOpenFile?: (filePath: string) => void }) {
+  switch (b.type) {
+    case "comment":
+      return (
+        <Card.Root>
+          <Card.Body>{b.text}</Card.Body>
+          {b.reactions?.clap ? (
+            <Card.Footer>
+              <Button>👏 {b.reactions.clap}</Button>
+            </Card.Footer>
+          ) : null}
+        </Card.Root>
+      );
+    case "code":
+      return (
+        <Card.Root border="0" padding="0">
+          <Card.Body padding="0">
+            <CodeBlock language={b.language} code={b.code} />
+          </Card.Body>
+        </Card.Root>
+      );
+    case "diff":
+      return (
+        <Card.Root border="0" padding="0">
+          <Card.Body padding="0">
+            <Box height="240px" minW="320px" overflow="hidden">
+              <DiffEditor
+                original={b.original}
+                modified={b.modified}
+                language={b.language}
+                sideBySide={b.sideBySide ?? false}
+                disableScroll={true}
+              />
+            </Box>
+          </Card.Body>
+        </Card.Root>
+      );
+    case "text":
+      return (
+        <Card.Root background="transparent">
+          <Card.Body padding="sm">
+            <Text textStyle="label/S/regular">{b.text}</Text>
+          </Card.Body>
+        </Card.Root>
+      );
+    case "references":
+      return (
+        <Stack mt="xs" gap="xs" flexDir="row" flexWrap="wrap">
+          {b.references.map((ref) => (
+            <ResourceBadge key={ref} fileName={ref} />
+          ))}
+        </Stack>
+      );
+    case "component":
+      return <>{b.render({ onOpenFile })}</>;
+  }
+}
+
+function TimelineItemRow({
+  item,
+  itemKey,
+  isOpen,
+  canExpand,
+  hasBlocks,
+  onToggle,
+  onOpenFile,
+}: {
+  item: Item;
+  itemKey: string;
+  isOpen: boolean;
+  canExpand: boolean;
+  hasBlocks: boolean;
+  onToggle: (key: string) => void;
+  onOpenFile?: (filePath: string) => void;
+}) {
+  return (
+    <Timeline.Item gap="xs" key={itemKey}>
+      <Timeline.Connector>
+        <Timeline.Separator />
+        <IndicatorView ind={item.indicator} />
+      </Timeline.Connector>
+      <Timeline.Content pb="xs">
+        {item.title.length > 0 && (
+          <Timeline.Title
+            className="group"
+            fontWeight="normal"
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            cursor={canExpand ? "pointer" : "default"}
+            onClick={canExpand ? () => onToggle(itemKey) : undefined}
+          >
+            <Span display="inline-flex" alignItems="center" gap="sm" flexWrap="wrap">
+              <Span display="inline-flex" alignItems="center" gap="xs" flexWrap="wrap">
+                {item.title.map((seg, i) => (
+                  <TitleInline key={i} seg={seg} isClickable={canExpand} onOpenFile={onOpenFile} />
+                ))}
+              </Span>
+              {canExpand ? (
+                <Span
+                  display="inline-flex"
+                  alignItems="center"
+                  transition="transform 200ms ease, color 200ms ease"
+                  transform={isOpen ? "rotate(0deg)" : "rotate(-180deg)"}
+                  color="transparent"
+                  _groupHover={{ color: "fg" }}
+                >
+                  <ChevronUpIcon size={12} />
+                </Span>
+              ) : null}
+            </Span>
+          </Timeline.Title>
+        )}
+        {hasBlocks ? (
+          <Box display="grid" gridTemplateRows={isOpen ? "1fr" : "0fr"} transition="grid-template-rows 220ms ease">
+            {isOpen ? (
+              <Box
+                overflow="hidden"
+                opacity={1}
+                transform="translateY(0)"
+                transition="opacity 200ms ease, transform 200ms ease"
+              >
+                {item.blocks!.map((block, i) => (
+                  <Box key={i}>
+                    <BlockView b={block} onOpenFile={onOpenFile} />
+                  </Box>
+                ))}
+              </Box>
+            ) : null}
+          </Box>
+        ) : null}
+      </Timeline.Content>
+    </Timeline.Item>
+  );
+}
+
+export function TimelineFromJSON({ data, onOpenFile }: { data: TimelineDoc; onOpenFile?: (filePath: string) => void }) {
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const getKey = (it: Item, idx: number) => (it.id ? `id:${it.id}` : `idx:${idx}`);
+
+  const toggle = (key: string) => {
+    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <Timeline.Root>
+      {data.items.map((item, idx) => {
+        const key = getKey(item, idx);
+        const hasBlocks = (item.blocks?.length ?? 0) > 0;
+        const canExpand = (item.expandable ?? true) && hasBlocks;
+        const isOpen = canExpand ? (expanded[key] ?? false) : hasBlocks;
+
+        return (
+          <TimelineItemRow
+            key={key}
+            item={item}
+            itemKey={key}
+            isOpen={isOpen}
+            canExpand={canExpand}
+            hasBlocks={hasBlocks}
+            onToggle={toggle}
+            onOpenFile={onOpenFile}
+          />
+        );
+      })}
+    </Timeline.Root>
+  );
+}

package/src/components/chat-ui/components/tool-invocation-timeline.stories.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage, ToolPart } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { ToolInvocationTimeline } from "./tool-invocation-timeline";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const toolInvocations = conversationMessages
+  .flatMap((message) => message.parts ?? [])
+  .filter((part): part is ToolPart => part.type === "tool")
+  .slice(0, 10);
+
+const meta: Meta<typeof ToolInvocationTimeline> = {
+  title: "Chat UI/Tool Invocation Timeline",
+  component: ToolInvocationTimeline,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToolInvocationTimeline>;
+
+export const FromConversationData: Story = {
+  render: () => (
+    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
+      <ToolInvocationTimeline invocations={toolInvocations} />
+    </Box>
+  ),
+};

package/src/components/chat-ui/components/tool-invocation-timeline.tsx

@@ -0,0 +1,16 @@
+import { buildTimelineDocFromInvocations } from "../tool-rendering";
+import type { ToolPart } from "./message-types";
+import { TimelineFromJSON } from "./timeline";
+
+export interface ToolInvocationTimelineProps {
+  invocations: ToolPart[];
+  labeledBlocks?: boolean;
+  onOpenFile?: (filePath: string) => void;
+}
+
+export function ToolInvocationTimeline(props: ToolInvocationTimelineProps) {
+  const { invocations, labeledBlocks, onOpenFile } = props;
+  const data = buildTimelineDocFromInvocations(invocations, { labeledBlocks });
+
+  return <TimelineFromJSON data={data} onOpenFile={onOpenFile} />;
+}