create-m5kdev 0.33.0 → 0.35.0

package/templates/minimal-app/apps/webapp/src/Layout.tsx.tpl

@@ -1,65 +1,96 @@
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { AppShell } from "@m5kdev/web-ui/modules/app/components/AppShell";
-import { AppSidebarContent } from "@m5kdev/web-ui/modules/app/components/AppSidebarContent";
-import { AppSidebarHeader } from "@m5kdev/web-ui/modules/app/components/AppSidebarHeader";
-import { AppSidebarUser } from "@m5kdev/web-ui/modules/app/components/AppSidebarUser";
-import { AuthOrganizationSelect } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationSelect";
-import { AuthUtilityImpersonationBanner } from "@m5kdev/web-ui/modules/auth/components/AuthUtilityImpersonationBanner";
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { FileIcon, UsersIcon } from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router";
-
-export function Layout() {
-  const { data: session } = useSession();
-  const { t } = useTranslation("{{APP_SLUG}}");
-  const navigate = useNavigate();
-
-  // ephemeral UI state: which collapsible sidebar groups are open
-  const [navigationState, setNavigationState] = useState<Record<string, boolean>>({});
-
-  const onSignOut = () => {
-    authClient.signOut();
-    navigate("/login");
-  };
-
-  return (
-    <AppShell
-      header={<AuthUtilityImpersonationBanner />}
-      sidebar={{
-        header: <AppSidebarHeader logo={{ src: "/logo.svg", alt: APP_NAME }} title={APP_NAME} />,
-        content: (
-          <>
-            <div className="px-2 group-data-[collapsible=icon]:hidden">
-              <AuthOrganizationSelect />
-            </div>
-            <AppSidebarContent
-              navigationItems={[
-                {
-                  label: t("layout.navigation.posts"),
-                  icon: <FileIcon />,
-                  link: "/",
-                },
-                {
-                  label: t("layout.navigation.members"),
-                  icon: <UsersIcon />,
-                  link: "/organization/members",
-                },
-              ]}
-              navigationState={navigationState}
-              onNavigationStateChange={setNavigationState}
-            />
-          </>
-        ),
-        footer: (
-          // data-testid so e2e (and app tests) can assert on the signed-in user
-          <div data-testid="session-email" className="contents">
-            <AppSidebarUser user={session?.user} onSignOut={onSignOut} />
-          </div>
-        ),
-      }}
-    />
-  );
-}
+// biome-ignore-all assist/source/organizeImports: feature-gated lucide icons stay in marker blocks
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { AppShell } from "@m5kdev/web-ui/modules/app/components/AppShell";
+import { AppSidebarContent } from "@m5kdev/web-ui/modules/app/components/AppSidebarContent";
+import { AppSidebarHeader } from "@m5kdev/web-ui/modules/app/components/AppSidebarHeader";
+import { AppSidebarUser } from "@m5kdev/web-ui/modules/app/components/AppSidebarUser";
+import { AuthOrganizationSelect } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationSelect";
+import { AuthUtilityImpersonationBanner } from "@m5kdev/web-ui/modules/auth/components/AuthUtilityImpersonationBanner";
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { FileIcon, UsersIcon } from "lucide-react";
+// m5k:ai:start
+import { SparklesIcon } from "lucide-react";
+// m5k:ai:end
+// m5k:files:start
+import { ImageIcon } from "lucide-react";
+// m5k:files:end
+// m5k:workflows:start
+import { WorkflowIcon } from "lucide-react";
+// m5k:workflows:end
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+
+export function Layout() {
+  const { data: session } = useSession();
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const navigate = useNavigate();
+
+  // ephemeral UI state: which collapsible sidebar groups are open
+  const [navigationState, setNavigationState] = useState<Record<string, boolean>>({});
+
+  const onSignOut = () => {
+    authClient.signOut();
+    navigate("/login");
+  };
+
+  return (
+    <AppShell
+      header={<AuthUtilityImpersonationBanner />}
+      sidebar={{
+        header: <AppSidebarHeader logo={{ src: "/logo.svg", alt: APP_NAME }} title={APP_NAME} />,
+        content: (
+          <>
+            <div className="px-2 group-data-[collapsible=icon]:hidden">
+              <AuthOrganizationSelect />
+            </div>
+            <AppSidebarContent
+              navigationItems={[
+                {
+                  label: t("layout.navigation.posts"),
+                  icon: <FileIcon />,
+                  link: "/",
+                },
+                // m5k:ai:start
+                {
+                  label: t("layout.navigation.conversation"),
+                  icon: <SparklesIcon />,
+                  link: "/conversation",
+                },
+                // m5k:ai:end
+                // m5k:files:start
+                {
+                  label: t("layout.navigation.files"),
+                  icon: <ImageIcon />,
+                  link: "/files",
+                },
+                // m5k:files:end
+                // m5k:workflows:start
+                {
+                  label: t("layout.navigation.workflows"),
+                  icon: <WorkflowIcon />,
+                  link: "/workflows",
+                },
+                // m5k:workflows:end
+                {
+                  label: t("layout.navigation.members"),
+                  icon: <UsersIcon />,
+                  link: "/organization/members",
+                },
+              ]}
+              navigationState={navigationState}
+              onNavigationStateChange={setNavigationState}
+            />
+          </>
+        ),
+        footer: (
+          // data-testid so e2e (and app tests) can assert on the signed-in user
+          <div data-testid="session-email" className="contents">
+            <AppSidebarUser user={session?.user} onSignOut={onSignOut} />
+          </div>
+        ),
+      }}
+    />
+  );
+}

