@manta-eu/react 0.11.0 → 0.13.0

package/src/components/app-gate/ErrorRoute.tsx

@@ -0,0 +1,43 @@
+import { Button } from "#components/button/index";
+import { StatusScreen } from "#components/layouts/StatusScreen";
+import { Link, useSearchParams } from "react-router";
+import { match } from "ts-pattern";
+
+type ErrorCopy = {
+  title: string;
+  description: string;
+};
+
+const genericErrorCopy: ErrorCopy = {
+  title: "Something went wrong",
+  description: "We couldn't open this link.",
+};
+
+function copyForStatus(status: string | null): ErrorCopy {
+  return match(status)
+    .with("400", () => ({
+      title: "Broken link",
+      description: "This link isn't valid.",
+    }))
+    .with("404", () => ({
+      title: "Nothing to open",
+      description: "We couldn't find anything at this link.",
+    }))
+    .otherwise(() => genericErrorCopy);
+}
+
+export function ErrorRoute() {
+  const [searchParams] = useSearchParams();
+
+  const { title, description } = copyForStatus(searchParams.get("status"));
+
+  return (
+    <div className="h-screen w-full">
+      <StatusScreen title={title} description={description} role="alert">
+        <Button asChild variant="secondary">
+          <Link to="/">Back to Manta</Link>
+        </Button>
+      </StatusScreen>
+    </div>
+  );
+}

package/src/components/app-gate/FailureAlert.tsx

@@ -0,0 +1,15 @@
+import { isPresent } from "@manta-eu/lib/present";
+
+export type FailureAlertProps = { failure?: string };
+
+export function FailureAlert(props: FailureAlertProps) {
+  const { failure } = props;
+
+  if (!isPresent(failure)) return null;
+
+  return (
+    <p role="alert" className="text-center text-balance typography-small text-error-foreground">
+      {failure}
+    </p>
+  );
+}

package/src/components/app-gate/NoDatastoreAccess.tsx

@@ -0,0 +1,26 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Button } from "#components/button/index";
+import { StatusScreen } from "#components/layouts/StatusScreen";
+import type { Datastore } from "#lib/chat-types";
+
+export type NoDatastoreAccessProps = { requestedDatastoreId: string; datastore?: Datastore; onEnter: () => void };
+
+export function NoDatastoreAccess(props: NoDatastoreAccessProps) {
+  const { requestedDatastoreId, datastore, onEnter } = props;
+
+  return (
+    <div className="h-screen">
+      <StatusScreen
+        title={`You don't have access to "${requestedDatastoreId}"`}
+        description="Ask whoever shared this link to grant you access, or open one of your own datastores."
+        role="alert"
+      >
+        {isPresent(datastore) && (
+          <Button variant="tertiary" rounded="sm" data-testid="no-datastore-access-enter" onClick={onEnter}>
+            Go to {datastore.name}
+          </Button>
+        )}
+      </StatusScreen>
+    </div>
+  );
+}

package/src/components/app-gate/NotFoundRoute.tsx

@@ -0,0 +1,20 @@
+import { Button } from "#components/button/index";
+import { RouteLayout } from "#components/layouts/RouteLayout";
+import { StatusScreen } from "#components/layouts/StatusScreen";
+import { Link } from "react-router";
+
+export function NotFoundRoute() {
+  return (
+    <RouteLayout>
+      <StatusScreen
+        title="Page not found"
+        description="This page doesn't exist, or your account doesn't have access to it."
+        role="alert"
+      >
+        <Button asChild variant="secondary">
+          <Link to="/">Back to Manta</Link>
+        </Button>
+      </StatusScreen>
+    </RouteLayout>
+  );
+}

package/src/components/app-gate/PendingInvitations.tsx

