corporateai 0.0.1

package/ui/src/components/Identity.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+type IdentitySize = "xs" | "sm" | "default" | "lg";
+
+export interface IdentityProps {
+  name: string;
+  avatarUrl?: string | null;
+  initials?: string;
+  size?: IdentitySize;
+  className?: string;
+}
+
+function deriveInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+const textSize: Record<IdentitySize, string> = {
+  xs: "text-sm",
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-sm",
+};
+
+export function Identity({ name, avatarUrl, initials, size = "default", className }: IdentityProps) {
+  const displayInitials = initials ?? deriveInitials(name);
+
+  return (
+    <span className={cn("inline-flex gap-1.5", size === "xs" ? "items-baseline gap-1" : "items-center", size === "lg" && "gap-2", className)}>
+      <Avatar size={size} className={size === "xs" ? "relative -top-px" : undefined}>
+        {avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
+        <AvatarFallback>{displayInitials}</AvatarFallback>
+      </Avatar>
+      <span className={cn("truncate", textSize[size])}>{name}</span>
+    </span>
+  );
+}

package/ui/src/components/InlineEditor.tsx

@@ -0,0 +1,248 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { cn } from "../lib/utils";
+import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
+import { useAutosaveIndicator } from "../hooks/useAutosaveIndicator";
+
+interface InlineEditorProps {
+  value: string;
+  onSave: (value: string) => void | Promise<unknown>;
+  as?: "h1" | "h2" | "p" | "span";
+  className?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  imageUploadHandler?: (file: File) => Promise<string>;
+  mentions?: MentionOption[];
+}
+
+/** Shared padding so display and edit modes occupy the exact same box. */
+const pad = "px-1 -mx-1";
+const markdownPad = "px-1";
+const AUTOSAVE_DEBOUNCE_MS = 900;
+
+export function InlineEditor({
+  value,
+  onSave,
+  as: Tag = "span",
+  className,
+  placeholder = "Click to edit...",
+  multiline = false,
+  imageUploadHandler,
+  mentions,
+}: InlineEditorProps) {
+  const [editing, setEditing] = useState(false);
+  const [multilineFocused, setMultilineFocused] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const markdownRef = useRef<MarkdownEditorRef>(null);
+  const autosaveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const {
+    state: autosaveState,
+    markDirty,
+    reset,
+    runSave,
+  } = useAutosaveIndicator();
+
+  useEffect(() => {
+    if (multiline && multilineFocused) return;
+    setDraft(value);
+  }, [value, multiline, multilineFocused]);
+
+  useEffect(() => {
+    return () => {
+      if (autosaveDebounceRef.current) {
+        clearTimeout(autosaveDebounceRef.current);
+      }
+    };
+  }, []);
+
+  const autoSize = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      if (inputRef.current instanceof HTMLTextAreaElement) {
+        autoSize(inputRef.current);
+      }
+    }
+  }, [editing, autoSize]);
+
+  useEffect(() => {
+    if (!editing || !multiline) return;
+    const frame = requestAnimationFrame(() => {
+      markdownRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [editing, multiline]);
+
+  const commit = useCallback(async (nextValue = draft) => {
+    const trimmed = nextValue.trim();
+    if (trimmed && trimmed !== value) {
+      await Promise.resolve(onSave(trimmed));
+    } else {
+      setDraft(value);
+    }
+    if (!multiline) {
+      setEditing(false);
+    }
+  }, [draft, multiline, onSave, value]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && !multiline) {
+      e.preventDefault();
+      void commit();
+    }
+    if (e.key === "Escape") {
+      if (autosaveDebounceRef.current) {
+        clearTimeout(autosaveDebounceRef.current);
+      }
+      reset();
+      setDraft(value);
+      if (multiline) {
+        setMultilineFocused(false);
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      } else {
+        setEditing(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!multiline) return;
+    if (!multilineFocused) return;
+    const trimmed = draft.trim();
+    if (!trimmed || trimmed === value) {
+      if (autosaveState !== "saved") {
+        reset();
+      }
+      return;
+    }
+    markDirty();
+    if (autosaveDebounceRef.current) {
+      clearTimeout(autosaveDebounceRef.current);
+    }
+    autosaveDebounceRef.current = setTimeout(() => {
+      void runSave(() => commit(trimmed));
+    }, AUTOSAVE_DEBOUNCE_MS);
+
+    return () => {
+      if (autosaveDebounceRef.current) {
+        clearTimeout(autosaveDebounceRef.current);
+      }
+    };
+  }, [autosaveState, commit, draft, markDirty, multiline, multilineFocused, reset, runSave, value]);
+
+  if (multiline) {
+    return (
+      <div
+        className={cn(
+          markdownPad,
+          "rounded transition-colors",
+          multilineFocused ? "bg-transparent" : "hover:bg-accent/20",
+        )}
+        onFocusCapture={() => setMultilineFocused(true)}
+        onBlurCapture={(event) => {
+          if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
+          if (autosaveDebounceRef.current) {
+            clearTimeout(autosaveDebounceRef.current);
+          }
+          setMultilineFocused(false);
+          const trimmed = draft.trim();
+          if (!trimmed || trimmed === value) {
+            reset();
+            void commit();
+            return;
+          }
+          void runSave(() => commit());
+        }}
+        onKeyDown={handleKeyDown}
+      >
+        <MarkdownEditor
+          ref={markdownRef}
+          value={draft}
+          onChange={setDraft}
+          placeholder={placeholder}
+          bordered={false}
+          className="bg-transparent"
+          contentClassName={cn("paperclip-edit-in-place-content", className)}
+          imageUploadHandler={imageUploadHandler}
+          mentions={mentions}
+          onSubmit={() => {
+            const trimmed = draft.trim();
+            if (!trimmed || trimmed === value) {
+              reset();
+              void commit();
+              return;
+            }
+            void runSave(() => commit());
+          }}
+        />
+        <div className="flex min-h-4 items-center justify-end pr-1">
+          <span
+            className={cn(
+              "text-[11px] transition-opacity duration-150",
+              autosaveState === "error" ? "text-destructive" : "text-muted-foreground",
+              autosaveState === "idle" ? "opacity-0" : "opacity-100",
+            )}
+          >
+            {autosaveState === "saving"
+              ? "Autosaving..."
+              : autosaveState === "saved"
+                ? "Saved"
+                : autosaveState === "error"
+                  ? "Could not save"
+                  : "Idle"}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (editing) {
+
+    return (
+      <textarea
+        ref={inputRef}
+        value={draft}
+        rows={1}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          autoSize(e.target);
+        }}
+        onBlur={() => {
+          void commit();
+        }}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "w-full bg-transparent rounded outline-none resize-none overflow-hidden",
+          pad,
+          className
+        )}
+      />
+    );
+  }
+
+  // Use div instead of Tag when rendering markdown to avoid invalid nesting
+  // (e.g. <p> cannot contain the <div>/<p> elements that markdown produces)
+  const DisplayTag = value && multiline ? "div" : Tag;
+
+  return (
+    <DisplayTag
+      className={cn(
+        "cursor-pointer rounded hover:bg-accent/50 transition-colors overflow-hidden",
+        pad,
+        !value && "text-muted-foreground italic",
+        className,
+      )}
+      onClick={() => setEditing(true)}
+    >
+      {value || placeholder}
+    </DisplayTag>
+  );
+}

