Merge public-gh/master into paperclip-company-import-export

2026-03-17 10:19:31 -05:00
parent 517e90c13a 549e3b22e5
commit 2a7c44d314
33 changed files with 987 additions and 81 deletions
--- a/ui/src/api/agents.ts
+++ b/ui/src/api/agents.ts
@@ -149,4 +149,12 @@ export const agentsApi = {
  ) => api.post<HeartbeatRun | { status: "skipped" }>(agentPath(id, companyId, "/wakeup"), data),
  loginWithClaude: (id: string, companyId?: string) =>
    api.post<ClaudeLoginResult>(agentPath(id, companyId, "/claude-login"), {}),
+  availableSkills: () =>
+    api.get<{ skills: AvailableSkill[] }>("/skills/available"),
 };
+
+export interface AvailableSkill {
+  name: string;
+  description: string;
+  isPaperclipManaged: boolean;
+}
--- a/ui/src/api/health.ts
+++ b/ui/src/api/health.ts
@@ -1,5 +1,6 @@
 export type HealthStatus = {
  status: "ok";
+  version?: string;
  deploymentMode?: "local_trusted" | "authenticated";
  deploymentExposure?: "private" | "public";
  authReady?: boolean;
--- a/ui/src/components/AgentConfigForm.tsx
+++ b/ui/src/components/AgentConfigForm.tsx
@@ -1,6 +1,11 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AGENT_ADAPTER_TYPES } from "@paperclipai/shared";
+import {
+  hasSessionCompactionThresholds,
+  resolveSessionCompactionPolicy,
+  type ResolvedSessionCompactionPolicy,
+} from "@paperclipai/adapter-utils";
 import type {
  Agent,
  AdapterEnvironmentTestResult,
@@ -393,6 +398,31 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
  const codexSearchEnabled = adapterType === "codex_local"
    ? (isCreate ? Boolean(val!.search) : eff("adapterConfig", "search", Boolean(config.search)))
    : false;
+  const effectiveRuntimeConfig = useMemo(() => {
+    if (isCreate) {
+      return {
+        heartbeat: {
+          enabled: val!.heartbeatEnabled,
+          intervalSec: val!.intervalSec,
+        },
+      };
+    }
+    const mergedHeartbeat = {
+      ...(runtimeConfig.heartbeat && typeof runtimeConfig.heartbeat === "object"
+        ? runtimeConfig.heartbeat as Record<string, unknown>
+        : {}),
+      ...overlay.heartbeat,
+    };
+    return {
+      ...runtimeConfig,
+      heartbeat: mergedHeartbeat,
+    };
+  }, [isCreate, overlay.heartbeat, runtimeConfig, val]);
+  const sessionCompaction = useMemo(
+    () => resolveSessionCompactionPolicy(adapterType, effectiveRuntimeConfig),
+    [adapterType, effectiveRuntimeConfig],
+  );
+  const showSessionCompactionCard = Boolean(sessionCompaction.adapterSessionManagement);

  return (
    <div className={cn("relative", cards && "space-y-6")}>
@@ -829,6 +859,12 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
              numberHint={help.intervalSec}
              showNumber={val!.heartbeatEnabled}
            />
+            {showSessionCompactionCard && (
+              <SessionCompactionPolicyCard
+                adapterType={adapterType}
+                resolution={sessionCompaction}
+              />
+            )}
          </div>
        </div>
      ) : !isCreate ? (
@@ -851,6 +887,12 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                numberHint={help.intervalSec}
                showNumber={eff("heartbeat", "enabled", heartbeat.enabled !== false)}
              />
+              {showSessionCompactionCard && (
+                <SessionCompactionPolicyCard
+                  adapterType={adapterType}
+                  resolution={sessionCompaction}
+                />
+              )}
            </div>
            <CollapsibleSection
              title="Advanced Run Policy"
@@ -938,6 +980,69 @@ function AdapterEnvironmentResult({ result }: { result: AdapterEnvironmentTestRe
  );
 }

+function formatSessionThreshold(value: number, suffix: string) {
+  if (value <= 0) return "Off";
+  return `${value.toLocaleString("en-US")} ${suffix}`;
+}
+
+function SessionCompactionPolicyCard({
+  adapterType,
+  resolution,
+}: {
+  adapterType: string;
+  resolution: ResolvedSessionCompactionPolicy;
+}) {
+  const { adapterSessionManagement, policy, source } = resolution;
+  if (!adapterSessionManagement) return null;
+
+  const adapterLabel = adapterLabels[adapterType] ?? adapterType;
+  const sourceLabel = source === "agent_override" ? "Agent override" : "Adapter default";
+  const rotationDisabled = !policy.enabled || !hasSessionCompactionThresholds(policy);
+  const nativeSummary =
+    adapterSessionManagement.nativeContextManagement === "confirmed"
+      ? `${adapterLabel} is treated as natively managing long context, so Paperclip fresh-session rotation defaults to off.`
+      : adapterSessionManagement.nativeContextManagement === "likely"
+        ? `${adapterLabel} likely manages long context itself, but Paperclip still keeps conservative rotation defaults for now.`
+        : `${adapterLabel} does not have verified native compaction behavior, so Paperclip keeps conservative rotation defaults.`;
+
+  return (
+    <div className="rounded-md border border-sky-500/25 bg-sky-500/10 px-3 py-3 space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <div className="text-xs font-medium text-sky-50">Session compaction</div>
+        <span className="rounded-full border border-sky-400/30 px-2 py-0.5 text-[11px] text-sky-100">
+          {sourceLabel}
+        </span>
+      </div>
+      <p className="text-xs text-sky-100/90">
+        {nativeSummary}
+      </p>
+      <p className="text-xs text-sky-100/80">
+        {rotationDisabled
+          ? "No Paperclip-managed fresh-session thresholds are active for this adapter."
+          : "Paperclip will start a fresh session when one of these thresholds is reached."}
+      </p>
+      <div className="grid grid-cols-3 gap-2 text-[11px] text-sky-100/85 tabular-nums">
+        <div>
+          <div className="text-sky-100/60">Runs</div>
+          <div>{formatSessionThreshold(policy.maxSessionRuns, "runs")}</div>
+        </div>
+        <div>
+          <div className="text-sky-100/60">Raw input</div>
+          <div>{formatSessionThreshold(policy.maxRawInputTokens, "tokens")}</div>
+        </div>
+        <div>
+          <div className="text-sky-100/60">Age</div>
+          <div>{formatSessionThreshold(policy.maxSessionAgeHours, "hours")}</div>
+        </div>
+      </div>
+      <p className="text-[11px] text-sky-100/75">
+        A large cumulative raw token total does not mean the full session is resent on every heartbeat.
+        {source === "agent_override" && " This agent has an explicit runtimeConfig session compaction override."}
+      </p>
+    </div>
+  );
+}
+
 /* ---- Internal sub-components ---- */

 const ENABLED_ADAPTER_TYPES = new Set(["claude_local", "codex_local", "gemini_local", "opencode_local", "cursor"]);
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -545,7 +545,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp

        {currentProjectSupportsExecutionWorkspace && (
          <PropertyRow label="Workspace">
-            <div className="flex items-center justify-between gap-3 rounded-md border border-border px-2 py-1.5 w-full">
+            <div className="flex items-center justify-between gap-3 w-full">
              <div className="min-w-0">
                <div className="text-sm">
                  {usesIsolatedExecutionWorkspace ? "Isolated issue checkout" : "Project primary checkout"}
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -313,6 +313,9 @@ export function Layout() {
                  <BookOpen className="h-4 w-4 shrink-0" />
                  <span className="truncate">Documentation</span>
                </a>
+                {health?.version && (
+                  <span className="px-2 text-xs text-muted-foreground shrink-0">v{health.version}</span>
+                )}
                <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                  <Link
                    to={instanceSettingsTarget}
@@ -363,6 +366,9 @@ export function Layout() {
                  <BookOpen className="h-4 w-4 shrink-0" />
                  <span className="truncate">Documentation</span>
                </a>
+                {health?.version && (
+                  <span className="px-2 text-xs text-muted-foreground shrink-0">v{health.version}</span>
+                )}
                <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                  <Link
                    to={instanceSettingsTarget}
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@@ -61,6 +61,10 @@ export interface MarkdownEditorRef {
  focus: () => void;
 }

+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 /* ---- Mention detection helpers ---- */

 interface MentionState {
@@ -251,6 +255,24 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
          try {
            const src = await handler(file);
            setUploadError(null);
+            // After MDXEditor inserts the image, ensure two newlines follow it
+            // so the cursor isn't stuck right next to the image.
+            setTimeout(() => {
+              const current = latestValueRef.current;
+              const escapedSrc = escapeRegExp(src);
+              const updated = current.replace(
+                new RegExp(`(!\\[[^\\]]*\\]\\(${escapedSrc}\\))(?!\\n\\n)`, "g"),
+                "$1\n\n",
+              );
+              if (updated !== current) {
+                latestValueRef.current = updated;
+                ref.current?.setMarkdown(updated);
+                onChange(updated);
+                requestAnimationFrame(() => {
+                  ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
+                });
+              }
+            }, 100);
            return src;
          } catch (err) {
            const message = err instanceof Error ? err.message : "Image upload failed";
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -1008,8 +1008,8 @@ export function NewIssueDialog() {
        </div>

        {currentProjectSupportsExecutionWorkspace && (
-          <div className="px-4 pb-2 shrink-0">
-            <div className="flex items-center justify-between rounded-md border border-border px-3 py-2">
+          <div className="px-4 py-3 shrink-0">
+            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <div className="text-xs font-medium">Use isolated issue checkout</div>
                <div className="text-[11px] text-muted-foreground">
--- a/ui/src/components/ProjectProperties.tsx
+++ b/ui/src/components/ProjectProperties.tsx
@@ -154,6 +154,71 @@ function ProjectStatusPicker({ status, onChange }: { status: string; onChange: (
  );
 }

+function ArchiveDangerZone({
+  project,
+  onArchive,
+  archivePending,
+}: {
+  project: Project;
+  onArchive: (archived: boolean) => void;
+  archivePending?: boolean;
+}) {
+  const [confirming, setConfirming] = useState(false);
+  const isArchive = !project.archivedAt;
+  const action = isArchive ? "Archive" : "Unarchive";
+
+  return (
+    <div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-4">
+      <p className="text-sm text-muted-foreground">
+        {isArchive
+          ? "Archive this project to hide it from the sidebar and project selectors."
+          : "Unarchive this project to restore it in the sidebar and project selectors."}
+      </p>
+      {archivePending ? (
+        <Button size="sm" variant="destructive" disabled>
+          <Loader2 className="h-3 w-3 animate-spin mr-1" />
+          {isArchive ? "Archiving..." : "Unarchiving..."}
+        </Button>
+      ) : confirming ? (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-destructive font-medium">
+            {action} &ldquo;{project.name}&rdquo;?
+          </span>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => {
+              setConfirming(false);
+              onArchive(isArchive);
+            }}
+          >
+            Confirm
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setConfirming(false)}
+          >
+            Cancel
+          </Button>
+        </div>
+      ) : (
+        <Button
+          size="sm"
+          variant="destructive"
+          onClick={() => setConfirming(true)}
+        >
+          {isArchive ? (
+            <><Archive className="h-3 w-3 mr-1" />{action} project</>
+          ) : (
+            <><ArchiveRestore className="h-3 w-3 mr-1" />{action} project</>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
+
 export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSaveState, onArchive, archivePending }: ProjectPropertiesProps) {
  const { selectedCompanyId } = useCompany();
  const queryClient = useQueryClient();
@@ -420,9 +485,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
          alignStart
          valueClassName="space-y-2"
        >
-          {linkedGoals.length === 0 ? (
-            <span className="text-sm text-muted-foreground">None</span>
-          ) : (
+          {linkedGoals.length > 0 && (
            <div className="flex flex-wrap gap-1.5">
              {linkedGoals.map((goal) => (
                <span
@@ -452,7 +515,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
                <Button
                  variant="outline"
                  size="xs"
-                  className="h-6 w-fit px-2"
+                  className={cn("h-6 w-fit px-2", linkedGoals.length > 0 && "ml-1")}
                  disabled={availableGoals.length === 0}
                >
                  <Plus className="h-3 w-3 mr-1" />
@@ -964,34 +1027,11 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
            <div className="text-xs font-medium text-destructive uppercase tracking-wide">
              Danger Zone
            </div>
-            <div className="space-y-3 rounded-md border border-destructive/40 bg-destructive/5 px-4 py-4">
-              <p className="text-sm text-muted-foreground">
-                {project.archivedAt
-                  ? "Unarchive this project to restore it in the sidebar and project selectors."
-                  : "Archive this project to hide it from the sidebar and project selectors."}
-              </p>
-              <Button
-                size="sm"
-                variant="destructive"
-                disabled={archivePending}
-                onClick={() => {
-                  const action = project.archivedAt ? "Unarchive" : "Archive";
-                  const confirmed = window.confirm(
-                    `${action} project "${project.name}"?`,
-                  );
-                  if (!confirmed) return;
-                  onArchive(!project.archivedAt);
-                }}
-              >
-                {archivePending ? (
-                  <><Loader2 className="h-3 w-3 animate-spin mr-1" />{project.archivedAt ? "Unarchiving..." : "Archiving..."}</>
-                ) : project.archivedAt ? (
-                  <><ArchiveRestore className="h-3 w-3 mr-1" />Unarchive project</>
-                ) : (
-                  <><Archive className="h-3 w-3 mr-1" />Archive project</>
-                )}
-              </Button>
-            </div>
+            <ArchiveDangerZone
+              project={project}
+              onArchive={onArchive}
+              archivePending={archivePending}
+            />
          </div>
        </>
      )}
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -377,21 +377,21 @@
 }

 .paperclip-mdxeditor-content h1 {
-  margin: 0 0 0.9em;
+  margin: 1.4em 0 0.9em;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.2;
 }

 .paperclip-mdxeditor-content h2 {
-  margin: 0 0 0.85em;
+  margin: 1.3em 0 0.85em;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.3;
 }

 .paperclip-mdxeditor-content h3 {
-  margin: 0 0 0.8em;
+  margin: 1.2em 0 0.8em;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.35;
@@ -585,8 +585,11 @@
  color: var(--muted-foreground);
 }

-.paperclip-markdown :where(h1, h2, h3, h4) {
-  margin-top: 1.15rem;
+.paperclip-markdown h1,
+.paperclip-markdown h2,
+.paperclip-markdown h3,
+.paperclip-markdown h4 {
+  margin-top: 1.75rem;
  margin-bottom: 0.45rem;
  color: var(--foreground);
  font-weight: 600;
--- a/ui/src/lib/queryKeys.ts
+++ b/ui/src/lib/queryKeys.ts
@@ -105,6 +105,9 @@ export const queryKeys = {
  liveRuns: (companyId: string) => ["live-runs", companyId] as const,
  runIssues: (runId: string) => ["run-issues", runId] as const,
  org: (companyId: string) => ["org", companyId] as const,
+  skills: {
+    available: ["skills", "available"] as const,
+  },
  plugins: {
    all: ["plugins"] as const,
    examples: ["plugins", "examples"] as const,
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -10,6 +10,7 @@ import { heartbeatsApi } from "../api/heartbeats";
 import { assetsApi } from "../api/assets";
 import { usePanel } from "../context/PanelContext";
 import { useCompany } from "../context/CompanyContext";
+import { useToast } from "../context/ToastContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { ProjectProperties, type ProjectConfigFieldKey, type ProjectFieldSaveState } from "../components/ProjectProperties";
@@ -210,6 +211,7 @@ export function ProjectDetail() {
  const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
  const { closePanel } = usePanel();
  const { setBreadcrumbs } = useBreadcrumbs();
+  const { pushToast } = useToast();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const location = useLocation();
@@ -284,10 +286,14 @@ export function ProjectDetail() {
        { archivedAt: archived ? new Date().toISOString() : null },
        resolvedCompanyId ?? lookupCompanyId,
      ),
-    onSuccess: (_, archived) => {
+    onSuccess: (updatedProject, archived) => {
      invalidateProject();
+      const name = updatedProject?.name ?? project?.name ?? "Project";
      if (archived) {
-        navigate("/projects");
+        pushToast({ title: `"${name}" has been archived`, tone: "success" });
+        navigate("/dashboard");
+      } else {
+        pushToast({ title: `"${name}" has been unarchived`, tone: "success" });
      }
    },
  });
@@ -443,8 +449,24 @@ export function ProjectDetail() {
    return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
  }

-  // Redirect bare /projects/:id to /projects/:id/issues
+  // Redirect bare /projects/:id to cached tab or default /issues
  if (routeProjectRef && activeTab === null) {
+    let cachedTab: string | null = null;
+    if (project?.id) {
+      try { cachedTab = localStorage.getItem(`paperclip:project-tab:${project.id}`); } catch {}
+    }
+    if (cachedTab === "overview") {
+      return <Navigate to={`/projects/${canonicalProjectRef}/overview`} replace />;
+    }
+    if (cachedTab === "configuration") {
+      return <Navigate to={`/projects/${canonicalProjectRef}/configuration`} replace />;
+    }
+    if (cachedTab === "budget") {
+      return <Navigate to={`/projects/${canonicalProjectRef}/budget`} replace />;
+    }
+    if (isProjectPluginTab(cachedTab)) {
+      return <Navigate to={`/projects/${canonicalProjectRef}?tab=${encodeURIComponent(cachedTab)}`} replace />;
+    }
    return <Navigate to={`/projects/${canonicalProjectRef}/issues`} replace />;
  }

@@ -453,6 +475,10 @@ export function ProjectDetail() {
  if (!project) return null;

  const handleTabChange = (tab: ProjectTab) => {
+    // Cache the active tab per project
+    if (project?.id) {
+      try { localStorage.setItem(`paperclip:project-tab:${project.id}`, tab); } catch {}
+    }
    if (isProjectPluginTab(tab)) {
      navigate(`/projects/${canonicalProjectRef}?tab=${encodeURIComponent(tab)}`);
      return;
@@ -527,8 +553,8 @@ export function ProjectDetail() {
      <Tabs value={activeTab ?? "list"} onValueChange={(value) => handleTabChange(value as ProjectTab)}>
        <PageTabBar
          items={[
+            { value: "list", label: "Issues" },
            { value: "overview", label: "Overview" },
-            { value: "list", label: "List" },
            { value: "configuration", label: "Configuration" },
            { value: "budget", label: "Budget" },
            ...pluginTabItems.map((item) => ({