@@ -0,0 +1,134 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { useQueryClient } from "@tanstack/react-query";
+import { match } from "ts-pattern";
+import { AwaitingDatastoreStatus } from "./AwaitingDatastoreStatus";
+import { FailureAlert } from "./FailureAlert";
+import { Button } from "#components/button/index";
+import { LoadingView } from "#components/chat-view/LoadingView";
+import { StatusScreen } from "#components/layouts/StatusScreen";
+import { userContextQueryKey } from "#hooks/useAuth";
+import { graphqlErrorMessage } from "#lib/graphql-error";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import {
+  useAcceptInvitationMutation,
+  useDeclineInvitationMutation,
+  usePendingInvitationsQuery,
+} from "@manta-eu/client";
+
+export type PendingInvitationsProps = { onSignOut: () => void };
+
+const invitationsStaleMs = 30_000;
+
+export function PendingInvitations(props: PendingInvitationsProps) {
+  const { onSignOut } = props;
+
+  const { mantaClient } = useMantaClient();
+
+  const queryClient = useQueryClient();
+
+  const invitationsQuery = usePendingInvitationsQuery(mantaClient, undefined, {
+    staleTime: invitationsStaleMs,
+    refetchInterval: invitationsStaleMs,
+    refetchIntervalInBackground: false,
+    retry: 1,
+  });
+
+  function refreshInvitations() {
+    return queryClient.invalidateQueries({ queryKey: usePendingInvitationsQuery.getKey() });
+  }
+
+  const acceptMutation = useAcceptInvitationMutation(mantaClient, {
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: userContextQueryKey }),
+    onError: refreshInvitations,
+  });
+  const declineMutation = useDeclineInvitationMutation(mantaClient, { onSettled: refreshInvitations });
+
+  const invitations = invitationsQuery.data?.pendingInvitations ?? [];
+  const [only] = invitations;
+
+  const busy = acceptMutation.isPending || declineMutation.isPending;
+
+  const failure = match({ acceptMutation, declineMutation, invitationsQuery })
+    .with({ acceptMutation: { isError: true } }, (failed) =>
+      graphqlErrorMessage(failed.acceptMutation.error, "The invitation could not be accepted. Try again."),
+    )
+    .with({ declineMutation: { isError: true } }, (failed) =>
+      graphqlErrorMessage(failed.declineMutation.error, "The invitation could not be declined. Try again."),
+    )
+    .with({ invitationsQuery: { isError: true } }, (failed) =>
+      graphqlErrorMessage(
+        failed.invitationsQuery.error,
+        "Your invitations could not be loaded. Reload the page to try again.",
+      ),
+    )
+    .otherwise(() => undefined);
+
+  if (acceptMutation.isSuccess) return <AwaitingDatastoreStatus inOrganization onSignOut={onSignOut} />;
+
+  if (invitationsQuery.isPending) return <LoadingView />;
+
+  if (!isPresent(invitations)) {
+    return <AwaitingDatastoreStatus inOrganization={false} failure={failure} onSignOut={onSignOut} />;
+  }
+
+  return (
+    <div className="h-screen w-full">
+      <StatusScreen
+        title="You've been invited"
+        description={
+          invitations.length === 1 && isPresent(only)
+            ? `${only.organizationName} invited you to join their organization.`
+            : "These organizations invited you. Pick the one to join."
+        }
+        branded
+      >
+        <div className="flex w-104 max-w-full flex-col gap-4">
+          <FailureAlert failure={failure} />
+          <ul className="divide-y divide-muted-border overflow-hidden rounded-lg-v4 border border-muted-border bg-card text-left">
+            {invitations.map((invitation) => (
+              <li key={invitation.organizationId} className="flex items-center gap-3 px-4 py-3">
+                <span className="min-w-0 flex-1 truncate typography-body-semibold text-default-foreground">
+                  {invitation.organizationName}
+                </span>
+                <Button
+                  variant="tertiary"
+                  size="sm"
+                  data-testid="decline-invitation"
+                  aria-label={`Decline ${invitation.organizationName}'s invitation`}
+                  disabled={busy}
+                  onClick={() => {
+                    acceptMutation.reset();
+                    declineMutation.mutate({ organizationId: invitation.organizationId });
+                  }}
+                >
+                  Decline
+                </Button>
+                <Button
+                  size="sm"
+                  data-testid="accept-invitation"
+                  aria-label={`Join ${invitation.organizationName}`}
+                  disabled={busy}
+                  onClick={() => {
+                    declineMutation.reset();
+                    acceptMutation.mutate({ organizationId: invitation.organizationId });
+                  }}
+                >
+                  Join
+                </Button>
+              </li>
+            ))}
+          </ul>
+          <Button
+            variant="tertiary"
+            rounded="sm"
+            data-testid="awaiting-datastore-sign-out"
+            onClick={onSignOut}
+            className="self-center"
+          >
+            Sign out
+          </Button>
+        </div>
+      </StatusScreen>
+    </div>
+  );
+}

