@pstdio/ui 0.0.1

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

@@ -0,0 +1,231 @@
+export type AgentId = "opencode" | "claude-code";
+
+export type SessionMessageRole = "user" | "assistant" | "tool" | "system" | "developer";
+
+export type TextPart = { type: "text"; text: string };
+
+export type ReasoningPart = { type: "reasoning"; text: string };
+
+export type ToolPartActionType = "read" | "write" | "execute" | "network" | "other";
+
+export type ToolPartStatus = "pending" | "running" | "completed" | "failed" | "denied";
+
+export type ToolPart = {
+  type: "tool";
+  tool: string;
+  callId?: string;
+  actionType?: ToolPartActionType;
+  status?: ToolPartStatus;
+  state?: {
+    status?: string;
+    input?: unknown;
+    output?: unknown;
+    errorText?: string;
+    metadata?: unknown;
+  };
+};
+
+export type StepStartPart = { type: "step-start"; snapshot?: string };
+
+export type StepFinishPart = {
+  type: "step-finish";
+  reason?: string;
+  snapshot?: string;
+  cost?: number;
+  tokens?: unknown;
+};
+
+export type PatchPart = { type: "patch"; hash?: string; files?: unknown };
+
+export type FilePart = { type: "file"; mediaType?: string; filename?: string; url: string };
+
+export type LoadingPart = { type: "loading" };
+
+export type ErrorPart = { type: "error"; errorType: "timeout" | "crash" | "permission" | "other" };
+
+export type TokenUsagePart = {
+  type: "token_usage";
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens?: number;
+  cacheWriteTokens?: number;
+};
+
+export type SessionMessagePart =
+  | TextPart
+  | ReasoningPart
+  | ToolPart
+  | StepStartPart
+  | StepFinishPart
+  | PatchPart
+  | FilePart
+  | LoadingPart
+  | ErrorPart
+  | TokenUsagePart;
+
+export type SessionMessage = {
+  id: string;
+  role: SessionMessageRole;
+  parts: SessionMessagePart[];
+  index?: number;
+  createdAt?: number;
+  modelId?: string;
+  providerId?: string;
+  tokens?: {
+    input?: number;
+    output?: number;
+    reasoning?: number;
+    cache?: { read?: number; write?: number };
+  };
+};
+
+export type SessionStartInput = {
+  prompt: string;
+  title?: string;
+  model?: string | null;
+  cwd?: string;
+  eventStore?: EventStore;
+};
+
+export type SessionStartResult = {
+  sessionId: string;
+  process?: SpawnedProcess;
+};
+
+export type SessionMessageInput = {
+  sessionId: string;
+  prompt: string;
+  model?: string | null;
+  cwd?: string;
+  messageOffset?: number;
+};
+
+export type SessionMessagesInput = {
+  cwd?: string | null;
+};
+
+export type AvailabilityInfo = {
+  type: "INSTALLED" | "NOT_FOUND";
+};
+
+export type AgentModel = {
+  id: string;
+};
+
+export type AgentCapability = "SessionFork" | "ContextUsage" | "Approvals";
+
+// --- Session Management ---
+
+export type SessionListEntry = {
+  id: string;
+  title: string;
+  directory: string;
+  updatedAt: string;
+};
+
+export type SessionExport = {
+  session: SessionListEntry;
+  messages: SessionMessage[];
+};
+
+export type LaunchInput = {
+  prompt: string;
+  title?: string;
+  model?: string | null;
+  cwd?: string;
+};
+
+export type LaunchResult = {
+  pid?: number;
+  sessionId?: string;
+};
+
+// --- Raw Log Events ---
+
+export type RawLogEvent =
+  | { type: "stdout"; data: string }
+  | { type: "stderr"; data: string }
+  | { type: "session_id"; sessionId: string }
+  | { type: "message_id"; messageId: string }
+  | { type: "ready" }
+  | { type: "finished" };
+
+// --- Event Store ---
+
+export type JsonPatch = {
+  op: "add" | "replace" | "remove";
+  path: string;
+  value?: unknown;
+};
+
+export type EventStore = {
+  push(patch: JsonPatch): void;
+  getHistory(): JsonPatch[];
+  subscribe(): AsyncIterable<JsonPatch>;
+  historyPlusStream(): AsyncIterable<JsonPatch>;
+};
+
+// --- Spawned Process ---
+
+export type SpawnedProcess = {
+  sessionId: string;
+  stdin: import("node:stream").Writable;
+  kill(): void;
+  onExit: Promise<{ code: number | null; signal: string | null }>;
+};
+
+export type ResumeResult = {
+  process?: SpawnedProcess;
+};
+
+// --- Approval System ---
+
+export type ApprovalRequest = {
+  id: string;
+  toolName: string;
+  toolInput: unknown;
+  toolUseId: string;
+};
+
+export type ApprovalResponse = {
+  id: string;
+  decision: "approve" | "deny" | "timeout";
+};
+
+export type ApprovalService = {
+  requestApproval(request: ApprovalRequest): Promise<ApprovalResponse>;
+  handleResponse(response: ApprovalResponse): void;
+  dispose(): void;
+};
+
+// --- Agent Service ---
+
+export type AgentService = {
+  id: AgentId;
+  name: string;
+
+  capabilities(): AgentCapability[];
+  checkAvailability(): AvailabilityInfo;
+  listModels(): AgentModel[];
+
+  // session lifecycle (tracked, interactive)
+  startSession(input: SessionStartInput): Promise<SessionStartResult>;
+  resumeSession(
+    input: SessionMessageInput,
+    eventStore: EventStore,
+    approvalService?: ApprovalService,
+  ): Promise<ResumeResult>;
+  getMessages(sessionId: string, input?: SessionMessagesInput): Promise<SessionMessage[]>;
+
+  // session management
+  listSessions(input?: { cwd?: string }): Promise<SessionListEntry[]>;
+  exportSession(sessionId: string): Promise<SessionExport>;
+  launchSession(input: LaunchInput): Promise<LaunchResult>;
+  setSessionTitle?(sessionId: string, title: string): Promise<void>;
+};
+
+export type AgentRegistry = {
+  get(id: AgentId): AgentService | null;
+  list(): AgentService[];
+  checkAll(): Record<AgentId, AvailabilityInfo>;
+};

