WEBVTT 1 00:00:00.000 --> 00:00:07.520 Team training. We are, I think, on part four of this series working through our agency dashboard. We have a 2 00:00:08.920 --> 00:00:13.360 Small team. I think we're under seven people and we've been building a dashboard 3 00:00:14.040 --> 00:00:20.000 Vibe coding a dashboard or at least building it in this new way. We've did some shaping stuff 4 00:00:20.000 --> 00:00:22.380 We went through and did like a task grid 5 00:00:22.380 --> 00:00:26.160 I think last week and so I'll just tend to take a second here and show you guys a 6 00:00:26.280 --> 00:00:29.720 Little bit about a little bit what I've worked on since we talked and 7 00:00:30.280 --> 00:00:35.520 All in I think I've maybe spent three hours since last maybe four hours since we 8 00:00:36.640 --> 00:00:39.320 Since we last talked here, and I'm gonna try to find 9 00:00:40.400 --> 00:00:45.240 Here it is our dashboard. So we share this real quick and then I'll jump in with the team 10 00:00:46.040 --> 00:00:51.880 Hopefully this will show so we again in recap. We did a whole like sticky note thing 11 00:00:51.960 --> 00:00:58.320 We put that into digitized notes here, we've slowly just been like coming up with things to 12 00:00:59.160 --> 00:01:04.319 Spend our time on as a as like with teams. We framed up some different projects here 13 00:01:04.319 --> 00:01:09.680 We talked about our process. You guys go to the old videos if you're want to catch up on how we got this far 14 00:01:10.680 --> 00:01:16.260 And it's good. We just kind of drew what was already happening already a lot of times when you're framing stuff 15 00:01:16.360 --> 00:01:21.680 It's just taking time to like shape the now process once you like figure out how it's actually working now 16 00:01:21.680 --> 00:01:24.280 Then the future state actually becomes very clear 17 00:01:25.160 --> 00:01:27.240 So but a lot of times you just want to jump to like well 18 00:01:27.240 --> 00:01:30.160 It should work like this and we just go ahead and brain like put this together 19 00:01:31.320 --> 00:01:36.640 Of how it should work and then we don't but this is actually good and therapeutic to go through 20 00:01:36.920 --> 00:01:40.600 How it's currently working and then we come with a few versions of how it could work 21 00:01:41.120 --> 00:01:47.040 And not to say like the thing we've built yet is working this way, but it helped get our ideas on paper 22 00:01:47.560 --> 00:01:54.560 And so I'll show you a couple new features here, let me share this other screen make sure I've got 23 00:01:55.320 --> 00:02:02.400 This okay, and I'm literally deploying a version while we're speaking. So I'll see if this has got the latest code here 24 00:02:03.600 --> 00:02:09.199 so a couple things that we did we showed you the task grid last time in 25 00:02:10.240 --> 00:02:12.240 the monster app I 26 00:02:12.680 --> 00:02:15.640 Idea that there's something that Ryan had created and so 27 00:02:16.400 --> 00:02:20.320 One of the features we actually threw in here was to make our own task grid 28 00:02:20.520 --> 00:02:24.080 And so this little thing that you see here is actually inside our dashboard now 29 00:02:24.680 --> 00:02:30.440 And so every project will will have that we have like a little home screen so you can actually see 30 00:02:31.240 --> 00:02:35.080 This one. I think this is a one week. Yeah get a one week project here and 31 00:02:36.120 --> 00:02:40.520 I'm gonna zoom this all in since my screens a little big here and 32 00:02:41.200 --> 00:02:45.120 This is the view that you would see inside the dashboard for a project 33 00:02:45.400 --> 00:02:50.560 You can actually see the toggle try time here. You can see like I spent an hour this morning on it 34 00:02:51.440 --> 00:02:56.400 So maybe we're in like 15. I didn't spend a few hours yesterday doing a bunch of stuff, but 35 00:02:57.040 --> 00:03:02.840 15 hours all in got a lot done for that. So all of this has been built in this view here 36 00:03:02.840 --> 00:03:07.360 We had a client project view or we could view projects by status 37 00:03:07.600 --> 00:03:12.560 And we have a clients by month so we can kind of see when their stuff is scheduled with a few little tasks 38 00:03:13.960 --> 00:03:18.000 Client security here. Just making sure we match the right user to the right client 39 00:03:19.080 --> 00:03:21.320 We added this task grid was a little fun bonus 40 00:03:21.480 --> 00:03:27.000 We added the team view so that team view like the team can actually go in and see their 41 00:03:28.560 --> 00:03:33.120 Schedule and we also have like their financials and stuff so we can see earnings 42 00:03:33.120 --> 00:03:36.560 And my screen just stopped sharing. So this is great. Let's try that again 43 00:03:39.600 --> 00:03:41.840 Okay, cool, we'll see if that happens again 44 00:03:43.440 --> 00:03:44.960 and then 45 00:03:44.960 --> 00:03:52.240 So we did a lot and this is only 15 hours in to this product. So every one of these slices here is pretty much 46 00:03:53.280 --> 00:03:57.280 Like one work session. I would say I had this little command palette today 47 00:03:57.280 --> 00:04:02.640 And we can now like search for a client like I can type Anovo and hit enter takes me to 48 00:04:03.040 --> 00:04:08.240 You know what's going on with with that client. I can easily search for a project like new view 49 00:04:08.880 --> 00:04:13.440 Hit enter jump to this project again. So these are these are super helpful when we're 50 00:04:14.160 --> 00:04:19.200 Just getting in between a lot of different projects. Also a great shortcut if you're building an app 51 00:04:20.240 --> 00:04:24.080 That you don't have all the navigation just figured out just quite yet 52 00:04:24.320 --> 00:04:27.280 You don't have all the navigation just figured out just quite yet 53 00:04:27.600 --> 00:04:31.920 This command palette is genius because you can just get around to the thing you want to get to really quick 54 00:04:32.400 --> 00:04:35.060 Um, so I don't have like a good search functionality 55 00:04:35.920 --> 00:04:41.280 Uh, if you were looking for a project, there's not like a list of projects somewhere to go and find projects 56 00:04:41.920 --> 00:04:43.600 I'd have to go to 57 00:04:43.600 --> 00:04:45.600 a dashboard here 58 00:04:45.600 --> 00:04:48.480 You know the things were assigned to me or if I pick someone 59 00:04:49.120 --> 00:04:52.080 I see these projects are assigned to me or maybe I could go to the client 60 00:04:52.560 --> 00:04:56.560 And then I could look up what that client was doing and then click into a project that way 61 00:04:56.960 --> 00:04:58.480 but it's kind of 62 00:04:58.480 --> 00:05:00.480 hard to get there so 63 00:05:00.000 --> 00:05:02.960 Now, just with the search, we can just type something like request pool. 64 00:05:02.960 --> 00:05:06.840 We can type in, you know, a client's name like that, jump straight to it. 65 00:05:07.240 --> 00:05:10.280 Um, so it's kind of a lazy way to do navigation. 66 00:05:10.720 --> 00:05:14.480 Um, but also, uh, I think most of us are using this for, at least for me, like I 67 00:05:14.480 --> 00:05:19.880 use it for notion and, um, uh, Slack all the time. 68 00:05:19.920 --> 00:05:21.720 So this is a great little hack. 69 00:05:21.760 --> 00:05:24.840 I think, uh, I think it took me like an hour to put that in. 70 00:05:24.840 --> 00:05:27.040 So also something we should definitely add to other apps. 71 00:05:27.600 --> 00:05:29.240 Um, I'll show you something as well. 72 00:05:29.960 --> 00:05:34.760 Um, this task grid thing is a great little exercise in general 73 00:05:34.800 --> 00:05:35.840 when we're building projects. 74 00:05:35.840 --> 00:05:39.160 So, uh, let me go back to the new view here. 75 00:05:40.320 --> 00:05:43.960 Um, we were using like a link to Ryan's tool. 76 00:05:44.360 --> 00:05:46.840 Um, and this is kind of nice to have it right here though. 77 00:05:46.880 --> 00:05:51.200 So you can add a slice and I can just type something like, um, maybe there's 78 00:05:51.200 --> 00:05:59.280 a new view, uh, for like, maybe I'll do like a, a team member, like, uh, by 79 00:05:59.280 --> 00:06:04.080 status view, we have a client by status view, maybe we'll do the same for the 80 00:06:04.080 --> 00:06:07.320 client here, I mean, for the team members and you can just type things. 81 00:06:07.320 --> 00:06:10.840 So as soon as I hit enter here, it kind of just jumps to the next thing. 82 00:06:11.120 --> 00:06:17.840 And I can say, you know, set up Kanban, uh, whatever, add to like a horizontal 83 00:06:17.840 --> 00:06:19.640 nav, I don't know, set up. 84 00:06:20.040 --> 00:06:23.840 Um, I don't know what else we need, you know, parameters and we don't, I'm not 85 00:06:23.840 --> 00:06:27.120 going to build it on this call, but you guys can see what happens is like, I get 86 00:06:27.120 --> 00:06:29.080 my little total here, which is really nice. 87 00:06:29.520 --> 00:06:34.200 Um, I can of course drag this box to the front here just to, for, since everything 88 00:06:34.200 --> 00:06:38.600 else is done and kind of keep it up here at the top, um, I can quickly check these 89 00:06:38.600 --> 00:06:43.400 things off, um, if needed, I can even drag something from one item to another. 90 00:06:43.960 --> 00:06:44.840 Uh, which is helpful. 91 00:06:44.840 --> 00:06:48.080 And you can see like, once we check all the items off, this kind of fades away. 92 00:06:48.120 --> 00:06:50.240 So you don't really have to pay attention to that. 93 00:06:50.880 --> 00:06:54.800 Um, and then there's other things here we can mark unknowns here. 94 00:06:54.800 --> 00:06:57.400 So if there was a section of the project and there were still things that were 95 00:06:57.400 --> 00:07:00.120 unknown, it's a nice little flag there. 96 00:07:00.120 --> 00:07:03.520 We may add some more flags as we go, but these are just, it's basically like a 97 00:07:03.520 --> 00:07:06.440 whiteboard with just you sketching out things. 98 00:07:06.520 --> 00:07:10.040 Um, when I'm building stuff, I actually typically have a piece of paper in front 99 00:07:10.040 --> 00:07:13.200 of me and I literally just have like a heading and a couple of bullet points, 100 00:07:13.200 --> 00:07:17.000 like checklist underneath, a heading, a couple of bullet points. 101 00:07:17.480 --> 00:07:20.520 Um, and so this is a great way to recreate that. 102 00:07:20.920 --> 00:07:22.680 And I think there's a lot of cool things we can do with this. 103 00:07:22.680 --> 00:07:27.840 Since each task is now in here, we can potentially have, um, even assigning 104 00:07:27.880 --> 00:07:31.040 like tasks, if two people were working on something together, we could assign 105 00:07:31.160 --> 00:07:33.400 a slice to each other, things like that. 106 00:07:33.400 --> 00:07:34.360 So that can all happen. 107 00:07:34.440 --> 00:07:36.080 Um, obviously you can mark as completed. 108 00:07:36.560 --> 00:07:40.120 Um, I can, uh, I think you can delete something. 109 00:07:40.160 --> 00:07:41.200 You can also duplicate it. 110 00:07:41.200 --> 00:07:45.240 So if we had two very similar slices, but slightly different, like I have 111 00:07:45.240 --> 00:07:48.760 this project view by status for clients, but now I have like a project 112 00:07:48.760 --> 00:07:51.280 view for status by for the team member. 113 00:07:51.280 --> 00:07:54.920 Maybe I can duplicate this whole slice and just tweak a few tasks. 114 00:07:55.400 --> 00:07:58.560 Um, so hopefully that becomes really useful. 115 00:07:58.560 --> 00:08:02.280 We can still obviously jump back to Notion really quick because most things, 116 00:08:02.280 --> 00:08:04.920 if we want to change the status of a project, we still go to Notion. 117 00:08:04.920 --> 00:08:05.960 That's kind of our source. 118 00:08:05.960 --> 00:08:07.680 And then that will sync back. 119 00:08:08.200 --> 00:08:10.280 Um, and we have a two way link now as well. 120 00:08:10.280 --> 00:08:14.640 So you can click on the dashboard there, jump back to this page and so forth. 121 00:08:14.640 --> 00:08:17.560 So, um, let me bring everybody back on here. 122 00:08:18.160 --> 00:08:21.280 Um, if you guys want to be on screen, you can, you can turn your 123 00:08:21.280 --> 00:08:22.560 camera off if you don't want to. 124 00:08:22.960 --> 00:08:25.960 Um, and I think I lost my screen share again. 125 00:08:27.360 --> 00:08:31.760 Out of here, but yeah, I'd love to hear any, um, thoughts you guys have. 126 00:08:32.120 --> 00:08:36.400 I think we may have maxed out the number of people on this, uh, on this invite. 127 00:08:36.400 --> 00:08:39.320 So, uh, let's see. 128 00:08:41.280 --> 00:08:43.000 Um, yeah. 129 00:08:43.039 --> 00:08:43.559 Any thoughts? 130 00:08:43.559 --> 00:08:44.120 You guys are welcome. 131 00:08:44.120 --> 00:08:45.560 This is just open chat. 132 00:08:46.080 --> 00:08:49.080 Um, so far, let me pull this. 133 00:08:49.080 --> 00:08:52.400 Hey, it's command palette live, or is it just on your live? 134 00:08:52.480 --> 00:08:54.960 I'm trying to, what's the keyboard shortcut again? 135 00:08:55.880 --> 00:08:56.520 Command K. 136 00:08:57.080 --> 00:08:57.400 Command K. 137 00:08:57.440 --> 00:08:57.800 Okay. 138 00:08:58.800 --> 00:09:00.960 That's how we're going to live beta test this right now. 139 00:09:01.160 --> 00:09:06.440 Did you have to, uh, bake in the command palette or was that something 140 00:09:06.440 --> 00:09:08.760 that just kind of, you had already Bruce? 141 00:09:08.880 --> 00:09:11.880 Um, no, it was pretty, um, quick. 142 00:09:11.880 --> 00:09:18.920 I, I'll, uh, I wonder, yes, if I can go, um, let me grab, I wonder if I 143 00:09:18.920 --> 00:09:20.320 can show that history real quick. 144 00:09:22.160 --> 00:09:24.560 I was going to say, I mean, I'm not a developer, so I'm sure 145 00:09:24.560 --> 00:09:26.680 developers can say we love command. 146 00:09:26.720 --> 00:09:27.200 Yeah. 147 00:09:27.240 --> 00:09:28.520 This is the process here. 148 00:09:28.960 --> 00:09:31.720 Um, let me get it. 149 00:09:32.080 --> 00:09:35.720 Uh, I don't want to just be having to hunt and click on things. 150 00:09:36.680 --> 00:09:37.160 Yes. 151 00:09:37.360 --> 00:09:40.480 Um, this is kind of a nice, I forgot how we can get like the full history here. 152 00:09:41.360 --> 00:09:41.840 Anyway. 153 00:09:42.160 --> 00:09:44.640 Um, I'm trying to show the plan for this. 154 00:09:44.800 --> 00:09:49.000 I wonder if we can show me the original plan. 155 00:09:49.680 --> 00:09:50.880 Uh, I wonder if it'll do that. 156 00:09:51.120 --> 00:09:57.000 It's like not showing the history, but I'll, um, I'll see if I can go here. 157 00:09:57.000 --> 00:09:59.880 It is maybe it was an MD file. 158 00:10:00.000 --> 00:10:01.560 somewhere, saved somewhere deep. 159 00:10:01.560 --> 00:10:05.040 And I'll see if I can find it. 160 00:10:05.040 --> 00:10:08.000 Oh, here it is. 161 00:10:08.000 --> 00:10:12.960 So this was the I just went into plan mode again with Claude. 162 00:10:12.960 --> 00:10:17.880 And we came up with this little plan here, pretty simple. 163 00:10:17.880 --> 00:10:20.160 I think the prompt I said, I just spoke it out. 164 00:10:20.160 --> 00:10:22.020 So I used Talktastic as well. 165 00:10:22.020 --> 00:10:24.680 You should all use some sort of dictation AI tool 166 00:10:24.680 --> 00:10:26.760 at this point, save yourselves. 167 00:10:26.760 --> 00:10:29.100 And it's very helpful and therapeutic, again, 168 00:10:29.100 --> 00:10:32.380 to talk the thing out versus having 169 00:10:32.380 --> 00:10:36.260 to sit there and type it, try to be perfect. 170 00:10:36.260 --> 00:10:38.980 But this was pretty simple. 171 00:10:38.980 --> 00:10:39.860 We had some routes. 172 00:10:39.860 --> 00:10:41.100 We went back and forth a little bit 173 00:10:41.100 --> 00:10:43.580 because it wanted to use all the keeps. 174 00:10:43.580 --> 00:10:45.620 Claude loves just writing and reading things 175 00:10:45.620 --> 00:10:47.340 right out of Superbase. 176 00:10:47.340 --> 00:10:48.580 It's super lazy. 177 00:10:48.580 --> 00:10:50.700 And so you have to tell it, hey, you 178 00:10:50.700 --> 00:10:54.300 see how every other database call is using an API? 179 00:10:54.300 --> 00:10:56.060 How about you do that? 180 00:10:56.060 --> 00:11:00.580 You just keep following the instructions I give you. 181 00:11:00.580 --> 00:11:01.860 Same thing here. 182 00:11:01.860 --> 00:11:04.260 And I specifically asked for it somewhere. 183 00:11:04.260 --> 00:11:07.500 I didn't want to use any kind of third-party thing. 184 00:11:07.500 --> 00:11:11.060 I think another app, we tried to implement this somewhere, 185 00:11:11.060 --> 00:11:12.780 and we used Algolia. 186 00:11:12.780 --> 00:11:16.180 And I can't remember what that, maybe that was for Tribe. 187 00:11:16.180 --> 00:11:17.380 But it was pretty simple. 188 00:11:17.380 --> 00:11:20.860 And I was able to search for keywords, a title of a project, 189 00:11:20.860 --> 00:11:23.140 a client. 190 00:11:23.140 --> 00:11:24.900 And then I committed that. 191 00:11:24.900 --> 00:11:27.900 And so we went through and like, ha-ha. 192 00:11:27.900 --> 00:11:31.020 I don't know if that got shown, but that was my E&D file. 193 00:11:31.020 --> 00:11:34.300 May have to delete this recording. 194 00:11:34.300 --> 00:11:39.260 So if we go in here, basically went through like, 195 00:11:39.260 --> 00:11:40.660 I think we did, yeah. 196 00:11:40.660 --> 00:11:44.500 So there was one commit where we just gave the initial commit, 197 00:11:44.500 --> 00:11:47.300 like one component for the command palette, 198 00:11:47.300 --> 00:11:49.940 updated this, updated the route here. 199 00:11:49.940 --> 00:11:51.620 And then I added search clients. 200 00:11:51.620 --> 00:11:53.380 And I added some status colors. 201 00:11:53.380 --> 00:11:55.460 And then I added the ability to search team members 202 00:11:55.460 --> 00:11:56.380 if you're an admin. 203 00:11:56.380 --> 00:12:00.060 So those were like four kind of commits that 204 00:12:00.060 --> 00:12:02.180 made up that little feature. 205 00:12:02.180 --> 00:12:07.460 So I think that was the whole process for building that. 206 00:12:07.460 --> 00:12:09.620 I don't know if that was the question you're asking, 207 00:12:09.620 --> 00:12:12.980 but that was sort of the process of building that. 208 00:12:12.980 --> 00:12:13.620 I tried it out. 209 00:12:13.620 --> 00:12:17.300 I have a suggestion, a little improvement. 210 00:12:17.300 --> 00:12:17.820 Yes. 211 00:12:17.820 --> 00:12:19.980 In the command palette, like Command-Enter 212 00:12:19.980 --> 00:12:21.980 should open in a new tab instead 213 00:12:21.980 --> 00:12:24.820 of like replacing the page. 214 00:12:24.820 --> 00:12:27.700 So if you type like Anovo and then, oh, Command-Enter. 215 00:12:27.700 --> 00:12:30.500 Yes, that's a great idea. 216 00:12:30.500 --> 00:12:33.100 We will add it to the list right now. 217 00:12:37.140 --> 00:12:41.100 I kind of want to be able to also get directly to the grid, 218 00:12:41.100 --> 00:12:42.460 I mean, the task grid. 219 00:12:42.460 --> 00:12:48.140 But maybe we should be like Command-Enter opens new. 220 00:12:48.140 --> 00:12:48.980 Great, I love it. 221 00:12:50.980 --> 00:12:52.020 I'm going to delete this. 222 00:12:57.860 --> 00:12:59.300 Yeah, any other thoughts? 223 00:12:59.300 --> 00:13:02.100 It's interesting because getting it live and then just 224 00:13:02.100 --> 00:13:04.940 playing with it, you kind of notice things. 225 00:13:04.940 --> 00:13:08.220 It forces you, like I open Notion. 226 00:13:08.220 --> 00:13:09.660 Let's grab Notion real quick. 227 00:13:12.820 --> 00:13:17.100 When you hit Command-K here, it actually shows all the results. 228 00:13:17.140 --> 00:13:21.500 And then as you type something, it tries to find it. 229 00:13:21.500 --> 00:13:26.540 I also noticed I use the, so if I hit Command-Spacebar, 230 00:13:26.540 --> 00:13:28.740 I use Alfred on my computer. 231 00:13:28.740 --> 00:13:30.900 So I actually prefer this view. 232 00:13:30.900 --> 00:13:32.300 Sorry, I got like two. 233 00:13:32.300 --> 00:13:36.180 So if I hit Command-Spacebar, it just has just the input field. 234 00:13:36.180 --> 00:13:40.900 And then as I type something like Notion, 235 00:13:40.900 --> 00:13:42.460 it then search for Notion. 236 00:13:42.460 --> 00:13:45.820 Then as the results get fewer and fewer, 237 00:13:45.820 --> 00:13:48.020 it shortens the box below it. 238 00:13:48.020 --> 00:13:51.300 But what was happening initially on this version 239 00:13:51.300 --> 00:13:52.620 was it was opening tall. 240 00:13:52.620 --> 00:13:54.540 And then as the results got, the input field 241 00:13:54.540 --> 00:13:56.020 would get more centered. 242 00:13:56.020 --> 00:13:57.900 And it would jump around. 243 00:13:57.900 --> 00:14:00.220 These are huge issues. 244 00:14:00.220 --> 00:14:02.860 These are the real problems. 245 00:14:02.860 --> 00:14:06.220 It's just like these little things you notice. 246 00:14:06.220 --> 00:14:08.300 But just building it and making it work, 247 00:14:08.300 --> 00:14:10.420 and then just kind of playing with it a little bit, 248 00:14:10.420 --> 00:14:14.820 I was spending more of my time on the product, almost the UX 249 00:14:14.820 --> 00:14:16.780 or the UI, more of the UX. 250 00:14:16.780 --> 00:14:18.940 Because like, hey, I want it to be super fast. 251 00:14:18.940 --> 00:14:22.860 And now that Notion says that, and I want to pull this up, 252 00:14:22.860 --> 00:14:25.580 obviously, that Command-Enter makes tons of sense. 253 00:14:25.580 --> 00:14:28.620 Tons of sense, we should definitely have that. 254 00:14:28.620 --> 00:14:30.420 I think you can do that in Notion. 255 00:14:30.420 --> 00:14:32.340 It's funny, because these are things that you just do. 256 00:14:32.340 --> 00:14:33.580 You don't even think about it. 257 00:14:33.580 --> 00:14:36.580 Yeah, I think if I go like this and I hit Command-Enter, 258 00:14:36.580 --> 00:14:37.700 yeah, you're totally right. 259 00:14:37.700 --> 00:14:40.180 That's how it works. 260 00:14:40.180 --> 00:14:42.820 So that's the same for the idea as well, 261 00:14:42.820 --> 00:14:44.780 like VS Code or Cursor. 262 00:14:44.780 --> 00:14:46.340 VS Code, does that? 263 00:14:46.340 --> 00:14:47.220 Yeah. 264 00:14:47.220 --> 00:14:51.820 Yeah, if you were to open, yeah. 265 00:14:51.820 --> 00:14:53.260 Yeah, you're right. 266 00:14:53.260 --> 00:14:53.760 Exactly. 267 00:14:57.100 --> 00:14:57.820 One question. 268 00:14:57.820 --> 00:15:01.220 The test grid is being stored on. 269 00:15:00.000 --> 00:15:08.560 super base yeah uh but yeah and like on the super base side we have like a let's say copy 270 00:15:08.560 --> 00:15:14.320 of all the data or the for instance like the notion data we are getting only for notion and 271 00:15:14.320 --> 00:15:20.240 toggle we are getting from toggle and we are not like storing it on our super base it's 272 00:15:21.600 --> 00:15:29.040 it's a start okay so probably that's interesting yeah projects are actually synced um uh so there's 273 00:15:29.040 --> 00:15:36.720 a copy of the project and then there's a project in notion and same with clients okay so uh when 274 00:15:37.360 --> 00:15:43.760 the the magic piece here is like when you're in the um project connections here there's a little 275 00:15:43.760 --> 00:15:50.320 uh edge function that runs every hour i believe it is and then there's a second one that so one 276 00:15:50.320 --> 00:15:56.880 sucks in all the notion all the notion projects comments and clients and there's a bit of logic 277 00:15:56.880 --> 00:16:01.600 that it um just looks for new stuff so it's not bringing every single new project in it 278 00:16:01.600 --> 00:16:06.880 has a way of tracking if something's synced not or not and it tracks it to the id and so then 279 00:16:06.880 --> 00:16:11.760 if you were to change like the name of a client or you were to change the name of a project 280 00:16:12.320 --> 00:16:18.800 it will just update um there and so we've one of the features here which if you're building this 281 00:16:18.800 --> 00:16:23.120 from scratch and especially if you're vibe coding this you would just say like oh i want a place to 282 00:16:23.120 --> 00:16:28.480 like change the title of the of the project that would be a mistake um because now you've created 283 00:16:28.480 --> 00:16:34.400 just infinitely more work for yourself to now change the project name here but also be able 284 00:16:34.400 --> 00:16:40.080 to do it from notion and then which one like wins if they're like out of sync um so we made a very 285 00:16:40.080 --> 00:16:44.480 simple thing like we're already in notion if i want to change this or you know write other things 286 00:16:44.480 --> 00:16:49.360 or do stuff down here uh i'm just going to do it in notion because i'm already here that's why i've 287 00:16:49.360 --> 00:16:54.800 got links everywhere to open it in notion um so that was like a little hack um but actually 288 00:16:56.000 --> 00:17:01.280 simplifies the product quite quite a lot um instead of having like a two-way sync it's 289 00:17:01.280 --> 00:17:12.800 just a one-way um but then we do have a toggle um time yeah because yep because uh that's very 290 00:17:12.800 --> 00:17:21.359 interesting because then we are very close to being able to like uh basically have uh a 291 00:17:21.359 --> 00:17:29.680 cursor or cloud agent to run tasks directly from the task grid and being able to update it and like 292 00:17:29.680 --> 00:17:36.240 so then we can kind of do the half wagon thing like that loop thing we can basically do hey you 293 00:17:36.240 --> 00:17:43.680 need to loop uh in this task grid until everything is completed and until all these requirements are 294 00:17:43.680 --> 00:17:51.920 met and then you'll be just like um overseeing the loop itself and and like reviewing the output 295 00:17:51.920 --> 00:17:59.040 based on what's getting in and out of the task unit so it's very very very interesting and like 296 00:17:59.040 --> 00:18:04.880 we can do like even stuff like for for make this process better on the first moment we could like 297 00:18:05.520 --> 00:18:13.440 each box when we are going to like send this to to note to the agent we could have a specific 298 00:18:13.440 --> 00:18:20.320 context that we attach it for each box for instance if i know that the task grid will touch 299 00:18:20.320 --> 00:18:28.480 on this this and these files i already attach this to the box of the task grid as context for that 300 00:18:28.480 --> 00:18:34.000 execution this way when i send it for for the model model to execute it you'll be able to to 301 00:18:34.080 --> 00:18:40.320 retrieve the data properly now that's yeah and there's there's like layers of how uh that's yes 302 00:18:40.320 --> 00:18:47.440 definitely um a dumb simple way to do this in like 15 minutes would be something where you could 303 00:18:48.000 --> 00:18:53.680 like one of the options here would be like copy for ai and it just sucks up like all the tasks 304 00:18:53.680 --> 00:18:58.640 it knows what thing got finished it goes you know what the whatever and you just paste it into your 305 00:18:59.280 --> 00:19:04.800 uh that's really good you can like copy for the whole like task grid and it's like mark it down 306 00:19:04.800 --> 00:19:10.800 with the like uh check it yeah just mark it down but i got another like very simple request that 307 00:19:10.800 --> 00:19:20.080 would be powerful it like ability to put like links in the like task grid uh like item you know 308 00:19:20.080 --> 00:19:25.600 like a to-do item could be like a markdown ish like in the back end it's like markdown 309 00:19:26.560 --> 00:19:33.120 and it could be a link you know if you like select some text and paste a url then it becomes like a 310 00:19:33.120 --> 00:19:40.880 link does that make sense uh so you wouldn't be able to like hyperlink to it no no no i mean like 311 00:19:40.880 --> 00:19:46.400 let's say you have like one uh you have like one to do their command plus enter opens new tab let's 312 00:19:46.400 --> 00:19:54.240 say you like highlight the opens new tab yeah and then you like paste a link that should be like 313 00:19:54.320 --> 00:19:59.120 become like the you know blue underlined and oh like if i was typing here and i highlighted that 314 00:19:59.120 --> 00:20:00.000 i could hyperlink 315 00:20:00.000 --> 00:20:05.280 link something yeah like that becomes like a link 316 00:20:05.360 --> 00:20:08.480 interesting and then you could uh so if i had like 317 00:20:08.480 --> 00:20:12.560 multiple words i could link this one yeah exactly so that way like when 318 00:20:12.560 --> 00:20:15.200 you're doing the um what do you call it but then it can't 319 00:20:15.200 --> 00:20:19.360 you're not a sudden deal now you've got like a whole rich text editor 320 00:20:19.360 --> 00:20:22.880 yeah it could be like scoped down to just like make it mark down you know 321 00:20:22.880 --> 00:20:26.880 what's the use case are you wanting to like the use case is that like janata 322 00:20:26.880 --> 00:20:30.640 said like um like when you're passing it to ai 323 00:20:30.640 --> 00:20:33.840 um two use cases one is that i want to connect 324 00:20:33.840 --> 00:20:38.640 to uh like a notion task where i'm taking like 325 00:20:38.640 --> 00:20:42.400 a lot of notes about a specific like to do 326 00:20:42.400 --> 00:20:48.000 another uh use case is that um that feature that janata was just 327 00:20:48.000 --> 00:20:52.720 talking about like copy all then it would copy like with 328 00:20:52.720 --> 00:20:55.840 the markdown so that way the ai knows that this task 329 00:20:55.840 --> 00:21:00.800 has like a link to a page or something text 330 00:21:00.800 --> 00:21:04.640 better yeah i almost wonder if it's almost at the task level or it's at the 331 00:21:04.640 --> 00:21:08.720 slice level interesting yeah like we could like have 332 00:21:08.720 --> 00:21:11.600 a to the option to like double click at 333 00:21:11.600 --> 00:21:15.200 task and maybe add context for that specific task yeah 334 00:21:15.200 --> 00:21:20.320 that's for something i okay so this this is this is good i mean 335 00:21:20.320 --> 00:21:25.040 i think um uh there's a couple use cases for this 336 00:21:25.040 --> 00:21:28.160 i mean an easy thing to be like hey i need to pull all this in 337 00:21:28.160 --> 00:21:34.000 generally it is kind of uh diverting quite quite rapidly into something 338 00:21:34.000 --> 00:21:36.560 totally different which is and i almost think it's a different 339 00:21:36.560 --> 00:21:40.000 thing like almost like an ai like i just duplicate this whole thing 340 00:21:40.000 --> 00:21:42.800 and then it's just for like building the context 341 00:21:42.800 --> 00:21:46.800 for the project perfect yeah because yeah 342 00:21:46.800 --> 00:21:50.480 command enter opens new tab like there isn't any way 343 00:21:50.480 --> 00:21:54.000 uh uh and sorry this is on one it's in the 344 00:21:54.000 --> 00:21:57.920 wrong box what did i do here this should be over here 345 00:21:57.920 --> 00:22:02.080 um so part one i was like why does that even okay 346 00:22:02.080 --> 00:22:08.160 so that that should be over there um like i guess it could infer this but a 347 00:22:08.160 --> 00:22:10.800 lot of these things has like search client search projects like i 348 00:22:10.800 --> 00:22:14.800 know what it is um but the llm is not going to know what 349 00:22:14.800 --> 00:22:18.720 it is based on these like um these little like tasks are going to 350 00:22:18.720 --> 00:22:23.120 be so this is almost like a scratch pad um 351 00:22:23.120 --> 00:22:26.480 i understand your point but we are getting close like 352 00:22:26.480 --> 00:22:30.000 i know but it won't be able to know exactly but 353 00:22:30.000 --> 00:22:34.400 it can read the context of the project so if you already have like 354 00:22:34.400 --> 00:22:39.360 a users or a table that it's the same name it will probably assume that you 355 00:22:39.360 --> 00:22:43.120 are talking about it and usually it's going to be right 356 00:22:43.120 --> 00:22:46.720 but but i understand like uh it's it's it there is 357 00:22:46.720 --> 00:22:52.720 it's it's complicated to like how much are we like but but i really like this 358 00:22:52.720 --> 00:22:56.560 idea of like having the context builder and and like having this 359 00:22:56.560 --> 00:23:00.720 separated step because it's actually is like when we 360 00:23:00.720 --> 00:23:04.480 finish the task grid we kind of finish the 361 00:23:04.480 --> 00:23:08.240 planning phase in some sense the shaping phase we finish 362 00:23:08.240 --> 00:23:12.320 with the the task grid so it will initiate the build phase 363 00:23:12.320 --> 00:23:15.920 i think it's like uh there's a you build it out here 364 00:23:15.920 --> 00:23:19.600 and again this is if only there was a way to uh breadboard this 365 00:23:19.680 --> 00:23:25.200 and uh see this flow because we're kind of not listen going out of our uh but 366 00:23:25.200 --> 00:23:27.680 this is this is good i almost wonder if there's a way you can 367 00:23:27.680 --> 00:23:33.040 like click on this and say like um like prep for llm or 368 00:23:33.040 --> 00:23:36.800 something and it goes into a different mode how about i have a suggestion 369 00:23:36.800 --> 00:23:41.040 llm like you just add like like a copy icon next to like the top level like 370 00:23:41.040 --> 00:23:44.720 task grid the even the higher one oh i'm here 371 00:23:44.720 --> 00:23:47.040 yeah it is and then when you click that it just 372 00:23:47.040 --> 00:23:49.360 like copies as markdown you know like with each 373 00:23:49.360 --> 00:23:53.120 of all of this yeah all and then you can like delete 374 00:23:53.120 --> 00:23:56.320 if you want well if it knows the status like it 375 00:23:56.320 --> 00:24:00.400 sees this and it knows it's done it can obviously skip that and go to the next 376 00:24:00.400 --> 00:24:04.080 or just copy like everything and like as markdown you know like a 377 00:24:04.080 --> 00:24:10.640 checked box yeah uh one one interesting thing that we 378 00:24:10.640 --> 00:24:14.480 could do like uh it's similar to what uh hippo prompt 379 00:24:14.480 --> 00:24:18.640 to do uh can you see my screen i'd have to hang on 380 00:24:18.640 --> 00:24:24.800 one second let me okay i got it just wanted to share this 381 00:24:25.680 --> 00:24:28.640 we have a few things being shared the same okay let's see 382 00:24:28.640 --> 00:24:32.960 did that work i'm not sure 383 00:24:33.200 --> 00:24:36.400 i'm gonna stop sharing my we may be maxing out but i think you can have like 384 00:24:36.400 --> 00:24:38.960 eight people 385 00:24:39.920 --> 00:24:45.360 i can i can just screenshot it it's because it's it's on my side let me 386 00:24:45.360 --> 00:24:51.440 hang on there you go we should be good whoa 387 00:24:53.200 --> 00:24:55.680 okay 388 00:24:56.720 --> 00:25:00.720 we can do like the hula thing like 389 00:25:00.000 --> 00:25:10.000 I think we broke a restream, okay. 390 00:25:10.000 --> 00:25:15.000 I will send a screenshot on the team channel. 391 00:25:15.000 --> 00:25:16.000 Sure. 392 00:25:16.000 --> 00:25:23.160 Because it's like just an image is like, because Hippoprompt has this, this idea of the context 393 00:25:23.160 --> 00:25:24.160 builder. 394 00:25:24.360 --> 00:25:30.240 So you basically, you write some instructions and you can select specific files and you 395 00:25:30.240 --> 00:25:39.200 can then run a discovery mode that will basically scan your page and generate a plan for you 396 00:25:39.200 --> 00:25:43.120 using less tokens than usually the model uses to generate a plan. 397 00:25:43.120 --> 00:25:48.000 So it's maybe something along those lines, because it would be very powerful to like 398 00:25:48.000 --> 00:25:53.120 having a play mode that knows exactly the context of the code base. 399 00:25:53.120 --> 00:25:58.840 Like having the plan agent to know exactly the context of the code base that you're talking 400 00:25:58.840 --> 00:25:59.840 about. 401 00:25:59.840 --> 00:26:04.640 So, but yeah, very interesting. 402 00:26:04.640 --> 00:26:06.120 The future looks bright. 403 00:26:06.120 --> 00:26:07.120 Yeah. 404 00:26:07.120 --> 00:26:12.360 Let's see if this will, sorry guys, I messed up everything. 405 00:26:12.360 --> 00:26:13.360 That's exciting. 406 00:26:13.360 --> 00:26:17.400 Gennady should be like giving like more, like should be given like a training, you 407 00:26:17.400 --> 00:26:22.800 know, with like planning better, like you're using plan more better and all that stuff 408 00:26:22.800 --> 00:26:25.360 feels like you're on the cutting edge. 409 00:26:25.360 --> 00:26:35.440 It could be as simple as this, where we like click here, we have copy markdown and then 410 00:26:35.440 --> 00:26:37.000 it just pastes into like this. 411 00:26:37.000 --> 00:26:38.000 Sorry. 412 00:26:38.000 --> 00:26:41.280 And I think everybody's faces are over there. 413 00:26:41.280 --> 00:26:42.280 On top. 414 00:26:42.280 --> 00:26:43.280 Yeah. 415 00:26:44.240 --> 00:26:45.240 And something like that. 416 00:26:45.240 --> 00:26:48.000 I mean, yeah, these are like quick things we can start to add. 417 00:26:48.000 --> 00:26:53.200 I think in this mode, since this is a great place to experiment, like let's just put things 418 00:26:53.200 --> 00:26:59.040 in here, like have the same little copy icon up here and just grab everything, all the 419 00:26:59.040 --> 00:27:02.720 slices at once. 420 00:27:02.720 --> 00:27:06.080 Because you could say something like, Hey, I want to work on this project. 421 00:27:06.080 --> 00:27:07.400 Here's the status or something. 422 00:27:07.400 --> 00:27:11.400 And then of course the other thing would be really easy to do would be to have some sort 423 00:27:11.400 --> 00:27:12.400 of MCP. 424 00:27:12.400 --> 00:27:18.400 So we could go like use the Anovo dashboard MCP and just have it like look at what's going 425 00:27:18.400 --> 00:27:22.720 on in the, like just pull those things dynamically. 426 00:27:22.720 --> 00:27:25.080 So yeah, you could do that. 427 00:27:25.080 --> 00:27:29.080 I think that would be cool because to me, the reason we're doing this, the task grid 428 00:27:29.080 --> 00:27:35.920 is to actually separate shippable pieces or things that are somewhat separated and kind 429 00:27:35.920 --> 00:27:38.160 of pull the project into small pieces. 430 00:27:38.160 --> 00:27:40.760 So that's kind of the value of the task grid. 431 00:27:41.120 --> 00:27:43.280 We stole from Ryan. 432 00:27:43.280 --> 00:27:45.600 So I want to keep that. 433 00:27:45.600 --> 00:27:52.280 I do think there's a value in having a human separate things versus the LLM. 434 00:27:52.280 --> 00:27:56.000 Although it would be cool if you were working on a new feature and you wanted to sit in 435 00:27:56.000 --> 00:28:02.520 your cloud code in the terminal and actually have it generate the first draft of it, maybe 436 00:28:02.520 --> 00:28:07.280 based on various screenshots or whatever. 437 00:28:07.280 --> 00:28:09.000 Then you could kind of reorder it. 438 00:28:09.000 --> 00:28:10.000 I don't know. 439 00:28:10.120 --> 00:28:14.520 There's probably some like back and forth there where you can use it, but there's a 440 00:28:14.520 --> 00:28:16.320 huge value. 441 00:28:16.320 --> 00:28:20.640 I think something simple where we could like copy it and manually bring it forward and 442 00:28:20.640 --> 00:28:22.200 back I think is great. 443 00:28:22.200 --> 00:28:27.120 I think I'm kind of in favor of this like really dumb version right now because there's 444 00:28:27.120 --> 00:28:30.760 a lot of value when we're finishing a massive shaping session. 445 00:28:30.760 --> 00:28:38.440 Like we did go through this guy and I think we, I don't remember where we shaped it specifically, 446 00:28:38.440 --> 00:28:40.800 somewhere down here, maybe down here. 447 00:28:40.800 --> 00:28:45.320 Once we get kind of clear about what all the views are going to look like, and typically 448 00:28:45.320 --> 00:28:49.240 if there's two of us on the call, creating the task grid is actually very, very quick. 449 00:28:49.240 --> 00:28:53.760 It honestly takes maybe five or 10 minutes to manually do it. 450 00:28:53.760 --> 00:28:57.880 But then, so it's quite a great, it's a great way to capture specific action items 451 00:28:57.880 --> 00:29:00.960 now like based on the plan. 452 00:29:00.960 --> 00:29:06.000 So I want to, I don't know, I don't want to lose that human element of it and outsource 453 00:29:06.000 --> 00:29:11.040 all of it to the AI, although I totally see the value of like two-way communication, 454 00:29:11.040 --> 00:29:14.920 like once you're back into coding. 455 00:29:14.920 --> 00:29:16.560 So you can play with it. 456 00:29:16.560 --> 00:29:18.760 Let's start with the copy markdown. 457 00:29:18.760 --> 00:29:21.600 Maybe there's even just like a, like when you're hitting a new slice, you could just 458 00:29:21.600 --> 00:29:22.600 hit paste. 459 00:29:22.600 --> 00:29:28.600 Like you can like have the LLM create the markdown and just paste it into like a slice 460 00:29:28.600 --> 00:29:29.600 here. 461 00:29:29.600 --> 00:29:30.600 Something. 462 00:29:30.600 --> 00:29:31.600 Yeah, that's what I was thinking. 463 00:29:31.600 --> 00:29:36.800 So, you know, say you do ship this out as markdown to an LLM and then it's like working 464 00:29:36.800 --> 00:29:41.120 on some stuff and then say it does a couple bullet points. 465 00:29:41.120 --> 00:29:45.280 How would you then, you know, you almost want to have it generate the new markdown file 466 00:29:45.280 --> 00:29:48.840 with the ones checked off so you can put it back in here and not have to go through it 467 00:29:48.840 --> 00:29:52.360 and line by line, check out which ones it's actually, which tasks it's done and can kind 468 00:29:52.360 --> 00:29:53.360 of update it. 469 00:29:53.360 --> 00:29:54.360 Yeah. 470 00:29:54.360 --> 00:30:00.040 Generally as well, I'm doing like to me each, generally it's, it's almost like a one task 471 00:30:00.000 --> 00:30:02.960 to one commit ratio as well. 472 00:30:02.960 --> 00:30:05.480 I don't know how you guys work, but I mean, 473 00:30:05.480 --> 00:30:07.280 and these are pretty big things. 474 00:30:07.280 --> 00:30:09.280 Like you can almost see like I did, you know, 475 00:30:09.280 --> 00:30:10.760 search clients was one commit, 476 00:30:10.760 --> 00:30:13.280 search projects was a commit, get the first setup. 477 00:30:13.280 --> 00:30:15.000 This will be another commit here. 478 00:30:15.000 --> 00:30:16.600 So maybe there's something in there as well. 479 00:30:16.600 --> 00:30:20.840 It's like at the end of the commit, we like update the, 480 00:30:20.840 --> 00:30:23.080 and that's where the MCP idea could come from, 481 00:30:23.080 --> 00:30:26.680 where it could maybe like just update it for you. 482 00:30:27.680 --> 00:30:29.920 Because I think this would be cool if you could also, 483 00:30:29.920 --> 00:30:32.760 if it was live and it was kind of live synced, 484 00:30:32.760 --> 00:30:35.880 I could have this up in one window and my, 485 00:30:35.880 --> 00:30:39.640 and have Claude over here and be telling it. 486 00:30:39.640 --> 00:30:42.000 And then I could kind of zoom out and sort of see stuff, 487 00:30:42.000 --> 00:30:45.080 literally start to like visually get finished. 488 00:30:45.080 --> 00:30:45.920 It'd be pretty magical. 489 00:30:45.920 --> 00:30:47.440 It'd be very satisfying. 490 00:30:47.440 --> 00:30:48.760 Very satisfying. 491 00:30:48.760 --> 00:30:51.440 You just like see this like dynamically getting like, 492 00:30:51.440 --> 00:30:54.920 you know, multiple, like just jumping around. 493 00:30:54.920 --> 00:30:57.960 That's what we're trying to maximize is satisfaction. 494 00:30:57.960 --> 00:30:59.360 Yeah. 495 00:30:59.400 --> 00:31:00.240 But I do, yeah. 496 00:31:00.240 --> 00:31:03.120 I think we ballooned it into a completely different thing, 497 00:31:03.120 --> 00:31:06.520 but it is really interesting what you could do with it. 498 00:31:06.520 --> 00:31:07.360 Yeah. 499 00:31:07.360 --> 00:31:08.280 Yeah. 500 00:31:08.280 --> 00:31:12.000 I think it's good and we can always, 501 00:31:14.360 --> 00:31:15.440 you know, go back to this. 502 00:31:15.440 --> 00:31:18.240 Like, this would be a good moment 503 00:31:18.240 --> 00:31:21.880 if we wanted to start here. 504 00:31:21.880 --> 00:31:24.760 This is how I'll always ends up 505 00:31:24.760 --> 00:31:27.360 with a little breadboarding something. 506 00:31:30.360 --> 00:31:31.920 Oh, we have like a, 507 00:31:38.840 --> 00:31:40.360 bear with me as we go. 508 00:31:41.520 --> 00:31:42.640 And we also have a, 509 00:31:52.560 --> 00:31:53.400 yeah. 510 00:31:53.400 --> 00:31:54.240 If you guys have any thought, 511 00:31:54.240 --> 00:31:55.080 I'm just going to do this while we're talking. 512 00:31:55.080 --> 00:31:57.920 Cause I think there's something we can capture. 513 00:31:57.920 --> 00:31:58.760 Yeah. 514 00:31:58.760 --> 00:32:00.680 I was thinking about, you know, where to put the, 515 00:32:00.680 --> 00:32:02.320 where's like the highest leverage 516 00:32:02.320 --> 00:32:05.160 to put in like another AI's like slice 517 00:32:05.160 --> 00:32:08.880 where we just like keep doing with the humans. 518 00:32:08.880 --> 00:32:11.680 Our first, I think the big one is definitely 519 00:32:11.680 --> 00:32:15.600 like shaping current system, you know, 520 00:32:15.600 --> 00:32:17.440 keep doing human, like framing 521 00:32:18.360 --> 00:32:21.720 and keep doing human is like shaping the next, 522 00:32:21.720 --> 00:32:24.680 like the, what it could look like, 523 00:32:24.680 --> 00:32:26.440 but like for shaping current system. 524 00:32:26.440 --> 00:32:28.480 Cause there's a lot of times like unknowns, 525 00:32:28.480 --> 00:32:33.160 there's a lot of code to read and you don't catch stuff. 526 00:32:33.160 --> 00:32:37.080 So with like AI examining the code, 527 00:32:37.080 --> 00:32:42.080 are you able to like actually catch way more and yeah, 528 00:32:42.400 --> 00:32:44.680 to get like better shaping 529 00:32:44.680 --> 00:32:46.320 that we're not like missing anything. 530 00:32:46.320 --> 00:32:47.160 Yeah. I think it is. 531 00:32:47.160 --> 00:32:49.160 It's kind of like you do the first draft 532 00:32:50.240 --> 00:32:51.360 and then it would be great to like, 533 00:32:51.360 --> 00:32:53.680 Hey, I want to build this task grid. 534 00:32:53.680 --> 00:32:56.600 Then we kind of kick that over to the, 535 00:32:56.600 --> 00:32:58.280 the sort of planning mode. 536 00:32:58.280 --> 00:33:00.000 And if it could sort of read out of here, 537 00:33:00.000 --> 00:33:02.120 here's what the initial plan was, 538 00:33:02.120 --> 00:33:04.480 then it could challenge those ideas and say, 539 00:33:04.480 --> 00:33:06.560 Hey, there's probably here's five other tasks 540 00:33:06.560 --> 00:33:08.440 or edge cases you didn't think of. 541 00:33:08.440 --> 00:33:10.520 Okay, let's go ahead and add those tasks. 542 00:33:10.520 --> 00:33:12.200 Maybe then it goes from, you know, 543 00:33:12.200 --> 00:33:14.440 four items to like eight items. 544 00:33:14.440 --> 00:33:15.640 And now I have a much better idea 545 00:33:15.640 --> 00:33:17.640 of all the things that needs to be done. 546 00:33:19.000 --> 00:33:20.720 And then we kind of get ripped through all of those things 547 00:33:20.720 --> 00:33:21.560 one at a time. 548 00:33:21.560 --> 00:33:22.960 I do think there's a good, 549 00:33:23.120 --> 00:33:25.640 it's almost like we have our process as well as a, 550 00:33:25.640 --> 00:33:26.480 as a team. 551 00:33:26.480 --> 00:33:27.760 I think it's good to have, 552 00:33:27.760 --> 00:33:31.640 even if somewhat of a dialed in process for the LLM as well 553 00:33:31.640 --> 00:33:35.880 to go from, you know, here's the task we go through each, 554 00:33:35.880 --> 00:33:37.280 you do one thing at a time. 555 00:33:37.280 --> 00:33:39.240 Don't try to build all eight things at once. 556 00:33:39.240 --> 00:33:42.480 I mean, you could, but like one at a time, check it. 557 00:33:42.480 --> 00:33:45.880 We're doing verification at each step 558 00:33:45.880 --> 00:33:48.800 and then we commit things for every step. 559 00:33:48.800 --> 00:33:49.880 And maybe we have like, 560 00:33:49.880 --> 00:33:54.280 we could use and use the cloud skills as well 561 00:33:54.280 --> 00:33:55.520 to have a way where it can like, 562 00:33:55.520 --> 00:33:59.320 hey, it knows that we need to go find this project. 563 00:33:59.320 --> 00:34:02.280 You'd have like, it's not a one-to-one match of like, 564 00:34:02.280 --> 00:34:05.280 this project is matched to one repo. 565 00:34:05.280 --> 00:34:08.760 It's like, we just have to have a way to connect 566 00:34:08.760 --> 00:34:11.560 like this to the Innovo dashboard repo, 567 00:34:11.560 --> 00:34:13.840 but there could be 10 other projects similar 568 00:34:13.840 --> 00:34:15.880 that also connect to the same repo. 569 00:34:15.880 --> 00:34:17.199 So I don't know the, how that piece would work, 570 00:34:17.199 --> 00:34:18.040 but to me it's- 571 00:34:18.120 --> 00:34:20.800 To connect a client to a repo. 572 00:34:20.800 --> 00:34:25.719 So if a project is from a client, then it's to that repo. 573 00:34:25.719 --> 00:34:26.719 Unless it's one client. 574 00:34:26.719 --> 00:34:29.280 We're assuming that each client only has one repo. 575 00:34:30.719 --> 00:34:31.560 Which- 576 00:34:31.560 --> 00:34:34.199 Yeah, in some cases it doesn't, it has more than one. 577 00:34:34.199 --> 00:34:35.400 Yeah, so like if we're gonna try, 578 00:34:35.400 --> 00:34:37.719 we're gonna have two repos for the same project. 579 00:34:37.719 --> 00:34:41.239 So it breaks down quick, but I do think there's a, 580 00:34:41.239 --> 00:34:44.480 I think if you had an MCP where it went and grabbed, 581 00:34:45.320 --> 00:34:48.120 like had even a wizard that was like, 582 00:34:48.120 --> 00:34:50.239 is this for this client of this client? 583 00:34:50.239 --> 00:34:52.880 Well, then you just like search for what the project is 584 00:34:52.880 --> 00:34:53.960 or some way to connect. 585 00:34:53.960 --> 00:34:57.040 Like I'm working on like specifically, 586 00:34:57.040 --> 00:35:00.240 like we give it exactly that name and then it can go. 587 00:35:00.000 --> 00:35:02.840 go and pull tasks based on the name or something. 588 00:35:02.840 --> 00:35:04.160 I don't know. 589 00:35:04.160 --> 00:35:05.800 It has to be something like that. 590 00:35:05.800 --> 00:35:08.560 But the other thing we didn't talk about, 591 00:35:08.560 --> 00:35:10.280 this was all getting it from the LLM back here. 592 00:35:10.280 --> 00:35:12.760 Like I was thinking all of you guys would be very interested 593 00:35:12.760 --> 00:35:15.240 in getting it from here and back into Notion. 594 00:35:15.240 --> 00:35:16.780 But since that's not like the first thing 595 00:35:16.780 --> 00:35:18.940 you all thought of, I think we skipped that. 596 00:35:21.120 --> 00:35:22.720 Now you can just copy the link. 597 00:35:24.640 --> 00:35:25.960 Yeah, exactly. 598 00:35:27.880 --> 00:35:29.760 Anyway, very good. 599 00:35:30.280 --> 00:35:34.440 Okay, so the other thing I have is a little, 600 00:35:34.440 --> 00:35:38.440 if you guys are, I know we looked at this 601 00:35:38.440 --> 00:35:41.800 for the team stuff here. 602 00:35:41.800 --> 00:35:43.860 And so I have this little like privacy mode. 603 00:35:43.860 --> 00:35:45.880 So like any dollar amounts here, 604 00:35:45.880 --> 00:35:48.120 if you go to any of our other screens, 605 00:35:48.120 --> 00:35:49.600 it puts the whole thing into a privacy mode 606 00:35:49.600 --> 00:35:51.160 and everything gets blurred, 607 00:35:51.160 --> 00:35:53.100 which makes it quite nice for demos. 608 00:35:54.120 --> 00:35:57.340 So the other thing feature here, if you guys have, 609 00:35:58.340 --> 00:36:02.140 you can go in and set your availability here. 610 00:36:02.140 --> 00:36:04.180 So you can click in and set the availability 611 00:36:04.180 --> 00:36:05.700 for upcoming months of how many weeks 612 00:36:05.700 --> 00:36:08.780 you wanna spend or work. 613 00:36:08.780 --> 00:36:10.820 And then we can start to predict, 614 00:36:11.860 --> 00:36:14.620 fill in those projects moving forward. 615 00:36:14.620 --> 00:36:16.820 We can try to go a few months in the future. 616 00:36:18.380 --> 00:36:21.900 And this should help like clear up some confusion and stuff 617 00:36:21.900 --> 00:36:24.980 if there's like a debate on which month 618 00:36:24.980 --> 00:36:25.900 something's happening. 619 00:36:25.900 --> 00:36:26.720 Was it one week? 620 00:36:26.720 --> 00:36:27.560 Was it two weeks? 621 00:36:27.560 --> 00:36:29.180 What's the date of when to expect this? 622 00:36:29.180 --> 00:36:30.260 It does actually have the date 623 00:36:30.260 --> 00:36:32.880 of which payment's coming when and amounts and all that. 624 00:36:32.880 --> 00:36:37.380 So should be helpful there. 625 00:36:37.380 --> 00:36:39.700 So, and I'll add some more screens, 626 00:36:39.700 --> 00:36:41.540 maybe the status one and other things, 627 00:36:41.540 --> 00:36:44.020 but I don't know if there's any other thoughts 628 00:36:44.020 --> 00:36:46.940 between you guys, if you had looked at this yet. 629 00:36:50.740 --> 00:36:52.500 Oh, I was, one question. 630 00:36:53.460 --> 00:36:57.020 On the Superbase, there is sensitive data 631 00:36:57.020 --> 00:37:01.820 or can we have access to the database? 632 00:37:03.060 --> 00:37:04.540 We can have, I think it needs to be through 633 00:37:04.540 --> 00:37:07.620 like something controlled, like the API or the MCP. 634 00:37:09.540 --> 00:37:10.380 Yeah, I would- 635 00:37:10.380 --> 00:37:12.500 No, I mean like the Superbase project itself, 636 00:37:12.500 --> 00:37:14.900 like I don't have access to it, I'm not sure. 637 00:37:15.780 --> 00:37:17.780 We are supposed to, yeah. 638 00:37:17.780 --> 00:37:18.620 Okay. 639 00:37:19.140 --> 00:37:19.980 No. 640 00:37:21.300 --> 00:37:24.300 Just because I wanted to play a bit with it during- 641 00:37:24.300 --> 00:37:26.260 Yeah, I think one of the things I was gonna do 642 00:37:26.260 --> 00:37:28.300 is make like a beta version of it 643 00:37:28.300 --> 00:37:30.460 so we could hack it a little bit 644 00:37:30.460 --> 00:37:33.060 and then not have to worry about breaking something. 645 00:37:34.540 --> 00:37:39.540 Yeah, because I think like I can run like Superbase locally 646 00:37:40.260 --> 00:37:43.380 so I can make all the changes and then like, 647 00:37:43.380 --> 00:37:47.980 once it's good to go, I can apply it to production. 648 00:37:47.980 --> 00:37:51.780 But I wanted to play around with it a little bit. 649 00:37:51.780 --> 00:37:53.820 Yeah, I think like a, I was gonna experiment 650 00:37:53.820 --> 00:37:58.020 with the MCP stuff first to see if we could go 651 00:38:00.020 --> 00:38:05.020 and basically access the entire app from your terminal 652 00:38:05.740 --> 00:38:07.820 or let Claude access the app. 653 00:38:07.820 --> 00:38:09.420 Because then we can have kind of a controlled way 654 00:38:09.420 --> 00:38:11.260 that they can like update tasks 655 00:38:11.260 --> 00:38:13.420 but maybe they can't delete projects, for example, 656 00:38:13.420 --> 00:38:16.020 or have some security around it. 657 00:38:16.700 --> 00:38:19.060 So I can, that was kind of my next thing 658 00:38:19.060 --> 00:38:21.140 was to play with that, but. 659 00:38:21.140 --> 00:38:23.020 Yeah, definitely do the beta thing 660 00:38:23.020 --> 00:38:26.100 because like given access to like us, especially Jonathan, 661 00:38:26.100 --> 00:38:28.140 I think he'll like build crazy stuff. 662 00:38:28.140 --> 00:38:31.260 Well, you guys don't think you have enough work to do. 663 00:38:31.260 --> 00:38:32.340 I don't know. 664 00:38:35.460 --> 00:38:38.340 There's always space for a new side project. 665 00:38:39.300 --> 00:38:40.140 Here's the thing. 666 00:38:40.140 --> 00:38:42.380 Okay, here's my thing. 667 00:38:42.380 --> 00:38:44.340 I do think it's extremely valuable 668 00:38:44.380 --> 00:38:47.620 for every single one of you to have some side project 669 00:38:47.620 --> 00:38:51.100 to be working on because it is insanely freeing 670 00:38:51.100 --> 00:38:53.500 to just be able to make these types of decisions 671 00:38:53.500 --> 00:38:54.380 and try stuff. 672 00:38:54.380 --> 00:38:56.380 Because when we're working with clients, 673 00:38:56.380 --> 00:39:00.180 we're in this extremely like cautious line by line, 674 00:39:00.180 --> 00:39:03.980 can't get anything wrong, don't wanna break production. 675 00:39:03.980 --> 00:39:06.940 But like if I, I hack with LM 676 00:39:06.940 --> 00:39:09.380 and change those edge functions all the time 677 00:39:09.380 --> 00:39:12.020 and they just run and they update 500 projects. 678 00:39:12.020 --> 00:39:14.700 And like if we do, like what's the worst that could happen? 679 00:39:14.700 --> 00:39:17.180 Like I accidentally delete them all in Notion. 680 00:39:17.180 --> 00:39:19.100 Maybe I know that's the worst thing I can restore them, 681 00:39:19.100 --> 00:39:20.900 but I don't know. 682 00:39:20.900 --> 00:39:24.500 Like it's not, it gives you a lot of flexibility 683 00:39:24.500 --> 00:39:25.860 to play with it. 684 00:39:25.860 --> 00:39:28.660 So I highly recommend having something 685 00:39:30.140 --> 00:39:32.820 and just lets you like experiment. 686 00:39:32.820 --> 00:39:34.980 Cause I've learned a lot here that I'm now like 687 00:39:34.980 --> 00:39:36.220 when I go work on tribe, 688 00:39:36.220 --> 00:39:37.860 I'm like thinking of things a little differently. 689 00:39:37.860 --> 00:39:40.500 Like we should have a command palette in tribe. 690 00:39:40.500 --> 00:39:45.060 Like that should be like a one hour reactive task. 691 00:39:45.060 --> 00:39:47.660 You can just quickly jump to a user 692 00:39:47.660 --> 00:39:51.380 or jump to like a group or a course or something. 693 00:39:51.380 --> 00:39:53.660 I didn't realize it was so simple. 694 00:39:53.660 --> 00:39:54.980 And then once you add it, you're like, 695 00:39:54.980 --> 00:39:57.420 oh wow, this turns it like for the power users. 696 00:39:57.420 --> 00:40:00.100 It's just like a game changer for power users. 697 00:40:00.000 --> 00:40:08.120 Hopefully, that's actually a great idea for we can add it to reactive and I can take a 698 00:40:08.120 --> 00:40:15.520 look like, yeah, I have some stuff to finish with, but I could take a look. 699 00:40:15.520 --> 00:40:16.520 Nice. 700 00:40:16.520 --> 00:40:17.520 Awesome. 701 00:40:17.520 --> 00:40:18.520 Great. 702 00:40:18.520 --> 00:40:19.520 Great. 703 00:40:19.520 --> 00:40:20.520 That's it. 704 00:40:20.520 --> 00:40:21.520 Any other thoughts? 705 00:40:22.520 --> 00:40:26.480 Just one comment. 706 00:40:26.480 --> 00:40:31.520 It's not very related, but it's something interesting that I learned regarding this 707 00:40:31.520 --> 00:40:33.520 automation processes. 708 00:40:33.520 --> 00:40:41.520 It's like, I was having an issue with Tribe today earlier, where specifically the deployed 709 00:40:41.520 --> 00:40:49.360 version by CodeMagick was crashing and getting stuck on the launch screen, but this was not 710 00:40:49.360 --> 00:40:54.520 happening on the debug mode and this was for a very specific way that Firebase starts 711 00:40:54.520 --> 00:40:55.520 the project. 712 00:40:55.520 --> 00:40:56.520 But that's not the point. 713 00:40:56.520 --> 00:41:05.040 The point is that the way I fixed it was by allowing Clouder code to connect with the 714 00:41:05.040 --> 00:41:08.800 Chrome console using the Puppeteer. 715 00:41:08.800 --> 00:41:16.360 So this way, I basically said to Clouder, hey, iterate over this project until this 716 00:41:16.360 --> 00:41:24.360 error is not a thing anymore, because every interaction needed to generate a build release 717 00:41:24.360 --> 00:41:31.240 and serve it locally on my local host, because it was the release mode that was the problem. 718 00:41:31.240 --> 00:41:37.960 And the debugging process was basically like generating the release, open it, seeing the 719 00:41:37.960 --> 00:41:42.960 Chrome console and making the changes according to what I was seeing. 720 00:41:42.960 --> 00:41:47.240 And what I did was I basically said, hey, now you can see the console yourself. 721 00:41:47.240 --> 00:41:52.440 So iterate over this until this is ready for me to test. 722 00:41:52.440 --> 00:41:58.200 And this made my time a little bit better fixing this. 723 00:41:58.200 --> 00:42:00.240 So very interesting stuff. 724 00:42:00.240 --> 00:42:02.240 I didn't hear about it before. 725 00:42:02.240 --> 00:42:03.640 It's called Puppeteer. 726 00:42:03.640 --> 00:42:04.640 I did that. 727 00:42:04.640 --> 00:42:05.640 It sounds great. 728 00:42:05.640 --> 00:42:06.640 But it's very, very interesting. 729 00:42:06.640 --> 00:42:13.880 So you just had the AI run the build command, and then it waits for the build command to 730 00:42:13.880 --> 00:42:16.480 complete, and then it runs Puppeteer? 731 00:42:16.480 --> 00:42:17.480 Exactly. 732 00:42:17.480 --> 00:42:18.480 Cool. 733 00:42:18.480 --> 00:42:22.880 It waits, then it runs open Chrome with the Puppeteer on that specific task. 734 00:42:22.880 --> 00:42:23.880 Fully autonomous. 735 00:42:23.880 --> 00:42:24.880 Yeah. 736 00:42:24.880 --> 00:42:33.560 It opened the Chrome, tested, saw the problem, closed it, come back, made the iteration, 737 00:42:33.560 --> 00:42:38.240 run Chrome again, and did this for like four or five times until it reached a point where 738 00:42:38.240 --> 00:42:39.240 it uploaded. 739 00:42:39.240 --> 00:42:41.480 And I was like, man, that's great. 740 00:42:41.480 --> 00:42:42.480 That's impressive. 741 00:42:42.480 --> 00:42:45.480 You can also use Playwright, I think, a similar console. 742 00:42:45.480 --> 00:42:46.480 Yeah, I think it's similar. 743 00:42:46.480 --> 00:42:47.480 I've done that before. 744 00:42:47.480 --> 00:42:54.680 Because if you have UI bugs, it takes like a screenshot, or it will navigate, like, login, 745 00:42:54.680 --> 00:42:59.520 go to this page, click on this thing, look at the screenshot, analyze it, and it kind 746 00:42:59.520 --> 00:43:03.200 of gets in a little feedback loop like that. 747 00:43:03.840 --> 00:43:06.560 Do you try it with a Flutter app, the Playwright? 748 00:43:06.560 --> 00:43:09.120 I'm trying to remember what it is. 749 00:43:09.120 --> 00:43:14.240 Because I'm not sure if it will find, because the Flutter doesn't have the DOM. 750 00:43:14.240 --> 00:43:19.840 Yeah, we have like just the canvas, so we don't have the HTML components for the Playwright 751 00:43:19.840 --> 00:43:24.160 to navigate, so I'm not sure if it will navigate properly. 752 00:43:24.160 --> 00:43:28.520 But that's one of the problems with AI and Flutter, like, not having the DOM. 753 00:43:28.520 --> 00:43:34.440 It's cool, but it's like, for some stuff, but for this point specific, it's very noisy, 754 00:43:34.440 --> 00:43:40.120 because all the IC is just like a bunch of unreadable code. 755 00:43:40.120 --> 00:43:41.120 But yeah. 756 00:43:41.120 --> 00:43:44.240 That's why we send all the Flutter projects to Gennady. 757 00:43:44.240 --> 00:43:48.680 Thank you, thank you. 758 00:43:48.680 --> 00:43:53.760 I'm thankful for the difficulty of using Canva in Flutter. 759 00:43:53.760 --> 00:43:54.760 Awesome. 760 00:43:54.760 --> 00:43:57.920 We'll probably get back to, like, some other training. 761 00:43:58.320 --> 00:44:03.440 I think this is probably good on the agency dashboard series. 762 00:44:03.440 --> 00:44:05.760 And then obviously we can keep using it. 763 00:44:05.760 --> 00:44:07.760 If you guys have suggestions, let me know. 764 00:44:07.760 --> 00:44:14.160 I think I may make a new channel in Slack just for this, like, almost as its own app 765 00:44:14.160 --> 00:44:18.440 to give thoughts to, versus blasting you guys on the team channel for this. 766 00:44:18.440 --> 00:44:21.560 But yeah, we'll keep testing it out. 767 00:44:21.560 --> 00:44:26.320 And at least it's kind of in a space where we could start to use it, I think. 768 00:44:26.320 --> 00:44:32.800 And now it's less of a concept and more of something that's, like, V1, I would say. 769 00:44:32.800 --> 00:44:37.120 So I think what I'd love to do next, maybe, is kind of almost start at the very beginning 770 00:44:37.120 --> 00:44:38.720 of this project. 771 00:44:38.720 --> 00:44:43.040 And just, like, if you guys are starting a side project, kind of here's how, in one hour, 772 00:44:43.040 --> 00:44:48.280 I would go from, like, a totally blank repo to, like, something deployed with auth and 773 00:44:48.280 --> 00:44:50.960 some basic database in Superbase. 774 00:44:51.120 --> 00:44:56.960 And then maybe walk through, like, Mark Lau's, like, Ship Fast template and some quick things 775 00:44:56.960 --> 00:45:00.000 you can do to fix it, like, integrating, you know... 776 00:45:00.000 --> 00:45:02.480 Google off and things like that really, really quick. 777 00:45:03.000 --> 00:45:07.320 Um, cause the, that stuff you shouldn't be spending any time on, uh, you should 778 00:45:07.320 --> 00:45:10.960 be spending your time on like the actual application and what problems 779 00:45:10.960 --> 00:45:11.720 you're solving and such. 780 00:45:11.720 --> 00:45:14.760 So, um, yeah, definitely worth it. 781 00:45:15.300 --> 00:45:18.980 Uh, I think the idea of like just building something yourself in your 782 00:45:18.980 --> 00:45:23.520 own, it's just, it gets you through the reps of going from nothing to something. 783 00:45:23.780 --> 00:45:27.720 And the other thing I was very helpful was when I'm working on my own thing, I 784 00:45:28.240 --> 00:45:32.680 found myself going back to the same tools of using the framing to use 785 00:45:32.680 --> 00:45:34.560 the shaping, to use the task grid. 786 00:45:34.880 --> 00:45:39.400 Um, it's a great test to see if those things are actually useful because 787 00:45:39.400 --> 00:45:42.060 when you're using your own stuff, you're like, oh, I'll just hack 788 00:45:42.060 --> 00:45:43.960 it or vibe code or whatever. 789 00:45:44.240 --> 00:45:47.800 Um, but I found like, oh, I actually feel overwhelmed by this project. 790 00:45:47.840 --> 00:45:48.960 Oh, well, there's a tool for that. 791 00:45:48.960 --> 00:45:50.240 Like that's what the shaping's for. 792 00:45:50.240 --> 00:45:51.640 That's what the task grid's for. 793 00:45:52.080 --> 00:45:57.300 Um, so I felt more confident in our, in our system as we went into it. 794 00:45:57.300 --> 00:46:00.020 So all good stuff, but thanks for joining us guys. 795 00:46:00.020 --> 00:46:03.140 And, um, yeah, we'll, uh, we'll jump into something else next week. 796 00:46:04.180 --> 00:46:04.540 Thanks. 797 00:46:04.980 --> 00:46:05.540 That was great stuff. 798 00:46:05.580 --> 00:46:06.220 Good stuff.