corporateai 0.0.1

package/ui/src/components/MobileBottomNav.tsx

@@ -0,0 +1,123 @@
+import { useMemo } from "react";
+import { NavLink, useLocation } from "@/lib/router";
+import {
+  House,
+  CircleDot,
+  SquarePen,
+  Users,
+  Inbox,
+} from "lucide-react";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { cn } from "../lib/utils";
+import { useInboxBadge } from "../hooks/useInboxBadge";
+
+interface MobileBottomNavProps {
+  visible: boolean;
+}
+
+interface MobileNavLinkItem {
+  type: "link";
+  to: string;
+  label: string;
+  icon: typeof House;
+  badge?: number;
+}
+
+interface MobileNavActionItem {
+  type: "action";
+  label: string;
+  icon: typeof SquarePen;
+  onClick: () => void;
+}
+
+type MobileNavItem = MobileNavLinkItem | MobileNavActionItem;
+
+export function MobileBottomNav({ visible }: MobileBottomNavProps) {
+  const location = useLocation();
+  const { selectedCompanyId } = useCompany();
+  const { openNewIssue } = useDialog();
+  const inboxBadge = useInboxBadge(selectedCompanyId);
+
+  const items = useMemo<MobileNavItem[]>(
+    () => [
+      { type: "link", to: "/dashboard", label: "Home", icon: House },
+      { type: "link", to: "/issues", label: "Issues", icon: CircleDot },
+      { type: "action", label: "Create", icon: SquarePen, onClick: () => openNewIssue() },
+      { type: "link", to: "/agents/all", label: "Agents", icon: Users },
+      {
+        type: "link",
+        to: "/inbox",
+        label: "Inbox",
+        icon: Inbox,
+        badge: inboxBadge.inbox,
+      },
+    ],
+    [openNewIssue, inboxBadge.inbox],
+  );
+
+  return (
+    <nav
+      className={cn(
+        "fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85 transition-transform duration-200 ease-out md:hidden pb-[env(safe-area-inset-bottom)]",
+        visible ? "translate-y-0" : "translate-y-full",
+      )}
+      aria-label="Mobile navigation"
+    >
+      <div className="grid h-16 grid-cols-5 px-1">
+        {items.map((item) => {
+          if (item.type === "action") {
+            const Icon = item.icon;
+            const active = /\/issues\/new(?:\/|$)/.test(location.pathname);
+            return (
+              <button
+                key={item.label}
+                type="button"
+                onClick={item.onClick}
+                className={cn(
+                  "relative flex min-w-0 flex-col items-center justify-center gap-1 rounded-md text-[10px] font-medium transition-colors",
+                  active
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <Icon className="h-[18px] w-[18px]" />
+                <span className="truncate">{item.label}</span>
+              </button>
+            );
+          }
+
+          const Icon = item.icon;
+          return (
+            <NavLink
+              key={item.label}
+              to={item.to}
+              className={({ isActive }) =>
+                cn(
+                  "relative flex min-w-0 flex-col items-center justify-center gap-1 rounded-md text-[10px] font-medium transition-colors",
+                  isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <span className="relative">
+                    <Icon className={cn("h-[18px] w-[18px]", isActive && "stroke-[2.3]")} />
+                    {item.badge != null && item.badge > 0 && (
+                      <span className="absolute -right-2 -top-2 rounded-full bg-primary px-1.5 py-0.5 text-[10px] leading-none text-primary-foreground">
+                        {item.badge > 99 ? "99+" : item.badge}
+                      </span>
+                    )}
+                  </span>
+                  <span className="truncate">{item.label}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

package/ui/src/components/NewAgentDialog.tsx

@@ -0,0 +1,223 @@
+import { useState, type ComponentType } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@/lib/router";
+import { useDialog } from "../context/DialogContext";
+import { useCompany } from "../context/CompanyContext";
+import { agentsApi } from "../api/agents";
+import { queryKeys } from "../lib/queryKeys";
+import {
+  Dialog,
+  DialogContent,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  ArrowLeft,
+  Bot,
+  Code,
+  Gem,
+  MousePointer2,
+  Sparkles,
+  Terminal,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { OpenCodeLogoIcon } from "./OpenCodeLogoIcon";
+
+type AdvancedAdapterType =
+  | "claude_local"
+  | "codex_local"
+  | "gemini_local"
+  | "opencode_local"
+  | "pi_local"
+  | "cursor"
+  | "openclaw_gateway";
+
+const ADVANCED_ADAPTER_OPTIONS: Array<{
+  value: AdvancedAdapterType;
+  label: string;
+  desc: string;
+  icon: ComponentType<{ className?: string }>;
+  recommended?: boolean;
+}> = [
+  {
+    value: "claude_local",
+    label: "Claude Code",
+    icon: Sparkles,
+    desc: "Local Claude agent",
+    recommended: true,
+  },
+  {
+    value: "codex_local",
+    label: "Codex",
+    icon: Code,
+    desc: "Local Codex agent",
+    recommended: true,
+  },
+  {
+    value: "gemini_local",
+    label: "Gemini CLI",
+    icon: Gem,
+    desc: "Local Gemini agent",
+  },
+  {
+    value: "opencode_local",
+    label: "OpenCode",
+    icon: OpenCodeLogoIcon,
+    desc: "Local multi-provider agent",
+  },
+  {
+    value: "pi_local",
+    label: "Pi",
+    icon: Terminal,
+    desc: "Local Pi agent",
+  },
+  {
+    value: "cursor",
+    label: "Cursor",
+    icon: MousePointer2,
+    desc: "Local Cursor agent",
+  },
+  {
+    value: "openclaw_gateway",
+    label: "OpenClaw Gateway",
+    icon: Bot,
+    desc: "Invoke OpenClaw via gateway protocol",
+  },
+];
+
+export function NewAgentDialog() {
+  const { newAgentOpen, closeNewAgent, openNewIssue } = useDialog();
+  const { selectedCompanyId } = useCompany();
+  const navigate = useNavigate();
+  const [showAdvancedCards, setShowAdvancedCards] = useState(false);
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && newAgentOpen,
+  });
+
+  const ceoAgent = (agents ?? []).find((a) => a.role === "ceo");
+
+  function handleAskCeo() {
+    closeNewAgent();
+    openNewIssue({
+      assigneeAgentId: ceoAgent?.id,
+      title: "Create a new agent",
+      description: "(type in what kind of agent you want here)",
+    });
+  }
+
+  function handleAdvancedConfig() {
+    setShowAdvancedCards(true);
+  }
+
+  function handleAdvancedAdapterPick(adapterType: AdvancedAdapterType) {
+    closeNewAgent();
+    setShowAdvancedCards(false);
+    navigate(`/agents/new?adapterType=${encodeURIComponent(adapterType)}`);
+  }
+
+  return (
+    <Dialog
+      open={newAgentOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          setShowAdvancedCards(false);
+          closeNewAgent();
+        }
+      }}
+    >
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-md p-0 gap-0 overflow-hidden"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+          <span className="text-sm text-muted-foreground">Add a new agent</span>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="text-muted-foreground"
+            onClick={() => {
+              setShowAdvancedCards(false);
+              closeNewAgent();
+            }}
+          >
+            <span className="text-lg leading-none">&times;</span>
+          </Button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {!showAdvancedCards ? (
+            <>
+              {/* Recommendation */}
+              <div className="text-center space-y-3">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
+                  <Sparkles className="h-6 w-6 text-foreground" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  We recommend letting your CEO handle agent setup — they know the
+                  org structure and can configure reporting, permissions, and
+                  adapters.
+                </p>
+              </div>
+
+              <Button className="w-full" size="lg" onClick={handleAskCeo}>
+                <Bot className="h-4 w-4 mr-2" />
+                Ask the CEO to create a new agent
+              </Button>
+
+              {/* Advanced link */}
+              <div className="text-center">
+                <button
+                  className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+                  onClick={handleAdvancedConfig}
+                >
+                  I want advanced configuration myself
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <button
+                  className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  onClick={() => setShowAdvancedCards(false)}
+                >
+                  <ArrowLeft className="h-3.5 w-3.5" />
+                  Back
+                </button>
+                <p className="text-sm text-muted-foreground">
+                  Choose your adapter type for advanced setup.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                {ADVANCED_ADAPTER_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    className={cn(
+                      "flex flex-col items-center gap-1.5 rounded-md border border-border p-3 text-xs transition-colors hover:bg-accent/50 relative"
+                    )}
+                    onClick={() => handleAdvancedAdapterPick(opt.value)}
+                  >
+                    {opt.recommended && (
+                      <span className="absolute -top-1.5 right-1.5 bg-green-500 text-white text-[9px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
+                        Recommended
+                      </span>
+                    )}
+                    <opt.icon className="h-4 w-4" />
+                    <span className="font-medium">{opt.label}</span>
+                    <span className="text-muted-foreground text-[10px]">
+                      {opt.desc}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/ui/src/components/NewGoalDialog.tsx

@@ -0,0 +1,283 @@
+import { useRef, useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { GOAL_STATUSES, GOAL_LEVELS } from "@corporateai/shared";
+import { useDialog } from "../context/DialogContext";
+import { useCompany } from "../context/CompanyContext";
+import { goalsApi } from "../api/goals";
+import { assetsApi } from "../api/assets";
+import { queryKeys } from "../lib/queryKeys";
+import {
+  Dialog,
+  DialogContent,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Maximize2,
+  Minimize2,
+  Target,
+  Layers,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor";
+import { StatusBadge } from "./StatusBadge";
+
+const levelLabels: Record<string, string> = {
+  company: "Company",
+  team: "Team",
+  agent: "Agent",
+  task: "Task",
+};
+
+export function NewGoalDialog() {
+  const { newGoalOpen, newGoalDefaults, closeNewGoal } = useDialog();
+  const { selectedCompanyId, selectedCompany } = useCompany();
+  const queryClient = useQueryClient();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("planned");
+  const [level, setLevel] = useState("task");
+  const [parentId, setParentId] = useState("");
+  const [expanded, setExpanded] = useState(false);
+
+  const [statusOpen, setStatusOpen] = useState(false);
+  const [levelOpen, setLevelOpen] = useState(false);
+  const [parentOpen, setParentOpen] = useState(false);
+  const descriptionEditorRef = useRef<MarkdownEditorRef>(null);
+
+  // Apply defaults when dialog opens
+  const appliedParentId = parentId || newGoalDefaults.parentId || "";
+
+  const { data: goals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && newGoalOpen,
+  });
+
+  const createGoal = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      goalsApi.create(selectedCompanyId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.goals.list(selectedCompanyId!) });
+      reset();
+      closeNewGoal();
+    },
+  });
+
+  const uploadDescriptionImage = useMutation({
+    mutationFn: async (file: File) => {
+      if (!selectedCompanyId) throw new Error("No company selected");
+      return assetsApi.uploadImage(selectedCompanyId, file, "goals/drafts");
+    },
+  });
+
+  function reset() {
+    setTitle("");
+    setDescription("");
+    setStatus("planned");
+    setLevel("task");
+    setParentId("");
+    setExpanded(false);
+  }
+
+  function handleSubmit() {
+    if (!selectedCompanyId || !title.trim()) return;
+    createGoal.mutate({
+      title: title.trim(),
+      description: description.trim() || undefined,
+      status,
+      level,
+      ...(appliedParentId ? { parentId: appliedParentId } : {}),
+    });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  const currentParent = (goals ?? []).find((g) => g.id === appliedParentId);
+
+  return (
+    <Dialog
+      open={newGoalOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          reset();
+          closeNewGoal();
+        }
+      }}
+    >
+      <DialogContent
+        showCloseButton={false}
+        className={cn("p-0 gap-0", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            {selectedCompany && (
+              <span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
+                {selectedCompany.name.slice(0, 3).toUpperCase()}
+              </span>
+            )}
+            <span className="text-muted-foreground/60">&rsaquo;</span>
+            <span>{newGoalDefaults.parentId ? "New sub-goal" : "New goal"}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="text-muted-foreground"
+              onClick={() => setExpanded(!expanded)}
+            >
+              {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="text-muted-foreground"
+              onClick={() => { reset(); closeNewGoal(); }}
+            >
+              <span className="text-lg leading-none">&times;</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Title */}
+        <div className="px-4 pt-4 pb-2 shrink-0">
+          <input
+            className="w-full text-lg font-semibold bg-transparent outline-none placeholder:text-muted-foreground/50"
+            placeholder="Goal title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Tab" && !e.shiftKey) {
+                e.preventDefault();
+                descriptionEditorRef.current?.focus();
+              }
+            }}
+            autoFocus
+          />
+        </div>
+
+        {/* Description */}
+        <div className="px-4 pb-2">
+          <MarkdownEditor
+            ref={descriptionEditorRef}
+            value={description}
+            onChange={setDescription}
+            placeholder="Add description..."
+            bordered={false}
+            contentClassName={cn("text-sm text-muted-foreground", expanded ? "min-h-[220px]" : "min-h-[120px]")}
+            imageUploadHandler={async (file) => {
+              const asset = await uploadDescriptionImage.mutateAsync(file);
+              return asset.contentPath;
+            }}
+          />
+        </div>
+
+        {/* Property chips */}
+        <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
+          {/* Status */}
+          <Popover open={statusOpen} onOpenChange={setStatusOpen}>
+            <PopoverTrigger asChild>
+              <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors">
+                <StatusBadge status={status} />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-40 p-1" align="start">
+              {GOAL_STATUSES.map((s) => (
+                <button
+                  key={s}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 capitalize",
+                    s === status && "bg-accent"
+                  )}
+                  onClick={() => { setStatus(s); setStatusOpen(false); }}
+                >
+                  {s}
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+
+          {/* Level */}
+          <Popover open={levelOpen} onOpenChange={setLevelOpen}>
+            <PopoverTrigger asChild>
+              <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors">
+                <Layers className="h-3 w-3 text-muted-foreground" />
+                {levelLabels[level] ?? level}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-40 p-1" align="start">
+              {GOAL_LEVELS.map((l) => (
+                <button
+                  key={l}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                    l === level && "bg-accent"
+                  )}
+                  onClick={() => { setLevel(l); setLevelOpen(false); }}
+                >
+                  {levelLabels[l] ?? l}
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+
+          {/* Parent goal */}
+          <Popover open={parentOpen} onOpenChange={setParentOpen}>
+            <PopoverTrigger asChild>
+              <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors">
+                <Target className="h-3 w-3 text-muted-foreground" />
+                {currentParent ? currentParent.title : "Parent goal"}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-48 p-1" align="start">
+              <button
+                className={cn(
+                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                  !appliedParentId && "bg-accent"
+                )}
+                onClick={() => { setParentId(""); setParentOpen(false); }}
+              >
+                No parent
+              </button>
+              {(goals ?? []).map((g) => (
+                <button
+                  key={g.id}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
+                    g.id === appliedParentId && "bg-accent"
+                  )}
+                  onClick={() => { setParentId(g.id); setParentOpen(false); }}
+                >
+                  {g.title}
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end px-4 py-2.5 border-t border-border">
+          <Button
+            size="sm"
+            disabled={!title.trim() || createGoal.isPending}
+            onClick={handleSubmit}
+          >
+            {createGoal.isPending ? "Creating…" : newGoalDefaults.parentId ? "Create sub-goal" : "Create goal"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+