package/ui/src/components/InlineEntitySelector.tsx

@@ -0,0 +1,206 @@
+import { forwardRef, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Check } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "../lib/utils";
+
+export interface InlineEntityOption {
+  id: string;
+  label: string;
+  searchText?: string;
+}
+
+interface InlineEntitySelectorProps {
+  value: string;
+  options: InlineEntityOption[];
+  placeholder: string;
+  noneLabel: string;
+  searchPlaceholder: string;
+  emptyMessage: string;
+  onChange: (id: string) => void;
+  onConfirm?: () => void;
+  className?: string;
+  renderTriggerValue?: (option: InlineEntityOption | null) => ReactNode;
+  renderOption?: (option: InlineEntityOption, isSelected: boolean) => ReactNode;
+  /** Skip the Portal so the popover stays in the DOM tree (fixes scroll inside Dialogs). */
+  disablePortal?: boolean;
+}
+
+export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySelectorProps>(
+  function InlineEntitySelector(
+    {
+      value,
+      options,
+      placeholder,
+      noneLabel,
+      searchPlaceholder,
+      emptyMessage,
+      onChange,
+      onConfirm,
+      className,
+      renderTriggerValue,
+      renderOption,
+      disablePortal,
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const shouldPreventCloseAutoFocusRef = useRef(false);
+    const isPointerDownRef = useRef(false);
+
+    const allOptions = useMemo<InlineEntityOption[]>(
+      () => [{ id: "", label: noneLabel, searchText: noneLabel }, ...options],
+      [noneLabel, options],
+    );
+
+    const filteredOptions = useMemo(() => {
+      const term = query.trim().toLowerCase();
+      if (!term) return allOptions;
+      return allOptions.filter((option) => {
+        const haystack = `${option.label} ${option.searchText ?? ""}`.toLowerCase();
+        return haystack.includes(term);
+      });
+    }, [allOptions, query]);
+
+    const currentOption = options.find((option) => option.id === value) ?? null;
+
+    useEffect(() => {
+      if (!open) return;
+      const selectedIndex = filteredOptions.findIndex((option) => option.id === value);
+      setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    }, [filteredOptions, open, value]);
+
+    const commitSelection = (index: number, moveNext: boolean) => {
+      const option = filteredOptions[index] ?? filteredOptions[0];
+      if (option) onChange(option.id);
+      shouldPreventCloseAutoFocusRef.current = moveNext;
+      setOpen(false);
+      setQuery("");
+      if (moveNext && onConfirm) {
+        requestAnimationFrame(() => {
+          onConfirm();
+        });
+      }
+    };
+
+    return (
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) setQuery("");
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            className={cn(
+              "inline-flex min-w-0 items-center gap-1 rounded-md border border-border bg-muted/40 px-2 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className,
+            )}
+            onPointerDown={() => { isPointerDownRef.current = true; }}
+            onFocus={() => {
+              if (!isPointerDownRef.current) setOpen(true);
+              isPointerDownRef.current = false;
+            }}
+          >
+            {renderTriggerValue
+              ? renderTriggerValue(currentOption)
+              : (currentOption?.label ?? <span className="text-muted-foreground">{placeholder}</span>)}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          side="bottom"
+          collisionPadding={16}
+          className="w-[min(20rem,calc(100vw-2rem))] p-1"
+          disablePortal={disablePortal}
+          onOpenAutoFocus={(event) => {
+            event.preventDefault();
+            // On touch devices, don't auto-focus the search input to avoid
+            // opening the virtual keyboard which reshapes the viewport and
+            // pushes the popover off-screen.
+            const isTouch = window.matchMedia("(pointer: coarse)").matches;
+            if (!isTouch) {
+              inputRef.current?.focus();
+            }
+          }}
+          onCloseAutoFocus={(event) => {
+            if (!shouldPreventCloseAutoFocusRef.current) return;
+            event.preventDefault();
+            shouldPreventCloseAutoFocusRef.current = false;
+          }}
+        >
+          <input
+            ref={inputRef}
+            className="w-full border-b border-border bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground/60"
+            placeholder={searchPlaceholder}
+            value={query}
+            onChange={(event) => {
+              setQuery(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setHighlightedIndex((current) =>
+                  filteredOptions.length === 0 ? 0 : (current + 1) % filteredOptions.length,
+                );
+                return;
+              }
+              if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setHighlightedIndex((current) => {
+                  if (filteredOptions.length === 0) return 0;
+                  return current <= 0 ? filteredOptions.length - 1 : current - 1;
+                });
+                return;
+              }
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitSelection(highlightedIndex, true);
+                return;
+              }
+              if (event.key === "Tab" && !event.shiftKey) {
+                event.preventDefault();
+                commitSelection(highlightedIndex, true);
+                return;
+              }
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+              }
+            }}
+          />
+          <div className="max-h-56 overflow-y-auto overscroll-contain py-1 touch-pan-y">
+            {filteredOptions.length === 0 ? (
+              <p className="px-2 py-2 text-xs text-muted-foreground">{emptyMessage}</p>
+            ) : (
+              filteredOptions.map((option, index) => {
+                const isSelected = option.id === value;
+                const isHighlighted = index === highlightedIndex;
+                return (
+                  <button
+                    key={option.id || "__none__"}
+                    type="button"
+                    className={cn(
+                      "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-manipulation",
+                      isHighlighted && "bg-accent",
+                    )}
+                    onMouseEnter={() => setHighlightedIndex(index)}
+                    onClick={() => commitSelection(index, true)}
+                  >
+                    {renderOption ? renderOption(option, isSelected) : <span className="truncate">{option.label}</span>}
+                    <Check className={cn("ml-auto h-3.5 w-3.5 text-muted-foreground", isSelected ? "opacity-100" : "opacity-0")} />
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);

package/ui/src/components/InstanceSidebar.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { Clock3, FlaskConical, Puzzle, Settings, SlidersHorizontal } from "lucide-react";
+import { NavLink } from "@/lib/router";
+import { pluginsApi } from "@/api/plugins";
+import { queryKeys } from "@/lib/queryKeys";
+import { SidebarNavItem } from "./SidebarNavItem";
+
+export function InstanceSidebar() {
+  const { data: plugins } = useQuery({
+    queryKey: queryKeys.plugins.all,
+    queryFn: () => pluginsApi.list(),
+  });
+
+  return (
+    <aside className="w-60 h-full min-h-0 border-r border-border bg-background flex flex-col">
+      <div className="flex items-center gap-2 px-3 h-12 shrink-0">
+        <Settings className="h-4 w-4 text-muted-foreground shrink-0 ml-1" />
+        <span className="flex-1 text-sm font-bold text-foreground truncate">
+          Instance Settings
+        </span>
+      </div>
+
+      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
+        <div className="flex flex-col gap-0.5">
+          <SidebarNavItem to="/instance/settings/general" label="General" icon={SlidersHorizontal} end />
+          <SidebarNavItem to="/instance/settings/heartbeats" label="Heartbeats" icon={Clock3} end />
+          <SidebarNavItem to="/instance/settings/experimental" label="Experimental" icon={FlaskConical} />
+          <SidebarNavItem to="/instance/settings/plugins" label="Plugins" icon={Puzzle} />
+          {(plugins ?? []).length > 0 ? (
+            <div className="ml-4 mt-1 flex flex-col gap-0.5 border-l border-border/70 pl-3">
+              {(plugins ?? []).map((plugin) => (
+                <NavLink
+                  key={plugin.id}
+                  to={`/instance/settings/plugins/${plugin.id}`}
+                  className={({ isActive }) =>
+                    [
+                      "rounded-md px-2 py-1.5 text-xs transition-colors",
+                      isActive
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                    ].join(" ")
+                  }
+                >
+                  {plugin.manifestJson.displayName ?? plugin.packageName}
+                </NavLink>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </nav>
+    </aside>
+  );
+}