@backmatter/studio 0.0.15 → 0.0.17

package/src/chrome/AppShell.tsx

@@ -7,17 +7,23 @@ import { ChatPanel } from "../chat/ChatPanel";
 import { ChatProvider, ChatSessionScope } from "../chat/ChatProvider";
 import { colors } from "../styles/tokens.stylex";
 import { TooltipProvider } from "../ui/Tooltip";
-import { cmsWorkspaceSlug, isOrgPickerPath } from "../workspace-path";
+import {
+  cmsWorkspaceSlug,
+  isOrgPickerPath,
+  isWorkspaceCodePath,
+  isWorkspaceListPath,
+} from "../workspace-path";
 import { AppSidebar } from "./AppSidebar";
 import { WorkspaceRail } from "./ContentExplorerSidebar";
 import { CommandPalette } from "./CommandPalette";
-import { FloatingUserMenu } from "./UserMenu";
+import { CornerUserMenu, FloatingUserMenu } from "./UserMenu";
 import { EditorActionsProvider } from "./EditorActionsContext";
 import { EditorFocusProvider } from "./EditorFocusContext";
 import { EditorStatusProvider } from "./EditorStatusContext";
 import { WorkspaceNavProvider, useWorkspaceNav } from "./WorkspaceNavContext";
 import { installParentChatHotkey } from "./hotkeys";
 import { WorkspaceStatusBar } from "./WorkspaceStatusBar";
+import { CodeSessionProvider } from "../pages/code-session-context";
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   return (
@@ -26,7 +32,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <EditorStatusProvider>
           <EditorActionsProvider>
             <EditorFocusProvider>
-              <AppShellInner>{children}</AppShellInner>
+              <CodeSessionProvider>
+                <AppShellInner>{children}</AppShellInner>
+              </CodeSessionProvider>
             </EditorFocusProvider>
           </EditorActionsProvider>
         </EditorStatusProvider>
@@ -43,6 +51,7 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
   const workspaceKey = cmsWorkspaceSlug(location.pathname);
   const workspaceNav = useWorkspaceNav();
   const orgPicker = isOrgPickerPath(location.pathname);
+  const workspaceList = isWorkspaceListPath(location.pathname);
   const embed = searchParams.get("embed") === "1";
   const [treeHost, setTreeHost] = useState<HTMLDivElement | null>(null);
   const inWorkspace = Boolean(workspaceKey && !embed && !orgPicker);
@@ -52,8 +61,9 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
     return installParentChatHotkey();
   }, [embed]);
 
+  const codeSession = Boolean(workspaceKey && isWorkspaceCodePath(location.pathname));
   const chat =
