Clean up skills UI and unify scheduled tasks iconography

apps/commons-app/app/studio/[tab]/page.tsx

@@ -228,7 +228,7 @@ const StudioPage: NextPage = () => {
       case "tools":
         return "Create new tool";
       case "tasks":
-        return "Create new task";
+        return "Create new scheduled task";
       case "workflows":
         return "Create new workflow";
       case "skills":
@@ -249,7 +249,7 @@ const StudioPage: NextPage = () => {
         };
       case "tasks":
         return {
-          title: "Tasks",
+          title: "Scheduled tasks",
           description:
             "Schedule one-off or recurring tasks for your agents to run automatically.",
         };

apps/commons-app/app/studio/agents/[agent]/page.tsx

@@ -9,7 +9,6 @@ import {
   BarChart3,
   Bot,
   Brain,
-  CalendarCheck,
   Check,
   CheckCircle2,
   ChevronRight,
@@ -27,13 +26,14 @@ import {
   Search,
   Server,
   Settings2,
-  Sparkles,
   TerminalSquare,
   Wallet,
   Wrench,
   XCircle,
   Zap,
 } from "lucide-react";
+import { ClipboardClock } from "@/components/icons/clipboard-clock";
+import { SkillIcon } from "@/components/skills/skill-icon";
 import { formatDistanceToNow } from "date-fns";
 import {
   Area,
@@ -120,9 +120,9 @@ const sections: Array<{ key: SectionKey; label: string; icon: typeof Bot }> = [
   { key: "new-session", label: "New session", icon: Plus },
   { key: "sessions", label: "Sessions", icon: MessageSquare },
   { key: "computer", label: "Computer", icon: Monitor },
-  { key: "tasks", label: "Tasks", icon: CalendarCheck },
+  { key: "tasks", label: "Scheduled tasks", icon: ClipboardClock },
   { key: "tools", label: "Tools", icon: Wrench },
-  { key: "skills", label: "Skills", icon: Sparkles },
+  { key: "skills", label: "Skills", icon: Zap },
   { key: "artifacts", label: "Artifacts", icon: FileText },
   { key: "observability", label: "Observability", icon: TerminalSquare },
   { key: "usage", label: "Usage", icon: BarChart3 },
@@ -1473,7 +1473,7 @@ function SkillsView({
           <Skeleton className="h-40 w-full" />
         ) : visibleSkills.length === 0 ? (
           <div className="rounded-xl border border-dashed p-12 text-center">
-            <Sparkles className="mx-auto h-9 w-9 text-muted-foreground/35" />
+            <Zap className="mx-auto h-9 w-9 text-muted-foreground/35" />
             <p className="mt-3 text-sm font-medium">
               {view === "assigned" ? "No skills enabled" : "No skills found"}
             </p>
@@ -1500,9 +1500,7 @@ function SkillsView({
                   }
                   className="flex min-w-0 flex-1 items-start gap-3 text-left"
                 >
-                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-base dark:bg-amber-300/15">
-                    {skill.icon || <Sparkles className="h-4 w-4" />}
-                  </span>
+                  <SkillIcon icon={skill.icon} />
                   <span className="min-w-0">
                     <span className="flex items-center gap-2">
                       <span className="truncate text-sm font-medium">

apps/commons-app/app/studio/skills/[skillId]/page.tsx

@@ -2,10 +2,11 @@
 
 import { use, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { ArrowLeft, Globe, Lock, Sparkles } from "lucide-react";
+import { ArrowLeft, Globe, Lock } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { SkillIcon } from "@/components/skills/skill-icon";
 import type { Skill } from "@agent-commons/sdk";
 
 export default function SkillDetailPage({
@@ -74,13 +75,7 @@ export default function SkillDetailPage({
             <ArrowLeft className="h-4 w-4" />
           </Button>
           <div className="flex min-w-0 items-center gap-2">
-            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50">
-              {skill.icon ? (
-                <span className="text-sm">{skill.icon}</span>
-              ) : (
-                <Sparkles className="h-4 w-4 text-muted-foreground" />
-              )}
-            </span>
+            <SkillIcon icon={skill.icon} size="sm" />
             <div className="min-w-0">
               <h1 className="truncate text-sm font-semibold">{skill.name}</h1>
               <p className="truncate text-xs text-muted-foreground">{skill.slug}</p>

apps/commons-app/app/studio/tasks/[taskId]/page.tsx

@@ -258,7 +258,7 @@ export default function TaskDetailPage({
           <p className="text-muted-foreground text-sm">Task not found.</p>
           <Button variant="outline" size="sm" onClick={() => router.push("/studio/tasks")}>
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Back to Tasks
+            Back to scheduled tasks
           </Button>
       </div>
     );

apps/commons-app/components/agents/runtime-native-tooling.tsx

@@ -13,9 +13,9 @@ import {
   Send,
   Server,
   ShieldCheck,
-  Sparkles,
   Unplug,
   X,
+  Zap,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -1467,7 +1467,7 @@ export function RuntimeSkillsNote({
   const meta = RUNTIME_NATIVE_TOOLING[key];
   return (
     <div className="flex items-start gap-2.5 rounded-lg border border-border bg-muted/20 p-3">
-      <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+      <Zap className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
       <p className="text-xs text-muted-foreground">{meta.skillsNote}</p>
     </div>
   );

apps/commons-app/components/copilot/floating-commons-copilot.tsx

@@ -47,7 +47,7 @@ const SCOPES = [
   ["agents", "Agents"],
   ["tools", "Tools"],
   ["skills", "Skills"],
-  ["tasks", "Tasks"],
+  ["tasks", "Scheduled tasks"],
 ] as const;
 
 const PANEL_WIDTH_KEY = "copilot-panel-width";

apps/commons-app/components/customize/customize-tabs.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { AppWindow, Sparkles } from "lucide-react";
+import { AppWindow, Zap } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const tabs = [
@@ -16,7 +16,7 @@ const tabs = [
     label: "Skills",
     href: "/studio/customize/skills",
     segment: "/studio/customize/skills",
-    icon: Sparkles,
+    icon: Zap,
   },
 ] as const;
 

apps/commons-app/components/icons/clipboard-clock.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from "react";
+import type { LucideProps } from "lucide-react";
+
+/**
+ * `clipboard-clock` from Lucide, inlined because the pinned lucide-react
+ * (0.474) predates the icon. Same 24×24 geometry, props, and stroke defaults
+ * as every other Lucide glyph, so it sizes and colors identically alongside
+ * them.
+ *
+ * This is the single icon for scheduled tasks across the app.
+ */
+export const ClipboardClock = forwardRef<SVGSVGElement, LucideProps>(
+  ({ size = 24, strokeWidth = 2, absoluteStrokeWidth, ...props }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={
+        absoluteStrokeWidth
+          ? (Number(strokeWidth) * 24) / Number(size)
+          : strokeWidth
+      }
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M16 14v2.2l1.6 1" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v.832" />
+      <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h2" />
+      <circle cx="16" cy="16" r="6" />
+      <rect x="8" y="2" width="8" height="4" rx="1" />
+    </svg>
+  )
+);
+
+ClipboardClock.displayName = "ClipboardClock";

apps/commons-app/components/landing/landing-sidebar.tsx

@@ -2,18 +2,18 @@ import Image from "next/image";
 import Link from "next/link";
 import {
   Bot,
-  BriefcaseBusiness,
   LibraryBig,
   MoreHorizontal,
   Search,
   Wrench,
   Workflow,
 } from "lucide-react";
+import { ClipboardClock } from "@/components/icons/clipboard-clock";
 
 const NAV_ITEMS = [
   { label: "Agents", icon: Bot, target: "/studio/agents" },
   { label: "Tools", icon: Wrench, target: "/studio/tools" },
-  { label: "Tasks", icon: BriefcaseBusiness, target: "/studio/tasks" },
+  { label: "Scheduled tasks", icon: ClipboardClock, target: "/studio/tasks" },
   { label: "Workflows", icon: Workflow, target: "/studio/workflows" },
   { label: "Library", icon: LibraryBig, target: "/library" },
 ];

apps/commons-app/components/layout/dashboard-bar.tsx

@@ -3,14 +3,8 @@
 
 import { FC, ReactNode } from "react";
 import { useRouter } from "next/navigation";
-import {
-  Bot,
-  BriefcaseBusiness,
-  LibraryBig,
-  Wrench,
-  Workflow,
-  Settings2,
-} from "lucide-react";
+import { Bot, LibraryBig, Wrench, Workflow, Settings2 } from "lucide-react";
+import { ClipboardClock } from "@/components/icons/clipboard-clock";
 import Link from "next/link";
 import Image from "next/image";
 import { SearchTrigger } from "@/components/search/search-trigger";
@@ -35,8 +29,8 @@ export const DashboardBar: FC<DashboardBarProps> = ({
     { key: "tools", label: "Tools", icon: Wrench, path: "/studio/tools" },
     {
       key: "tasks",
-      label: "Tasks",
-      icon: BriefcaseBusiness,
+      label: "Scheduled tasks",
+      icon: ClipboardClock,
       path: "/studio/tasks",
     },
     {

apps/commons-app/components/layout/dashboard-side-bar.tsx

@@ -7,7 +7,6 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import {
   Bot,
-  BriefcaseBusiness,
   PanelLeft,
   PanelRight,
   LibraryBig,
@@ -16,6 +15,7 @@ import {
   Workflow,
   Settings2,
 } from "lucide-react";
+import { ClipboardClock } from "@/components/icons/clipboard-clock";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { DashboardBar } from "./dashboard-bar";
 import { SidebarAccount } from "./sidebar-account";
@@ -160,9 +160,9 @@ export function DashboardSideBar({ username }: { username: string }) {
                 },
                 {
                   key: "tasks",
-                  icon: BriefcaseBusiness,
+                  icon: ClipboardClock,
                   path: "/studio/tasks",
-                  label: "Tasks",
+                  label: "Scheduled tasks",
                 },
                 {
                   key: "workflows",

apps/commons-app/components/search/global-search.tsx

@@ -15,14 +15,14 @@ import {
   Bot,
   MessageSquare,
   Wrench,
-  BriefcaseBusiness,
   Workflow,
   Earth,
   LibraryBig,
   Logs,
   Wallet,
   Loader2,
 } from "lucide-react";
+import { ClipboardClock } from "@/components/icons/clipboard-clock";
 import { useAuth } from "@/context/AuthContext";
 import { normalizePrincipalId } from "@/lib/principal-id";
 import { useAgents } from "@/hooks/use-agents";
@@ -38,7 +38,7 @@ interface GlobalSearchProps {
 const NAV_ITEMS = [
   { label: "Agents", path: "/studio/agents", icon: Bot, keywords: "agents" },
   { label: "Tools", path: "/studio/tools", icon: Wrench, keywords: "tools integrations" },
-  { label: "Tasks", path: "/studio/tasks", icon: BriefcaseBusiness, keywords: "tasks queue" },
+  { label: "Scheduled tasks", path: "/studio/tasks", icon: ClipboardClock, keywords: "tasks queue scheduled cron recurring" },
   { label: "Workflows", path: "/studio/workflows", icon: Workflow, keywords: "workflows automation" },
   { label: "Spaces", path: "/spaces", icon: Earth, keywords: "spaces rooms live" },
   { label: "Library", path: "/library", icon: LibraryBig, keywords: "library files documents collections" },
@@ -191,14 +191,14 @@ export function GlobalSearch({ open, onOpenChange }: GlobalSearchProps) {
         {tasks.length > 0 && (
           <>
             <CommandSeparator />
-            <CommandGroup heading="Tasks">
+            <CommandGroup heading="Scheduled tasks">
               {tasks.map((t) => (
                 <CommandItem
                   key={t.taskId}
                   value={`task ${t.title} ${t.taskId}`}
                   onSelect={() => go(`/studio/tasks/${t.taskId}`)}
                 >
-                  <BriefcaseBusiness className="text-muted-foreground" />
+                  <ClipboardClock className="text-muted-foreground" />
                   <span className="truncate">{t.title}</span>
                 </CommandItem>
               ))}