Let each person pick a skin: OpenDuet, OpenDots or OpenMuse

CHANGELOG.md

@@ -43,6 +43,18 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
   `computers/<Bot id>` on the workspace volume (below). Files saved before the upgrade stay at the
   root of the volume, where no Bot sees them; move them into a Bot's folder to give them back.
 
+### Pick a skin: OpenDuet, OpenDots or OpenMuse
+
+Settings → Preferences → Skin changes how OpenBot looks for you, and nothing about what it does.
+Three skins draw the open-source templates' looks over OpenBot's own features: OpenDuet (one
+phone-width column with Chat and Tasks), OpenDots (a rail, a sidebar of Bots with their avatars, and
+the Bot's computer beside the chat) and OpenMuse (one Bot at the centre, with Chat, Activity, Ideas,
+Goals and Apps). Every skin keeps your deployment's name from `brand.yaml`, OpenBot's own mark and
+each Bot's own avatar; only the look changes. The choice is saved on your account, so it follows
+you to every device, and changes nothing for anybody else. The templates' own features that
+OpenBot has no server for, such as OpenDots' Spaces, OpenDuet's morning brief and OpenMuse's mail and
+calendar, are not part of the skins.
+
 ### The audit log reads like a log
 
 Admin → Audit fills the window and runs the table across the whole pane, with the title, the views

app/index.html

@@ -11,6 +11,8 @@
         const dark = window.localStorage.getItem("openbot-theme") === "dark";
         document.documentElement.classList.toggle("dark", dark);
         document.documentElement.style.colorScheme = dark ? "dark" : "light";
+        const skin = window.localStorage.getItem("openbot-skin");
+        if (skin && skin !== "openbot") document.documentElement.dataset.skin = skin;
       } catch {}
     </script>
   </head>

app/src/components/app-sidebar/app-sidebar.tsx

