uigraph 1.0.1 → 1.0.3

package/dist/viewer/assets/lens-runs-page-DCvFQzxB.js

@@ -0,0 +1 @@
+import{j as e,r as l}from"./index-CH7cEAxj.js";import{S as k}from"./section-loader-C4hOfhQS.js";import{S as f}from"./section-not-found-BnrXiPog.js";import{I as D}from"./input--C59pq6j.js";import{S,a as N,b as w,c as v,d as o}from"./select-D9fbrr7O.js";import{T as $,a as q,b as C,c as m,d as U,e as d}from"./table-B4pFND-o.js";import{P as F,u as B}from"./nav-links-DZWMpwMR.js";import{u as O}from"./query-D9oj6LGx.js";import{DashboardSectionHeader as V,DashboardSectionContent as H}from"./index-Bn2bqqMd.js";import{S as Q}from"./services-Ivav34WC.js";import{FilterPill as y}from"./dashboard-services--bCsUPT2.js";import{n as z}from"./git-BilAlIQ8.js";import{a as K}from"./index-Dj_05fqk.js";import{g as _}from"./api-r74Oi8H6.js";import{L as G}from"./chunk-OB3PAWPO-DJIP1M4r.js";import{u as J}from"./useQuery-Dhe6uxrL.js";import"./super-logo-loader-Cxlbn6MB.js";import"./scroll-area-RagrStGj.js";import"./ui-graph-logo-gHowu5gP.js";import"./iconBase-DtqdW2XR.js";import"./chevron-down-DDsUE_xz.js";import"./check-BpmCQNbj.js";import"./chevron-up-DVznKMGv.js";import"./dashboard-layout-sTeeHNsZ.js";import"./grid-scroll-body-DC5pYDPJ.js";import"./popover-476u3TN0.js";import"./gql-FFIj8zdp.js";import"./section-get-started-CSeRLtZQ.js";import"./button-DZj74qS7.js";import"./use-debounced-value-BpNFJd3C.js";import"./better-delete-confirmation-modal-CGEQ5O4X.js";import"./dialog-D7wzTt0L.js";import"./index-B6MxYIzs.js";import"./super-circle-loader-DSkos6uP.js";import"./use-permissions-BvmxJJ5r.js";import"./format-BquKoU4D.js";import"./en-US-B1Lg1a1H.js";import"./useMutation-D5ZHwHsx.js";import"./network-B1apzT1s.js";const M="Pull request reviews run on this machine.",p={running:{label:"Running",className:"text-[#7BA4FF]"},done:{label:"Done",className:"text-[#5FD39A]"},failed:{label:"Failed or stopped",className:"text-[#F2777A]"}};function $e(){return e.jsxs(e.Fragment,{children:[e.jsx(V,{title:"Pull Request Reviews",description:"Lens reviews run on this machine."}),e.jsx(H,{children:e.jsx(L,{runPath:F.lens.dashboardRun})})]})}function qe(){return e.jsxs("main",{className:"mx-auto w-full max-w-5xl px-6 py-10",children:[e.jsx("h1",{className:"mb-2 text-xl font-semibold text-[#F4F7FC]",children:"Lens"}),e.jsx("p",{className:"text-paragraph mb-6 text-sm",children:M}),e.jsx(L,{runPath:F.lens.run})]})}function W(n){return z(n).replace(/^https?:\/\/[^/]+\//,"").replace(/\.git$/,"").replace(/\/$/,"").toLowerCase()}function L({runPath:n}){const R=O().id,[u,A]=l.useState(""),[i,E]=l.useState("all"),[r,x]=l.useState("all"),[h,I]=l.useState("newest"),t=B({queryKey:["lens-runs"],queryFn:_,refetchInterval:3e3}),P=J(Q,{variables:{orgId:R,sortBy:"name",sortDir:"asc"}}),j=K(P.data?.services.items).filter(s=>s.gitRepoUrl);if(t.isPending)return e.jsx(k,{label:"Loading Lens runs"});if(t.isError)return e.jsx(f,{plain:!0,label:t.error.message});if(t.data.length===0)return e.jsxs("div",{className:"flex min-h-[200px] flex-col items-center justify-center gap-3 text-sm text-[#828DA3]",children:[e.jsx("p",{children:"No reviews yet. Start one from a terminal:"}),e.jsx("code",{className:"border-stock rounded-md border px-3 py-1.5 font-mono text-[#F4F7FC]",children:"uigraph lens <pull-request>"})]});const c=j.find(s=>s.id===i)?.gitRepoUrl,b=u.trim().toLowerCase(),g=t.data.filter(s=>r==="all"||s.status===r).filter(s=>i==="all"||c!=null&&s.repository.toLowerCase()===W(c)).filter(s=>b===""||`${s.title} ${s.repository}#${s.number??""}`.toLowerCase().includes(b)).sort((s,a)=>h==="newest"?a.updatedAt.localeCompare(s.updatedAt):s.updatedAt.localeCompare(a.updatedAt));return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-6 flex flex-wrap items-center gap-3",children:[e.jsx(D,{value:u,onChange:s=>A(s.target.value),placeholder:"Search reviews...",className:"h-10 w-52 rounded-lg border-[#2A3242] bg-[#1E2533] text-[13px] shadow-none focus-visible:bg-[#1E2533]"}),e.jsxs(S,{value:i,onValueChange:E,children:[e.jsx(N,{className:"h-10 w-40 shrink-0 rounded-lg border-[#2A3242] bg-[#1E2533] text-[13px] shadow-none",children:e.jsx(w,{})}),e.jsxs(v,{children:[e.jsx(o,{value:"all",children:"All Services"}),j.map(s=>e.jsx(o,{value:s.id,children:s.name},s.id))]})]}),e.jsxs(S,{value:h,onValueChange:s=>I(s),children:[e.jsx(N,{className:"h-10 w-40 shrink-0 rounded-lg border-[#2A3242] bg-[#1E2533] text-[13px] shadow-none",children:e.jsx(w,{})}),e.jsxs(v,{children:[e.jsx(o,{value:"newest",children:"Newest"}),e.jsx(o,{value:"oldest",children:"Oldest"})]})]}),e.jsxs("div",{className:"flex items-center gap-0.5 rounded-lg bg-[#1E2533] p-0.5 ring-1 ring-[#2A3242]",children:[e.jsx(y,{label:"All",count:t.data.length,active:r==="all",onClick:()=>x("all")}),Object.entries(p).map(([s,{label:a}])=>e.jsx(y,{label:a,count:t.data.filter(T=>T.status===s).length,active:r===s,onClick:()=>x(r===s?"all":s)},s))]})]}),g.length===0?e.jsx(f,{label:"No reviews match your search."}):e.jsx("div",{className:"border-stock rounded-[0.5rem] border",children:e.jsxs($,{children:[e.jsx(q,{children:e.jsxs(C,{children:[e.jsx(m,{className:"h-11 px-3!",children:"Pull request"}),e.jsx(m,{className:"h-11 w-[18%] px-3!",children:"Status"}),e.jsx(m,{className:"h-11 w-[22%] px-3!",children:"Updated"})]})}),e.jsx(U,{children:g.map(s=>e.jsxs(C,{children:[e.jsx(d,{className:"px-3!",children:e.jsxs(G,{to:n(s.runId),className:"block min-w-0",children:[e.jsx("span",{className:"block truncate text-[#F4F7FC] hover:underline",children:s.title}),e.jsxs("span",{className:"text-paragraph text-xs",children:[s.repository,s.number===null?" · local branch":`#${s.number}`]})]})}),e.jsx(d,{className:`px-3! ${p[s.status].className}`,children:p[s.status].label}),e.jsx(d,{className:"text-paragraph px-3!",children:new Date(s.updatedAt).toLocaleString()})]},s.runId))})]})})]})}export{$e as DashboardLensRunsPage,qe as LensRunsPage};

package/dist/viewer/assets/section-get-started-CSeRLtZQ.js

@@ -0,0 +1 @@
+import{j as e}from"./index-CH7cEAxj.js";function s({label:r}){return e.jsxs("div",{className:"border-stock flex min-h-[400px] flex-col items-center justify-center gap-6 rounded-[28px] border border-dashed bg-transparent p-8",children:[e.jsx("p",{className:"text-paragraph/60 text-lg font-medium",children:r}),e.jsxs("ol",{className:"text-paragraph/80 flex flex-col gap-4 text-sm",children:[e.jsxs("li",{children:["1. Install the UIGraph skill for your coding agent:",e.jsx("code",{className:"mt-2 block rounded-lg bg-[#1A2030] px-4 py-2 font-mono text-[#5C84FF]",children:"npx skills add uigraph-oss/skills"})]}),e.jsxs("li",{children:["2. In your repository, ask the agent:",e.jsx("code",{className:"mt-2 block rounded-lg bg-[#1A2030] px-4 py-2 font-mono text-[#5C84FF]",children:"Generate UIGraph artifacts for this repo"})]}),e.jsx("li",{children:"3. Your artifacts appear in the viewer."})]})]})}export{s as S};

package/dist/viewer/index.html

@@ -38,7 +38,7 @@
         --font-fira-code: 'Fira Code', monospace;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-BC5xdBQU.js"></script>
+    <script type="module" crossorigin src="/assets/index-BGspOYtx.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/index-CH7cEAxj.js">
     <link rel="modulepreload" crossorigin href="/assets/query-D9oj6LGx.js">
     <link rel="modulepreload" crossorigin href="/assets/global-loader-XJO9_e0l.js">
@@ -48,7 +48,7 @@
     <link rel="modulepreload" crossorigin href="/assets/gql-FFIj8zdp.js">
     <link rel="modulepreload" crossorigin href="/assets/debounce-Cp8eREM4-D7o-Pzb-.js">
     <link rel="modulepreload" crossorigin href="/assets/index-B6MxYIzs.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-m8s6_jQi.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-D0Xz1Ckp.css">
   </head>
   <body class="bg-background text-foreground font-sans antialiased">
     <div id="root"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uigraph",
-  "version": "1.0.1",
-  "description": "Generate UIGraph artifacts for a repository with a coding agent and edit them in a local UIGraph viewer.",
+  "version": "1.0.3",
+  "description": "Browse and edit UIGraph artifacts in a local viewer, and review pull requests with Lens.",
   "keywords": [
     "architecture",
     "diagrams",

package/dist/agents.md

@@ -1,28 +0,0 @@
-# UIGraph artifacts
-
-This repository describes its architecture in UIGraph artifacts: `.uigraph.yaml`, `.uigraph/services/*.yaml`, and the files under `.uigraph/`. The UIGraph viewer and Lens pull request reviews read them, so keep them true to the code.
-
-UIGraph writes this file. `uigraph init` replaces it with the current version, so do not edit it.
-
-## When to update
-
-Update artifacts only when your change does one of these. For any other change, do nothing here.
-
-| Your change | Update |
-|---|---|
-| Adds, removes, or changes an HTTP, GraphQL, or gRPC endpoint, or its request or response fields | The spec listed under `apis` |
-| Adds or changes a migration, ORM model, or DDL | The schema listed under `databases`, and each entry under `queries` that uses the changed tables |
-| Starts or stops calling another service, datastore, or third-party API | `dependencies` in that service's config |
-| Changes a flow that a diagram shows | That diagram's `.mmd` file |
-| Adds a deployable service | A new config at `.uigraph/services/<service-name>.yaml` |
-| Makes a doc listed under `docs` wrong | That doc |
-
-## How to update
-
-1. Read `.uigraph.yaml`, and `.uigraph/services/*.yaml` when the change is in another service. They list every artifact and its file. Open only the files your change affects, and do not explore the rest of `.uigraph/`.
-2. Change only what your code change made wrong. Keep the existing structure, names, and order.
-3. Base every change on code you read. Never invent endpoints, dependencies, tables, or flows.
-4. In diagrams, never write `style`, `classDef`, `class`, `linkStyle`, or colors.
-5. Run `uigraph sync` and fix every problem it reports.
-
-When you are not sure whether your change affects an artifact, leave the artifact as it is and say so in your summary. Lens flags out-of-date diagrams and docs on each pull request.

package/dist/plan-prompt.md

@@ -1,56 +0,0 @@
-You plan which architecture diagrams UIGraph should generate for a software repository, and which of its existing documents UIGraph should add. A local UIGraph viewer shows the diagrams the owner approves. Aim for the diagrams an engineer new to the code would most want: one for each important flow that explains how the system's work actually happens. Every candidate must be something the code proves exists.
-
-## This run
-
-This is a read-only planning run started by the repository owner from the `uigraph` CLI. Do not write files and do not ask questions. Explore the repository, then call `submit_diagram_plan` exactly once with your candidates. The owner sees the lists, ticks the diagrams and documents they want, and a separate run generates only those.
-
-You have about 90 tool calls. Spend most of them finding and tracing the important flows, not reading files one by one. Call `submit_diagram_plan` before you run out of calls.
-
-## How to explore
-
-1. **Map the repository.** List the top level and read the README and the main manifests, such as `package.json`, `go.mod`, `pyproject.toml`, and `docker-compose.yml`. Work out what the system does for its users and which deployable units it has.
-2. **Find the entry points.** Use `search` instead of reading whole folders: route and handler registrations, queue publishers and consumers, scheduled jobs, webhook handlers, CLI commands, and the main entry point of each deployable unit.
-3. **Rank the flows.** Put first the flows that matter most:
-   - The core job: the flow the product exists to run, such as placing an order, syncing costs, or generating a report.
-   - Risk: flows that move money, grant access, or write important data.
-   - Reach: flows that cross a boundary, such as another service, a queue, a third-party API, or several datastores.
-   - Complexity: flows with many steps, retries, fan-out, or state changes that are hard to follow in the code.
-4. **Trace the top flows.** For the five or six highest-ranked flows, follow the calls from the entry point through the services to the datastores and external calls, so each summary describes real steps.
-
-## Tools
-
-- `list_files`, `read_file`, `search` read the repository. They are confined to it, and generated directories and secret files are excluded on purpose; never try to reach them.
-- `read_skill_file` reads the UIGraph skill's references. Read `references/architecture-diagrams.md` first. Read `references/sequence-diagrams.md` or `references/c4-diagrams.md` only if you propose that type.
-- `submit_diagram_plan` submits the diagram and document candidates. It rejects a plan that cites a file that does not exist, so fix what it reports and submit again.
-
-## Where candidates come from
-
-| Evidence in the repository | Diagram | Mermaid type |
-| --- | --- | --- |
-| The service, its datastores, and every outbound dependency found in code or config | System context. Always propose it and recommend it. | `flowchart` |
-| An important API flow such as authentication, checkout, or ingestion. One per flow, not one per endpoint. | Request lifecycle | `sequenceDiagram` |
-| A worker, queue consumer, scheduled job, or webhook handler | Background flow | `flowchart` or `sequenceDiagram` |
-| An entity with a status enum or a transition table | State machine | `stateDiagram-v2` |
-| Major packages or modules and how they call each other, when that is not obvious from the folder names | Internal components | `flowchart` |
-| Kubernetes manifests, Terraform, or similar config with several deployable units or real infrastructure | Deployment | `flowchart` |
-
-Use `C4Container` or `C4Component` only when the repository already documents itself in C4 terms.
-
-## Rules
-
-- Propose at most 15 candidates. Mark 3 to 8 as recommended: the system context and the flows you ranked highest. A repository with one small script deserves one or two candidates.
-- Prefer a diagram of a specific important flow over a generic overview. Do not propose a diagram that only restates the folder tree or a single file, such as a deployment diagram for one Dockerfile or a components diagram that mirrors the top-level folders.
-- Every candidate has a kebab-case `id` (it becomes the diagram directory name), a plain `name`, a Mermaid `type`, a one-line `summary` of what the diagram shows, and 1 to 4 `evidence` files you actually read.
-- Name each diagram for what it shows, such as "Cost sync from AWS" or "GitHub webhook handling". Never use generic names such as "Diagram 2".
-- Never invent a flow, service, or dependency. When evidence is thin, propose fewer diagrams.
-- When a document (README, comments, docs) claims something, verify it against the code before you cite it.
-- Do not propose a diagram that already exists. The task message lists the existing ones.
-
-## Existing documents
-
-The owner can add the repository's own Markdown and HTML documents to the viewer as they are. Use `list_files` with a pattern such as `**/*.{md,markdown,html,htm}` to find them.
-
-- Propose at most 10 documents that help an engineer understand or operate the service: the README, architecture notes, guides, runbooks, API docs, and decision records.
-- Leave out changelogs, licenses, codes of conduct, contributing guides, issue and pull request templates, generated files, test fixtures, and documents of vendored code.
-- Do not propose a document that `.uigraph.yaml` already lists under `docs`, and never propose a file under `.uigraph/`.
-- Give each one its repository-relative `path`, a plain `name`, and a one-line `summary`. Submit an empty list when no document is worth adding.

package/dist/prompt.md

@@ -1,44 +0,0 @@
-You generate UIGraph artifacts for a software repository by following the UIGraph skill below. A local UIGraph viewer reads the files you write and shows them as a service catalog, API endpoint lists, a dependency graph, and editable architecture diagrams, docs, database schemas, and queries.
-
-## This run
-
-This is a non-interactive run started by the repository owner from the `uigraph` CLI. The owner already approved generation at the CLI prompt and, when the task message lists approved diagrams, chose them from a checklist; that approval replaces the skill's artifact selection question, final plan, and `Generate` trigger word. Do not ask questions or wait for approval. Skip every step of the skill's confirmation workflow and go straight from discovery to generation, then validation.
-
-Generate these artifact categories when the repository has evidence for them:
-
-- `.uigraph.yaml` with the `service` block.
-- `apis`: OpenAPI, GraphQL, or gRPC specs. Reference spec files that already exist in the repository at their current path; write a new OpenAPI spec under `.uigraph/openapi/` only from routes you read in the code.
-- `dependencies`: other services, datastores, and third-party APIs this service calls or is called by.
-- `architectureDiagrams`: Mermaid `.mmd` files with `context.json` under `.uigraph/diagrams/<name>/`. When the task message lists approved diagrams, generate exactly those, using the id as the directory name and the listed Mermaid type, and no other new diagram. When it lists none, produce a system context diagram, plus a component or data-flow diagram for each service with meaningful internal structure. A repository with one small script deserves at most one diagram.
-- `docs`: Markdown docs under `.uigraph/docs/` for each service, covering what the code proves: how to run and configure it, its main flows, and its operational behaviour. When the task message lists approved existing documents, also add each one under `docs` at its current path, as the task message says.
-- `databases`: one entry per database the service owns, with the schema at `.uigraph/db/<name>.sql` (or `.json` for `dynamodb` and `mongodb`). Build the schema only from migrations, ORM models, or DDL you read. `dialect` must be one of `postgres`, `mysql`, `sqlite`, `dynamodb`, `mongodb`, `other`.
-- `queries`: the important queries the code actually runs against a listed database, copied from the code into `.uigraph/queries/<name>.sql` and referenced by `path`. Each `database` must match a `databases[].name` in the same config.
-
-Do not generate test packs, maps, cost tags, timeline, ML projects, helper scripts, or CI files.
-
-A repository with several deployable services keeps the main service in `.uigraph.yaml` and gives every other service its own config at `.uigraph/services/<service-name>.yaml`, using the same schema. Each config's `dependencies` names other services by their exact `service.name`.
-
-## Tools
-
-- `list_files`, `read_file`, `search` read the repository. They are confined to it, and generated directories and secret files are excluded on purpose; never try to reach them.
-- `read_skill_file` reads the skill's references and templates. Read `references/uigraph-yaml-schema.md`, `references/service-dependencies.md`, `references/architecture-diagrams.md`, `references/docs.md`, and `references/database-schemas.md` before writing, plus any other reference you need.
-- `write_file` creates or replaces `.uigraph.yaml` and files under `.uigraph/`. Nothing else in the repository can be written.
-- `validate_artifacts` loads the artifacts exactly like the viewer. Run it after writing and fix every problem it reports, then run it again until it reports that all artifacts are valid.
-
-You cannot run shell commands or git. The CLI gives you the repository's git remote below; use it for `service.repository`. When the CLI reports no usable remote, omit `service.repository`.
-
-## Evidence rules
-
-- Every service, API, dependency, diagram element, doc statement, table, and query must come from files you actually read.
-- Never invent services, endpoints, dependencies, or technologies. When evidence is missing or ambiguous, leave the item out.
-- When a document (README, comments, docs) claims something, verify it against the code.
-- Use `service.ownership.team` only when the repository names an owning team (CODEOWNERS, package metadata); otherwise omit `ownership`.
-
-## Diagrams
-
-- Never write `style`, `classDef`, `class`, `linkStyle`, or colors; the app renders on a fixed dark canvas.
-- Label an edge that crosses a system boundary with the protocol or call it carries, four words at most.
-- Use `subgraph` only for real boundaries such as a deployable unit, a network zone, or a bounded context.
-- Give nodes context types from the skill's references where they fit; a wrong type is worse than none.
-
-Finish with a short summary of what you generated.

package/dist/viewer/assets/dashboard-diagrams-page-inner-CD--zr5q.js

@@ -1 +0,0 @@
-import{r as m,j as e}from"./index-CH7cEAxj.js";import{C as w}from"./common-DLCsGQ-t.js";import{B as v,a as D}from"./better-dialog-DcIxFWwk.js";import{B as u}from"./button-DZj74qS7.js";import{I as g}from"./input--C59pq6j.js";import{u as x}from"./query-D9oj6LGx.js";import{M as C}from"./nav-links-DZWMpwMR.js";import{DashboardPageSectionLayout as y}from"./index-Bn2bqqMd.js";import{t as p}from"./index-B6MxYIzs.js";import{D as N,a as A,C as S}from"./diagrams-BqBSv2eb.js";import{u as F}from"./use-debounced-value-BpNFJd3C.js";import{a as I}from"./index-Dj_05fqk.js";import{c as _}from"./react-Bx48XWN4.js";import{u as M}from"./useQuery-Dhe6uxrL.js";import{S as k}from"./section-loader-C4hOfhQS.js";import{S as B}from"./section-not-found-BnrXiPog.js";import{L as E,c as b}from"./chunk-OB3PAWPO-DJIP1M4r.js";import{A as P}from"./actor-avatar-Bu-mKKXB.js";import{B as L}from"./better-delete-confirmation-modal-CGEQ5O4X.js";import{D as O,a as R,b as Q,c as T}from"./scroll-area-RagrStGj.js";import{D as z}from"./diagram-live-preview-DzJ7Nxp1.js";import{u as G}from"./use-permissions-BvmxJJ5r.js";import{C as H}from"./calendar-Bolgc8E5.js";import{f as $}from"./format-BquKoU4D.js";import{u as j}from"./useMutation-D5ZHwHsx.js";import"./dialog-D7wzTt0L.js";import"./iconBase-DtqdW2XR.js";import"./loader-circle-CiqyoJF7.js";import"./dashboard-layout-sTeeHNsZ.js";import"./grid-scroll-body-DC5pYDPJ.js";import"./popover-476u3TN0.js";import"./gql-FFIj8zdp.js";import"./super-logo-loader-Cxlbn6MB.js";import"./avatar-DAFUyk1i.js";import"./git-BilAlIQ8.js";import"./super-circle-loader-DSkos6uP.js";import"./ui-graph-logo-gHowu5gP.js";import"./preload-helper-BlTxHScW.js";import"./en-US-B1Lg1a1H.js";const h=24,[V,W]=_(()=>{const t=x().id,[r,s]=m.useState(""),i=F(r),[n,o]=m.useState(0);m.useEffect(()=>{o(0)},[i]);const a=M(N,{fetchPolicy:"cache-and-network",variables:{orgId:t,folderId:null,teamId:null,search:i||null,sortBy:"name",sortDir:"asc",limit:h,offset:n*h}}),l=m.useMemo(()=>I(a.data?.diagrams.items??[]),[a.data?.diagrams.items]),c=a.data?.diagrams.totalCount??0,d=a.loading&&!a.data?.diagrams;return{diagrams:l,totalCount:c,pageSize:h,page:n,setPage:o,isLoading:d,search:r,setSearch:s}});function q({diagram:t}){const{canWrite:r}=G(),s=x().id,[i,n]=m.useState(!1),[o,a]=m.useState(!1),[l]=j(A,{awaitRefetchQueries:!0,refetchQueries:["Diagrams"]}),c=t.id?`/diagram/${t.id}`:"#",d=t.updatedAt?new Date(t.updatedAt):t.createdAt?new Date(t.createdAt):null;return e.jsxs("div",{className:"group relative",children:[e.jsxs(E,{target:"_blank",to:c,draggable:!1,className:"relative block cursor-pointer overflow-hidden rounded-[1.4525rem] bg-[#141925] shadow-[0_1px_3px_rgba(0,0,0,0.3),0_1px_2px_rgba(0,0,0,0.2)] ring-1 ring-[#2A3242] transition-all duration-300 hover:shadow-[0_0_0_3px_rgba(59,107,255,0.22),0_8px_24px_rgba(0,0,0,0.4)] hover:ring-2 hover:ring-[#3B6BFF]",children:[e.jsxs("div",{className:"relative aspect-[16/10] w-full bg-[#1A2030] transition-colors duration-300",children:[e.jsx(z,{diagramId:t.id}),e.jsx("div",{className:"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-black/30 to-transparent"})]}),e.jsx("div",{className:"h-px bg-[#2A3242]"}),e.jsxs("div",{className:"px-4 py-3",children:[e.jsx("h4",{className:"line-clamp-1 text-sm font-semibold text-[#F4F7FC]",children:t.name?t.name.charAt(0).toUpperCase()+t.name.slice(1):e.jsx("span",{className:"text-[#586378]",children:"Blank Diagram"})}),e.jsxs("div",{className:"mt-2 flex min-h-[1.75rem] items-center justify-between gap-2",children:[d?e.jsxs("div",{className:"flex min-w-0 items-center gap-1.5 text-[#586378]",children:[e.jsx(H,{className:"h-3 w-3 shrink-0"}),e.jsx("span",{className:"text-[11px]",children:$(d,"dd MMM yyyy")})]}):e.jsx("span",{}),e.jsx(P,{actor:t.updatedByActor??t.createdByActor,commitHash:t.updatedByActor?t.updatedByCommitHash:t.createdByCommitHash,className:"shrink-0"})]})]})]}),e.jsxs(O,{open:i,onOpenChange:n,children:[e.jsx(R,{asChild:!0,children:e.jsx(u,{size:"icon",variant:"ghost",className:b("absolute top-2 right-2 h-7 w-7 rounded-lg bg-[#1E2533]/80 opacity-0 shadow-sm backdrop-blur-sm transition-opacity group-hover:opacity-100 hover:bg-[#2A3242]",i&&"opacity-100"),children:e.jsx(C,{className:"h-3.5 w-3.5 text-[#828DA3]"})})}),e.jsx(Q,{align:"end",children:e.jsx(T,{variant:"destructive",disabled:!r,onClick:()=>a(!0),children:"Delete"})})]}),e.jsx(L,{open:o,onOpenChange:a,title:"Do you want to delete this flow diagram?",description:"Deleting this flow diagram removes its files from the project and cannot be undone.",onConfirm:async()=>{try{await l({variables:{orgId:s,id:t.id}}),p.success("Diagram deleted"),a(!1)}catch(f){p.error(f instanceof Error?f.message:"Failed to delete diagram")}}})]})}function U(){const{diagrams:t,totalCount:r,pageSize:s,page:i,setPage:n,isLoading:o,search:a,setSearch:l}=W();return e.jsxs("div",{className:"space-y-6 pb-4",children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsx(g,{value:a,onChange:c=>l(c.target.value),placeholder:"Search flows",className:"h-11 max-w-sm flex-1 rounded-[16px] border-[#2A3242] bg-transparent px-6 text-sm text-[#F4F7FC] shadow-none placeholder:text-[#586378] focus-visible:border-[#5C84FF]"})}),o?e.jsx(k,{label:"Loading flows..."}):t.length>0?e.jsx(J,{diagrams:t,page:i,pageSize:s,totalCount:r,onPageChange:n}):e.jsx(B,{label:a?"No flows match your search.":"The .uigraph artifacts have no diagrams."})]})}function Z(t,r){if(r<=5)return Array.from({length:r},(o,a)=>a);const s=[];s.push(0);const i=Math.max(1,t-1),n=Math.min(r-2,t+1);i>1&&s.push("...");for(let o=i;o<=n;o++)s.push(o);return n<r-2&&s.push("..."),s.push(r-1),s}function J({diagrams:t,page:r,pageSize:s,totalCount:i,onPageChange:n}){const o=Math.ceil(i/s);return e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"grid gap-4 pb-4",style:{gridTemplateColumns:"repeat(auto-fill, minmax(280px, 1fr))"},children:t.map(a=>e.jsx(q,{diagram:a},a.id))}),o>1&&e.jsxs("div",{className:"flex items-center justify-center gap-2 pt-2",children:[e.jsx(u,{preset:"outline",className:"h-8 px-3 text-sm",disabled:r===0,onClick:()=>n(r-1),children:"Previous"}),e.jsx("div",{className:"flex items-center gap-1",children:Z(r,o).map((a,l)=>a==="..."?e.jsx("span",{className:"flex h-8 w-8 items-center justify-center text-sm text-[#586378]",children:"…"},`ellipsis-${l}`):e.jsx("button",{onClick:()=>n(a),className:b("flex h-8 w-8 items-center justify-center rounded-lg text-sm transition-colors",a===r?"bg-primary text-white":"text-[#828DA3] hover:bg-[#2A3242]"),children:a+1},a))}),e.jsx(u,{preset:"outline",className:"h-8 px-3 text-sm",disabled:r===o-1,onClick:()=>n(r+1),children:"Next"})]})]})}function Le(){const t=x().id,[r,s]=m.useState(!1),[i,n]=m.useState(""),[o,{loading:a}]=j(S,{refetchQueries:["Diagrams"],awaitRefetchQueries:!0});async function l(){if(i.trim()===""){p.error("Name is required");return}try{const{data:c}=await o({variables:{orgId:t,input:{name:i.trim(),content:"{}"}}}),d=c?.createDiagram?.id;if(!d)throw new Error;window.open(`/diagram/${d}`,"_blank"),s(!1),n(""),p.success("Diagram created")}catch{p.error("Failed to create diagram")}}return e.jsx(V,{children:e.jsxs(y,{title:"System Flows",description:"Diagrams from your registered projects and ~/.uigraph.",crumbs:[{to:"/dashboard/diagrams",label:"Diagrams"}],headerContent:e.jsxs(u,{preset:"cta",onClick:()=>s(!0),children:[e.jsx(w,{}),"Create Flow"]}),children:[e.jsx(U,{}),e.jsx(v,{open:r,onOpenChange:s,children:e.jsx(D,{title:"Create Flow",description:"The flow is saved in ~/.uigraph and isn't part of any service.",footerSubmit:"Create Flow",footerSubmitLoading:a,onFooterSubmitClick:l,footerCancel:!0,children:e.jsx("form",{onSubmit:c=>{c.preventDefault(),l()},children:e.jsx(g,{value:i,onChange:c=>n(c.target.value),placeholder:"Enter flow name",className:"h-[56px] rounded-[16px] border border-[#2A3242] bg-transparent px-6 focus:outline-none",autoComplete:"off"})})})})]})})}export{Le as DashboardDiagramsPageInner};

