@btst/stack 1.4.0 → 1.5.0

package/src/plugins/ai-chat/client/components/chat-message.tsx

@@ -20,6 +20,7 @@ import {
 	X,
 } from "lucide-react";
 import type { UIMessage } from "ai";
+import { isToolUIPart, getToolName } from "ai";
 import {
 	useMemo,
 	useState,
@@ -28,8 +29,13 @@ import {
 	type ComponentType,
 } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
-import type { AiChatPluginOverrides } from "../overrides";
+import type {
+	AiChatPluginOverrides,
+	ToolCallProps,
+	ToolCallState,
+} from "../overrides";
 import { AI_CHAT_LOCALIZATION } from "../localization";
+import { ToolCallDisplay } from "./tool-call-display";
 
 // Import shared markdown + syntax highlighting styles (same pattern as blog plugin)
 import "@workspace/ui/markdown-content.css";
@@ -131,6 +137,7 @@ export function ChatMessage({
 		Link,
 		Image,
 		localization: customLocalization,
+		toolRenderers,
 	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
 		"ai-chat",
 		{},
@@ -233,6 +240,14 @@ export function ChatMessage({
 		return [];
 	}, [message.parts]);
 
+	// Extract tool call parts from message (AI SDK v5 format: type is "tool-{toolName}")
+	const toolParts = useMemo(() => {
+		if (message.parts && Array.isArray(message.parts)) {
+			return message.parts.filter((part: any) => isToolUIPart(part));
+		}
+		return [];
+	}, [message.parts]);
+
 	// Use remend to complete partial markdown when streaming
 	const displayContent = useMemo(() => {
 		if (!textContent) return "";
@@ -370,7 +385,7 @@ export function ChatMessage({
 							)}
 						</div>
 					) : (
-						// Assistant messages: rendered markdown + files + images
+						// Assistant messages: rendered markdown + files + images + tool calls
 						<div className="wrap-break-word space-y-2">
 							{/* Any attached files (non-images) */}
 							{fileParts.length > 0 && (
@@ -407,6 +422,45 @@ export function ChatMessage({
 									))}
 								</div>
 							)}
+							{/* Tool calls */}
+							{toolParts.length > 0 && (
+								<div className="space-y-2">
+									{toolParts.map((part: any) => {
+										const toolName = getToolName(part);
+										const toolCallId = part.toolCallId;
+										const state = part.state as ToolCallState;
+										const input = part.input;
+										const output = part.output;
+										const errorText = part.errorText;
+										const isLoading =
+											state === "input-streaming" ||
+											state === "input-available";
+
+										const toolCallProps: ToolCallProps = {
+											toolCallId,
+											toolName,
+											state,
+											input,
+											output,
+											errorText,
+											isLoading,
+										};
+
+										// Check if there's a custom renderer for this tool
+										const CustomRenderer = toolRenderers?.[toolName];
+										if (CustomRenderer) {
+											return (
+												<CustomRenderer key={toolCallId} {...toolCallProps} />
+											);
+										}
+
+										// Use default tool call display
+										return (
+											<ToolCallDisplay key={toolCallId} {...toolCallProps} />
+										);
+									})}
+								</div>
+							)}
 							{/* Text content */}
 							{displayContent ? (
 								<MarkdownContent
@@ -415,7 +469,9 @@ export function ChatMessage({
 									LinkComponent={Link ?? DefaultLink}
 									ImageComponent={ImageComponent}
 								/>
-							) : imageParts.length === 0 && fileParts.length === 0 ? (
+							) : imageParts.length === 0 &&
+								fileParts.length === 0 &&
+								toolParts.length === 0 ? (
 								<span className="text-muted-foreground">...</span>
 							) : null}
 						</div>

package/src/plugins/ai-chat/client/components/chat-sidebar.tsx

@@ -146,7 +146,10 @@ export function ChatSidebar({
 	};
 
 	return (
-		<div className={cn("flex flex-col h-full bg-muted/30 border-r", className)}>
+		<div
+			data-testid="chat-sidebar"
+			className={cn("flex flex-col h-full bg-muted/30 border-r", className)}
+		>
 			{/* Header */}
 			<div className="p-4 border-b">
 				<Button

package/src/plugins/ai-chat/client/components/index.ts

@@ -1,8 +1,10 @@
 export { ChatInterface } from "./chat-interface";
 export { ChatLayout } from "./chat-layout";
+export type { ChatLayoutProps } from "./chat-layout";
 export { ChatSidebar } from "./chat-sidebar";
 export { ChatMessage } from "./chat-message";
 export { ChatInput } from "./chat-input";
+export { ToolCallDisplay } from "./tool-call-display";
 
 // Page components
 export { ChatPageComponent } from "./pages/chat-page";

package/src/plugins/ai-chat/client/components/tool-call-display.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@workspace/ui/components/accordion";
+import { MarkdownContent } from "@workspace/ui/components/markdown-content";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { cn } from "@workspace/ui/lib/utils";
+import { Wrench, Check, AlertCircle, Loader2 } from "lucide-react";
+import type { ToolCallProps, ToolCallState } from "../overrides";
+
+/**
+ * Formats a tool name for display (converts camelCase/snake_case to Title Case)
+ */
+function formatToolName(name: string): string {
+	return (
+		name
+			// Insert space before uppercase letters (camelCase)
+			.replace(/([A-Z])/g, " $1")
+			// Replace underscores and hyphens with spaces
+			.replace(/[_-]/g, " ")
+			// Capitalize first letter of each word
+			.replace(/\b\w/g, (char) => char.toUpperCase())
+			.trim()
+	);
+}
+
+/**
+ * Returns the appropriate status icon based on tool call state
+ */
+function getStatusIcon(state: ToolCallState, isLoading: boolean) {
+	if (isLoading || state === "input-streaming" || state === "input-available") {
+		return (
+			<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+		);
+	}
+	if (state === "output-error") {
+		return <AlertCircle className="h-3.5 w-3.5 text-destructive" />;
+	}
+	if (state === "output-available") {
+		return <Check className="h-3.5 w-3.5 text-green-500" />;
+	}
+	return <Wrench className="h-3.5 w-3.5 text-muted-foreground" />;
+}
+
+/**
+ * Returns a human-readable status label based on tool call state
+ */
+function getStatusLabel(state: ToolCallState, isLoading: boolean): string {
+	if (isLoading || state === "input-streaming") {
+		return "Running...";
+	}
+	if (state === "input-available") {
+		return "Executing...";
+	}
+	if (state === "output-error") {
+		return "Error";
+	}
+	if (state === "output-available") {
+		return "Complete";
+	}
+	return "Pending";
+}
+
+interface JsonDisplayProps {
+	data: unknown;
+	label: string;
+}
+
+/**
+ * Renders JSON data using MarkdownContent with syntax highlighting
+ */
+function JsonDisplay({ data, label }: JsonDisplayProps) {
+	if (data === undefined || data === null) {
+		return null;
+	}
+
+	// Format JSON with proper indentation
+	let jsonString: string;
+	try {
+		jsonString = JSON.stringify(data, null, 2);
+	} catch {
+		jsonString = String(data);
+	}
+
+	// Wrap in markdown code fence for syntax highlighting
+	const markdown = `\`\`\`json\n${jsonString}\n\`\`\``;
+
+	return (
+		<div className="space-y-1">
+			<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+				{label}
+			</span>
+			<div className="[&_.markdown-code-block]:my-0 [&_.markdown-code-block]:max-h-48 [&_.markdown-code-block_.code-content]:max-h-40 [&_.markdown-code-block_.code-content]:overflow-y-auto">
+				<MarkdownContent markdown={markdown} variant="chat" />
+			</div>
+		</div>
+	);
+}
+
+/**
+ * Default tool call display component.
+ * Shows an accordion with tool name, status, inputs, and outputs.
+ */
+export function ToolCallDisplay({
+	toolCallId,
+	toolName,
+	state,
+	input,
+	output,
+	errorText,
+	isLoading,
+}: ToolCallProps) {
+	const displayName = formatToolName(toolName);
+	const statusLabel = getStatusLabel(state, isLoading);
+	const statusIcon = getStatusIcon(state, isLoading);
+
+	const isComplete = state === "output-available" || state === "output-error";
+	const hasError = state === "output-error";
+
+	return (
+		<Accordion type="single" collapsible className="w-full">
+			<AccordionItem
+				value={toolCallId}
+				className={cn(
+					"!border rounded-lg overflow-hidden transition-colors",
+					hasError && "border-destructive/50",
+					!hasError && isComplete && "border-green-500/30",
+					!isComplete && "border-border/50",
+				)}
+			>
+				<AccordionTrigger
+					className={cn("px-3 py-2 hover:no-underline hover:bg-muted/50")}
+				>
+					<div className="flex items-center gap-2 w-full">
+						<Wrench className="h-4 w-4 text-muted-foreground shrink-0" />
+						<span className="text-sm font-medium truncate text-left">
+							{displayName}
+						</span>
+						<span className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+							{statusIcon}
+							<span className="sr-only">{statusLabel}</span>
+						</span>
+					</div>
+				</AccordionTrigger>
+
+				<AccordionContent className="px-3 pb-3 pt-0">
+					<div className="space-y-3 border-t border-border/50 pt-3">
+						{/* Loading skeleton when input is streaming */}
+						{state === "input-streaming" && !input && (
+							<div className="space-y-2">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-16 w-full" />
+							</div>
+						)}
+
+						{/* Input section */}
+						{input !== undefined && <JsonDisplay data={input} label="Input" />}
+
+						{/* Output section */}
+						{state === "output-available" && output !== undefined && (
+							<JsonDisplay data={output} label="Output" />
+						)}
+
+						{/* Error section */}
+						{state === "output-error" && errorText && (
+							<div className="space-y-1">
+								<span className="text-xs font-medium text-destructive uppercase tracking-wide">
+									Error
+								</span>
+								<div className="text-xs text-destructive bg-destructive/10 p-2 rounded-md">
+									{errorText}
+								</div>
+							</div>
+						)}
+
+						{/* Loading skeleton for output */}
+						{(state === "input-available" || state === "input-streaming") && (
+							<div className="space-y-2">
+								<Skeleton className="h-4 w-20" />
+								<Skeleton className="h-12 w-full" />
+							</div>
+						)}
+
+						{/* Tool call ID for debugging (collapsed by default) */}
+						<div className="text-[10px] text-muted-foreground/50 truncate">
+							ID: {toolCallId}
+						</div>
+					</div>
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	);
+}

package/src/plugins/ai-chat/client/index.ts

@@ -5,10 +5,21 @@ export type {
 	RouteContext,
 	LoaderContext,
 } from "./plugin";
-export type { AiChatPluginOverrides, AllowedFileType } from "./overrides";
+export type {
+	AiChatPluginOverrides,
+	AllowedFileType,
+	ToolCallProps,
+	ToolCallState,
+	ToolCallRenderer,
+} from "./overrides";
 export { DEFAULT_ALLOWED_FILE_TYPES } from "./overrides";
 export { ChatInterface } from "./components/chat-interface";
 export { ChatLayout } from "./components/chat-layout";
+export type { ChatLayoutProps } from "./components/chat-layout";
 export { ChatSidebar } from "./components/chat-sidebar";
 export { ChatMessage } from "./components/chat-message";
 export { ChatInput } from "./components/chat-input";
+export { ToolCallDisplay } from "./components/tool-call-display";
+
+// Re-export UIMessage type from AI SDK for consumer convenience
+export type { UIMessage } from "ai";

package/src/plugins/ai-chat/client/overrides.ts

@@ -8,6 +8,44 @@ import type { AiChatLocalization } from "./localization";
  */
 export type AiChatMode = "authenticated" | "public";
 
+/**
+ * State of a tool call execution
+ */
+export type ToolCallState =
+	| "input-streaming"
+	| "input-available"
+	| "output-available"
+	| "output-error";
+
+/**
+ * Props passed to custom tool call renderer components
+ */
+export interface ToolCallProps<TInput = unknown, TOutput = unknown> {
+	/** Unique identifier for this tool call */
+	toolCallId: string;
+	/** Name of the tool being called */
+	toolName: string;
+	/** Current state of the tool call execution */
+	state: ToolCallState;
+	/** Input arguments passed to the tool (may be partial during streaming) */
+	input: TInput | undefined;
+	/** Output from the tool (only available when state is 'output-available') */
+	output: TOutput | undefined;
+	/** Error message (only available when state is 'output-error') */
+	errorText?: string;
+	/** Whether the tool call is currently in progress */
+	isLoading: boolean;
+}
+
+/**
+ * A component that renders a custom UI for a specific tool call.
+ * Return `null` to fall back to the default tool call accordion.
+ */
+export type ToolCallRenderer<
+	TInput = unknown,
+	TOutput = unknown,
+> = ComponentType<ToolCallProps<TInput, TOutput>>;
+
 /**
  * Allowed file type categories for uploads
  */
@@ -126,6 +164,39 @@ export interface AiChatPluginOverrides {
 	 */
 	showAttribution?: boolean;
 
+	/**
+	 * Suggested prompts to display in the empty chat state.
+	 * When provided, these appear as clickable buttons that populate the input field.
+	 *
+	 * @example
+	 * ```tsx
+	 * chatSuggestions: [
+	 *   "What can you help me with?",
+	 *   "Tell me about your features",
+	 *   "How do I get started?",
+	 * ]
+	 * ```
+	 */
+	chatSuggestions?: string[];
+
+	/**
+	 * Custom renderers for tool calls. Keys should match tool names.
+	 * Each renderer receives ToolCallProps and can return custom UI.
+	 *
+	 * @example
+	 * ```tsx
+	 * toolRenderers: {
+	 *   getWeather: ({ toolName, input, output, state, isLoading }) => (
+	 *     <WeatherCard location={input?.location} weather={output} loading={isLoading} />
+	 *   ),
+	 *   searchDocs: ({ input, output, isLoading }) => (
+	 *     <SearchResults query={input?.query} results={output} loading={isLoading} />
+	 *   ),
+	 * }
+	 * ```
+	 */
+	toolRenderers?: Record<string, ToolCallRenderer>;
+
 	// ============== Lifecycle Hooks (optional) ==============
 
 	/**

package/src/plugins/blog/api/plugin.ts

@@ -442,11 +442,22 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 						const { tags, ...postData } = ctx.body;
 						const tagNames = tags || [];
 
+						// Always slugify to ensure URL-safe slug, whether provided or generated from title
+						const slug = slugify(postData.slug || postData.title);
+
+						// Validate that slugification produced a non-empty result
+						if (!slug) {
+							throw ctx.error(400, {
+								message:
+									"Invalid slug: must contain at least one alphanumeric character",
+							});
+						}
+
 						const newPost = await adapter.create<Post>({
 							model: "post",
 							data: {
 								...postData,
-								slug: postData.slug ? postData.slug : slugify(postData.title),
+								slug,
 								tags: [],
 								createdAt: new Date(),
 								updatedAt: new Date(),
@@ -513,9 +524,25 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 							}
 						}
 
-						const { tags, ...postData } = ctx.body;
+						const { tags, slug: rawSlug, ...restPostData } = ctx.body;
 						const tagNames = tags || [];
 
+						// Sanitize slug if provided to ensure it's URL-safe
+						const slugified = rawSlug ? slugify(rawSlug) : undefined;
+
+						// Validate that slugification produced a non-empty result (if slug was provided)
+						if (rawSlug && !slugified) {
+							throw ctx.error(400, {
+								message:
+									"Invalid slug: must contain at least one alphanumeric character",
+							});
+						}
+
+						const postData = {
+							...restPostData,
+							...(slugified ? { slug: slugified } : {}),
+						};
+
 						const updated = await adapter.transaction(async (tx) => {
 							const existingPostTags = await tx.findMany<{
 								postId: string;

package/src/plugins/blog/client/components/loading/form-page-skeleton.tsx

@@ -1,5 +1,5 @@
 import { PageHeaderSkeleton } from "./page-header-skeleton";
-import { PageLayout } from "../shared/page-layout";
+import { PageLayout } from "@workspace/ui/components/page-layout";
 import { Skeleton } from "@workspace/ui/components/skeleton";
 
 export function FormPageSkeleton() {

package/src/plugins/blog/client/components/loading/list-page-skeleton.tsx

@@ -1,5 +1,5 @@
 import { PageHeaderSkeleton } from "./page-header-skeleton";
-import { PageLayout } from "../shared/page-layout";
+import { PageLayout } from "@workspace/ui/components/page-layout";
 import { PostCardSkeleton } from "./post-card-skeleton";
 import { Skeleton } from "@workspace/ui/components/skeleton";
 

package/src/plugins/blog/client/components/loading/post-page-skeleton.tsx

@@ -1,5 +1,5 @@
 import { PageHeaderSkeleton } from "./page-header-skeleton";
-import { PageLayout } from "../shared/page-layout";
+import { PageLayout } from "@workspace/ui/components/page-layout";
 import { Skeleton } from "@workspace/ui/components/skeleton";
 
 export function PostPageSkeleton() {

package/src/plugins/blog/client/components/shared/markdown-content-styles.css

@@ -158,6 +158,9 @@
 	.markdown-content .markdown-inner .markdown-body .hljs-params {
 		color: #ffb86c;
 	}
+	.markdown-content .markdown-inner .markdown-body .hljs-punctuation {
+		color: #c9d1d9;
+	}
 }
 
 /* Also support Tailwind dark class for dark mode */
@@ -167,6 +170,9 @@
 .dark .markdown-content .markdown-inner .markdown-body .hljs-params {
 	color: #ffb86c;
 }
+.dark .markdown-content .markdown-inner .markdown-body .hljs-punctuation {
+	color: #c9d1d9;
+}
 
 .markdown-content .markdown-inner .markdown-code-block {
 	display: block;

package/src/plugins/blog/client/components/shared/page-wrapper.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { usePluginOverrides } from "@btst/stack/context";
-import { BetterStackAttribution } from "@workspace/ui/components/better-stack-attribution";
-import { PageLayout } from "./page-layout";
+import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
 
 export function PageWrapper({
@@ -20,13 +19,14 @@ export function PageWrapper({
 	>("blog", {
 		showAttribution: true,
 	});
-	return (
-		<>
-			<PageLayout className={className} data-testid={testId}>
-				{children}
-			</PageLayout>
 
-			{showAttribution && <BetterStackAttribution />}
-		</>
+	return (
+		<SharedPageWrapper
+			className={className}
+			testId={testId}
+			showAttribution={showAttribution}
+		>
+			{children}
+		</SharedPageWrapper>
 	);
 }