package/templates/minimal-app/apps/webapp/src/Router.tsx.tpl

@@ -1,93 +1,114 @@
-import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
-import { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
-import { AuthOrganizationAcceptInvitationRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationAcceptInvitationRoute";
-import { AuthOrganizationRouter } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationRouter";
-import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
-import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
-import { AuthUtilityProtectedRoutes as ProtectedRoutes } from "@m5kdev/web-ui/modules/auth/components/AuthUtilityProtectedRoutes";
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { useTranslation } from "react-i18next";
-import { Route, Routes } from "react-router";
-import { z } from "zod";
-import { PostsRoute } from "@/modules/posts/PostsRoute";
-import { Layout } from "./Layout";
-
-const preferenceSchema = z.object({
-  compactMode: z.boolean().optional(),
-  postsPerPage: z.number().min(1).max(20).optional(),
-});
-
-const preferenceControls = {
-  compactMode: {
-    label: "Compact mode",
-    element: "switch",
-  },
-  postsPerPage: {
-    label: "Posts per page",
-    element: "number",
-    min: 1,
-    max: 20,
-    step: 1,
-  },
-} as const;
-
-function AuthHeader() {
-  const { t } = useTranslation("{{APP_SLUG}}");
-
-  return (
-    <div className="text-center">
-      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-default-500">
-        {t("auth.header.eyebrow")}
-      </p>
-      <h1 className="mt-3 font-editorial text-4xl text-ink">{APP_NAME}</h1>
-      <p className="mt-3 text-sm text-default-600">{t("auth.header.tagline")}</p>
-    </div>
-  );
-}
-
-export function Router() {
-  const isWaitlist = import.meta.env.VITE_ENABLE_WAITLIST === "true";
-
-  return (
-    <Routes>
-      {/* Built-in routers register as function calls so their <Route> elements
-          land directly in this tree. */}
-      {AuthPublicRouter({
-        header: <AuthHeader />,
-        waitlist: isWaitlist,
-        onLocaleChange: syncI18nLocale,
-      })}
-
-      {/* public: a logged-out invitee must reach this route so it can send
-          them to signup — inside ProtectedRoutes they'd bounce to /login */}
-      <Route
-        path="/organization/accept-invitation"
-        element={<AuthOrganizationAcceptInvitationRoute />}
-      />
-
-      <Route
-        element={
-          <ProtectedRoutes>
-            <Layout />
-          </ProtectedRoutes>
-        }
-      >
-        <Route index element={<PostsRoute />} />
-
-        {AuthUserRouter({
-          schema: preferenceSchema,
-          controls: preferenceControls,
-          onLocaleChange: syncI18nLocale,
-        })}
-        {AuthOrganizationRouter({
-          schema: preferenceSchema,
-          controls: preferenceControls,
-        })}
-        {AuthAdminRouter({
-          enableWaitlist: true,
-          enableAccountClaimActions: true,
-        })}
-      </Route>
-    </Routes>
-  );
-}
+// biome-ignore-all assist/source/organizeImports: feature-gated route imports stay in marker blocks
+import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
+import { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
+import { AuthOrganizationAcceptInvitationRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationAcceptInvitationRoute";
+import { AuthOrganizationRouter } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationRouter";
+import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
+import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
+import { AuthUtilityProtectedRoutes as ProtectedRoutes } from "@m5kdev/web-ui/modules/auth/components/AuthUtilityProtectedRoutes";
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { useTranslation } from "react-i18next";
+import { Route, Routes } from "react-router";
+import { z } from "zod";
+import { PostsRoute } from "@/modules/posts/PostsRoute";
+// m5k:ai:start
+import { ConversationRoute } from "@/modules/conversation/ConversationRoute";
+// m5k:ai:end
+// m5k:files:start
+import { FilesRoute } from "@/modules/files/FilesRoute";
+// m5k:files:end
+// m5k:workflows:start
+import { WorkflowsRoute } from "@/modules/workflows/WorkflowsRoute";
+// m5k:workflows:end
+import { Layout } from "./Layout";
+
+const preferenceSchema = z.object({
+  compactMode: z.boolean().optional(),
+  postsPerPage: z.number().min(1).max(20).optional(),
+});
+
+const preferenceControls = {
+  compactMode: {
+    label: "Compact mode",
+    element: "switch",
+  },
+  postsPerPage: {
+    label: "Posts per page",
+    element: "number",
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+} as const;
+
+function AuthHeader() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+
+  return (
+    <div className="text-center">
+      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-default-500">
+        {t("auth.header.eyebrow")}
+      </p>
+      <h1 className="mt-3 font-editorial text-4xl text-ink">{APP_NAME}</h1>
+      <p className="mt-3 text-sm text-default-600">{t("auth.header.tagline")}</p>
+    </div>
+  );
+}
+
+export function Router() {
+  const isWaitlist = import.meta.env.VITE_ENABLE_WAITLIST === "true";
+
+  return (
+    <Routes>
+      {/* Built-in routers register as function calls so their <Route> elements
+          land directly in this tree. */}
+      {AuthPublicRouter({
+        header: <AuthHeader />,
+        waitlist: isWaitlist,
+        onLocaleChange: syncI18nLocale,
+      })}
+
+      {/* public: a logged-out invitee must reach this route so it can send
+          them to signup — inside ProtectedRoutes they'd bounce to /login */}
+      <Route
+        path="/organization/accept-invitation"
+        element={<AuthOrganizationAcceptInvitationRoute />}
+      />
+
+      <Route
+        element={
+          <ProtectedRoutes>
+            <Layout />
+          </ProtectedRoutes>
+        }
+      >
+        <Route index element={<PostsRoute />} />
+        {[
+          // m5k:ai:start
+          <Route key="conversation" path="conversation" element={<ConversationRoute />} />,
+          // m5k:ai:end
+          // m5k:files:start
+          <Route key="files" path="files" element={<FilesRoute />} />,
+          // m5k:files:end
+          // m5k:workflows:start
+          <Route key="workflows" path="workflows" element={<WorkflowsRoute />} />,
+          // m5k:workflows:end
+        ]}
+
+        {AuthUserRouter({
+          schema: preferenceSchema,
+          controls: preferenceControls,
+          onLocaleChange: syncI18nLocale,
+        })}
+        {AuthOrganizationRouter({
+          schema: preferenceSchema,
+          controls: preferenceControls,
+        })}
+        {AuthAdminRouter({
+          enableWaitlist: true,
+          enableAccountClaimActions: true,
+        })}
+      </Route>
+    </Routes>
+  );
+}

package/templates/minimal-app/apps/webapp/src/StarterServerEventProvider.tsx.tpl

@@ -0,0 +1,38 @@
+// biome-ignore-all assist/source/organizeImports: feature-gated Server event imports stay in marker blocks
+import { ServerEventProvider } from "@m5kdev/frontend/modules/app/components/ServerEventProvider";
+// m5k:workflows:start
+import type { QueryClient } from "@tanstack/react-query";
+import { DEMO_WORKFLOW_SERVER_EVENT_RESOURCE } from "{{PACKAGE_SCOPE}}/shared/modules/demo-workflow/demo-workflow.constants";
+// m5k:workflows:end
+import type { ReactNode } from "react";
+// m5k:workflows:start
+import { useTRPC } from "./utils/trpc";
+// m5k:workflows:end
+
+type Props = {
+  children: ReactNode;
+};
+
+/** Kernel SSE for the authenticated session. Workflow handlers are feature-gated. */
+export function StarterServerEventProvider({ children }: Props): ReactNode {
+  // m5k:workflows:start
+  const trpc = useTRPC();
+  const invalidateWorkflowList = (queryClient: QueryClient): void => {
+    void queryClient.invalidateQueries(trpc.workflow.list.queryFilter());
+  };
+  // m5k:workflows:end
+  return (
+    <ServerEventProvider
+      // m5k:workflows:start
+      handlers={{
+        [DEMO_WORKFLOW_SERVER_EVENT_RESOURCE]: (_event, queryClient) => {
+          invalidateWorkflowList(queryClient);
+        },
+      }}
+      onReconnect={invalidateWorkflowList}
+      // m5k:workflows:end
+    >
+      {children}
+    </ServerEventProvider>
+  );
+}

package/templates/minimal-app/apps/webapp/src/index.css.tpl

@@ -1,15 +1,15 @@
-/* biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind v4 */
-
-@import "tailwindcss";
-@import "@heroui/styles";
-@import "tw-animate-css";
-
-@source "./node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
-@source "../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
-@source "../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
-@source "../../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
-@source "../../../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
-
-:root {
-  --accent: oklch(0.6204 0.195 253.83);
-}
+/* biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind v4 */
+
+@import "tailwindcss";
+@import "@heroui/styles";
+@import "tw-animate-css";
+
+@source "./node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
+@source "../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
+@source "../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
+@source "../../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
+@source "../../../../node_modules/@m5kdev/web-ui/dist/src/**/*.{mjs}";
+
+:root {
+  --accent: oklch(0.6204 0.195 253.83);
+}

package/templates/minimal-app/apps/webapp/src/main.tsx.tpl

@@ -1,26 +1,26 @@
-import type { PostHogConfig } from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App";
-import "./index.css";
-import "./utils/i18n";
-
-const options = {
-  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
-  defaults: "2025-05-24",
-} satisfies Partial<PostHogConfig>;
-
-const rootElement = document.getElementById("root");
-
-if (!rootElement) {
-  throw new Error("Root element #root not found.");
-}
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY ?? "demo"} options={options}>
-      <App />
-    </PostHogProvider>
-  </StrictMode>
-);
+import type { PostHogConfig } from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+import "./utils/i18n";
+
+const options = {
+  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+  defaults: "2025-05-24",
+} satisfies Partial<PostHogConfig>;
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root not found.");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY ?? "demo"} options={options}>
+      <App />
+    </PostHogProvider>
+  </StrictMode>
+);

package/templates/minimal-app/apps/webapp/src/modules/conversation/ConversationRoute.tsx.tpl

@@ -0,0 +1,36 @@
+import { Card, Skeleton } from "@heroui/react";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { AiConversation } from "@m5kdev/web-ui/modules/ai/components/AiConversation";
+import { STARTER_ASSISTANT_AGENT_ID } from "{{PACKAGE_SCOPE}}/shared/modules/conversation/conversation.constants";
+import { useTranslation } from "react-i18next";
+
+export function ConversationRoute() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const { data: session } = useSession();
+  const threadId = session?.user?.id;
+
+  return (
+    <div
+      className="grid h-svh grid-rows-[auto_minmax(0,1fr)] gap-4 p-4"
+      data-testid="conversation-route"
+    >
+      <Card>
+        <Card.Header className="flex flex-col gap-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted">
+            {t("conversation.hero.eyebrow")}
+          </p>
+          <Card.Title>{t("conversation.hero.title")}</Card.Title>
+          <Card.Description>{t("conversation.hero.body")}</Card.Description>
+        </Card.Header>
+      </Card>
+
+      {threadId ? (
+        <div className="min-h-0 overflow-hidden rounded-xl border">
+          <AiConversation agentId={STARTER_ASSISTANT_AGENT_ID} threadId={threadId} />
+        </div>
+      ) : (
+        <Skeleton className="min-h-0 rounded-xl" />
+      )}
+    </div>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/files/FilesRoute.tsx.tpl

@@ -0,0 +1,88 @@
+import { Button, Card, Chip, EmptyState, Skeleton } from "@heroui/react";
+import { ImageIcon, UploadIcon } from "lucide-react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useFilesRoute } from "./hooks/useFilesRoute";
+
+export function FilesRoute() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const files = useFilesRoute();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="p-4 grid gap-6" data-testid="files-route">
+      <Card>
+        <Card.Header className="flex flex-col gap-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted">
+            {t("files.hero.eyebrow")}
+          </p>
+          <Card.Title>{t("files.hero.title")}</Card.Title>
+          <Card.Description>{t("files.hero.body")}</Card.Description>
+        </Card.Header>
+        <Card.Content className="grid gap-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/webp"
+              className="sr-only"
+              data-testid="file-upload-input"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) files.upload(file);
+                event.target.value = "";
+              }}
+            />
+            <Button
+              variant="primary"
+              isDisabled={files.isUploading}
+              data-testid="file-upload"
+              onPress={() => inputRef.current?.click()}
+            >
+              <span className="inline-flex items-center gap-2">
+                <UploadIcon className="h-4 w-4" />
+                {t("files.hero.upload")}
+              </span>
+            </Button>
+            <Chip variant="soft" color="default">
+              {files.isFetching ? t("files.hero.syncing") : t("files.hero.synced")}
+            </Chip>
+          </div>
+        </Card.Content>
+      </Card>
+
+      {files.isLoading ? (
+        <div className="grid gap-3">
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+        </div>
+      ) : files.rows.length === 0 ? (
+        <EmptyState className="flex flex-col items-center gap-4 py-10 text-center">
+          <ImageIcon className="size-6 text-muted" />
+          <div className="grid gap-2">
+            <p className="text-lg font-semibold">{t("files.empty.title")}</p>
+            <p className="max-w-xl text-sm text-muted">{t("files.empty.body")}</p>
+          </div>
+        </EmptyState>
+      ) : (
+        <div className="grid gap-3">
+          {files.rows.map((row) => (
+            <Card key={row.id} data-testid="file-row">
+              <Card.Header className="flex flex-wrap items-start justify-between gap-3">
+                <div className="grid gap-1">
+                  <Card.Title>{row.originalName}</Card.Title>
+                  <Card.Description>{row.contentType}</Card.Description>
+                </div>
+                {row.memberId ? (
+                  <Chip size="sm" variant="soft" color="default">
+                    {t("files.row.organization")}
+                  </Chip>
+                ) : null}
+              </Card.Header>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}