package/src/components/app-gate/ServiceError.tsx

@@ -0,0 +1,27 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Button } from "#components/button/index";
+import { StatusScreen } from "#components/layouts/StatusScreen";
+
+export type ServiceErrorProps = { title?: string; message: string; onRetry?: () => void; onSignOut?: () => void };
+
+export function ServiceError(props: ServiceErrorProps) {
+  const { title = "Something went wrong", message, onRetry, onSignOut } = props;
+
+  const handleRetry = onRetry ?? (() => window.location.reload());
+
+  return (
+    <div data-testid="service-error" className="h-screen w-full">
+      <StatusScreen title={title} description={message} role="alert">
+        <Button variant="tertiary" rounded="sm" onClick={handleRetry}>
+          {isPresent(onRetry) ? "Try again" : "Retry"}
+        </Button>
+
+        {isPresent(onSignOut) && (
+          <Button variant="tertiary" rounded="sm" data-testid="service-error-sign-out" onClick={onSignOut}>
+            Sign out
+          </Button>
+        )}
+      </StatusScreen>
+    </div>
+  );
+}

package/src/components/app-gate/index.ts

@@ -0,0 +1,2 @@
+export { AppGate, type AppGateProps } from "./AppGate";
+export { sdkRouteElements } from "./sdk-route-elements";

package/src/components/app-gate/sdk-route-elements.tsx

@@ -0,0 +1,46 @@
+import { GroupRoute } from "#components/app-shell/GroupRoute";
+import { AuthenticatedChat } from "#components/authenticated-chat/index";
+import { EnterDatastoreRoute } from "./EnterDatastoreRoute";
+import { NotFoundRoute } from "./NotFoundRoute";
+import type { RouteElements } from "#lib/datastore-route-table";
+import { ActivityRoute } from "#routes/activity/index";
+import { ActivityDetailRoute } from "#routes/activity/detail/ActivityDetailRoute";
+import { DataCollectionRoute } from "#routes/data-collection/index";
+import {
+  DataDetailRoute,
+  DataExplorerCoverageRoute,
+  DataExplorerEntityRoute,
+  DataExplorerFilesRoute,
+  DataExplorerIndexRoute,
+  DataExplorerIngestRoute,
+  DataExplorerLayout,
+  DataExplorerPrefixRoute,
+  DataExplorerRecentRoute,
+  DataExplorerTypeRoute,
+} from "#routes/data-explorer/index";
+import { ExplainRoute } from "#routes/explain/index";
+import { MemoriesRoute } from "#routes/memories/index";
+import { PlansRoute } from "#routes/plans/index";
+
+export const sdkRouteElements = {
+  Chat: <AuthenticatedChat />,
+  EnterDatastore: <EnterDatastoreRoute />,
+  Group: <GroupRoute />,
+  Plans: <PlansRoute />,
+  Explain: <ExplainRoute />,
+  Memories: <MemoriesRoute />,
+  Activity: <ActivityRoute />,
+  ActivityDetail: <ActivityDetailRoute />,
+  DataExplorerLayout: <DataExplorerLayout />,
+  DataExplorerIndex: <DataExplorerIndexRoute />,
+  DataExplorerRecent: <DataExplorerRecentRoute />,
+  DataExplorerCoverage: <DataExplorerCoverageRoute />,
+  DataExplorerFiles: <DataExplorerFilesRoute />,
+  DataExplorerIngest: <DataExplorerIngestRoute />,
+  DataCollection: <DataCollectionRoute />,
+  DataExplorerPrefix: <DataExplorerPrefixRoute />,
+  DataExplorerType: <DataExplorerTypeRoute />,
+  DataEntity: <DataExplorerEntityRoute />,
+  DataDetail: <DataDetailRoute />,
+  NotFound: <NotFoundRoute />,
+} satisfies RouteElements;