@@ -1,13 +1,4 @@
-import {
-  IconBolt,
-  IconBox,
-  IconLogout,
-  IconPlug,
-  IconPlus,
-  IconSearch,
-  IconSettings,
-  IconShieldLock,
-} from "@tabler/icons-react";
+import { IconLogout, IconPlus, IconSearch } from "@tabler/icons-react";
 import {
   useInfiniteQuery,
   useMutation,
@@ -54,6 +45,7 @@ import {
 import { useChannelEvents } from "@/lib/channels/use-channel-events";
 import { appConfig } from "@/lib/generated/application-config";
 import { EASE_OUT, ENTRANCE_SECONDS } from "@/lib/motion";
+import { navigationFor } from "@/lib/navigation";
 import { relativeTime } from "@/lib/relative-time";
 import {
   type MessageListEmphasis,
@@ -66,8 +58,6 @@ import { Channel } from "./channel";
 import { ChannelPagination } from "./channel-pagination";
 
 const appLinkOptions = { to: "/" } satisfies LinkOptions;
-const adminLinkOptions = { to: "/admin" } satisfies LinkOptions;
-const settingsLinkOptions = { to: "/settings" } satisfies LinkOptions;
 
 const userMenuItemClassName = "gap-2 px-2 py-1.5";
 
@@ -238,6 +228,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    */
   const animateOrder =
     !searching && (channels.data?.length ?? 0) <= MAX_ANIMATED_ROWS;
+  const navigation = navigationFor(currentUser?.role);
 
   const handleSignOut = async () => {
     await signOut.mutateAsync();
@@ -349,68 +340,29 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       </SidebarContent>
       <SidebarFooter>
         <SidebarMenu className="gap-px">
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              className="hover:bg-foreground/5 h-10"
-              render={(props) => (
-                <Link
-                  {...props}
-                  to="/bots"
-                  activeProps={{ className: "bg-foreground/5" }}
-                />
-              )}
-            >
-              <div className="size-[28px] flex items-center justify-center">
-                <IconBolt />
-              </div>
-              <span className="text-sm">Bots</span>
-              {/* What waits on you across every Bot; Bots lists them first. */}
-              <BotsNavBadge />
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          {/*
-           * Beside Bots rather than inside Admin: each is somebody's own. Capabilities are your skills
-           * and what your Bots remember about you; Connections are the apps a Bot reaches as you.
-           * Capabilities links to `/capabilities` rather than a tab, so it stays lit on both tabs.
-           */}
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              className="hover:bg-foreground/5 h-10"
-              render={(props) => (
-                <Link
-                  {...props}
-                  to="/capabilities"
-                  activeProps={{
-                    className: "bg-foreground/5",
-                  }}
-                />
-              )}
-            >
-              <div className="size-[28px] flex items-center justify-center">
-                <IconBox />
-              </div>
-              <span className="text-sm trackint-tight">Capabilities</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              className="hover:bg-foreground/5 h-10"
-              render={(props) => (
-                <Link
-                  {...props}
-                  to="/connections"
-                  activeProps={{
-                    className: "bg-foreground/5",
-                  }}
-                />
-              )}
-            >
-              <div className="size-[28px] flex items-center justify-center">
-                <IconPlug />
-              </div>
-              <span className="text-sm trackint-tight">Connections</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
+          {navigation
+            .filter((item) => item.section === "primary")
+            .map((item) => (
+              <SidebarMenuItem key={item.id}>
+                <SidebarMenuButton
+                  className="hover:bg-foreground/5 h-10"
+                  render={(props) => (
+                    <Link
+                      {...props}
+                      to={item.to}
+                      activeProps={{ className: "bg-foreground/5" }}
+                    />
+                  )}
+                >
+                  <div className="size-[28px] flex items-center justify-center">
+                    <item.icon />
+                  </div>
+                  <span className="text-sm">{item.label}</span>
+                  {/* What waits on you across every Bot; Bots lists them first. */}
+                  {item.id === "bots" ? <BotsNavBadge /> : null}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger
@@ -429,23 +381,18 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 side="top"
                 sideOffset={8}
               >
-                {/* Admin routes are server-guarded; hide the entry for users who cannot open them. */}
-                {currentUser?.role === "admin" ? (
-                  <DropdownMenuItem
-                    className={userMenuItemClassName}
-                    render={<Link {...adminLinkOptions} />}
-                  >
-                    <IconShieldLock />
-                    Admin
-                  </DropdownMenuItem>
-                ) : null}
-                <DropdownMenuItem
-                  className={userMenuItemClassName}
-                  render={<Link {...settingsLinkOptions} />}
-                >
-                  <IconSettings />
-                  Settings
-                </DropdownMenuItem>
+                {navigation
+                  .filter((item) => item.section === "account")
+                  .map((item) => (
+                    <DropdownMenuItem
+                      className={userMenuItemClassName}
+                      key={item.id}
+                      render={<Link to={item.to} />}
+                    >
+                      <item.icon />
+                      {item.label}
+                    </DropdownMenuItem>
+                  ))}
                 <DropdownMenuItem
                   className={userMenuItemClassName}
                   disabled={signOut.isPending}

app/src/components/channels/composer/composer.tsx

@@ -1345,6 +1345,7 @@ export function Composer({
     <Button
       aria-label="Stop the Bot"
       className={actionClassName}
+      data-slot="composer-stop"
       data-testid="composer-stop"
       onClick={onStop}
       size="icon"
@@ -1374,6 +1375,7 @@ export function Composer({
     <Button
       aria-label={sendLabel}
       className={actionClassName}
+      data-slot="composer-send"
       disabled={!canSend}
       size="icon"
       type="submit"
@@ -1479,6 +1481,7 @@ export function Composer({
         {tooManyStagedNotice}
         <form
           aria-busy={isBusy}
+          data-slot="composer"
           className={cn(
             /*
              * `py-3` IS LOAD-BEARING ONCE THE TEXT WRAPS. On one line `min-h-14` and the controls
@@ -1520,6 +1523,7 @@ export function Composer({
                 <Button
                   aria-label="Attach a file"
                   className="self-end"
+                  data-slot="composer-attach"
                   // The button stays, and stays labelled: a conversation that cannot take another
                   // message has not lost the ability to attach, it has lost the message. Swapping it
                   // for the "unavailable" placeholder would say the wrong thing about why.
@@ -1543,23 +1547,26 @@ export function Composer({
                   <IconPlus className="size-5" />
                 </Button>
               )}
-              <PromptArea
-                aria-label="Message"
-                className={cn(
-                  "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm shadow-none",
-                  editorClassName,
-                )}
-                disabled={disabled}
-                maxHeight={COMPACT_MAX_HEIGHT_PX}
-                minHeight={COMPACT_MIN_HEIGHT_PX}
-                onChange={handleChange}
-                onImagePaste={canAttach ? stagePastedImage : undefined}
-                onSubmit={submitDraft}
-                placeholder="Ask anything"
-                ref={promptAreaRef}
-                triggers={triggers}
-                value={value}
-              />
+              {/* The slot is ours: `PromptArea` passes no attribute through to its own box. */}
+              <div className="min-w-0 flex-1" data-slot="composer-input">
+                <PromptArea
+                  aria-label="Message"
+                  className={cn(
+                    "w-full border-0 bg-transparent p-0 text-sm shadow-none",
+                    editorClassName,
+                  )}
+                  disabled={disabled}
+                  maxHeight={COMPACT_MAX_HEIGHT_PX}
+                  minHeight={COMPACT_MIN_HEIGHT_PX}
+                  onChange={handleChange}
+                  onImagePaste={canAttach ? stagePastedImage : undefined}
+                  onSubmit={submitDraft}
+                  placeholder="Ask anything"
+                  ref={promptAreaRef}
+                  triggers={triggers}
+                  value={value}
+                />
+              </div>
               <DictationButton
                 dictation={dictation}
                 disabled={disabled || voiceCall?.active === true}
@@ -1585,6 +1592,7 @@ export function Composer({
       <form
         aria-busy={isBusy}
         className="overflow-hidden rounded-2xl border border-border bg-card"
+        data-slot="composer"
         onSubmit={handleFormSubmit}
       >
         <DictationSurface
@@ -1600,30 +1608,33 @@ export function Composer({
               images={images}
               onRemove={discardAttachment}
             />
-            <PromptArea
-              aria-label="Message"
-              autoGrow
-              className={cn(
-                "w-full border-0 bg-transparent p-0 text-sm shadow-none",
-                editorClassName,
-              )}
-              disabled={disabled}
-              maxHeight={MAX_HEIGHT_PX}
-              onChange={handleChange}
-              onImagePaste={canAttach ? stagePastedImage : undefined}
-              onSubmit={submitDraft}
-              placeholder="Ask anything"
-              ref={promptAreaRef}
-              triggers={triggers}
-              value={value}
-            />
+            <div data-slot="composer-input">
+              <PromptArea
+                aria-label="Message"
+                autoGrow
+                className={cn(
+                  "w-full border-0 bg-transparent p-0 text-sm shadow-none",
+                  editorClassName,
+                )}
+                disabled={disabled}
+                maxHeight={MAX_HEIGHT_PX}
+                onChange={handleChange}
+                onImagePaste={canAttach ? stagePastedImage : undefined}
+                onSubmit={submitDraft}
+                placeholder="Ask anything"
+                ref={promptAreaRef}
+                triggers={triggers}
+                value={value}
+              />
+            </div>
           </div>
 
           <div className="flex items-center justify-between">
             {attachmentsEnabled ? (
               <Button
                 aria-label="Attach a file"
                 className="size-7 rounded-full p-0"
+                data-slot="composer-attach"
                 disabled={disabled}
                 onClick={() => fileInputRef.current?.click()}
                 type="button"

app/src/components/channels/composer/dictation-controls.tsx

@@ -26,6 +26,7 @@ export function DictationButton({
   return (
     <Button
       aria-label="Dictate a message"
+      data-slot="composer-dictate"
       title={
         dictation.supported
           ? "Dictate a message"
@@ -119,6 +120,7 @@ function RecordingControls({
       <Button
         ref={cancel}
         aria-label="Cancel dictation"
+        data-slot="composer-dictate-cancel"
         title="Cancel dictation"
         size="icon"
         type="button"
@@ -190,6 +192,7 @@ function RecordingControls({
           <div className="flex shrink-0 items-center gap-2">
             <Button
               aria-label="Stop and transcribe"
+              data-slot="composer-dictate-stop"
               title="Stop and add to draft"
               disabled={!recording}
               size="icon"

app/src/components/channels/conversation-view.tsx

@@ -438,7 +438,10 @@ export function ConversationView({
           working={working}
         />
       </div>
-      <div className="max-w-2xl mx-auto w-full px-0 pb-4 shrink-0">
+      <div
+        className="max-w-2xl mx-auto w-full px-0 pb-4 shrink-0"
+        data-slot="composer-column"
+      >
         {notice}
         <Composer
           agents={agents}

app/src/components/layout/detail-panel.tsx

@@ -97,11 +97,18 @@ export function DetailPanel({
         >
           <div
             className="flex h-full flex-col bg-sidebar border-l border-border"
+            data-slot="detail-pane"
             style={{ width: detailWidth }}
           >
             {/* Rendered for the whole animation, so the way out is available immediately. */}
-            <div className="h-12 shrink-0 sticky top-0 flex flex-row items-center justify-between px-2 gap-2">
-              <div className="flex min-w-0 w-full items-center gap-1.5">
+            <div
+              className="h-12 shrink-0 sticky top-0 flex flex-row items-center justify-between px-2 gap-2"
+              data-slot="detail-pane-header"
+            >
+              <div
+                className="flex min-w-0 w-full items-center gap-1.5"
+                data-slot="detail-pane-title"
+              >
                 {title}
               </div>
               <div className="flex flex-row gap-1.5">