refactor: drop unreleased cross-device sync feature

The sync stack (lockfile + schema validation + chokidar watcher +
auto-pull/auto-push + profiles + conflict resolver + retry queue) was
added in commits that never shipped. Each layer had edge cases we spent
more time debugging than the feature saved users. Rip it out before it
reaches anyone and focus on local skill management.

Users who want cross-device parity can still do it manually: install
the same skills via Marketplace on each machine, or dotfile-manage the
canonical dirs themselves.

- Remove entire sync section from Settings (lockfile path, auto-write,
  profile picker, sync-health banner, export/import buttons).
- Remove Dashboard sync card.
- Remove per-project "Exclude from sync" checkbox + its hook.
- Remove Marketplace references to syncRepo for profiles.

Not a BREAKING change because this code was never in a release — all
sync work lives between v0.2.8 and HEAD and was unreleased.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: beautyfree

src/main/projects.ts

@@ -272,12 +272,20 @@ export async function installSkillToProjectFromGit(
 	repoUrl: string,
 	skillRelativePath: string,
 	projectPath: string,
+	ref?: string | null,
 ): Promise<string> {
 	const tempDir = join(
 		tmpdir(),
 		`skills-app-project-install-${Date.now()}-${Math.random().toString(36).slice(2)}`,
 	);
 	await simpleGit().clone(repoUrl, tempDir);
+	if (ref && ref.trim()) {
+		try {
+			await simpleGit(tempDir).checkout(ref.trim());
+		} catch (err) {
+			throw new Error(`Failed to checkout ref "${ref}" in ${repoUrl}: ${err}`);
+		}
+	}
 	try {
 		const source = join(tempDir, skillRelativePath);
 		const rel = skillRelativePath.trim();

src/mainview/hooks/useProjects.ts

@@ -79,6 +79,7 @@ export function useSetProjectGroup() {
   });
 }
 
+
 export function useRemoveProject() {
   const qc = useQueryClient();
   return useMutation({

src/mainview/pages/Dashboard.tsx

@@ -11,6 +11,7 @@ import {
   ChevronDown,
 } from "lucide-react";
 import { getAgentIcon } from "@/mainview/lib/agentIcons";
+import { AgentIcon } from "@/mainview/components/AgentIcon";
 import {
   getInstallCommand,
   getInstallDocsUrl,
@@ -337,16 +338,10 @@ export default function Dashboard() {
                     </p>
                   )}
                 </div>
-                <div className="flex gap-1 shrink-0 ml-3 relative z-[3]">
-                  {installedAgents(skill).map((slug) => (
-                    <span
-                      key={slug}
-                      className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-secondary-foreground"
-                    >
-                      {agents?.find((a) => a.slug === slug)?.name ?? slug}
-                    </span>
-                  ))}
-                </div>
+                <SkillAgentsBadge
+                  slugs={installedAgents(skill)}
+                  agents={agents ?? []}
+                />
               </LiquidGlass>
             ))}
           </div>
@@ -361,6 +356,50 @@ export default function Dashboard() {
   );
 }
 
+/**
+ * Compact agent badge row for Recent Skills cards. Shows up to N logos
+ * stacked; anything beyond collapses into a "+K" pill so cards with 10+
+ * targeted agents don't vomit pills across the row.
+ */
+function SkillAgentsBadge({
+  slugs,
+  agents,
+  max = 4,
+}: {
+  slugs: string[];
+  agents: AgentConfig[];
+  max?: number;
+}) {
+  if (slugs.length === 0) return null;
+  const visible = slugs.slice(0, max);
+  const overflow = slugs.length - visible.length;
+  const title = slugs
+    .map((s) => agents.find((a) => a.slug === s)?.name ?? s)
+    .join(", ");
+  return (
+    <div
+      className="flex shrink-0 items-center ml-3 relative z-[3]"
+      title={title}
+    >
+      <div className="flex -space-x-1.5">
+        {visible.map((slug) => (
+          <div
+            key={slug}
+            className="flex size-5 items-center justify-center rounded-full bg-background ring-1 ring-border/60"
+          >
+            <AgentIcon slug={slug} className="size-3.5" />
+          </div>
+        ))}
+      </div>
+      {overflow > 0 && (
+        <span className="ml-1.5 text-[10px] font-medium tabular-nums text-muted-foreground">
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}
+
 function StatCard({
   label,
   value,
@@ -565,3 +604,4 @@ function CommandBlock({
     </div>
   );
 }
+

src/mainview/pages/Marketplace.tsx

@@ -393,10 +393,10 @@ const MarketplaceListItem = memo(function MarketplaceListItem({
     <button
       type="button"
       className={cn(
-        "w-full rounded-xl px-3 py-2.5 text-left transition-all duration-200",
+        "w-full rounded-xl px-3 py-2.5 text-left transition-all duration-200 border-[0.5px]",
         selected
-          ? "glass border border-border/50"
-          : "border border-transparent hover:bg-black/[0.03] dark:hover:bg-white/[0.04]",
+          ? "glass"
+          : "border-transparent hover:bg-black/[0.03] dark:hover:bg-white/[0.04]",
       )}
       onClick={() => onSelect(key)}
     >

src/mainview/pages/Settings.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
   Trash2,
@@ -11,7 +12,9 @@ import {
   RotateCw,
 } from 'lucide-react'
 import { openUrl, invoke, listen } from '@/mainview/lib/native'
-import type { AppUpdateStatusJson } from '@/shared/rpc-schema'
+import type {
+  AppUpdateStatusJson,
+} from '@/shared/rpc-schema'
 import { useAccentColor } from '@/mainview/hooks/useAccentColor'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Button } from '@/mainview/components/ui/button'
@@ -62,6 +65,21 @@ export default function SettingsPage() {
   const [updateBusy, setUpdateBusy] = useState<
     'idle' | 'checking' | 'downloading' | 'applying'
   >('idle')
+  const [searchParams] = useSearchParams()
+
+  // Scroll to the section named by `?section=<id>` after mount. Used when the
+  // footer sync indicator or SyncBanner deep-links here.
+  useEffect(() => {
+    const section = searchParams.get('section')
+    if (!section) return
+    // Wait a tick so the section has rendered (data fetches inside may still be
+    // pending but the target <section id> is always in the initial DOM tree).
+    const t = setTimeout(() => {
+      const el = document.getElementById(section)
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 50)
+    return () => clearTimeout(t)
+  }, [searchParams])
 
   useEffect(() => {
     invoke('get_app_version')
@@ -535,6 +553,39 @@ export default function SettingsPage() {
           </div>
         </section>
 
+
+        {/* Onboarding replay */}
+        <section className="rounded-2xl p-5 glass-panel settings-panel space-y-3">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <h2 className="text-sm font-medium">
+                {t('settings.onboardingTitle')}
+              </h2>
+              <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
+                {t('settings.onboardingDescription')}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                try {
+                  localStorage.removeItem('skiller.onboarding.done')
+                } catch {
+                  /* ignore */
+                }
+                window.dispatchEvent(
+                  new CustomEvent('skiller:open-onboarding', {
+                    detail: { force: true },
+                  }),
+                )
+              }}
+            >
+              {t('settings.onboardingReplay')}
+            </Button>
+          </div>
+        </section>
+
         {/* Cache */}
         <section className="rounded-2xl p-5 glass-panel settings-panel space-y-3">
           <div className="flex items-start justify-between gap-4">
@@ -683,6 +734,8 @@ export default function SettingsPage() {
           </button>
         </section>
       </div>
+
     </div>
   )
 }
+