package/src/components/app-shell/AppShell.tsx

@@ -0,0 +1,22 @@
+import { AppGate } from "#components/app-gate/index";
+import { Providers } from "#providers/index";
+import { NavExtrasProvider, type NavExtra } from "#providers/NavExtrasProvider";
+import { AppShellRoutes, type AppShellRoutesProps } from "./AppShellRoutes";
+
+export type AppShellProps = AppShellRoutesProps & { navItems?: NavExtra[] };
+
+export function AppShell(props: AppShellProps) {
+  const { navItems, ...routes } = props;
+
+  return (
+    <Providers mantaBaseUrl={window.location.origin}>
+      <NavExtrasProvider items={navItems}>
+        <div className="typography-body text-default-foreground">
+          <AppGate>
+            <AppShellRoutes {...routes} />
+          </AppGate>
+        </div>
+      </NavExtrasProvider>
+    </Providers>
+  );
+}

package/src/components/app-shell/AppShellRoutes.tsx

@@ -0,0 +1,34 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { sdkRouteElements } from "#components/app-gate/index";
+import type { RouteElements } from "#lib/datastore-route-table";
+import { getDatastoreRoutes, getGlobalRoutes } from "#lib/datastore-routes";
+import { useActiveDatastore } from "#providers/index";
+import { useAuthContext } from "#providers/AuthContext";
+import { ChatManagerProvider, type ChatManagerProviderProps } from "#providers/ChatManagerProvider";
+import { DatastoresRoute } from "#routes/datastores/index";
+import type { ReactNode } from "react";
+
+export type AppShellRoutesProps = Pick<ChatManagerProviderProps, "onStartupTiming"> & {
+  routes?: Partial<RouteElements>;
+  datastoreRoutes?: ReactNode;
+};
+
+export function AppShellRoutes(props: AppShellRoutesProps) {
+  const { routes, datastoreRoutes, onStartupTiming } = props;
+
+  const { canManageDatastores, datastore } = useAuthContext();
+
+  const { datastoreId: routeDatastoreId } = useActiveDatastore();
+
+  const elements: RouteElements = {
+    ...sdkRouteElements,
+    ...(canManageDatastores && { Datastores: <DatastoresRoute /> }),
+    ...routes,
+  };
+
+  return (
+    <ChatManagerProvider key={datastore?.id} datastoreId={datastore?.id} onStartupTiming={onStartupTiming}>
+      {isPresent(routeDatastoreId) ? getDatastoreRoutes(elements, datastoreRoutes) : getGlobalRoutes(elements)}
+    </ChatManagerProvider>
+  );
+}

package/src/components/app-shell/GroupDatastores.tsx