package/src/components/chat-ui/components/ai-conversation.stories.tsx

@@ -0,0 +1,49 @@
+import { Box, Stack } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { ChatPrimitives } from "./ai-conversation";
+import { ChatMessage } from "./ai-message";
+import { MessagePartsRenderer } from "./message-parts-renderer";
+import { getMessageOrigin, mergeReasoningToolOnlyMessages } from "./message-types";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const meta: Meta<typeof ChatPrimitives.Root> = {
+  title: "Chat UI/AI Conversation",
+  component: ChatPrimitives.Root,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChatPrimitives.Root>;
+
+const storyMessages = mergeReasoningToolOnlyMessages(conversationMessages).slice(-18);
+
+const ConversationPreview = () => {
+  return (
+    <Box h="640px" maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" overflow="hidden">
+      <ChatPrimitives.Root>
+        <ChatPrimitives.Viewport>
+          <Stack gap="sm">
+            {storyMessages.map((message) => (
+              <ChatMessage.Root key={message.id} from={getMessageOrigin(message.role)}>
+                <ChatMessage.Content from={getMessageOrigin(message.role)}>
+                  <MessagePartsRenderer message={message} />
+                </ChatMessage.Content>
+              </ChatMessage.Root>
+            ))}
+          </Stack>
+        </ChatPrimitives.Viewport>
+        <ChatPrimitives.ScrollToBottom aria-label="Scroll to latest message" />
+      </ChatPrimitives.Root>
+    </Box>
+  );
+};
+
+export const FullConversationPreview: Story = {
+  render: () => <ConversationPreview />,
+};

package/src/components/chat-ui/components/ai-conversation.tsx

@@ -0,0 +1,68 @@
+import type { HTMLChakraProps, IconButtonProps } from "@chakra-ui/react";
+import { AbsoluteCenter, chakra, IconButton } from "@chakra-ui/react";
+import { ArrowDownIcon } from "lucide-react";
+import { StickToBottom as StickToBottomEl, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationRootProps = HTMLChakraProps<"div", React.ComponentProps<typeof StickToBottomEl>>;
+
+export const conversationRootDefaultProps = {
+  "aria-roledescription": "conversation",
+  initial: "instant",
+  resize: "instant",
+  role: "log",
+} as const;
+
+export const ConversationRoot = chakra(
+  StickToBottomEl,
+  {
+    base: {
+      position: "relative",
+      flex: 1,
+      overflowY: "auto",
+      height: "full",
+    },
+  },
+  {
+    forwardProps: ["resize"],
+    defaultProps: conversationRootDefaultProps,
+  },
+);
+
+export type ConversationContentProps = HTMLChakraProps<"div">;
+
+export const ConversationContent = chakra(
+  StickToBottomEl.Content,
+  {
+    base: {
+      p: "0",
+    },
+  },
+  {
+    defaultProps: {
+      "aria-live": "polite",
+      role: "list",
+    },
+  },
+);
+
+export type ConversationScrollButtonProps = IconButtonProps;
+
+export const ConversationScrollButton = (props: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  return (
+    !isAtBottom && (
+      <AbsoluteCenter axis="horizontal" bottom="md">
+        <IconButton rounded="full" onClick={() => scrollToBottom()} variant="outline" size="xs" {...props}>
+          <ArrowDownIcon size={16} />
+        </IconButton>
+      </AbsoluteCenter>
+    )
+  );
+};
+
+export const ChatPrimitives = {
+  Root: ConversationRoot,
+  Viewport: ConversationContent,
+  ScrollToBottom: ConversationScrollButton,
+} as const;

package/src/components/chat-ui/components/ai-message.stories.tsx

@@ -0,0 +1,60 @@
+import { Box, Stack } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { ChatMessage } from "./ai-message";
+import { Response } from "./ai-response";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const firstPartText = (message: SessionMessage) => {
+  return message.parts?.find((part) => part.type === "text" && "text" in part)?.text;
+};
+
+const userPromptForStory =
+  conversationMessages
+    .filter((message) => message.role === "user")
+    .map(firstPartText)
+    .find(Boolean) ?? "No user message available.";
+
+const assistantResponseForStory =
+  conversationMessages
+    .filter((message) => message.role === "assistant")
+    .map(firstPartText)
+    .find((text) => typeof text === "string" && text.length > 0) ?? "No assistant message available.";
+
+const meta: Meta<typeof ChatMessage.Root> = {
+  title: "Chat UI/AI Message",
+  component: ChatMessage.Root,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChatMessage.Root>;
+
+const MessagePreview = () => {
+  return (
+    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
+      <Stack gap="sm">
+        <ChatMessage.Root from="user">
+          <ChatMessage.Content from="user">
+            <Response height="auto">{userPromptForStory}</Response>
+          </ChatMessage.Content>
+        </ChatMessage.Root>
+
+        <ChatMessage.Root from="assistant">
+          <ChatMessage.Content from="assistant">
+            <Response height="auto">{assistantResponseForStory}</Response>
+          </ChatMessage.Content>
+        </ChatMessage.Root>
+      </Stack>
+    </Box>
+  );
+};
+
+export const UserAndAssistant: Story = {
+  render: () => <MessagePreview />,
+};

package/src/components/chat-ui/components/ai-message.tsx

@@ -0,0 +1,103 @@
+import type { HTMLChakraProps, RecipeVariantProps } from "@chakra-ui/react";
+import { createSlotRecipeContext, defineSlotRecipe } from "@chakra-ui/react";
+
+const recipe = defineSlotRecipe({
+  className: "ai-message",
+  slots: ["root", "content"],
+  base: {
+    root: {
+      display: "flex",
+      width: "full",
+      alignItems: "end",
+      justifyContent: "end",
+      gap: "sm",
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      textStyle: "sm",
+      overflow: "hidden",
+    },
+  },
+  variants: {
+    from: {
+      user: {
+        root: {
+          mb: "md",
+          flexDirection: "row",
+          "& > div": {
+            marginLeft: "lg",
+          },
+        },
+        content: {
+          bg: "bg.muted",
+          borderBottomRightRadius: 0,
+        },
+      },
+      assistant: {
+        root: {
+          mb: "md",
+          flexDirection: "row",
+          justifyContent: "start",
+          "& > div": {
+            marginRight: "lg",
+          },
+        },
+      },
+      developer: {
+        root: {
+          width: "full",
+          flexDirection: "row-reverse",
+        },
+        content: {
+          width: "full",
+        },
+      },
+    },
+    size: {
+      sm: {
+        root: { gap: "xs" },
+        content: { px: "xs", py: "xs", textStyle: "xs" },
+      },
+      md: {
+        content: { px: "xs", py: "xs" },
+      },
+      lg: {
+        root: { gap: "md" },
+        content: { px: "sm", py: "xs", textStyle: "md" },
+      },
+    },
+    shape: {
+      rounded: {
+        content: { rounded: "lg" },
+      },
+      pill: {
+        content: { rounded: "full" },
+      },
+      square: {
+        content: { rounded: "none" },
+      },
+    },
+  },
+  defaultVariants: {
+    from: "user",
+    size: "md",
+    shape: "rounded",
+  },
+});
+
+const { withProvider, withContext } = createSlotRecipeContext({ recipe });
+
+type VariantProps = RecipeVariantProps<typeof recipe>;
+
+export interface MessageRootProps extends HTMLChakraProps<"div">, VariantProps {}
+export const MessageRoot = withProvider<HTMLDivElement, MessageRootProps>("div", "root");
+
+export interface MessageContentProps extends HTMLChakraProps<"div">, VariantProps {}
+export const MessageContent = withContext<HTMLDivElement, MessageContentProps>("div", "content");
+
+export const ChatMessage = {
+  Root: MessageRoot,
+  Content: MessageContent,
+} as const;

package/src/components/chat-ui/components/ai-response.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { Response } from "./ai-response";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const firstPartText = (message: SessionMessage) => {
+  return message.parts?.find((part) => part.type === "text" && "text" in part)?.text;
+};
+
+const userPromptForStory =
+  conversationMessages
+    .filter((message) => message.role === "user")
+    .map(firstPartText)
+    .find(Boolean) ?? "No user message available.";
+
+const assistantResponseForStory =
+  conversationMessages
+    .filter((message) => message.role === "assistant")
+    .map(firstPartText)
+    .find((text) => typeof text === "string" && text.length > 0) ?? "No assistant message available.";
+
+const meta: Meta<typeof Response> = {
+  title: "Chat UI/AI Response",
+  component: Response,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Response>;
+
+export const AssistantResponse: Story = {
+  args: {
+    children: assistantResponseForStory,
+    height: "auto",
+  },
+};
+
+export const UserPromptAsContent: Story = {
+  args: {
+    children: userPromptForStory,
+    height: "auto",
+  },
+};

package/src/components/chat-ui/components/ai-response.tsx

@@ -0,0 +1,19 @@
+import type { BoxProps } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
+import { RichMessage } from "@/components/rich-text";
+
+export interface ChatRichContentProps extends Omit<BoxProps, "children"> {
+  children: string;
+}
+
+export const ChatRichContent = (props: ChatRichContentProps) => {
+  const { children, ...rest } = props;
+
+  return (
+    <Box {...rest}>
+      <RichMessage defaultState={children} />
+    </Box>
+  );
+};
+
+export const Response = ChatRichContent;

package/src/components/chat-ui/components/approval-prompt.tsx

@@ -0,0 +1,51 @@
+import { Box, Button, Code, Flex, HStack, Text } from "@chakra-ui/react";
+import { ShieldCheck, ShieldX } from "lucide-react";
+
+interface ApprovalPromptProps {
+  toolName: string;
+  toolInput?: unknown;
+  onApprove: () => void;
+  onDeny: () => void;
+}
+
+const formatToolInput = (input: unknown) => {
+  if (input == null) return null;
+
+  const text = typeof input === "string" ? input : JSON.stringify(input, null, 2);
+  if (text.length === 0) return null;
+
+  const truncated = text.length > 200 ? `${text.slice(0, 200)}...` : text;
+  return truncated;
+};
+
+export const ApprovalPrompt = (props: ApprovalPromptProps) => {
+  const { toolName, toolInput, onApprove, onDeny } = props;
+  const formattedInput = formatToolInput(toolInput);
+
+  return (
+    <Box px="sm" py="xs" mx="sm" borderWidth="1px" borderColor="border.warning" borderRadius="lg" bg="bg.warning">
+      <Flex direction="column" gap="xs">
+        <Text textStyle="label/S/medium" color="fg">
+          Allow <Code size="sm">{toolName}</Code>?
+        </Text>
+
+        {formattedInput ? (
+          <Code size="sm" whiteSpace="pre-wrap" maxH="6rem" overflowY="auto">
+            {formattedInput}
+          </Code>
+        ) : null}
+
+        <HStack gap="xs" justifyContent="flex-end">
+          <Button size="xs" variant="outline" onClick={onDeny}>
+            <ShieldX size={14} />
+            Deny
+          </Button>
+          <Button size="xs" colorPalette="green" onClick={onApprove}>
+            <ShieldCheck size={14} />
+            Allow
+          </Button>
+        </HStack>
+      </Flex>
+    </Box>
+  );
+};

package/src/components/chat-ui/components/attachment-list.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AttachmentList } from "./attachment-list";
+
+const meta: Meta<typeof AttachmentList> = {
+  title: "Chat UI/AttachmentList",
+  component: AttachmentList,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AttachmentList>;
+
+const sampleAttachments = ["workspace/analysis/report.md", "workspace/data/users.csv"];
+
+export const Default: Story = {
+  args: {
+    attachments: sampleAttachments,
+    onSelect: (resourceId) => console.log("Selected:", resourceId),
+    onRemove: (resourceId) => console.log("Remove:", resourceId),
+  },
+};