create-m5kdev 0.33.0 → 0.34.0

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

@@ -1,44 +1,46 @@
-import { AppConfigProvider } from "@m5kdev/frontend/modules/app/components/AppConfigProvider";
-import { AppTrpcQueryProvider } from "@m5kdev/frontend/modules/app/components/AppTrpcQueryProvider";
-import { AuthProvider } from "@m5kdev/frontend/modules/auth/components/AuthProvider";
-import { DialogProvider } from "@m5kdev/web-ui/components/DialogProvider";
-import { ThemeProvider } from "@m5kdev/web-ui/components/theme-provider";
-import { AppLoader } from "@m5kdev/web-ui/modules/app/components/AppLoader";
-import {
-  APP_LOCALE_CONFIG,
-  APP_NAME,
-  APP_ROLES_CONFIG,
-} from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
-import { BrowserRouter } from "react-router";
-import { Toaster } from "sonner";
-import { Router } from "./Router";
-
-export function App() {
-  return (
-    <NuqsAdapter>
-      <BrowserRouter>
-        <AppConfigProvider
-          config={{
-            appName: APP_NAME,
-            appUrl: import.meta.env.VITE_APP_URL,
-            serverUrl: import.meta.env.VITE_SERVER_URL,
-            locales: APP_LOCALE_CONFIG,
-            roles: APP_ROLES_CONFIG,
-          }}
-        >
-          <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
-            <AuthProvider loader={<AppLoader />}>
-              <AppTrpcQueryProvider>
-                <DialogProvider>
-                  <Router />
-                </DialogProvider>
-                <Toaster richColors closeButton />
-              </AppTrpcQueryProvider>
-            </AuthProvider>
-          </ThemeProvider>
-        </AppConfigProvider>
-      </BrowserRouter>
-    </NuqsAdapter>
-  );
-}
+import { Toast } from "@heroui/react";
+import { AppConfigProvider } from "@m5kdev/frontend/modules/app/components/AppConfigProvider";
+import { AppTrpcQueryProvider } from "@m5kdev/frontend/modules/app/components/AppTrpcQueryProvider";
+import { AuthProvider } from "@m5kdev/frontend/modules/auth/components/AuthProvider";
+import { DialogProvider } from "@m5kdev/web-ui/components/DialogProvider";
+import { ThemeProvider } from "@m5kdev/web-ui/components/theme-provider";
+import { AppLoader } from "@m5kdev/web-ui/modules/app/components/AppLoader";
+import {
+  APP_LOCALE_CONFIG,
+  APP_NAME,
+  APP_ROLES_CONFIG,
+} from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
+import { BrowserRouter } from "react-router";
+import { Toaster } from "sonner";
+import { Router } from "./Router";
+
+export function App() {
+  return (
+    <NuqsAdapter>
+      <BrowserRouter>
+        <AppConfigProvider
+          config={{
+            appName: APP_NAME,
+            appUrl: import.meta.env.VITE_APP_URL,
+            serverUrl: import.meta.env.VITE_SERVER_URL,
+            locales: APP_LOCALE_CONFIG,
+            roles: APP_ROLES_CONFIG,
+          }}
+        >
+          <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
+            <AuthProvider loader={<AppLoader />}>
+              <AppTrpcQueryProvider>
+                <DialogProvider>
+                  <Router />
+                </DialogProvider>
+                <Toaster richColors closeButton />
+                <Toast.Provider placement="bottom end" />
+              </AppTrpcQueryProvider>
+            </AuthProvider>
+          </ThemeProvider>
+        </AppConfigProvider>
+      </BrowserRouter>
+    </NuqsAdapter>
+  );
+}

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/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>
+  );
+}