@pstdio/ui 0.0.3 → 0.1.0

package/src/components/button.stories.tsx

@@ -1,151 +0,0 @@
-import type { ButtonProps } from "@chakra-ui/react";
-import { Box, Button, HStack, Icon, IconButton, SimpleGrid, Stack, Text } from "@chakra-ui/react";
-import { Download, Plus, Settings, Trash2 } from "lucide-react";
-import type { ReactNode } from "react";
-
-type StoryFn = () => ReactNode;
-
-interface ButtonVariantOption {
-  label: string;
-  description: string;
-  variant: ButtonProps["variant"] | "primary";
-}
-
-interface ButtonSizeOption {
-  label: string;
-  helper: string;
-  size: ButtonProps["size"];
-}
-
-const buttonVariants: ButtonVariantOption[] = [
-  { label: "Primary", description: "Brand action style using accent tokens.", variant: "primary" },
-  { label: "Solid", description: "Primary calls to action.", variant: "solid" },
-  { label: "Surface", description: "Secondary surfaces with borders.", variant: "surface" },
-  { label: "Outline", description: "Neutral outlines for quiet actions.", variant: "outline" },
-  { label: "Ghost", description: "Low emphasis actions in dense UI.", variant: "ghost" },
-  { label: "Subtle", description: "Low-contrast background actions.", variant: "subtle" },
-  { label: "Plain", description: "Inline link-style actions.", variant: "plain" },
-];
-
-const buttonSizes: ButtonSizeOption[] = [
-  { label: "Small", helper: "Dense toolbars and tables.", size: "sm" },
-  { label: "Medium", helper: "Default buttons across the app.", size: "md" },
-  { label: "Large", helper: "Primary CTAs in dialogs.", size: "lg" },
-  { label: "2XL", helper: "Hero CTAs on landing surfaces.", size: "2xl" },
-];
-
-const meta = {
-  title: "Components/Button",
-  component: Button,
-  decorators: [
-    (Story: StoryFn) => (
-      <Box padding="sm" background="bg">
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-export const Variants = {
-  render: () => (
-    <SimpleGrid columns={{ base: 1, lg: 2 }} gap="md">
-      {buttonVariants.map((variant) => (
-        <Box
-          key={variant.label}
-          borderWidth="1px"
-          borderColor="border.muted"
-          borderRadius="md"
-          background="bg"
-          padding="md"
-        >
-          <Stack gap="sm">
-            <Stack gap="xs">
-              <Text textStyle="label/L/medium">{variant.label}</Text>
-              <Text textStyle="label/XS" color="fg.muted">
-                {variant.description}
-              </Text>
-            </Stack>
-
-            <HStack gap="sm" flexWrap="wrap">
-              <Button variant={variant.variant as ButtonProps["variant"]}>Run action</Button>
-              <Button variant={variant.variant as ButtonProps["variant"]} loading>
-                Loading
-              </Button>
-              <Button variant={variant.variant as ButtonProps["variant"]} disabled>
-                Disabled
-              </Button>
-            </HStack>
-          </Stack>
-        </Box>
-      ))}
-    </SimpleGrid>
-  ),
-};
-
-export const Sizes = {
-  render: () => (
-    <Stack gap="lg">
-      {buttonSizes.map((size) => (
-        <HStack
-          key={size.label}
-          alignItems="center"
-          justifyContent="space-between"
-          flexWrap="wrap"
-          gap="md"
-          padding="md"
-          borderWidth="1px"
-          borderColor="border.muted"
-          borderRadius="md"
-          background="bg"
-        >
-          <Stack gap="xs" minWidth="12rem">
-            <Text textStyle="label/L/medium">{size.label}</Text>
-            <Text textStyle="label/XS" color="fg.muted">
-              {size.helper}
-            </Text>
-          </Stack>
-
-          <HStack gap="sm" flexWrap="wrap">
-            <Button size={size.size} variant="solid">
-              Create new
-            </Button>
-            <Button size={size.size} variant="outline">
-              Secondary
-            </Button>
-            <Button size={size.size} variant="ghost">
-              <Icon as={Download} boxSize="16px" />
-              Export
-            </Button>
-            <IconButton size={size.size} variant="ghost" aria-label="Settings">
-              <Icon as={Settings} boxSize="16px" />
-            </IconButton>
-            <IconButton size={size.size} variant="outline" aria-label="Delete">
-              <Icon as={Trash2} boxSize="16px" />
-            </IconButton>
-          </HStack>
-        </HStack>
-      ))}
-    </Stack>
-  ),
-};
-
-export const IconOnly = {
-  render: () => (
-    <HStack gap="sm" flexWrap="wrap" padding="md" borderWidth="1px" borderColor="border.muted" borderRadius="md">
-      <IconButton variant="solid" aria-label="Add">
-        <Icon as={Plus} boxSize="icon-sm" />
-      </IconButton>
-      <IconButton variant="surface" aria-label="Settings">
-        <Icon as={Settings} boxSize="16px" />
-      </IconButton>
-      <IconButton variant="outline" aria-label="Download">
-        <Icon as={Download} boxSize="16px" />
-      </IconButton>
-      <IconButton variant="ghost" aria-label="Delete">
-        <Icon as={Trash2} boxSize="16px" />
-      </IconButton>
-    </HStack>
-  ),
-};

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

@@ -1,231 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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;