Skip to content

Add the operator/publishing layer — deployed apps, /apps, deploy tokens #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adamsoffer wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add the operator/publishing layer — deployed apps, /apps, deploy tokens #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions app/(app)/apps/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,12 +597,9 @@ export default function AppDetailPage() {
// deployment manifest under `app.deployment`. One id-based lookup resolves
// both the org's own apps and the third-party catalog models.
const app = getAppById(id);
// Owner/operator chrome (Settings/manage tab, publish controls) lives in the
// stacked apps PR. In the consumer base the app detail is view-only for
// everyone, so owner mode is gated off here; the stacked PR's revert removes
// this flag to re-enable ownership.
const OWNER_MODE_ENABLED = false;
const isOwner = OWNER_MODE_ENABLED && isConnected && PIPELINE_APP_IDS.has(id);
// Owner/operator chrome — Settings/manage tab + publish controls. The org
// owns its own deployed apps; this is the operator layer that re-enables it.
const isOwner = isConnected && PIPELINE_APP_IDS.has(id);

// Visibility (publish state) for the owner Settings tab.
const [visibility, setVisibility] = useState<PipelineVisibility>(
Expand Down
17 changes: 17 additions & 0 deletions app/(app)/apps/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
"use client";

import AppsView from "@/components/dashboard/AppsView";
import SignInWall from "@/components/dashboard/SignInWall";
import { useAuth } from "@/components/dashboard/AuthContext";

export default function AppsPage() {
const { isConnected, isLoading } = useAuth();

if (isLoading) return null;

// Organization-only — logged-out users see the sign-in wall instead of the
// apps list.
if (!isConnected) return <SignInWall route="apps" />;

return <AppsView />;
}
58 changes: 41 additions & 17 deletions app/(app)/home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { House } from "lucide-react";
import { useAuth } from "@/components/dashboard/AuthContext";
import { getOrgFleet } from "@/lib/dashboard/org-fleet";
import DashboardPageHeader from "@/components/dashboard/DashboardPageHeader";
import FirstRunChecklist, {
FIRST_RUN_CHANGED_EVENT,
FIRST_RUN_DISMISSED_KEY,
} from "@/components/dashboard/FirstRunChecklist";
import HomeCommandBar from "@/components/dashboard/HomeCommandBar";
import AppsHealthPanel from "@/components/dashboard/AppsHealthPanel";
import ConsumedAppsPanel from "@/components/dashboard/ConsumedAppsPanel";
import ActivityPanel from "@/components/dashboard/ActivityPanel";
import SectionHeader from "@/components/dashboard/SectionHeader";
Expand All @@ -26,14 +28,18 @@ function HomePageHeader() {

// ─── Home Page ───
//
// The consumer home: what you're using on the network and what it costs.
// (Operator/publishing surfaces — deployed apps, deploy onboarding — live in a
// separate, stacked PR.) Composition:
// 1. Command bar — org readout + greeting
// 2. Get started — auto-detecting onboarding: create your account, get your
// API key, call an app
// 3. Usage (spend on the apps you call) beside Recent activity (your own
// calls — a live preview of /calls)
// "Mission control" rethink: an organization has two relationships with the
// network — apps it DEPLOYS (which orchestrators serve on its behalf) and apps
// it CONSUMES (the calls it makes across the network, mostly to apps it didn't
// deploy). The Home is organized around those two directions, not personas.
// Composition:
// 1. Command bar — org readout + greeting + an adaptive attention line
// naming the single most urgent thing on arrival
// 2. Get started — auto-detecting onboarding, until the loop is done
// 3. Two ledgers — Deployed apps (count + their 7-day call volume) beside
// Usage (spend on the apps you call). Each leads with its own summary.
// 4. Recent activity — the organization's own calls (what counts toward
// its usage); a live preview of /calls

export default function HomePage() {
const { isConnected, isLoading, user } = useAuth();
Expand Down Expand Up @@ -97,6 +103,10 @@ export default function HomePage() {
const organization = "Flipbook";
const firstName = user?.name?.split(" ")[0] ?? "there";

// The Fleet anchors the console split; a consumer-only org with no deployed
// apps drops to a single column so the Vitals rail carries the page.
const hasApps = getOrgFleet().count > 0;

// Signed-out users are redirected to / via the useEffect
// above; render nothing in the meantime (one frame max) so they don't see
// a flash of organization-mock data before the redirect lands.
Expand Down Expand Up @@ -131,8 +141,8 @@ export default function HomePage() {
<HomeCommandBar organization={organization} firstName={firstName} />
</div>

{/* Onboarding — auto-detecting: get your API key, then call an app.
Shown until dismissed; full-width above the panels. */}
{/* Onboarding — auto-detecting: deploy an example app, then call it.
Shown until dismissed; full-width above the console split. */}
{showFirstRun && (
<div className="home-rise" style={{ animationDelay: "60ms" }}>
<SectionHeader
Expand All @@ -151,13 +161,27 @@ export default function HomePage() {
</div>
)}

{/* Usage (what you spend calling apps) beside Recent activity (your
own calls — a live preview of /calls). Even-height pair. */}
<div
className="home-rise mt-7 grid grid-cols-1 items-stretch gap-5 lg:grid-cols-2"
style={{ animationDelay: "120ms" }}
>
<ConsumedAppsPanel organization={organization} />
{/* The two ledgers — Deployed apps (what you've published to the
network) beside Usage (what you consume from it). Each leads with
its own summary, so there's no separate hero band. On a
consumer-only org with no deployed apps, Usage carries the row. */}
{hasApps ? (
<div
className="home-rise mt-7 grid grid-cols-1 items-stretch gap-5 lg:grid-cols-2"
style={{ animationDelay: "120ms" }}
>
<AppsHealthPanel />
<ConsumedAppsPanel organization={organization} />
</div>
) : (
<div className="home-rise mt-7" style={{ animationDelay: "120ms" }}>
<ConsumedAppsPanel organization={organization} />
</div>
)}

{/* Recent activity — the organization's own recent calls (what
counts toward its usage); a live preview of /calls. */}
<div className="home-rise mt-7" style={{ animationDelay: "220ms" }}>
<ActivityPanel />
</div>
</div>
Expand Down
7 changes: 6 additions & 1 deletion app/(app)/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@ import GeneralSection from "@/components/dashboard/settings/GeneralSection";
import MembersSection from "@/components/dashboard/settings/MembersSection";
import BillingSection from "@/components/dashboard/settings/BillingSection";
import LimitsSection from "@/components/dashboard/settings/LimitsSection";
import DeployTokensSection from "@/components/dashboard/settings/DeployTokensSection";
import ProfileSection from "@/components/dashboard/settings/ProfileSection";
import NotificationsSection from "@/components/dashboard/settings/NotificationsSection";
import SecuritySection from "@/components/dashboard/settings/SecuritySection";
import AppearanceSection from "@/components/dashboard/settings/AppearanceSection";

// The 7 settings sub-tabs, two groups (Organization + Account). The sidebar's
// The 8 settings sub-tabs, two groups (Organization + Account). The sidebar's
// SettingsRail is the navigation surface — there's no horizontal TabStrip on
// this page; the rail and the breadcrumb together tell the user where they
// are. `appearance` is the local-only theme picker (light/dark/system) added
Expand All @@ -26,6 +27,7 @@ type SettingsTab =
| "members"
| "billing"
| "usage-limits"
| "deploy-tokens"
| "profile"
| "notifications"
| "security"
Expand All @@ -36,6 +38,7 @@ const VALID_TABS: SettingsTab[] = [
"members",
"billing",
"usage-limits",
"deploy-tokens",
"profile",
"notifications",
"security",
Expand All @@ -47,6 +50,7 @@ const TAB_LABELS: Record<SettingsTab, string> = {
members: "Members",
billing: "Billing",
"usage-limits": "Limits",
"deploy-tokens": "Deploy tokens",
profile: "Profile",
notifications: "Notifications",
security: "Security",
Expand Down Expand Up @@ -139,6 +143,7 @@ function SettingsContent() {
{tab === "members" && <MembersSection />}
{tab === "billing" && <BillingSection />}
{tab === "usage-limits" && <LimitsSection />}
{tab === "deploy-tokens" && <DeployTokensSection />}
{tab === "profile" && <ProfileSection />}
{tab === "notifications" && <NotificationsSection />}
{tab === "security" && <SecuritySection />}
Expand Down
Loading