@creezio/shell-ui 0.22.0

package/ui/theme/tailwind-preset.cjs

@@ -0,0 +1,82 @@
+/**
+ * Preset Tailwind Creezio — thème générique extrait verbatim du design
+ * system TempoFlow (gold TF) : accent orange (palette `sky` remappée),
+ * neutres `slate` réchauffés (encre #14182f), fond crème via variables CSS.
+ * AUCUN métier. CJS volontaire : chargé par tailwind.config (Node/jiti)
+ * sans étape de build.
+ *
+ * Usage marque :
+ *   presets: [require("@creezio/shell-ui/tailwind-preset")]
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {
+      keyframes: {
+        shake: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "20%, 60%": { transform: "translateX(-4px)" },
+          "40%, 80%": { transform: "translateX(4px)" },
+        },
+        "hub-pulse": {
+          "0%, 100%": { boxShadow: "0 0 0 0 rgba(16, 185, 129, 0.35)" },
+          "50%": { boxShadow: "0 0 0 6px rgba(16, 185, 129, 0)" },
+        },
+        "unlock-pulse": {
+          "0%, 100%": { transform: "scale(1)" },
+          "50%": { transform: "scale(1.03)" },
+        },
+        "mission-win": {
+          "0%, 100%": { boxShadow: "0 0 0 0 rgba(16, 185, 129, 0.2)" },
+          "50%": { boxShadow: "0 0 12px 2px rgba(16, 185, 129, 0.35)" },
+        },
+      },
+      animation: {
+        shake: "shake 0.4s ease-in-out",
+        "hub-pulse": "hub-pulse 1.5s ease-in-out infinite",
+        "unlock-pulse": "unlock-pulse 2s ease-in-out infinite",
+        "mission-win": "mission-win 2.5s ease-in-out infinite",
+      },
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        // Accent (historiquement `sky`) : orange brand — recolore l'UI
+        // sans toucher aux composants.
+        sky: {
+          50: "#fef4ec",
+          100: "#fde5d2",
+          200: "#fac9a5",
+          300: "#f7a86d",
+          400: "#f48c41",
+          500: "#f0701d",
+          600: "#d95f12",
+          700: "#b84f10",
+          800: "#93400f",
+          900: "#78350f",
+          950: "#451a03",
+        },
+        // Neutres : clairs réchauffés (fond crème), foncés tirés vers
+        // l'encre #14182f (sidebar sombre).
+        slate: {
+          50: "#f8f7f4",
+          100: "#f0efea",
+          200: "#e3e1da",
+          300: "#cdccc5",
+          400: "#98999b",
+          500: "#6b7080",
+          600: "#4b5063",
+          700: "#383d52",
+          800: "#252940",
+          900: "#14182f",
+          950: "#0d101f",
+        },
+      },
+      fontFamily: {
+        serif: ["var(--font-brand-serif)", "Georgia", "serif"],
+      },
+    },
+  },
+  plugins: [],
+};

package/ui/theme/theme.css

@@ -0,0 +1,328 @@
+/*
+ * Thème Creezio canonique — extrait verbatim du design system TempoFlow
+ * (gold TF). Fond crème #faf7f1, encre #14182f, chrome onglets « Chrome »,
+ * sidebar sombre, animations onboarding. AUCUN métier.
+ *
+ * Usage marque (layout racine, AVANT le globals.css marque) :
+ *   import "@creezio/shell-ui/theme.css";
+ *   import "./globals.css";   // ne contient que les @tailwind + overrides
+ *
+ * Les directives @tailwind restent dans le globals.css de la marque (sinon
+ * double expansion des utilities). À utiliser avec le preset Tailwind kit :
+ *   presets: [require("@creezio/shell-ui/tailwind-preset")]
+ */
+
+:root {
+  --background: #faf7f1;
+  --foreground: #14182f;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+/* CSS pur (fichier kit traité hors contexte Tailwind marque) :
+   équivalent de `@layer base { * { @apply border-slate-200 } }` avec la
+   palette slate réchauffée du preset kit. */
+* {
+  border-color: #e3e1da;
+}
+
+html {
+  /* Évite le jump de largeur quand une scrollbar apparaît / disparaît */
+  scrollbar-gutter: stable;
+}
+
+/* ------------------------------------------------------------------ */
+/* Onboarding — micro-étapes façon Typeform (transitions verticales)  */
+/* ------------------------------------------------------------------ */
+
+/*
+ * Fond crème plein + wash blanc adouci (convention “atmospheric wash” /
+ * eased multi-stop — Linear / Stripe / Apple) :
+ * pas de carte blanche bordée (sinon trait net crème↔blanc),
+ * plusieurs stops pour éviter la bande dure d’un dégradé 2 couleurs.
+ */
+.onb-stage {
+  background-color: #faf7f1;
+  background-image:
+    radial-gradient(
+      110% 75% at 50% -5%,
+      #ffffff 0%,
+      rgba(255, 255, 255, 0.72) 28%,
+      rgba(253, 250, 246, 0.35) 52%,
+      rgba(250, 247, 241, 0) 72%
+    ),
+    linear-gradient(
+      180deg,
+      #fdfbf8 0%,
+      #faf7f1 42%,
+      #faf7f1 100%
+    );
+}
+
+.onb-stepper-fade {
+  border-bottom: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* Zones scrollables onboarding : scroll possible, scrollbar invisible
+   (évite le flash pendant translateY des animations d'entrée). */
+.onb-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.onb-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+@keyframes onb-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes onb-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-28px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.onb-anim-fwd {
+  animation: onb-in-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.onb-anim-back {
+  animation: onb-in-down 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Interstitiel entre deux étapes : titre qui apparaît, tient, puis s'efface */
+@keyframes onb-interstitial {
+  0% {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  14% {
+    opacity: 1;
+    transform: none;
+  }
+  82% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+}
+
+.onb-interstitial {
+  animation: onb-interstitial 2.1s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes onb-line-grow {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.onb-interstitial-line {
+  transform-origin: left center;
+  animation: onb-line-grow 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
+}
+
+/* Apparition en cascade des éléments d'une micro-étape */
+.onb-stagger > * {
+  opacity: 0;
+  animation: onb-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+.onb-stagger > *:nth-child(1) { animation-delay: 0.04s; }
+.onb-stagger > *:nth-child(2) { animation-delay: 0.09s; }
+.onb-stagger > *:nth-child(3) { animation-delay: 0.14s; }
+.onb-stagger > *:nth-child(4) { animation-delay: 0.19s; }
+.onb-stagger > *:nth-child(5) { animation-delay: 0.24s; }
+.onb-stagger > *:nth-child(6) { animation-delay: 0.29s; }
+.onb-stagger > *:nth-child(7) { animation-delay: 0.34s; }
+.onb-stagger > *:nth-child(8) { animation-delay: 0.39s; }
+.onb-stagger > *:nth-child(9) { animation-delay: 0.44s; }
+.onb-stagger > *:nth-child(10) { animation-delay: 0.49s; }
+
+/* Panes workspace : aucun transition involontaire sur le contenu au switch */
+.workspace-pane-stack,
+.workspace-pane {
+  transition: none !important;
+}
+
+/* ------------------------------------------------------------------ */
+/* Onglets workspace — rendu Chrome (courbes inversées, séparateurs)  */
+/* ------------------------------------------------------------------ */
+
+/* Courbes inversées en bas de l'onglet actif (flare Chrome).
+   Deux carrés 8×8 posés de part et d'autre du pied de l'onglet ;
+   un dégradé radial centré sur le coin haut extérieur découpe l'arc
+   concave, le reste est blanc et fusionne avec le fond de page. */
+.tf-tab-bg::before,
+.tf-tab-bg::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+}
+
+.tf-tab-bg::before {
+  left: -8px;
+  background: radial-gradient(
+    circle 8px at 0 0,
+    transparent 0,
+    transparent 7px,
+    #fff 7.75px
+  );
+}
+
+.tf-tab-bg::after {
+  right: -8px;
+  background: radial-gradient(
+    circle 8px at 100% 0,
+    transparent 0,
+    transparent 7px,
+    #fff 7.75px
+  );
+}
+
+/* Séparateurs verticaux : masqués sur le premier onglet, autour de
+   l'onglet actif et autour de l'onglet survolé — comme Chrome. */
+.tf-tab:first-child > .tf-sep,
+.tf-tab.is-active > .tf-sep,
+.tf-tab.is-active + .tf-tab > .tf-sep,
+.tf-tab:hover > .tf-sep,
+.tf-tab:hover + .tf-tab > .tf-sep {
+  opacity: 0;
+}
+
+/* Apparition du contenu d'un nouvel onglet */
+@keyframes tf-tab-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tf-tab-enter {
+  animation: tf-tab-enter 180ms ease-out;
+}
+
+/* Sidebar nav — thin dark scrollbar (Firefox + WebKit) */
+.sidebar-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #4b5063 #0d101f;
+}
+
+.sidebar-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: #0d101f;
+  border-radius: 9999px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background: #4b5063;
+  border-radius: 9999px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb:hover {
+  background: #6b7080;
+}
+
+/* Electron frameless (Windows) : bandeau titre / onglets déplaçable */
+.tempoflow-titlebar-drag {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.tempoflow-titlebar-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+/* Contrôles fenêtre Windows : curseur default (pas pointer) — hover = fond */
+.tempoflow-titlebar-no-drag button {
+  cursor: default;
+}
+
+/* ------------------------------------------------------------------ */
+/* Palette de recherche globale (Ctrl+K)                              */
+/* ------------------------------------------------------------------ */
+
+/*
+ * Styles possédés par le composant : la palette ne doit JAMAIS dépendre des
+ * règles génériques de modales de la marque (un `[role="dialog"]` global qui
+ * borne largeur/hauteur/overflow a détruit son rendu — incident winhub PR #8,
+ * 2026-08-10). Classe doublée + attribut = spécificité (0,3,0) : prime sur
+ * tout sélecteur générique à une classe/un attribut, quel que soit l ordre
+ * des feuilles de styles. Les classes Tailwind du composant restent pour le
+ * visuel (fond, ombre, bord) ; la géométrie vit ICI et nulle part ailleurs.
+ */
+.creezio-search-palette.creezio-search-palette[role="dialog"] {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100dvh;
+  max-height: none;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  overscroll-behavior: auto;
+}
+
+@media (min-width: 768px) {
+  .creezio-search-palette.creezio-search-palette[role="dialog"] {
+    top: 8%;
+    right: auto;
+    bottom: 0;
+    left: 50%;
+    width: min(920px, calc(100vw - 2rem));
+    height: auto;
+    max-height: min(680px, 85vh);
+    transform: translateX(-50%);
+    border-radius: 0.75rem;
+  }
+}

package/ui/workspace/ai-activity-panel-host.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import type { ComponentType } from "react";
+
+type AnyProps = Record<string, unknown>;
+
+let Panel: ComponentType<AnyProps> | null = null;
+
+/** O9p : brancher `AiActivityPanel` depuis `@creezio/tasks/ui`. */
+export function configureAiActivityPanel(
+  next: ComponentType<AnyProps> | null,
+): void {
+  Panel = next;
+}
+
+export function AiActivityPanelHost(props: AnyProps) {
+  if (!Panel) return null;
+  return <Panel {...props} />;
+}

package/ui/workspace/ai-workspace-agent-host.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Bus agent dans chaque vue CRM (surtout partitions IA).
+ * Reçoit navigate / ui-action depuis le main Electron et exécute le
+ * même pipeline fake-cursor que le chat (UiDriver), puis ACK IPC.
+ */
+
+import { useEffect } from "react";
+import { runUiAction, runUiNavigate } from "@creezio/assistant/ui";
+import { useTabWorkspace } from "./tab-workspace-host";
+
+export function AiWorkspaceAgentHost() {
+  const { navigate } = useTabWorkspace();
+
+  useEffect(() => {
+    const api = typeof window !== "undefined" ? getShellDesktopApi() : undefined;
+    if (!api?.onAiWorkspaceNavigate && !api?.onAiWorkspaceUiAction) return;
+
+    const offNav = api.onAiWorkspaceNavigate?.((ev: { href: string; actionId?: string }) => {
+      void (async () => {
+        const result = await runUiNavigate(ev.href, (href) => {
+          navigate(href, { newTab: false });
+        });
+        api.ackAiWorkspaceAction?.(ev.actionId, result);
+      })();
+    });
+
+    const offUi = api.onAiWorkspaceUiAction?.((ev: { type: string; params: Record<string, unknown>; actionId?: string }) => {
+      void (async () => {
+        let result: Record<string, unknown>;
+        if (ev.type === "navigate") {
+          const href =
+            (typeof ev.params.href === "string" && ev.params.href) ||
+            (typeof ev.params.path === "string" && ev.params.path) ||
+            "";
+          result = await runUiNavigate(href, (h) => navigate(h, { newTab: false }));
+        } else {
+          result = await runUiAction({ type: ev.type, params: ev.params || {} });
+        }
+        api.ackAiWorkspaceAction?.(ev.actionId, result);
+      })();
+    });
+
+    return () => {
+      offNav?.();
+      offUi?.();
+    };
+  }, [navigate]);
+
+  return null;
+}

package/ui/workspace/ai-workspace-banner.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+/**
+ * Bandeau visible uniquement dans une WebContentsView espace IA.
+ * « Retour au workspace principal » = showOwner (pas stop-impersonate).
+ *
+ * P4 (missions) : abonné au flux SSE d'activité de l'IA
+ * (/api/v1/tasks/activity/:userId/stream) — quand un run démarre, une
+ * notification visuelle apparaît dans le bandeau (pulse + titre de la
+ * mission) ; elle passe en « terminé » à la fin du run.
+ */
+
+import { useEffect, useState } from "react";
+import { Bot, ListTodo, Loader2, Undo2 } from "lucide-react";
+import Link from "next/link";
+import { Button } from "../primitives/button";
+import { AiActivityPanelHost } from "./ai-activity-panel-host";
+import { cn, getShellDesktopApi } from "@creezio/shell-ui";
+import { aidProps } from "../lib/aid";
+
+type Identity = {
+  userId: string;
+  label: string;
+  active: boolean;
+};
+
+type RunNotice = {
+  runId: string;
+  status: string;
+  taskTitle: string | null;
+};
+
+const RUNNING_STATUSES = new Set(["queued", "running", "hitl_waiting"]);
+
+export function AiWorkspaceBanner() {
+  const [identity, setIdentity] = useState<Identity | null>(null);
+  const [notice, setNotice] = useState<RunNotice | null>(null);
+
+  useEffect(() => {
+    const api = typeof window !== "undefined" ? getShellDesktopApi() : undefined;
+    if (!api?.getAiWorkspaceIdentity) return;
+
+    let cancelled = false;
+    void api.getAiWorkspaceIdentity().then((id: { userId?: string; label?: string; active?: boolean } | null) => {
+      if (cancelled) return;
+      if (id?.userId) {
+        setIdentity({
+          userId: id.userId,
+          label: id.label || id.userId,
+          active: Boolean(id.active),
+        });
+        return;
+      }
+      // Pas d’espace IA — ignorer un éventuel sessionStorage fantôme.
+      setIdentity(null);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Notification de mission : flux SSE d'activité existant (event `run`).
+  useEffect(() => {
+    if (!identity?.userId) return;
+    const es = new EventSource(
+      `/api/v1/tasks/activity/${encodeURIComponent(identity.userId)}/stream`,
+    );
+    const onRun = (ev: MessageEvent) => {
+      try {
+        const data = JSON.parse(String(ev.data)) as {
+          run?: { id?: string; status?: string } | null;
+          task?: { title?: string } | null;
+        };
+        if (!data.run?.id) return;
+        setNotice({
+          runId: data.run.id,
+          status: String(data.run.status || ""),
+          taskTitle: data.task?.title || null,
+        });
+      } catch {
+        /* frame illisible — ignorer */
+      }
+    };
+    es.addEventListener("run", onRun);
+    es.onerror = () => {
+      /* reconnexion auto EventSource */
+    };
+    return () => {
+      es.removeEventListener("run", onRun);
+      es.close();
+    };
+  }, [identity?.userId]);
+
+  if (!identity?.userId) return null;
+
+  const running = notice ? RUNNING_STATUSES.has(notice.status) : false;
+
+  return (
+    <div className="border-b border-sky-300 bg-sky-50 text-sky-950">
+      <div className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
+        <div className="flex min-w-0 items-center gap-2">
+          <Bot className="h-4 w-4 shrink-0" />
+          <span className="truncate">
+            Espace collaborateur IA <strong>{identity.label}</strong>
+            <span className="ml-1 opacity-70">
+              — vue workspace réelle (fake-cursor live)
+            </span>
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5">
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="shrink-0"
+            asChild
+          >
+            <Link
+              href={`/taches?assignee=${encodeURIComponent(identity.userId)}`}
+              {...aidProps("ai-banner-missions")}
+            >
+              <ListTodo className="mr-1.5 h-3.5 w-3.5" />
+              Mes missions
+            </Link>
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="shrink-0 border-sky-400 bg-white"
+            onClick={() => {
+              void getShellDesktopApi()?.showOwnerWorkspace?.();
+            }}
+          >
+            <Undo2 className="mr-1.5 h-3.5 w-3.5" />
+            Retour au workspace principal
+          </Button>
+        </div>
+      </div>
+      {notice ? (
+        <div
+          {...aidProps("ai-banner-run-notice")}
+          data-creezio-run-status={notice.status}
+          className={cn(
+            "flex items-center gap-2 border-t px-3 py-1.5 text-xs",
+            running
+              ? "animate-pulse border-violet-200 bg-violet-50 text-violet-900"
+              : "border-sky-200 bg-white/70 text-slate-600",
+          )}
+        >
+          {running ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+          {running
+            ? `Mission en cours${notice.taskTitle ? ` : ${notice.taskTitle}` : ""}`
+            : `Dernière mission ${notice.status === "succeeded" ? "terminée" : notice.status}${notice.taskTitle ? ` : ${notice.taskTitle}` : ""}`}
+        </div>
+      ) : null}
+      <div className="border-t border-sky-200 bg-white/80 px-3 py-2">
+        <AiActivityPanelHost
+          userId={identity.userId}
+          compact
+          title={`Logs — ${identity.label}`}
+          className="border-sky-200"
+        />
+      </div>
+    </div>
+  );
+}

package/ui/workspace/impersonation-banner.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+/**
+ * Bandeau impersonation « Voir comme » — module natif kit.
+ * Rendu par WorkspaceRoot au-dessus du slot `banners` : visible dès que la
+ * session est impersonifiée (`me.impersonating`), quel que soit le câblage
+ * marque. « Revenir à mon compte » = stopImpersonate (redirect
+ * stopImpersonateRedirect du SessionProvider, défaut /collaborateurs).
+ * Le nom produit vient de getShellUiBrand().productName (CreezioUiBoot) —
+ * aucun libellé marque en dur ici.
+ */
+
+import { Undo2 } from "lucide-react";
+import { useSession } from "@creezio/auth/ui";
+import { getShellUiBrand } from "@creezio/shell-ui";
+import { Button } from "../primitives/button";
+import { aidProps } from "../lib/aid";
+
+export function ImpersonationBanner() {
+  const { me, stopImpersonate } = useSession();
+  if (!me?.impersonating) return null;
+  const productName = getShellUiBrand().productName;
+  return (
+    <div className="flex items-center justify-between gap-3 border-b border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-950">
+      <span className="min-w-0 truncate">
+        Vous voyez {productName} comme <strong>{me.user}</strong>
+      </span>
+      <Button
+        size="sm"
+        variant="outline"
+        className="shrink-0"
+        onClick={() => void stopImpersonate()}
+        {...aidProps("impersonation-stop")}
+      >
+        <Undo2 className="mr-1.5 h-3.5 w-3.5" /> Revenir à mon compte
+      </Button>
+    </div>
+  );
+}