-    workspaceKey && !embed ? (
+    workspaceKey && !embed && !codeSession ? (
       <ChatSessionScope>
         <ChatBar />
         <ChatPanel />
@@ -64,7 +74,7 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
     <div {...stylex.props(styles.shell)}>
       {workspaceKey && !embed ? <WorkspaceStatusBar workspaceId={workspaceKey} /> : null}
       <div {...stylex.props(styles.body)}>
-        {orgPicker || embed ? null : inWorkspace ? (
+        {orgPicker || embed || workspaceList ? null : inWorkspace ? (
           <WorkspaceRail workspace={workspaceNav} treeHost={treeHost} />
         ) : (
           <AppSidebar />
@@ -78,6 +88,7 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
         </div>
       </div>
       {orgPicker ? <FloatingUserMenu /> : null}
+      {workspaceList ? <CornerUserMenu /> : null}
       {embed ? null : <CommandPalette />}
     </div>
   );

package/src/chrome/CommandPalette.tsx

@@ -27,6 +27,7 @@ import {
 } from "./hotkeys";
 import { parsePreviewMessage } from "@backmatter/core/preview";
 import { useWorkspaceNav } from "./WorkspaceNavContext";
+import { codeSessionEntry } from "../code-session-entry";
 import {
   contentDocPath,
   contentTypePath,
@@ -310,6 +311,17 @@ export function CommandPalette() {
       });
     }
     if (workspaceNav) {
+      const codeHref = codeSessionEntry(workspaceNav.role, workspaceNav.workspaceSlug);
+      if (codeHref) {
+        list.push({
+          id: "code-session",
+          group: "Go to",
+          icon: "document",
+          label: "Code session",
+          hint: "Host and chat",
+          run: go(codeHref),
+        });
+      }
       list.push(
         {
           id: "settings-general",

package/src/chrome/ContentExplorerSidebar.tsx

@@ -16,13 +16,14 @@ import { Tooltip } from "../ui/Tooltip";
 import {
   contentDocPath,
   contentRailHref,
-  isWorkspaceContentPath,
+  isWorkspaceCodePath,
   isWorkspaceEditorPath,
   isWorkspaceMediaPath,
   isWorkspaceSettingsPath,
   mediaPath,
   settingsPath,
 } from "../workspace-path";
+import { codeSessionEntry } from "../code-session-entry";
 import { UserMenu } from "./UserMenu";
 import {
   groupContentTypes,
@@ -38,6 +39,7 @@ import {
   ExplorerHeaderListIcon,
   ExplorerHeaderNewFileIcon,
   ExplorerTreeNewFileIcon,
+  ExplorerRailCodeIcon,
   ExplorerRailFilesIcon,
   ExplorerRailHistoryIcon,
   ExplorerRailMediaIcon,
@@ -62,6 +64,7 @@ import {
 } from "./folder-create-context";
 import { canWriteContent } from "../workspace/permissions";
 import {
+  contentRailCurrent,
   contentTreeVisible,
   toggleContentTree,
   useContentTreeOpen,
@@ -264,6 +267,7 @@ function ContentExplorerSidebar({
         pendingCount={pendingCount}
         settingsActive={settingsActive}
         workspaceSlug={workspace.workspaceSlug}
+        role={workspace.role}
         treeOpen={treeOpen}
       />
       {tree && treeHost ? createPortal(tree, treeHost) : null}
@@ -271,22 +275,26 @@ function ContentExplorerSidebar({
   );
 }
 
-function ActivityRail({
+export function ActivityRail({
   pendingCount,
   settingsActive,
   workspaceSlug,
+  role,
   treeOpen,
 }: {
   pendingCount: number;
   settingsActive: boolean;
   workspaceSlug: string;
+  role: string;
   treeOpen: boolean;
 }) {
   const navigate = useNavigate();
   const location = useLocation();
   const onDocument = isWorkspaceEditorPath(location.pathname);
   const filesLabel = onDocument ? (treeOpen ? "Hide files" : "Show files") : "Content";
-  const filesActive = isWorkspaceContentPath(location.pathname) && (!onDocument || treeOpen);
+  const filesActive = contentRailCurrent(location.pathname, treeOpen);
+  const codeHref = codeSessionEntry(role, workspaceSlug);
+  const codeActive = isWorkspaceCodePath(location.pathname);
 
   return (
     <nav
@@ -351,6 +359,18 @@ function ActivityRail({
             <ExplorerRailMediaIcon />
           </Link>
         </Tooltip>
+        {codeHref ? (
+          <Tooltip label="Code session" side="right">
+            <Link
+              to={codeHref}
+              aria-label="Code session"
+              aria-current={codeActive ? "page" : undefined}
+              {...stylex.props(styles.railBtn, codeActive && styles.railBtnActive)}
+            >
+              <ExplorerRailCodeIcon />
+            </Link>
+          </Tooltip>
+        ) : null}
       </div>
       <div {...stylex.props(styles.railBottom)}>
         <Tooltip label="Settings" side="right">

package/src/chrome/Toast.tsx

@@ -0,0 +1,115 @@
+// packages/studio/src/chrome/Toast.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+
+const hover = "@media (hover: hover)";
+
+export type ToastProblem = {
+  file: string;
+  text: string;
+};
+
+/** A dismissible notice that sits over the page, not in the status bar. */
+export function Toast({
+  title,
+  problems,
+  onDismiss,
+}: {
+  title: string;
+  problems: ToastProblem[];
+  onDismiss: () => void;
+}) {
+  return (
+    <div role="alert" {...stylex.props(styles.toast)}>
+      <div {...stylex.props(styles.head)}>
+        <p {...stylex.props(styles.title)}>{title}</p>
+        <button type="button" onClick={onDismiss} {...stylex.props(styles.dismiss)}>
+          Dismiss
+        </button>
+      </div>
+      <ul {...stylex.props(styles.list)}>
+        {problems.map((problem, index) => (
+          <li key={`${problem.file}-${index}`} {...stylex.props(styles.item)}>
+            {problem.file ? <span {...stylex.props(styles.file)}>{problem.file}</span> : null}
+            <span {...stylex.props(styles.text)}>{problem.text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  toast: {
+    position: "fixed",
+    zIndex: z.tooltip,
+    top: "44px",
+    right: space.xl,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    width: "min(380px, calc(100vw - 32px))",
+    maxHeight: "min(420px, calc(100vh - 64px))",
+    padding: space.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 8px 24px rgba(24, 24, 27, 0.12)",
+    color: colors.text,
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+  },
+  title: {
+    margin: 0,
+    fontSize: type.sm,
+    fontWeight: 600,
+    color: colors.danger,
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    overflow: "auto",
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+  },
+  item: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0,
+  },
+  file: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.text,
+  },
+  text: {
+    fontSize: type.sm,
+    lineHeight: 1.45,
+    color: colors.textMuted,
+  },
+  dismiss: {
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+});

package/src/chrome/UserMenu.tsx

@@ -16,10 +16,28 @@ export function FloatingUserMenu() {
   );
 }
 
-export function UserMenu({ quiet = false, compact = false }: { quiet?: boolean; compact?: boolean }) {
+/** Small account control for full-screen pages that have no sidebar. */
+export function CornerUserMenu() {
+  return (
+    <div {...stylex.props(styles.corner)}>
+      <UserMenu quiet placement="below-end" />
+    </div>
+  );
+}
+
+export function UserMenu({
+  quiet = false,
+  compact = false,
+  placement = "above-start",
+}: {
+  quiet?: boolean;
+  compact?: boolean;
+  placement?: "above-start" | "below-end";
+}) {
   const { email, onLogout } = useAppChrome();
   const location = useLocation();
   const onAccount = location.pathname.replace(/\/$/, "") === "/account";
+  const belowEnd = placement === "below-end";
 
   return (
     <Menu.Root>
@@ -29,6 +47,7 @@ export function UserMenu({ quiet = false, compact = false }: { quiet?: boolean;
           styles.trigger,
           quiet && styles.triggerQuiet,
           compact && styles.triggerCompact,
+          belowEnd && styles.triggerCorner,
           onAccount && styles.triggerActive,
         )}
       >
@@ -40,8 +59,8 @@ export function UserMenu({ quiet = false, compact = false }: { quiet?: boolean;
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
-          side="top"
-          align={compact ? "center" : "start"}
+          side={belowEnd ? "bottom" : "top"}
+          align={belowEnd ? "end" : compact ? "center" : "start"}
           sideOffset={6}
           className={cx(popup.positioner)}
         >
@@ -81,6 +100,13 @@ const styles = stylex.create({
     zIndex: z.dropdown,
     maxWidth: "220px",
   },
+  corner: {
+    position: "fixed",
+    top: space.lg,
+    right: space.lg,
+    zIndex: z.dropdown,
+    maxWidth: "240px",
+  },
   trigger: {
     display: "flex",
     width: "100%",
@@ -128,6 +154,11 @@ const styles = stylex.create({
     fontSize: type.sm,
     fontWeight: 500,
   },
+  triggerCorner: {
+    minHeight: "44px",
+    justifyContent: "flex-end",
+    textAlign: "right",
+  },
   triggerActive: {
     backgroundColor: colors.bgActive,
   },