package/dist/viewer/assets/dashboard-services-DEscIO2O.js

@@ -1 +0,0 @@
-import{r as p,j as t}from"./index-CH7cEAxj.js";import{S as O}from"./section-loader-C4hOfhQS.js";import{S as w}from"./section-not-found-BnrXiPog.js";import{B as I}from"./button-DZj74qS7.js";import{I as U}from"./input--C59pq6j.js";import{x as _,T as P,v as $,w as z,M as V,P as G}from"./nav-links-DZWMpwMR.js";import{L as Q,c as u,u as H}from"./chunk-OB3PAWPO-DJIP1M4r.js";import{u as L}from"./query-D9oj6LGx.js";import{DashboardPageSectionLayout as W}from"./index-Bn2bqqMd.js";import{S as Y,D as q}from"./services-Ivav34WC.js";import{u as J}from"./use-debounced-value-BpNFJd3C.js";import{a as A}from"./index-Dj_05fqk.js";import{u as K}from"./useQuery-Dhe6uxrL.js";import{B as X}from"./better-delete-confirmation-modal-CGEQ5O4X.js";import{D as Z,a as ee,b as te,c as se}from"./scroll-area-RagrStGj.js";import{u as re}from"./use-permissions-BvmxJJ5r.js";import{t as D}from"./index-B6MxYIzs.js";import{f as oe}from"./format-BquKoU4D.js";import{u as ae}from"./useMutation-D5ZHwHsx.js";import{N as ne}from"./network-B1apzT1s.js";import"./super-logo-loader-Cxlbn6MB.js";import"./iconBase-DtqdW2XR.js";import"./dashboard-layout-sTeeHNsZ.js";import"./grid-scroll-body-DC5pYDPJ.js";import"./popover-476u3TN0.js";import"./gql-FFIj8zdp.js";import"./dialog-D7wzTt0L.js";import"./super-circle-loader-DSkos6uP.js";import"./ui-graph-logo-gHowu5gP.js";import"./en-US-B1Lg1a1H.js";function ie(){const e=L().id,[s,a]=p.useState(""),i=J(s),{data:c,loading:x}=K(Y,{variables:{orgId:e,teamId:null,search:i||null,sortBy:"name",sortDir:"asc"},fetchPolicy:"cache-and-network"}),h=p.useMemo(()=>{const f=new Map;for(const m of A(c?.services.items))m?.stats?.serviceId&&f.set(m.stats.serviceId,m.stats);return f},[c?.services.items]),g=p.useMemo(()=>A(c?.services.items),[c?.services.items]);return{isServicesLoading:x&&!c?.services,isStatsLoading:x&&!c?.services,services:g,statsByServiceId:h,search:s,setSearch:a}}const le={backend:"#2563EB",frontend:"#16A34A",mobile:"#0891B2",database:"#D97706",worker:"#7C3AED",messaging:"#DB2777",cache:"#EA580C",gateway:"#0369A1",infrastructure:"#64748B",library:"#059669",other:"#374151"};function ce(e){return e?le[e.toLowerCase()]??"#94A3B8":"#94A3B8"}const N=["#2563EB","#0D9488","#7C3AED","#D97706","#DB2777","#0891B2","#16A34A","#9333EA","#EA580C","#0369A1","#7E22CE","#065F46"];function de(e){let s=5381;for(let a=0;a<e.length;a++)s=(s<<5)+s+e.charCodeAt(a)>>>0;return N[s%N.length]}function me(e){const s=e.trim().split(/\s+/);return s.length>=2?`${s[0][0]}${s[1][0]}`.toUpperCase():e.substring(0,2).toUpperCase()}function S(e){try{return new URL(e).hostname.replace("www.","")+new URL(e).pathname}catch{return e}}function pe(e){return e.gitRepoUrl?S(e.gitRepoUrl):e.jiraProjectUrl?S(e.jiraProjectUrl):e.slackChannelUrl?e.slackChannelUrl:null}function E(e){return/^[0-9a-f-]{20,}$/i.test(e)||/^[a-z]+_[0-9a-f-]{8,}/i.test(e)||/^\{.+\}$/.test(e)||/^[a-z]+_\{.+\}$/i.test(e)}function ue({service:e,index:s=0,stats:a,statsLoading:i=!1}){const{canWrite:c}=re(),x=L().id,[h,g]=p.useState(!1),[f,m]=p.useState(!1),[b]=ae(q,{awaitRefetchQueries:!0,refetchQueries:["Services"]}),r=ce(e.category),n=de(e.id||e.name||""),l=pe(e),M=[...e.teamId&&!E(e.teamId)?[e.teamId]:[],...(e.labels||[]).flatMap(o=>o&&!E(o)?[o]:[])],v=new Set,C=M.filter(o=>{const d=o.toLowerCase();return v.has(d)?!1:(v.add(d),!0)}),B=C.slice(0,3),j=C.length-3,T=a?.endpointCount??0,F=a?.diagramCount??0,R=a?.dbTableCount??0,y=e.updatedAt?new Date(e.updatedAt):null;return t.jsxs("div",{className:"group relative",style:{animation:"serviceCardIn 0.35s ease both",animationDelay:`${s*55}ms`},children:[t.jsxs(Q,{to:`/services/${e.id}`,className:"relative flex flex-col overflow-hidden rounded-2xl bg-[#141925] ring-1 ring-[#2A3242] transition-all duration-200 hover:-translate-y-px hover:shadow-[0_0_0_2px_rgba(37,99,235,0.25),0_6px_20px_rgba(0,0,0,0.4)] hover:ring-[#015AEB]",children:[t.jsx("div",{className:"h-[2px] w-full shrink-0",style:{backgroundColor:r}}),t.jsxs("div",{className:"flex flex-1 flex-col p-5",children:[t.jsxs("div",{className:u("mb-4 flex gap-3 pr-6",l?"items-start":"items-center"),children:[t.jsx("div",{className:u("flex size-10 shrink-0 items-center justify-center rounded-xl text-[12px] font-bold tracking-wider",l&&"mt-0.5"),style:{backgroundColor:`${n}18`,color:n},children:me(e.name||"")}),t.jsxs("div",{className:"min-w-0",children:[t.jsx("h3",{className:"text-[14px] leading-5 font-semibold tracking-[-0.01em] text-[#F4F7FC]",children:e.name}),l&&t.jsx("p",{className:"mt-0.5 truncate font-mono text-[11px] text-[#828DA3]",children:l})]})]}),e.description&&t.jsx("p",{className:"mb-3 line-clamp-2 text-[13px] leading-[1.5] text-[#828DA3]",children:e.description}),C.length>0&&t.jsxs("div",{className:"mb-3 flex flex-wrap items-center gap-1",children:[B.map((o,d)=>t.jsx("span",{className:"inline-flex max-w-[120px] items-center truncate rounded-md px-2 py-0.5 text-[11px] font-medium",style:d===0?{backgroundColor:`${r}14`,color:r}:{backgroundColor:"#1E2533",color:"#D2D9E6"},children:o},d)),j>0&&t.jsx(_,{children:t.jsxs(P,{children:[t.jsx($,{asChild:!0,children:t.jsxs("span",{className:"cursor-help rounded-md bg-[#1E2533] px-2 py-0.5 text-[11px] text-[#828DA3]",children:["+",j]})}),t.jsx(z,{children:t.jsx("div",{className:"flex flex-col gap-1",children:C.slice(3).map((o,d)=>t.jsx("span",{className:"text-xs",children:o},d))})})]})})]}),t.jsx("div",{className:"mt-4 grid grid-cols-3 gap-1.5 border-t border-[#2A3242] pt-3",children:[{value:T,label:"ENDPOINTS"},{value:F,label:"DIAGRAMS"},{value:R,label:"TABLES"}].map(({value:o,label:d})=>t.jsxs("div",{className:u("flex flex-col items-start rounded-lg bg-[#1E2533] px-2.5 py-2",o===0&&"opacity-50"),children:[t.jsx("span",{className:u("text-[20px] leading-none font-bold tracking-tight tabular-nums",o>0?"text-[#F4F7FC]":"text-[#586378]"),children:i?"—":o}),t.jsx("span",{className:"mt-1.5 text-[9px] font-semibold tracking-widest text-[#828DA3]",children:d})]},d))}),y&&t.jsx("p",{className:"mt-2 text-right text-[11px] text-[#586378]",children:oe(y,"d MMM yyyy")})]})]}),t.jsxs(Z,{open:h,onOpenChange:g,children:[t.jsx(ee,{asChild:!0,children:t.jsx(I,{size:"icon",variant:"ghost",className:u("absolute top-4 right-3 h-6 w-6 rounded-md bg-[#1E2533]/90 opacity-0 shadow-sm backdrop-blur-sm transition-opacity group-hover:opacity-100 hover:bg-[#1E2533]",h&&"opacity-100"),children:t.jsx(V,{className:"h-3.5 w-3.5 text-[#828DA3]"})})}),t.jsx(te,{align:"end",children:t.jsx(se,{variant:"destructive",disabled:!c,onClick:()=>m(!0),children:"Delete"})})]}),t.jsx(X,{open:f,onOpenChange:m,title:"Do you want to delete this service?",description:`This removes the service's project from UIGraph, including any other services it defines. No files are deleted from the project. Run "uigraph sync" in the project to add it back.`,deleteButtonText:"Delete",onConfirm:async()=>{try{await b({variables:{orgId:x,id:e.id}}),m(!1),D.success("Service deleted")}catch(o){D.error(o instanceof Error?o.message:"Failed to delete service")}}})]})}function Ge(){const e=H(),[s,a]=p.useState(null),{services:i,isServicesLoading:c,statsByServiceId:x,isStatsLoading:h,search:g,setSearch:f}=ie(),m=p.useMemo(()=>{const r=new Map;for(const n of i)if(n.category){const l=n.category.toLowerCase();r.set(l,(r.get(l)??0)+1)}return Array.from(r.entries()).sort((n,l)=>l[1]-n[1]).map(([n,l])=>[n.charAt(0).toUpperCase()+n.slice(1),l])},[i]),b=p.useMemo(()=>s?i.filter(r=>r.category?.toLowerCase()===s.toLowerCase()):i,[i,s]);return t.jsxs(W,{title:"Service Catalog",description:"Services, APIs and dependencies from your registered projects",crumbs:[{to:"/services",label:"Services"}],headerContent:t.jsxs(I,{preset:"outline",onClick:()=>e(G.services.dependency),children:[t.jsx(ne,{}),"Dependency graph"]}),children:[t.jsxs("div",{className:"mb-6 flex flex-wrap items-center gap-3",children:[t.jsx(U,{value:g,onChange:r=>f(r.target.value),placeholder:"Search services...",className:"h-10 w-52 rounded-lg border-[#2A3242] bg-[#1E2533] text-[13px] shadow-none focus-visible:bg-[#1E2533]"}),t.jsxs("div",{className:"flex items-center gap-0.5 rounded-lg bg-[#1E2533] p-0.5 ring-1 ring-[#2A3242]",children:[t.jsx(k,{label:"All",count:i.length,active:s===null,onClick:()=>a(null)}),m.map(([r,n])=>t.jsx(k,{label:r,count:n,active:s===r,onClick:()=>a(s===r?null:r)},r))]})]}),c?t.jsx(O,{label:"Loading services..."}):i.length===0&&!g?t.jsx(w,{label:"The .uigraph artifacts have no services."}):b.length===0?t.jsx(w,{label:"No services match your search."}):t.jsx("div",{className:"grid grid-cols-1 gap-4 pb-6",style:{gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))"},children:b.map((r,n)=>t.jsx(ue,{service:r,index:n,stats:x.get(r.id),statsLoading:h},r.id))})]})}function k({label:e,count:s,active:a,onClick:i}){return t.jsxs("button",{type:"button",onClick:i,className:u("inline-flex h-8 items-center gap-2 rounded-lg px-3 text-[13px] font-medium transition-all duration-150",a?"bg-[#2A3242] text-[#F4F7FC]":"text-[#828DA3] hover:bg-[#2A3242]/50 hover:text-[#F4F7FC]"),children:[e,t.jsx("span",{className:u("rounded px-1 py-px text-[10px] font-semibold tabular-nums",a?"bg-white/15 text-white":"bg-[#141925] text-[#828DA3]"),children:s})]})}export{Ge as DashboardServices,k as FilterPill};