@@ -0,0 +1,28 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Button } from "#components/button/index";
+import { LoadingView } from "#components/chat-view/LoadingView";
+import { EmptyState } from "#components/empty-state/index";
+import type { Datastore } from "#lib/chat-types";
+import { Building2 } from "lucide-react";
+
+export type GroupDatastoresProps = { members: Datastore[]; isLoading: boolean; onOpen: (datastoreId: string) => void };
+
+export function GroupDatastores(props: GroupDatastoresProps) {
+  const { members, isLoading, onOpen } = props;
+
+  if (isLoading) return <LoadingView />;
+
+  if (!isPresent(members)) return <EmptyState icon={Building2} title="No datastores you can open are in this group." />;
+
+  return (
+    <ul data-testid="group-datastores" className="flex flex-col gap-1">
+      {members.map((member) => (
+        <li key={member.id}>
+          <Button variant="ghost" rounded="lg" className="w-full justify-start" onClick={() => onOpen(member.id)}>
+            {member.name}
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/app-shell/GroupRoute.tsx

@@ -0,0 +1,34 @@
+import { useDatastoreTreeQuery } from "@manta-eu/client";
+import { PageBody, PageHeader } from "#components/layouts/page/index";
+import { RouteLayout } from "#components/layouts/RouteLayout";
+import { datastoreOfTreeNode, groupMembers } from "#datastore-picker/datastore-picker-rows";
+import { useActiveDatastore, useMantaClient } from "#providers/index";
+import { useAuthContext } from "#providers/AuthContext";
+import { Building2 } from "lucide-react";
+import { useParams } from "react-router";
+import { GroupDatastores } from "./GroupDatastores";
+
+export function GroupRoute() {
+  const { group = "" } = useParams();
+
+  const { datastores = [], isOperator } = useAuthContext();
+
+  const { enterDatastore } = useActiveDatastore();
+
+  const { mantaClient } = useMantaClient();
+
+  const { data, isLoading } = useDatastoreTreeQuery(mantaClient, undefined, { enabled: isOperator });
+
+  const reachable = isOperator ? (data?.datastoreTree ?? []).map(datastoreOfTreeNode) : datastores;
+  const name = reachable.find(({ id }) => id === group)?.name ?? group;
+  const members = groupMembers(reachable, group);
+
+  return (
+    <RouteLayout>
+      <PageHeader title={name} icon={Building2} />
+      <PageBody>
+        <GroupDatastores members={members} isLoading={isLoading} onOpen={enterDatastore} />
+      </PageBody>
+    </RouteLayout>
+  );
+}

package/src/components/app-shell/index.ts

@@ -0,0 +1,2 @@
+export { AppShell, type AppShellProps } from "./AppShell";
+export { AppShellRoutes, type AppShellRoutesProps } from "./AppShellRoutes";

package/src/components/authenticated-chat/index.tsx

@@ -1,34 +1 @@
-import { resolveChatProps, type AuthenticatedChatProps } from "#lib/chat-types";
-import { cn } from "#lib/utils";
-import { ChatRoute } from "#routes/chat/index";
-
-export function AuthenticatedChat(props: AuthenticatedChatProps) {
-  const { datastore, user, onLogout, isOperator, canSwitchDatastore, datastores, ...otherProps } =
-    resolveChatProps(props);
-
-  if (!user) {
-    console.error("AuthenticatedChat: user object is required");
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center space-y-2">
-          <h2 className="typography-large-body-semibold text-error-foreground">Authentication Error</h2>
-
-          <p className="typography-small text-muted-foreground">Invalid user session. Please sign in again.</p>
-
-          {onLogout && (
-            <button
-              onClick={onLogout}
-              className={cn("px-4 py-2 rounded-lg transition-colors", "bg-background hover:bg-accent")}
-            >
-              Sign Out
-            </button>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <ChatRoute {...{ ...otherProps, isOperator, canSwitchDatastore, datastore, datastores, user, logout: onLogout }} />
-  );
-}
+export { ChatRoute as AuthenticatedChat, type ChatRouteProps as AuthenticatedChatRouteProps } from "#routes/chat/index";

package/src/components/chat-view/Chat.tsx

@@ -1,6 +1,7 @@
 import { extractPlanName, humanizePlanName } from "@manta-eu/client/shared/agent-mode";
 import { ChatContextKind, type ChatContext } from "@manta-eu/client/shared/agent-types";
 import type { ChatUIMessage } from "@manta-eu/client/shared/index";
+import { uploadedFileRoutePath } from "@manta-eu/client/shared/datastore-path";
 import { createUserMessage } from "@manta-eu/client/shared/message-utils";
 import {
   anthropicPrimaryModel,
@@ -48,7 +49,7 @@ import { useShouldAutoFocusInput } from "#hooks/use-should-auto-focus-input";
 import { useConversationGraphContext } from "#hooks/useConversationGraphContext";
 import { useSelectedModel } from "#hooks/useSelectedModel";
 import { isDevBuild } from "#lib/build-config";
-import type { ChatDraft, CopilotMenuDefaults, Datastore, PageContext, User } from "#lib/chat-types";
+import type { AppTools, ChatDraft, CopilotMenuDefaults, Datastore, PageContext, User } from "#lib/chat-types";
 import { findLatestShowcase } from "#lib/find-latest-showcase";
 import { useFileUpload } from "#lib/hooks/useFileUpload";
 import { planStatusLabel } from "#lib/plan-status-label";
@@ -69,6 +70,7 @@ export type ChatProps = {
   isOperator: boolean;
   onCloseAction?: () => void;
   pageContext?: PageContext;
+  appTools?: AppTools;
   allowedModels?: MantaModelId[];
   initialPrompt?: string;
   initialDraft?: ChatDraft;
@@ -174,7 +176,11 @@ export function Chat(props: ChatProps) {
   const composerCarryOver = useRef<ComposerCarryOver>({ conversationId: undefined, text: "" });
   const content = <ChatContent {...props} turnState={turnState} composerCarryOver={composerCarryOver} />;
 
-  return <ActiveChatProvider>{props.isEmbedded ? <Suspense>{content}</Suspense> : content}</ActiveChatProvider>;
+  return (
+    <ActiveChatProvider appTools={props.appTools}>
+      {props.isEmbedded ? <Suspense>{content}</Suspense> : content}
+    </ActiveChatProvider>
+  );
 }
 
 function referenceToFilePart(reference: UploadedFileReference, uploadsUrl: string): FileUIPart {
@@ -380,7 +386,7 @@ function ChatContent(props: ChatContentProps) {
         try {
           const { uploaded, failed } = await uploadFiles(files);
 
-          const uploadsUrl = new URL(datastorePath("/agents/uploads/file"), mantaBaseUrl.origin).toString();
+          const uploadsUrl = new URL(datastorePath(uploadedFileRoutePath), mantaBaseUrl.origin).toString();
           fileParts = uploaded.map((reference) => referenceToFilePart(reference, uploadsUrl));
 
           if (isPresent(failed)) {

package/src/components/chat-view/MessageItem.tsx

@@ -17,7 +17,11 @@ import { hasInlineVisualOutput } from "../tool-invocation-card/types";
 import { FileMessagePart } from "./FileMessagePart";
 import { MessageStepGroup } from "./MessageStepGroup";
 import { TextMessagePart } from "./TextMessagePart";
-import { filterSupersededRequestUserInputErrors, isStandaloneToolPart } from "./tool-part-rendering";
+import {
+  filterSupersededRequestUserInputErrors,
+  hasAnsweredApprovalInLastStep,
+  isStandaloneToolPart,
+} from "./tool-part-rendering";
 import { ToolMessagePart } from "./ToolMessagePart";
 import { Banner } from "#components/banner/index";
 import { groupMessageParts } from "#lib/message-grouping";
@@ -71,7 +75,11 @@ function resolveFallbackText(
 
       return match(message.metadata?.responseState)
         .returnType<FallbackText | null>()
-        .with("finished", () => ({ part: finishedWithoutFinalResponsePart, muted: false }))
+        .with("finished", () =>
+          hasAnsweredApprovalInLastStep(message.parts)
+            ? null
+            : { part: finishedWithoutFinalResponsePart, muted: false },
+        )
         .with("failed", () => ({ part: failedAssistantResponsePart, muted: false }))
         .with(P.union("in-progress", "aborted", undefined), () => null)
         .exhaustive();

package/src/components/chat-view/tool-part-rendering.ts

@@ -1,5 +1,6 @@
 import { questionnaireInputSchema, requestUserInputToolPartType } from "@manta-eu/client/shared/questionnaire";
-import { isStaticToolUIPart, type ToolUIPart, type UIMessage } from "ai";
+import { isStaticToolUIPart, isToolUIPart, type ToolUIPart, type UIMessage } from "ai";
+import { findLastIndex } from "ramda";
 
 const standaloneToolPartTypes = new Set<ToolUIPart["type"]>(["tool-actionPlanShowcase", requestUserInputToolPartType]);
 
@@ -20,6 +21,14 @@ export function isStandaloneToolPart(part: ToolUIPart): boolean {
   return standaloneToolPartTypes.has(part.type) || part.state === "approval-requested";
 }
 
+export function hasAnsweredApprovalInLastStep(parts: UIMessage["parts"]): boolean {
+  const lastStepStartIndex = findLastIndex((part) => part.type === "step-start", parts);
+
+  return parts
+    .slice(lastStepStartIndex + 1)
+    .some((part) => isToolUIPart(part) && part.approval?.approved !== undefined);
+}
+
 export function isPendingRequestUserInputPart(part: UIMessage["parts"][number]): boolean {
   return (
     isStaticToolUIPart(part) &&

package/src/components/chip/index.tsx

@@ -2,6 +2,7 @@
 
 import { X } from "lucide-react";
 import type { ReactNode } from "react";
+import { cn } from "#style";
 
 export type ChipProps = {
   label: ReactNode;
@@ -9,12 +10,18 @@ export type ChipProps = {
   removeLabel: string;
   onRemove: () => void;
   disabled?: boolean;
+  className?: string;
 };
 
 /** A removable pill shared by MultiSelect and InputTags; hides its remove button when disabled. */
 export function Chip(props: ChipProps) {
   return (
-    <span className="inline-flex max-w-full items-center gap-1 rounded-sm bg-faint px-1.5 py-0.5 typography-caption text-default-foreground">
+    <span
+      className={cn(
+        "inline-flex max-w-full items-center gap-1 rounded-sm bg-faint px-1.5 py-0.5 typography-caption text-default-foreground",
+        props.className,
+      )}
+    >
       <span className="truncate">{props.label}</span>
       {!props.disabled && (
         <button

package/src/components/embedded-chat/index.tsx

@@ -13,7 +13,7 @@ import { KnowledgeGraphStateProvider } from "#providers/KnowledgeGraphStateProvi
 import { useMantaClient } from "#providers/MantaClientProvider";
 import { ActionPlansPage, PlanDetailRouteContent, useActionPlanRouteState } from "#routes/plans/index";
 
-export type { ChatDraft, ChatStartupReport } from "#lib/chat-types";
+export type { AppTool, AppTools, ChatDraft, ChatStartupReport } from "#lib/chat-types";
 
 export function EmbeddedChat(props: AuthenticatedChatProps) {
   const inRouter = useInRouterContext();
@@ -105,6 +105,7 @@ function EmbeddedContent(props: ResolvedChatProps) {
             isEmbedded
             isOperator={isOperator}
             pageContext={props.pageContext}
+            appTools={props.appTools}
             title={props.title}
             mark={props.mark}
             initialPrompt={props.initialPrompt}

package/src/components/input/input-date-time.tsx

@@ -7,16 +7,23 @@ export type InputDateTimeProps = {
   onChange: (date: Date) => void;
   minDate?: Date;
   maxDate?: Date;
+  allowPast?: boolean;
   disabled?: boolean;
   className?: string;
   align?: "start" | "center" | "end";
+  placeholder?: string;
+  invalid?: boolean;
+  minuteStep?: number;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
 };
 
 export function InputDateTime(props: InputDateTimeProps) {
+  const { id, minuteStep, "aria-label": label, ...shared } = props;
   return (
-    <span id={props.id} className="flex items-center gap-2">
-      <InputDate {...props} />
-      <InputTime {...props} />
+    <span className="flex flex-wrap items-center gap-2">
+      <InputDate {...shared} id={id} aria-label={label} />
+      <InputTime {...shared} minuteStep={minuteStep} aria-label={label ? `${label} time` : undefined} />
     </span>
   );
 }