Add OMP (Oh My Pi) icon and landing page

This commit is contained in:
Mohamed Boudra
2026-06-09 14:03:20 +07:00
parent bed8af7aa6
commit dcdb178468
6 changed files with 69 additions and 2 deletions
@@ -0,0 +1,14 @@
import Svg, { Path } from "react-native-svg";
interface OmpIconProps {
size?: number;
color?: string;
}
export function OmpIcon({ size = 16, color = "currentColor" }: OmpIconProps) {
return (
<Svg width={size} height={size} viewBox="0 0 64 64" fill={color}>
<Path d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z" fill={color} />
</Svg>
);
}
@@ -5,6 +5,7 @@ import { ClaudeIcon } from "@/components/icons/claude-icon";
import { CodexIcon } from "@/components/icons/codex-icon"; import { CodexIcon } from "@/components/icons/codex-icon";
import { CopilotIcon } from "@/components/icons/copilot-icon"; import { CopilotIcon } from "@/components/icons/copilot-icon";
import { OpenCodeIcon } from "@/components/icons/opencode-icon"; import { OpenCodeIcon } from "@/components/icons/opencode-icon";
import { OmpIcon } from "@/components/icons/omp-icon";
import { PiIcon } from "@/components/icons/pi-icon"; import { PiIcon } from "@/components/icons/pi-icon";
import { ACP_PROVIDER_CATALOG } from "@/data/acp-provider-catalog"; import { ACP_PROVIDER_CATALOG } from "@/data/acp-provider-catalog";
import { import {
@@ -24,7 +25,7 @@ const BUILTIN_PROVIDER_ICONS: Record<BuiltinProviderIconName, ProviderIconCompon
codex: CodexIcon as unknown as ProviderIconComponent, codex: CodexIcon as unknown as ProviderIconComponent,
copilot: CopilotIcon as unknown as ProviderIconComponent, copilot: CopilotIcon as unknown as ProviderIconComponent,
kiro: PackagePlus, kiro: PackagePlus,
omp: PiIcon as unknown as ProviderIconComponent, omp: OmpIcon as unknown as ProviderIconComponent,
opencode: OpenCodeIcon as unknown as ProviderIconComponent, opencode: OpenCodeIcon as unknown as ProviderIconComponent,
pi: PiIcon as unknown as ProviderIconComponent, pi: PiIcon as unknown as ProviderIconComponent,
}; };
@@ -127,9 +127,10 @@ const CLAUDE_CODE_BADGE_ICON = <ClaudeCodeIcon className="h-6 w-6" />;
const CODEX_BADGE_ICON = <CodexIcon className="h-6 w-6" />; const CODEX_BADGE_ICON = <CodexIcon className="h-6 w-6" />;
const OPENCODE_BADGE_ICON = <OpenCodeIcon className="h-6 w-6" />; const OPENCODE_BADGE_ICON = <OpenCodeIcon className="h-6 w-6" />;
const COPILOT_BADGE_ICON = <CopilotIcon className="h-6 w-6" />; const COPILOT_BADGE_ICON = <CopilotIcon className="h-6 w-6" />;
const OMP_BADGE_ICON = <OmpIcon className="h-6 w-6" />;
const PI_BADGE_ICON = <PiIcon className="h-6 w-6" />; const PI_BADGE_ICON = <PiIcon className="h-6 w-6" />;
const FEATURED_AGENT_COUNT = 5; const FEATURED_AGENT_COUNT = 6;
const ADDITIONAL_AGENT_COUNT = AGENT_PAGES.length - FEATURED_AGENT_COUNT; const ADDITIONAL_AGENT_COUNT = AGENT_PAGES.length - FEATURED_AGENT_COUNT;
const SOCIAL_PROOF_TWEETS = [ const SOCIAL_PROOF_TWEETS = [
@@ -358,6 +359,7 @@ function MultiProviderSection() {
{ name: "Codex", icon: <CodexIcon className="w-7 h-7" /> }, { name: "Codex", icon: <CodexIcon className="w-7 h-7" /> },
{ name: "OpenCode", icon: <OpenCodeIcon className="w-7 h-7" /> }, { name: "OpenCode", icon: <OpenCodeIcon className="w-7 h-7" /> },
{ name: "Copilot", icon: <CopilotIcon className="w-7 h-7" /> }, { name: "Copilot", icon: <CopilotIcon className="w-7 h-7" /> },
{ name: "OMP (Oh My Pi)", icon: <OmpIcon className="w-7 h-7" /> },
{ name: "Pi", icon: <PiIcon className="w-7 h-7" /> }, { name: "Pi", icon: <PiIcon className="w-7 h-7" /> },
]; ];
@@ -1251,6 +1253,7 @@ function GetStarted() {
<AgentBadge name="Codex" icon={CODEX_BADGE_ICON} /> <AgentBadge name="Codex" icon={CODEX_BADGE_ICON} />
<AgentBadge name="OpenCode" icon={OPENCODE_BADGE_ICON} /> <AgentBadge name="OpenCode" icon={OPENCODE_BADGE_ICON} />
<AgentBadge name="Copilot" icon={COPILOT_BADGE_ICON} /> <AgentBadge name="Copilot" icon={COPILOT_BADGE_ICON} />
<AgentBadge name="OMP (Oh My Pi)" icon={OMP_BADGE_ICON} />
<AgentBadge name="Pi" icon={PI_BADGE_ICON} /> <AgentBadge name="Pi" icon={PI_BADGE_ICON} />
</div> </div>
<a <a
@@ -1375,6 +1378,20 @@ function CopilotIcon(props: React.SVGProps<SVGSVGElement>) {
); );
} }
function OmpIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
fill="currentColor"
aria-hidden="true"
{...props}
>
<path d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z" />
</svg>
);
}
function PiIcon(props: React.SVGProps<SVGSVGElement>) { function PiIcon(props: React.SVGProps<SVGSVGElement>) {
return ( return (
<svg <svg
+10
View File
@@ -52,6 +52,16 @@ export const AGENT_PAGES = [
metaDescription: metaDescription:
"Open source mobile and desktop app for GitHub Copilot. Launch sessions on your machine, monitor progress, merge from anywhere.", "Open source mobile and desktop app for GitHub Copilot. Launch sessions on your machine, monitor progress, merge from anywhere.",
}, },
{
slug: "omp",
name: "OMP (Oh My Pi)",
title: "Open source app for OMP (Oh My Pi)",
subtitle:
"Run OMP (Oh My Pi) on your machine, drive it from your phone or desktop. Self-hosted and open source.",
metaTitle: "OMP (Oh My Pi) Mobile and Desktop App, Open Source",
metaDescription:
"Open source mobile and desktop app for OMP (Oh My Pi). Launch sessions on your machine, monitor progress, merge from anywhere. Self-hosted.",
},
{ {
slug: "pi", slug: "pi",
name: "Pi Agent", name: "Pi Agent",
+21
View File
@@ -19,6 +19,7 @@ import { Route as PrivacyRouteImport } from "./routes/privacy";
import { Route as PoolsideRouteImport } from "./routes/poolside"; import { Route as PoolsideRouteImport } from "./routes/poolside";
import { Route as PiRouteImport } from "./routes/pi"; import { Route as PiRouteImport } from "./routes/pi";
import { Route as OpencodeRouteImport } from "./routes/opencode"; import { Route as OpencodeRouteImport } from "./routes/opencode";
import { Route as OmpRouteImport } from "./routes/omp";
import { Route as NovaRouteImport } from "./routes/nova"; import { Route as NovaRouteImport } from "./routes/nova";
import { Route as MistralVibeRouteImport } from "./routes/mistral-vibe"; import { Route as MistralVibeRouteImport } from "./routes/mistral-vibe";
import { Route as MinionCodeRouteImport } from "./routes/minion-code"; import { Route as MinionCodeRouteImport } from "./routes/minion-code";
@@ -111,6 +112,11 @@ const OpencodeRoute = OpencodeRouteImport.update({
path: "/opencode", path: "/opencode",
getParentRoute: () => rootRouteImport, getParentRoute: () => rootRouteImport,
} as any); } as any);
const OmpRoute = OmpRouteImport.update({
id: "/omp",
path: "/omp",
getParentRoute: () => rootRouteImport,
} as any);
const NovaRoute = NovaRouteImport.update({ const NovaRoute = NovaRouteImport.update({
id: "/nova", id: "/nova",
path: "/nova", path: "/nova",
@@ -355,6 +361,7 @@ export interface FileRoutesByFullPath {
"/minion-code": typeof MinionCodeRoute; "/minion-code": typeof MinionCodeRoute;
"/mistral-vibe": typeof MistralVibeRoute; "/mistral-vibe": typeof MistralVibeRoute;
"/nova": typeof NovaRoute; "/nova": typeof NovaRoute;
"/omp": typeof OmpRoute;
"/opencode": typeof OpencodeRoute; "/opencode": typeof OpencodeRoute;
"/pi": typeof PiRoute; "/pi": typeof PiRoute;
"/poolside": typeof PoolsideRoute; "/poolside": typeof PoolsideRoute;
@@ -406,6 +413,7 @@ export interface FileRoutesByTo {
"/minion-code": typeof MinionCodeRoute; "/minion-code": typeof MinionCodeRoute;
"/mistral-vibe": typeof MistralVibeRoute; "/mistral-vibe": typeof MistralVibeRoute;
"/nova": typeof NovaRoute; "/nova": typeof NovaRoute;
"/omp": typeof OmpRoute;
"/opencode": typeof OpencodeRoute; "/opencode": typeof OpencodeRoute;
"/pi": typeof PiRoute; "/pi": typeof PiRoute;
"/poolside": typeof PoolsideRoute; "/poolside": typeof PoolsideRoute;
@@ -460,6 +468,7 @@ export interface FileRoutesById {
"/minion-code": typeof MinionCodeRoute; "/minion-code": typeof MinionCodeRoute;
"/mistral-vibe": typeof MistralVibeRoute; "/mistral-vibe": typeof MistralVibeRoute;
"/nova": typeof NovaRoute; "/nova": typeof NovaRoute;
"/omp": typeof OmpRoute;
"/opencode": typeof OpencodeRoute; "/opencode": typeof OpencodeRoute;
"/pi": typeof PiRoute; "/pi": typeof PiRoute;
"/poolside": typeof PoolsideRoute; "/poolside": typeof PoolsideRoute;
@@ -515,6 +524,7 @@ export interface FileRouteTypes {
| "/minion-code" | "/minion-code"
| "/mistral-vibe" | "/mistral-vibe"
| "/nova" | "/nova"
| "/omp"
| "/opencode" | "/opencode"
| "/pi" | "/pi"
| "/poolside" | "/poolside"
@@ -566,6 +576,7 @@ export interface FileRouteTypes {
| "/minion-code" | "/minion-code"
| "/mistral-vibe" | "/mistral-vibe"
| "/nova" | "/nova"
| "/omp"
| "/opencode" | "/opencode"
| "/pi" | "/pi"
| "/poolside" | "/poolside"
@@ -619,6 +630,7 @@ export interface FileRouteTypes {
| "/minion-code" | "/minion-code"
| "/mistral-vibe" | "/mistral-vibe"
| "/nova" | "/nova"
| "/omp"
| "/opencode" | "/opencode"
| "/pi" | "/pi"
| "/poolside" | "/poolside"
@@ -673,6 +685,7 @@ export interface RootRouteChildren {
MinionCodeRoute: typeof MinionCodeRoute; MinionCodeRoute: typeof MinionCodeRoute;
MistralVibeRoute: typeof MistralVibeRoute; MistralVibeRoute: typeof MistralVibeRoute;
NovaRoute: typeof NovaRoute; NovaRoute: typeof NovaRoute;
OmpRoute: typeof OmpRoute;
OpencodeRoute: typeof OpencodeRoute; OpencodeRoute: typeof OpencodeRoute;
PiRoute: typeof PiRoute; PiRoute: typeof PiRoute;
PoolsideRoute: typeof PoolsideRoute; PoolsideRoute: typeof PoolsideRoute;
@@ -757,6 +770,13 @@ declare module "@tanstack/react-router" {
preLoaderRoute: typeof OpencodeRouteImport; preLoaderRoute: typeof OpencodeRouteImport;
parentRoute: typeof rootRouteImport; parentRoute: typeof rootRouteImport;
}; };
"/omp": {
id: "/omp";
path: "/omp";
fullPath: "/omp";
preLoaderRoute: typeof OmpRouteImport;
parentRoute: typeof rootRouteImport;
};
"/nova": { "/nova": {
id: "/nova"; id: "/nova";
path: "/nova"; path: "/nova";
@@ -1109,6 +1129,7 @@ const rootRouteChildren: RootRouteChildren = {
MinionCodeRoute: MinionCodeRoute, MinionCodeRoute: MinionCodeRoute,
MistralVibeRoute: MistralVibeRoute, MistralVibeRoute: MistralVibeRoute,
NovaRoute: NovaRoute, NovaRoute: NovaRoute,
OmpRoute: OmpRoute,
OpencodeRoute: OpencodeRoute, OpencodeRoute: OpencodeRoute,
PiRoute: PiRoute, PiRoute: PiRoute,
PoolsideRoute: PoolsideRoute, PoolsideRoute: PoolsideRoute,
+4
View File
@@ -0,0 +1,4 @@
import { createFileRoute } from "@tanstack/react-router";
import { agentRouteOptions } from "~/components/agent-route";
export const Route = createFileRoute("/omp")(agentRouteOptions("omp"));