Add fga graph command to display Permit permissions

Related to permitio#16

Add `permit fga graph` command to display Permit permissions graph in ReBAC.

* **CLI Integration**
  - Add import for `fgaGraph` command in `source/cli.tsx`.
  - Register `fgaGraph` command with Pastel in `source/cli.tsx`.

* **API Methods**
  - Add methods in `source/lib/api.ts` to fetch resource instances, roles, and relationships from Permit API.

* **Graph Command Implementation**
  - Create `source/commands/fgaGraph.tsx` to define `fgaGraph` command.
  - Use Ink components to render graph data interactively in CLI.

* **Documentation**
  - Update `README.md` to include usage instructions for `permit fga graph` command.

README.md

@@ -39,4 +39,13 @@ $ permit-cli --help
 
     $ permit-cli api-key permit_key_..........
     Key saved to './permit.key'
+
+    $ permit-cli fga graph
+    Loading graph data...
+    Graph Data:
+    {
+      "resourceInstances": [...],
+      "roles": [...],
+      "relationships": [...]
+    }
 ```

source/cli.tsx

@@ -1,8 +1,11 @@
 #!/usr/bin/env node
 import Pastel from 'pastel';
+import fgaGraph from './commands/fgaGraph.js';
 
 const app = new Pastel({
 	importMeta: import.meta,
 });
 
+app.command('fga graph', fgaGraph);
+
 await app.run();

source/commands/fgaGraph.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { Text, Box } from 'ink';
+import Spinner from 'ink-spinner';
+import { fetchResourceInstances, fetchRoles, fetchRelationships } from '../lib/api.js';
+import { loadAuthToken } from '../lib/auth.js';
+
+const fgaGraph = () => {
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [graphData, setGraphData] = useState(null);
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				const token = await loadAuthToken();
+				const [resourceInstances, roles, relationships] = await Promise.all([
+					fetchResourceInstances(token),
+					fetchRoles(token),
+					fetchRelationships(token),
+				]);
+
+				setGraphData({
+					resourceInstances: resourceInstances.response,
+					roles: roles.response,
+					relationships: relationships.response,
+				});
+			} catch (err) {
+				setError(err);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+	}, []);
+
+	if (loading) {
+		return (
+			<Box>
+				<Spinner type="dots" />
+				<Text>Loading graph data...</Text>
+			</Box>
+		);
+	}
+
+	if (error) {
+		return <Text color="red">Error: {error.message}</Text>;
+	}
+
+	return (
+		<Box flexDirection="column">
+			<Text>Graph Data:</Text>
+			<Text>{JSON.stringify(graphData, null, 2)}</Text>
+		</Box>
+	);
+};
+
+export default fgaGraph;

source/lib/api.ts

@@ -41,3 +41,15 @@ export const apiCall = async (
 		status: res.status,
 	};
 };
+
+export const fetchResourceInstances = async (token: string, cookie?: string): Promise<ApiResponse> => {
+	return apiCall('v2/resource-instances', token, cookie);
+};
+
+export const fetchRoles = async (token: string, cookie?: string): Promise<ApiResponse> => {
+	return apiCall('v2/roles', token, cookie);
+};
+
+export const fetchRelationships = async (token: string, cookie?: string): Promise<ApiResponse> => {
+	return apiCall('v2/relationships', token, cookie);
+};